reactjs-tiptap-editor 0.3.19 → 0.3.21

package/lib/Mention.d.cts

@@ -39,9 +39,11 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
         };
     }
 }
@@ -49,11 +51,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        emoji: {
-            setEmoji: (emoji: {
-                name: string;
-                emoji: string;
-            }) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -104,21 +104,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        iframe: {
-            /**
-             * Add an iframe
-             */
-            setIframe: (options: {
-                src: string;
-                service: string;
-            }) => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageUpload: {
@@ -139,6 +124,21 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+                service: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -177,8 +177,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
         };
     }
 }
@@ -186,9 +187,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }

package/lib/Mention.d.ts

@@ -39,9 +39,11 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
         };
     }
 }
@@ -49,11 +51,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        emoji: {
-            setEmoji: (emoji: {
-                name: string;
-                emoji: string;
-            }) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -104,21 +104,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        iframe: {
-            /**
-             * Add an iframe
-             */
-            setIframe: (options: {
-                src: string;
-                service: string;
-            }) => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageUpload: {
@@ -139,6 +124,21 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+                service: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -177,8 +177,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
         };
     }
 }
@@ -186,9 +187,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }

package/lib/Mention.js

@@ -1,51 +1,71 @@
-import { a as b, N as y, m as c } from "./index-BWx1Mchx.js";
-import { S as T } from "./index-oQutU45z.js";
-import { c as p, g as h, a as L } from "./dom-dataset-CHDbKz5J.js";
-import M from "tippy.js";
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as w, useRef as v, useState as H, useEffect as f, useImperativeHandle as U } from "react";
-import A from "scroll-into-view-if-needed";
-const _ = new b("mention"), x = y.create({
+import { N as v, q as L, m as c, a as M } from "./index-DI9T3iLd.js";
+import { S as w } from "./index-CbQQFj2T.js";
+import { c as h, g as f, a as H } from "./dom-dataset-Di3tIRrR.js";
+import S from "tippy.js";
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as A, useRef as U, useState as _, useEffect as b, useImperativeHandle as x } from "react";
+import C from "scroll-into-view-if-needed";
+function N({ editor: e, overrideSuggestionOptions: n, extensionName: t, char: r = "@" }) {
+  const i = new M();
+  return {
+    editor: e,
+    char: r,
+    pluginKey: i,
+    command: ({ editor: o, range: l, props: u }) => {
+      var a, s, d;
+      const p = o.view.state.selection.$to.nodeAfter;
+      ((a = p == null ? void 0 : p.text) === null || a === void 0 ? void 0 : a.startsWith(" ")) && (l.to += 1), o.chain().focus().insertContentAt(l, [
+        {
+          type: t,
+          attrs: { ...u, mentionSuggestionChar: r }
+        },
+        {
+          type: "text",
+          text: " "
+        }
+      ]).run(), (d = (s = o.view.dom.ownerDocument.defaultView) === null || s === void 0 ? void 0 : s.getSelection()) === null || d === void 0 || d.collapseToEnd();
+    },
+    allow: ({ state: o, range: l }) => {
+      const u = o.doc.resolve(l.from), a = o.schema.nodes[t];
+      return !!u.parent.type.contentMatch.matchType(a);
+    },
+    ...n
+  };
+}
+function T(e) {
+  return (e.options.suggestions.length ? e.options.suggestions : [e.options.suggestion]).map((n) => N({
+    // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
+    editor: e.editor,
+    overrideSuggestionOptions: n,
+    extensionName: e.name,
+    char: n.char
+  }));
+}
+function y(e, n) {
+  const t = T(e), r = t.find((i) => i.char === n);
+  return r || (t.length ? t[0] : null);
+}
+const R = v.create({
   name: "mention",
   priority: 101,
   addOptions() {
     return {
       HTMLAttributes: {},
-      renderText({ options: e, node: n }) {
-        var t;
-        return `${e.suggestion.char}${(t = n.attrs.label) !== null && t !== void 0 ? t : n.attrs.id}`;
+      renderText({ node: e, suggestion: n }) {
+        var t, r;
+        return `${(t = n == null ? void 0 : n.char) !== null && t !== void 0 ? t : "@"}${(r = e.attrs.label) !== null && r !== void 0 ? r : e.attrs.id}`;
       },
       deleteTriggerWithBackspace: !1,
-      renderHTML({ options: e, node: n }) {
-        var t;
+      renderHTML({ options: e, node: n, suggestion: t }) {
+        var r, i;
         return [
           "span",
           c(this.HTMLAttributes, e.HTMLAttributes),
-          `${e.suggestion.char}${(t = n.attrs.label) !== null && t !== void 0 ? t : n.attrs.id}`
+          `${(r = t == null ? void 0 : t.char) !== null && r !== void 0 ? r : "@"}${(i = n.attrs.label) !== null && i !== void 0 ? i : n.attrs.id}`
         ];
       },
-      suggestion: {
-        char: "@",
-        pluginKey: _,
-        command: ({ editor: e, range: n, props: t }) => {
-          var r, s, o;
-          const a = e.view.state.selection.$to.nodeAfter;
-          ((r = a == null ? void 0 : a.text) === null || r === void 0 ? void 0 : r.startsWith(" ")) && (n.to += 1), e.chain().focus().insertContentAt(n, [
-            {
-              type: this.name,
-              attrs: t
-            },
-            {
-              type: "text",
-              text: " "
-            }
-          ]).run(), (o = (s = e.view.dom.ownerDocument.defaultView) === null || s === void 0 ? void 0 : s.getSelection()) === null || o === void 0 || o.collapseToEnd();
-        },
-        allow: ({ state: e, range: n }) => {
-          const t = e.doc.resolve(n.from), r = e.schema.nodes[this.name];
-          return !!t.parent.type.contentMatch.matchType(r);
-        }
-      }
+      suggestions: [],
+      suggestion: {}
     };
   },
   group: "inline",
@@ -67,6 +87,14 @@ const _ = new b("mention"), x = y.create({
         renderHTML: (e) => e.label ? {
           "data-label": e.label
         } : {}
+      },
+      // When there are multiple types of mentions, this attribute helps distinguish them
+      mentionSuggestionChar: {
+        default: "@",
+        parseHTML: (e) => e.getAttribute("data-mention-suggestion-char"),
+        renderHTML: (e) => ({
+          "data-mention-suggestion-char": e.mentionSuggestionChar
+        })
       }
     };
   },
@@ -78,88 +106,92 @@ const _ = new b("mention"), x = y.create({
     ];
   },
   renderHTML({ node: e, HTMLAttributes: n }) {
+    const t = y(this, e.attrs.mentionSuggestionChar);
     if (this.options.renderLabel !== void 0)
       return console.warn("renderLabel is deprecated use renderText and renderHTML instead"), [
         "span",
         c({ "data-type": this.name }, this.options.HTMLAttributes, n),
         this.options.renderLabel({
           options: this.options,
-          node: e
+          node: e,
+          suggestion: t
         })
       ];
-    const t = { ...this.options };
-    t.HTMLAttributes = c({ "data-type": this.name }, this.options.HTMLAttributes, n);
-    const r = this.options.renderHTML({
-      options: t,
-      node: e
+    const r = { ...this.options };
+    r.HTMLAttributes = c({ "data-type": this.name }, this.options.HTMLAttributes, n);
+    const i = this.options.renderHTML({
+      options: r,
+      node: e,
+      suggestion: t
     });
-    return typeof r == "string" ? [
+    return typeof i == "string" ? [
       "span",
       c({ "data-type": this.name }, this.options.HTMLAttributes, n),
-      r
-    ] : r;
+      i
+    ] : i;
   },
   renderText({ node: e }) {
-    return this.options.renderLabel !== void 0 ? (console.warn("renderLabel is deprecated use renderText and renderHTML instead"), this.options.renderLabel({
+    const n = {
       options: this.options,
-      node: e
-    })) : this.options.renderText({
-      options: this.options,
-      node: e
-    });
+      node: e,
+      suggestion: y(this, e.attrs.mentionSuggestionChar)
+    };
+    return this.options.renderLabel !== void 0 ? (console.warn("renderLabel is deprecated use renderText and renderHTML instead"), this.options.renderLabel(n)) : this.options.renderText(n);
   },
   addKeyboardShortcuts() {
     return {
       Backspace: () => this.editor.commands.command(({ tr: e, state: n }) => {
         let t = !1;
-        const { selection: r } = n, { empty: s, anchor: o } = r;
-        return s ? (n.doc.nodesBetween(o - 1, o, (a, l) => {
+        const { selection: r } = n, { empty: i, anchor: o } = r;
+        if (!i)
+          return !1;
+        n.doc.nodesBetween(o - 1, o, (a, s) => {
+          if (a.type.name === this.name)
+            return t = !0, e.insertText(this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "", s, s + a.nodeSize), !1;
+        });
+        let l = new L(), u = 0;
+        return n.doc.nodesBetween(o - 1, o, (a, s) => {
           if (a.type.name === this.name)
-            return t = !0, e.insertText(this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "", l, l + a.nodeSize), !1;
-        }), t) : !1;
+            return t = !0, l = a, u = s, !1;
+        }), t && e.insertText(this.options.deleteTriggerWithBackspace ? "" : l.attrs.mentionSuggestionChar, u, u + l.nodeSize), t;
       })
     };
   },
   addProseMirrorPlugins() {
-    return [
-      T({
-        editor: this.editor,
-        ...this.options.suggestion
-      })
-    ];
+    return T(this).map(w);
   }
-}), S = "_listUsers_en3pm_1", R = "_itemUser_en3pm_10", N = "_selectedUser_en3pm_31", m = {
-  listUsers: S,
-  itemUser: R,
-  selectedUser: N
-}, $ = w((e, n) => {
-  const t = v(null), [r, s] = H(0), o = (i) => {
-    const d = e.items[i];
+}), $ = "_listUsers_en3pm_1", k = "_itemUser_en3pm_10", D = "_selectedUser_en3pm_31", g = {
+  listUsers: $,
+  itemUser: k,
+  selectedUser: D
+}, E = A((e, n) => {
+  const t = U(null), [r, i] = _(0), o = (s) => {
+    const d = e.items[s];
     d && e.command({ id: d, label: d });
-  }, a = () => {
-    s((r + e.items.length - 1) % e.items.length);
   }, l = () => {
-    s((r + 1) % e.items.length);
-  }, g = () => {
+    i((r + e.items.length - 1) % e.items.length);
+  }, u = () => {
+    i((r + 1) % e.items.length);
+  }, a = () => {
     o(r);
   };
-  return f(() => s(0), [e.items]), f(() => {
+  return b(() => i(0), [e.items]), b(() => {
     if (Number.isNaN(r + 1))
       return;
-    const i = t.current.querySelector(`span:nth-of-type(${r + 1})`);
-    i && A(i, { behavior: "smooth", scrollMode: "if-needed" });
-  }, [r]), U(n, () => ({
-    onKeyDown: ({ event: i }) => i.key === "ArrowUp" ? (a(), !0) : i.key === "ArrowDown" ? (l(), !0) : i.key === "Enter" ? (g(), !0) : !1
-  })), /* @__PURE__ */ u("div", { className: p("listUsers", m.listUsers), children: /* @__PURE__ */ u("div", { ref: t, children: e.items.length > 0 ? e.items.map((i, d) => /* @__PURE__ */ u(
+    const s = t.current.querySelector(`span:nth-of-type(${r + 1})`);
+    s && C(s, { behavior: "smooth", scrollMode: "if-needed" });
+  }, [r]), x(n, () => ({
+    onKeyDown: ({ event: s }) => s.key === "ArrowUp" ? (l(), !0) : s.key === "ArrowDown" ? (u(), !0) : s.key === "Enter" ? (a(), !0) : !1
+  })), /* @__PURE__ */ m("div", { className: h("listUsers", g.listUsers), children: /* @__PURE__ */ m("div", { ref: t, children: e.items.length > 0 ? e.items.map((s, d) => /* @__PURE__ */ m(
     "span",
     {
-      className: p("itemUser", m.itemUser, d === r ? m.selectedUser : ""),
+      className: h("itemUser", g.itemUser, d === r ? g.selectedUser : ""),
       onClick: () => o(d),
-      children: i
+      children: s
     },
     d
-  )) : /* @__PURE__ */ u("div", { className: p("itemUserEmpty", m.itemUser), children: "Empty" }) }) });
-}), k = [
+  )) : /* @__PURE__ */ m("div", { className: h("itemUserEmpty", g.itemUser), children: "Empty" }) }) });
+}), B = [
   {
     id: "1",
     name: "John Doe"
@@ -176,16 +208,16 @@ const _ = new b("mention"), x = y.create({
     id: "4",
     name: "Bob"
   }
-], C = {
-  items: async ({ query: e }) => k.map((t) => t.name).filter((t) => t.toLowerCase().startsWith(e.toLowerCase())),
+], K = {
+  items: async ({ query: e }) => B.map((t) => t.name).filter((t) => t.toLowerCase().startsWith(e.toLowerCase())),
   render: () => {
     let e, n;
     return {
       onStart: (t) => {
-        e = new L($, {
+        e = new H(E, {
           props: t,
           editor: t.editor
-        }), n = M("body", {
+        }), n = S("body", {
           getReferenceClientRect: t.clientRect,
           appendTo: () => document.body,
           content: e.element,
@@ -209,16 +241,16 @@ const _ = new b("mention"), x = y.create({
       }
     };
   }
-}, W = /* @__PURE__ */ x.extend({
+}, j = /* @__PURE__ */ R.extend({
   addAttributes() {
     return {
       id: {
         default: "",
-        parseHTML: h("id")
+        parseHTML: f("id")
       },
       label: {
         default: "",
-        parseHTML: h("label")
+        parseHTML: f("label")
       }
     };
   }
@@ -226,8 +258,8 @@ const _ = new b("mention"), x = y.create({
   HTMLAttributes: {
     class: "mention"
   },
-  suggestion: C
+  suggestion: K
 });
 export {
-  W as Mention
+  j as Mention
 };

package/lib/Mermaid.cjs

@@ -1,2 +1,2 @@
-"use strict";var W=Object.create;var G=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var J=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of U(e))!Y.call(t,l)&&l!==r&&G(t,l,{get:()=>e[l],enumerable:!(a=X(e,l))||a.enumerable});return t};var K=(t,e,r)=>(r=t!=null?W(Z(t)):{},J(e||!t||!t.__esModule?G(r,"default",{value:t,enumerable:!0}):r,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./index-CSvnpArE.cjs"),u=require("./RichTextEditor-DszaQdvS.cjs"),F=require("./dom-dataset-Cuy-pIfj.cjs"),o=require("react/jsx-runtime"),s=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-DgXP0XRK.cjs"),S=require("./index-C19MB4Al.cjs"),$=`graph TB
+"use strict";var W=Object.create;var G=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var J=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of U(e))!Y.call(t,l)&&l!==r&&G(t,l,{get:()=>e[l],enumerable:!(a=X(e,l))||a.enumerable});return t};var K=(t,e,r)=>(r=t!=null?W(Z(t)):{},J(e||!t||!t.__esModule?G(r,"default",{value:t,enumerable:!0}):r,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./index-ByRfqzMr.cjs"),u=require("./RichTextEditor-CAxwVWUE.cjs"),F=require("./dom-dataset-Byuf1YmW.cjs"),o=require("react/jsx-runtime"),s=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-BsJTSgT-.cjs"),S=require("./index-C19MB4Al.cjs"),$=`graph TB
 a-->b`,ee=({editor:t,upload:e})=>{const[r,a]=s.useState($),[l,v]=s.useState(""),[T,y]=s.useState(!1),A=s.useRef(null),[d,h]=s.useState(null),E=s.useCallback(c=>{c&&import("mermaid").then(x=>{h(x.default)})},[]),_=async c=>{try{const{svg:x}=await d.render("mermaid-svg",c);v(x)}catch{v("")}},L=()=>{d.initialize({darkMode:!1,startOnLoad:!1,fontSize:12,theme:"base"}),_(r)};s.useEffect(()=>{d&&T&&L()},[d,T]),s.useEffect(()=>{d&&T&&_(r)},[d&&r]);const R=async()=>{if(r!==""){if(r){const c=A.current.querySelector("svg"),{width:x,height:j}=c.getBoundingClientRect(),I=`mermaid-${P.shortId()}.svg`;let M=P.i(c.outerHTML);if(e){console.log({src:M});const H=u.dataURLtoFile(M,I);M=await e(H)}t==null||t.chain().focus().setMermaid({type:"mermaid",src:M,alt:encodeURIComponent(r),width:x,height:j},!!r).run()}y(!1)}};return o.jsxs(u.Dialog,{onOpenChange:y,open:T,children:[o.jsx(u.DialogTrigger,{asChild:!0,children:o.jsx(u.ActionButton,{action:()=>y(!0),icon:"Mermaid",tooltip:"Mermaid"})}),o.jsxs(u.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[o.jsx(u.DialogTitle,{children:"Mermaid"}),o.jsx("div",{ref:E,style:{height:"100%",border:"1px solid hsl(var(--border))"},children:o.jsxs("div",{className:"richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]",children:[o.jsx(Q.Textarea,{autoFocus:!0,className:"richtext-flex-1",defaultValue:$,onChange:c=>a(c.target.value),placeholder:"Text",required:!0,rows:10,value:r,style:{color:"hsl(var(--richtext-foreground))"}}),o.jsx("div",{className:"richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]",dangerouslySetInnerHTML:{__html:l},ref:A,style:{height:"100%",borderWidth:1,minHeight:500,background:"#fff"}})]})}),o.jsx(u.DialogFooter,{children:o.jsx(u.Button,{onClick:R,type:"button",children:"Save changes"})})]})]})},O={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function te({editor:t,node:e,updateAttributes:r,getPos:a,selected:l}){const[v,T]=s.useState({width:S.IMAGE_MAX_SIZE,height:S.IMAGE_MAX_SIZE}),[y,A]=s.useState({width:0,height:0}),[d]=s.useState([O.TOP_LEFT,O.TOP_RIGHT,O.BOTTOM_LEFT,O.BOTTOM_RIGHT]),[h,E]=s.useState(!1),[_,L]=s.useState({x:0,y:0,w:0,h:0,dir:""}),{align:R}=e==null?void 0:e.attrs,c=s.useMemo(()=>{const{src:i,alt:m,width:f,height:b}=e==null?void 0:e.attrs,w=q.isNumber(f)?`${f}px`:f,n=q.isNumber(b)?`${b}px`:b;return{src:i||void 0,alt:m||void 0,style:{width:w||void 0,height:n||void 0}}},[e==null?void 0:e.attrs]),x=s.useMemo(()=>{const{style:{width:i}}=c;return{width:i==="100%"?i:void 0}},[c]);function j(i){A({width:i.target.width,height:i.target.height})}function I(){t.commands.setNodeSelection(a())}const M=s.useCallback(u.throttle(()=>{const{width:i}=getComputedStyle(t.view.dom);T(m=>({...m,width:Number.parseInt(i,10)}))},S.IMAGE_THROTTLE_WAIT_TIME),[t]);function H(i,m){i.preventDefault(),i.stopPropagation();const f=y.width,b=y.height,w=f/b;let n=Number(e.attrs.width),p=Number(e.attrs.height);const g=v.width;n&&!p?(n=n>g?g:n,p=Math.round(n/w)):p&&!n?(n=Math.round(p*w),n=n>g?g:n):!n&&!p?(n=f>g?g:f,p=Math.round(n/w)):n=n>g?g:n,E(!0),L({x:i.clientX,y:i.clientY,w:n,h:p,dir:m})}const N=s.useCallback(u.throttle(i=>{if(i.preventDefault(),i.stopPropagation(),!h)return;const{x:m,w:f,dir:b}=_,w=(i.clientX-m)*(/l/.test(b)?-1:1),{width:n,height:p}=e==null?void 0:e.attrs,g=n/p,B=u.clamp(f+w,S.IMAGE_MIN_SIZE,v.width),V=Math.round(B/g);r({width:B,height:V})},S.IMAGE_THROTTLE_WAIT_TIME),[h,_,v,r,e==null?void 0:e.attrs]),C=s.useCallback(i=>{i.preventDefault(),i.stopPropagation(),h&&(L({x:0,y:0,w:0,h:0,dir:""}),E(!1),I())},[h,I]),D=s.useCallback(()=>{document==null||document.addEventListener("mousemove",N,!0),document==null||document.addEventListener("mouseup",C,!0)},[N,C]),z=s.useCallback(()=>{document==null||document.removeEventListener("mousemove",N,!0),document==null||document.removeEventListener("mouseup",C,!0)},[N,C]);s.useEffect(()=>(h?D():z(),()=>{z()}),[h,D,z]);const k=s.useMemo(()=>new ResizeObserver(()=>M()),[M]);return s.useEffect(()=>(k.observe(t.view.dom),()=>{k.disconnect()}),[t.view.dom,k]),o.jsx(F.NodeViewWrapper,{className:"image-view",style:{...x,width:"100%",textAlign:R},children:o.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:{...x,background:"#fff"},className:`image-view__body ${l?"image-view__body--focused":""} ${h?"image-view__body--resizing":""}`,children:[o.jsx("img",{alt:c.alt,className:"image-view__body__image block",height:"auto",onClick:I,onLoad:j,src:c.src,style:c.style}),t.view.editable&&(l||h)&&o.jsx("div",{className:"image-resizer",children:d==null?void 0:d.map(i=>o.jsx("span",{className:`image-resizer__handler image-resizer__handler--${i}`,onMouseDown:m=>H(m,i)},`image-dir-${i}`))})]})})}const re=u.Image.extend({name:"mermaid",addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),inline:!1,content:"",marks:"",group:"block",draggable:!1,selectable:!0,atom:!0,HTMLAttributes:{class:"mermaid"},button:({editor:e,t:r,extension:a})=>{var l;return{component:ee,componentProps:{action:()=>!0,isActive:()=>!1,disabled:!1,editor:e,icon:"Mermaid",tooltip:r("editor.mermaid.tooltip"),upload:(l=a==null?void 0:a.options)==null?void 0:l.upload}}}}},addAttributes(){var t;return{...(t=this.parent)==null?void 0:t.call(this),width:{default:null,parseHTML:e=>{const r=e.querySelector("img"),a=r==null?void 0:r.getAttribute("width");return a?Number.parseInt(a,10):320},renderHTML:e=>({width:e.width})},height:{default:null,parseHTML:e=>{const r=e.querySelector("img"),a=r==null?void 0:r.getAttribute("height");return a?Number.parseInt(a,10):212},renderHTML:e=>({height:e.height})},align:{default:"center",parseHTML:e=>e.getAttribute("align"),renderHTML:e=>({align:e.align})}}},addNodeView(){return F.ReactNodeViewRenderer(te)},addCommands(){return{setMermaid:(t,e)=>({commands:r,editor:a})=>e?r.insertContent({type:this.name,attrs:t}):r.insertContentAt(a.state.selection.anchor,{type:this.name,attrs:t}),setAlignImageMermaid:t=>({commands:e})=>e.updateAttributes(this.name,{align:t})}},renderHTML({HTMLAttributes:t}){const{align:e}=t;return["div",{style:e?`text-align: ${e};`:"",class:"imageMermaid"},["img",q.mergeAttributes(this.options.HTMLAttributes,t)]]},parseHTML(){return[{tag:"div[class=imageMermaid]",getAttrs:t=>{const e=t.querySelector("img"),r=e==null?void 0:e.getAttribute("width"),a=e==null?void 0:e.getAttribute("height");return{src:e==null?void 0:e.getAttribute("src"),alt:e==null?void 0:e.getAttribute("alt"),width:r?Number.parseInt(r,10):null,height:a?Number.parseInt(a,10):null,align:(e==null?void 0:e.getAttribute("align"))||t.style.textAlign||null}}}]}});exports.Mermaid=re;

package/lib/Mermaid.d.cts

@@ -111,9 +111,11 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
         };
     }
 }
@@ -121,11 +123,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        emoji: {
-            setEmoji: (emoji: {
-                name: string;
-                emoji: string;
-            }) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -176,21 +176,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        iframe: {
-            /**
-             * Add an iframe
-             */
-            setIframe: (options: {
-                src: string;
-                service: string;
-            }) => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageUpload: {
@@ -211,6 +196,21 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+                service: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -249,8 +249,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
         };
     }
 }
@@ -258,9 +259,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }