@cyberyozh/text-editor 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -88,8 +88,6 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.7",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
     "eslint": "^8",
     "tsup": "^8.0.0",
     "typescript": "^5"

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

@@ -45,7 +45,6 @@ export const ImageDialog = ({
   const [dragActive, setDragActive] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  // Resolve the image URL from fileId or use src directly
   const resolvedInitialUrl = initialAttrs
     ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById })
     : "";

package/src/editor/editor.tsx

@@ -24,7 +24,7 @@ import {
 import { ImageDialog, AddKatexDialog, AddLinkDialog, AddVideoDialog } from "./dialogs";
 import { getEditorExtensions } from "../extensions/editor";
 
-import type { FigureAttrs, ImageHandlers } from "../types/image-handler";
+import type { FigureAttrs, ImageHandlers, TiptapImageAttrs } from "../types/image-handler";
 import {
   createHandleImageAdd,
   createHandleImageEdit,
@@ -157,10 +157,21 @@ function TiptapContent({
     closeDialogCommand();
   };
 
-  const handleImageAdd = createHandleImageAdd(editor, handleCloseDialog, savedDialogCursorPos);
+  // Create handlers with current savedDialogCursorPos by accessing state directly
+  const handleImageAdd = (attrs: TiptapImageAttrs) => {
+    createHandleImageAdd(editor, handleCloseDialog, savedDialogCursorPos)(attrs);
+  };
+
   const handleImageEdit = createHandleImageEdit(editor, handleCloseDialog, editFigureContext?.pos);
-  const handleVideoAdd = createHandleVideoAdd(editor, handleCloseDialog, savedDialogCursorPos);
-  const handleLinkAdd = createHandleLinkAdd(editor, handleCloseDialog, savedDialogCursorPos);
+
+  const handleVideoAdd = (url: string) => {
+    createHandleVideoAdd(editor, handleCloseDialog, savedDialogCursorPos)(url);
+  };
+
+  const handleLinkAdd = (title: string, url: string) => {
+    createHandleLinkAdd(editor, handleCloseDialog, savedDialogCursorPos)(title, url);
+  };
+
   const handleKatexAdd = (latex: string) => {
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);

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

@@ -1,4 +1,5 @@
 import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
 
 import type { FigureAttrs, TiptapImageAttrs } from "../../types";
 
@@ -11,40 +12,26 @@ export const createHandleImageAdd = (
     if (!editor) return;
 
     const { state } = editor;
-    const { $from } = state.selection;
-    const text = $from.parent.textContent;
+    const insertPos = savedPos ?? state.selection.from;
+
+    editor
+      .chain()
+      .focus()
+      .command(({ tr, state }) => {
+        const $pos = state.doc.resolve(insertPos);
+        const imageNode = state.schema.nodes.image.create({ ...attrs });
+
+        if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+          tr.replaceWith($pos.before(), $pos.after(), imageNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve($pos.before())));
+        } else {
+          tr.insert(insertPos, imageNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+        }
+        return true;
+      })
+      .run();
 
-    if (text.lastIndexOf("/") !== -1) {
-      editor
-        .chain()
-        .focus()
-        .command(({ tr }) => {
-          const node = editor.schema.nodes.image.create({ ...attrs });
-          tr.replaceWith($from.before(), $from.after(), node);
-          return true;
-        })
-        .scrollIntoView()
-        .run();
-    } else {
-      const insertPos = savedPos ?? state.selection.from;
-
-      editor
-        .chain()
-        .focus()
-        .command(({ tr, state }) => {
-          const $pos = state.doc.resolve(insertPos);
-          const figureNode = state.schema.nodes.figure.create({ ...attrs });
-
-          if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
-            tr.replaceWith($pos.before(), $pos.after(), figureNode);
-          } else {
-            tr.insert(insertPos, figureNode);
-          }
-          return true;
-        })
-        .scrollIntoView()
-        .run();
-    }
     closeDialogCommand();
   };
 };
