@zm-editor/react 0.1.6 → 0.1.7

package/dist/index.js

@@ -1,4 +1,5 @@
-import { createContext, forwardRef, useState, useEffect, useMemo, useCallback, useImperativeHandle, useRef, useContext } from 'react';
+import { createContext, forwardRef, useState, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useContext } from 'react';
+import { createRoot } from 'react-dom/client';
 import { ReactNodeViewRenderer, useEditor, EditorContent, NodeViewWrapper, NodeViewContent, BubbleMenu as BubbleMenu$1 } from '@tiptap/react';
 export { EditorContent, useEditor } from '@tiptap/react';
 import { createStarterExtensions, CodeBlockLowlight, lowlight, SlashCommand, Keyboard, VersionBadge, Glossary, Mention, markdownToHtml, extractTableOfContents, htmlToMarkdown, isSafeImageUrl, normalizeUrl, isSafeLinkUrl, getSafeHref, defaultSlashCommands } from '@zm-editor/core';
@@ -10904,10 +10905,12 @@ function createLocalizedSlashCommands(locale) {
       searchTerms: ["emoji", "emoticon", "smiley", "face", "\uC774\uBAA8\uC9C0", "\uC774\uBAA8\uD2F0\uCF58"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
-        const emojiButton = document.getElementById("zm-editor-emoji-trigger");
-        if (emojiButton) {
-          emojiButton.click();
-        }
+        setTimeout(() => {
+          const emojiButton = document.getElementById("zm-editor-emoji-trigger");
+          if (emojiButton) {
+            emojiButton.click();
+          }
+        }, 0);
       }
     }
   ];
@@ -10952,8 +10955,7 @@ var ZmEditor = forwardRef(
       [fileConfig]
     );
     const [uploadingCount, setUploadingCount] = useState(0);
-    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-    const [emojiPickerPosition, setEmojiPickerPosition] = useState({ top: 0, left: 0 });
+    const emojiRootRef = useRef(null);
     const localizedSlashCommands = useMemo(
       () => slashCommands ?? createLocalizedSlashCommands(locale),
       [slashCommands, locale]
@@ -11523,30 +11525,45 @@ var ZmEditor = forwardRef(
       },
       [processFile]
     );
+    const cleanupEmojiPicker = useCallback(() => {
+      if (emojiRootRef.current) {
+        emojiRootRef.current.root.unmount();
+        emojiRootRef.current.container.remove();
+        emojiRootRef.current = null;
+      }
+    }, []);
+    useEffect(() => {
+      return () => {
+        cleanupEmojiPicker();
+      };
+    }, [cleanupEmojiPicker]);
     const handleEmojiTrigger = useCallback(() => {
       if (!editor) return;
+      cleanupEmojiPicker();
       const { view } = editor;
       const { from } = view.state.selection;
       const coords = view.coordsAtPos(from);
-      setEmojiPickerPosition({
-        top: coords.bottom + 8,
-        left: coords.left
-      });
-      setShowEmojiPicker(true);
-    }, [editor]);
-    const handleEmojiSelect = useCallback(
-      (emoji) => {
-        if (!editor) return;
-        editor.chain().focus().insertContent(emoji).run();
-        requestAnimationFrame(() => {
-          setShowEmojiPicker(false);
-        });
-      },
-      [editor]
-    );
-    const handleEmojiPickerClose = useCallback(() => {
-      setShowEmojiPicker(false);
-    }, []);
+      const container = document.createElement("div");
+      container.className = "zm-emoji-picker-overlay";
+      container.style.cssText = `position:fixed;top:${coords.bottom + 8}px;left:${coords.left}px;z-index:9999;`;
+      document.body.appendChild(container);
+      const root = createRoot(container);
+      emojiRootRef.current = { root, container };
+      const onSelect = (emoji) => {
+        root.unmount();
+        container.remove();
+        emojiRootRef.current = null;
+        setTimeout(() => {
+          editor.chain().focus().insertContent(emoji).run();
+        }, 0);
+      };
+      const onClose = () => {
+        root.unmount();
+        container.remove();
+        emojiRootRef.current = null;
+      };
+      root.render(/* @__PURE__ */ jsx(EmojiPicker, { onSelect, onClose }));
+    }, [editor, cleanupEmojiPicker]);
     if (!isMounted || !editor) {
       return /* @__PURE__ */ jsx("div", { className: "zm-editor", role: "application", "aria-label": "Rich text editor", children: /* @__PURE__ */ jsx(
         "div",
@@ -11598,25 +11615,6 @@ var ZmEditor = forwardRef(
           tabIndex: -1
         }
       ),
-      showEmojiPicker && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "zm-emoji-picker-overlay",
-          style: {
-            position: "fixed",
-            top: emojiPickerPosition.top,
-            left: emojiPickerPosition.left,
-            zIndex: 9999
-          },
-          children: /* @__PURE__ */ jsx(
-            EmojiPicker,
-            {
-              onSelect: handleEmojiSelect,
-              onClose: handleEmojiPickerClose
-            }
-          )
-        }
-      ),
       enableBubbleMenu && /* @__PURE__ */ jsx(
         BubbleMenu,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zm-editor/react",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React components for zm-editor - Notion-like rich text editor",
   "license": "MIT",
   "type": "module",