@cyberyozh/text-editor 0.2.2 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

package/src/editor/editor.tsx

@@ -107,7 +107,7 @@ function TiptapContent({
     onPaste,
     onDrop,
     onMarkupInsertion,
-  } = useInsertionHandlers();
+  } = useInsertionHandlers(imageHandlers);
 
   const editor = useEditor(
     {
@@ -143,7 +143,6 @@ function TiptapContent({
             event,
             slice,
             setIsDisabledInternal,
-            imageHandlers?.uploadMultipleByURL
           );
 
           if (typeof toReturn === 'boolean') return toReturn;
@@ -156,7 +155,6 @@ function TiptapContent({
             event,
             slice,
             setIsDisabledInternal,
-            imageHandlers?.uploadMultipleByURL
           );
 
           if (typeof toReturn === 'boolean') return toReturn;

package/src/editor/handlers/insertion-handlers.ts

@@ -2,10 +2,10 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useDialogCommand } from "../context";
 import { EditorView } from "@tiptap/pm/view";
 import { Slice } from "@tiptap/pm/model";
-import { ImageUploadMultipleByURLHandler } from "@/types";
-import { applyUploadResultsToNodes, collectRehostableImages } from "./markup-insertion";
+import { ImageHandlers } from "@/types";
+import { applyUploadResultsToNodes, collectRehostableImages, removeImagesFromSlice } from "./markup-insertion";
 
-export function useInsertionHandlers() {
+export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
   const [insertedImage, setInsertedImage] = useState<File | null>(null);
 
   const { activeDialog, openDialogCommand } = useDialogCommand();
@@ -22,6 +22,8 @@ export function useInsertionHandlers() {
     event.preventDefault();
     event.stopPropagation();
 
+    if (!imageHandlers?.upload) return;
+
     setInsertedImage(file);
     openDialogCommand("image");
   }
@@ -41,10 +43,7 @@ export function useInsertionHandlers() {
     event: ClipboardEvent | DragEvent,
     slice: Slice,
     setDisabled: Dispatch<SetStateAction<boolean>>,
-    uploadMultipleByURL?: ImageUploadMultipleByURLHandler
   ): boolean | void {
-    if (!uploadMultipleByURL) return;
-
     let hasMarkupInsertion = false;
 
     if (
@@ -66,18 +65,22 @@ export function useInsertionHandlers() {
     }
 
     if (hasMarkupInsertion) {
-      const imagesToNodes = collectRehostableImages(slice);
-
-      setDisabled(true);
-
-      uploadMultipleByURL(imagesToNodes.map(([url]) => url))
-        .then((results) => {
-          applyUploadResultsToNodes(imagesToNodes, results);
-          view.dispatch(view.state.tr.replaceSelection(slice));
-        })
-        .finally(() => {
-          setDisabled(false);
-        });
+      if (imageHandlers?.uploadMultipleByURL) {
+        setDisabled(true);
+
+        const imagesToNodes = collectRehostableImages(slice);
+
+        imageHandlers.uploadMultipleByURL(imagesToNodes.map(([url]) => url))
+          .then((results) => {
+            applyUploadResultsToNodes(imagesToNodes, results);
+            view.dispatch(view.state.tr.replaceSelection(slice));
+          })
+          .finally(() => {
+            setDisabled(false);
+          });
+      } else {
+        view.dispatch(view.state.tr.replaceSelection(removeImagesFromSlice(slice)));
+      }
 
       return true;
     }

package/src/editor/handlers/markup-insertion.ts

@@ -19,6 +19,37 @@ export function collectRehostableImages(slice: Slice | Fragment | Node): ImageTo
   return imagesToNodes;
 }
 
+function removeImagesFromFragment(fragment: Fragment): Fragment {
+  const newNodes: Node[] = [];
+  fragment.forEach((node) => {
+    if (node.type.name === "image" && !node.attrs.fileId) return;
+    newNodes.push(node.childCount > 0 ? node.copy(removeImagesFromFragment(node.content)) : node);
+  });
+  return Fragment.from(newNodes);
+}
+
+function validOpenDepth(fragment: Fragment, requestedDepth: number, fromEnd = false): number {
+  let depth = 0;
+  let current = fragment;
+  while (depth < requestedDepth) {
+    if (current.childCount === 0) break;
+    const node = fromEnd ? current.lastChild! : current.firstChild!;
+    if (node.isLeaf) break;
+    current = node.content;
+    depth++;
+  }
+  return depth;
+}
+
+export function removeImagesFromSlice(slice: Slice): Slice {
+  const newContent = removeImagesFromFragment(slice.content);
+  return new Slice(
+    newContent,
+    validOpenDepth(newContent, slice.openStart),
+    validOpenDepth(newContent, slice.openEnd, true),
+  );
+}
+
 export function applyUploadResultsToNodes(
   imagesToNodes: ImageToNode[],
   results: (ImageUploadResult | null)[],