feat: sub, superscripts and bullet fixes (#87)

fileverse · Sep 17, 2024 · 608bdd1 · 608bdd1
1 parent 2263be7
commit 608bdd1
Show file tree

Hide file tree

Showing 18 changed files with 1,185 additions and 1,334 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import DdocEditor from '../../package/ddoc-editor';
 import { JSONContent } from '@tiptap/react';
 import { Button, Tag, IconButton, LucideIcon } from '@fileverse/ui';
-import { BadgeCheck } from 'lucide-react';
 
 function App() {
   const [enableCollaboration, setEnableCollaboration] = useState(false);
@@ -46,7 +45,7 @@ function App() {
             Saved in local storage
           </Tag>
           <div className="w-6 h-6 rounded color-bg-secondary flex justify-center items-center border color-border-default xl:hidden">
-            <BadgeCheck size={16} color="#77818A" />
+            <LucideIcon name="BadgeCheck" size="sm" className="text-[#77818A]" />
           </div>
         </div>
         <div className="flex gap-2">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@fileverse-dev/ddoc",
   "private": false,
   "description": "DDoc",
-  "version": "2.0.3-patch-1",
+  "version": "2.0.3-patch-2",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "exports": {
@@ -28,7 +28,7 @@
   "dependencies": {
     "@_ueberdosis/prosemirror-tables": "^1.1.3",
     "@aarkue/tiptap-math-extension": "^1.3.3",
-    "@fileverse/ui": "^4.1.1-patch-4",
+    "@fileverse/ui": "^4.1.1-patch-6",
     "@radix-ui/react-focus-scope": "^1.1.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@tippyjs/react": "^4.2.6",
@@ -47,6 +47,8 @@
     "@tiptap/extension-link": "^2.5.4",
     "@tiptap/extension-list-item": "^2.5.4",
     "@tiptap/extension-placeholder": "^2.5.4",
+    "@tiptap/extension-subscript": "^2.5.4",
+    "@tiptap/extension-superscript": "^2.5.4",
     "@tiptap/extension-task-item": "^2.5.4",
     "@tiptap/extension-task-list": "^2.5.4",
     "@tiptap/extension-text-align": "^2.5.4",
@@ -63,7 +65,6 @@
     "ethers": "^6.13.1",
     "framer-motion": "^11.2.12",
     "katex": "^0.16.11",
-    "lucide-react": "^0.379.0",
     "markdown-it-footnote": "^4.0.0",
     "platform": "^1.3.6",
     "prosemirror-model": "^1.21.0",

diff --git a/package/common/icon.tsx b/package/common/icon.tsx
diff --git a/package/components/color-selector.tsx b/package/components/color-selector.tsx
@@ -1,6 +1,6 @@
+import { LucideIcon } from '@fileverse/ui';
 import { Editor } from '@tiptap/core';
-import cx from 'classnames';
-import { Check, ChevronDown } from 'lucide-react';
+import cn from 'classnames';
 import { Dispatch, FC, SetStateAction } from 'react';
 
 export interface BubbleColorMenuItem {
@@ -66,7 +66,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
       >
         <span style={{ color: activeItem?.color || '#000000' }}>A</span>
 
-        <ChevronDown className="h-4 w-4 " />
+        <LucideIcon name="ChevronDown" size="sm" />
       </button>
 
       {isOpen && (
@@ -78,7 +78,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 editor.chain().focus().setColor(color).run();
                 setIsOpen(false);
               }}
-              className={cx(
+              className={cn(
                 'flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100',
                 {
                   'text-blue-600': editor.isActive('textStyle', { color }),
@@ -95,7 +95,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 <span>{name}</span>
               </div>
               {editor.isActive('textStyle', { color }) && (
-                <Check className="h-4 w-4" />
+                <LucideIcon name="Check" size="sm" />
               )}
             </button>
           ))}

diff --git a/package/components/editor-bubble-menu.tsx b/package/components/editor-bubble-menu.tsx
@@ -50,6 +50,18 @@ export const EditorBubbleMenu = (props: EditorBubbleMenuProps) => {
       command: () => props.editor.chain().focus().toggleStrike().run(),
       icon: 'Strikethrough',
     },
+    {
+      name: 'Superscript',
+      isActive: () => props.editor.isActive('superscript'),
+      command: () => props.editor.chain().focus().toggleSuperscript().run(),
+      icon: 'Superscript',
+    },
+    {
+      name: 'Subscript',
+      isActive: () => props.editor.isActive('subscript'),
+      command: () => props.editor.chain().focus().toggleSubscript().run(),
+      icon: 'Subscript',
+    },
     {
       name: 'Alignment',
       isActive: () => toolVisibility === IEditorTool.ALIGNMENT,

diff --git a/package/components/editor-toolbar.tsx b/package/components/editor-toolbar.tsx
@@ -11,7 +11,6 @@ import {
 } from './editor-utils';
 import { Editor } from '@tiptap/react';
 import { IEditorTool } from '../hooks/use-visibility';
-import { ChevronDown } from 'lucide-react';
 import {
   Tooltip,
   Divider,
@@ -169,7 +168,7 @@ const TiptapToolBar = ({
                   editor?.isActive('textStyle', { fontFamily: font.value }),
                 )?.title || 'Font'}
               </span>
-              <ChevronDown size={16} />
+              <LucideIcon name="ChevronDown" size="sm" />
             </button>
           }
           content={
@@ -196,7 +195,7 @@ const TiptapToolBar = ({
                       ? 'Heading 3'
                       : 'Text'}
               </span>
-              <ChevronDown size={16} />
+              <LucideIcon name="ChevronDown" size="sm" />
             </button>
           }
           content={