reactjs-tiptap-editor 0.3.30 → 0.3.31

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-ByRfqzMr.cjs"),u=require("./RichTextEditor-C8Sm1E6J.cjs"),F=require("./dom-dataset-Byuf1YmW.cjs"),o=require("react/jsx-runtime"),s=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-D5WVZMgt.cjs"),S=require("./index-D_A0TBRA.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;
+"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 l of U(e))!Y.call(t,l)&&l!==i&&G(t,l,{get:()=>e[l],enumerable:!(r=X(e,l))||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-ByRfqzMr.cjs"),u=require("./RichTextEditor-DWlLqTl9.cjs"),F=require("./dom-dataset-Byuf1YmW.cjs"),o=require("react/jsx-runtime"),a=require("react"),P=require("./shortId-Bfj8TyNr.cjs"),Q=require("./textarea-DdH64g04.cjs"),E=require("./index-D_A0TBRA.cjs"),$=`graph TB
+a-->b`,ee=({editor:t,upload:e,tooltipOptions:i})=>{const[r,l]=a.useState($),[_,L]=a.useState(""),[p,I]=a.useState(!1),v=a.useRef(null),[c,N]=a.useState(null),C=a.useCallback(d=>{d&&import("mermaid").then(M=>{N(M.default)})},[]),S=async d=>{try{const{svg:M}=await c.render("mermaid-svg",d);L(M)}catch{L("")}},H=()=>{c.initialize({darkMode:!1,startOnLoad:!1,fontSize:12,theme:"base"}),S(r)};a.useEffect(()=>{c&&p&&H()},[c,p]),a.useEffect(()=>{c&&p&&S(r)},[c&&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 y=u.dataURLtoFile(T,O);T=await e(y)}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=>l(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:_},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:l}){const[_,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]),[c,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=_.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 y=a.useCallback(u.throttle(s=>{if(s.preventDefault(),s.stopPropagation(),!c)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,_.width),V=Math.round(B/h);i({width:B,height:V})},E.IMAGE_THROTTLE_WAIT_TIME),[c,C,_,i,e==null?void 0:e.attrs]),R=a.useCallback(s=>{s.preventDefault(),s.stopPropagation(),c&&(S({x:0,y:0,w:0,h:0,dir:""}),N(!1),A())},[c,A]),D=a.useCallback(()=>{document==null||document.addEventListener("mousemove",y,!0),document==null||document.addEventListener("mouseup",R,!0)},[y,R]),z=a.useCallback(()=>{document==null||document.removeEventListener("mousemove",y,!0),document==null||document.removeEventListener("mouseup",R,!0)},[y,R]);a.useEffect(()=>(c?D():z(),()=>{z()}),[c,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 ${l?"image-view__body--focused":""} ${c?"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&&(l||c)&&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.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:i,extension:r})=>{var l;return{component:ee,componentProps:{action:()=>!0,isActive:()=>!1,disabled:!1,editor:e,icon:"Mermaid",tooltip:i("editor.mermaid.tooltip"),upload:(l=r==null?void 0:r.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 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;

package/lib/Mermaid.d.cts

@@ -187,6 +187,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> {
         imageUpload: {
@@ -207,21 +222,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> {
         imageGifUpload: {

package/lib/Mermaid.d.ts

@@ -187,6 +187,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> {
         imageUpload: {
@@ -207,21 +222,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> {
         imageGifUpload: {

package/lib/Mermaid.js

@@ -1,73 +1,74 @@
 import { h as $, m as X } from "./index-DI9T3iLd.js";
-import { w as Z, x as J, A as K, y as Y, z as Q, F as tt, B as et, G as rt, J as V, K as it, N as at } from "./RichTextEditor-BQN2eLD_.js";
+import { w as Z, x as J, A as K, y as Y, z as Q, F as tt, B as et, G as rt, J as V, K as it, N as at } from "./RichTextEditor-KP2Rgcqe.js";
 import { N as st, R as nt } from "./dom-dataset-Di3tIRrR.js";
-import { jsxs as C, jsx as o } from "react/jsx-runtime";
-import { useState as g, useRef as ot, useCallback as y, useEffect as E, useMemo as k } from "react";
+import { jsxs as H, jsx as o } from "react/jsx-runtime";
+import { useState as m, useRef as ot, useCallback as y, useEffect as R, useMemo as F } from "react";
 import { s as lt, i as ct } from "./shortId-WJVkrvml.js";
-import { T as dt } from "./textarea-BglwYF6b.js";
+import { T as dt } from "./textarea-CktfkXNe.js";
 import { I as q, i as ht, j as W } from "./index-CsK90iVd.js";
 const j = `graph TB
-a-->b`, ut = ({ editor: r, upload: t }) => {
-  const [e, s] = g(j), [f, b] = g(""), [x, T] = g(!1), A = ot(null), [l, c] = g(null), N = y(
-    (n) => {
-      n && import("mermaid").then((p) => {
-        c(p.default);
+a-->b`, ut = ({ editor: e, upload: t, tooltipOptions: a }) => {
+  const [r, g] = m(j), [_, L] = m(""), [p, I] = m(!1), v = ot(null), [n, S] = m(null), z = y(
+    (l) => {
+      l && import("mermaid").then((f) => {
+        S(f.default);
       });
     },
     []
-  ), _ = async (n) => {
+  ), A = async (l) => {
     try {
-      const { svg: p } = await l.render("mermaid-svg", n);
-      b(p);
+      const { svg: f } = await n.render("mermaid-svg", l);
+      L(f);
     } catch {
-      b("");
+      L("");
     }
-  }, L = () => {
-    l.initialize({
+  }, B = () => {
+    n.initialize({
       darkMode: !1,
       startOnLoad: !1,
       // fontFamily:'',
       fontSize: 12,
       theme: "base"
-    }), _(e);
+    }), A(r);
   };
-  return E(() => {
-    l && x && L();
-  }, [l, x]), E(() => {
-    l && x && _(e);
-  }, [l && e]), /* @__PURE__ */ C(
+  return R(() => {
+    n && p && B();
+  }, [n, p]), R(() => {
+    n && p && A(r);
+  }, [n && r]), /* @__PURE__ */ H(
     Z,
     {
-      onOpenChange: T,
-      open: x,
+      onOpenChange: I,
+      open: p,
       children: [
         /* @__PURE__ */ o(J, { asChild: !0, children: /* @__PURE__ */ o(
           K,
           {
-            action: () => T(!0),
+            action: () => I(!0),
             icon: "Mermaid",
-            tooltip: "Mermaid"
+            tooltip: "Mermaid",
+            tooltipOptions: a
           }
         ) }),
-        /* @__PURE__ */ C(Y, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
+        /* @__PURE__ */ H(Y, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
           /* @__PURE__ */ o(Q, { children: "Mermaid" }),
           /* @__PURE__ */ o(
             "div",
             {
-              ref: N,
+              ref: z,
               style: { height: "100%", border: "1px solid hsl(var(--border))" },
-              children: /* @__PURE__ */ C("div", { className: "richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]", children: [
+              children: /* @__PURE__ */ H("div", { className: "richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]", children: [
                 /* @__PURE__ */ o(
                   dt,
                   {
                     autoFocus: !0,
                     className: "richtext-flex-1",
                     defaultValue: j,
-                    onChange: (n) => s(n.target.value),
+                    onChange: (l) => g(l.target.value),
                     placeholder: "Text",
                     required: !0,
                     rows: 10,
-                    value: e,
+                    value: r,
                     style: {
                       color: "hsl(var(--richtext-foreground))"
                     }
@@ -77,8 +78,8 @@ a-->b`, ut = ({ editor: r, upload: t }) => {
                   "div",
                   {
                     className: "richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]",
-                    dangerouslySetInnerHTML: { __html: f },
-                    ref: A,
+                    dangerouslySetInnerHTML: { __html: _ },
+                    ref: v,
                     style: { height: "100%", borderWidth: 1, minHeight: 500, background: "#fff" }
                   }
                 )
@@ -89,29 +90,29 @@ a-->b`, ut = ({ editor: r, upload: t }) => {
             et,
             {
               onClick: async () => {
-                if (e !== "") {
-                  if (e) {
-                    const n = A.current.querySelector("svg"), { width: p, height: H } = n.getBoundingClientRect(), I = `mermaid-${lt()}.svg`;
-                    let w = ct(n.outerHTML);
+                if (r !== "") {
+                  if (r) {
+                    const l = v.current.querySelector("svg"), { width: f, height: N } = l.getBoundingClientRect(), O = `mermaid-${lt()}.svg`;
+                    let x = ct(l.outerHTML);
                     if (t) {
                       console.log({
-                        src: w
+                        src: x
                       });
-                      const R = rt(w, I);
-                      w = await t(R);
+                      const T = rt(x, O);
+                      x = await t(T);
                     }
-                    r == null || r.chain().focus().setMermaid(
+                    e == null || e.chain().focus().setMermaid(
                       {
                         type: "mermaid",
-                        src: w,
-                        alt: encodeURIComponent(e),
-                        width: p,
-                        height: H
+                        src: x,
+                        alt: encodeURIComponent(r),
+                        width: f,
+                        height: N
                       },
-                      !!e
+                      !!r
                     ).run();
                   }
-                  T(!1);
+                  I(!1);
                 }
               },
               type: "button",
@@ -122,141 +123,141 @@ a-->b`, ut = ({ editor: r, upload: t }) => {
       ]
     }
   );
-}, O = {
+}, E = {
   TOP_LEFT: "tl",
   TOP_RIGHT: "tr",
   BOTTOM_LEFT: "bl",
   BOTTOM_RIGHT: "br"
 };
-function mt({ editor: r, node: t, updateAttributes: e, getPos: s, selected: f }) {
-  const [b, x] = g({
+function mt({ editor: e, node: t, updateAttributes: a, getPos: r, selected: g }) {
+  const [_, L] = m({
     width: q,
     height: q
-  }), [T, A] = g({
+  }), [p, I] = m({
     width: 0,
     height: 0
-  }), [l] = g([
-    O.TOP_LEFT,
-    O.TOP_RIGHT,
-    O.BOTTOM_LEFT,
-    O.BOTTOM_RIGHT
-  ]), [c, N] = g(!1), [_, L] = g({
+  }), [v] = m([
+    E.TOP_LEFT,
+    E.TOP_RIGHT,
+    E.BOTTOM_LEFT,
+    E.BOTTOM_RIGHT
+  ]), [n, S] = m(!1), [z, A] = m({
     x: 0,
     y: 0,
     w: 0,
     h: 0,
     dir: ""
-  }), { align: F } = t == null ? void 0 : t.attrs, n = k(() => {
-    const { src: i, alt: h, width: u, height: M } = t == null ? void 0 : t.attrs, v = $(u) ? `${u}px` : u, a = $(M) ? `${M}px` : M;
+  }), { align: B } = t == null ? void 0 : t.attrs, b = F(() => {
+    const { src: i, alt: d, width: h, height: w } = t == null ? void 0 : t.attrs, M = $(h) ? `${h}px` : h, s = $(w) ? `${w}px` : w;
     return {
       src: i || void 0,
-      alt: h || void 0,
+      alt: d || void 0,
       style: {
-        width: v || void 0,
-        height: a || void 0
+        width: M || void 0,
+        height: s || void 0
       }
     };
-  }, [t == null ? void 0 : t.attrs]), p = k(() => {
+  }, [t == null ? void 0 : t.attrs]), l = F(() => {
     const {
       style: { width: i }
-    } = n;
+    } = b;
     return { width: i === "100%" ? i : void 0 };
-  }, [n]);
-  function H(i) {
-    A({
+  }, [b]);
+  function f(i) {
+    I({
       width: i.target.width,
       height: i.target.height
     });
   }
-  function I() {
-    r.commands.setNodeSelection(s());
+  function N() {
+    e.commands.setNodeSelection(r());
   }
-  const w = y(
+  const O = y(
     V(() => {
-      const { width: i } = getComputedStyle(r.view.dom);
-      x((h) => ({
-        ...h,
+      const { width: i } = getComputedStyle(e.view.dom);
+      L((d) => ({
+        ...d,
         width: Number.parseInt(i, 10)
       }));
     }, W),
-    [r]
+    [e]
   );
-  function R(i, h) {
+  function x(i, d) {
     i.preventDefault(), i.stopPropagation();
-    const u = T.width, M = T.height, v = u / M;
-    let a = Number(t.attrs.width), m = Number(t.attrs.height);
-    const d = b.width;
-    a && !m ? (a = a > d ? d : a, m = Math.round(a / v)) : m && !a ? (a = Math.round(m * v), a = a > d ? d : a) : !a && !m ? (a = u > d ? d : u, m = Math.round(a / v)) : a = a > d ? d : a, N(!0), L({
+    const h = p.width, w = p.height, M = h / w;
+    let s = Number(t.attrs.width), u = Number(t.attrs.height);
+    const c = _.width;
+    s && !u ? (s = s > c ? c : s, u = Math.round(s / M)) : u && !s ? (s = Math.round(u * M), s = s > c ? c : s) : !s && !u ? (s = h > c ? c : h, u = Math.round(s / M)) : s = s > c ? c : s, S(!0), A({
       x: i.clientX,
       y: i.clientY,
-      w: a,
-      h: m,
-      dir: h
+      w: s,
+      h: u,
+      dir: d
     });
   }
-  const S = y(
+  const T = y(
     V((i) => {
-      if (i.preventDefault(), i.stopPropagation(), !c)
+      if (i.preventDefault(), i.stopPropagation(), !n)
         return;
-      const { x: h, w: u, dir: M } = _, v = (i.clientX - h) * (/l/.test(M) ? -1 : 1), { width: a, height: m } = t == null ? void 0 : t.attrs, d = a / m, P = it(u + v, ht, b.width), U = Math.round(P / d);
-      e({
+      const { x: d, w: h, dir: w } = z, M = (i.clientX - d) * (/l/.test(w) ? -1 : 1), { width: s, height: u } = t == null ? void 0 : t.attrs, c = s / u, P = it(h + M, ht, _.width), U = Math.round(P / c);
+      a({
         width: P,
         height: U
       });
     }, W),
-    [c, _, b, e, t == null ? void 0 : t.attrs]
-  ), z = y(
+    [n, z, _, a, t == null ? void 0 : t.attrs]
+  ), C = y(
     (i) => {
-      i.preventDefault(), i.stopPropagation(), c && (L({
+      i.preventDefault(), i.stopPropagation(), n && (A({
         x: 0,
         y: 0,
         w: 0,
         h: 0,
         dir: ""
-      }), N(!1), I());
+      }), S(!1), N());
     },
-    [c, I]
+    [n, N]
   ), G = y(() => {
-    document == null || document.addEventListener("mousemove", S, !0), document == null || document.addEventListener("mouseup", z, !0);
-  }, [S, z]), B = y(() => {
-    document == null || document.removeEventListener("mousemove", S, !0), document == null || document.removeEventListener("mouseup", z, !0);
-  }, [S, z]);
-  E(() => (c ? G() : B(), () => {
-    B();
-  }), [c, G, B]);
-  const D = k(() => new ResizeObserver(() => w()), [w]);
-  return E(() => (D.observe(r.view.dom), () => {
-    D.disconnect();
-  }), [r.view.dom, D]), /* @__PURE__ */ o(
+    document == null || document.addEventListener("mousemove", T, !0), document == null || document.addEventListener("mouseup", C, !0);
+  }, [T, C]), D = y(() => {
+    document == null || document.removeEventListener("mousemove", T, !0), document == null || document.removeEventListener("mouseup", C, !0);
+  }, [T, C]);
+  R(() => (n ? G() : D(), () => {
+    D();
+  }), [n, G, D]);
+  const k = F(() => new ResizeObserver(() => O()), [O]);
+  return R(() => (k.observe(e.view.dom), () => {
+    k.disconnect();
+  }), [e.view.dom, k]), /* @__PURE__ */ o(
     st,
     {
       className: "image-view",
-      style: { ...p, width: "100%", textAlign: F },
-      children: /* @__PURE__ */ C(
+      style: { ...l, width: "100%", textAlign: B },
+      children: /* @__PURE__ */ H(
         "div",
         {
           "data-drag-handle": !0,
           draggable: "true",
-          style: { ...p, background: "#fff" },
-          className: `image-view__body ${f ? "image-view__body--focused" : ""} ${c ? "image-view__body--resizing" : ""}`,
+          style: { ...l, background: "#fff" },
+          className: `image-view__body ${g ? "image-view__body--focused" : ""} ${n ? "image-view__body--resizing" : ""}`,
           children: [
             /* @__PURE__ */ o(
               "img",
               {
-                alt: n.alt,
+                alt: b.alt,
                 className: "image-view__body__image block",
                 height: "auto",
-                onClick: I,
-                onLoad: H,
-                src: n.src,
-                style: n.style
+                onClick: N,
+                onLoad: f,
+                src: b.src,
+                style: b.style
               }
             ),
-            r.view.editable && (f || c) && /* @__PURE__ */ o("div", { className: "image-resizer", children: l == null ? void 0 : l.map((i) => /* @__PURE__ */ o(
+            e.view.editable && (g || n) && /* @__PURE__ */ o("div", { className: "image-resizer", children: v == null ? void 0 : v.map((i) => /* @__PURE__ */ o(
               "span",
               {
                 className: `image-resizer__handler image-resizer__handler--${i}`,
-                onMouseDown: (h) => R(h, i)
+                onMouseDown: (d) => x(d, i)
               },
               `image-dir-${i}`
             )) })
@@ -269,9 +270,9 @@ function mt({ editor: r, node: t, updateAttributes: e, getPos: s, selected: f })
 const Tt = /* @__PURE__ */ at.extend({
   name: "mermaid",
   addOptions() {
-    var r;
+    var e;
     return {
-      ...(r = this.parent) == null ? void 0 : r.call(this),
+      ...(e = this.parent) == null ? void 0 : e.call(this),
       inline: !1,
       content: "",
       marks: "",
@@ -282,8 +283,8 @@ const Tt = /* @__PURE__ */ at.extend({
       HTMLAttributes: {
         class: "mermaid"
       },
-      button: ({ editor: t, t: e, extension: s }) => {
-        var f;
+      button: ({ editor: t, t: a, extension: r }) => {
+        var g;
         return {
           component: ut,
           componentProps: {
@@ -292,22 +293,22 @@ const Tt = /* @__PURE__ */ at.extend({
             disabled: !1,
             editor: t,
             icon: "Mermaid",
-            tooltip: e("editor.mermaid.tooltip"),
-            upload: (f = s == null ? void 0 : s.options) == null ? void 0 : f.upload
+            tooltip: a("editor.mermaid.tooltip"),
+            upload: (g = r == null ? void 0 : r.options) == null ? void 0 : g.upload
           }
         };
       }
     };
   },
   addAttributes() {
-    var r;
+    var e;
     return {
-      ...(r = this.parent) == null ? void 0 : r.call(this),
+      ...(e = this.parent) == null ? void 0 : e.call(this),
       width: {
         default: null,
         parseHTML: (t) => {
-          const e = t.querySelector("img"), s = e == null ? void 0 : e.getAttribute("width");
-          return s ? Number.parseInt(s, 10) : 320;
+          const a = t.querySelector("img"), r = a == null ? void 0 : a.getAttribute("width");
+          return r ? Number.parseInt(r, 10) : 320;
         },
         renderHTML: (t) => ({
           width: t.width
@@ -316,8 +317,8 @@ const Tt = /* @__PURE__ */ at.extend({
       height: {
         default: null,
         parseHTML: (t) => {
-          const e = t.querySelector("img"), s = e == null ? void 0 : e.getAttribute("height");
-          return s ? Number.parseInt(s, 10) : 212;
+          const a = t.querySelector("img"), r = a == null ? void 0 : a.getAttribute("height");
+          return r ? Number.parseInt(r, 10) : 212;
         },
         renderHTML: (t) => ({
           height: t.height
@@ -338,18 +339,18 @@ const Tt = /* @__PURE__ */ at.extend({
   // @ts-ignore
   addCommands() {
     return {
-      setMermaid: (r, t) => ({ commands: e, editor: s }) => t ? e.insertContent({
+      setMermaid: (e, t) => ({ commands: a, editor: r }) => t ? a.insertContent({
         type: this.name,
-        attrs: r
-      }) : e.insertContentAt(s.state.selection.anchor, {
+        attrs: e
+      }) : a.insertContentAt(r.state.selection.anchor, {
         type: this.name,
-        attrs: r
+        attrs: e
       }),
-      setAlignImageMermaid: (r) => ({ commands: t }) => t.updateAttributes(this.name, { align: r })
+      setAlignImageMermaid: (e) => ({ commands: t }) => t.updateAttributes(this.name, { align: e })
     };
   },
-  renderHTML({ HTMLAttributes: r }) {
-    const { align: t } = r;
+  renderHTML({ HTMLAttributes: e }) {
+    const { align: t } = e;
     return [
       "div",
       // Parent element
@@ -362,7 +363,7 @@ const Tt = /* @__PURE__ */ at.extend({
         X(
           // @ts-ignore
           this.options.HTMLAttributes,
-          r
+          e
         )
       ]
     ];
@@ -371,14 +372,14 @@ const Tt = /* @__PURE__ */ at.extend({
     return [
       {
         tag: "div[class=imageMermaid]",
-        getAttrs: (r) => {
-          const t = r.querySelector("img"), e = t == null ? void 0 : t.getAttribute("width"), s = t == null ? void 0 : t.getAttribute("height");
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), a = t == null ? void 0 : t.getAttribute("width"), r = t == null ? void 0 : t.getAttribute("height");
           return {
             src: t == null ? void 0 : t.getAttribute("src"),
             alt: t == null ? void 0 : t.getAttribute("alt"),
-            width: e ? Number.parseInt(e, 10) : null,
-            height: s ? Number.parseInt(s, 10) : null,
-            align: (t == null ? void 0 : t.getAttribute("align")) || r.style.textAlign || null
+            width: a ? Number.parseInt(a, 10) : null,
+            height: r ? Number.parseInt(r, 10) : null,
+            align: (t == null ? void 0 : t.getAttribute("align")) || e.style.textAlign || null
           };
         }
       }

package/lib/MoreMark.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./index-ByRfqzMr.cjs"),d=require("./index-Z4b9rzn-.cjs"),c=require("react/jsx-runtime"),m=require("react"),s=require("./RichTextEditor-C8Sm1E6J.cjs");function g(t){var n;const i=m.useMemo(()=>{var r;const e=(r=t==null?void 0:t.items)==null?void 0:r.find(u=>u.isActive());return e&&!e.default?{...e,icon:e!=null&&e.icon?e==null?void 0:e.icon:t==null?void 0:t.icon}:{title:t.tooltip,icon:t.icon,isActive:()=>!1}},[t]);return c.jsxs(s.DropdownMenu,{children:[c.jsx(s.DropdownMenuTrigger,{asChild:!0,disabled:t==null?void 0:t.disabled,children:c.jsx(s.ActionButton,{customClass:"!richtext-w-12 richtext-h-12",disabled:t==null?void 0:t.disabled,icon:t==null?void 0:t.icon,tooltip:t==null?void 0:t.tooltip,children:c.jsx(s.MenuDown,{className:"richtext-size-3 richtext-text-gray-500"})})}),c.jsx(s.DropdownMenuContent,{className:"w-full",children:(n=t==null?void 0:t.items)==null?void 0:n.map((e,o)=>c.jsxs(s.DropdownMenuCheckboxItem,{checked:i.title===e.title,className:"richtext-flex richtext-items-center richtext-gap-3",onClick:e.action,children:[c.jsx(s.IconComponent,{name:e==null?void 0:e.icon}),c.jsx("span",{className:"richtext-ml-1",children:e.title}),!!(e!=null&&e.shortcutKeys)&&c.jsx("span",{className:"richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60",children:s.getShortcutKeys(e.shortcutKeys)})]},`more-mark-${o}`))})]})}const f=b.Extension.create({name:"moreMark",addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),button({editor:i,extension:n,t:e}){var l,h;const o=n.options.subscript,r=n.options.superscript,u={action:()=>i.commands.toggleSubscript(),isActive:()=>i.isActive("subscript")||!1,disabled:!i.can().toggleSubscript(),icon:"Subscript",title:e("editor.subscript.tooltip"),shortcutKeys:((l=n.options.shortcutKeys)==null?void 0:l[0])??["mod","."]},x={action:()=>i.commands.toggleSuperscript(),isActive:()=>i.isActive("superscript")||!1,disabled:!i.can().toggleSuperscript(),icon:"Superscript",title:e("editor.superscript.tooltip"),shortcutKeys:((h=n.options.shortcutKeys)==null?void 0:h[1])??["mod",","]},a=[];return o!==!1&&a.push(u),r!==!1&&a.push(x),{component:g,componentProps:{icon:"Type",tooltip:e("editor.moremark"),disabled:!i.isEditable,items:a}}}}},addExtensions(){const t=[];return this.options.subscript!==!1&&t.push(d.Subscript.configure(this.options.subscript)),this.options.superscript!==!1&&t.push(d.Superscript.configure(this.options.superscript)),t}});exports.MoreMark=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./index-ByRfqzMr.cjs"),d=require("./index-Z4b9rzn-.cjs"),c=require("react/jsx-runtime"),m=require("react"),s=require("./RichTextEditor-DWlLqTl9.cjs");function g(t){var n;const i=m.useMemo(()=>{var r;const e=(r=t==null?void 0:t.items)==null?void 0:r.find(u=>u.isActive());return e&&!e.default?{...e,icon:e!=null&&e.icon?e==null?void 0:e.icon:t==null?void 0:t.icon}:{title:t.tooltip,icon:t.icon,isActive:()=>!1}},[t]);return c.jsxs(s.DropdownMenu,{children:[c.jsx(s.DropdownMenuTrigger,{asChild:!0,disabled:t==null?void 0:t.disabled,children:c.jsx(s.ActionButton,{customClass:"!richtext-w-12 richtext-h-12",disabled:t==null?void 0:t.disabled,icon:t==null?void 0:t.icon,tooltip:t==null?void 0:t.tooltip,children:c.jsx(s.MenuDown,{className:"richtext-size-3 richtext-text-gray-500"})})}),c.jsx(s.DropdownMenuContent,{className:"w-full",children:(n=t==null?void 0:t.items)==null?void 0:n.map((e,o)=>c.jsxs(s.DropdownMenuCheckboxItem,{checked:i.title===e.title,className:"richtext-flex richtext-items-center richtext-gap-3",onClick:e.action,children:[c.jsx(s.IconComponent,{name:e==null?void 0:e.icon}),c.jsx("span",{className:"richtext-ml-1",children:e.title}),!!(e!=null&&e.shortcutKeys)&&c.jsx("span",{className:"richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60",children:s.getShortcutKeys(e.shortcutKeys)})]},`more-mark-${o}`))})]})}const f=b.Extension.create({name:"moreMark",addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),button({editor:i,extension:n,t:e}){var l,h;const o=n.options.subscript,r=n.options.superscript,u={action:()=>i.commands.toggleSubscript(),isActive:()=>i.isActive("subscript")||!1,disabled:!i.can().toggleSubscript(),icon:"Subscript",title:e("editor.subscript.tooltip"),shortcutKeys:((l=n.options.shortcutKeys)==null?void 0:l[0])??["mod","."]},x={action:()=>i.commands.toggleSuperscript(),isActive:()=>i.isActive("superscript")||!1,disabled:!i.can().toggleSuperscript(),icon:"Superscript",title:e("editor.superscript.tooltip"),shortcutKeys:((h=n.options.shortcutKeys)==null?void 0:h[1])??["mod",","]},a=[];return o!==!1&&a.push(u),r!==!1&&a.push(x),{component:g,componentProps:{icon:"Type",tooltip:e("editor.moremark"),disabled:!i.isEditable,items:a}}}}},addExtensions(){const t=[];return this.options.subscript!==!1&&t.push(d.Subscript.configure(this.options.subscript)),this.options.superscript!==!1&&t.push(d.Superscript.configure(this.options.superscript)),t}});exports.MoreMark=f;