feat(tiptap): add supersub (#1855)

* feat(super/sub): add super/sub scripts

* feat(assetse): add super/sub

* feat(menubar): add super/sub

package.json

@@ -38,6 +38,8 @@
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.12",
     "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.2.4",
+    "@tiptap/extension-superscript": "^2.2.4",
     "@tiptap/extension-table": "^2.1.12",
     "@tiptap/extension-table-cell": "^2.1.12",
     "@tiptap/extension-table-header": "^2.1.12",
@@ -167,8 +169,8 @@
     "@cypress/webpack-preprocessor": "^5.17.0",
     "@jest/globals": "^27.0.3",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-actions": "^8.0.0",
     "@playwright/test": "^1.41.1",
+    "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-docs": "^7.0.24",
     "@storybook/addon-essentials": "^7.0.24",
     "@storybook/addon-links": "^7.0.24",

src/assets/icons/BxSubscript.tsx

@@ -0,0 +1,23 @@
+export const BxSubscript = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.17707 6.22064H5.34855L7.64119 9.73416L9.96178 6.22064L12.0028 6.26724L8.63839 11.0855L12.1519 16.202H10.0084L7.52935 12.4555L5.12488 16.202H3L6.51351 11.0855L3.17707 6.22064Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M15.2089 13.7031C15.0901 13.561 14.92 13.4899 14.6987 13.4899C14.3958 13.4899 14.1896 13.6029 14.0801 13.8289C14.0172 13.9594 13.9799 14.1668 13.9683 14.451H13.0002C13.0165 14.02 13.0946 13.6717 13.2343 13.4061C13.5 12.9005 13.9718 12.6477 14.6498 12.6477C15.1857 12.6477 15.612 12.7968 15.9289 13.095C16.2458 13.3909 16.4042 13.7835 16.4042 14.2728C16.4042 14.6479 16.2924 14.9811 16.0687 15.2723C15.9219 15.4657 15.6808 15.6812 15.3452 15.9189L14.9468 16.202C14.6975 16.379 14.5263 16.5072 14.4331 16.5864C14.3422 16.6656 14.2653 16.7576 14.2024 16.8625H16.4147V17.7397H12.9443C12.9536 17.3762 13.0316 17.0442 13.1784 16.7437C13.3206 16.4058 13.6561 16.0482 14.185 15.6707C14.6439 15.3422 14.941 15.1069 15.0761 14.9648C15.2835 14.7434 15.3872 14.5011 15.3872 14.2378C15.3872 14.0235 15.3278 13.8452 15.2089 13.7031Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxSuperscript.tsx

@@ -0,0 +1,23 @@
+export const BxSuperscript = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.18874 6.60465H5.50324L7.94687 10.2639L10.4203 6.60465L12.5957 6.65318L9.00976 11.6713L12.7547 17H10.47L7.82767 13.0981L5.26483 17H3L6.74492 11.6713L3.18874 6.60465Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M15.7149 4.09923C15.5882 3.95121 15.4069 3.8772 15.171 3.8772C14.8482 3.8772 14.6284 3.99489 14.5117 4.23026C14.4446 4.36615 14.4049 4.58211 14.3925 4.87815H13.3606C13.378 4.42924 13.4612 4.06647 13.6102 3.78984C13.8933 3.26328 14.3962 3 15.1188 3C15.69 3 16.1445 3.1553 16.4822 3.4659C16.82 3.77407 16.9888 4.18294 16.9888 4.69252C16.9888 5.0832 16.8696 5.43019 16.6312 5.73351C16.4748 5.93492 16.2177 6.15937 15.8601 6.40688L15.4355 6.70171C15.1698 6.88613 14.9872 7.01959 14.8879 7.10209C14.791 7.18459 14.7091 7.28044 14.642 7.38964H17V8.30323H13.301C13.311 7.92469 13.3941 7.57891 13.5506 7.26588C13.7021 6.91403 14.0597 6.54155 14.6234 6.14845C15.1126 5.80631 15.4293 5.56123 15.5733 5.41321C15.7943 5.18268 15.9048 4.93032 15.9048 4.65612C15.9048 4.43288 15.8415 4.24725 15.7149 4.09923Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}

src/assets/icons/index.ts

@@ -27,3 +27,5 @@ export * from "./BxDelCol"
 export * from "./BxDelRow"
 export * from "./BxMergeCells"
 export * from "./BxSplitCell"
+export * from "./BxSubscript"
+export * from "./BxSuperscript"

src/layouts/EditPage/hooks/useTiptapEditor.ts

@@ -3,6 +3,8 @@ import CharacterCount from "@tiptap/extension-character-count"
 import Highlight from "@tiptap/extension-highlight"
 import Link from "@tiptap/extension-link"
 import Placeholder from "@tiptap/extension-placeholder"
+import Subscript from "@tiptap/extension-subscript"
+import Superscript from "@tiptap/extension-superscript"
 import TableCell from "@tiptap/extension-table-cell"
 import TableHeader from "@tiptap/extension-table-header"
 import TableRow from "@tiptap/extension-table-row"
@@ -104,6 +106,8 @@ export const useTiptapEditor = () => {
       }),
       IsomerDetailsGroup,
       TrailingNode,
+      Superscript,
+      Subscript,
     ],
     autofocus: "start",
   })

src/layouts/components/Editor/components/MenuBar.tsx

@@ -41,6 +41,8 @@ import { RTE_BLOCKS, RTEBlockValues } from "constants/rteBlocks"
 import { useEditorModal } from "contexts/EditorModalContext"
 
 import {
+  BxSubscript,
+  BxSuperscript,
   EditorAccordionImage,
   EditorCardsImage,
   EditorDividerImage,
@@ -213,7 +215,20 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       action: () => editor.chain().focus().toggleStrike().run(),
       isActive: () => editor.isActive("strike"),
     },
-
+    {
+      type: "item",
+      icon: BxSuperscript,
+      title: "Superscript",
+      action: () => editor.chain().focus().toggleSuperscript().run(),
+      isActive: () => editor.isActive("superscript"),
+    },
+    {
+      type: "item",
+      icon: BxSubscript,
+      title: "Subscript",
+      action: () => editor.chain().focus().toggleSubscript().run(),
+      isActive: () => editor.isActive("subscript"),
+    },
     {
       type: "divider",
     },