@cyberyozh/text-editor 0.1.8 → 0.1.10

package/dist/editor.mjs

@@ -1,5 +1,5 @@
 // src/editor/editor.tsx
-import { useState as useState12, useEffect as useEffect9 } from "react";
+import { useState as useState13, useEffect as useEffect10 } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
 import { Slice } from "@tiptap/pm/model";
 import { useEditor, EditorContent } from "@tiptap/react";
@@ -780,12 +780,8 @@ var BubbleMenuContent = ({ editor, onLinkClick }) => {
       editor.state.selection.$from.pos,
       editor.state.selection.$to.pos
     );
-    let linkUrl;
-    if (isLink) {
-      const link = editor.getAttributes("link");
-      linkUrl = link.href;
-    }
-    onLinkClick?.(selectedText, linkUrl);
+    const linkAttrs = editor.getAttributes("link");
+    onLinkClick?.({ title: selectedText, ...linkAttrs });
     openDialogCommand("link");
   };
   return /* @__PURE__ */ jsxs10(
@@ -1243,7 +1239,7 @@ var CalloutMenu = ({ isOpen, onClose, onColorSelect, editor, nodePos }) => {
                     const b = parseInt(bgColor.slice(5, 7), 16);
                     const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
                     const textColor = brightness > 128 ? "#000000" : "#FFFFFF";
-                    editor.chain().setTextSelection({ from, to }).setColor(textColor).setNodeSelection(nodePos).updateAttributes("callout", { bgColor }).run();
+                    editor.chain().setTextSelection({ from, to }).setColor(textColor).setNodeSelection(nodePos).updateAttributes("callout", { bgColor }).updateAttributes("calloutTip", { bgColor }).updateAttributes("calloutAlert", { bgColor }).run();
                   }
                 }
               },
