@cyberyozh/text-editor 0.1.16 → 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();
@@ -6433,7 +6439,8 @@ var Figure2 = BaseFigure.extend({
       };
       const updateImageDimensions = (width, height) => {
         imageContainer.style.width = `${width}px`;
-        imageContainer.style.height = `${height}px`;
+        imageContainer.style.aspectRatio = `${width} / ${height}`;
+        imageContainer.style.height = "";
       };
       const figure = document.createElement("figure");
       figure.setAttribute("data-drag-handle", "");
@@ -6445,7 +6452,7 @@ var Figure2 = BaseFigure.extend({
       if (attrs.title) img.title = attrs.title;
       if (attrs.width && attrs.height) {
         imageContainer.style.width = `${attrs.width}px`;
-        imageContainer.style.height = `${attrs.height}px`;
+        imageContainer.style.aspectRatio = `${attrs.width} / ${attrs.height}`;
       }
       img.onload = () => {
         naturalAspectRatio = img.naturalHeight / img.naturalWidth;
@@ -6453,15 +6460,11 @@ var Figure2 = BaseFigure.extend({
           maxHeight = Math.round(maxWidth * naturalAspectRatio);
         }
         if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
-          const width = maxWidth;
-          const height = Math.round(attrs.height / attrs.width * maxWidth);
-          imageContainer.style.width = `${width}px`;
-          imageContainer.style.height = `${height}px`;
           const pos = getPos();
           if (typeof pos === "number") {
             editor.chain().updateAttributes("image", {
-              width: Math.round(width),
-              height: Math.round(height)
+              width: maxWidth,
+              height: Math.round(attrs.height / attrs.width * maxWidth)
             }).run();
           }
         }
@@ -6503,11 +6506,12 @@ var Figure2 = BaseFigure.extend({
           }
         },
         onUpdate: (updatedNode) => {
-          if (updatedNode.attrs.width) {
-            imageContainer.style.width = `${updatedNode.attrs.width}px`;
-          }
-          if (updatedNode.attrs.height) {
-            imageContainer.style.height = `${updatedNode.attrs.height}px`;
+          const newWidth = updatedNode.attrs.width;
+          const newHeight = updatedNode.attrs.height;
+          if (newWidth) imageContainer.style.width = `${newWidth}px`;
+          if (newWidth && newHeight) {
+            imageContainer.style.aspectRatio = `${newWidth} / ${newHeight}`;
+            imageContainer.style.height = "";
           }
           const existingCaption = figure.querySelector("figcaption");
           if (updatedNode.attrs.caption && !existingCaption) {
@@ -6545,6 +6549,7 @@ var Figure2 = BaseFigure.extend({
           }
         }
       });
+      imageContainer.style.height = "";
       figure.appendChild(resizableView.dom);
       if (attrs.caption) {
         const figcaption = document.createElement("figcaption");
@@ -6738,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";
@@ -7487,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,
@@ -7497,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 });
@@ -7531,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;
             }
@@ -7553,7 +7690,7 @@ function TiptapContent({
     },
     [lang]
   );
-  useEffect9(() => {
+  useEffect11(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
       const pos = editor.state.selection.from;
       setSavedDialogCursorPos(pos);
@@ -7580,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
@@ -7599,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,
@@ -7620,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,