@cyberyozh/text-editor 0.1.7 → 0.1.9

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

@@ -1,6 +1,8 @@
 import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
 
 import type { FigureAttrs, TiptapImageAttrs } from "../../types";
+import { LinkDialogContextProps } from "@/types/link";
 
 export const createHandleImageAdd = (
   editor: Editor | null,
@@ -11,40 +13,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();
   };
 };
@@ -71,43 +59,26 @@ export const createHandleVideoAdd = (
     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 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();
 
-    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;
-
-      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();
   };
 };
@@ -115,62 +86,43 @@ export const createHandleVideoAdd = (
 export const createHandleLinkAdd = (
   editor: Editor | null,
   closeDialogCommand: () => void,
+  linkParams: LinkDialogContextProps,
   savedPos?: number
 ) => {
-  return (title: string, url: string) => {
-    if (!editor) return;
-
-    const hasSelection = !editor.state.selection.empty;
-
-    if (hasSelection) {
-      editor
-        .chain()
-        .focus()
-        .command(({ tr, state }) => {
-          const { from, to } = state.selection;
-          tr.insertText(title, from, to);
-          tr.addMark(from, from + title.length, editor.schema.marks.link.create({ href: url }));
-          return true;
-        })
-        .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();
-      }
-    }
-    closeDialogCommand();
-  };
+  if (!editor) return;
+
+  const hasSelection = !editor.state.selection.empty;
+  const titleLength = linkParams.title?.length ?? 0;
+
+  if (hasSelection) {
+    editor
+      .chain()
+      .focus()
+      .command(({ tr, state }) => {
+        const { from, to } = state.selection;
+        tr.insertText(linkParams.title ?? "", from, to);
+        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;
+
+    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();
 };
 
 export const createHandleKatexAdd = (
@@ -185,39 +137,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/base/compatibility.ts

@@ -24,6 +24,32 @@ export const BaseLegacyBookAlert = Node.create({
       type: {
         default: "error",
       },
+      bgColor: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-bg-color");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.bgColor) return {};
+          return {
+            "data-bg-color": attributes.bgColor,
+          };
+        },
+      },
+      emoji: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-emoji");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.emoji) return {};
+          return {
+            "data-emoji": attributes.emoji,
+          };
+        },
+      },
     };
   },
 
@@ -65,6 +91,32 @@ export const BaseLegacyBookTip = Node.create({
       type: {
         default: "info",
       },
+      bgColor: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-bg-color");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.bgColor) return {};
+          return {
+            "data-bg-color": attributes.bgColor,
+          };
+        },
+      },
+      emoji: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-emoji");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.emoji) return {};
+          return {
+            "data-emoji": attributes.emoji,
+          };
+        },
+      },
     };
   },
 

package/src/extensions/base/figure.ts

@@ -52,6 +52,13 @@ export const BaseFigure = Image.extend<FigureOptions>({
         default: null,
         parseHTML: (element) => element.querySelector("figcaption")?.textContent || null,
       },
+      storageKey: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-storage-key"),
+        renderHTML: (attributes) => ({
+          "data-storage-key": attributes.storageKey,
+        }),
+      },
     };
   },
 

package/src/extensions/base/link.ts

@@ -1,4 +1,4 @@
-import Link from '@tiptap/extension-link';
+import Link from "@tiptap/extension-link";
 
 export const LinkExtension = Link.extend({
   addOptions() {
@@ -7,12 +7,12 @@ export const LinkExtension = Link.extend({
       openOnClick: false,
       linkOnPaste: true,
       autolink: true,
-      protocols: ['http', 'https', 'mailto', 'tel'],
+      protocols: ["http", "https", "mailto", "tel"],
     };
   },
 }).configure({
   openOnClick: false,
   linkOnPaste: true,
   autolink: true,
-  protocols: ['http', 'https', 'mailto', 'tel'],
+  protocols: ["http", "https", "mailto", "tel"],
 });

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/extensions/views/node-views/figure.tsx

@@ -6,7 +6,7 @@ import { FigureAttrs } from "../../../types";
 import { Figure } from "../components";
 
 export const FigureView = ({ node, getPos, editor }: NodeViewProps) => {
-  const { fileId, src, alt, title, caption, width, height } = node.attrs as FigureAttrs;
+  const { fileId, src, alt, title, caption, width, height, storageKey } = node.attrs as FigureAttrs;
 
   const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "image");
   const getImageById = imageExtension?.options.getImageById;

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/styles/editor/base.css

@@ -8,7 +8,7 @@
   font-family: var(--tiptap-font-family);
 }
 
-.tiptap-content-wrapper:focus {
+.tiptap-content-wrapper:focus-within {
   border-color: var(--tiptap-color-primary-light);
   outline: none;
 }

package/src/styles/extensions/callout.css

@@ -105,7 +105,7 @@
   flex: 1;
   min-width: 0;
   font-size: var(--tiptap-font-size);
-  line-height: 1;
+  line-height: 140%;
 }
 
 .callout-content {

package/src/translations/en.json

@@ -32,7 +32,11 @@
     "invalidUrl": "Invalid URL",
     "emptyUrl": "Enter link URL",
     "addLinkTitle": "Add link",
-    "removeLinkTitle": "Remove link"
+    "removeLinkTitle": "Remove link",
+    "openInNewTab": "Open in new tab",
+    "openInNewTabHelp": "Link will open in a new browser window or tab",
+    "addNofollow": "Add rel=\"nofollow\"",
+    "addNofollowHelp": "Tells search engines not to count this link when calculating page rankings and indexing. Recommended for all external links."
   },
   "lists": {
     "bulletList": "Bullet list",

package/src/translations/ru.json

@@ -32,7 +32,11 @@
     "invalidUrl": "Неверный URL",
     "emptyUrl": "Введите URL ссылки",
     "addLinkTitle": "Добавить ссылку",
-    "removeLinkTitle": "Удалить ссылку"
+    "removeLinkTitle": "Удалить ссылку",
+    "openInNewTab": "Открыть в новой вкладке",
+    "openInNewTabHelp": "Ссылка откроется в новом окне или вкладке браузера",
+    "addNofollow": "Добавить rel=\"nofollow\"",
+    "addNofollowHelp": "Указывает поисковым системам не учитывать ссылку при расчете рейтинга и индексации страницы, на которой они размещены. Рекомендуется применять ко всем ссылкам на сторонние сайты."
   },
   "lists": {
     "bulletList": "Ненумерованный список",

package/src/types/image-handler.ts

@@ -1,6 +1,7 @@
 export interface ImageUploadResult {
   fileId?: string;
   fileUrl?: string;
+  storageKey?: string;
 }
 
 export interface ImageUploadHandler {
@@ -24,6 +25,7 @@ export interface FigureAttrs {
   caption?: string;
   width?: number | null;
   height?: number | null;
+  storageKey?: string;
 }
 
 export interface TiptapImageAttrs extends FigureAttrs {}

package/src/types/link.ts

@@ -0,0 +1,9 @@
+export interface LinkDialogContextProps extends LinkAttrsType {
+  title?: string;
+}
+
+export interface LinkAttrsType {
+  href: string;
+  target: string;
+  rel: string | null;
+}

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,
-    };
-  };
-}