@firecms/editor 3.0.0-canary.23 → 3.0.0-canary.231

package/dist/index.umd.js

@@ -1,6 +1,1923 @@
-(function(u,o){typeof exports=="object"&&typeof module<"u"?o(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"],o):(u=typeof globalThis<"u"?globalThis:u||self,o(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,o,g,W,Q,Z,_,V,b,y,X,Y,C,J,G,$,j,R,ee,te,w,re,ne,s,oe,A,E){"use strict";const T=y.createStore(),se=({children:e})=>o.jsx(y.Provider,{store:T,children:e}),ae=g.forwardRef(({children:e,tippyOptions:r,...t},n)=>{const{editor:i}=b.useCurrentEditor(),d=g.useRef(null);g.useEffect(()=>{!d.current||!r?.placement||(d.current.setProps({placement:r.placement}),d.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=>{d.current=m},moveTransition:"transform 0.15s ease-out",...r},...t}),[t,r]);return i?o.jsx("div",{ref:n,children:o.jsx(b.BubbleMenu,{editor:i,...a,children:e})}):null}),S=g.forwardRef(({children:e,asChild:r,onSelect:t,...n},i)=>{const{editor:d}=b.useCurrentEditor(),a=r?X.Slot:"div";return d?o.jsx(a,{ref:i,...n,onClick:()=>t?.(d),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}),n=y.useSetAtom(z,{store:T});return g.useEffect(()=>{t(e)},[e,t]),g.useEffect(()=>{n(r)},[r,n]),g.useEffect(()=>{const i=["ArrowUp","ArrowDown","Enter"],d=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",d),()=>{document.removeEventListener("keydown",d)}},[]),o.jsx(q.Out,{})},ce=g.forwardRef(({children:e,className:r,...t},n)=>{const i=g.useRef(null),[d,a]=y.useAtom(D);return o.jsx(q.In,{children:o.jsxs(C.Command,{ref:n,onKeyDown:c=>{c.stopPropagation()},id:"slash-command",className:r,...t,children:[o.jsx(C.Command.Input,{value:d,onValueChange:a,style:{display:"none"}}),o.jsx(C.Command.List,{ref:i,children:e})]})})}),F=g.forwardRef(({children:e,onCommand:r,...t},n)=>{const{editor:i}=b.useCurrentEditor(),d=y.useAtomValue(z);return!i||!d?null:o.jsx(C.CommandItem,{ref:n,...t,onSelect:()=>r({editor:i,range:d}),children:e})});F.displayName="EditorCommandItem";const de=C.CommandEmpty,le=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=ne("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:n}=e,i=r.from,d=r.to;n.insert(i-1,this.type.create(t)).delete(n.mapping.map(i),n.mapping.map(d))}})]}}),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 n=U.filter(i=>i.isActive(t)).pop()??{name:"Multiple"};return o.jsx(s.Popover,{sideOffset:5,align:"start",className:"w-48 p-1",trigger:o.jsxs(s.Button,{variant:"text",className:"gap-2 rounded-none",color:"text",children:[o.jsx("span",{className:"whitespace-nowrap text-sm",children:n.name}),o.jsx(s.ExpandMoreIcon,{size:"small"})]}),modal:!0,open:e,onOpenChange:r,children:U.map((i,d)=>o.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:[o.jsxs("div",{className:"flex items-center space-x-2",children:[o.jsx(i.icon,{size:"smallest"}),o.jsx("span",{children:i.name})]}),n.name===i.name&&o.jsx(s.CheckIcon,{size:"smallest"})]},d))})};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:n}=b.useCurrentEditor();return g.useEffect(()=>{t.current&&t.current?.focus()}),n?o.jsx(s.Popover,{modal:!0,open:e,onOpenChange:r,trigger:o.jsx(s.Button,{variant:"text",className:"gap-2 rounded-none",color:"text",children:o.jsx("p",{className:s.cn("underline decoration-stone-400 underline-offset-4",{"text-blue-500":n.isActive("link")}),children:"Link"})}),children:o.jsxs("form",{onSubmit:i=>{const d=i.currentTarget;i.preventDefault();const a=d[0],c=xe(a.value);c&&n.chain().focus().setLink({href:c}).run()},className:"flex p-1",children:[o.jsx("input",{ref:t,autoFocus:e,placeholder:"Paste a link",defaultValue:n.getAttributes("link").href||"",className:"text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"}),n.getAttributes("link").href?o.jsx(s.Button,{size:"small",variant:"text",type:"button",color:"text",className:"flex items-center",onClick:()=>{n.chain().focus().unsetLink().run()},children:o.jsx(s.DeleteIcon,{size:"small"})}):o.jsx(s.Button,{size:"small",variant:"text",children:o.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 o.jsx("div",{className:"flex",children:r.map((t,n)=>o.jsx(S,{onSelect:i=>{t.command(i)},children:o.jsx(s.Button,{size:"small",color:"text",className:"gap-2 rounded-none h-full",variant:"text",children:o.jsx(t.icon,{className:s.cn({"text-inherit":!t.isActive(e),"text-blue-500":t.isActive(e)})})})},n))})};function M(e,r,t,n=300){const i=g.useRef(!1),d=()=>{r(),i.current=!1},a=g.useRef(void 0);g.useEffect(()=>(i.current=!0,clearTimeout(a.current),a.current=setTimeout(d,n),()=>{t&&d()}),[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.cn("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.cn("not-prose")}}),we=ee.TaskItem.configure({HTMLAttributes:{class:s.cn("flex items-start my-4")},nested:!0}),Le=ge.configure({HTMLAttributes:{class:s.cn("mt-4 mb-6 border-t",s.defaultBorderMixin)}}),Ae=J.configure({bulletList:{HTMLAttributes:{class:s.cn("list-disc list-outside leading-3 -mt-2")}},orderedList:{HTMLAttributes:{class:s.cn("list-decimal list-outside leading-3 -mt-2")}},listItem:{HTMLAttributes:{class:s.cn("leading-normal -mb-2")}},blockquote:{HTMLAttributes:{class:s.cn("border-l-4 border-primary")}},codeBlock:{HTMLAttributes:{class:s.cn("rounded bg-blue-50 dark:bg-gray-700 border p-5 font-mono font-medium",s.defaultBorderMixin)}},code:{HTMLAttributes:{class:s.cn("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,n,i,d){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(n,m);c=c?.add(r.state.doc,[h]),r.dispatch(r.state.tr.setMeta(e,{decorationSet:c}));const k=await i(d);console.log("uploaded image",k);const x=a.nodes.image.create({src:k}),L=r.state.tr.replaceWith(n,n,x);c=c?.remove([h]),L.setMeta(e,{decorationSet:c}),r.dispatch(L)}const Ee=e=>{const r=new oe.Plugin({state:{init:()=>A.DecorationSet.empty,apply:(t,n)=>{const i=t.getMeta(r);return i&&i.decorationSet?i.decorationSet:n.map(t.mapping,t.doc)}},props:{handleDOMEvents:{drop:(t,n)=>{if(console.log("drop event",n),!n.dataTransfer?.files||n.dataTransfer?.files.length===0)return!1;n.preventDefault();const d=Array.from(n.dataTransfer.files).filter(a=>/image/i.test(a.type));return d.length===0?!1:(d.forEach(a=>{const c=t.posAtCoords({left:n.clientX,top:n.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,n,i){const d=Array.from(n.clipboardData?.items||[]),a=t.state.selection.from;console.log("pos",a);let c=!1;return d.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(n,i){const d=r.getState(i),a=r.getState(n.state);d!==a&&n.updateState(n.state)}}}});return r},Te=e=>j.extend({addProseMirrorPlugins(){return[Ee(e)]}}).configure({allowBase64:!0,HTMLAttributes:{class:s.cn("rounded-lg border",s.defaultBorderMixin)}}),Se=w.Extension.create({name:"CustomKeymap",addCommands(){return{selectTextWithinNodeBoundaries:()=>({editor:e,commands:r})=>{const{state:t}=e,{tr:n}=t,i=n.selection.$from.start(),d=n.selection.$to.end();return r.setTextSelection({from:i,to:d})}}},addKeyboardShortcuts(){return{"Mod-a":({editor:e})=>{const{state:r}=e,{tr:t}=r,n=t.selection.from,i=t.selection.to,d=t.selection.$from.start(),a=t.selection.$to.end();return n>d||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 n=e.getBoundingClientRect();return r.posAtCoords({left:n.left+50+t.dragHandleWidth,top:n.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 n=null;function i(){n&&n.classList.add("hide")}function d(){n&&n.classList.remove("hide")}return new E.Plugin({view:a=>(n=document.createElement("div"),n.draggable=!0,n.dataset.dragHandle="",n.classList.add("drag-handle"),n.addEventListener("dragstart",c=>{r(c,a)}),n.addEventListener("click",c=>{t(c,a)}),i(),a?.dom?.parentElement?.appendChild(n),{destroy:()=>{n?.remove?.(),n=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,n&&(n.style.left=`${x.left-x.width}px`,n.style.top=`${x.top}px`,d())},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:n,onMarkdownContentChange:i})=>{const d={handleDOMEvents:{keydown:(l,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:o.jsx(s.TextFieldsIcon,{size:18}),command:({editor:l,range:f})=>{l.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:o.jsx(s.CheckBoxIcon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).toggleTaskList().run()}},{title:"Heading 1",description:"Big section heading.",searchTerms:["title","big","large"],icon:o.jsx(s.LooksOneIcon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).setNode("heading",{level:1}).run()}},{title:"Heading 2",description:"Medium section heading.",searchTerms:["subtitle","medium"],icon:o.jsx(s.LooksTwoIcon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).setNode("heading",{level:2}).run()}},{title:"Heading 3",description:"Small section heading.",searchTerms:["subtitle","small"],icon:o.jsx(s.Looks3Icon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).setNode("heading",{level:3}).run()}},{title:"Bullet List",description:"Create a simple bullet list.",searchTerms:["unordered","point"],icon:o.jsx(s.FormatListBulletedIcon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).toggleBulletList().run()}},{title:"Numbered List",description:"Create a list with numbering.",searchTerms:["ordered"],icon:o.jsx(s.FormatListNumberedIcon,{size:18}),command:({editor:l,range:f})=>{l.chain().focus().deleteRange(f).toggleOrderedList().run()}},{title:"Quote",description:"Capture a quote.",searchTerms:["blockquote"],icon:o.jsx(s.FormatQuoteIcon,{size:18}),command:({editor:l,range:f})=>l.chain().focus().deleteRange(f).toggleNode("paragraph","paragraph").toggleBlockquote().run()},{title:"Code",description:"Capture a code snippet.",searchTerms:["codeblock"],icon:o.jsx(s.CodeIcon,{size:18}),command:({editor:l,range:f})=>l.chain().focus().deleteRange(f).toggleCodeBlock().run()},{title:"Image",description:"Upload an image from your computer.",searchTerms:["photo","picture","media"],icon:o.jsx(s.ImageIcon,{size:18}),command:({editor:l,range:f})=>{l.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;l.view.state.selection.from}},v.click()}}]),c=le.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=l=>{P.current=l,i&&De(l.storage.markdown.getMarkdown()),t&&ze(I(l.getJSON())),n&&Fe(l.getHTML())};return M(qe,()=>{if(P.current){const l=P.current.storage.markdown.getMarkdown();i?.(Be(l))}},!1,500),M(B,()=>{B&&t?.(B)},!1,500),M(H,()=>{H&&n?.(H)},!1,500),r?o.jsx("div",{className:"relative w-full p-8",children:o.jsx(se,{children:o.jsx("div",{className:"relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",children:o.jsxs(b.EditorProvider,{content:r,extensions:p,editorProps:{...d,attributes:{class:"prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"}},onUpdate:({editor:l})=>{console.log("editor updated"),Ue(l)},children:[o.jsxs(ce,{className:s.cn("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:[o.jsx(de,{className:"px-2 text-gray-700 dark:text-slate-300",children:"No results"}),a.map(l=>o.jsxs(F,{value:l.title,onCommand:f=>l?.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:[o.jsx("div",{className:s.cn("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-gray-900",s.defaultBorderMixin),children:l.icon}),o.jsxs("div",{children:[o.jsx("p",{className:"font-medium",children:l.title}),o.jsx("p",{className:"text-xs text-gray-700 dark:text-slate-300",children:l.description})]})]},l.title))]}),o.jsxs(ae,{tippyOptions:{placement:"top"},className:s.cn("flex w-fit max-w-[90vw] h-10 overflow-hidden rounded border bg-white dark:bg-gray-900 shadow",s.defaultBorderMixin),children:[o.jsx(fe,{open:h,onOpenChange:k}),o.jsx(s.Separator,{orientation:"vertical"}),o.jsx(ke,{open:x,onOpenChange:L}),o.jsx(s.Separator,{orientation:"vertical"}),o.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("@firecms/ui"), require("@tiptap/react"), require("@tiptap/extension-document"), require("tiptap-markdown"), require("@tiptap/extension-underline"), require("@tiptap/extension-heading"), require("@tiptap/extension-text-style"), require("@tiptap/extension-color"), require("@tiptap/extension-highlight"), require("@tiptap/extension-bold"), require("@tiptap/extension-italic"), require("@tiptap/extension-strike"), require("react-compiler-runtime"), require("@radix-ui/react-slot"), 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/extension-ordered-list"), require("@tiptap/extension-bullet-list"), require("@tiptap/extension-list-item"), require("@tiptap/extension-code-block"), require("@tiptap/extension-blockquote"), require("@tiptap/extension-code"), require("@tiptap/pm/view"), require("@tiptap/pm/state"), require("@tiptap/suggestion"), require("tippy.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/ui", "@tiptap/react", "@tiptap/extension-document", "tiptap-markdown", "@tiptap/extension-underline", "@tiptap/extension-heading", "@tiptap/extension-text-style", "@tiptap/extension-color", "@tiptap/extension-highlight", "@tiptap/extension-bold", "@tiptap/extension-italic", "@tiptap/extension-strike", "react-compiler-runtime", "@radix-ui/react-slot", "@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/extension-ordered-list", "@tiptap/extension-bullet-list", "@tiptap/extension-list-item", "@tiptap/extension-code-block", "@tiptap/extension-blockquote", "@tiptap/extension-code", "@tiptap/pm/view", "@tiptap/pm/state", "@tiptap/suggestion", "tippy.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.ui, global.react, global.Document, global.tiptapMarkdown, global.Underline, global.Heading, global.TextStyle, global.Color, global.Highlight, global.Bold, global.Italic, global.Strike, global.reactCompilerRuntime, global.reactSlot, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.prosemirrorState, global.prosemirrorView, global.OrderedList, global.BulletList, global.ListItem, global.CodeBlock, global.Blockquote, global.Code, global.view, global.state, global.Suggestion, global.tippy));
+})(this, function(exports2, jsxRuntime, React, ui, react, Document, tiptapMarkdown, Underline, Heading, TextStyle, Color, Highlight, Bold, Italic, Strike, reactCompilerRuntime, reactSlot, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, prosemirrorState, prosemirrorView, OrderedList, BulletList, ListItem, CodeBlock, Blockquote, Code, view, state, Suggestion, tippy) {
+  "use strict";
+  const EditorBubble = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(21);
+    let children;
+    let rest;
+    let tippyOptions;
+    if ($[0] !== t0) {
+      ({
+        children,
+        tippyOptions,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = rest;
+      $[3] = tippyOptions;
+    } else {
+      children = $[1];
+      rest = $[2];
+      tippyOptions = $[3];
+    }
+    const {
+      editor
+    } = react.useCurrentEditor();
+    const instanceRef = React.useRef(null);
+    let t1;
+    if ($[4] !== tippyOptions) {
+      t1 = () => {
+        if (!instanceRef.current || !tippyOptions?.placement) {
+          return;
+        }
+        instanceRef.current.setProps({
+          placement: tippyOptions.placement
+        });
+        instanceRef.current.popperInstance?.update();
+      };
+      $[4] = tippyOptions;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    const t2 = tippyOptions?.placement;
+    let t3;
+    if ($[6] !== t2) {
+      t3 = [t2];
+      $[6] = t2;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    React.useEffect(t1, t3);
+    let t4;
+    const shouldShow = _temp$1;
+    let t5;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = (val) => {
+        instanceRef.current = val;
+      };
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== tippyOptions) {
+      t6 = {
+        onCreate: t5,
+        moveTransition: "transform 0.15s ease-out",
+        ...tippyOptions
+      };
+      $[9] = tippyOptions;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== rest || $[12] !== t6) {
+      t7 = {
+        shouldShow,
+        tippyOptions: t6,
+        ...rest
+      };
+      $[11] = rest;
+      $[12] = t6;
+      $[13] = t7;
+    } else {
+      t7 = $[13];
+    }
+    t4 = t7;
+    const bubbleMenuProps = t4;
+    if (!editor) {
+      return null;
+    }
+    let t8;
+    if ($[14] !== bubbleMenuProps || $[15] !== children || $[16] !== editor) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(react.BubbleMenu, { editor, ...bubbleMenuProps, children });
+      $[14] = bubbleMenuProps;
+      $[15] = children;
+      $[16] = editor;
+      $[17] = t8;
+    } else {
+      t8 = $[17];
+    }
+    let t9;
+    if ($[18] !== ref || $[19] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, children: t8 });
+      $[18] = ref;
+      $[19] = t8;
+      $[20] = t9;
+    } else {
+      t9 = $[20];
+    }
+    return t9;
+  });
+  function _temp$1(t0) {
+    const {
+      editor: editor_0,
+      state: state2
+    } = t0;
+    const {
+      selection
+    } = state2;
+    const {
+      empty
+    } = selection;
+    if (editor_0.isActive("image") || empty || react.isNodeSelection(selection)) {
+      return false;
+    }
+    return true;
+  }
+  const EditorBubbleItem = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(14);
+    let asChild;
+    let children;
+    let onSelect;
+    let rest;
+    if ($[0] !== t0) {
+      ({
+        children,
+        asChild,
+        onSelect,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = asChild;
+      $[2] = children;
+      $[3] = onSelect;
+      $[4] = rest;
+    } else {
+      asChild = $[1];
+      children = $[2];
+      onSelect = $[3];
+      rest = $[4];
+    }
+    const {
+      editor
+    } = react.useCurrentEditor();
+    const Comp = asChild ? reactSlot.Slot : "div";
+    if (!editor) {
+      return null;
+    }
+    let t1;
+    if ($[5] !== editor || $[6] !== onSelect) {
+      t1 = () => onSelect?.(editor);
+      $[5] = editor;
+      $[6] = onSelect;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    let t2;
+    if ($[8] !== Comp || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t1) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...rest, onClick: t1, children });
+      $[8] = Comp;
+      $[9] = children;
+      $[10] = ref;
+      $[11] = rest;
+      $[12] = t1;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    return t2;
+  });
+  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 = (t0) => {
+    const $ = reactCompilerRuntime.c(16);
+    const {
+      open,
+      onOpenChange,
+      portalContainer
+    } = t0;
+    const {
+      editor
+    } = react.useCurrentEditor();
+    if (!editor) {
+      return null;
+    }
+    let t1;
+    if ($[0] !== editor) {
+      t1 = items.filter((item) => item.isActive(editor)).pop() ?? {
+        name: "Multiple"
+      };
+      $[0] = editor;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    const activeItem = t1;
+    let t2;
+    if ($[2] !== activeItem.name) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm", children: activeItem.name });
+      $[2] = activeItem.name;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardArrowDownIcon, { size: "small" });
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== t2) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: [
+        t2,
+        t3
+      ] });
+      $[5] = t2;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== activeItem.name || $[8] !== onOpenChange) {
+      t5 = items.map((item_0, index) => /* @__PURE__ */ jsxRuntime.jsxs(EditorBubbleItem, { onSelect: (editor_0) => {
+        item_0.command(editor_0);
+        onOpenChange(false);
+      }, className: "flex cursor-pointer items-center justify-between rounded px-2 py-1 text-sm hover:bg-blue-50 hover:dark:bg-surface-700 text-surface-900 dark:text-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(item_0.icon, { size: "smallest" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item_0.name })
+        ] }),
+        activeItem.name === item_0.name && /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, { size: "smallest" })
+      ] }, index));
+      $[7] = activeItem.name;
+      $[8] = onOpenChange;
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    let t6;
+    if ($[10] !== onOpenChange || $[11] !== open || $[12] !== portalContainer || $[13] !== t4 || $[14] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, { sideOffset: 5, align: "start", portalContainer, className: "w-48 p-1", trigger: t4, modal: true, open, onOpenChange, children: t5 });
+      $[10] = onOpenChange;
+      $[11] = open;
+      $[12] = portalContainer;
+      $[13] = t4;
+      $[14] = t5;
+      $[15] = t6;
+    } else {
+      t6 = $[15];
+    }
+    return t6;
+  };
+  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 = (t0) => {
+    const $ = reactCompilerRuntime.c(24);
+    const {
+      open,
+      onOpenChange
+    } = t0;
+    const inputRef = React.useRef(null);
+    const {
+      editor
+    } = react.useCurrentEditor();
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = () => {
+        inputRef.current && inputRef.current?.focus();
+      };
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    React.useEffect(t1);
+    if (!editor) {
+      return null;
+    }
+    let t2;
+    if ($[1] !== editor) {
+      t2 = ui.cls("underline decoration-stone-400 underline-offset-4", {
+        "text-blue-500": editor.isActive("link")
+      });
+      $[1] = editor;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    let t3;
+    if ($[3] !== t2) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", className: "gap-2 rounded-none", color: "text", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: t2, children: "Link" }) });
+      $[3] = t2;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    let t4;
+    if ($[5] !== editor) {
+      t4 = (e) => {
+        const target = e.currentTarget;
+        e.preventDefault();
+        const input = target[0];
+        const url = getUrlFromString(input.value);
+        url && editor.chain().focus().setLink({
+          href: url
+        }).run();
+      };
+      $[5] = editor;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== editor) {
+      t5 = editor.getAttributes("link").href || "";
+      $[7] = editor;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = ui.cls("text-surface-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none", ui.focusedDisabled);
+      $[9] = t6;
+    } else {
+      t6 = $[9];
+    }
+    let t7;
+    if ($[10] !== open || $[11] !== t5) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, autoFocus: open, placeholder: "Paste a link", defaultValue: t5, className: t6 });
+      $[10] = open;
+      $[11] = t5;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== editor) {
+      t8 = 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" }) });
+      $[13] = editor;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    let t9;
+    if ($[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: t4, className: "flex p-1", children: [
+        t7,
+        t8
+      ] });
+      $[15] = t4;
+      $[16] = t7;
+      $[17] = t8;
+      $[18] = t9;
+    } else {
+      t9 = $[18];
+    }
+    let t10;
+    if ($[19] !== onOpenChange || $[20] !== open || $[21] !== t3 || $[22] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, { modal: true, open, onOpenChange, trigger: t3, children: t9 });
+      $[19] = onOpenChange;
+      $[20] = open;
+      $[21] = t3;
+      $[22] = t9;
+      $[23] = t10;
+    } else {
+      t10 = $[23];
+    }
+    return t10;
+  };
+  const TextButtons = () => {
+    const $ = reactCompilerRuntime.c(2);
+    const {
+      editor
+    } = react.useCurrentEditor();
+    if (!editor) {
+      return null;
+    }
+    let t0;
+    if ($[0] !== editor) {
+      const items2 = [{
+        name: "bold",
+        isActive: _temp,
+        command: _temp2,
+        icon: ui.FormatBoldIcon
+      }, {
+        name: "italic",
+        isActive: _temp3,
+        command: _temp4,
+        icon: ui.FormatItalicIcon
+      }, {
+        name: "underline",
+        isActive: _temp5,
+        command: _temp6,
+        icon: ui.FormatUnderlinedIcon
+      }, {
+        name: "strike",
+        isActive: _temp7,
+        command: _temp8,
+        icon: ui.FormatStrikethroughIcon
+      }, {
+        name: "code",
+        isActive: _temp9,
+        command: _temp10,
+        icon: ui.CodeIcon
+      }];
+      t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: items2.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(EditorBubbleItem, { onSelect: (editor_10) => {
+        item.command(editor_10);
+      }, 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)) });
+      $[0] = editor;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  };
+  function _temp(editor_0) {
+    return editor_0?.isActive("bold") ?? false;
+  }
+  function _temp2(editor_1) {
+    return editor_1?.chain().focus().toggleBold().run();
+  }
+  function _temp3(editor_2) {
+    return editor_2?.isActive("italic") ?? false;
+  }
+  function _temp4(editor_3) {
+    return editor_3?.chain().focus().toggleItalic().run();
+  }
+  function _temp5(editor_4) {
+    return editor_4?.isActive("underline") ?? false;
+  }
+  function _temp6(editor_5) {
+    return editor_5?.chain().focus().toggleUnderline().run();
+  }
+  function _temp7(editor_6) {
+    return editor_6?.isActive("strike") ?? false;
+  }
+  function _temp8(editor_7) {
+    return editor_7?.chain().focus().toggleStrike().run();
+  }
+  function _temp9(editor_8) {
+    return editor_8?.isActive("code") ?? false;
+  }
+  function _temp10(editor_9) {
+    return editor_9?.chain().focus().toggleCode().run();
+  }
+  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}`;
+      }
+      if (node.type.name === "paragraph") {
+        return "Press '/' for commands";
+      }
+      return "";
+    },
+    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-surface-700 dark:text-surface-accent-200 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 horizontalRule = Horizontal.configure({
+    HTMLAttributes: {
+      class: ui.cls("mt-4 mb-6 border-t", ui.defaultBorderMixin)
+    }
+  });
+  const bulletList = BulletList.configure({
+    HTMLAttributes: {
+      class: ui.cls("list-disc list-outside leading-3 -mt-2")
+    }
+  });
+  const orderedList = OrderedList.configure({
+    HTMLAttributes: {
+      class: ui.cls("list-decimal list-outside leading-3 -mt-2")
+    }
+  });
+  const listItem = ListItem.configure({
+    HTMLAttributes: {
+      class: ui.cls("leading-normal -mb-2")
+    }
+  });
+  const blockquote = Blockquote.configure({
+    HTMLAttributes: {
+      class: ui.cls("border-l-4 border-primary")
+    }
+  });
+  const codeBlock = CodeBlock.configure({
+    HTMLAttributes: {
+      class: ui.cls("rounded bg-blue-50 dark:bg-surface-700 border p-5 font-mono font-medium", ui.defaultBorderMixin)
+    }
+  });
+  const code = Code.configure({
+    HTMLAttributes: {
+      class: ui.cls("rounded-md bg-surface-accent-50 dark:bg-surface-700 px-1.5 py-1 font-mono font-medium"),
+      spellcheck: "false"
+    }
+  });
+  const starterKit = StarterKit.configure({
+    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
+      })];
+    }
+  });
+  function buildDecorationSet(highlight, doc) {
+    const decorations = [];
+    if (highlight) {
+      decorations.push(view.Decoration.inline(highlight.from, highlight.to, {
+        class: "dark:bg-surface-accent-700 bg-surface-accent-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 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,
+    aiController
+  }) => ({
+    items: ({
+      query
+    }) => {
+      const availableSuggestionItems = [...suggestionItems];
+      if (aiController) {
+        availableSuggestionItems.push(autocompleteSuggestionItem);
+      }
+      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 $ = reactCompilerRuntime.c(33);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const {
+      editor
+    } = react.useCurrentEditor();
+    let t0;
+    if ($[0] !== editor || $[1] !== props.aiController || $[2] !== props.range || $[3] !== props.upload) {
+      t0 = (item) => {
+        if (!editor) {
+          return;
+        }
+        item?.command?.({
+          editor,
+          range: props.range,
+          upload: props.upload,
+          aiController: props.aiController
+        });
+      };
+      $[0] = editor;
+      $[1] = props.aiController;
+      $[2] = props.range;
+      $[3] = props.upload;
+      $[4] = t0;
+    } else {
+      t0 = $[4];
+    }
+    const selectItem = t0;
+    let t1;
+    if ($[5] !== props.items.length || $[6] !== selectedIndex) {
+      t1 = () => {
+        setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+      };
+      $[5] = props.items.length;
+      $[6] = selectedIndex;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    const upHandler = t1;
+    let t2;
+    if ($[8] !== props.items.length || $[9] !== selectedIndex) {
+      t2 = () => {
+        setSelectedIndex((selectedIndex + 1) % props.items.length);
+      };
+      $[8] = props.items.length;
+      $[9] = selectedIndex;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    const downHandler = t2;
+    let t3;
+    if ($[11] !== props.items || $[12] !== selectItem || $[13] !== selectedIndex) {
+      t3 = () => {
+        const item_0 = props.items[selectedIndex];
+        selectItem(item_0);
+      };
+      $[11] = props.items;
+      $[12] = selectItem;
+      $[13] = selectedIndex;
+      $[14] = t3;
+    } else {
+      t3 = $[14];
+    }
+    const enterHandler = t3;
+    let t4;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = () => setSelectedIndex(0);
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    let t5;
+    if ($[16] !== props.items) {
+      t5 = [props.items];
+      $[16] = props.items;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    React.useEffect(t4, t5);
+    let t6;
+    if ($[18] !== downHandler || $[19] !== enterHandler || $[20] !== upHandler) {
+      t6 = () => ({
+        onKeyDown: (t72) => {
+          const {
+            event
+          } = t72;
+          if (event.key === "ArrowUp") {
+            upHandler();
+            return true;
+          }
+          if (event.key === "ArrowDown") {
+            downHandler();
+            return true;
+          }
+          if (event.key === "Enter") {
+            enterHandler();
+            return true;
+          }
+          return false;
+        }
+      });
+      $[18] = downHandler;
+      $[19] = enterHandler;
+      $[20] = upHandler;
+      $[21] = t6;
+    } else {
+      t6 = $[21];
+    }
+    React.useImperativeHandle(ref, t6);
+    let t7;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = [];
+      $[22] = t7;
+    } else {
+      t7 = $[22];
+    }
+    const itemRefs = React.useRef(t7);
+    let t8;
+    let t9;
+    if ($[23] !== selectedIndex) {
+      t8 = () => {
+        if (itemRefs.current[selectedIndex]) {
+          itemRefs.current[selectedIndex].scrollIntoView({
+            block: "nearest"
+          });
+        }
+      };
+      t9 = [selectedIndex];
+      $[23] = selectedIndex;
+      $[24] = t8;
+      $[25] = t9;
+    } else {
+      t8 = $[24];
+      t9 = $[25];
+    }
+    React.useEffect(t8, t9);
+    let t10;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = ui.cls("text-surface-900 dark:text-white z-50 max-h-[280px] h-auto w-72 overflow-y-auto rounded-md border bg-white dark:bg-surface-900 px-1 py-2 shadow transition-all", ui.defaultBorderMixin);
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    let t11;
+    if ($[27] !== props.items || $[28] !== selectItem || $[29] !== selectedIndex) {
+      t11 = props.items.length ? props.items.map((item_1, index) => /* @__PURE__ */ jsxRuntime.jsxs("button", { value: item_1.title, ref: (el) => {
+        if (!el) {
+          return;
+        }
+        itemRefs.current[index] = el;
+      }, onClick: () => selectItem(item_1), 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-surface-700 aria-selected:bg-blue-50 aria-selected:dark:bg-surface-700", index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-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-surface-900", ui.defaultBorderMixin), children: item_1.icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item_1.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-surface-700 dark:text-surface-accent-300", children: item_1.description })
+        ] })
+      ] }, item_1.title)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", children: "No result" });
+      $[27] = props.items;
+      $[28] = selectItem;
+      $[29] = selectedIndex;
+      $[30] = t11;
+    } else {
+      t11 = $[30];
+    }
+    let t12;
+    if ($[31] !== t11) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t10, children: t11 });
+      $[31] = t11;
+      $[32] = t12;
+    } else {
+      t12 = $[32];
+    }
+    return t12;
+  });
+  CommandList.displayName = "CommandList";
+  const autocompleteSuggestionItem = {
+    title: "Autocomplete",
+    description: "Add text based on the context.",
+    searchTerms: ["ai"],
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ui.AutoFixHighIcon, { 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();
+    }
+  }];
+  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,
+    disabled
+  }) => {
+    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(() => {
+      editorRef?.current?.setEditable(!disabled);
+    }, [disabled]);
+    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,
+      Underline,
+      Bold,
+      TextStyle,
+      Italic,
+      Strike,
+      Color,
+      Highlight.configure({
+        multicolor: true
+      }),
+      // CustomBlock.configure({
+      //     component: CustomComponent,
+      //     delimiter: "```custom"
+      // }),
+      Heading,
+      CustomKeymap,
+      DragAndDrop,
+      placeholder,
+      tiptapLink,
+      imageExtension,
+      taskList,
+      taskItem,
+      tiptapMarkdown.Markdown.configure({
+        html: true
+      }),
+      horizontalRule,
+      bulletList,
+      orderedList,
+      listItem,
+      blockquote,
+      codeBlock,
+      code,
+      SlashCommand.configure({
+        HTMLAttributes: {
+          class: "mention"
+        },
+        suggestion: suggestion(ref, {
+          upload: handleImageUpload,
+          aiController
+        })
+      })
+    ], []);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "relative min-h-[300px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorProvider, { content: content ?? "", extensions, editorProps: {
+      editable: () => !disabled,
+      attributes: {
+        class: ui.cls(proseClass, "prose-headings:font-title font-default focus:outline-none max-w-full p-12")
+      }
+    }, onCreate: ({
+      editor: editor_0
+    }) => {
+      editorRef.current = editor_0;
+      editor_0.setEditable(!disabled);
+    }, onUpdate: ({
+      editor: editor_1
+    }) => {
+      onEditorUpdate(editor_1);
+    }, 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-surface-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 +1940,7 @@
 }
 
 .is-empty {
+  cursor: text;
   color: rgb(100 116 139); //500
 }
 
@@ -40,6 +1958,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 +1986,7 @@ ul[data-type="taskList"] li > label {
     }
   
     &:active {
-      background-color: rgb(71 85 105);;
+      background-color: rgb(71 85 105);
     }
   }
 }
@@ -134,7 +2053,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;
@@ -144,8 +2063,12 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color:  rgb(51 65 85); // 700
 }
 
+.prose-base table p {
+    margin: 0;
+}
+
 .drag-handle {
-  position: fixed;
+  position: absolute;
   opacity: 1;
   transition: opacity ease-in 0.2s;
   border-radius: 0.25rem;
@@ -156,7 +2079,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 +2112,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