@firecms/editor 3.0.0-canary.9 → 3.0.0-canary.91

package/dist/index.umd.js

@@ -1,5 +1,1148 @@
-(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("@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"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Editor"] = {}, global.jsxRuntime, global.React, global.TiptapUnderline, global.TextStyle, global.extensionColor, global.tiptapMarkdown, global.Highlight, global.react, global.jotai, global.reactSlot, global.tunnel, global.cmdk, global.StarterKit, global.HorizontalRule, global.TiptapLink, global.TiptapImage, global.Placeholder, global.extensionTaskItem, global.extensionTaskList, global.core, global.Suggestion, global.tippy, global.ui, global.prosemirrorState, global.view, global.state));
+})(this, function(exports2, jsxRuntime, React, TiptapUnderline, TextStyle, extensionColor, tiptapMarkdown, Highlight, react, jotai, reactSlot, tunnel, cmdk, StarterKit, HorizontalRule, TiptapLink, TiptapImage, Placeholder, extensionTaskItem, extensionTaskList, core, Suggestion, tippy, ui, prosemirrorState, view, state) {
+  "use strict";
+  const editorStore = jotai.createStore();
+  const EditorRoot = ({ children }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(jotai.Provider, { store: editorStore, children });
+  };
+  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 t = tunnel();
+  const queryAtom = jotai.atom("");
+  const rangeAtom = jotai.atom(null);
+  const EditorCommandOut = ({
+    query,
+    range
+  }) => {
+    const setQuery = jotai.useSetAtom(queryAtom, { store: editorStore });
+    const setRange = jotai.useSetAtom(rangeAtom, { store: editorStore });
+    React.useEffect(() => {
+      setQuery(query);
+    }, [query, setQuery]);
+    React.useEffect(() => {
+      setRange(range);
+    }, [range, setRange]);
+    React.useEffect(() => {
+      const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+      const onKeyDown = (e) => {
+        if (navigationKeys.includes(e.key)) {
+          e.preventDefault();
+          const commandRef = document.querySelector("#slash-command");
+          if (commandRef)
+            commandRef.dispatchEvent(
+              new KeyboardEvent("keydown", { key: e.key, cancelable: true, bubbles: true })
+            );
+        }
+      };
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsx(t.Out, {});
+  };
+  const EditorCommand = React.forwardRef(
+    ({ children, className, ...rest }, ref) => {
+      const commandListRef = React.useRef(null);
+      const [query, setQuery] = jotai.useAtom(queryAtom);
+      return /* @__PURE__ */ jsxRuntime.jsx(t.In, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        cmdk.Command,
+        {
+          ref,
+          onKeyDown: (e) => {
+            e.stopPropagation();
+          },
+          id: "slash-command",
+          className,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { value: query, onValueChange: setQuery, style: { display: "none" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.List, { ref: commandListRef, children })
+          ]
+        }
+      ) });
+    }
+  );
+  const EditorCommandItem = React.forwardRef(({ children, onCommand, ...rest }, ref) => {
+    const { editor } = react.useCurrentEditor();
+    const range = jotai.useAtomValue(rangeAtom);
+    if (!editor || !range) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(cmdk.CommandItem, { ref, ...rest, onSelect: () => onCommand({ editor, range }), children });
+  });
+  EditorCommandItem.displayName = "EditorCommandItem";
+  const EditorCommandEmpty = cmdk.CommandEmpty;
+  const Command = core.Extension.create({
+    name: "slash-command",
+    addOptions() {
+      return {
+        suggestion: {
+          char: "/",
+          command: ({ editor, range, props }) => {
+            props.command({ editor, range });
+          }
+        }
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        Suggestion({
+          editor: this.editor,
+          ...this.options.suggestion
+        })
+      ];
+    }
+  });
+  const renderItems = () => {
+    let component = null;
+    let popup = null;
+    return {
+      onStart: (props) => {
+        component = new react.ReactRenderer(EditorCommandOut, {
+          props,
+          editor: props.editor
+        });
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "bottom-start"
+        });
+      },
+      onUpdate: (props) => {
+        component?.updateProps(props);
+        popup && popup[0].setProps({
+          getReferenceClientRect: props.clientRect
+        });
+      },
+      onKeyDown: (props) => {
+        if (props.event.key === "Escape") {
+          popup?.[0].hide();
+          return true;
+        }
+        return component?.ref?.onKeyDown(props);
+      },
+      onExit: () => {
+        popup?.[0].destroy();
+        component?.destroy();
+      }
+    };
+  };
+  const createSuggestionItems = (items2) => items2;
+  const PlaceholderExtension = Placeholder.configure({
+    placeholder: ({ node }) => {
+      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 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
+  }) => {
+    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",
+        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: "text-gray-900 dark:text-white flex-grow bg-transparent p-1 text-sm outline-none"
+                }
+              ),
+              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 useDebouncedCallback(value, callback, immediate, timeoutMs = 300) {
+    const pendingUpdate = React.useRef(false);
+    const performUpdate = () => {
+      callback();
+      pendingUpdate.current = false;
+    };
+    const handlerRef = React.useRef(void 0);
+    React.useEffect(
+      () => {
+        pendingUpdate.current = true;
+        clearTimeout(handlerRef.current);
+        handlerRef.current = setTimeout(performUpdate, timeoutMs);
+        return () => {
+        };
+      },
+      [immediate, value]
+    );
+  }
+  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 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 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"
+      }
+    },
+    horizontalRule: false,
+    dropcursor: {
+      color: "#DBEAFE",
+      width: 4
+    },
+    gapcursor: false
+  });
+  async function onFileRead(plugin, view$1, readerEvent, pos, upload, image) {
+    const { schema } = view$1.state;
+    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 border-stone-200");
+    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.log("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 dropImagePlugin = (upload) => {
+    const plugin = new prosemirrorState.Plugin({
+      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) => {
+            console.log("drop event", 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) 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(plugin, 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;
+          console.log("pos", pos);
+          let anyImageFound = false;
+          items2.forEach((item) => {
+            const image = item.getAsFile();
+            console.log("image", image);
+            if (image) {
+              anyImageFound = true;
+              const reader = new FileReader();
+              reader.onload = async (readerEvent) => {
+                await onFileRead(plugin, 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 = (uploadFn) => {
+    return TiptapImage.extend({
+      addProseMirrorPlugins() {
+        return [dropImagePlugin(uploadFn)];
+      }
+    }).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(node) {
+    const data = node.getBoundingClientRect();
+    return {
+      top: data.top,
+      left: data.left,
+      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: () => {
+            dragHandleElement?.remove?.();
+            dragHandleElement = null;
+          }
+        };
+      },
+      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 FireCMSEditor = ({
+    handleImageUpload,
+    initialContent,
+    onJsonContentChange,
+    onHtmlContentChange,
+    onMarkdownContentChange
+  }) => {
+    const defaultEditorProps = {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+            const slashCommand2 = document.querySelector("#slash-command");
+            if (slashCommand2) {
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+      // handlePaste: (view, event) => {
+      //     if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+      //         event.preventDefault();
+      //         const file = event.clipboardData.files[0];
+      //         const pos = view.state.selection.from;
+      //
+      //         // startImageUpload({ file, view, pos, handleImageUpload });
+      //         return true;
+      //     }
+      //     return false;
+      // },
+      // handleDrop: (view, event, _slice, moved) => {
+      //     console.log("handleDrop", { event, moved });
+      //     if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      //         console.log("handleDrop!!!", { event, moved });
+      //         event.preventDefault();
+      //         const file = event.dataTransfer.files[0];
+      //         const coordinates = view.posAtCoords({
+      //             left: event.clientX,
+      //             top: event.clientY
+      //         });
+      //         // here we deduct 1 from the pos or else the image will create an extra node
+      //         startImageUpload({
+      //             file,
+      //             view,
+      //             pos: coordinates?.pos || 0 - 1,
+      //             handleImageUpload,
+      //         });
+      //         return true;
+      //     }
+      //     return false;
+      // }
+    };
+    const suggestionItems = createSuggestionItems([
+      {
+        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"],
+        icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ImageIcon, { size: 18 }),
+        command: ({ editor, range }) => {
+          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;
+              editor.view.state.selection.from;
+            }
+          };
+          input.click();
+        }
+      }
+    ]);
+    const slashCommand = Command.configure({
+      suggestion: {
+        items: () => suggestionItems,
+        render: renderItems
+      }
+    });
+    const imageExtension = React.useMemo(() => createImageExtension(handleImageUpload), []);
+    const extensions = [
+      TiptapUnderline,
+      TextStyle,
+      extensionColor.Color,
+      Highlight.configure({
+        multicolor: true
+      }),
+      tiptapMarkdown.Markdown.configure({
+        html: false,
+        transformCopiedText: true
+      }),
+      CustomKeymap,
+      DragAndDrop,
+      starterKit,
+      placeholder,
+      tiptapLink,
+      // tiptapImage,
+      imageExtension,
+      // updatedImage,
+      taskList,
+      taskItem,
+      horizontalRule,
+      slashCommand
+    ];
+    const [openNode, setOpenNode] = React.useState(false);
+    const [openLink, setOpenLink] = React.useState(false);
+    ui.useInjectStyles("Editor", cssStyles);
+    const editorRef = React.useRef(null);
+    const [markdownContent, setMarkdownContent] = React.useState(null);
+    const [jsonContent, setJsonContent] = React.useState(null);
+    const [htmlContent, setHtmlContent] = React.useState(null);
+    const onEditorUpdate = (editor) => {
+      editorRef.current = editor;
+      if (onMarkdownContentChange) {
+        setMarkdownContent(editor.storage.markdown.getMarkdown());
+      }
+      if (onJsonContentChange) {
+        setJsonContent(removeClassesFromJson(editor.getJSON()));
+      }
+      if (onHtmlContentChange) {
+        setHtmlContent(editor.getHTML());
+      }
+    };
+    useDebouncedCallback(markdownContent, () => {
+      if (editorRef.current) {
+        const markdown = editorRef.current.storage.markdown.getMarkdown();
+        onMarkdownContentChange?.(addLineBreakAfterImages(markdown));
+      }
+    }, false, 500);
+    useDebouncedCallback(jsonContent, () => {
+      if (jsonContent)
+        onJsonContentChange?.(jsonContent);
+    }, false, 500);
+    useDebouncedCallback(htmlContent, () => {
+      if (htmlContent)
+        onHtmlContentChange?.(htmlContent);
+    }, false, 500);
+    if (!initialContent) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full p-8", children: /* @__PURE__ */ jsxRuntime.jsx(EditorRoot, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative min-h-[500px] w-full bg-white dark:bg-gray-950 rounded-lg",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react.EditorProvider,
+          {
+            content: initialContent,
+            extensions,
+            editorProps: {
+              ...defaultEditorProps,
+              attributes: {
+                class: "prose-lg prose-headings:font-title font-default focus:outline-none max-w-full p-12"
+              }
+            },
+            onUpdate: ({ editor }) => {
+              console.debug("Editor updated");
+              onEditorUpdate(editor);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                EditorCommand,
+                {
+                  className: ui.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", ui.defaultBorderMixin),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(EditorCommandEmpty, { className: "px-2 text-gray-700 dark:text-slate-300", children: "No results" }),
+                    suggestionItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      EditorCommandItem,
+                      {
+                        value: item.title,
+                        onCommand: (val) => item?.command?.(val),
+                        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: [
+                          /* @__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.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, { 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 .is-editor-empty:first-child::before {
   content: attr(data-placeholder);
@@ -189,5 +1332,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