@cyberyozh/text-editor 0.1.8 → 0.1.10

package/dist/styles/index.css

@@ -343,6 +343,16 @@
 .link-dialog-button-submit:active {
   transform: scale(0.98);
 }
+.link-dialog-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.link-dialog-help-text {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: 14px;
+}
 
 /* src/editor/dialogs/add-video-dialog/add-video-dialog.css */
 .video-dialog-title {
@@ -1141,7 +1151,7 @@
   flex: 1;
   min-width: 0;
   font-size: var(--tiptap-font-size);
-  line-height: 1;
+  line-height: 140%;
 }
 .callout-content {
   color: inherit;
@@ -1568,7 +1578,7 @@
   font-size: var(--tiptap-font-size);
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "changeset": "changeset",
     "version": "changeset version",
     "release": "npm run build && changeset publish",
-    "release:complete": "git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && npm run release && git push --follow-tags"
+    "release:complete": "changeset version && git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && npm run release && git push --follow-tags"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

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

@@ -31,10 +31,11 @@ import {
 
 import { useDialogCommand } from "../context/dialog-command";
 import { useTiptapTranslations } from "../context";
+import { LinkAttrsType, LinkDialogContextProps } from "@/types/link";
 
 interface Props {
   editor: Editor;
-  onLinkClick?: (selectedText: string, url?: string) => void;
+  onLinkClick?: (params: LinkDialogContextProps) => void;
 }
 
 export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
@@ -101,13 +102,8 @@ export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
       editor.state.selection.$to.pos
     );
 
-    let linkUrl: string | undefined;
-    if (isLink) {
-      const link = editor.getAttributes("link");
-      linkUrl = link.href;
-    }
-
-    onLinkClick?.(selectedText, linkUrl);
+    const linkAttrs = editor.getAttributes("link");
+    onLinkClick?.({ title: selectedText, ...(linkAttrs as LinkAttrsType) });
     openDialogCommand("link");
   };
 

package/src/editor/controls/callout-menu.tsx

@@ -148,6 +148,8 @@ export const CalloutMenu = ({ isOpen, onClose, onColorSelect, editor, nodePos }:
                   .setColor(textColor)
                   .setNodeSelection(nodePos)
                   .updateAttributes("callout", { bgColor })
+                  .updateAttributes("calloutTip", { bgColor })
+                  .updateAttributes("calloutAlert", { bgColor })
                   .run();
               }
             }

package/src/editor/controls/drag-handle.tsx

