@cyberyozh/text-editor 0.1.17 → 0.2.0

package/dist/editor.mjs

@@ -1,7 +1,7 @@
 // src/editor/editor.tsx
-import { useState as useState12, useEffect as useEffect9 } from "react";
+import { useState as useState13, useEffect as useEffect11 } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
-import { Slice } from "@tiptap/pm/model";
+import { Slice as Slice2 } from "@tiptap/pm/model";
 import { useEditor, EditorContent } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import "highlight.js/styles/github-dark.css";
@@ -1764,7 +1764,7 @@ var TableMenu = ({ editor }) => {
 };
 
 // src/editor/dialogs/image-dialog/image-dialog.tsx
-import { useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 
 // src/editor/components/button/button.tsx
 import { jsx as jsx64 } from "react/jsx-runtime";
@@ -1880,6 +1880,7 @@ import { Fragment as Fragment2, jsx as jsx67, jsxs as jsxs18 } from "react/jsx-r
 var ImageDialog = ({
   open,
   onClose,
+  defaultFile,
   onImageAdd,
   onImageEdit,
   uploadHandler,
@@ -1963,6 +1964,11 @@ var ImageDialog = ({
       }));
     };
   };
+  useEffect5(() => {
+    if (defaultFile) {
+      handleSelectFile(defaultFile);
+    }
+  }, []);
   const handleAreaClick = () => {
     inputRef.current?.click();
   };
