@cyberyozh/text-editor 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -36,6 +36,8 @@
     "dev": "cross-env NODE_ENV=development tsup --watch",
     "dev:link": "npm run build && npm link && npm run dev",
     "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "eslint src --ext .ts,.tsx",
     "changeset": "changeset",
     "version": "changeset version",
@@ -91,7 +93,8 @@
     "cross-env": "^10.1.0",
     "eslint": "^10.0.2",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.6"
   },
   "overrides": {
     "glob": "^13.0.6"

package/src/editor/dialogs/image-dialog/image-dialog.tsx

@@ -191,7 +191,6 @@ export const ImageDialog = ({
     setIsUploading(true);
     try {
       const result = await uploadHandler(formState.file);
-      console.log("👀 ~ handleAddImage ~ result:", result);
 
       onImageAdd({
         fileId: result.fileId,

package/src/editor/editor.tsx

@@ -85,6 +85,9 @@ function TiptapContent({
     pos?: number;
   } | null>(null);
   const [savedDialogCursorPos, setSavedDialogCursorPos] = useState<number | undefined>(undefined);
+  const [savedDialogRange, setSavedDialogRange] = useState<{ from: number; to: number } | undefined>(
+    undefined,
+  );
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations = useTiptapTranslations();
 
@@ -104,7 +107,7 @@ function TiptapContent({
     onPaste,
     onDrop,
     onMarkupInsertion,
-  } = useInsertionHandlers();
+  } = useInsertionHandlers(imageHandlers);
 
   const editor = useEditor(
     {
@@ -140,7 +143,6 @@ function TiptapContent({
             event,
             slice,
             setIsDisabledInternal,
-            imageHandlers?.uploadMultipleByURL
           );
 
           if (typeof toReturn === 'boolean') return toReturn;
@@ -153,7 +155,6 @@ function TiptapContent({
             event,
             slice,
             setIsDisabledInternal,
-            imageHandlers?.uploadMultipleByURL
           );
 
           if (typeof toReturn === 'boolean') return toReturn;
@@ -183,8 +184,9 @@ function TiptapContent({
 
   useEffect(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
-      const pos = editor.state.selection.from;
-      setSavedDialogCursorPos(pos);
+      const { from, to } = editor.state.selection;
+      setSavedDialogCursorPos(from);
+      setSavedDialogRange({ from, to });
     }
   }, [activeDialog, editor]);
 
@@ -193,6 +195,7 @@ function TiptapContent({
     setKatexDialogContext(null);
     setEditFigureContext(null);
     setSavedDialogCursorPos(undefined);
+    setSavedDialogRange(undefined);
     closeDialogCommand();
   };
 
@@ -208,7 +211,7 @@ function TiptapContent({
   };
 
   const handleLinkAdd = (params: any) => {
-    createHandleLinkAdd(editor, handleCloseDialog, params, savedDialogCursorPos);
+    createHandleLinkAdd(editor, handleCloseDialog, params, savedDialogRange);
   };
 
   const handleKatexAdd = (latex: string) => {

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

@@ -87,42 +87,28 @@ export const createHandleLinkAdd = (
   editor: Editor | null,
   closeDialogCommand: () => void,
   linkParams: LinkDialogContextProps,
-  savedPos?: number
+  savedRange?: { from: number; to: number }
 ) => {
   if (!editor) return;
 
-  const hasSelection = !editor.state.selection.empty;
-  const titleLength = linkParams.title?.length ?? 0;
+  const title = linkParams.title ?? "";
+  const titleLength = title.length;
 
-  if (hasSelection) {
-    editor
-      .chain()
-      .focus()
-      .command(({ tr, state }) => {
-        const { from, to } = state.selection;
-        tr.insertText(linkParams.title ?? "", from, to);
-        tr.removeMark(from, from + titleLength);
-        tr.addMark(from, from + titleLength, editor.schema.marks.link.create({ ...linkParams }));
-        return true;
-      })
-      .run();
-  } else {
-    const { state } = editor;
-    const insertPos = savedPos ?? state.selection.from;
-    const titleLength = linkParams.title?.length ?? 0;
+  const from = savedRange?.from ?? editor.state.selection.from;
+  const to = savedRange?.to ?? editor.state.selection.to;
+
+  editor
+    .chain()
+    .focus()
+    .command(({ tr }) => {
+      tr.insertText(title, from, to);
+      tr.removeMark(from, from + titleLength);
+      tr.addMark(from, from + titleLength, editor.schema.marks.link.create({ ...linkParams }));
+      tr.setSelection(TextSelection.create(tr.doc, from, from + titleLength));
+      return true;
+    })
+    .run();
 
-    editor
-      .chain()
-      .focus()
-      .command(({ tr }) => {
-        const linkMark = editor.schema.marks.link.create({ ...linkParams });
-        const textNode = editor.schema.text(linkParams.title ?? "", [linkMark]);
-        tr.insert(insertPos, textNode);
-        tr.setSelection(TextSelection.create(tr.doc, insertPos, insertPos + titleLength));
-        return true;
-      })
-      .run();
-  }
   closeDialogCommand();
 };
 

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

@@ -1,11 +1,11 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useDialogCommand } from "../context";
 import { EditorView } from "@tiptap/pm/view";
-import { Node, Slice } from "@tiptap/pm/model";
-import { ImageUploadMultipleByURLHandler } from "@/types";
-import { prosemirrorIterator } from "@/utils/prosemirror-iterator";
+import { Slice } from "@tiptap/pm/model";
+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,39 +65,22 @@ export function useInsertionHandlers() {
     }
 
     if (hasMarkupInsertion) {
-      const imagesToNodes: [string, Node][] = [];
-
-      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];
-
-            // Ignoring `readonly` should be safe in this place because we are inserting slice to the Prosemirror tree only after manipilation.
-
-            // @ts-expect-error ignore `readonly`
-            node.attrs.src = null;
-            // @ts-expect-error ignore `readonly`
-            node.attrs.fileId = result?.fileId;
-            // @ts-expect-error ignore `readonly`
-            node.attrs.storageKey = result?.storageKey;
+      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);
           });
-
-          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.test.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it } from "vitest";
+import { Node, Schema } from "@tiptap/pm/model";
+import { applyUploadResultsToNodes, collectRehostableImages } from "./markup-insertion";
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: "block+" },
+    paragraph: { group: "block", content: "inline*" },
+    text: { group: "inline" },
+    image: {
+      group: "block",
+      attrs: {
+        src: { default: null },
+        fileId: { default: null },
+        storageKey: { default: null },
+      },
+    },
+  },
+});
+
+function image(attrs: Record<string, unknown>): Node {
+  return schema.nodes.image.create(attrs);
+}
+
+function doc(...children: Node[]): Node {
+  return schema.nodes.doc.create(null, children);
+}
+
+const PNG_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg==";
+
+describe("collectRehostableImages", () => {
+  it("collects http(s) image nodes that have no fileId", () => {
+    const a = image({ src: "https://a/1.png" });
+    const b = image({ src: "http://b/2.png" });
+
+    const collected = collectRehostableImages(doc(a, b));
+
+    expect(collected.map(([url]) => url)).toEqual(["https://a/1.png", "http://b/2.png"]);
+    expect(collected.map(([, node]) => node)).toEqual([a, b]);
+  });
+
+  it("collects data:-base64 images (Google Docs paste)", () => {
+    const collected = collectRehostableImages(doc(image({ src: PNG_DATA_URI })));
+
+    expect(collected).toHaveLength(1);
+    expect(collected[0][0]).toBe(PNG_DATA_URI);
+  });
+
+  it("skips images that already have a fileId", () => {
+    const already = image({ src: "https://a/1.png", fileId: "existing" });
+    const fresh = image({ src: "https://b/2.png" });
+
+    const collected = collectRehostableImages(doc(already, fresh));
+
+    expect(collected.map(([url]) => url)).toEqual(["https://b/2.png"]);
+  });
+
+  it("skips images whose src is not a parseable URL", () => {
+    const relative = image({ src: "/local/path.png" });
+    const empty = image({ src: null });
+    const valid = image({ src: "https://ok/path.png" });
+
+    const collected = collectRehostableImages(doc(relative, empty, valid));
+
+    expect(collected.map(([url]) => url)).toEqual(["https://ok/path.png"]);
+  });
+
+  it("passes the URL through new URL() normalization to the upload handler", () => {
+    const collected = collectRehostableImages(doc(image({ src: "https://ok.png" })));
+
+    expect(collected.map(([url]) => url)).toEqual(["https://ok.png/"]);
+  });
+});
+
+describe("applyUploadResultsToNodes", () => {
+  it("on success sets src=fileUrl and keeps fileId/storageKey (dual-model node)", () => {
+    const node = image({ src: "https://external/1.png" });
+    const imagesToNodes = collectRehostableImages(doc(node));
+
+    applyUploadResultsToNodes(imagesToNodes, [
+      { fileId: "f1", fileUrl: "https://cdn/1.png", storageKey: "key1" },
+    ]);
+
+    expect(node.attrs.src).toBe("https://cdn/1.png");
+    expect(node.attrs.fileId).toBe("f1");
+    expect(node.attrs.storageKey).toBe("key1");
+  });
+
+  it("leaves the node untouched when the result is null (failed rehost)", () => {
+    const node = image({ src: "https://external/1.png" });
+    const imagesToNodes = collectRehostableImages(doc(node));
+
+    applyUploadResultsToNodes(imagesToNodes, [null]);
+
+    expect(node.attrs.src).toBe("https://external/1.png");
+    expect(node.attrs.fileId).toBeNull();
+    expect(node.attrs.storageKey).toBeNull();
+  });
+
+  it("keeps index alignment when a result in the middle is null", () => {
+    const first = image({ src: "https://a/1.png" });
+    const second = image({ src: "https://b/2.png" });
+    const third = image({ src: "https://c/3.png" });
+    const imagesToNodes = collectRehostableImages(doc(first, second, third));
+
+    applyUploadResultsToNodes(imagesToNodes, [
+      { fileId: "f1", fileUrl: "https://cdn/1.png", storageKey: "k1" },
+      null,
+      { fileId: "f3", fileUrl: "https://cdn/3.png", storageKey: "k3" },
+    ]);
+
+    expect(first.attrs.fileId).toBe("f1");
+    expect(first.attrs.src).toBe("https://cdn/1.png");
+
+    expect(second.attrs.fileId).toBeNull();
+    expect(second.attrs.src).toBe("https://b/2.png");
+
+    expect(third.attrs.fileId).toBe("f3");
+    expect(third.attrs.src).toBe("https://cdn/3.png");
+  });
+
+  it("sets src=null but still applies fileId when result has no fileUrl", () => {
+    const node = image({ src: "https://external/1.png" });
+    const imagesToNodes = collectRehostableImages(doc(node));
+
+    applyUploadResultsToNodes(imagesToNodes, [{ fileId: "f1", storageKey: "key1" }]);
+
+    expect(node.attrs.src).toBeNull();
+    expect(node.attrs.fileId).toBe("f1");
+    expect(node.attrs.storageKey).toBe("key1");
+  });
+});

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

@@ -0,0 +1,72 @@
+import { Fragment, Node, Slice } from "@tiptap/pm/model";
+import { ImageUploadResult } from "@/types";
+import { prosemirrorIterator } from "@/utils/prosemirror-iterator";
+
+export type ImageToNode = [string, Node];
+
+export function collectRehostableImages(slice: Slice | Fragment | Node): ImageToNode[] {
+  const imagesToNodes: ImageToNode[] = [];
+
+  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 {}
+    }
+  });
+
+  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)[],
+): void {
+  results.forEach((result, index) => {
+    if (!result) return;
+
+    const node = imagesToNodes[index]?.[1];
+    if (!node) return;
+
+    // Ignoring `readonly` should be safe in this place because we are inserting slice to the Prosemirror tree only after manipilation.
+
+    // @ts-expect-error ignore `readonly`
+    node.attrs.src = result.fileUrl ?? null;
+    // @ts-expect-error ignore `readonly`
+    node.attrs.fileId = result.fileId;
+    // @ts-expect-error ignore `readonly`
+    node.attrs.storageKey = result.storageKey;
+  });
+}

package/src/extensions/base/link.ts

@@ -1,5 +1,6 @@
 import Link, { isAllowedUri } from "@tiptap/extension-link";
-import { markPasteRule } from "@tiptap/core";
+import { getMarkRange, markPasteRule } from "@tiptap/core";
+import { Plugin, TextSelection } from "@tiptap/pm/state";
 import { find } from "linkifyjs";
 
 const isSameDomain = (url: string): boolean => {
@@ -67,6 +68,26 @@ export const LinkExtension = Link.extend({
       }),
     ];
   },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.parent?.() ?? []),
