@cyberyozh/text-editor 0.1.7 → 0.1.9

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.7",
+  "version": "0.1.9",
   "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",
@@ -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/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

@@ -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 })
     : "";
@@ -142,6 +141,7 @@ export const ImageDialog = ({
         caption: formState.caption,
         width: formState.width,
         height: formState.height,
+        storageKey: result.storageKey,
       });
 
       handleClose();

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,
@@ -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]
@@ -157,10 +154,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 = (params: any) => {
+    createHandleLinkAdd(editor, handleCloseDialog, params, savedDialogCursorPos);
+  };
+
   const handleKatexAdd = (latex: string) => {
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
@@ -204,7 +212,7 @@ function TiptapContent({
         >
           <BubbleMenuContent
             editor={editor}
-            onLinkClick={(selectedText, url) => setLinkDialogContext({ selectedText, url })}
+            onLinkClick={(params: LinkDialogContextProps) => setLinkDialogContext(params)}
           />
         </BubbleMenu>
       )}
@@ -239,8 +247,7 @@ function TiptapContent({
               open={true}
               onClose={handleCloseDialog}
               onLinkAdd={handleLinkAdd}
-              initialTitle={linkDialogContext?.selectedText || ""}
-              initialUrl={linkDialogContext?.url || ""}
+              linkDialogContext={linkDialogContext}
             />
           )}