feat: subscript and superscript extensions

package.json

@@ -56,6 +56,8 @@
     "@tiptap/extension-character-count": "^2.0.2",
     "@tiptap/extension-highlight": "^2.0.2",
     "@tiptap/extension-placeholder": "^2.0.2",
+    "@tiptap/extension-subscript": "^2.0.2",
+    "@tiptap/extension-superscript": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
     "@tiptap/starter-kit": "^2.0.2",

src/extensions.ts

@@ -2,6 +2,8 @@ import type { Extensions } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { Underline } from "@tiptap/extension-underline";
 import { Highlight } from "@tiptap/extension-highlight";
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
 import { CharacterCount } from "@tiptap/extension-character-count";
 
-export const extensions: Extensions = [StarterKit, Underline, Highlight, CharacterCount];
+export const extensions: Extensions = [StarterKit, Underline, Highlight, Subscript, Superscript, CharacterCount];

src/icons/subscript.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+      d="M5.59567 4L10.5 9.92831L15.4043 4H18L11.7978 11.4971L18 18.9943V19H15.4091L10.5 13.0659L5.59092 19H3V18.9943L9.20216 11.4971L3 4H5.59567ZM21.8 16C21.8 15.5582 21.4418 15.2 21 15.2C20.5582 15.2 20.2 15.5582 20.2 16C20.2 16.0762 20.2107 16.15 20.2306 16.2198L19.0765 16.5496C19.0267 16.375 19 16.1906 19 16C19 14.8954 19.8954 14 21 14C22.1046 14 23 14.8954 23 16C23 16.5727 22.7593 17.0892 22.3735 17.4538L20.7441 19H23V20H19V19L21.5507 16.5803C21.7042 16.4345 21.8 16.2284 21.8 16Z"
+    ></path>
+  </svg>
+</template>

src/icons/superscript.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+      d="M5.59567 5L10.5 10.9283L15.4043 5H18L11.7978 12.4971L18 19.9943V20H15.4091L10.5 14.0659L5.59092 20H3V19.9943L9.20216 12.4971L3 5H5.59567ZM21.5507 6.5803C21.7042 6.43453 21.8 6.22845 21.8 6C21.8 5.55817 21.4418 5.2 21 5.2C20.5582 5.2 20.2 5.55817 20.2 6C20.2 6.07624 20.2107 6.14999 20.2306 6.21983L19.0765 6.54958C19.0267 6.37497 19 6.1906 19 6C19 4.89543 19.8954 4 21 4C22.1046 4 23 4.89543 23 6C23 6.57273 22.7593 7.08923 22.3735 7.45384L20.7441 9H23V10H19V9L21.5507 6.5803V6.5803Z"
+    ></path>
+  </svg>
+</template>

src/tiptap-editor.vue

@@ -78,6 +78,30 @@
         <icon-underline />
       </v-button>
 
+      <v-button
+        v-if="editorExtensions.includes('superscript')"
+        v-tooltip="t('wysiwyg_options.superscript') + ' - ' + translateShortcut(['meta', '.'])"
+        small
+        icon
+        :disabled="props.disabled"
+        :active="editor.isActive('superscript')"
+        @click="editor.chain().focus().toggleSuperscript().run()"
+      >
+        <icon-superscript />
+      </v-button>
+
+      <v-button
+        v-if="editorExtensions.includes('subscript')"
+        v-tooltip="t('wysiwyg_options.subscript') + ' - ' + translateShortcut(['meta', ','])"
+        small
+        icon
+        :disabled="props.disabled"
+        :active="editor.isActive('subscript')"
+        @click="editor.chain().focus().toggleSubscript().run()"
+      >
+        <icon-subscript />
+      </v-button>
+
       <v-button
         v-if="editorExtensions.includes('code')"
         v-tooltip="t('wysiwyg_options.codeblock') + ' - ' + translateShortcut(['meta', 'e'])"
@@ -406,6 +430,8 @@ import IconDoubleQuotesR from "./icons/double-quotes-r.vue";
 import IconTextWrap from "./icons/text-wrap.vue";
 import IconFormatClear from "./icons/format-clear.vue";
 import IconMarkPenLine from "./icons/mark-pen-line.vue";
+import IconSubscript from "./icons/subscript.vue";
+import IconSuperscript from "./icons/superscript.vue";
 
 const { t } = useI18n({ messages });