@@ -22,7 +22,10 @@ export const DragHandle = ({ editor }: Props) => {
 
       try {
         const node = editor.view.state.doc.nodeAt(pos);
-        const isCallout = node?.type.name === "callout";
+        const isCallout =
+          node?.type.name === "callout" ||
+          node?.type.name === "calloutAlert" ||
+          node?.type.name === "calloutTip";
         setIsCalloutNode(isCallout);
 
         if (prevPos !== null && prevPos !== pos) {
@@ -61,6 +64,8 @@ export const DragHandle = ({ editor }: Props) => {
           .setColor(textColor)
           .setNodeSelection(pos)
           .updateAttributes("callout", { bgColor })
+          .updateAttributes("calloutTip", { bgColor })
+          .updateAttributes("calloutAlert", { bgColor })
           .run();
       }
 

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

@@ -1,7 +1,3 @@
-/* ═══════════════════════════════════════════════════════════ */
-/* ADD LINK DIALOG */
-/* ═══════════════════════════════════════════════════════════ */
-
 .link-dialog-title {
   margin: 0 0 16px 0;
   font-weight: 600;
@@ -103,3 +99,15 @@
 .link-dialog-button-submit:active {
   transform: scale(0.98);
 }
+
+.link-dialog-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.link-dialog-help-text {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: 14px;
+}

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

@@ -4,39 +4,55 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 import { CommonModal } from "../../components";
 import { useTiptapTranslations } from "../../context";
+import { LinkDialogContextProps } from "@/types/link";
 
 interface AddLinkDialogProps {
   open: boolean;
   onClose: () => void;
-  onLinkAdd: (title: string, url: string) => void;
-  initialTitle?: string;
-  initialUrl?: string;
+  onLinkAdd: (params: LinkDialogContextProps) => void;
+  linkDialogContext: LinkDialogContextProps | null;
 }
 
 export const AddLinkDialog = ({
   open,
   onClose,
   onLinkAdd,
-  initialTitle = "",
-  initialUrl = "",
+  linkDialogContext,
 }: AddLinkDialogProps) => {
   const translations = useTiptapTranslations();
-  const [title, setTitle] = useState(initialTitle);
-  const [url, setUrl] = useState(initialUrl);
+
+  const initialLinkTarget = linkDialogContext?.target
+    ? linkDialogContext.target === "_blank"
+    : true;
+
+  const initialLinkRel = linkDialogContext?.rel
+    ? linkDialogContext.rel?.includes("noopener")
+    : true;
+
+  const [title, setTitle] = useState(linkDialogContext?.title);
+  const [url, setUrl] = useState(linkDialogContext?.href);
+  const [openInNewTab, setOpenInNewTab] = useState(initialLinkTarget);
+  const [addNoopener, setAddNoopener] = useState(initialLinkRel);
   const [error, setError] = useState<string>("");
   const titleInputRef = useRef<HTMLInputElement>(null);
 
+  const clearDialogState = () => {
+    setTitle(linkDialogContext?.title);
+    setUrl(linkDialogContext?.href);
+    setOpenInNewTab(initialLinkTarget);
+    setAddNoopener(initialLinkRel);
+    setError("");
+  };
+
   useEffect(() => {
     if (open) {
-      setTitle(initialTitle);
-      setUrl(initialUrl);
-      setError("");
-      // Focus the first input after modal opens
+      clearDialogState();
+
       setTimeout(() => {
         titleInputRef.current?.focus();
       }, 0);
     }
-  }, [open, initialTitle, initialUrl]);
+  }, [open, linkDialogContext]);
 
   const validateUrl = (urlStr: string): boolean => {
     if (!urlStr.trim()) {
@@ -44,17 +60,14 @@ export const AddLinkDialog = ({
       return false;
     }
 
-    // Check if URL has a protocol (mailto:, tel:, http:, https:, etc)
     const hasProtocol =
       urlStr.includes("://") || urlStr.startsWith("mailto:") || urlStr.startsWith("tel:");
 
-    // Only validate hostname for web URLs (http/https)
     if (!hasProtocol || urlStr.startsWith("http")) {
       try {
         const urlWithProtocol = urlStr.startsWith("http") ? urlStr : `https://${urlStr}`;
         const url = new URL(urlWithProtocol);
 
-        // Validate hostname has proper structure (contains . or is localhost)
         const hostname = url.hostname;
         if (!hostname.includes(".") && hostname !== "localhost") {
           setError(translations.link.invalidUrl);
@@ -67,34 +80,34 @@ export const AddLinkDialog = ({
         return false;
       }
     }
-
-    // For non-web protocols (mailto, tel, etc), just validate basic format
     return true;
   };
 
   const handleSubmit = () => {
     setError("");
 
-    if (!title.trim()) {
+    if (!title?.trim()) {
       setError(translations.link.titleError);
       return;
     }
 
-    if (!validateUrl(url)) {
+    if (!validateUrl(url ?? "")) {
       return;
     }
 
-    // Preserve protocols like mailto:, tel:, etc; only add https for plain URLs
-    const hasProtocol = url.includes("://") || url.startsWith("mailto:") || url.startsWith("tel:");
+    const hasProtocol =
+      url?.includes("://") || url?.startsWith("mailto:") || url?.startsWith("tel:");
     const finalUrl = hasProtocol ? url : `https://${url}`;
-    onLinkAdd(title, finalUrl);
+
+    const target = openInNewTab ? "_blank" : "_self";
+    const rel = addNoopener ? "noopener noreferrer nofollow" : null;
+
+    onLinkAdd({ title, href: finalUrl ?? "", target, rel });
     handleClose();
   };
 
   const handleClose = () => {
-    setTitle(initialTitle);
-    setUrl(initialUrl);
-    setError("");
+    clearDialogState();
     onClose();
   };
 
@@ -111,7 +124,7 @@ export const AddLinkDialog = ({
       handleClose={handleClose}
     >
       <p className="link-dialog-title">
-        {initialUrl ? translations.link.editLink : translations.link.addLink}
+        {linkDialogContext?.href ? translations.link.editLink : translations.link.addLink}
       </p>
       <hr className="link-dialog-divider" />
 
@@ -147,12 +160,36 @@ export const AddLinkDialog = ({
             type="text"
             className="link-dialog-input"
             placeholder={translations.link.urlPlaceholder}
-            value={url}
+            value={url ?? ""}
             onChange={(e: ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
             onKeyDown={handleKeyDown}
           />
         </div>
 
+        <div className="link-dialog-form-group">
+          <label className="link-dialog-checkbox-label">
+            <input
+              type="checkbox"
+              checked={openInNewTab}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setOpenInNewTab(e.target.checked)}
+            />
+            <span>{translations.link.openInNewTab}</span>
+          </label>
+          <p className="link-dialog-help-text">{translations.link.openInNewTabHelp}</p>
+        </div>
+
+        <div className="link-dialog-form-group">
+          <label className="link-dialog-checkbox-label">
+            <input
+              type="checkbox"
+              checked={addNoopener}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setAddNoopener(e.target.checked)}
+            />
+            <span>{translations.link.addNofollow}</span>
+          </label>
+          <p className="link-dialog-help-text">{translations.link.addNofollowHelp}</p>
+        </div>
+
         {error && <div className="link-dialog-error">{error}</div>}
       </div>
 
@@ -169,7 +206,7 @@ export const AddLinkDialog = ({
           onClick={handleSubmit}
           type="button"
         >
-          {initialUrl ? translations.link.editLink : translations.link.addLink}
+          {linkDialogContext?.href ? translations.link.editLink : translations.link.addLink}
         </button>
       </div>
     </CommonModal>

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

@@ -141,6 +141,7 @@ export const ImageDialog = ({
         caption: formState.caption,
         width: formState.width,
         height: formState.height,
+        storageKey: result.storageKey,
       });
 
       handleClose();

package/src/editor/editor.tsx

@@ -36,6 +36,7 @@ import {
 import "../styles/styles.css";
 import { createSuggestions } from "./commands/suggestion";
 import { getTranslations, type SupportedLanguage } from "../utils/get-translations";
+import { LinkDialogContextProps } from "@/types/link";
 
 interface TiptapProps {
   isEditable?: boolean;
@@ -60,11 +61,6 @@ interface TiptapProps {
   error?: string;
 }
 
-interface LinkDialogContextProps {
-  selectedText?: string;
-  url?: string;
-}
-
 interface KatexDialogContextProps {
   latex?: string;
   pos?: number;
@@ -137,6 +133,7 @@ function TiptapContent({
           return false;
         },
       },
+      onCreate: ({ editor }) => handleChange?.(editor.getJSON()),
       onBlur: ({ editor }) => handleChange?.(editor.getJSON()),
     },
     [lang]
@@ -168,8 +165,8 @@ function TiptapContent({
     createHandleVideoAdd(editor, handleCloseDialog, savedDialogCursorPos)(url);
   };
 
-  const handleLinkAdd = (title: string, url: string) => {
-    createHandleLinkAdd(editor, handleCloseDialog, savedDialogCursorPos)(title, url);
+  const handleLinkAdd = (params: any) => {
+    createHandleLinkAdd(editor, handleCloseDialog, params, savedDialogCursorPos);
   };
 
   const handleKatexAdd = (latex: string) => {
@@ -215,7 +212,7 @@ function TiptapContent({
         >
           <BubbleMenuContent
             editor={editor}
-            onLinkClick={(selectedText, url) => setLinkDialogContext({ selectedText, url })}
+            onLinkClick={(params: LinkDialogContextProps) => setLinkDialogContext(params)}
           />
         </BubbleMenu>
       )}
@@ -250,8 +247,7 @@ function TiptapContent({
               open={true}
               onClose={handleCloseDialog}
               onLinkAdd={handleLinkAdd}
-              initialTitle={linkDialogContext?.selectedText || ""}
-              initialUrl={linkDialogContext?.url || ""}
+              linkDialogContext={linkDialogContext}
             />
           )}
 

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

@@ -2,6 +2,7 @@ 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,
@@ -42,7 +43,6 @@ 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();
@@ -86,42 +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;
+  if (!editor) return;
 
-    const hasSelection = !editor.state.selection.empty;
+  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(title, from, to);
-          tr.addMark(from, from + title.length, editor.schema.marks.link.create({ href: url }));
-          return true;
-        })
-        .run();
-    } else {
-      const { state } = editor;
-      const insertPos = savedPos ?? state.selection.from;
+  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({ 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();
-  };
+    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 = (

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 
 interface TableProps {
   children: ReactNode;
@@ -9,7 +9,10 @@ interface TableProps {
  * Applies column widths from Tiptap table cells
  */
 export function Table({ children }: TableProps) {
-  let colWidths: number[] = [];
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [undefinedColWidth, setUndefinedColWidth] = useState<number | undefined>(undefined);
+
+  let colWidths: (number | undefined)[] = [];
 
   if (Array.isArray(children) && children.length > 0) {
     const firstRow = children[0];
@@ -19,24 +22,47 @@ export function Table({ children }: TableProps) {
         ? firstRow.props.children
         : [firstRow.props.children];
 
-      colWidths = cells
-        .map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0])
-        .filter((width: number | undefined) => width !== undefined);
+      colWidths = cells.map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0]);
     }
   }
 
+  // Calculate widths based on container
+  const definedWidths = colWidths.filter((w): w is number => w !== undefined);
+  const totalDefinedWidth = definedWidths.reduce((total, width) => total + width, 0);
+  const undefinedCount = colWidths.filter((w) => w === undefined).length;
+
+  useEffect(() => {
+    if (wrapperRef.current && undefinedCount > 0) {
+      const containerWidth = wrapperRef.current.clientWidth;
+      const remainingSpace = containerWidth - totalDefinedWidth;
+      const calculatedWidth = Math.floor(remainingSpace / undefinedCount);
+      setUndefinedColWidth(calculatedWidth > 0 ? calculatedWidth : undefined);
+    }
+  }, [totalDefinedWidth, undefinedCount]);
+
+  // Calculate total table width
   const tableWidth =
-    colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
+    undefinedCount > 0 && undefinedColWidth
+      ? totalDefinedWidth + (undefinedColWidth * undefinedCount)
+      : totalDefinedWidth > 0
+      ? totalDefinedWidth
+      : undefined;
 
   return (
-    <div className="tableWrapper">
+    <div ref={wrapperRef} className="tableWrapper">
       <table style={tableWidth ? { width: `${tableWidth}px` } : undefined}>
         {colWidths.length > 0 && (
           <colgroup>
             {colWidths.map((width, index) => (
               <col
                 key={index}
-                style={{ width: `${width}px` }}
+                style={
+                  width
+                    ? { width: `${width}px` }
+                    : undefinedColWidth
+                    ? { width: `${undefinedColWidth}px` }
+                    : undefined
+                }
               />
             ))}
           </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/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;
 }