velaris-richtext-editor/lib/Mention.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 c=require("./index-COecBbaE.cjs"),g=require("./index-CySbCeQd.cjs"),u=require("./dom-dataset-CAXnsjYE.cjs"),b=require("tippy.js"),p=require("react/jsx-runtime"),l=require("react"),y=require("scroll-into-view-if-needed"),T=new c.PluginKey("mention"),M=c.Node.create({name:"mention",priority:101,addOptions(){return{HTMLAttributes:{},renderText({options:e,node:n}){var t;return`${e.suggestion.char}${(t=n.attrs.label)!==null&&t!==void 0?t:n.attrs.id}`},deleteTriggerWithBackspace:!1,renderHTML({options:e,node:n}){var t;return["span",c.mergeAttributes(this.HTMLAttributes,e.HTMLAttributes),`${e.suggestion.char}${(t=n.attrs.label)!==null&&t!==void 0?t:n.attrs.id}`]},suggestion:{char:"@",pluginKey:T,command:({editor:e,range:n,props:t})=>{var r,s,o;const a=e.view.state.selection.$to.nodeAfter;((r=a==null?void 0:a.text)===null||r===void 0?void 0:r.startsWith(" "))&&(n.to+=1),e.chain().focus().insertContentAt(n,[{type:this.name,attrs:t},{type:"text",text:" "}]).run(),(o=(s=e.view.dom.ownerDocument.defaultView)===null||s===void 0?void 0:s.getSelection())===null||o===void 0||o.collapseToEnd()},allow:({state:e,range:n})=>{const t=e.doc.resolve(n.from),r=e.schema.nodes[this.name];return!!t.parent.type.contentMatch.matchType(r)}}}},group:"inline",inline:!0,selectable:!1,atom:!0,addAttributes(){return{id:{default:null,parseHTML:e=>e.getAttribute("data-id"),renderHTML:e=>e.id?{"data-id":e.id}:{}},label:{default:null,parseHTML:e=>e.getAttribute("data-label"),renderHTML:e=>e.label?{"data-label":e.label}:{}}}},parseHTML(){return[{tag:`span[data-type="${this.name}"]`}]},renderHTML({node:e,HTMLAttributes:n}){if(this.options.renderLabel!==void 0)return console.warn("renderLabel is deprecated use renderText and renderHTML instead"),["span",c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,n),this.options.renderLabel({options:this.options,node:e})];const t={...this.options};t.HTMLAttributes=c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,n);const r=this.options.renderHTML({options:t,node:e});return typeof r=="string"?["span",c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,n),r]:r},renderText({node:e}){return this.options.renderLabel!==void 0?(console.warn("renderLabel is deprecated use renderText and renderHTML instead"),this.options.renderLabel({options:this.options,node:e})):this.options.renderText({options:this.options,node:e})},addKeyboardShortcuts(){return{Backspace:()=>this.editor.commands.command(({tr:e,state:n})=>{let t=!1;const{selection:r}=n,{empty:s,anchor:o}=r;return s?(n.doc.nodesBetween(o-1,o,(a,m)=>{if(a.type.name===this.name)return t=!0,e.insertText(this.options.deleteTriggerWithBackspace?"":this.options.suggestion.char||"",m,m+a.nodeSize),!1}),t):!1})}},addProseMirrorPlugins(){return[g.Suggestion({editor:this.editor,...this.options.suggestion})]}}),L="_listUsers_en3pm_1",w="_itemUser_en3pm_10",v="_selectedUser_en3pm_31",h={listUsers:L,itemUser:w,selectedUser:v},A=l.forwardRef((e,n)=>{const t=l.useRef(null),[r,s]=l.useState(0),o=i=>{const d=e.items[i];d&&e.command({id:d,label:d})},a=()=>{s((r+e.items.length-1)%e.items.length)},m=()=>{s((r+1)%e.items.length)},f=()=>{o(r)};return l.useEffect(()=>s(0),[e.items]),l.useEffect(()=>{if(Number.isNaN(r+1))return;const i=t.current.querySelector(`span:nth-of-type(${r+1})`);i&&y(i,{behavior:"smooth",scrollMode:"if-needed"})},[r]),l.useImperativeHandle(n,()=>({onKeyDown:({event:i})=>i.key==="ArrowUp"?(a(),!0):i.key==="ArrowDown"?(m(),!0):i.key==="Enter"?(f(),!0):!1})),p.jsx("div",{className:u.clsx("listUsers",h.listUsers),children:p.jsx("div",{ref:t,children:e.items.length>0?e.items.map((i,d)=>p.jsx("span",{className:u.clsx("itemUser",h.itemUser,d===r?h.selectedUser:""),onClick:()=>o(d),children:i},d)):p.jsx("div",{className:u.clsx("itemUserEmpty",h.itemUser),children:"Empty"})})})}),H=[{id:"1",name:"John Doe"},{id:"2",name:"Jane Doe"},{id:"3",name:"Alice"},{id:"4",name:"Bob"}],x={items:async({query:e})=>H.map(t=>t.name).filter(t=>t.toLowerCase().startsWith(e.toLowerCase())),render:()=>{let e,n;return{onStart:t=>{e=new u.ReactRenderer(A,{props:t,editor:t.editor}),n=b("body",{getReferenceClientRect:t.clientRect,appendTo:()=>document.body,content:e.element,showOnCreate:!0,interactive:!0,trigger:"manual",placement:"bottom-start"})},onUpdate(t){e.updateProps(t),n[0].setProps({getReferenceClientRect:t.clientRect})},onKeyDown(t){var r;return t.event.key==="Escape"?(n[0].hide(),!0):(r=e.ref)==null?void 0:r.onKeyDown(t)},onExit(){n[0].destroy(),e.destroy()}}}},U=M.extend({addAttributes(){return{id:{default:"",parseHTML:u.getDatasetAttribute("id")},label:{default:"",parseHTML:u.getDatasetAttribute("label")}}}}).configure({HTMLAttributes:{class:"mention"},suggestion:x});exports.Mention=U;