refactor: emoiji extension

Author: hunghg255

docs/extensions/Emoji/index.md

@@ -50,9 +50,21 @@ const extensions = [
 
   ...
   // Import Extensions Here
-  Emoji// [!code ++]
+  Emoji.configure({
+    suggestion: {
+      char: ':',
+      items: async ({ query,  }: any) => {
+        const lowerCaseQuery = query?.toLowerCase();
+
+        return EMOJI_LIST.filter(({ name }) =>
+          name.toLowerCase().includes(lowerCaseQuery)
+        );
+      },
+    },
+  }),
 ];
 
+
 const RichTextToolbar = () => {
   return (
     <RichTextEmoji /> {/* [!code ++] */}
@@ -78,3 +90,6 @@ const App = () => {
   );
 };
 ```
+
+
+- Copy Emoji List here: https://github.com/hunghg255/reactjs-tiptap-editor-demo/blob/master/src/components/Editor/emojis.ts

package.json

@@ -528,7 +528,7 @@
         "default": "./lib/Video.js"
       }
     },
-     "./callout": {
+    "./callout": {
       "require": {
         "types": "./lib/extensions/Callout/index.d.ts",
         "default": "./lib/Callout.cjs"
@@ -792,11 +792,11 @@
     "react-colorful": "^5.6.1",
     "react-image-crop": "^11.0.10",
     "react-tweet": "^3.3.0",
+    "reactjs-signal": "^2.0.4",
     "scroll-into-view-if-needed": "^3.1.0",
     "svg64": "^2.0.0",
     "y-protocols": "^1.0.7",
-    "yjs": "^13.6.28",
-    "zustand": "^5.0.9"
+    "yjs": "^13.6.28"
   },
   "devDependencies": {
     "@hunghg255/eslint-config": "^1.0.1",

playground/src/App.tsx

@@ -99,6 +99,7 @@ import 'katex/contrib/mhchem'
 // import { HocuspocusProvider } from '@hocuspocus/provider'
 // import * as Y from 'yjs'
 import { EditorContent, useEditor } from '@tiptap/react';
+import { EMOJI_LIST } from '@/emojis'
 
 // const ydoc = new Y.Doc()
 
@@ -204,7 +205,17 @@ const extensions = [
   TextUnderline,
   Strike,
   MoreMark,
-  Emoji,
+  Emoji.configure({
+    suggestion: {
+      items: async ({ query,  }: any) => {
+        const lowerCaseQuery = query?.toLowerCase();
+
+        return EMOJI_LIST.filter(({ name }) =>
+          name.toLowerCase().includes(lowerCaseQuery)
+        );
+      },
+    },
+  }),
   Color,
   Highlight,
   BulletList,
@@ -334,7 +345,7 @@ Callout
   // }),
 ]
 
-const DEFAULT = `<div class="callout" dir="auto" type="note" title="1" body="1"></div><div class="callout" dir="auto" type="tip" title="2" body="2"></div><div class="callout" dir="auto" type="important" title="3" body="3"></div><div class="callout" dir="auto" type="warning" title="4" body="4"></div><div class="callout" dir="auto" type="caution" title="5" body="5"></div><p dir="auto"></p>`
+const DEFAULT = `<div class="callout" dir="auto" type="note" title="1" body="1"></div><div class="callout" dir="auto" type="tip" title="2" body="2"></div><div class="callout" dir="auto" type="important" title="3" body="3"></div><div class="callout" dir="auto" type="warning" title="4" body="4"></div><div class="callout" dir="auto" type="caution" title="5" body="5"></div><p dir="auto"><span dir="auto" data-name="smiley" data-type="emoji">😃</span> </p>`
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout
@@ -351,6 +362,8 @@ const Header = ({ editor, theme, setTheme }) => {
   const currentTheme = useTheme();
 
   useEffect(() => {
+    localeActions.setLang('vi')
+themeActions.setColor('red')
     setEditorEditable(editor?.isEditable ?? true);
   }, []);
 

…ons/Emoji/components/EmojiList/emojis.ts playground/src/emojis.tssrc/extensions/Emoji/components/EmojiList/emojis.ts renamed to playground/src/emojis.ts src/extensions/Emoji/components/EmojiList/emojis.ts renamed to playground/src/emojis.ts

@@ -20,10 +20,6 @@ export interface CalloutOptions extends GeneralOptions<CalloutOptions> {
 
 function getDatasetAttribute(attribute: string) {
   return (element: any) => {
-    console.log({
-      element
-    });
-
     return element.getAttribute(attribute);
   };
 }
@@ -65,10 +61,6 @@ export const Callout = /* @__PURE__ */ Node.create<CalloutOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
-    console.log({
-      HTMLAttributes
-    });
-
     return ['div', mergeAttributes((this.options && this.options.HTMLAttributes) || {}, HTMLAttributes)];
   },
 

pnpm-lock.yaml

@@ -1,16 +1,17 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import TiptapEmoji from '@tiptap/extension-emoji';
-import { ReactRenderer } from '@tiptap/react';
+import TiptapEmoji, { type EmojiOptions } from '@tiptap/extension-emoji';
+import { Extension } from '@tiptap/react';
 
-import { updatePosition } from '@/utils/updatePosition';
+import { renderNodeViewClosure } from '@/utils/renderNodeView';
 
 import EmojiNodeView from './components/EmojiList/EmojiNodeView';
 
 export * from '@/extensions/Emoji/components/RichTextEmoji';
 
 export const EXTENSION_PRIORITY_HIGHEST = 200;
 
-export const Emoji = /* @__PURE__ */ TiptapEmoji.extend({
+export const Emoji = /* @__PURE__ */ Extension.create<EmojiOptions>({
+  name: 'richTextEmojiWrapper',
   priority: EXTENSION_PRIORITY_HIGHEST,
   // emojis: gitHubEmojis,
   enableEmoticons: true,
@@ -38,60 +39,20 @@ export const Emoji = /* @__PURE__ */ TiptapEmoji.extend({
     };
   },
 
-}).configure({
-  suggestion: {
-    // items: ({ query }: any) => {
-    //   return emojiSearch(query);
-    // },
-
-    allowSpaces: false,
-
-    render: () => {
-      let reactRenderer: any;
-
-      return {
-        onStart: (props: any) => {
-          if (!props.clientRect) {
-            return;
-          }
-
-          reactRenderer = new ReactRenderer(EmojiNodeView, {
-            props,
-            editor: props.editor,
-          });
-
-          reactRenderer.element.style.position = 'absolute';
-
-          document.body.appendChild(reactRenderer.element);
-
-          updatePosition(props.editor, reactRenderer.element);
-        },
-
-        onUpdate(props) {
-          reactRenderer.updateProps(props);
-
-          if (!props.clientRect) {
-            return;
-          }
-          updatePosition(props.editor, reactRenderer.element);
-        },
-
-        onKeyDown(props) {
-          if (props.event.key === 'Escape') {
-            reactRenderer.destroy();
-            reactRenderer.element.remove();
-
-            return true;
-          }
-
-          return reactRenderer.ref?.onKeyDown(props);
-        },
+  addExtensions() {
+    const config: any = {
+      ...this.options
+    };
 
-        onExit() {
-          reactRenderer.destroy();
-          reactRenderer.element.remove();
-        },
+    if (this.options?.suggestion) {
+      config['suggestion'] = {
+        render: renderNodeViewClosure(EmojiNodeView),
+        ...this.options.suggestion,
       };
-    },
-  }
+    }
+
+    return [TiptapEmoji.configure({
+      ...config,
+    })];
+  },
 });

src/extensions/Callout/Callout.ts

@@ -1,25 +1,28 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 
 import clsx from 'clsx';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
-import { EMOJI_LIST } from '@/extensions/Emoji/components/EmojiList/emojis';
 import { useLocale } from '@/locales';
 
-function EmojiNodeView (props: any, ref: any) {
+interface IPropsEmojiNodeVIew {
+  items: Array<{
+    name: string
+    emoji: string
+  }>
+
+  query: string
+  command: any
+}
+
+function EmojiNodeView(props: IPropsEmojiNodeVIew, ref: any) {
   const $container: any = useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const { t } = useLocale();
 
-  const filteredEmojis = useMemo(() => {
-    const lowerCaseQuery = props?.query?.toLowerCase();
-
-    return EMOJI_LIST.filter(({ name }) =>
-      name.toLowerCase().includes(lowerCaseQuery)
-    );
-  }, [props?.query]);
+  const filteredEmojis = props?.items ?? [];
 
   const selectItem = (index: any) => {
     const item = filteredEmojis[index];
@@ -89,9 +92,9 @@ function EmojiNodeView (props: any, ref: any) {
                   })}
                 >
                   {emoji}
-:
-{name}
-:
+                  :
+                  {name}
+                  :
                 </span>
               );
             })

src/extensions/Emoji/Emoji.ts

@@ -74,8 +74,8 @@ export function RichTextEmoji() {
 
   return (
     <EmojiPickerWrap
-    disabled={disabled}
-    onSelectEmoji={onAction}
+      disabled={disabled}
+      onSelectEmoji={onAction}
     >
       <ActionButton
         icon={icon}

src/extensions/Emoji/components/EmojiList/EmojiNodeView.tsx

@@ -1,9 +1,10 @@
 import { Extension } from '@tiptap/core';
 import type { default as Mammoth } from 'mammoth';
 
-export * from '@/extensions/ImportWord/components/RichTextImportWord';
 import type { GeneralOptions } from '@/types';
 
+export * from '@/extensions/ImportWord/components/RichTextImportWord';
+
 interface ImportWordOptions extends GeneralOptions<ImportWordOptions> {
   /** Function for converting Word files to HTML */
   convert?: (file: File) => Promise<string>