@@ -55,6 +42,7 @@ export const createHandleImageEdit = (
   pos?: number
 ) => {
   return (attrs: Partial<FigureAttrs>) => {
+    console.log("👀 ~ createHandleImageEdit ~ attrs:", attrs);
     if (!editor || pos === undefined) return;
 
     editor.chain().focus().setNodeSelection(pos).updateFigure(attrs).run();
@@ -71,43 +59,26 @@ export const createHandleVideoAdd = (
     if (!editor) return;
 
     const { state } = editor;
-    const { $from } = state.selection;
-    const text = $from.parent.textContent;
-
-    if (text.lastIndexOf("/") !== -1) {
-      editor
-        .chain()
-        .focus()
-        .command(({ tr }) => {
-          tr.replaceWith(
-            $from.before(),
-            $from.after(),
-            editor.schema.nodes.video.create({ src: url })
-          );
-          return true;
-        })
-        .scrollIntoView()
-        .run();
-    } else {
-      const insertPos = savedPos ?? state.selection.from;
+    const insertPos = savedPos ?? state.selection.from;
+
+    editor
+      .chain()
+      .focus()
+      .command(({ tr, state }) => {
+        const $pos = state.doc.resolve(insertPos);
+        const videoNode = state.schema.nodes.video.create({ src: url });
+
+        if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+          tr.replaceWith($pos.before(), $pos.after(), videoNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve($pos.before())));
+        } else {
+          tr.insert(insertPos, videoNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+        }
+        return true;
+      })
+      .run();
 
-      editor
-        .chain()
-        .focus()
-        .command(({ tr, state }) => {
-          const $pos = state.doc.resolve(insertPos);
-          const videoNode = state.schema.nodes.video.create({ src: url });
-
-          if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
-            tr.replaceWith($pos.before(), $pos.after(), videoNode);
-          } else {
-            tr.insert(insertPos, videoNode);
-          }
-          return true;
-        })
-        .scrollIntoView()
-        .run();
-    }
     closeDialogCommand();
   };
 };
@@ -135,39 +106,19 @@ export const createHandleLinkAdd = (
         .run();
     } else {
       const { state } = editor;
-      const { $from } = state.selection;
-      const text = $from.parent.textContent;
-      const nodeStart = $from.start();
-      const beforeCursor = text.substring(0, $from.pos - nodeStart);
-      const slashIndex = beforeCursor.lastIndexOf("/");
-
-      if (slashIndex !== -1) {
-        editor
-          .chain()
-          .focus()
-          .command(({ tr }) => {
-            tr.delete(nodeStart + slashIndex, $from.pos);
-            return true;
-          })
-          .extendMarkRange("link")
-          .setLink({ href: url })
-          .insertContent(title)
-          .scrollIntoView()
-          .run();
-      } else {
-        const insertPos = savedPos ?? state.selection.from;
-        editor
-          .chain()
-          .focus()
-          .command(({ tr }) => {
-            const linkMark = editor.schema.marks.link.create({ href: url });
-            const textNode = editor.schema.text(title, [linkMark]);
-            tr.insert(insertPos, textNode);
-            return true;
-          })
-          .scrollIntoView()
-          .run();
-      }
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+          const linkMark = editor.schema.marks.link.create({ href: url });
+          const textNode = editor.schema.text(title, [linkMark]);
+          tr.insert(insertPos, textNode);
+          tr.setSelection(TextSelection.create(tr.doc, insertPos, insertPos + title.length));
+          return true;
+        })
+        .run();
     }
     closeDialogCommand();
   };
@@ -185,39 +136,18 @@ export const createHandleKatexAdd = (
       editor.chain().setNodeSelection(pos).updateInlineMath({ latex }).focus().run();
     } else {
       const { state } = editor;
-      const { $from } = state.selection;
-      const text = $from.parent.textContent;
-      const nodeStart = $from.start();
-      const beforeCursor = text.substring(0, $from.pos - nodeStart);
-      const slashIndex = beforeCursor.lastIndexOf("/");
-
-      if (slashIndex !== -1) {
-        const deleteFrom = nodeStart + slashIndex;
-        const deleteTo = $from.pos;
-
-        editor
-          .chain()
-          .focus()
-          .command(({ tr, state }) => {
-            const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
-            tr.replaceRangeWith(deleteFrom, deleteTo, inlineMathNode);
-            return true;
-          })
-          .scrollIntoView()
-          .run();
-      } else {
-        const insertPos = savedPos ?? state.selection.from;
-        editor
-          .chain()
-          .focus()
-          .command(({ tr, state }) => {
-            const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
-            tr.insert(insertPos, inlineMathNode);
-            return true;
-          })
-          .scrollIntoView()
-          .run();
-      }
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
+          tr.insert(insertPos, inlineMathNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+          return true;
+        })
+        .run();
     }
 
     closeDialogCommand();