+      new Plugin({
+        props: {
+          handleClick: (view, pos) => {
+            if (!view.editable) return false;
+
+            const range = getMarkRange(view.state.doc.resolve(pos), this.type);
+            if (!range) return false;
+
+            const selection = TextSelection.create(view.state.doc, range.from, range.to);
+            view.dispatch(view.state.tr.setSelection(selection));
+            return true;
+          },
+        },
+      }),
+    ];
+  },
 }).configure({
   openOnClick: false,
   linkOnPaste: true,

package/src/utils/image-src-resolver.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from "vitest";
+import { resolveImageSrc } from "./image-src-resolver";
+
+describe("resolveImageSrc — priority of fileId vs src", () => {
+  it("prefers fileId over src when getImageById is provided (Path 1)", () => {
+    const getImageById = vi.fn(() => "https://cdn/resolved.png");
+
+    const result = resolveImageSrc(
+      { fileId: "abc", src: "https://other/direct.png" },
+      { getImageById },
+    );
+
+    expect(result).toBe("https://cdn/resolved.png");
+    expect(getImageById).toHaveBeenCalledWith("abc");
+  });
+
+  it("falls back to src when fileId is present but getImageById is NOT provided (Path 2)", () => {
+    const result = resolveImageSrc({ fileId: "abc", src: "https://direct.png" });
+
+    expect(result).toBe("https://direct.png");
+  });
+
+  it("uses src directly when there is no fileId (Path 2)", () => {
+    const result = resolveImageSrc(
+      { src: "https://direct.png" },
+      { getImageById: vi.fn() },
+    );
+
+    expect(result).toBe("https://direct.png");
+  });
+
+  it("returns empty string when fileId resolution fails (broken image, no silent fallback to src)", () => {
+    const getImageById = vi.fn(() => null);
+
+    const result = resolveImageSrc(
+      { fileId: "missing", src: "https://direct.png" },
+      { getImageById },
+    );
+
+    expect(result).toBe("");
+  });
+
+  it("returns empty string when fileId is present but no getImageById (Path 3)", () => {
+    const result = resolveImageSrc({ fileId: "abc" });
+
+    expect(result).toBe("");
+  });
+
+  it("returns empty string when neither fileId nor src is present", () => {
+    const result = resolveImageSrc({});
+
+    expect(result).toBe("");
+  });
+});