@cyberyozh/text-editor 0.1.16 → 0.2.0

package/dist/editor.js

@@ -36,10 +36,10 @@ __export(editor_exports, {
 module.exports = __toCommonJS(editor_exports);
 
 // src/editor/editor.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_state6 = require("@tiptap/pm/state");
-var import_model = require("@tiptap/pm/model");
-var import_react37 = require("@tiptap/react");
+var import_model2 = require("@tiptap/pm/model");
+var import_react38 = require("@tiptap/react");
 var import_menus = require("@tiptap/react/menus");
 var import_github_dark = require("highlight.js/styles/github-dark.css");
 var import_katex_min = require("katex/dist/katex.min.css");
@@ -1917,6 +1917,7 @@ var import_jsx_runtime67 = require("react/jsx-runtime");
 var ImageDialog = ({
   open,
   onClose,
+  defaultFile,
   onImageAdd,
   onImageEdit,
   uploadHandler,
@@ -2000,6 +2001,11 @@ var ImageDialog = ({
       }));
     };
   };
+  (0, import_react13.useEffect)(() => {
+    if (defaultFile) {
+      handleSelectFile(defaultFile);
+    }
+  }, []);
   const handleAreaClick = () => {
     inputRef.current?.click();
   };
@@ -6470,7 +6476,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", "");
@@ -6482,7 +6489,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;
@@ -6490,15 +6497,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();
           }
         }
@@ -6540,11 +6543,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) {
@@ -6582,6 +6586,7 @@ var Figure2 = BaseFigure.extend({
           }
         }
       });
+      imageContainer.style.height = "";
       figure.appendChild(resizableView.dom);
       if (attrs.caption) {
         const figcaption = document.createElement("figcaption");
@@ -6775,10 +6780,110 @@ var createHandleKatexAdd = (editor, closeDialogCommand, savedPos) => {
   };
 };
 
+// src/editor/handlers/insertion-handlers.ts
+var import_react35 = require("react");
+
+// src/utils/prosemirror-iterator.ts
+var import_model = require("@tiptap/pm/model");
+function prosemirrorIterator(slice, cb) {
+  const stack = [];
+  if (slice instanceof import_model.Slice) {
+    collectFragmentChildren(slice.content, stack);
+  } else if (slice instanceof import_model.Fragment) {
+    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] = (0, import_react35.useState)(null);
+  const { activeDialog, openDialogCommand } = useDialogCommand();
+  (0, import_react35.useEffect)(() => {
+    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
 var import_dom = require("@floating-ui/dom");
 var import_core19 = require("@tiptap/core");
-var import_react35 = require("@tiptap/react");
+var import_react36 = require("@tiptap/react");
 
 // src/editor/commands/items.ts
 var getCommandItems = (translations2, hasImageHandlers) => [
@@ -7111,7 +7216,7 @@ var createSuggestions = (translations2, hasImageHandlers) => ({
   render: () => {
     return {
       onStart: async (props) => {
-        component = new import_react35.ReactRenderer(CommandsList, {
+        component = new import_react36.ReactRenderer(CommandsList, {
           props,
           editor: props.editor
         });
@@ -7534,27 +7639,35 @@ function TiptapContent({
   lang,
   error
 }) {
-  const [linkDialogContext, setLinkDialogContext] = (0, import_react36.useState)(null);
-  const [katexDialogContext, setKatexDialogContext] = (0, import_react36.useState)(
+  const [linkDialogContext, setLinkDialogContext] = (0, import_react37.useState)(null);
+  const [katexDialogContext, setKatexDialogContext] = (0, import_react37.useState)(
     null
   );
-  const [editFigureContext, setEditFigureContext] = (0, import_react36.useState)(null);
-  const [savedDialogCursorPos, setSavedDialogCursorPos] = (0, import_react36.useState)(void 0);
+  const [editFigureContext, setEditFigureContext] = (0, import_react37.useState)(null);
+  const [savedDialogCursorPos, setSavedDialogCursorPos] = (0, import_react37.useState)(void 0);
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations2 = useTiptapTranslations();
+  const [isDisabledInternal, setIsDisabledInternal] = (0, import_react37.useState)(isDisabled);
+  const disabled = isDisabled || isDisabledInternal;
   let safeContent;
   try {
     safeContent = JSON.parse(content);
   } catch {
     safeContent = { type: "doc", content: [{ type: "paragraph" }] };
   }
-  const editor = (0, import_react37.useEditor)(
+  const {
+    insertedImage,
+    onPaste,
+    onDrop,
+    onMarkupInsertion
+  } = useInsertionHandlers();
+  const editor = (0, import_react38.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 });
@@ -7568,14 +7681,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 import_model.Slice(node.content, 0, 0);
+              const newSlice = new import_model2.Slice(node.content, 0, 0);
               view.dispatch(view.state.tr.replaceSelection(newSlice));
               return true;
             }
@@ -7590,7 +7727,7 @@ function TiptapContent({
     },
     [lang]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
       const pos = editor.state.selection.from;
       setSavedDialogCursorPos(pos);
@@ -7617,7 +7754,7 @@ function TiptapContent({
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!editor || editor.isDestroyed) return;
     editor.commands.setContent(safeContent, {
       emitUpdate: false
@@ -7638,8 +7775,8 @@ function TiptapContent({
   if (!editor) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DragHandle, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TableMenu, { editor }),
-    isEditable && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    isEditable && !disabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TableMenu, { editor }),
+    isEditable && !disabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       import_menus.BubbleMenu,
       {
         shouldShow: shouldBubbleMenuShow,
@@ -7657,10 +7794,10 @@ function TiptapContent({
     /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       "div",
       {
-        className: `tiptap-content-wrapper ${!!error ? "has-error" : ""} ${isDisabled ? "is-disabled" : ""}`,
+        className: `tiptap-content-wrapper ${!!error ? "has-error" : ""} ${disabled ? "is-disabled" : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react37.EditorContent, { editor }),
-          isEditable && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CharacterCount, { editor })
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react38.EditorContent, { editor }),
+          isEditable && !disabled && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CharacterCount, { editor })
         ]
       }
     ),
@@ -7671,6 +7808,7 @@ function TiptapContent({
         {
           open: true,
           onClose: handleCloseDialog,
+          defaultFile: insertedImage,
           onImageAdd: handleImageAdd,
           onImageEdit: handleImageEdit,
           uploadHandler: imageHandlers?.upload,