package/src/editor/handlers/index.ts

@@ -1,8 +1,7 @@
-export { createImageUploadHandler } from './create-image-upload-handler';
 export {
   createHandleImageAdd,
   createHandleKatexAdd,
   createHandleLinkAdd,
   createHandleVideoAdd,
   createHandleImageEdit,
-} from './dialog-handlers';
+} from "./dialog-handlers";

package/src/extensions/views/components/table.tsx

@@ -2,15 +2,31 @@ import type { ReactNode } from "react";
 
 interface TableProps {
   children: ReactNode;
-  colWidths?: number[];
 }
 
 /**
  * Table component for static rendering
  * Applies column widths from Tiptap table cells
  */
-export function Table({ children, colWidths = [] }: TableProps) {
-  const tableWidth = colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
+export function Table({ children }: TableProps) {
+  let colWidths: number[] = [];
+
+  if (Array.isArray(children) && children.length > 0) {
+    const firstRow = children[0];
+
+    if (firstRow?.props?.children) {
+      const cells = Array.isArray(firstRow.props.children)
+        ? firstRow.props.children
+        : [firstRow.props.children];
+
+      colWidths = cells
+        .map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0])
+        .filter((width: number | undefined) => width !== undefined);
+    }
+  }
+
+  const tableWidth =
+    colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
 
   return (
     <div className="tableWrapper">
@@ -18,7 +34,10 @@ export function Table({ children, colWidths = [] }: TableProps) {
         {colWidths.length > 0 && (
           <colgroup>
             {colWidths.map((width, index) => (
-              <col key={index} style={{ width: `${width}px` }} />
+              <col
+                key={index}
+                style={{ width: `${width}px` }}
+              />
             ))}
           </colgroup>
         )}

package/src/render/static-renderer-config.tsx

@@ -96,23 +96,7 @@ export const getNodeMapping = (getImageById?: (fileId: string) => string | null)
     return <Video src={node.attrs.src} />;
   },
   table({ children }: any) {
-    let colWidths: number[] = [];
-
-    if (Array.isArray(children) && children.length > 0) {
-      const firstRow = children[0];
-
-      if (firstRow?.props?.children) {
-        const cells = Array.isArray(firstRow.props.children)
-          ? firstRow.props.children
-          : [firstRow.props.children];
-
-        colWidths = cells
-          .map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0])
-          .filter((width: number | undefined) => width !== undefined);
-      }
-    }
-
-    return <Table colWidths={colWidths}>{children}</Table>;
+    return <Table>{children}</Table>;
   },
   figure({ node }: any) {
     return (

package/src/editor/handlers/create-image-upload-handler.ts

@@ -1,24 +0,0 @@
-import { ImageUploadHandler } from "../../types";
-
-/**
- * Creates an image upload handler that wraps a custom upload action
- * Supports two patterns:
- * 1. Backend with fileId: { fileId: "file-123" }
- * 2. Direct CDN: { fileUrl: "https://cdn.com/image.jpg" }
- */
-export function createImageUploadHandler(
-  uploadAction: (file: File) => Promise<{ data?: { fileId?: string; fileUrl?: string } }>
-): ImageUploadHandler {
-  return async (file: File) => {
-    const { data } = await uploadAction(file);
-
-    if (!data?.fileId && !data?.fileUrl) {
-      throw new Error("Failed to upload file: must return fileId or fileUrl");
-    }
-
-    return {
-      fileId: data.fileId,
-      fileUrl: data.fileUrl,
-    };
-  };
-}