@cyberyozh/text-editor 0.1.17 → 0.2.1

package/dist/styles/index.css

@@ -497,6 +497,7 @@
   gap: 12px;
 }
 .image-dialog-preview {
+  width: auto;
   max-width: 100%;
   height: auto;
   margin-bottom: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.17",
+  "version": "0.2.1",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -33,7 +33,7 @@
   },
   "scripts": {
     "build": "rm -rf dist && tsup",
-    "dev": "tsup --watch",
+    "dev": "cross-env NODE_ENV=development tsup --watch",
     "dev:link": "npm run build && npm link && npm run dev",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
@@ -47,47 +47,48 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "@tiptap/core": "^3.20.0",
-    "@tiptap/extension-blockquote": "^3.20.0",
-    "@tiptap/extension-bubble-menu": "^3.20.0",
-    "@tiptap/extension-code": "^3.20.0",
-    "@tiptap/extension-code-block-lowlight": "^3.20.0",
-    "@tiptap/extension-collaboration": "^3.20.0",
-    "@tiptap/extension-details": "^3.20.0",
-    "@tiptap/extension-drag-handle": "^3.20.0",
-    "@tiptap/extension-drag-handle-react": "^3.20.0",
-    "@tiptap/extension-floating-menu": "^3.20.0",
-    "@tiptap/extension-hard-break": "^3.20.0",
-    "@tiptap/extension-highlight": "^3.20.0",
-    "@tiptap/extension-horizontal-rule": "^3.20.0",
-    "@tiptap/extension-image": "^3.20.0",
-    "@tiptap/extension-link": "^3.20.0",
-    "@tiptap/extension-list": "^3.20.0",
-    "@tiptap/extension-mathematics": "^3.20.0",
-    "@tiptap/extension-node-range": "^3.20.0",
-    "@tiptap/extension-subscript": "^3.20.0",
-    "@tiptap/extension-superscript": "^3.20.0",
-    "@tiptap/extension-table": "^3.20.0",
-    "@tiptap/extension-text-align": "^3.20.0",
-    "@tiptap/extensions": "^3.20.0",
-    "@tiptap/html": "^3.20.0",
-    "@tiptap/pm": "^3.20.0",
-    "@tiptap/react": "^3.17.1",
-    "@tiptap/starter-kit": "^3.20.0",
-    "@tiptap/static-renderer": "^3.20.0",
-    "@tiptap/suggestion": "^3.20.0",
-    "@tiptap/y-tiptap": "^3.0.2",
-    "emoji-picker-react": "^4.18.0",
-    "highlight.js": "^11.11.1",
-    "katex": "^0.16.35",
-    "lowlight": "^3.3.0",
-    "y-protocols": "^1.0.7",
-    "yjs": "^13.6.29"
+    "@floating-ui/dom": "1.7.6",
+    "@tiptap/core": "3.23.6",
+    "@tiptap/extension-blockquote": "3.23.6",
+    "@tiptap/extension-bubble-menu": "3.23.6",
+    "@tiptap/extension-code": "3.23.6",
+    "@tiptap/extension-code-block-lowlight": "3.23.6",
+    "@tiptap/extension-collaboration": "3.23.6",
+    "@tiptap/extension-details": "3.23.6",
+    "@tiptap/extension-drag-handle": "3.23.6",
+    "@tiptap/extension-drag-handle-react": "3.23.6",
+    "@tiptap/extension-floating-menu": "3.23.6",
+    "@tiptap/extension-hard-break": "3.23.6",
+    "@tiptap/extension-highlight": "3.23.6",
+    "@tiptap/extension-horizontal-rule": "3.23.6",
+    "@tiptap/extension-image": "3.23.6",
+    "@tiptap/extension-link": "3.23.6",
+    "@tiptap/extension-list": "3.23.6",
+    "@tiptap/extension-mathematics": "3.23.6",
+    "@tiptap/extension-node-range": "3.23.6",
+    "@tiptap/extension-subscript": "3.23.6",
+    "@tiptap/extension-superscript": "3.23.6",
+    "@tiptap/extension-table": "3.23.6",
+    "@tiptap/extension-text-align": "3.23.6",
+    "@tiptap/extensions": "3.23.6",
+    "@tiptap/html": "3.23.6",
+    "@tiptap/pm": "3.23.6",
+    "@tiptap/react": "3.23.6",
+    "@tiptap/starter-kit": "3.23.6",
+    "@tiptap/static-renderer": "3.23.6",
+    "@tiptap/suggestion": "3.23.6",
+    "@tiptap/y-tiptap": "3.0.3",
+    "emoji-picker-react": "4.19.1",
+    "highlight.js": "11.11.1",
+    "katex": "0.16.35",
+    "lowlight": "3.3.0",
+    "y-protocols": "1.0.7",
+    "yjs": "13.6.30"
   },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@types/node": "^25.3.3",
+    "cross-env": "^10.1.0",
     "eslint": "^10.0.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"

package/src/editor/controls/bubble-menu-content.tsx

@@ -69,10 +69,19 @@ export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
   } = useEditorState({
     editor,
     selector: (ctx) => {
+      let canAvalable = false;
+
+      try {
+        ctx.editor.can().undo();
+        canAvalable = true;
+      } catch {
+        // When `lang` changes, the editor reloads and there is a brief period where parts of its internal state are inaccessible, causing certain methods to throw exceptions
+      }
+
       return {
-        canUndo: ctx.editor.can().undo(),
-        canRedo: ctx.editor.can().redo(),
-        canClearMarks: ctx.editor.can().unsetAllMarks(),
+        canUndo: canAvalable ? ctx.editor.can().undo() : false,
+        canRedo: canAvalable ? ctx.editor.can().redo() : false,
+        canClearMarks: canAvalable ? ctx.editor.can().unsetAllMarks() : false,
         isHeading2: ctx.editor.isActive("heading", { level: 2 }),
         isHeading3: ctx.editor.isActive("heading", { level: 3 }),
         isHeading4: ctx.editor.isActive("heading", { level: 4 }),

package/src/editor/controls/character-count.tsx

@@ -11,10 +11,13 @@ export const CharacterCount = ({ editor }: Props) => {
   const translations = useTiptapTranslations();
   const { charactersCount, wordsCount } = useEditorState({
     editor,
-    selector: (context) => ({
-      charactersCount: context.editor.storage.characterCount.characters(),
-      wordsCount: context.editor.storage.characterCount.words(),
-    }),
+    selector: (context) => {
+      return {
+        charactersCount:
+          context.editor.storage.characterCount?.characters() || 0,
+        wordsCount: context.editor.storage.characterCount?.words() || 0,
+      };
+    },
   });
 
   return (

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

@@ -25,6 +25,7 @@
 }
 
 .image-dialog-preview {
+  width: auto;
   max-width: 100%;
   height: auto;
   margin-bottom: 12px;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { TiptapX } from "../../../icons";
 
@@ -12,6 +12,7 @@ import { useTiptapTranslations } from "../../context";
 interface ImageDialogProps {
   open: boolean;
   onClose: () => void;
+  defaultFile?: File | null;
   onImageAdd?: (attrs: TiptapImageAttrs) => void;
   onImageEdit?: (attrs: Partial<FigureAttrs>) => void;
   uploadHandler?: ImageUploadHandler;
@@ -33,6 +34,7 @@ interface ImageFormState {
 export const ImageDialog = ({
   open,
   onClose,
+  defaultFile,
   onImageAdd,
   onImageEdit,
   uploadHandler,
@@ -131,6 +133,12 @@ export const ImageDialog = ({
     };
   };
 
+  useEffect(() => {
+    if (defaultFile) {
+      handleSelectFile(defaultFile)
+    }
+  }, []);
+
   const handleAreaClick = () => {
     inputRef.current?.click();
   };

package/src/editor/editor.tsx

@@ -31,6 +31,7 @@ import {
   createHandleKatexAdd,
   createHandleLinkAdd,
   createHandleVideoAdd,
+  useInsertionHandlers,
 } from "./handlers";
 
 import "../styles/styles.css";
@@ -38,7 +39,7 @@ import { createSuggestions } from "./commands/suggestion";
 import { getTranslations, type SupportedLanguage } from "../utils/get-translations";
 import { LinkDialogContextProps } from "@/types/link";
 
-interface TiptapProps {
+export interface TiptapProps {
   isEditable?: boolean;
   /**
    * When true, makes the editor completely disabled (non-editable with disabled styling)
@@ -61,7 +62,7 @@ interface TiptapProps {
   error?: string;
 }
 
-interface KatexDialogContextProps {
+export interface KatexDialogContextProps {
   latex?: string;
   pos?: number;
 }
@@ -87,6 +88,9 @@ function TiptapContent({
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations = useTiptapTranslations();
 
+  const [isDisabledInternal, setIsDisabledInternal] = useState(isDisabled);
+  const disabled = isDisabled || isDisabledInternal;
+
   let safeContent: JSONContent;
 
   try {
@@ -95,13 +99,20 @@ function TiptapContent({
     safeContent = { type: "doc", content: [{ type: "paragraph" }] };
   }
 
+  const {
+    insertedImage,
+    onPaste,
+    onDrop,
+    onMarkupInsertion,
+  } = useInsertionHandlers();
+
   const editor = useEditor(
     {
-      editable: isEditable && !isDisabled,
+      editable: isEditable && !disabled,
       extensions: getEditorExtensions({
         translations,
         suggestion: createSuggestions(translations, !!imageHandlers),
-        isEditable: isEditable && !isDisabled,
+        isEditable: isEditable && !disabled,
         getImageById: imageHandlers?.getImage,
         onKatexClick: (latex, pos) => {
           setKatexDialogContext({ latex, pos });
@@ -115,7 +126,38 @@ function TiptapContent({
       content: safeContent,
       immediatelyRender: false,
       editorProps: {
-        handlePaste: (view, event) => {
+        handleDOMEvents: {
+          paste: onPaste,
+          drop: onDrop,
+        },
+        handleDrop: (view, event, slice) => {
+          // Ignoring events from dragging within the editor itself
+          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;
@@ -203,8 +245,8 @@ function TiptapContent({
   return (
     <>
       {<DragHandle editor={editor} />}
-      {isEditable && !isDisabled && <TableMenu editor={editor} />}
-      {isEditable && !isDisabled && (
+      {isEditable && !disabled && <TableMenu editor={editor} />}
+      {isEditable && !disabled && (
         <BubbleMenu
           shouldShow={shouldBubbleMenuShow}
           editor={editor}
@@ -219,11 +261,11 @@ function TiptapContent({
 
       <div
         className={`tiptap-content-wrapper ${!!error ? "has-error" : ""} ${
-          isDisabled ? "is-disabled" : ""
+          disabled ? "is-disabled" : ""
         }`}
       >
         <EditorContent editor={editor} />
-        {isEditable && !isDisabled && <CharacterCountComponent editor={editor} />}
+        {isEditable && !disabled && <CharacterCountComponent editor={editor} />}
       </div>
       {!!error && <p className="tiptap-error-message">{error}</p>}
 
@@ -233,6 +275,7 @@ function TiptapContent({
             <ImageDialog
               open={true}
               onClose={handleCloseDialog}
+              defaultFile={insertedImage}
               onImageAdd={handleImageAdd}
               onImageEdit={handleImageEdit}
               uploadHandler={imageHandlers?.upload}

package/src/editor/handlers/index.ts

@@ -5,3 +5,7 @@ export {
   createHandleVideoAdd,
   createHandleImageEdit,
 } from "./dialog-handlers";
+
+export {
+  useInsertionHandlers
+} from './insertion-handlers'

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

@@ -0,0 +1,113 @@
+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";
+
+export function useInsertionHandlers() {
+  const [insertedImage, setInsertedImage] = useState<File | null>(null);
+
+  const { activeDialog, openDialogCommand } = useDialogCommand();
+
+  useEffect(() => {
+    if (insertedImage && !activeDialog) {
+      setInsertedImage(null);
+    }
+  }, [insertedImage, activeDialog]);
+
+  function genericInsertionHandler(file: File | undefined, event: Event) {
+    if (!file || !file.type.startsWith("image/")) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    setInsertedImage(file);
+    openDialogCommand("image");
+  }
+
+  function onPaste(_: unknown, event: ClipboardEvent) {
+    const file = event.clipboardData?.files?.[0];
+    genericInsertionHandler(file, event);
+  }
+
+  function onDrop(_: unknown, event: DragEvent) {
+    const file = event.dataTransfer?.files?.[0];
+    genericInsertionHandler(file, event);
+  }
+
+  function onMarkupInsertion(
+    view: EditorView,
+    event: ClipboardEvent | DragEvent,
+    slice: Slice,
+    setDisabled: Dispatch<SetStateAction<boolean>>,
+    uploadMultipleByURL?: ImageUploadMultipleByURLHandler
+  ): boolean | void {
+    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: [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;
+          });
+
+          view.dispatch(view.state.tr.replaceSelection(slice));
+        })
+        .finally(() => {
+          setDisabled(false);
+        });
+
+      return true;
+    }
+  }
+
+  return {
+    insertedImage,
+    onPaste,
+    onDrop,
+    onMarkupInsertion,
+  };
+}

package/src/editor/index.ts

@@ -1,4 +1,4 @@
-export { Tiptap } from "./editor";
+export { Tiptap, type TiptapProps, type KatexDialogContextProps } from "./editor";
 export type { SupportedLanguage as TiptapSupportedLanguages } from "../utils/get-translations";
 export { type JSONContent } from "@tiptap/react";
 export { htmlToTiptapContent } from "../utils/html-to-tiptap-content";

package/src/types/image-handler.ts

@@ -8,12 +8,17 @@ export interface ImageUploadHandler {
   (file: File): Promise<ImageUploadResult>;
 }
 
+export interface ImageUploadMultipleByURLHandler {
+  (files: string[]): Promise<(ImageUploadResult | null)[]>;
+}
+
 export interface ImageGetHandler {
   (fileId: string): string | null;
 }
 
 export interface ImageHandlers {
   upload: ImageUploadHandler;
+  uploadMultipleByURL?: ImageUploadMultipleByURLHandler;
   getImage?: ImageGetHandler;
 }
 

package/src/utils/prosemirror-iterator.ts

@@ -0,0 +1,38 @@
+import { Fragment, Node, Slice } from "@tiptap/pm/model";
+
+export type ProsemirrorIteratorCallback = (node: Node) => boolean | void;
+
+/**
+ * Traverses a ProseMirror document tree depth-first, invoking `cb` for each node.
+ *
+ * Iteration stops early when `cb` returns `true`.
+ */
+export function prosemirrorIterator(
+  slice: Slice | Fragment | Node,
+  cb: ProsemirrorIteratorCallback,
+) {
+  const stack: Node[] = [];
+
+  if (slice instanceof Slice) {
+    collectFragmentChildren(slice.content, stack);
+  } else if (slice instanceof 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: Fragment, stack: Node[]) {
+  for (let i = fragment.childCount - 1; i >= 0; i--) {
+    stack.push(fragment.child(i));
+  }
+}