reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/Mention.js

@@ -1,73 +1,77 @@
-import { c as f, g as p, a as L, b as M } from "./dom-dataset-lYeH6gfI.js";
-import { N as v, s as w, u as H, m as c, a as S } from "./index-kbO3iWqL.js";
-import { S as C } from "./index-J3jHHZ4d.js";
+import { N as w, y as v, m as c } from "./index-DnWWK9F_.js";
+import { Node as T } from "@tiptap/pm/model";
+import { S as L, u as g } from "./updatePosition-BPmcE0YD.js";
+import { PluginKey as M } from "@tiptap/pm/state";
+import { a as S } from "./index-DzcKxutn.js";
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as A, useRef as x, useState as U, useEffect as b, useImperativeHandle as _ } from "react";
-import N from "scroll-into-view-if-needed";
-function $({
+import { forwardRef as H, useRef as A, useState as C, useEffect as f, useImperativeHandle as N } from "react";
+import { c as p } from "./clsx-OuTLNxxd.js";
+import $ from "scroll-into-view-if-needed";
+import { g as x } from "./dom-dataset-CIEeltF6.js";
+function k({
   editor: e,
-  overrideSuggestionOptions: r,
-  extensionName: n,
-  char: t = "@"
+  overrideSuggestionOptions: t,
+  extensionName: r,
+  char: n = "@"
 }) {
-  const s = new S();
+  const i = new M();
   return {
     editor: e,
-    char: t,
-    pluginKey: s,
-    command: ({ editor: i, range: a, props: d }) => {
-      var u, o, l;
-      const h = i.view.state.selection.$to.nodeAfter;
-      ((u = h == null ? void 0 : h.text) == null ? void 0 : u.startsWith(" ")) && (a.to += 1), i.chain().focus().insertContentAt(a, [
+    char: n,
+    pluginKey: i,
+    command: ({ editor: s, range: a, props: l }) => {
+      var u, o, d;
+      const h = s.view.state.selection.$to.nodeAfter;
+      ((u = h == null ? void 0 : h.text) == null ? void 0 : u.startsWith(" ")) && (a.to += 1), s.chain().focus().insertContentAt(a, [
         {
-          type: n,
-          attrs: { ...d, mentionSuggestionChar: t }
+          type: r,
+          attrs: { ...l, mentionSuggestionChar: n }
         },
         {
           type: "text",
           text: " "
         }
-      ]).run(), (l = (o = i.view.dom.ownerDocument.defaultView) == null ? void 0 : o.getSelection()) == null || l.collapseToEnd();
+      ]).run(), (d = (o = s.view.dom.ownerDocument.defaultView) == null ? void 0 : o.getSelection()) == null || d.collapseToEnd();
     },
-    allow: ({ state: i, range: a }) => {
-      const d = i.doc.resolve(a.from), u = i.schema.nodes[n];
-      return !!d.parent.type.contentMatch.matchType(u);
+    allow: ({ state: s, range: a }) => {
+      const l = s.doc.resolve(a.from), u = s.schema.nodes[r];
+      return !!l.parent.type.contentMatch.matchType(u);
     },
-    ...r
+    ...t
   };
 }
-function T(e) {
+function y(e) {
   return (e.options.suggestions.length ? e.options.suggestions : [e.options.suggestion]).map(
-    (r) => $({
+    (t) => k({
       // @ts-ignore `editor` can be `undefined` when converting the document to HTML with the HTML utility
       editor: e.editor,
-      overrideSuggestionOptions: r,
+      overrideSuggestionOptions: t,
       extensionName: e.name,
-      char: r.char
+      char: t.char
     })
   );
 }
-function y(e, r) {
-  const n = T(e), t = n.find((s) => s.char === r);
-  return t || (n.length ? n[0] : null);
+function b(e, t) {
+  const r = y(e), n = r.find((i) => i.char === t);
+  return n || (r.length ? r[0] : null);
 }
-var k = v.create({
+var D = w.create({
   name: "mention",
   priority: 101,
   addOptions() {
     return {
       HTMLAttributes: {},
-      renderText({ node: e, suggestion: r }) {
-        var n, t;
-        return `${(n = r == null ? void 0 : r.char) != null ? n : "@"}${(t = e.attrs.label) != null ? t : e.attrs.id}`;
+      renderText({ node: e, suggestion: t }) {
+        var r, n;
+        return `${(r = t == null ? void 0 : t.char) != null ? r : "@"}${(n = e.attrs.label) != null ? n : e.attrs.id}`;
       },
       deleteTriggerWithBackspace: !1,
-      renderHTML({ options: e, node: r, suggestion: n }) {
-        var t, s;
+      renderHTML({ options: e, node: t, suggestion: r }) {
+        var n, i;
         return [
           "span",
           c(this.HTMLAttributes, e.HTMLAttributes),
-          `${(t = n == null ? void 0 : n.char) != null ? t : "@"}${(s = r.attrs.label) != null ? s : r.attrs.id}`
+          `${(n = r == null ? void 0 : r.char) != null ? n : "@"}${(i = t.attrs.label) != null ? i : t.attrs.id}`
         ];
       },
       suggestions: [],
@@ -111,100 +115,106 @@ var k = v.create({
       }
     ];
   },
-  renderHTML({ node: e, HTMLAttributes: r }) {
-    const n = y(this, e.attrs.mentionSuggestionChar);
+  renderHTML({ node: e, HTMLAttributes: t }) {
+    const r = b(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, r),
+        c({ "data-type": this.name }, this.options.HTMLAttributes, t),
         this.options.renderLabel({
           options: this.options,
           node: e,
-          suggestion: n
+          suggestion: r
         })
       ];
-    const t = { ...this.options };
-    t.HTMLAttributes = c(
+    const n = { ...this.options };
+    n.HTMLAttributes = c(
       { "data-type": this.name },
       this.options.HTMLAttributes,
-      r
+      t
     );
-    const s = this.options.renderHTML({
-      options: t,
+    const i = this.options.renderHTML({
+      options: n,
       node: e,
-      suggestion: n
+      suggestion: r
     });
-    return typeof s == "string" ? ["span", c({ "data-type": this.name }, this.options.HTMLAttributes, r), s] : s;
+    return typeof i == "string" ? ["span", c({ "data-type": this.name }, this.options.HTMLAttributes, t), i] : i;
   },
-  ...w({
+  ...v({
     nodeName: "mention",
     name: "@",
     selfClosing: !0,
-    allowedAttributes: ["id", "label"]
+    allowedAttributes: ["id", "label", { name: "mentionSuggestionChar", skipIfDefault: "@" }],
+    parseAttributes: (e) => {
+      const t = {}, r = /(\w+)=(?:"([^"]*)"|'([^']*)')/g;
+      let n = r.exec(e);
+      for (; n !== null; ) {
+        const [, i, s, a] = n, l = s ?? a;
+        t[i === "char" ? "mentionSuggestionChar" : i] = l, n = r.exec(e);
+      }
+      return t;
+    },
+    serializeAttributes: (e) => Object.entries(e).filter(([, t]) => t != null).map(([t, r]) => `${t === "mentionSuggestionChar" ? "char" : t}="${r}"`).join(" ")
   }),
   renderText({ node: e }) {
-    const r = {
+    const t = {
       options: this.options,
       node: e,
-      suggestion: y(this, e.attrs.mentionSuggestionChar)
+      suggestion: b(this, e.attrs.mentionSuggestionChar)
     };
-    return this.options.renderLabel !== void 0 ? (console.warn("renderLabel is deprecated use renderText and renderHTML instead"), this.options.renderLabel(r)) : this.options.renderText(r);
+    return this.options.renderLabel !== void 0 ? (console.warn("renderLabel is deprecated use renderText and renderHTML instead"), this.options.renderLabel(t)) : this.options.renderText(t);
   },
   addKeyboardShortcuts() {
     return {
-      Backspace: () => this.editor.commands.command(({ tr: e, state: r }) => {
-        let n = !1;
-        const { selection: t } = r, { empty: s, anchor: i } = t;
-        if (!s)
+      Backspace: () => this.editor.commands.command(({ tr: e, state: t }) => {
+        let r = !1;
+        const { selection: n } = t, { empty: i, anchor: s } = n;
+        if (!i)
           return !1;
-        let a = new H(), d = 0;
-        return r.doc.nodesBetween(i - 1, i, (u, o) => {
+        let a = new T(), l = 0;
+        return t.doc.nodesBetween(s - 1, s, (u, o) => {
           if (u.type.name === this.name)
-            return n = !0, a = u, d = o, !1;
-        }), n && e.insertText(
+            return r = !0, a = u, l = o, !1;
+        }), r && e.insertText(
           this.options.deleteTriggerWithBackspace ? "" : a.attrs.mentionSuggestionChar,
-          d,
-          d + a.nodeSize
-        ), n;
+          l,
+          l + a.nodeSize
+        ), r;
       })
     };
   },
   addProseMirrorPlugins() {
-    return T(this).map(C);
+    return y(this).map(L);
   }
-}), E = k;
-const D = "_listUsers_en3pm_1", R = "_itemUser_en3pm_10", K = "_selectedUser_en3pm_31", g = {
-  listUsers: D,
-  itemUser: R,
-  selectedUser: K
-}, B = A((e, r) => {
-  const n = x(null), [t, s] = U(0), i = (o) => {
-    const l = e.items[o];
-    l && (e.command({ id: l, label: l }), e != null && e.onClose && (e == null || e.onClose()));
+}), K = D;
+const _ = H((e, t) => {
+  const r = A(null), [n, i] = C(0), s = (o) => {
+    const d = e.items[o];
+    d && e.command({ id: d, label: d });
   }, a = () => {
-    s((t + e.items.length - 1) % e.items.length);
-  }, d = () => {
-    s((t + 1) % e.items.length);
+    i((n + e.items.length - 1) % e.items.length);
+  }, l = () => {
+    i((n + 1) % e.items.length);
   }, u = () => {
-    i(t);
+    s(n);
   };
-  return b(() => s(0), [e.items]), b(() => {
-    if (Number.isNaN(t + 1))
+  return f(() => i(0), [e.items]), f(() => {
+    if (Number.isNaN(n + 1))
       return;
-    const o = n.current.querySelector(`span:nth-of-type(${t + 1})`);
-    o && N(o, { behavior: "smooth", scrollMode: "if-needed" });
-  }, [t]), _(r, () => ({
-    onKeyDown: ({ event: o }) => o.key === "ArrowUp" ? (a(), !0) : o.key === "ArrowDown" ? (d(), !0) : o.key === "Enter" ? (u(), !0) : !1
-  })), /* @__PURE__ */ m("div", { className: f("listUsers", g.listUsers), children: /* @__PURE__ */ m("div", { ref: n, children: e.items.length > 0 ? e.items.map((o, l) => /* @__PURE__ */ m(
+    const o = r.current.querySelector(`span:nth-of-type(${n + 1})`);
+    o && $(o, { behavior: "smooth", scrollMode: "if-needed" });
+  }, [n]), N(t, () => ({
+    onKeyDown: ({ event: o }) => o.key === "ArrowUp" ? (a(), !0) : o.key === "ArrowDown" ? (l(), !0) : o.key === "Enter" ? (u(), !0) : !1
+  })), /* @__PURE__ */ m("div", { className: " !richtext-max-h-[320px] !richtext-w-[160px] richtext-overflow-y-auto richtext-overflow-x-hidden  richtext-rounded-md  !richtext-border !richtext-border-solid !richtext-border-[hsl(var(--richtext-border))] richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none", children: /* @__PURE__ */ m("div", { ref: r, children: e.items.length > 0 ? e.items.map((o, d) => /* @__PURE__ */ m(
     "span",
     {
-      className: f("itemUser", g.itemUser, l === t ? g.selectedUser : ""),
-      onClick: () => i(l),
+      className: p("richtext-flex richtext-w-full richtext-items-center richtext-gap-3 richtext-rounded-sm !richtext-border-none !richtext-bg-transparent richtext-px-2 richtext-py-1.5 richtext-text-left richtext-text-sm !richtext-text-neutral-800 !richtext-outline-none richtext-transition-colors hover:!richtext-bg-accent dark:!richtext-text-neutral-200", { "bg-item-active": d === n }),
+      onClick: () => s(d),
       children: o
     },
-    l
-  )) : /* @__PURE__ */ m("div", { className: f("itemUserEmpty", g.itemUser), children: "Empty" }) }) });
-}), I = [
+    d
+  )) : /* @__PURE__ */ m("div", { className: p("itemUserEmpty"), children: "Empty" }) }) });
+}), E = [
   {
     id: "1",
     name: "John Doe"
@@ -221,16 +231,16 @@ const D = "_listUsers_en3pm_1", R = "_itemUser_en3pm_10", K = "_selectedUser_en3
     id: "4",
     name: "Bob"
   }
-], z = /* @__PURE__ */ E.extend({
+], Q = /* @__PURE__ */ K.extend({
   addAttributes() {
     return {
       id: {
         default: "",
-        parseHTML: p("id")
+        parseHTML: x("id")
       },
       label: {
         default: "",
-        parseHTML: p("label")
+        parseHTML: x("label")
       }
     };
   }
@@ -239,56 +249,30 @@ const D = "_listUsers_en3pm_1", R = "_itemUser_en3pm_10", K = "_selectedUser_en3
     class: "mention"
   },
   suggestion: {
-    items: async ({ query: e }) => I.map((n) => n.name).filter((n) => n.toLowerCase().startsWith(e.toLowerCase())),
+    items: async ({ query: e }) => E.map((r) => r.name).filter((r) => r.toLowerCase().startsWith(e.toLowerCase())),
     render: () => {
       let e;
-      function r(t) {
-        if (!e || !e.element)
-          return;
-        M({
-          getBoundingClientRect() {
-            return t;
-          }
-        }, e.element, {
-          placement: "bottom-start"
-        }).then((i) => {
-          Object.assign(e.element.style, {
-            left: `${i.x}px`,
-            top: `${i.y}px`,
-            position: i.strategy === "fixed" ? "fixed" : "absolute"
-          });
-        });
-      }
-      const n = () => {
-        e && (document.body.contains(e.element) && document.body.removeChild(e.element), e.destroy());
-      };
       return {
         onStart: (t) => {
-          n(), e = new L(B, {
-            props: {
-              ...t,
-              onClose: n
-            },
+          t.clientRect && (e = new S(_, {
+            props: t,
             editor: t.editor
-          }), document.body.appendChild(e.element), r(t.clientRect());
+          }), e.element.style.position = "absolute", document.body.appendChild(e.element), g(t.editor, e.element));
         },
         onUpdate(t) {
-          e.updateProps(t), r(t.clientRect());
+          e.updateProps(t), t.clientRect && g(t.editor, e.element);
         },
         onKeyDown(t) {
-          var s;
-          return t.event.key === "Escape" ? (document.body.removeChild(e.element), e.destroy(), !0) : (s = e.ref) == null ? void 0 : s.onKeyDown(t);
+          var r;
+          return t.event.key === "Escape" ? (e.destroy(), e.element.remove(), !0) : (r = e.ref) == null ? void 0 : r.onKeyDown(t);
+        },
+        onExit() {
+          e.destroy(), e.element.remove();
         }
-        // onExit() {
-        //   if (document.body.contains(component.element)) {
-        //     document.body.removeChild(component.element);
-        //   }
-        //   component.destroy();
-        // },
       };
     }
   }
 });
 export {
-  z as Mention
+  Q 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,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of U(e))!Y.call(t,c)&&c!==i&&G(t,c,{get:()=>e[c],enumerable:!(r=X(e,c))||r.enumerable});return t};var K=(t,e,i)=>(i=t!=null?W(Z(t)):{},J(e||!t||!t.__esModule?G(i,"default",{value:t,enumerable:!0}):i,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./index-DF2Lp4HZ.cjs"),u=require("./RichTextEditor-CxvwGvQG.cjs"),F=require("./dom-dataset-_6-diIRQ.cjs"),o=require("react/jsx-runtime"),a=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-DFo_aXnj.cjs"),E=require("./index-6D1J-A-o.cjs"),$=`graph TB
-a-->b`,ee=({editor:t,upload:e,tooltipOptions:i})=>{const[r,c]=a.useState($),[y,L]=a.useState(""),[p,I]=a.useState(!1),v=a.useRef(null),[l,N]=a.useState(null),C=a.useCallback(d=>{d&&import("mermaid").then(M=>{N(M.default)})},[]),S=async d=>{try{const{svg:M}=await l.render("mermaid-svg",d);L(M)}catch{L("")}},H=()=>{l.initialize({darkMode:!1,startOnLoad:!1,fontSize:12,theme:"base"}),S(r)};a.useEffect(()=>{l&&p&&H()},[l,p]),a.useEffect(()=>{l&&p&&S(r)},[l&&r]);const x=async()=>{if(r!==""){if(r){const d=v.current.querySelector("svg"),{width:M,height:A}=d.getBoundingClientRect(),O=`mermaid-${P.shortId()}.svg`;let T=P.i(d.outerHTML);if(e){console.log({src:T});const _=u.dataURLtoFile(T,O);T=await e(_)}t==null||t.chain().focus().setMermaid({type:"mermaid",src:T,alt:encodeURIComponent(r),width:M,height:A},!!r).run()}I(!1)}};return o.jsxs(u.Dialog,{onOpenChange:I,open:p,children:[o.jsx(u.DialogTrigger,{asChild:!0,children:o.jsx(u.ActionButton,{action:()=>I(!0),icon:"Mermaid",tooltip:"Mermaid",tooltipOptions:i})}),o.jsxs(u.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[o.jsx(u.DialogTitle,{children:"Mermaid"}),o.jsx("div",{ref:C,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:d=>c(d.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:y},ref:v,style:{height:"100%",borderWidth:1,minHeight:500,background:"#fff"}})]})}),o.jsx(u.DialogFooter,{children:o.jsx(u.Button,{onClick:x,type:"button",children:"Save changes"})})]})]})},j={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function te({editor:t,node:e,updateAttributes:i,getPos:r,selected:c}){const[y,L]=a.useState({width:E.IMAGE_MAX_SIZE,height:E.IMAGE_MAX_SIZE}),[p,I]=a.useState({width:0,height:0}),[v]=a.useState([j.TOP_LEFT,j.TOP_RIGHT,j.BOTTOM_LEFT,j.BOTTOM_RIGHT]),[l,N]=a.useState(!1),[C,S]=a.useState({x:0,y:0,w:0,h:0,dir:""}),{align:H}=e==null?void 0:e.attrs,x=a.useMemo(()=>{const{src:s,alt:g,width:m,height:b}=e==null?void 0:e.attrs,w=q.isNumber(m)?`${m}px`:m,n=q.isNumber(b)?`${b}px`:b;return{src:s||void 0,alt:g||void 0,style:{width:w||void 0,height:n||void 0}}},[e==null?void 0:e.attrs]),d=a.useMemo(()=>{const{style:{width:s}}=x;return{width:s==="100%"?s:void 0}},[x]);function M(s){I({width:s.target.width,height:s.target.height})}function A(){t.commands.setNodeSelection(r())}const O=a.useCallback(u.throttle(()=>{const{width:s}=getComputedStyle(t.view.dom);L(g=>({...g,width:Number.parseInt(s,10)}))},E.IMAGE_THROTTLE_WAIT_TIME),[t]);function T(s,g){s.preventDefault(),s.stopPropagation();const m=p.width,b=p.height,w=m/b;let n=Number(e.attrs.width),f=Number(e.attrs.height);const h=y.width;n&&!f?(n=n>h?h:n,f=Math.round(n/w)):f&&!n?(n=Math.round(f*w),n=n>h?h:n):!n&&!f?(n=m>h?h:m,f=Math.round(n/w)):n=n>h?h:n,N(!0),S({x:s.clientX,y:s.clientY,w:n,h:f,dir:g})}const _=a.useCallback(u.throttle(s=>{if(s.preventDefault(),s.stopPropagation(),!l)return;const{x:g,w:m,dir:b}=C,w=(s.clientX-g)*(/l/.test(b)?-1:1),{width:n,height:f}=e==null?void 0:e.attrs,h=n/f,B=u.clamp(m+w,E.IMAGE_MIN_SIZE,y.width),V=Math.round(B/h);i({width:B,height:V})},E.IMAGE_THROTTLE_WAIT_TIME),[l,C,y,i,e==null?void 0:e.attrs]),R=a.useCallback(s=>{s.preventDefault(),s.stopPropagation(),l&&(S({x:0,y:0,w:0,h:0,dir:""}),N(!1),A())},[l,A]),D=a.useCallback(()=>{document==null||document.addEventListener("mousemove",_,!0),document==null||document.addEventListener("mouseup",R,!0)},[_,R]),z=a.useCallback(()=>{document==null||document.removeEventListener("mousemove",_,!0),document==null||document.removeEventListener("mouseup",R,!0)},[_,R]);a.useEffect(()=>(l?D():z(),()=>{z()}),[l,D,z]);const k=a.useMemo(()=>new ResizeObserver(()=>O()),[O]);return a.useEffect(()=>(k.observe(t.view.dom),()=>{k.disconnect()}),[t.view.dom,k]),o.jsx(F.NodeViewWrapper,{className:"image-view",style:{...d,width:"100%",textAlign:H},children:o.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:{...d,background:"#fff"},className:`image-view__body ${c?"image-view__body--focused":""} ${l?"image-view__body--resizing":""}`,children:[o.jsx("img",{alt:x.alt,className:"image-view__body__image block",height:"auto",onClick:A,onLoad:M,src:x.src,style:x.style}),t.view.editable&&(c||l)&&o.jsx("div",{className:"image-resizer",children:v==null?void 0:v.map(s=>o.jsx("span",{className:`image-resizer__handler image-resizer__handler--${s}`,onMouseDown:g=>T(g,s)},`image-dir-${s}`))})]})})}const re=u.index_default.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:i,extension:r})=>{var c;return{component:ee,componentProps:{action:()=>!0,isActive:()=>!1,disabled:!1,editor:e,icon:"Mermaid",tooltip:i("editor.mermaid.tooltip"),upload:(c=r==null?void 0:r.options)==null?void 0:c.upload}}}}},addAttributes(){var t;return{...(t=this.parent)==null?void 0:t.call(this),width:{default:null,parseHTML:e=>{const i=e.querySelector("img"),r=i==null?void 0:i.getAttribute("width");return r?Number.parseInt(r,10):320},renderHTML:e=>({width:e.width})},height:{default:null,parseHTML:e=>{const i=e.querySelector("img"),r=i==null?void 0:i.getAttribute("height");return r?Number.parseInt(r,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:i,editor:r})=>e?i.insertContent({type:this.name,attrs:t}):i.insertContentAt(r.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"),i=e==null?void 0:e.getAttribute("width"),r=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:i?Number.parseInt(i,10):null,height:r?Number.parseInt(r,10):null,align:(e==null?void 0:e.getAttribute("align"))||t.style.textAlign||null}}}]}});exports.Mermaid=re;
+"use strict";var U=Object.create;var G=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var Q=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of Y(e))!K.call(t,c)&&c!==r&&G(t,c,{get:()=>e[c],enumerable:!(a=Z(e,c))||a.enumerable});return t};var ee=(t,e,r)=>(r=t!=null?U(J(t)):{},Q(e||!t||!t.__esModule?G(r,"default",{value:t,enumerable:!0}):r,t));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("./index-RfTlOzIr.cjs"),D=require("./throttle-qX7Yjtsg.cjs"),W=require("./index-BH4bc3jN.cjs"),o=require("react/jsx-runtime"),s=require("react"),F=require("./shortId-Bfj8TyNr.cjs"),te=require("./toggle-D41PzQLJ.cjs"),E=require("./dialog-CaCS-W5S.cjs"),re=require("./textarea-B-6zTKQz.cjs"),L=require("./index-Dfmm6FTT.cjs"),P=require("./useButtonProps-C6Vpn190.cjs"),ie=require("./index-DV5kbgRU.cjs"),se=require("./file-i7e4nQY2.cjs"),ae=require("./button-B12K7BJ4.cjs"),ne=`graph TB
+a-->b`;function oe(){const t=ie.useEditorInstance(),e=P.useButtonProps(V.name),{tooltipOptions:r={},isActive:a=void 0,upload:c}=(e==null?void 0:e.componentProps)??{},{editorDisabled:T}=P.useToggleActive(a),[d,N]=s.useState(ne),[q,y]=s.useState(""),[l,_]=s.useState(!1),S=s.useRef(null),[h,H]=s.useState(null),[f,C]=s.useState(!0),z=s.useCallback(u=>{u&&import("mermaid").then(g=>{H(g.default)}).finally(()=>C(!1))},[]),I=async u=>{try{const{svg:g}=await h.render("mermaid-svg",u);y(g)}catch{y("")}},O=()=>{h.initialize({darkMode:!1,startOnLoad:!1,fontSize:12,theme:"base"}),I(d)};s.useEffect(()=>{!f&&h&&l&&O()},[h,l]),s.useEffect(()=>{!f&&h&&l&&I(d)},[h&&d]);const k=async()=>{if(d!==""){if(d){const u=S.current.querySelector("svg"),{width:g,height:R}=u.getBoundingClientRect(),A=`mermaid-${F.shortId()}.svg`;let b=F.i(u.outerHTML);if(c){const i=se.dataURLtoFile(b,A);b=await c(i)}t==null||t.chain().focus().setMermaid({type:"mermaid",src:b,alt:encodeURIComponent(d),width:g,height:R},!!d).run()}_(!1)}};return o.jsxs(E.Dialog,{onOpenChange:_,open:l,children:[o.jsx(E.DialogTrigger,{asChild:!0,children:o.jsx(te.ActionButton,{disabled:T,icon:"Mermaid",tooltip:"Mermaid",tooltipOptions:r,action:()=>{T||_(!0)}})}),o.jsxs(E.DialogContent,{className:"richtext-z-[99999] !richtext-max-w-[1300px]",children:[o.jsx(E.DialogTitle,{children:"Mermaid"}),o.jsx("div",{ref:z,style:{height:"100%",border:"1px solid hsl(var(--border))"},children:f?o.jsx("p",{children:"Loading..."}):o.jsx(o.Fragment,{children:o.jsxs("div",{className:"richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]",children:[o.jsx(re.Textarea,{autoFocus:!0,className:"richtext-flex-1",onChange:u=>N(u.target.value),placeholder:"Text",required:!0,rows:10,value:d,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:q},ref:S,style:{height:"100%",borderWidth:1,minHeight:500,background:"#fff"}})]})})}),o.jsx(E.DialogFooter,{children:o.jsx(ae.Button,{disabled:!h,onClick:k,type:"button",children:"Save changes"})})]})]})}const j={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function ce({editor:t,node:e,updateAttributes:r,getPos:a,selected:c}){const[T,d]=s.useState({width:L.IMAGE_MAX_SIZE,height:L.IMAGE_MAX_SIZE}),[N,q]=s.useState({width:0,height:0}),[y]=s.useState([j.TOP_LEFT,j.TOP_RIGHT,j.BOTTOM_LEFT,j.BOTTOM_RIGHT]),[l,_]=s.useState(!1),[S,h]=s.useState({x:0,y:0,w:0,h:0,dir:""}),{align:H}=e==null?void 0:e.attrs,f=s.useMemo(()=>{const{src:i,alt:p,width:x,height:v}=e==null?void 0:e.attrs,w=$.isNumber(x)?`${x}px`:x,n=$.isNumber(v)?`${v}px`:v;return{src:i||void 0,alt:p||void 0,style:{width:w||void 0,height:n||void 0}}},[e==null?void 0:e.attrs]),C=s.useMemo(()=>{const{style:{width:i}}=f;return{width:i==="100%"?i:void 0}},[f]);function z(i){q({width:i.target.width,height:i.target.height})}function I(){t.commands.setNodeSelection(a())}const O=s.useCallback(D.throttle(()=>{const{width:i}=getComputedStyle(t.view.dom);d(p=>({...p,width:Number.parseInt(i,10)}))},L.IMAGE_THROTTLE_WAIT_TIME),[t]);function k(i,p){i.preventDefault(),i.stopPropagation();const x=N.width,v=N.height,w=x/v;let n=Number(e.attrs.width),M=Number(e.attrs.height);const m=T.width;n&&!M?(n=n>m?m:n,M=Math.round(n/w)):M&&!n?(n=Math.round(M*w),n=n>m?m:n):!n&&!M?(n=x>m?m:x,M=Math.round(n/w)):n=n>m?m:n,_(!0),h({x:i.clientX,y:i.clientY,w:n,h:M,dir:p})}const u=s.useCallback(D.throttle(i=>{if(i.preventDefault(),i.stopPropagation(),!l)return;const{x:p,w:x,dir:v}=S,w=(i.clientX-p)*(/l/.test(v)?-1:1),{width:n,height:M}=e==null?void 0:e.attrs,m=n/M,B=P.clamp(x+w,L.IMAGE_MIN_SIZE,T.width),X=Math.round(B/m);r({width:B,height:X})},L.IMAGE_THROTTLE_WAIT_TIME),[l,S,T,r,e==null?void 0:e.attrs]),g=s.useCallback(i=>{i.preventDefault(),i.stopPropagation(),l&&(h({x:0,y:0,w:0,h:0,dir:""}),_(!1),I())},[l,I]),R=s.useCallback(()=>{document==null||document.addEventListener("mousemove",u,!0),document==null||document.addEventListener("mouseup",g,!0)},[u,g]),A=s.useCallback(()=>{document==null||document.removeEventListener("mousemove",u,!0),document==null||document.removeEventListener("mouseup",g,!0)},[u,g]);s.useEffect(()=>(l?R():A(),()=>{A()}),[l,R,A]);const b=s.useMemo(()=>new ResizeObserver(()=>O()),[O]);return s.useEffect(()=>(b.observe(t.view.dom),()=>{b.disconnect()}),[t.view.dom,b]),o.jsx(W.NodeViewWrapper,{className:"image-view",style:{...C,width:"100%",textAlign:H},children:o.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:{...C,background:"#fff"},className:`image-view__body ${c?"image-view__body--focused":""} ${l?"image-view__body--resizing":""}`,children:[o.jsx("img",{alt:f.alt,className:"image-view__body__image block",height:"auto",onClick:I,onLoad:z,src:f.src,style:f.style}),t.view.editable&&(c||l)&&o.jsx("div",{className:"image-resizer",children:y==null?void 0:y.map(i=>o.jsx("span",{className:`image-resizer__handler image-resizer__handler--${i}`,onMouseDown:p=>k(p,i)},`image-dir-${i}`))})]})})}const V=D.index_default.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 c;return{componentProps:{action:()=>!0,isActive:()=>!1,disabled:!1,editor:e,icon:"Mermaid",tooltip:r("editor.mermaid.tooltip"),upload:(c=a==null?void 0:a.options)==null?void 0:c.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 W.ReactNodeViewRenderer(ce)},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",$.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=V;exports.RichTextMermaid=oe;

package/lib/Mermaid.d.cts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
 /**
@@ -78,6 +79,8 @@ export declare interface MermaidOptions extends GeneralOptions<MermaidOptions> {
     upload?: (file: File) => Promise<string>;
 }
 
+export declare function RichTextMermaid(): JSX.Element;
+
 export { }
 
 
@@ -111,11 +114,22 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
         };
     }
 }
@@ -123,8 +137,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        excalidraw: {
-            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -142,7 +157,16 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
         };
     }
 }
@@ -167,10 +191,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -210,22 +232,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Set the indent attribute
-             */
-            indent: () => ReturnType;
-            /**
-             * Set the outdent attribute
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -248,8 +254,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -257,9 +270,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -275,20 +287,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        columns: {
-            insertColumns: (attrs?: {
-                cols: number;
-            }) => ReturnType;
-            addColBefore: () => ReturnType;
-            addColAfter: () => ReturnType;
-            deleteCol: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         search: {
@@ -312,16 +310,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        tableOfContents: {
-            setTableOfContents: () => ReturnType;
-            removeTableOfContents: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         twitter: {