@cyberyozh/text-editor 0.1.15 → 0.1.17

package/dist/styles/index.css

@@ -642,6 +642,7 @@
   display: inline-block;
   position: relative;
   margin: 0 auto;
+  min-width: 0;
 }
 [data-resize-handle] {
   z-index: 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -47,52 +47,52 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@tiptap/core": "^3.17.1",
-    "@tiptap/extension-blockquote": "^3.17.1",
-    "@tiptap/extension-bubble-menu": "^3.17.1",
-    "@tiptap/extension-code": "^3.17.1",
-    "@tiptap/extension-code-block-lowlight": "^3.17.1",
-    "@tiptap/extension-collaboration": "^3.17.1",
-    "@tiptap/extension-details": "^3.17.1",
-    "@tiptap/extension-drag-handle": "^3.17.1",
-    "@tiptap/extension-drag-handle-react": "^3.17.1",
-    "@tiptap/extension-floating-menu": "^3.17.1",
-    "@tiptap/extension-hard-break": "^3.17.1",
-    "@tiptap/extension-highlight": "^3.10.6",
-    "@tiptap/extension-horizontal-rule": "^3.17.1",
-    "@tiptap/extension-image": "^3.17.1",
-    "@tiptap/extension-link": "^3.17.1",
-    "@tiptap/extension-list": "^3.17.1",
-    "@tiptap/extension-mathematics": "^3.17.1",
-    "@tiptap/extension-node-range": "^3.17.1",
-    "@tiptap/extension-subscript": "^3.17.1",
-    "@tiptap/extension-superscript": "^3.17.1",
-    "@tiptap/extension-table": "^3.17.1",
-    "@tiptap/extension-text-align": "^3.17.1",
-    "@tiptap/extensions": "^3.17.1",
-    "@tiptap/html": "^3.17.1",
-    "@tiptap/pm": "^3.17.1",
+    "@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.17.1",
-    "@tiptap/static-renderer": "^3.17.1",
-    "@tiptap/suggestion": "^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.17.1",
+    "emoji-picker-react": "^4.18.0",
     "highlight.js": "^11.11.1",
-    "katex": "^0.16.27",
+    "katex": "^0.16.35",
     "lowlight": "^3.3.0",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.29"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "@types/node": "^20",
-    "eslint": "^8",
-    "tsup": "^8.0.0",
-    "typescript": "^5"
+    "@changesets/cli": "^2.30.0",
+    "@types/node": "^25.3.3",
+    "eslint": "^10.0.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
   "overrides": {
-    "glob": "^11.0.4"
+    "glob": "^13.0.6"
   }
 }

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

@@ -103,7 +103,7 @@ export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
     );
 
     const linkAttrs = editor.getAttributes("link");
-    onLinkClick?.({ title: selectedText, ...(linkAttrs as LinkAttrsType) });
+    onLinkClick?.({ ...(linkAttrs as LinkAttrsType), title: selectedText });
     openDialogCommand("link");
   };
 

package/src/editor/dialogs/add-link-dialog/add-link-dialog.tsx

@@ -21,13 +21,9 @@ export const AddLinkDialog = ({
 }: AddLinkDialogProps) => {
   const translations = useTiptapTranslations();
 
-  const initialLinkTarget = linkDialogContext?.target
-    ? linkDialogContext.target === "_blank"
-    : true;
+  const initialLinkTarget = linkDialogContext ? linkDialogContext.target === "_blank" : true;
 
-  const initialLinkRel = linkDialogContext?.rel
-    ? linkDialogContext.rel?.includes("noopener")
-    : true;
+  const initialLinkRel = linkDialogContext ? !!linkDialogContext.rel?.includes("noopener") : true;
 
   const [title, setTitle] = useState(linkDialogContext?.title);
   const [url, setUrl] = useState(linkDialogContext?.href);

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

@@ -101,6 +101,7 @@ export const createHandleLinkAdd = (
       .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;
       })

package/src/extensions/base/figure.ts

