reactjs-tiptap-editor/lib/SlashCommand.cjs

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./clsx-CXbNJWDD.cjs"),u=require("@tiptap/pm/state"),d=require("./index-Cs6cp0Y6.cjs"),r=require("./SlashCommandNodeView-CZoM3ZlS.cjs"),a=require("./updatePosition-Cjuj2E26.cjs"),s=require("react/jsx-runtime"),l=require("react"),m=require("./index-BsFvo9PG.cjs");function c({commandList:e}){const[,t]=r.useSignalCommandList(),{t:n}=m.useLocale();return l.useEffect(()=>{if(!(e!=null&&e.length)){const o=r.renderCommandListDefault({t:n});t(o);return}t(e)},[n,e]),s.jsx(s.Fragment,{})}const C=i.Extension.create({name:"richtextSlashCommand",priority:200,addProseMirrorPlugins(){return[d.Suggestion({pluginKey:new u.PluginKey("richtextSlashCommandPlugin"),editor:this.editor,char:"/",command:({editor:e,range:t,props:n})=>{const{view:o}=e;n.action({editor:e,range:t}),o.focus()},render:()=>{let e;return{onStart:t=>{t.clientRect&&(e=new i.ReactRenderer(r.SlashCommandNodeView,{props:t,editor:t.editor}),e.element.style.position="absolute",document.body.appendChild(e.element),a.updatePosition(t.editor,e.element))},onUpdate(t){e.updateProps(t),t.clientRect&&a.updatePosition(t.editor,e.element)},onKeyDown(t){var n;return t.event.key==="Escape"?(e.destroy(),e.element.remove(),!0):(n=e.ref)==null?void 0:n.onKeyDown(t)},onExit(){e&&(e.destroy(),e.element.remove())}}}})]}});exports.renderCommandListDefault=r.renderCommandListDefault;exports.useFilterCommandList=r.useFilterCommandList;exports.SlashCommand=C;exports.SlashCommandList=c;