Merge pull request #98 from maglevhq/feat-rte-superscript

feat: add the superscript command in the RTE input

app/frontend/editor/components/dynamic-form/dynamic-input.vue

@@ -29,7 +29,7 @@
       :isFocused="isFocused"
       :lineBreak="options.lineBreak"
       :rows="options.nbRows"
-      :table="options.htmlTable"
+      :extraExtensions="options.extraExtensions" 
       @blur="$emit('blur')"
       v-model="inputValue"
       v-if="setting.type == 'text' && options.html"

app/frontend/editor/components/kit/rich-text-input.vue

@@ -9,15 +9,19 @@
     </div>
     <div class="mt-1">
       <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-        <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1">
+        <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">
           <editor-block-button
             :commands="commands"
             :isActive="isActive"
             class="relative"
             v-if="!lineBreak"
           />
 
-          <editor-format-buttons :commands="commands" :isActive="isActive" />
+          <editor-format-buttons 
+            :commands="commands" 
+            :isActive="isActive"
+            :extraExtensions="extraExtensions"
+          />
 
           <editor-list-buttons
             :commands="commands"
@@ -35,7 +39,7 @@
             :commands="commands"
             :isActive="isActive"
             class="relative"
-            v-if="!lineBreak && table"
+            v-if="!lineBreak && extraExtensions.table"
           />
         </div>
       </editor-menu-bar>
@@ -69,11 +73,12 @@ import {
   Table,
   TableHeader,
   TableCell,
-  TableRow,
+  TableRow
 } from 'tiptap-extensions'
 import Doc from './rich-text-input/extensions/Doc'
 import LineBreak from './rich-text-input/extensions/LineBreak'
 import Link from './rich-text-input/extensions/marks/Link'
+import Superscript from './rich-text-input/extensions/marks/Superscript'
 import EditorBlockButton from './rich-text-input/block-button.vue'
 import EditorFormatButtons from './rich-text-input/format-buttons.vue'
 import EditorListButtons from './rich-text-input/list-buttons.vue'
@@ -98,7 +103,7 @@ export default {
     value: { type: String },
     lineBreak: { type: Boolean, default: false },
     rows: { type: Number, default: 2 },
-    table: { type: Boolean, default: false },
+    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
   },
   data() {
     return { editor: null }
@@ -151,6 +156,7 @@ export default {
         new Underline(),
         new Strike(),
         new Link({ openOnClick: false, target: null }),
+        new Superscript(),
         new History(),
       ]
     },

app/frontend/editor/components/kit/rich-text-input/extensions/marks/Superscript.js

@@ -0,0 +1,43 @@
+import { Mark } from 'tiptap'
+import { toggleMark, markInputRule, markPasteRule } from 'tiptap-commands'
+
+export default class Superscript extends Mark {
+
+  get name() {
+    return 'sup'
+  }
+
+  get schema() {
+    return {
+      parseDOM: [
+        {
+          tag: 'sup',
+        },        
+      ],
+      toDOM: () => ['sup', 0],
+    }
+  }
+
+  keys({ type }) {
+    return {
+      'Mod-^': toggleMark(type),
+    }
+  }
+
+  commands({ type }) {
+    return () => toggleMark(type)
+  }
+
+  // NOTE: "^^" are used as delimiters to trigger the superscript formatting
+  inputRules({ type }) {
+    return [
+      markInputRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)$/, type),
+    ]
+  }
+
+  pasteRules({ type }) {
+    return [
+      markPasteRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)/g, type),
+    ]
+  }
+}

app/frontend/editor/components/kit/rich-text-input/format-buttons.vue

@@ -22,6 +22,13 @@
       :isActive="isActive.strike()"
       @click="commands.strike"
     />
+    <editor-menu-button
+      iconName="format-superscript"
+      class="rounded-r-sm"
+      :isActive="isActive.sup()"
+      @click="commands.sup"
+      v-if="extraExtensions.superscript"
+    />
   </div>
 </template>
 
@@ -34,6 +41,7 @@ export default {
   props: {
     commands: { type: Object, required: true },
     isActive: { type: Object, required: true },
-  },
+    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
+  }
 }
 </script>