@@ -37,6 +37,43 @@ export const BaseFigure = Image.extend<FigureOptions>({
   addAttributes() {
     return {
       ...this.parent?.(),
+      src: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.tagName === "FIGURE" ? element.querySelector("img") : element;
+          return img?.getAttribute("src") ?? null;
+        },
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.tagName === "FIGURE" ? element.querySelector("img") : element;
+          return img?.getAttribute("alt") ?? null;
+        },
+      },
+      title: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.tagName === "FIGURE" ? element.querySelector("img") : element;
+          return img?.getAttribute("title") ?? null;
+        },
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.tagName === "FIGURE" ? element.querySelector("img") : element;
+          const val = img?.getAttribute("width");
+          return val ? parseInt(val) : null;
+        },
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.tagName === "FIGURE" ? element.querySelector("img") : element;
+          const val = img?.getAttribute("height");
+          return val ? parseInt(val) : null;
+        },
+      },
       fileId: {
         default: null,
         parseHTML: (element) => {

package/src/extensions/base/link.ts

@@ -1,15 +1,72 @@
-import Link from "@tiptap/extension-link";
+import Link, { isAllowedUri } from "@tiptap/extension-link";
+import { markPasteRule } from "@tiptap/core";
+import { find } from "linkifyjs";
+
+const isSameDomain = (url: string): boolean => {
+  if (typeof window === "undefined") return false;
+  try {
+    return new URL(url).hostname === window.location.hostname;
+  } catch {
+    return false;
+  }
+};
 
 export const LinkExtension = Link.extend({
-  addOptions() {
+  addAttributes() {
     return {
       ...this.parent?.(),
-      openOnClick: false,
-      linkOnPaste: true,
-      autolink: true,
-      protocols: ["http", "https", "mailto", "tel"],
+      target: {
+        default: "_blank",
+        parseHTML: (element) => {
+          const href = element.getAttribute("href") ?? "";
+          return isSameDomain(href) ? "_self" : "_blank";
+        },
+      },
+      rel: {
+        default: null,
+        parseHTML: (element) => {
+          const href = element.getAttribute("href") ?? "";
+          return isSameDomain(href) ? null : "noopener noreferrer nofollow";
+        },
+      },
     };
   },
+
+  addPasteRules() {
+    if (!this.options.linkOnPaste) {
+      return this.parent?.() ?? [];
+    }
+
+    const { protocols, defaultProtocol } = this.options;
+
+    return [
+      markPasteRule({
+        find: (text) =>
+          find(text)
+            .filter(
+              (link) =>
+                link.isLink &&
+                this.options.isAllowedUri(link.value, {
+                  defaultValidate: (href) => !!isAllowedUri(href, protocols),
+                  protocols,
+                  defaultProtocol,
+                }),
+            )
+            .filter((link) => this.options.shouldAutoLink?.(link.value) !== false)
+            .map((link) => ({ text: link.value, data: { href: link.href }, index: link.start })),
+        type: this.type,
+        getAttributes: (match) => {
+          const href = match.data?.href ?? "";
+          const sameDomain = isSameDomain(href);
+          return {
+            href,
+            target: sameDomain ? "_self" : "_blank",
+            rel: sameDomain ? null : "noopener noreferrer nofollow",
+          };
+        },
+      }),
+    ];
+  },
 }).configure({
   openOnClick: false,
   linkOnPaste: true,

package/src/extensions/editor/figure.ts

@@ -54,7 +54,8 @@ export const Figure = BaseFigure.extend({
 
       const updateImageDimensions = (width: number, height: number) => {
         imageContainer.style.width = `${width}px`;
-        imageContainer.style.height = `${height}px`;
+        imageContainer.style.aspectRatio = `${width} / ${height}`;
+        imageContainer.style.height = '';
       };
 
       const figure = document.createElement("figure");
@@ -70,7 +71,7 @@ export const Figure = BaseFigure.extend({
 
       if (attrs.width && attrs.height) {
         imageContainer.style.width = `${attrs.width}px`;
-        imageContainer.style.height = `${attrs.height}px`;
+        imageContainer.style.aspectRatio = `${attrs.width} / ${attrs.height}`;
       }
 
       img.onload = () => {
@@ -81,19 +82,13 @@ export const Figure = BaseFigure.extend({
         }
 
         if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
-          const width = maxWidth;
-          const height = Math.round((attrs.height / attrs.width) * maxWidth);
-
-          imageContainer.style.width = `${width}px`;
-          imageContainer.style.height = `${height}px`;
-
           const pos = getPos();
           if (typeof pos === "number") {
             editor
               .chain()
               .updateAttributes("image", {
-                width: Math.round(width),
-                height: Math.round(height),
+                width: maxWidth,
+                height: Math.round((attrs.height / attrs.width) * maxWidth),
               })
               .run();
           }
@@ -149,11 +144,13 @@ export const Figure = BaseFigure.extend({
           }
         },
         onUpdate: (updatedNode) => {
-          if (updatedNode.attrs.width) {
-            imageContainer.style.width = `${updatedNode.attrs.width}px`;
-          }
-          if (updatedNode.attrs.height) {
-            imageContainer.style.height = `${updatedNode.attrs.height}px`;
+          const newWidth = updatedNode.attrs.width;
+          const newHeight = updatedNode.attrs.height;
+
+          if (newWidth) imageContainer.style.width = `${newWidth}px`;
+          if (newWidth && newHeight) {
+            imageContainer.style.aspectRatio = `${newWidth} / ${newHeight}`;
+            imageContainer.style.height = '';
           }
 
           const existingCaption = figure.querySelector("figcaption");
@@ -194,6 +191,8 @@ export const Figure = BaseFigure.extend({
         },
       });
 
+      imageContainer.style.height = '';
+
       figure.appendChild(resizableView.dom);
 
       if (attrs.caption) {

package/src/styles/extensions/figure.css

@@ -85,6 +85,7 @@
   display: inline-block;
   position: relative;
   margin: 0 auto;
+  min-width: 0;
 }
 
 [data-resize-handle] {

package/src/types/link.ts

@@ -7,3 +7,4 @@ export interface LinkAttrsType {
   target: string;
   rel: string | null;
 }
+