@@ -1277,7 +1273,7 @@ var DragHandle = ({ editor }) => {
       currentNodePosRef.current = pos;
       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) {
           setShowCalloutMenu(false);
@@ -1305,7 +1301,7 @@ var DragHandle = ({ editor }) => {
       if (node) {
         const from = pos + 1;
         const to = pos + node.nodeSize - 1;
-        editor.chain().setTextSelection({ from, to }).setColor(textColor).setNodeSelection(pos).updateAttributes("callout", { bgColor }).run();
+        editor.chain().setTextSelection({ from, to }).setColor(textColor).setNodeSelection(pos).updateAttributes("callout", { bgColor }).updateAttributes("calloutTip", { bgColor }).updateAttributes("calloutAlert", { bgColor }).run();
       }
       setShowCalloutMenu(false);
     }
@@ -1974,7 +1970,8 @@ var ImageDialog = ({
         title: formState.title,
         caption: formState.caption,
         width: formState.width,
-        height: formState.height
+        height: formState.height,
+        storageKey: result.storageKey
       });
       handleClose();
     } finally {
@@ -2226,24 +2223,32 @@ var AddLinkDialog = ({
   open,
   onClose,
   onLinkAdd,
-  initialTitle = "",
-  initialUrl = ""
+  linkDialogContext
 }) => {
   const translations2 = useTiptapTranslations();
-  const [title, setTitle] = useState8(initialTitle);
-  const [url, setUrl] = useState8(initialUrl);
+  const initialLinkTarget = linkDialogContext?.target ? linkDialogContext.target === "_blank" : true;
+  const initialLinkRel = linkDialogContext?.rel ? linkDialogContext.rel?.includes("noopener") : true;
+  const [title, setTitle] = useState8(linkDialogContext?.title);
+  const [url, setUrl] = useState8(linkDialogContext?.href);
+  const [openInNewTab, setOpenInNewTab] = useState8(initialLinkTarget);
+  const [addNoopener, setAddNoopener] = useState8(initialLinkRel);
   const [error, setError] = useState8("");
   const titleInputRef = useRef8(null);
+  const clearDialogState = () => {
+    setTitle(linkDialogContext?.title);
+    setUrl(linkDialogContext?.href);
+    setOpenInNewTab(initialLinkTarget);
+    setAddNoopener(initialLinkRel);
+    setError("");
+  };
   useEffect6(() => {
     if (open) {
-      setTitle(initialTitle);
-      setUrl(initialUrl);
-      setError("");
+      clearDialogState();
       setTimeout(() => {
         titleInputRef.current?.focus();
       }, 0);
     }
-  }, [open, initialTitle, initialUrl]);
+  }, [open, linkDialogContext]);
   const validateUrl = (urlStr) => {
     if (!urlStr.trim()) {
       setError(translations2.link.emptyUrl);
@@ -2269,22 +2274,22 @@ var AddLinkDialog = ({
   };
   const handleSubmit = () => {
     setError("");
-    if (!title.trim()) {
+    if (!title?.trim()) {
       setError(translations2.link.titleError);
       return;
     }
-    if (!validateUrl(url)) {
+    if (!validateUrl(url ?? "")) {
       return;
     }
-    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();
   };
   const handleKeyDown = (e) => {
@@ -2299,7 +2304,7 @@ var AddLinkDialog = ({
       open,
       handleClose,
       children: [
-        /* @__PURE__ */ jsx69("p", { className: "link-dialog-title", children: initialUrl ? translations2.link.editLink : translations2.link.addLink }),
+        /* @__PURE__ */ jsx69("p", { className: "link-dialog-title", children: linkDialogContext?.href ? translations2.link.editLink : translations2.link.addLink }),
         /* @__PURE__ */ jsx69("hr", { className: "link-dialog-divider" }),
         /* @__PURE__ */ jsxs20("div", { className: "link-dialog-content", children: [
           /* @__PURE__ */ jsxs20("div", { className: "link-dialog-form-group", children: [
@@ -2341,12 +2346,40 @@ var AddLinkDialog = ({
                 type: "text",
                 className: "link-dialog-input",
                 placeholder: translations2.link.urlPlaceholder,
-                value: url,
+                value: url ?? "",
                 onChange: (e) => setUrl(e.target.value),
                 onKeyDown: handleKeyDown
               }
             )
           ] }),
+          /* @__PURE__ */ jsxs20("div", { className: "link-dialog-form-group", children: [
+            /* @__PURE__ */ jsxs20("label", { className: "link-dialog-checkbox-label", children: [
+              /* @__PURE__ */ jsx69(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: openInNewTab,
+                  onChange: (e) => setOpenInNewTab(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx69("span", { children: translations2.link.openInNewTab })
+            ] }),
+            /* @__PURE__ */ jsx69("p", { className: "link-dialog-help-text", children: translations2.link.openInNewTabHelp })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { className: "link-dialog-form-group", children: [
+            /* @__PURE__ */ jsxs20("label", { className: "link-dialog-checkbox-label", children: [
+              /* @__PURE__ */ jsx69(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: addNoopener,
+                  onChange: (e) => setAddNoopener(e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx69("span", { children: translations2.link.addNofollow })
+            ] }),
+            /* @__PURE__ */ jsx69("p", { className: "link-dialog-help-text", children: translations2.link.addNofollowHelp })
+          ] }),
           error && /* @__PURE__ */ jsx69("div", { className: "link-dialog-error", children: error })
         ] }),
         /* @__PURE__ */ jsxs20("div", { className: "link-dialog-actions", children: [
@@ -2365,7 +2398,7 @@ var AddLinkDialog = ({
               className: "link-dialog-button-submit",
               onClick: handleSubmit,
               type: "button",
-              children: initialUrl ? translations2.link.editLink : translations2.link.addLink
+              children: linkDialogContext?.href ? translations2.link.editLink : translations2.link.addLink
             }
           )
         ] })
@@ -3212,6 +3245,13 @@ var BaseFigure = Image2.extend({
       caption: {
         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
+        })
       }
     };
   },
@@ -3302,6 +3342,32 @@ var BaseLegacyBookAlert = Node6.create({
     return {
       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
+          };
+        }
       }
     };
   },
@@ -3331,6 +3397,32 @@ var BaseLegacyBookTip = Node6.create({
     return {
       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
+          };
+        }
       }
     };
   },
@@ -3665,7 +3757,7 @@ var BaseLegacyFigure = Image3.extend({
 
 // src/extensions/views/node-views/callout.tsx
 import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/icons/color/TiptapCalloutError.tsx
 import { jsx as jsx71, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -4255,6 +4347,7 @@ var PromptContent = ({ children, isEmpty, placeholder }) => /* @__PURE__ */ jsx8
 ) });
 
 // src/extensions/views/components/table.tsx
+import { useEffect as useEffect8, useRef as useRef10, useState as useState10 } from "react";
 import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 
 // src/extensions/views/components/video.tsx
@@ -4290,13 +4383,13 @@ var Video = ({ src, children }) => {
 };
 
 // src/editor/controls/emoji-picker.tsx
-import { useEffect as useEffect8, useRef as useRef10 } from "react";
+import { useEffect as useEffect9, useRef as useRef11 } from "react";
 import EmojiPicker from "emoji-picker-react";
 import { jsx as jsx84 } from "react/jsx-runtime";
 var EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }) => {
-  const pickerRef = useRef10(null);
+  const pickerRef = useRef11(null);
   const translations2 = useTiptapTranslations();
-  useEffect8(() => {
+  useEffect9(() => {
     const handleClickOutside = (event) => {
       if (pickerRef.current && !pickerRef.current.contains(event.target)) {
         onClose();
@@ -4345,7 +4438,7 @@ var CalloutView = (props) => {
   const type = props.node.attrs.type || "info";
   const bgColor = props.node.attrs.bgColor;
   const emoji = props.node.attrs.emoji;
-  const [showEmojiPicker, setShowEmojiPicker] = useState10(false);
+  const [showEmojiPicker, setShowEmojiPicker] = useState11(false);
   const handleIconClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -4386,11 +4479,11 @@ var CalloutView = (props) => {
 };
 
 // src/extensions/views/node-views/code-block.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import { NodeViewContent as NodeViewContent2, NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var CodeBlockView = (props) => {
-  const [selectedLanguage, setSelectedLanguage] = useState11(props.node.attrs.language ?? "");
+  const [selectedLanguage, setSelectedLanguage] = useState12(props.node.attrs.language ?? "");
   const translations2 = useTiptapTranslations();
   const handleLanguageChange = (language) => {
     props.updateAttributes({ language });
@@ -4462,7 +4555,7 @@ var CustomQuoteSignView = (props) => {
 import { NodeViewWrapper as NodeViewWrapper4 } from "@tiptap/react";
 import { jsx as jsx89 } from "react/jsx-runtime";
 var FigureView = ({ node, getPos, editor }) => {
-  const { fileId, src, alt, title, caption, width, height } = node.attrs;
+  const { fileId, src, alt, title, caption, width, height, storageKey } = node.attrs;
   const imageExtension = editor.extensionManager.extensions.find((ext) => ext.name === "image");
   const getImageById = imageExtension?.options.getImageById;
   const onFigureClick = imageExtension?.options.onFigureClick;
@@ -5152,7 +5245,6 @@ var createHandleImageAdd = (editor, closeDialogCommand, savedPos) => {
 };
 var createHandleImageEdit = (editor, closeDialogCommand, pos) => {
   return (attrs) => {
-    console.log("\u{1F440} ~ createHandleImageEdit ~ attrs:", attrs);
     if (!editor || pos === void 0) return;
     editor.chain().focus().setNodeSelection(pos).updateFigure(attrs).run();
     closeDialogCommand();
@@ -5178,30 +5270,30 @@ var createHandleVideoAdd = (editor, closeDialogCommand, savedPos) => {
     closeDialogCommand();
   };
 };
-var createHandleLinkAdd = (editor, closeDialogCommand, savedPos) => {
-  return (title, url) => {
-    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 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(TextSelection5.create(tr.doc, insertPos, insertPos + title.length));
-        return true;
-      }).run();
-    }
-    closeDialogCommand();
-  };
+var createHandleLinkAdd = (editor, closeDialogCommand, linkParams, savedPos) => {
+  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 titleLength2 = 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(TextSelection5.create(tr.doc, insertPos, insertPos + titleLength2));
+      return true;
+    }).run();
+  }
+  closeDialogCommand();
 };
 var createHandleKatexAdd = (editor, closeDialogCommand, savedPos) => {
   return (latex, pos) => {
@@ -5668,7 +5760,11 @@ var ru_default = {
     invalidUrl: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 URL",
     emptyUrl: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 URL \u0441\u0441\u044B\u043B\u043A\u0438",
     addLinkTitle: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443",
-    removeLinkTitle: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443"
+    removeLinkTitle: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443",
+    openInNewTab: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
+    openInNewTabHelp: "\u0421\u0441\u044B\u043B\u043A\u0430 \u043E\u0442\u043A\u0440\u043E\u0435\u0442\u0441\u044F \u0432 \u043D\u043E\u0432\u043E\u043C \u043E\u043A\u043D\u0435 \u0438\u043B\u0438 \u0432\u043A\u043B\u0430\u0434\u043A\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430",
+    addNofollow: '\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C rel="nofollow"',
+    addNofollowHelp: "\u0423\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0438\u0441\u043A\u043E\u0432\u044B\u043C \u0441\u0438\u0441\u0442\u0435\u043C\u0430\u043C \u043D\u0435 \u0443\u0447\u0438\u0442\u044B\u0432\u0430\u0442\u044C \u0441\u0441\u044B\u043B\u043A\u0443 \u043F\u0440\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 \u0440\u0435\u0439\u0442\u0438\u043D\u0433\u0430 \u0438 \u0438\u043D\u0434\u0435\u043A\u0441\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B, \u043D\u0430 \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043E\u043D\u0438 \u0440\u0430\u0437\u043C\u0435\u0449\u0435\u043D\u044B. \u0420\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u0442\u0441\u044F \u043F\u0440\u0438\u043C\u0435\u043D\u044F\u0442\u044C \u043A\u043E \u0432\u0441\u0435\u043C \u0441\u0441\u044B\u043B\u043A\u0430\u043C \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0435 \u0441\u0430\u0439\u0442\u044B."
   },
   lists: {
     bulletList: "\u041D\u0435\u043D\u0443\u043C\u0435\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0441\u043F\u0438\u0441\u043E\u043A",
@@ -5828,7 +5924,11 @@ var en_default = {
     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",
@@ -5973,12 +6073,12 @@ function TiptapContent({
   lang,
   error
 }) {
-  const [linkDialogContext, setLinkDialogContext] = useState12(null);
-  const [katexDialogContext, setKatexDialogContext] = useState12(
+  const [linkDialogContext, setLinkDialogContext] = useState13(null);
+  const [katexDialogContext, setKatexDialogContext] = useState13(
     null
   );
-  const [editFigureContext, setEditFigureContext] = useState12(null);
-  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState12(void 0);
+  const [editFigureContext, setEditFigureContext] = useState13(null);
+  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState13(void 0);
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations2 = useTiptapTranslations();
   let safeContent;
@@ -6024,11 +6124,12 @@ function TiptapContent({
           return false;
         }
       },
+      onCreate: ({ editor: editor2 }) => handleChange?.(editor2.getJSON()),
       onBlur: ({ editor: editor2 }) => handleChange?.(editor2.getJSON())
     },
     [lang]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (activeDialog && editor && !editor.isDestroyed) {
       const pos = editor.state.selection.from;
       setSavedDialogCursorPos(pos);
@@ -6048,14 +6149,14 @@ function TiptapContent({
   const handleVideoAdd = (url) => {
     createHandleVideoAdd(editor, handleCloseDialog, savedDialogCursorPos)(url);
   };
-  const handleLinkAdd = (title, url) => {
-    createHandleLinkAdd(editor, handleCloseDialog, savedDialogCursorPos)(title, url);
+  const handleLinkAdd = (params) => {
+    createHandleLinkAdd(editor, handleCloseDialog, params, savedDialogCursorPos);
   };
   const handleKatexAdd = (latex) => {
     const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (!editor || editor.isDestroyed) return;
     editor.commands.setContent(safeContent, {
       emitUpdate: false
@@ -6087,7 +6188,7 @@ function TiptapContent({
           BubbleMenuContent,
           {
             editor,
-            onLinkClick: (selectedText, url) => setLinkDialogContext({ selectedText, url })
+            onLinkClick: (params) => setLinkDialogContext(params)
           }
         )
       }
@@ -6123,8 +6224,7 @@ function TiptapContent({
           open: true,
           onClose: handleCloseDialog,
           onLinkAdd: handleLinkAdd,
-          initialTitle: linkDialogContext?.selectedText || "",
-          initialUrl: linkDialogContext?.url || ""
+          linkDialogContext
         }
       ),
       activeDialog === "video" && /* @__PURE__ */ jsx93(