@@ -2154,7 +2160,7 @@ var ImageDialog = ({
 };
 
 // src/editor/dialogs/add-katex-dialog/add-katex-dialog.tsx
-import { useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
 import { jsx as jsx68, jsxs as jsxs19 } from "react/jsx-runtime";
 var AddKatexDialog = ({
   open,
@@ -2165,7 +2171,7 @@ var AddKatexDialog = ({
   const translations2 = useTiptapTranslations();
   const [content, setContent] = useState7(initialContent);
   const contentInputRef = useRef7(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) {
       setContent(initialContent);
       setTimeout(() => {
@@ -2264,7 +2270,7 @@ var AddKatexDialog = ({
 };
 
 // src/editor/dialogs/add-link-dialog/add-link-dialog.tsx
-import { useEffect as useEffect6, useRef as useRef8, useState as useState8 } from "react";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState8 } from "react";
 import { jsx as jsx69, jsxs as jsxs20 } from "react/jsx-runtime";
 var AddLinkDialog = ({
   open,
@@ -2288,7 +2294,7 @@ var AddLinkDialog = ({
     setAddNoopener(initialLinkRel);
     setError("");
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (open) {
       clearDialogState();
       setTimeout(() => {
@@ -2455,7 +2461,7 @@ var AddLinkDialog = ({
 };
 
 // src/editor/dialogs/add-video-dialog/add-video-dialog.tsx
-import { useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
 
 // src/utils/detect-video-hosting.ts
 var VIDEO_PATTERNS = {
@@ -2542,7 +2548,7 @@ var AddVideoDialog = ({ open, onClose, onVideoAdd }) => {
   const [error, setError] = useState9("");
   const [isValidating, setIsValidating] = useState9(false);
   const urlInputRef = useRef9(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (open) {
       setUrl("");
       setError("");
@@ -5636,13 +5642,13 @@ var Video = ({ src, children }) => {
 };
 
 // src/editor/controls/emoji-picker.tsx
-import { useEffect as useEffect8, useRef as useRef10 } from "react";
+import { useEffect as useEffect9, useRef as useRef10 } from "react";
 import EmojiPicker from "emoji-picker-react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }) => {
   const pickerRef = useRef10(null);
   const translations2 = useTiptapTranslations();
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       if (pickerRef.current && !pickerRef.current.contains(event.target)) {
         onClose();
@@ -6737,6 +6743,106 @@ var createHandleKatexAdd = (editor, closeDialogCommand, savedPos) => {
   };
 };
 
+// src/editor/handlers/insertion-handlers.ts
+import { useEffect as useEffect10, useState as useState12 } from "react";
+
+// src/utils/prosemirror-iterator.ts
+import { Fragment as Fragment3, Slice } from "@tiptap/pm/model";
+function prosemirrorIterator(slice, cb) {
+  const stack = [];
+  if (slice instanceof Slice) {
+    collectFragmentChildren(slice.content, stack);
+  } else if (slice instanceof Fragment3) {
+    collectFragmentChildren(slice, stack);
+  } else {
+    stack.push(slice);
+  }
+  while (stack.length > 0) {
+    const node = stack.pop();
+    const shouldStop = cb(node);
+    if (shouldStop === true) break;
+    if (node.content.size > 0) {
+      collectFragmentChildren(node.content, stack);
+    }
+  }
+}
+function collectFragmentChildren(fragment, stack) {
+  for (let i = fragment.childCount - 1; i >= 0; i--) {
+    stack.push(fragment.child(i));
+  }
+}
+
+// src/editor/handlers/insertion-handlers.ts
+function useInsertionHandlers() {
+  const [insertedImage, setInsertedImage] = useState12(null);
+  const { activeDialog, openDialogCommand } = useDialogCommand();
+  useEffect10(() => {
+    if (insertedImage && !activeDialog) {
+      setInsertedImage(null);
+    }
+  }, [insertedImage, activeDialog]);
+  function genericInsertionHandler(file, event) {
+    if (!file || !file.type.startsWith("image/")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setInsertedImage(file);
+    openDialogCommand("image");
+  }
+  function onPaste(_, event) {
+    const file = event.clipboardData?.files?.[0];
+    genericInsertionHandler(file, event);
+  }
+  function onDrop(_, event) {
+    const file = event.dataTransfer?.files?.[0];
+    genericInsertionHandler(file, event);
+  }
+  function onMarkupInsertion(view, event, slice, setDisabled, uploadMultipleByURL) {
+    if (!uploadMultipleByURL) return;
+    let hasMarkupInsertion = false;
+    if ("clipboardData" in event && Array.from(event.clipboardData?.items ?? []).some(
+      (item) => item.type === "text/html"
+    )) {
+      hasMarkupInsertion = true;
+    }
+    if ("dataTransfer" in event && Array.from(event.dataTransfer?.items ?? []).some(
+      (item) => item.type === "text/html"
+    )) {
+      hasMarkupInsertion = true;
+    }
+    if (hasMarkupInsertion) {
+      const imagesToNodes = [];
+      setDisabled(true);
+      prosemirrorIterator(slice, (node) => {
+        if (node.type.name === "image" && !node.attrs.fileId) {
+          try {
+            const url = new URL(node.attrs.src).toString();
+            imagesToNodes.push([url, node]);
+          } catch {
+          }
+        }
+      });
+      uploadMultipleByURL(imagesToNodes.map(([url]) => url)).then((results) => {
+        results.forEach((result, index) => {
+          const node = imagesToNodes[index][1];
+          node.attrs.src = null;
+          node.attrs.fileId = result?.fileId;
+          node.attrs.storageKey = result?.storageKey;
+        });
+        view.dispatch(view.state.tr.replaceSelection(slice));
+      }).finally(() => {
+        setDisabled(false);
+      });
+      return true;
+    }
+  }
+  return {
+    insertedImage,
+    onPaste,
+    onDrop,
+    onMarkupInsertion
+  };
+}
+
 // src/editor/commands/suggestion.tsx
 import { computePosition, flip, shift } from "@floating-ui/dom";
 import { posToDOMRect } from "@tiptap/core";
@@ -7486,7 +7592,7 @@ function getTranslations(lang) {
 }
 
 // src/editor/editor.tsx
-import { Fragment as Fragment3, jsx as jsx92, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx92, jsxs as jsxs35 } from "react/jsx-runtime";
 function TiptapContent({
   content,
   handleChange,
@@ -7496,27 +7602,35 @@ function TiptapContent({
   lang,
   error
 }) {
-  const [linkDialogContext, setLinkDialogContext] = useState12(null);
-  const [katexDialogContext, setKatexDialogContext] = useState12(
+  const [linkDialogContext, setLinkDialogContext] = useState13(null);
+  const [katexDialogContext, setKatexDialogContext] = useState13(
     null
   );
-  const [editFigureContext, setEditFigureContext] = useState12(null);
-  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState12(void 0);
+  const [editFigureContext, setEditFigureContext] = useState13(null);
+  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState13(void 0);
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations2 = useTiptapTranslations();
+  const [isDisabledInternal, setIsDisabledInternal] = useState13(isDisabled);
+  const disabled = isDisabled || isDisabledInternal;
   let safeContent;
   try {
     safeContent = JSON.parse(content);
   } catch {
     safeContent = { type: "doc", content: [{ type: "paragraph" }] };
   }
+  const {
+    insertedImage,
+    onPaste,
+    onDrop,
+    onMarkupInsertion
+  } = useInsertionHandlers();
   const editor = useEditor(
     {
-      editable: isEditable && !isDisabled,
+      editable: isEditable && !disabled,
       extensions: getEditorExtensions({
         translations: translations2,
         suggestion: createSuggestions(translations2, !!imageHandlers),
-        isEditable: isEditable && !isDisabled,
+        isEditable: isEditable && !disabled,
         getImageById: imageHandlers?.getImage,
         onKatexClick: (latex, pos) => {
           setKatexDialogContext({ latex, pos });
@@ -7530,14 +7644,38 @@ function TiptapContent({
       content: safeContent,
       immediatelyRender: false,
       editorProps: {
-        handlePaste: (view, event) => {
+        handleDOMEvents: {
+          paste: onPaste,
+          drop: onDrop
+        },
+        handleDrop: (view, event, slice) => {
+          if (view.dragging) return false;
+          const toReturn = onMarkupInsertion(
+            view,
+            event,
+            slice,
+            setIsDisabledInternal,
+            imageHandlers?.uploadMultipleByURL
+          );
+          if (typeof toReturn === "boolean") return toReturn;
+          return false;
+        },
+        handlePaste: (view, event, slice) => {
+          const toReturn = onMarkupInsertion(
+            view,
+            event,
+            slice,
+            setIsDisabledInternal,
+            imageHandlers?.uploadMultipleByURL
+          );
+          if (typeof toReturn === "boolean") return toReturn;
           try {
             const text = event.clipboardData?.getData("text/plain");
             if (!text) return false;
             const json = JSON.parse(text);
             if (json.type === "doc" && json.content) {
               const node = view.state.schema.nodeFromJSON(json);
-              const newSlice = new Slice(node.content, 0, 0);
+              const newSlice = new Slice2(node.content, 0, 0);
               view.dispatch(view.state.tr.replaceSelection(newSlice));
               return true;
             }
@@ -7552,7 +7690,7 @@ function TiptapContent({
     },
     [lang]
   );
-  useEffect9(() => {
+  useEffect11(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
       const pos = editor.state.selection.from;
       setSavedDialogCursorPos(pos);
@@ -7579,7 +7717,7 @@ function TiptapContent({
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
   };
-  useEffect9(() => {
+  useEffect11(() => {
     if (!editor || editor.isDestroyed) return;
     editor.commands.setContent(safeContent, {
       emitUpdate: false
@@ -7598,10 +7736,10 @@ function TiptapContent({
     return true;
   };
   if (!editor) return null;
-  return /* @__PURE__ */ jsxs35(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs35(Fragment4, { children: [
     /* @__PURE__ */ jsx92(DragHandle, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ jsx92(TableMenu, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ jsx92(
+    isEditable && !disabled && /* @__PURE__ */ jsx92(TableMenu, { editor }),
+    isEditable && !disabled && /* @__PURE__ */ jsx92(
       BubbleMenu,
       {
         shouldShow: shouldBubbleMenuShow,
@@ -7619,20 +7757,21 @@ function TiptapContent({
     /* @__PURE__ */ jsxs35(
       "div",
       {
-        className: `tiptap-content-wrapper ${!!error ? "has-error" : ""} ${isDisabled ? "is-disabled" : ""}`,
+        className: `tiptap-content-wrapper ${!!error ? "has-error" : ""} ${disabled ? "is-disabled" : ""}`,
         children: [
           /* @__PURE__ */ jsx92(EditorContent, { editor }),
-          isEditable && !isDisabled && /* @__PURE__ */ jsx92(CharacterCount, { editor })
+          isEditable && !disabled && /* @__PURE__ */ jsx92(CharacterCount, { editor })
         ]
       }
     ),
     !!error && /* @__PURE__ */ jsx92("p", { className: "tiptap-error-message", children: error }),
-    isEditable && /* @__PURE__ */ jsxs35(Fragment3, { children: [
+    isEditable && /* @__PURE__ */ jsxs35(Fragment4, { children: [
       activeDialog === "image" && /* @__PURE__ */ jsx92(
         ImageDialog,
         {
           open: true,
           onClose: handleCloseDialog,
+          defaultFile: insertedImage,
           onImageAdd: handleImageAdd,
           onImageEdit: handleImageEdit,
           uploadHandler: imageHandlers?.upload,