@firecms/editor 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/index.umd.js

@@ -1,6 +1,1606 @@
-(function(u,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@tiptap/extension-underline"),require("@tiptap/extension-text-style"),require("@tiptap/extension-color"),require("tiptap-markdown"),require("@tiptap/extension-highlight"),require("@tiptap/react"),require("jotai"),require("@radix-ui/react-slot"),require("tunnel-rat"),require("cmdk"),require("@tiptap/starter-kit"),require("@tiptap/extension-horizontal-rule"),require("@tiptap/extension-link"),require("@tiptap/extension-image"),require("@tiptap/extension-placeholder"),require("@tiptap/extension-task-item"),require("@tiptap/extension-task-list"),require("@tiptap/core"),require("@tiptap/suggestion"),require("tippy.js"),require("@firecms/ui"),require("prosemirror-state"),require("@tiptap/pm/view"),require("@tiptap/pm/state")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@tiptap/extension-underline","@tiptap/extension-text-style","@tiptap/extension-color","tiptap-markdown","@tiptap/extension-highlight","@tiptap/react","jotai","@radix-ui/react-slot","tunnel-rat","cmdk","@tiptap/starter-kit","@tiptap/extension-horizontal-rule","@tiptap/extension-link","@tiptap/extension-image","@tiptap/extension-placeholder","@tiptap/extension-task-item","@tiptap/extension-task-list","@tiptap/core","@tiptap/suggestion","tippy.js","@firecms/ui","prosemirror-state","@tiptap/pm/view","@tiptap/pm/state"],n):(u=typeof globalThis<"u"?globalThis:u||self,n(u["FireCMS Editor"]={},u.jsxRuntime,u.React,u.TiptapUnderline,u.TextStyle,u.extensionColor,u.tiptapMarkdown,u.Highlight,u.react,u.jotai,u.reactSlot,u.tunnel,u.cmdk,u.StarterKit,u.HorizontalRule,u.TiptapLink,u.TiptapImage,u.Placeholder,u.extensionTaskItem,u.extensionTaskList,u.core,u.Suggestion,u.tippy,u.ui,u.prosemirrorState,u.view,u.state))})(this,function(u,n,g,W,Q,Z,_,V,b,y,X,Y,C,J,G,$,j,R,ee,te,w,re,oe,s,ne,A,E){"use strict";const T=y.createStore(),se=({children:e})=>n.jsx(y.Provider,{store:T,children:e}),ae=g.forwardRef(({children:e,tippyOptions:r,...t},o)=>{const{editor:i}=b.useCurrentEditor(),l=g.useRef(null);g.useEffect(()=>{!l.current||!r?.placement||(l.current.setProps({placement:r.placement}),l.current.popperInstance?.update())},[r?.placement]);const a=g.useMemo(()=>({shouldShow:({editor:m,state:p})=>{const{selection:h}=p,{empty:k}=h;return!(m.isActive("image")||k||b.isNodeSelection(h))},tippyOptions:{onCreate:m=>{l.current=m},moveTransition:"transform 0.15s ease-out",...r},...t}),[t,r]);return i?n.jsx("div",{ref:o,children:n.jsx(b.BubbleMenu,{editor:i,...a,children:e})}):null}),S=g.forwardRef(({children:e,asChild:r,onSelect:t,...o},i)=>{const{editor:l}=b.useCurrentEditor(),a=r?X.Slot:"div";return l?n.jsx(a,{ref:i,...o,onClick:()=>t?.(l),children:e}):null});S.displayName="EditorBubbleItem";const q=Y(),D=y.atom(""),z=y.atom(null),ie=({query:e,range:r})=>{const t=y.useSetAtom(D,{store:T}),o=y.useSetAtom(z,{store:T});return g.useEffect(()=>{t(e)},[e,t]),g.useEffect(()=>{o(r)},[r,o]),g.useEffect(()=>{const i=["ArrowUp","ArrowDown","Enter"],l=a=>{if(i.includes(a.key)){a.preventDefault();const c=document.querySelector("#slash-command");c&&c.dispatchEvent(new KeyboardEvent("keydown",{key:a.key,cancelable:!0,bubbles:!0}))}};return document.addEventListener("keydown",l),()=>{document.removeEventListener("keydown",l)}},[]),n.jsx(q.Out,{})},ce=g.forwardRef(({children:e,className:r,...t},o)=>{const i=g.useRef(null),[l,a]=y.useAtom(D);return n.jsx(q.In,{children:n.jsxs(C.Command,{ref:o,onKeyDown:c=>{c.stopPropagation()},id:"slash-command",className:r,...t,children:[n.jsx(C.Command.Input,{value:l,onValueChange:a,style:{display:"none"}}),n.jsx(C.Command.List,{ref:i,children:e})]})})}),F=g.forwardRef(({children:e,onCommand:r,...t},o)=>{const{editor:i}=b.useCurrentEditor(),l=y.useAtomValue(z);return!i||!l?null:n.jsx(C.CommandItem,{ref:o,...t,onSelect:()=>r({editor:i,range:l}),children:e})});F.displayName="EditorCommandItem";const le=C.CommandEmpty,de=w.Extension.create({name:"slash-command",addOptions(){return{suggestion:{char:"/",command:({editor:e,range:r,props:t})=>{t.command({editor:e,range:r})}}}},addProseMirrorPlugins(){return[re({editor:this.editor,...this.options.suggestion})]}}),ue=()=>{let e=null,r=null;return{onStart:t=>{e=new b.ReactRenderer(ie,{props:t,editor:t.editor}),r=oe("body",{getReferenceClientRect:t.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start"})},onUpdate:t=>{e?.updateProps(t),r&&r[0].setProps({getReferenceClientRect:t.clientRect})},onKeyDown:t=>t.event.key==="Escape"?(r?.[0].hide(),!0):e?.ref?.onKeyDown(t),onExit:()=>{r?.[0].destroy(),e?.destroy()}}},me=e=>e,pe=R.configure({placeholder:({node:e})=>e.type.name==="heading"?`Heading ${e.attrs.level}`:"Press '/' for commands",includeChildren:!0}),ge=G.extend({addInputRules(){return[new w.InputRule({find:/^(?:---|—-|___\s|\*\*\*\s)$/,handler:({state:e,range:r})=>{const t={},{tr:o}=e,i=r.from,l=r.to;o.insert(i-1,this.type.create(t)).delete(o.mapping.map(i),o.mapping.map(l))}})]}}),U=[{name:"Text",icon:s.TextFieldsIcon,command:e=>e?.chain().focus().toggleNode("paragraph","paragraph").run(),isActive:e=>(e?.isActive("paragraph")&&!e?.isActive("bulletList")&&!e?.isActive("orderedList"))??!1},{name:"Heading 1",icon:s.LooksOneIcon,command:e=>e?.chain().focus().toggleHeading({level:1}).run(),isActive:e=>e?.isActive("heading",{level:1})??!1},{name:"Heading 2",icon:s.LooksTwoIcon,command:e=>e?.chain().focus().toggleHeading({level:2}).run(),isActive:e=>e?.isActive("heading",{level:2})??!1},{name:"Heading 3",icon:s.Looks3Icon,command:e=>e?.chain().focus().toggleHeading({level:3}).run(),isActive:e=>e?.isActive("heading",{level:3})??!1},{name:"To-do List",icon:s.CheckBoxIcon,command:e=>e?.chain().focus().toggleTaskList().run(),isActive:e=>e?.isActive("taskItem")??!1},{name:"Bullet List",icon:s.FormatListBulletedIcon,command:e=>e?.chain().focus().toggleBulletList().run(),isActive:e=>e?.isActive("bulletList")??!1},{name:"Numbered List",icon:s.FormatListNumberedIcon,command:e=>e?.chain().focus().toggleOrderedList().run(),isActive:e=>e?.isActive("orderedList")??!1},{name:"Quote",icon:s.FormatQuoteIcon,command:e=>e?.chain().focus().toggleNode("paragraph","paragraph").toggleBlockquote().run(),isActive:e=>e?.isActive("blockquote")??!1},{name:"Code",icon:s.CodeIcon,command:e=>e?.chain().focus().toggleCodeBlock().run(),isActive:e=>e?.isActive("codeBlock")??!1}],fe=({open:e,onOpenChange:r})=>{const{editor:t}=b.useCurrentEditor();if(!t)return null;const o=U.filter(i=>i.isActive(t)).pop()??{name:"Multiple"};return n.jsx(s.Popover,{sideOffset:5,align:"start",className:"w-48 p-1",trigger:n.jsxs(s.Button,{variant:"text",className:"gap-2 rounded-none",color:"text",children:[n.jsx("span",{className:"whitespace-nowrap text-sm",children:o.name}),n.jsx(s.ExpandMoreIcon,{size:"small"})]}),modal:!0,open:e,onOpenChange:r,children:U.map((i,l)=>n.jsxs(S,{onSelect:a=>{i.command(a),r(!1)},className:"flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-gray-700 text-gray-900 dark:text-white",children:[n.jsxs("div",{className:"flex items-center space-x-2",children:[n.jsx(i.icon,{size:"smallest"}),n.jsx("span",{children:i.name})]}),o.name===i.name&&n.jsx(s.CheckIcon,{size:"smallest"})]},l))})};function he(e){try{return new URL(e),!0}catch{return!1}}function xe(e){if(he(e))return e;try{return e.includes(".")&&!e.includes(" ")?new URL(`https://${e}`).toString():null}catch{return null}}const ke=({open:e,onOpenChange:r})=>{const t=g.useRef(null),{editor:o}=b.useCurrentEditor();return g.useEffect(()=>{t.current&&t.current?.focus()}),o?n.jsx(s.Popover,{modal:!0,open:e,onOpenChange:r,trigger:n.jsx(s.Button,{variant:"text",className:"gap-2 rounded-none",color:"text",children:n.jsx("p",{className:s.cls("underline decoration-stone-400 underline-offset-4",{"text-blue-500":o.isActive("link")}),children:"Link"})}),children:n.jsxs("form",{onSubmit:i=>{const l=i.currentTarget;i.preventDefault();const a=l[0],c=xe(a.value);c&&o.chain().focus().setLink({href:c}).run()},className:"flex p-1",children:[n.jsx("input",{ref:t,autoFocus:e,placeholder:"Paste a link",defaultValue:o.getAttributes("link").href||"",className:"text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"}),o.getAttributes("link").href?n.jsx(s.Button,{size:"small",variant:"text",type:"button",color:"text",className:"flex items-center",onClick:()=>{o.chain().focus().unsetLink().run()},children:n.jsx(s.DeleteIcon,{size:"small"})}):n.jsx(s.Button,{size:"small",variant:"text",children:n.jsx(s.CheckIcon,{size:"small"})})]})}):null},be=()=>{const{editor:e}=b.useCurrentEditor();if(!e)return null;const r=[{name:"bold",isActive:t=>t?.isActive("bold")??!1,command:t=>t?.chain().focus().toggleBold().run(),icon:s.FormatBoldIcon},{name:"italic",isActive:t=>t?.isActive("italic")??!1,command:t=>t?.chain().focus().toggleItalic().run(),icon:s.FormatItalicIcon},{name:"underline",isActive:t=>t?.isActive("underline")??!1,command:t=>t?.chain().focus().toggleUnderline().run(),icon:s.FormatUnderlinedIcon},{name:"strike",isActive:t=>t?.isActive("strike")??!1,command:t=>t?.chain().focus().toggleStrike().run(),icon:s.FormatStrikethroughIcon},{name:"code",isActive:t=>t?.isActive("code")??!1,command:t=>t?.chain().focus().toggleCode().run(),icon:s.CodeIcon}];return n.jsx("div",{className:"flex",children:r.map((t,o)=>n.jsx(S,{onSelect:i=>{t.command(i)},children:n.jsx(s.Button,{size:"small",color:"text",className:"gap-2 rounded-none h-full",variant:"text",children:n.jsx(t.icon,{className:s.cls({"text-inherit":!t.isActive(e),"text-blue-500":t.isActive(e)})})})},o))})};function M(e,r,t,o=300){const i=g.useRef(!1),l=()=>{r(),i.current=!1},a=g.useRef(void 0);g.useEffect(()=>(i.current=!0,clearTimeout(a.current),a.current=setTimeout(l,o),()=>{t&&l()}),[t,e])}function I(e){return Array.isArray(e)?e.map(r=>I(r)):(typeof e=="object"&&e!==null&&(e.attrs&&typeof e.attrs=="object"&&"class"in e.attrs&&delete e.attrs.class,Object.keys(e).forEach(r=>{e[r]=I(e[r])})),e)}const ye=pe,ve=$.configure({HTMLAttributes:{class:s.cls("text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer")}}),Ce=te.TaskList.configure({HTMLAttributes:{class:s.cls("not-prose")}}),we=ee.TaskItem.configure({HTMLAttributes:{class:s.cls("flex items-start my-4")},nested:!0}),Le=ge.configure({HTMLAttributes:{class:s.cls("mt-4 mb-6 border-t",s.defaultBorderMixin)}}),Ae=J.configure({bulletList:{HTMLAttributes:{class:s.cls("list-disc list-outside leading-3 -mt-2")}},orderedList:{HTMLAttributes:{class:s.cls("list-decimal list-outside leading-3 -mt-2")}},listItem:{HTMLAttributes:{class:s.cls("leading-normal -mb-2")}},blockquote:{HTMLAttributes:{class:s.cls("border-l-4 border-primary")}},codeBlock:{HTMLAttributes:{class:s.cls("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium",s.defaultBorderMixin)}},code:{HTMLAttributes:{class:s.cls("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),spellcheck:"false"}},horizontalRule:!1,dropcursor:{color:"#DBEAFE",width:4},gapcursor:!1});async function K(e,r,t,o,i,l){const{schema:a}=r.state;let c=e.getState(r.state);const m=document.createElement("div"),p=document.createElement("img");p.setAttribute("class","opacity-40 rounded-lg border border-stone-200"),p.src=t.target?.result,m.appendChild(p);const h=A.Decoration.widget(o,m);c=c?.add(r.state.doc,[h]),r.dispatch(r.state.tr.setMeta(e,{decorationSet:c}));const k=await i(l);console.log("uploaded image",k);const x=a.nodes.image.create({src:k}),L=r.state.tr.replaceWith(o,o,x);c=c?.remove([h]),L.setMeta(e,{decorationSet:c}),r.dispatch(L)}const Ee=e=>{const r=new ne.Plugin({state:{init:()=>A.DecorationSet.empty,apply:(t,o)=>{const i=t.getMeta(r);return i&&i.decorationSet?i.decorationSet:o.map(t.mapping,t.doc)}},props:{handleDOMEvents:{drop:(t,o)=>{if(console.log("drop event",o),!o.dataTransfer?.files||o.dataTransfer?.files.length===0)return!1;o.preventDefault();const l=Array.from(o.dataTransfer.files).filter(a=>/image/i.test(a.type));return l.length===0?!1:(l.forEach(a=>{const c=t.posAtCoords({left:o.clientX,top:o.clientY});if(!c)return;const m=new FileReader;m.onload=async p=>{await K(r,t,p,c.pos,e,a)},m.readAsDataURL(a)}),!0)}},handlePaste(t,o,i){const l=Array.from(o.clipboardData?.items||[]),a=t.state.selection.from;console.log("pos",a);let c=!1;return l.forEach(m=>{const p=m.getAsFile();if(console.log("image",p),p){c=!0;const h=new FileReader;h.onload=async k=>{await K(r,t,k,a,e,p)},h.readAsDataURL(p)}}),c},decorations(t){return r.getState(t)}},view(t){return{update(o,i){const l=r.getState(i),a=r.getState(o.state);l!==a&&o.updateState(o.state)}}}});return r},Te=e=>j.extend({addProseMirrorPlugins(){return[Ee(e)]}}).configure({allowBase64:!0,HTMLAttributes:{class:s.cls("rounded-lg border",s.defaultBorderMixin)}}),Se=w.Extension.create({name:"CustomKeymap",addCommands(){return{selectTextWithinNodeBoundaries:()=>({editor:e,commands:r})=>{const{state:t}=e,{tr:o}=t,i=o.selection.$from.start(),l=o.selection.$to.end();return r.setTextSelection({from:i,to:l})}}},addKeyboardShortcuts(){return{"Mod-a":({editor:e})=>{const{state:r}=e,{tr:t}=r,o=t.selection.from,i=t.selection.to,l=t.selection.$from.start(),a=t.selection.$to.end();return o>l||i<a?(e.chain().selectTextWithinNodeBoundaries().run(),!0):!1}}}});function Me(e){const r=e.getBoundingClientRect();return{top:r.top,left:r.left,width:r.width}}function N(e){return document.elementsFromPoint(e.x,e.y).find(r=>r.parentElement?.matches?.(".ProseMirror")||r.matches(["li","p:not(:first-child)","pre","blockquote","h1, h2, h3, h4, h5, h6"].join(", ")))}function O(e,r,t){const o=e.getBoundingClientRect();return r.posAtCoords({left:o.left+50+t.dragHandleWidth,top:o.top+1})?.inside}function Ie(e){function r(a,c){if(c.focus(),!a.dataTransfer)return;const m=N({x:a.clientX+50+e.dragHandleWidth,y:a.clientY});if(!(m instanceof Element))return;const p=O(m,c,e);if(p==null||p<0)return;c.dispatch(c.state.tr.setSelection(E.NodeSelection.create(c.state.doc,p)));const h=c.state.selection.content(),{dom:k,text:x}=A.__serializeForClipboard(c,h);a.dataTransfer.clearData(),a.dataTransfer.setData("text/html",k.innerHTML),a.dataTransfer.setData("text/plain",x),a.dataTransfer.effectAllowed="copyMove",a.dataTransfer.setDragImage(m,0,0),c.dragging={slice:h,move:a.ctrlKey}}function t(a,c){c.focus(),c.dom.classList.remove("dragging");const m=N({x:a.clientX+50+e.dragHandleWidth,y:a.clientY});if(!(m instanceof Element))return;const p=O(m,c,e);p&&c.dispatch(c.state.tr.setSelection(E.NodeSelection.create(c.state.doc,p)))}let o=null;function i(){o&&o.classList.add("hide")}function l(){o&&o.classList.remove("hide")}return new E.Plugin({view:a=>(o=document.createElement("div"),o.draggable=!0,o.dataset.dragHandle="",o.classList.add("drag-handle"),o.addEventListener("dragstart",c=>{r(c,a)}),o.addEventListener("click",c=>{t(c,a)}),i(),a?.dom?.parentElement?.appendChild(o),{destroy:()=>{o?.remove?.(),o=null}}),props:{handleDOMEvents:{mousemove:(a,c)=>{if(!a.editable)return;const m=N({x:c.clientX+50+e.dragHandleWidth,y:c.clientY});if(!(m instanceof Element)){i();return}const p=window.getComputedStyle(m),h=parseInt(p.lineHeight,10),k=parseInt(p.paddingTop,10),x=Me(m);x.top+=(h-24)/2,x.top+=k,m.matches("ul:not([data-type=taskList]) li, ol li")&&(x.left-=e.dragHandleWidth),x.width=e.dragHandleWidth,o&&(o.style.left=`${x.left-x.width}px`,o.style.top=`${x.top}px`,l())},keydown:()=>{i()},mousewheel:()=>{i()},dragstart:a=>{a.dom.classList.add("dragging")},drop:a=>{a.dom.classList.remove("dragging")},dragend:a=>{a.dom.classList.remove("dragging")}}}})}const Ne=w.Extension.create({name:"dragAndDrop",addProseMirrorPlugins(){return[Ie({dragHandleWidth:24})]}}),Pe=({handleImageUpload:e,initialContent:r,onJsonContentChange:t,onHtmlContentChange:o,onMarkdownContentChange:i})=>{const l={handleDOMEvents:{keydown:(d,f)=>!!(["ArrowUp","ArrowDown","Enter"].includes(f.key)&&document.querySelector("#slash-command"))}},a=me([{title:"Text",description:"Just start typing with plain text.",searchTerms:["p","paragraph"],icon:n.jsx(s.TextFieldsIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).toggleNode("paragraph","paragraph").run()}},{title:"To-do List",description:"Track tasks with a to-do list.",searchTerms:["todo","task","list","check","checkbox"],icon:n.jsx(s.CheckBoxIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).toggleTaskList().run()}},{title:"Heading 1",description:"Big section heading.",searchTerms:["title","big","large"],icon:n.jsx(s.LooksOneIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).setNode("heading",{level:1}).run()}},{title:"Heading 2",description:"Medium section heading.",searchTerms:["subtitle","medium"],icon:n.jsx(s.LooksTwoIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).setNode("heading",{level:2}).run()}},{title:"Heading 3",description:"Small section heading.",searchTerms:["subtitle","small"],icon:n.jsx(s.Looks3Icon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).setNode("heading",{level:3}).run()}},{title:"Bullet List",description:"Create a simple bullet list.",searchTerms:["unordered","point"],icon:n.jsx(s.FormatListBulletedIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).toggleBulletList().run()}},{title:"Numbered List",description:"Create a list with numbering.",searchTerms:["ordered"],icon:n.jsx(s.FormatListNumberedIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).toggleOrderedList().run()}},{title:"Quote",description:"Capture a quote.",searchTerms:["blockquote"],icon:n.jsx(s.FormatQuoteIcon,{size:18}),command:({editor:d,range:f})=>d.chain().focus().deleteRange(f).toggleNode("paragraph","paragraph").toggleBlockquote().run()},{title:"Code",description:"Capture a code snippet.",searchTerms:["codeblock"],icon:n.jsx(s.CodeIcon,{size:18}),command:({editor:d,range:f})=>d.chain().focus().deleteRange(f).toggleCodeBlock().run()},{title:"Image",description:"Upload an image from your computer.",searchTerms:["photo","picture","media"],icon:n.jsx(s.ImageIcon,{size:18}),command:({editor:d,range:f})=>{d.chain().focus().deleteRange(f).run();const v=document.createElement("input");v.type="file",v.accept="image/*",v.onchange=async()=>{if(v.files?.length){if(!v.files[0])return;d.view.state.selection.from}},v.click()}}]),c=de.configure({suggestion:{items:()=>a,render:ue}}),m=g.useMemo(()=>Te(e),[]),p=[W,Q,Z.Color,V.configure({multicolor:!0}),_.Markdown.configure({html:!1,transformCopiedText:!0}),Se,Ne,Ae,ye,ve,m,Ce,we,Le,c],[h,k]=g.useState(!1),[x,L]=g.useState(!1);s.useInjectStyles("Editor",He);const P=g.useRef(null),[qe,De]=g.useState(null),[B,ze]=g.useState(null),[H,Fe]=g.useState(null),Ue=d=>{P.current=d,i&&De(d.storage.markdown.getMarkdown()),t&&ze(I(d.getJSON())),o&&Fe(d.getHTML())};return M(qe,()=>{if(P.current){const d=P.current.storage.markdown.getMarkdown();i?.(Be(d))}},!1,500),M(B,()=>{B&&t?.(B)},!1,500),M(H,()=>{H&&o?.(H)},!1,500),r?n.jsx("div",{className:"relative w-full p-8",children:n.jsx(se,{children:n.jsx("div",{className:"relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",children:n.jsxs(b.EditorProvider,{content:r,extensions:p,editorProps:{...l,attributes:{class:"prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"}},onUpdate:({editor:d})=>{console.debug("Editor updated"),Ue(d)},children:[n.jsxs(ce,{className:s.cls("text-gray-900 dark:text-white z-50 h-auto max-h-[330px] w-72 overflow-y-auto rounded-md border bg-white dark:bg-gray-900 px-1 py-2 shadow transition-all",s.defaultBorderMixin),children:[n.jsx(le,{className:"px-2 text-gray-700 dark:text-slate-300",children:"No results"}),a.map(d=>n.jsxs(F,{value:d.title,onCommand:f=>d?.command?.(f),className:"flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-gray-700 aria-selected:bg-blue-50 aria-selected:dark:bg-gray-700",children:[n.jsx("div",{className:s.cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900",s.defaultBorderMixin),children:d.icon}),n.jsxs("div",{children:[n.jsx("p",{className:"font-medium",children:d.title}),n.jsx("p",{className:"text-xs text-gray-700 dark:text-slate-300",children:d.description})]})]},d.title))]}),n.jsxs(ae,{tippyOptions:{placement:"top"},className:s.cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow",s.defaultBorderMixin),children:[n.jsx(fe,{open:h,onOpenChange:k}),n.jsx(s.Separator,{orientation:"vertical"}),n.jsx(ke,{open:x,onOpenChange:L}),n.jsx(s.Separator,{orientation:"vertical"}),n.jsx(be,{})]})]})})})}):null};function Be(e){const r=/!\[.*?\]\(.*?\)/g;return e.replace(r,t=>`${t}
-`)}const He=`
-
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@tiptap/extension-underline"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("@tiptap/extension-bullet-list"), require("@tiptap/extension-highlight"), require("@tiptap/react"), require("@radix-ui/react-slot"), require("@firecms/ui"), require("@tiptap/starter-kit"), require("@tiptap/extension-horizontal-rule"), require("@tiptap/extension-link"), require("@tiptap/extension-image"), require("@tiptap/extension-placeholder"), require("@tiptap/extension-task-item"), require("@tiptap/extension-task-list"), require("@tiptap/core"), require("prosemirror-state"), require("prosemirror-view"), require("tiptap-markdown"), require("@tiptap/pm/view"), require("@tiptap/pm/state"), require("@tiptap/extension-document"), require("@tiptap/suggestion"), require("tippy.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@tiptap/extension-underline", "@tiptap/extension-text-style", "@tiptap/extension-color", "@tiptap/extension-bullet-list", "@tiptap/extension-highlight", "@tiptap/react", "@radix-ui/react-slot", "@firecms/ui", "@tiptap/starter-kit", "@tiptap/extension-horizontal-rule", "@tiptap/extension-link", "@tiptap/extension-image", "@tiptap/extension-placeholder", "@tiptap/extension-task-item", "@tiptap/extension-task-list", "@tiptap/core", "prosemirror-state", "prosemirror-view", "tiptap-markdown", "@tiptap/pm/view", "@tiptap/pm/state", "@tiptap/extension-document", "@tiptap/suggestion", "tippy.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.extensionUnderline, global.TextStyle, global.extensionColor, global.BulletList, global.Highlight, global.react, global.reactSlot, global.ui, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.prosemirrorState, global.prosemirrorView, global.tiptapMarkdown, global.view, global.state, global.Document, global.Suggestion, global.tippy));
+})(this, function(exports2, jsxRuntime, React, extensionUnderline, TextStyle, extensionColor, BulletList, Highlight, react, reactSlot, ui, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, prosemirrorState, prosemirrorView, tiptapMarkdown, view, state, Document, Suggestion, tippy) {
+  "use strict";
+  const EditorBubble = React.forwardRef(
+    ({ children, tippyOptions, ...rest }, ref) => {
+      const { editor } = react.useCurrentEditor();
+      const instanceRef = React.useRef(null);
+      React.useEffect(() => {
+        if (!instanceRef.current || !tippyOptions?.placement) return;
+        instanceRef.current.setProps({ placement: tippyOptions.placement });
+        instanceRef.current.popperInstance?.update();
+      }, [tippyOptions?.placement]);
+      const bubbleMenuProps = React.useMemo(() => {
+        const shouldShow = ({ editor: editor2, state: state2 }) => {
+          const { selection } = state2;
+          const { empty } = selection;
+          if (editor2.isActive("image") || empty || react.isNodeSelection(selection)) {
+            return false;
+          }
+          return true;
+        };
+        return {
+          shouldShow,
+          tippyOptions: {
+            onCreate: (val) => {
+              instanceRef.current = val;
+            },
+            moveTransition: "transform 0.15s ease-out",
+            ...tippyOptions
+          },
+          ...rest
+        };
+      }, [rest, tippyOptions]);
+      if (!editor) return null;
+      return (
+        //We need to add this because of https://github.com/ueberdosis/tiptap/issues/2658
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, ...bubbleMenuProps, children }) })
+      );
+    }
+  );
+  const EditorBubbleItem = React.forwardRef(({ children, asChild, onSelect, ...rest }, ref) => {
+    const { editor } = react.useCurrentEditor();
+    const Comp = asChild ? reactSlot.Slot : "div";
+    if (!editor) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...rest, onClick: () => onSelect?.(editor), children });
+  });
+  EditorBubbleItem.displayName = "EditorBubbleItem";
+  const items = [
+    {
+      name: "Text",
+      icon: ui.TextFieldsIcon,
+      command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").run(),
+      // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
+      isActive: (editor) => (editor?.isActive("paragraph") && !editor?.isActive("bulletList") && !editor?.isActive("orderedList")) ?? false
+    },
+    {
+      name: "Heading 1",
+      icon: ui.LooksOneIcon,
+      command: (editor) => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: (editor) => editor?.isActive("heading", { level: 1 }) ?? false
+    },
+    {
+      name: "Heading 2",
+      icon: ui.LooksTwoIcon,
+      command: (editor) => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: (editor) => editor?.isActive("heading", { level: 2 }) ?? false
+    },
+    {
+      name: "Heading 3",
+      icon: ui.Looks3Icon,
+      command: (editor) => editor?.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: (editor) => editor?.isActive("heading", { level: 3 }) ?? false
+    },
+    {
+      name: "To-do List",
+      icon: ui.CheckBoxIcon,
+      command: (editor) => editor?.chain().focus().toggleTaskList().run(),
+      isActive: (editor) => editor?.isActive("taskItem") ?? false
+    },
+    {
+      name: "Bullet List",
+      icon: ui.FormatListBulletedIcon,
+      command: (editor) => editor?.chain().focus().toggleBulletList().run(),
+      isActive: (editor) => editor?.isActive("bulletList") ?? false
+    },
+    {
+      name: "Numbered List",
+      icon: ui.FormatListNumberedIcon,
+      command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+      isActive: (editor) => editor?.isActive("orderedList") ?? false
+    },
+    {
+      name: "Quote",
+      icon: ui.FormatQuoteIcon,
+      command: (editor) => editor?.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(),
+      isActive: (editor) => editor?.isActive("blockquote") ?? false
+    },
+    {
+      name: "Code",
+      icon: ui.CodeIcon,
+      command: (editor) => editor?.chain().focus().toggleCodeBlock().run(),
+      isActive: (editor) => editor?.isActive("codeBlock") ?? false
+    }
+  ];
+  const NodeSelector = ({
+    open,
+    onOpenChange,
+    portalContainer
+  }) => {
+    const { editor } = react.useCurrentEditor();
+    if (!editor) return null;
+    const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
+      name: "Multiple"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Popover,
+      {
+        sideOffset: 5,
+        align: "start",
+        portalContainer,
+        className: "w-48 p-1",
+        trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Button,
+          {
+            variant: "text",
+            className: "gap-2 rounded-none",
+            color: "text",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandMoreIcon, { size: "small" })
+            ]
+          }
+        ),
+        modal: true,
+        open,
+        onOpenChange,
+        children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          EditorBubbleItem,
+          {
+            onSelect: (editor2) => {
+              item.command(editor2);
+              onOpenChange(false);
+            },
+            className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-gray-700 text-gray-900 dark:text-white",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(item.icon, { size: "smallest" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.name })
+              ] }),
+              activeItem.name === item.name && /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" })
+            ]
+          },
+          index
+        ))
+      }
+    );
+  };
+  function isValidUrl(url) {
+    try {
+      new URL(url);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  function getUrlFromString(str) {
+    if (isValidUrl(str)) return str;
+    try {
+      if (str.includes(".") && !str.includes(" ")) {
+        return new URL(`https://${str}`).toString();
+      }
+      return null;
+    } catch (e) {
+      return null;
+    }
+  }
+  const LinkSelector = ({
+    open,
+    onOpenChange
+  }) => {
+    const inputRef = React.useRef(null);
+    const { editor } = react.useCurrentEditor();
+    React.useEffect(() => {
+      inputRef.current && inputRef.current?.focus();
+    });
+    if (!editor) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Popover,
+      {
+        modal: true,
+        open,
+        onOpenChange,
+        trigger: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "text",
+            className: "gap-2 rounded-none",
+            color: "text",
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cls("underline decoration-stone-400 underline-offset-4", {
+              "text-blue-500": editor.isActive("link")
+            }), children: "Link" })
+          }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            onSubmit: (e) => {
+              const target = e.currentTarget;
+              e.preventDefault();
+              const input = target[0];
+              const url = getUrlFromString(input.value);
+              url && editor.chain().focus().setLink({ href: url }).run();
+            },
+            className: "flex p-1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  autoFocus: open,
+                  placeholder: "Paste a link",
+                  defaultValue: editor.getAttributes("link").href || "",
+                  className: ui.cls("text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", ui.focusedDisabled)
+                }
+              ),
+              editor.getAttributes("link").href ? /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  size: "small",
+                  variant: "text",
+                  type: "button",
+                  color: "text",
+                  className: "flex items-center",
+                  onClick: () => {
+                    editor.chain().focus().unsetLink().run();
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, { size: "small" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  size: "small",
+                  variant: "text",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "small" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  };
+  const TextButtons = () => {
+    const { editor } = react.useCurrentEditor();
+    if (!editor) return null;
+    const items2 = [
+      {
+        name: "bold",
+        isActive: (editor2) => editor2?.isActive("bold") ?? false,
+        command: (editor2) => editor2?.chain().focus().toggleBold().run(),
+        icon: ui.FormatBoldIcon
+      },
+      {
+        name: "italic",
+        isActive: (editor2) => editor2?.isActive("italic") ?? false,
+        command: (editor2) => editor2?.chain().focus().toggleItalic().run(),
+        icon: ui.FormatItalicIcon
+      },
+      {
+        name: "underline",
+        isActive: (editor2) => editor2?.isActive("underline") ?? false,
+        command: (editor2) => editor2?.chain().focus().toggleUnderline().run(),
+        icon: ui.FormatUnderlinedIcon
+      },
+      {
+        name: "strike",
+        isActive: (editor2) => editor2?.isActive("strike") ?? false,
+        command: (editor2) => editor2?.chain().focus().toggleStrike().run(),
+        icon: ui.FormatStrikethroughIcon
+      },
+      {
+        name: "code",
+        isActive: (editor2) => editor2?.isActive("code") ?? false,
+        command: (editor2) => editor2?.chain().focus().toggleCode().run(),
+        icon: ui.CodeIcon
+      }
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      EditorBubbleItem,
+      {
+        onSelect: (editor2) => {
+          item.command(editor2);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            color: "text",
+            className: "gap-2 rounded-none h-full",
+            variant: "text",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              item.icon,
+              {
+                className: ui.cls({
+                  "text-inherit": !item.isActive(editor),
+                  "text-blue-500": item.isActive(editor)
+                })
+              }
+            )
+          }
+        )
+      },
+      index
+    )) });
+  };
+  function removeClassesFromJson(jsonObj) {
+    if (Array.isArray(jsonObj)) {
+      return jsonObj.map((item) => removeClassesFromJson(item));
+    } else if (typeof jsonObj === "object" && jsonObj !== null) {
+      if (jsonObj.attrs && typeof jsonObj.attrs === "object" && "class" in jsonObj.attrs) {
+        delete jsonObj.attrs.class;
+      }
+      Object.keys(jsonObj).forEach((key) => {
+        jsonObj[key] = removeClassesFromJson(jsonObj[key]);
+      });
+    }
+    return jsonObj;
+  }
+  const loadingDecorationKey = new prosemirrorState.PluginKey("loadingDecoration");
+  const TextLoadingDecorationExtension = core.Extension.create({
+    name: "loadingDecoration",
+    addOptions() {
+      return {
+        pluginKey: loadingDecorationKey
+      };
+    },
+    addProseMirrorPlugins() {
+      const pluginKey = this.options.pluginKey;
+      return [
+        new prosemirrorState.Plugin({
+          key: pluginKey,
+          state: {
+            init() {
+              return {
+                decorationSet: prosemirrorView.DecorationSet.empty,
+                hasDecoration: false
+              };
+            },
+            apply(tr, oldState) {
+              const action = tr.getMeta(pluginKey);
+              if (action?.type === "loadingDecoration") {
+                const { pos, remove, loadingHtml } = action;
+                if (remove) {
+                  return {
+                    decorationSet: prosemirrorView.DecorationSet.empty,
+                    hasDecoration: false
+                  };
+                }
+                const decoration = prosemirrorView.Decoration.widget(pos, () => {
+                  const container = document.createElement("span");
+                  container.className = "loading-decoration";
+                  if (loadingHtml) {
+                    container.innerHTML = loadingHtml;
+                  } else {
+                    const span = document.createElement("span");
+                    span.innerText = "loading...";
+                    container.appendChild(span);
+                  }
+                  return container;
+                });
+                return {
+                  decorationSet: prosemirrorView.DecorationSet.empty.add(tr.doc, [decoration]),
+                  hasDecoration: true
+                };
+              }
+              return {
+                decorationSet: oldState.decorationSet.map(tr.mapping, tr.doc),
+                hasDecoration: oldState.hasDecoration
+              };
+            }
+          },
+          props: {
+            decorations(state2) {
+              return this.getState(state2)?.decorationSet || prosemirrorView.DecorationSet.empty;
+            }
+          }
+        })
+      ];
+    },
+    addCommands() {
+      return {
+        toggleLoadingDecoration: (loadingHtml) => ({ state: state2, dispatch }) => {
+          const { selection } = state2;
+          const pos = selection.from;
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos,
+            type: "loadingDecoration",
+            remove: false,
+            loadingHtml
+          });
+          dispatch(tr);
+          return true;
+        },
+        removeLoadingDecoration: () => ({ state: state2, dispatch }) => {
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos: 0,
+            // We can pass any position as it will remove the entire decoration set
+            type: "loadingDecoration",
+            remove: true
+          });
+          dispatch(tr);
+          return true;
+        }
+      };
+    }
+  });
+  const PlaceholderExtension = Placeholder.configure({
+    placeholder: ({
+      node,
+      editor
+    }) => {
+      editor.state.selection;
+      function hasLoadingDecoration(editor2) {
+        const pluginState = loadingDecorationKey.get(editor2.state);
+        return pluginState?.getState(editor2.state)?.hasDecoration ?? false;
+      }
+      const hasDecoration = hasLoadingDecoration(editor);
+      if (hasDecoration) {
+        return "";
+      }
+      if (node.type.name === "heading") {
+        return `Heading ${node.attrs.level}`;
+      }
+      return "Press '/' for commands";
+    },
+    includeChildren: true
+  });
+  const Horizontal = HorizontalRule.extend({
+    addInputRules() {
+      return [
+        new core.InputRule({
+          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+          handler: ({
+            state: state2,
+            range
+          }) => {
+            const attributes = {};
+            const { tr } = state2;
+            const start = range.from;
+            const end = range.to;
+            tr.insert(start - 1, this.type.create(attributes)).delete(
+              tr.mapping.map(start),
+              tr.mapping.map(end)
+            );
+          }
+        })
+      ];
+    }
+  });
+  const placeholder = PlaceholderExtension;
+  const tiptapLink = TiptapLink.configure({
+    HTMLAttributes: {
+      class: ui.cls(
+        "text-gray-600 dark:text-slate-300 underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"
+      )
+    }
+  });
+  const taskList = extensionTaskList.TaskList.configure({
+    HTMLAttributes: {
+      class: ui.cls("not-prose")
+    }
+  });
+  const taskItem = extensionTaskItem.TaskItem.configure({
+    HTMLAttributes: {
+      class: ui.cls("flex items-start my-4")
+    },
+    nested: true
+  });
+  const markdownExtension = tiptapMarkdown.Markdown.configure({
+    html: true
+  });
+  const horizontalRule = Horizontal.configure({
+    HTMLAttributes: {
+      class: ui.cls("mt-4 mb-6 border-t", ui.defaultBorderMixin)
+    }
+  });
+  const starterKit = StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: ui.cls("list-disc list-outside leading-3 -mt-2")
+      }
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: ui.cls("list-decimal list-outside leading-3 -mt-2")
+      }
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: ui.cls("leading-normal -mb-2")
+      }
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: ui.cls("border-l-4 border-primary")
+      }
+    },
+    codeBlock: {
+      HTMLAttributes: {
+        class: ui.cls("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium", ui.defaultBorderMixin)
+      }
+    },
+    code: {
+      HTMLAttributes: {
+        class: ui.cls("rounded-md bg-slate-50 dark:bg-gray-700 px-1.5 py-1 font-mono font-medium"),
+        spellcheck: "false"
+      }
+    },
+    document: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "#DBEAFE",
+      width: 4
+    },
+    gapcursor: false
+  });
+  async function onFileRead(view$1, readerEvent, pos, upload, image) {
+    const { schema } = view$1.state;
+    const plugin = view$1.state.plugins.find((p) => p.key === ImagePluginKey.key);
+    if (!plugin) {
+      console.error("Image plugin not found");
+      return;
+    }
+    let decorationSet = plugin.getState(view$1.state);
+    const placeholder2 = document.createElement("div");
+    const imageElement = document.createElement("img");
+    imageElement.setAttribute("class", "opacity-40 rounded-lg border " + ui.defaultBorderMixin);
+    imageElement.src = readerEvent.target?.result;
+    placeholder2.appendChild(imageElement);
+    const deco = view.Decoration.widget(pos, placeholder2);
+    decorationSet = decorationSet?.add(view$1.state.doc, [deco]);
+    view$1.dispatch(view$1.state.tr.setMeta(plugin, { decorationSet }));
+    const src = await upload(image);
+    console.debug("Uploaded image", src);
+    const imageNode = schema.nodes.image.create({ src });
+    const tr = view$1.state.tr.replaceWith(pos, pos, imageNode);
+    decorationSet = decorationSet?.remove([deco]);
+    tr.setMeta(plugin, { decorationSet });
+    view$1.dispatch(tr);
+  }
+  const ImagePluginKey = new state.PluginKey("imagePlugin");
+  const createDropImagePlugin = (upload) => {
+    const plugin = new state.Plugin({
+      key: ImagePluginKey,
+      state: {
+        // Initialize the plugin state with an empty DecorationSet
+        init: () => view.DecorationSet.empty,
+        // Apply transactions to update the state
+        apply: (tr, old) => {
+          const meta = tr.getMeta(plugin);
+          if (meta && meta.decorationSet) {
+            return meta.decorationSet;
+          }
+          return old.map(tr.mapping, tr.doc);
+        }
+      },
+      props: {
+        handleDOMEvents: {
+          drop: (view2, event) => {
+            if (!event.dataTransfer?.files || event.dataTransfer?.files.length === 0) {
+              return false;
+            }
+            event.preventDefault();
+            const files = Array.from(event.dataTransfer.files);
+            const images = files.filter((file) => /image/i.test(file.type));
+            if (images.length === 0) {
+              console.log("No images found in dropped files");
+              return false;
+            }
+            images.forEach((image) => {
+              const position = view2.posAtCoords({
+                left: event.clientX,
+                top: event.clientY
+              });
+              if (!position) return;
+              const reader = new FileReader();
+              reader.onload = async (readerEvent) => {
+                await onFileRead(view2, readerEvent, position.pos, upload, image);
+              };
+              reader.readAsDataURL(image);
+            });
+            return true;
+          }
+        },
+        handlePaste(view2, event, slice) {
+          const items2 = Array.from(event.clipboardData?.items || []);
+          const pos = view2.state.selection.from;
+          let anyImageFound = false;
+          items2.forEach((item) => {
+            const image = item.getAsFile();
+            if (image) {
+              anyImageFound = true;
+              const reader = new FileReader();
+              reader.onload = async (readerEvent) => {
+                await onFileRead(view2, readerEvent, pos, upload, image);
+              };
+              reader.readAsDataURL(image);
+            }
+          });
+          return anyImageFound;
+        },
+        decorations(state2) {
+          return plugin.getState(state2);
+        }
+      },
+      view(editorView) {
+        return {
+          update(view2, prevState) {
+            const prevDecos = plugin.getState(prevState);
+            const newDecos = plugin.getState(view2.state);
+            if (prevDecos !== newDecos) {
+              view2.updateState(view2.state);
+            }
+          }
+        };
+      }
+    });
+    return plugin;
+  };
+  const createImageExtension = (dropImagePlugin) => {
+    return TiptapImage.extend({
+      addProseMirrorPlugins() {
+        return [dropImagePlugin];
+      }
+    }).configure({
+      allowBase64: true,
+      HTMLAttributes: {
+        class: ui.cls("rounded-lg border", ui.defaultBorderMixin)
+      }
+    });
+  };
+  const CustomKeymap = core.Extension.create({
+    name: "CustomKeymap",
+    addCommands() {
+      return {
+        selectTextWithinNodeBoundaries: () => ({ editor, commands }) => {
+          const { state: state2 } = editor;
+          const { tr } = state2;
+          const startNodePos = tr.selection.$from.start();
+          const endNodePos = tr.selection.$to.end();
+          return commands.setTextSelection({
+            from: startNodePos,
+            to: endNodePos
+          });
+        }
+      };
+    },
+    addKeyboardShortcuts() {
+      return {
+        "Mod-a": ({ editor }) => {
+          const { state: state2 } = editor;
+          const { tr } = state2;
+          const startSelectionPos = tr.selection.from;
+          const endSelectionPos = tr.selection.to;
+          const startNodePos = tr.selection.$from.start();
+          const endNodePos = tr.selection.$to.end();
+          const isCurrentTextSelectionNotExtendedToNodeBoundaries = startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+          if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+            editor.chain().selectTextWithinNodeBoundaries().run();
+            return true;
+          }
+          return false;
+        }
+      };
+    }
+  });
+  function absoluteRect(element) {
+    const data = element.getBoundingClientRect();
+    let ancestor = element.parentElement;
+    while (ancestor && window.getComputedStyle(ancestor).position === "static") {
+      ancestor = ancestor.parentElement;
+    }
+    const ancestorRect = ancestor?.getBoundingClientRect();
+    return {
+      top: data.top - (ancestorRect?.top ?? 0),
+      left: data.left - (ancestorRect?.left ?? 0),
+      width: data.width
+    };
+  }
+  function nodeDOMAtCoords(coords) {
+    return document.elementsFromPoint(coords.x, coords.y).find(
+      (elem) => elem.parentElement?.matches?.(".ProseMirror") || elem.matches(
+        ["li", "p:not(:first-child)", "pre", "blockquote", "h1, h2, h3, h4, h5, h6"].join(", ")
+      )
+    );
+  }
+  function nodePosAtDOM(node, view2, options) {
+    const boundingRect = node.getBoundingClientRect();
+    return view2.posAtCoords({
+      left: boundingRect.left + 50 + options.dragHandleWidth,
+      top: boundingRect.top + 1
+    })?.inside;
+  }
+  function DragHandle(options) {
+    function handleDragStart(event, view$1) {
+      view$1.focus();
+      if (!event.dataTransfer) return;
+      const node = nodeDOMAtCoords({
+        x: event.clientX + 50 + options.dragHandleWidth,
+        y: event.clientY
+      });
+      if (!(node instanceof Element)) return;
+      const nodePos = nodePosAtDOM(node, view$1, options);
+      if (nodePos == null || nodePos < 0) return;
+      view$1.dispatch(view$1.state.tr.setSelection(state.NodeSelection.create(view$1.state.doc, nodePos)));
+      const slice = view$1.state.selection.content();
+      const {
+        dom,
+        text
+      } = view.__serializeForClipboard(view$1, slice);
+      event.dataTransfer.clearData();
+      event.dataTransfer.setData("text/html", dom.innerHTML);
+      event.dataTransfer.setData("text/plain", text);
+      event.dataTransfer.effectAllowed = "copyMove";
+      event.dataTransfer.setDragImage(node, 0, 0);
+      view$1.dragging = {
+        slice,
+        move: event.ctrlKey
+      };
+    }
+    function handleClick(event, view2) {
+      view2.focus();
+      view2.dom.classList.remove("dragging");
+      const node = nodeDOMAtCoords({
+        x: event.clientX + 50 + options.dragHandleWidth,
+        y: event.clientY
+      });
+      if (!(node instanceof Element)) return;
+      const nodePos = nodePosAtDOM(node, view2, options);
+      if (!nodePos) return;
+      view2.dispatch(view2.state.tr.setSelection(state.NodeSelection.create(view2.state.doc, nodePos)));
+    }
+    let dragHandleElement = null;
+    function hideDragHandle() {
+      if (dragHandleElement) {
+        dragHandleElement.classList.add("hide");
+      }
+    }
+    function showDragHandle() {
+      if (dragHandleElement) {
+        dragHandleElement.classList.remove("hide");
+      }
+    }
+    return new state.Plugin({
+      view: (view2) => {
+        dragHandleElement = document.createElement("div");
+        dragHandleElement.draggable = true;
+        dragHandleElement.dataset.dragHandle = "";
+        dragHandleElement.classList.add("drag-handle");
+        dragHandleElement.addEventListener("dragstart", (e) => {
+          handleDragStart(e, view2);
+        });
+        dragHandleElement.addEventListener("click", (e) => {
+          handleClick(e, view2);
+        });
+        hideDragHandle();
+        view2?.dom?.parentElement?.appendChild(dragHandleElement);
+        return {
+          destroy: () => {
+          }
+        };
+      },
+      props: {
+        handleDOMEvents: {
+          mousemove: (view2, event) => {
+            if (!view2.editable) {
+              return;
+            }
+            const node = nodeDOMAtCoords({
+              x: event.clientX + 50 + options.dragHandleWidth,
+              y: event.clientY
+            });
+            if (!(node instanceof Element)) {
+              hideDragHandle();
+              return;
+            }
+            const compStyle = window.getComputedStyle(node);
+            const lineHeight = parseInt(compStyle.lineHeight, 10);
+            const paddingTop = parseInt(compStyle.paddingTop, 10);
+            const rect = absoluteRect(node);
+            rect.top += (lineHeight - 24) / 2;
+            rect.top += paddingTop;
+            if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+              rect.left -= options.dragHandleWidth;
+            }
+            rect.width = options.dragHandleWidth;
+            if (!dragHandleElement) return;
+            dragHandleElement.style.left = `${rect.left - rect.width}px`;
+            dragHandleElement.style.top = `${rect.top}px`;
+            showDragHandle();
+          },
+          keydown: () => {
+            hideDragHandle();
+          },
+          mousewheel: () => {
+            hideDragHandle();
+          },
+          // dragging class is used for CSS
+          dragstart: (view2) => {
+            view2.dom.classList.add("dragging");
+          },
+          drop: (view2) => {
+            view2.dom.classList.remove("dragging");
+          },
+          dragend: (view2) => {
+            view2.dom.classList.remove("dragging");
+          }
+        }
+      }
+    });
+  }
+  const DragAndDrop = core.Extension.create({
+    name: "dragAndDrop",
+    addProseMirrorPlugins() {
+      return [
+        DragHandle({
+          dragHandleWidth: 24
+        })
+      ];
+    }
+  });
+  const CommandPluginKey = new state.PluginKey("slash-command");
+  const SlashCommand = react.Node.create({
+    name: "command",
+    addOptions() {
+      return {
+        HTMLAttributes: {},
+        renderText({
+          options,
+          node
+        }) {
+          return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+        },
+        deleteTriggerWithBackspace: false,
+        renderHTML({
+          options,
+          node
+        }) {
+          return [
+            "span",
+            react.mergeAttributes(this.HTMLAttributes, options.HTMLAttributes),
+            `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`
+          ];
+        },
+        suggestion: {
+          char: "/",
+          pluginKey: CommandPluginKey,
+          command: ({
+            editor,
+            range,
+            props
+          }) => {
+            const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+            const overrideSpace = nodeAfter?.text?.startsWith(" ");
+            if (overrideSpace) {
+              range.to += 1;
+            }
+            editor.chain().focus().insertContentAt(range, [
+              {
+                type: this.name,
+                attrs: props
+              },
+              {
+                type: "text",
+                text: " "
+              }
+            ]).run();
+            window.getSelection()?.collapseToEnd();
+          },
+          allow: ({
+            state: state2,
+            range
+          }) => {
+            const $from = state2.doc.resolve(range.from);
+            const type = state2.schema.nodes[this.name];
+            const allow = !!$from.parent.type.contentMatch.matchType(type);
+            return allow;
+          }
+        }
+      };
+    },
+    group: "inline",
+    inline: true,
+    selectable: false,
+    atom: true,
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-id"),
+          renderHTML: (attributes) => {
+            if (!attributes.id) {
+              return {};
+            }
+            return {
+              "data-id": attributes.id
+            };
+          }
+        },
+        label: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label) {
+              return {};
+            }
+            return {
+              "data-label": attributes.label
+            };
+          }
+        }
+      };
+    },
+    parseHTML() {
+      return [
+        {
+          tag: `span[data-type="${this.name}"]`
+        }
+      ];
+    },
+    renderHTML({
+      node,
+      HTMLAttributes
+    }) {
+      if (this.options.renderLabel !== void 0) {
+        console.warn("renderLabel is deprecated use renderText and renderHTML instead");
+        return [
+          "span",
+          react.mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+          this.options.renderLabel({
+            options: this.options,
+            node
+          })
+        ];
+      }
+      const mergedOptions = { ...this.options };
+      mergedOptions.HTMLAttributes = react.mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes);
+      const html = this.options.renderHTML({
+        options: mergedOptions,
+        node
+      });
+      if (typeof html === "string") {
+        return [
+          "span",
+          react.mergeAttributes({ "data-type": this.name }, this.options.HTMLAttributes, HTMLAttributes),
+          html
+        ];
+      }
+      return html;
+    },
+    renderText({ node }) {
+      return this.options.renderText({
+        options: this.options,
+        node
+      });
+    },
+    addKeyboardShortcuts() {
+      return {
+        Backspace: () => this.editor.commands.command(({
+          tr,
+          state: state2
+        }) => {
+          let isCommand = false;
+          const { selection } = state2;
+          const {
+            empty,
+            anchor
+          } = selection;
+          if (!empty) {
+            return false;
+          }
+          state2.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+            if (node.type.name === this.name) {
+              isCommand = true;
+              tr.insertText(
+                this.options.deleteTriggerWithBackspace ? "" : this.options.suggestion.char || "",
+                pos,
+                pos + node.nodeSize
+              );
+              return false;
+            }
+            return true;
+          });
+          return isCommand;
+        })
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        Suggestion({
+          editor: this.editor,
+          ...this.options.suggestion
+        })
+      ];
+    }
+  });
+  const suggestion = (ref, {
+    upload,
+    onDisabledAutocompleteClick,
+    aiController
+  }) => ({
+    items: ({ query }) => {
+      const availableSuggestionItems = [...suggestionItems];
+      if (!onDisabledAutocompleteClick && aiController) {
+        availableSuggestionItems.push(autocompleteSuggestionItem);
+      }
+      if (onDisabledAutocompleteClick) {
+        availableSuggestionItems.push({
+          title: "Autocomplete",
+          description: "Add text based on the context.",
+          searchTerms: ["ai"],
+          icon: /* @__PURE__ */ jsxRuntime.jsx(ui.AutoAwesomeIcon, { size: 18 }),
+          command: onDisabledAutocompleteClick
+        });
+      }
+      return availableSuggestionItems.filter((item) => {
+        const inTitle = item.title.toLowerCase().startsWith(query.toLowerCase());
+        if (inTitle) return inTitle;
+        const inSearchTerms = item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
+        return inSearchTerms;
+      });
+    },
+    render: () => {
+      let component;
+      let popup;
+      return {
+        onStart: (props) => {
+          component = new react.ReactRenderer(CommandList, {
+            props: {
+              ...props,
+              upload,
+              aiController
+            },
+            editor: props.editor
+          });
+          if (!props.clientRect) {
+            return;
+          }
+          popup = tippy("body", {
+            getReferenceClientRect: props.clientRect,
+            appendTo: ref?.current,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start"
+          });
+        },
+        onUpdate(props) {
+          component.updateProps(props);
+          if (!props.clientRect) {
+            return;
+          }
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect
+          });
+        },
+        onKeyDown(props) {
+          if (props.event.key === "Escape") {
+            popup[0].hide();
+            props.event.preventDefault();
+            return true;
+          }
+          return component.ref?.onKeyDown(props);
+        },
+        onExit() {
+          if (popup && popup[0])
+            popup[0].destroy();
+          component?.destroy();
+        }
+      };
+    }
+  });
+  const CommandList = React.forwardRef((props, ref) => {
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const { editor } = react.useCurrentEditor();
+    const selectItem = (item) => {
+      if (!editor) return;
+      item?.command?.({
+        editor,
+        range: props.range,
+        upload: props.upload,
+        aiController: props.aiController
+      });
+    };
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    };
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % props.items.length);
+    };
+    const enterHandler = () => {
+      const item = props.items[selectedIndex];
+      selectItem(item);
+    };
+    React.useEffect(() => setSelectedIndex(0), [props.items]);
+    React.useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === "ArrowUp") {
+          upHandler();
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          downHandler();
+          return true;
+        }
+        if (event.key === "Enter") {
+          enterHandler();
+          return true;
+        }
+        return false;
+      }
+    }));
+    const itemRefs = React.useRef([]);
+    React.useEffect(() => {
+      if (itemRefs.current[selectedIndex]) {
+        itemRefs.current[selectedIndex].scrollIntoView({
+          block: "nearest"
+        });
+      }
+    }, [selectedIndex]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.cls("text-gray-900 dark:text-white z-50 max-h-[280px] h-auto w-72 overflow-y-auto rounded-md border bg-white dark:bg-gray-900 px-1 py-2 shadow transition-all", ui.defaultBorderMixin),
+        children: props.items.length ? props.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            value: item.title,
+            ref: (el) => {
+              if (!el) return;
+              return itemRefs.current[index] = el;
+            },
+            onClick: () => selectItem(item),
+            tabIndex: index === selectedIndex ? 0 : -1,
+            "aria-selected": index === selectedIndex,
+            className: ui.cls(
+              "flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-gray-700 aria-selected:bg-blue-50 aria-selected:dark:bg-gray-700",
+              index === selectedIndex ? "bg-blue-100 dark:bg-slate-950" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: ui.cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900", ui.defaultBorderMixin),
+                  children: item.icon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-700 dark:text-slate-300", children: item.description })
+              ] })
+            ]
+          },
+          item.title
+        )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", children: "No result" })
+      }
+    );
+  });
+  const autocompleteSuggestionItem = {
+    title: "Autocomplete",
+    description: "Add text based on the context.",
+    searchTerms: ["ai"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.AutoAwesomeIcon, { size: 18 }),
+    command: async ({
+      editor,
+      range,
+      aiController
+    }) => {
+      if (!aiController)
+        throw Error("No AiController");
+      editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      const { state: state2 } = editor;
+      const {
+        from,
+        to
+      } = state2.selection;
+      const textBeforeCursor = state2.doc.textBetween(0, from, "\n");
+      const textAfterCursor = state2.doc.textBetween(to, state2.doc.content.size, "\n");
+      let buffer = "";
+      const result = await aiController.autocomplete(textBeforeCursor, textAfterCursor, (delta) => {
+        buffer += delta;
+        if (delta.length !== 0) {
+          editor.chain().focus().toggleLoadingDecoration(buffer).run();
+        }
+      });
+      editor.chain().focus().insertContent(result, {
+        applyInputRules: false,
+        applyPasteRules: false,
+        parseOptions: {
+          preserveWhitespace: false
+        }
+      }).run();
+    }
+  };
+  const suggestionItems = [
+    {
+      title: "Text",
+      description: "Just start typing with plain text.",
+      searchTerms: ["p", "paragraph"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.TextFieldsIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+      }
+    },
+    {
+      title: "To-do List",
+      description: "Track tasks with a to-do list.",
+      searchTerms: ["todo", "task", "list", "check", "checkbox"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CheckBoxIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      }
+    },
+    {
+      title: "Heading 1",
+      description: "Big section heading.",
+      searchTerms: ["title", "big", "large"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksOneIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      }
+    },
+    {
+      title: "Heading 2",
+      description: "Medium section heading.",
+      searchTerms: ["subtitle", "medium"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.LooksTwoIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      }
+    },
+    {
+      title: "Heading 3",
+      description: "Small section heading.",
+      searchTerms: ["subtitle", "small"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.Looks3Icon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      }
+    },
+    {
+      title: "Bullet List",
+      description: "Create a simple bullet list.",
+      searchTerms: ["unordered", "point"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListBulletedIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      }
+    },
+    {
+      title: "Numbered List",
+      description: "Create a list with numbering.",
+      searchTerms: ["ordered"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatListNumberedIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => {
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      }
+    },
+    {
+      title: "Quote",
+      description: "Capture a quote.",
+      searchTerms: ["blockquote"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FormatQuoteIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
+    },
+    {
+      title: "Code",
+      description: "Capture a code snippet.",
+      searchTerms: ["codeblock"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: 18 }),
+      command: ({
+        editor,
+        range
+      }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+    },
+    {
+      title: "Image",
+      description: "Upload an image from your computer.",
+      searchTerms: ["photo", "picture", "media", "upload", "file"],
+      icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ImageIcon, { size: 18 }),
+      command: ({
+        editor,
+        range,
+        upload
+      }) => {
+        editor.chain().focus().deleteRange(range).run();
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = async () => {
+          if (input.files?.length) {
+            const file = input.files[0];
+            if (!file) return;
+            const pos = editor.view.state.selection.from;
+            const fileList = input.files;
+            const files = Array.from(fileList);
+            const images = files.filter((file2) => /image/i.test(file2.type));
+            if (images.length === 0) {
+              console.log("No images found in uploaded files");
+              return false;
+            }
+            const view2 = editor.view;
+            images.forEach((image) => {
+              const reader = new FileReader();
+              reader.onload = async (readerEvent) => {
+                await onFileRead(view2, readerEvent, pos, upload, image);
+              };
+              reader.readAsDataURL(image);
+            });
+          }
+          return true;
+        };
+        input.click();
+      }
+    }
+  ];
+  function buildDecorationSet(highlight, doc) {
+    const decorations = [];
+    if (highlight) {
+      decorations.push(
+        view.Decoration.inline(highlight.from, highlight.to, {
+          class: "dark:bg-slate-700 bg-slate-300"
+        })
+      );
+    }
+    const decorationSet = view.DecorationSet.create(doc, decorations);
+    return decorationSet;
+  }
+  const HighlightDecorationExtension = (initialHighlight) => core.Extension.create({
+    name: "highlightDecoration",
+    addOptions() {
+      return {
+        pluginKey: new state.PluginKey("highlightDecoration"),
+        highlight: initialHighlight
+      };
+    },
+    addProseMirrorPlugins() {
+      const pluginKey = this.options.pluginKey;
+      return [
+        new state.Plugin({
+          key: pluginKey,
+          state: {
+            init: (_, { doc }) => {
+              const highlight = this.options.highlight;
+              const decorationSet = highlight && doc ? buildDecorationSet(highlight, doc) : view.DecorationSet.empty;
+              return {
+                decorationSet,
+                highlight
+              };
+            },
+            apply(transaction, oldState) {
+              const action = transaction.getMeta(pluginKey);
+              const highlight = action?.range;
+              if (action?.type === "highlightDecoration") {
+                const doc = transaction.doc;
+                const { remove } = action;
+                if (remove) {
+                  return {
+                    decorationSet: view.DecorationSet.empty
+                  };
+                }
+                const decorationSet = buildDecorationSet(highlight, doc);
+                return {
+                  decorationSet,
+                  highlight
+                };
+              } else {
+                return oldState;
+              }
+            }
+          },
+          props: {
+            decorations(state2) {
+              const autocompleteState = this.getState(state2);
+              if (autocompleteState?.decorationSet) {
+                return autocompleteState.decorationSet;
+              } else {
+                return view.DecorationSet.empty;
+              }
+            }
+          }
+        })
+      ];
+    },
+    addCommands() {
+      return {
+        toggleAutocompleteHighlight: (range) => ({
+          state: state2,
+          dispatch
+        }) => {
+          const { selection } = state2;
+          const pos = selection.from;
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos,
+            type: "highlightDecoration",
+            remove: false,
+            range
+          });
+          dispatch(tr);
+          return true;
+        },
+        removeAutocompleteHighlight: () => ({
+          state: state2,
+          dispatch
+        }) => {
+          if (!dispatch) return false;
+          const pluginKey = this.options.pluginKey;
+          const tr = state2.tr.setMeta(pluginKey, {
+            pos: 0,
+            // We can pass any position as it will remove the entire decoration set
+            type: "highlightDecoration",
+            remove: true
+          });
+          dispatch(tr);
+          return true;
+        }
+      };
+    }
+  });
+  const CustomDocument = Document.extend({
+    // content: 'heading block*',
+  });
+  const proseClasses = {
+    "sm": "prose-sm",
+    "base": "prose-base",
+    "lg": "prose-lg"
+  };
+  const FireCMSEditor = ({
+    content,
+    onJsonContentChange,
+    onHtmlContentChange,
+    onMarkdownContentChange,
+    version,
+    textSize = "base",
+    highlight,
+    handleImageUpload,
+    aiController,
+    onDisabledAutocompleteClick
+  }) => {
+    const ref = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const imagePlugin = createDropImagePlugin(handleImageUpload);
+    const imageExtension = React.useMemo(() => createImageExtension(imagePlugin), []);
+    const [openNode, setOpenNode] = React.useState(false);
+    const [openLink, setOpenLink] = React.useState(false);
+    ui.useInjectStyles("Editor", cssStyles);
+    const deferredHighlight = React.useDeferredValue(highlight);
+    React.useEffect(() => {
+      if (version === void 0) return;
+      if (version > -1 && editorRef.current) {
+        editorRef.current?.commands.setContent(content ?? "");
+      }
+    }, [version]);
+    React.useEffect(() => {
+      if (version === void 0) return;
+      if (editorRef.current && version > 0) {
+        const chain = editorRef.current.chain();
+        if (deferredHighlight) {
+          chain.focus().toggleAutocompleteHighlight(deferredHighlight).run();
+        } else {
+          chain.focus().removeAutocompleteHighlight().run();
+        }
+      }
+    }, [deferredHighlight?.from, deferredHighlight?.to]);
+    const onEditorUpdate = (editor) => {
+      editorRef.current = editor;
+      if (onMarkdownContentChange) {
+        const markdown = editorRef.current.storage.markdown.getMarkdown();
+        onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
+      }
+      if (onJsonContentChange) {
+        const jsonContent = removeClassesFromJson(editor.getJSON());
+        onJsonContentChange(jsonContent);
+      }
+      if (onHtmlContentChange) {
+        onHtmlContentChange?.(editor.getHTML());
+      }
+    };
+    const proseClass = proseClasses[textSize];
+    const extensions = React.useMemo(() => [
+      starterKit,
+      CustomDocument,
+      HighlightDecorationExtension(highlight),
+      TextLoadingDecorationExtension,
+      extensionUnderline.Underline,
+      TextStyle,
+      extensionColor.Color,
+      BulletList,
+      Highlight.configure({
+        multicolor: true
+      }),
+      CustomKeymap,
+      DragAndDrop,
+      placeholder,
+      tiptapLink,
+      imageExtension,
+      taskList,
+      taskItem,
+      markdownExtension,
+      horizontalRule,
+      SlashCommand.configure({
+        HTMLAttributes: {
+          class: "mention"
+        },
+        suggestion: suggestion(ref, {
+          upload: handleImageUpload,
+          aiController,
+          onDisabledAutocompleteClick
+        })
+      })
+    ], []);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: "relative min-h-[300px] w-full",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.EditorProvider,
+          {
+            content: content ?? "",
+            extensions,
+            editorProps: {
+              attributes: {
+                class: ui.cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
+              }
+            },
+            onCreate: ({ editor }) => {
+              editorRef.current = editor;
+            },
+            onUpdate: ({ editor }) => {
+              onEditorUpdate(editor);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              EditorBubble,
+              {
+                tippyOptions: {
+                  placement: "top"
+                },
+                className: ui.cls("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow", ui.defaultBorderMixin),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(NodeSelector, { portalContainer: ref.current, open: openNode, onOpenChange: setOpenNode }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(LinkSelector, { open: openLink, onOpenChange: setOpenLink }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TextButtons, {})
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  };
+  function addLineBreakAfterImages(markdown) {
+    const imageRegex = /!\[.*?\]\(.*?\)/g;
+    return markdown.replace(imageRegex, (match) => `${match}`);
+  }
+  const cssStyles = `
+.ProseMirror {
+    box-shadow: none !important;
+}
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -23,6 +1623,7 @@
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -40,6 +1641,7 @@
   &.ProseMirror-selectednode {
     outline: 3px solid #5abbf7;
     filter: brightness(90%);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
   }
 }
 
@@ -67,7 +1669,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -134,7 +1736,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 
 .ProseMirror:not(.dragging) .ProseMirror-selectednode {
-  outline: none !important;
+  // outline: none !important;
   background-color: rgb(219 234 254); // blue 100
   transition: background-color 0.2s;
   box-shadow: none;
@@ -145,7 +1747,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 }
 
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
@@ -156,7 +1758,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-position: center;
   width: 1.2rem;
   height: 1.5rem;
-  z-index: 50;
+  z-index: 100;
   cursor: grab;
 
   &:hover {
@@ -189,5 +1791,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
     background-color: rgb(51 65 85); // 700
   }
 }
-`;u.FireCMSEditor=Pe,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+`;
+  exports2.FireCMSEditor = FireCMSEditor;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
 //# sourceMappingURL=index.umd.js.map