reactjs-tiptap-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("./clsx-CXbNJWDD.cjs"),w=require("@tiptap/pm/model"),y=require("./index-Cs6cp0Y6.cjs"),T=require("@tiptap/pm/state"),m=require("react/jsx-runtime"),h=require("react"),M=require("scroll-into-view-if-needed"),x=require("./renderNodeView-DfLmGrgA.cjs");function L({editor:e,overrideSuggestionOptions:t,extensionName:n,char:r="@"}){const s=new T.PluginKey;return{editor:e,char:r,pluginKey:s,command:({editor:o,range:a,props:l})=>{var u,i,d;const g=o.view.state.selection.$to.nodeAfter;((u=g==null?void 0:g.text)==null?void 0:u.startsWith(" "))&&(a.to+=1),o.chain().focus().insertContentAt(a,[{type:n,attrs:{...l,mentionSuggestionChar:r}},{type:"text",text:" "}]).run(),(d=(i=o.view.dom.ownerDocument.defaultView)==null?void 0:i.getSelection())==null||d.collapseToEnd()},allow:({state:o,range:a})=>{const l=o.doc.resolve(a.from),u=o.schema.nodes[n];return!!l.parent.type.contentMatch.matchType(u)},...t}}function v(e){return(e.options.suggestions.length?e.options.suggestions:[e.options.suggestion]).map(t=>L({editor:e.editor,overrideSuggestionOptions:t,extensionName:e.name,char:t.char}))}function f(e,t){const n=v(e),r=n.find(s=>s.char===t);return r||(n.length?n[0]:null)}var S=c.Node3.create({name:"mention",priority:101,addOptions(){return{HTMLAttributes:{},renderText({node:e,suggestion:t}){var n,r;return`${(n=t==null?void 0:t.char)!=null?n:"@"}${(r=e.attrs.label)!=null?r:e.attrs.id}`},deleteTriggerWithBackspace:!1,renderHTML({options:e,node:t,suggestion:n}){var r,s;return["span",c.mergeAttributes(this.HTMLAttributes,e.HTMLAttributes),`${(r=n==null?void 0:n.char)!=null?r:"@"}${(s=t.attrs.label)!=null?s:t.attrs.id}`]},suggestions:[],suggestion:{}}},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}:{}},mentionSuggestionChar:{default:"@",parseHTML:e=>e.getAttribute("data-mention-suggestion-char"),renderHTML:e=>({"data-mention-suggestion-char":e.mentionSuggestionChar})}}},parseHTML(){return[{tag:`span[data-type="${this.name}"]`}]},renderHTML({node:e,HTMLAttributes:t}){const n=f(this,e.attrs.mentionSuggestionChar);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,t),this.options.renderLabel({options:this.options,node:e,suggestion:n})];const r={...this.options};r.HTMLAttributes=c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,t);const s=this.options.renderHTML({options:r,node:e,suggestion:n});return typeof s=="string"?["span",c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,t),s]:s},...c.createInlineMarkdownSpec({nodeName:"mention",name:"@",selfClosing:!0,allowedAttributes:["id","label",{name:"mentionSuggestionChar",skipIfDefault:"@"}],parseAttributes:e=>{const t={},n=/(\w+)=(?:"([^"]*)"|'([^']*)')/g;let r=n.exec(e);for(;r!==null;){const[,s,o,a]=r,l=o??a;t[s==="char"?"mentionSuggestionChar":s]=l,r=n.exec(e)}return t},serializeAttributes:e=>Object.entries(e).filter(([,t])=>t!=null).map(([t,n])=>`${t==="mentionSuggestionChar"?"char":t}="${n}"`).join(" ")}),renderText({node:e}){const t={options:this.options,node:e,suggestion:f(this,e.attrs.mentionSuggestionChar)};return this.options.renderLabel!==void 0?(console.warn("renderLabel is deprecated use renderText and renderHTML instead"),this.options.renderLabel(t)):this.options.renderText(t)},addKeyboardShortcuts(){return{Backspace:()=>this.editor.commands.command(({tr:e,state:t})=>{let n=!1;const{selection:r}=t,{empty:s,anchor:o}=r;if(!s)return!1;let a=new w.Node,l=0;return t.doc.nodesBetween(o-1,o,(u,i)=>{if(u.type.name===this.name)return n=!0,a=u,l=i,!1}),n&&e.insertText(this.options.deleteTriggerWithBackspace?"":a.attrs.mentionSuggestionChar,l,l+a.nodeSize),n})}},addProseMirrorPlugins(){return v(this).map(y.Suggestion)}}),A=S;const b=h.forwardRef((e,t)=>{const n=h.useRef(null),[r,s]=h.useState(0),o=i=>{const d=e.items[i];d&&e.command(d)},a=()=>{s((r+e.items.length-1)%e.items.length)},l=()=>{s((r+1)%e.items.length)},u=()=>{o(r)};return h.useEffect(()=>s(0),[e.items]),h.useEffect(()=>{if(Number.isNaN(r+1))return;const i=n.current.querySelector(`span:nth-of-type(${r+1})`);i&&M(i,{behavior:"smooth",scrollMode:"if-needed"})},[r]),h.useImperativeHandle(t,()=>({onKeyDown:({event:i})=>i.key==="ArrowUp"?(a(),!0):i.key==="ArrowDown"?(l(),!0):i.key==="Enter"?(u(),!0):!1})),m.jsx("div",{className:" !richtext-max-h-[320px] !richtext-w-[160px] richtext-overflow-y-auto richtext-overflow-x-hidden  richtext-rounded-md  !richtext-border !richtext-border-solid !richtext-border-border richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none","data-richtext-portal":!0,ref:n,children:m.jsx("div",{children:e.items.length>0?e.items.map((i,d)=>{var g;return m.jsxs("span",{className:c.clsx("richtext-flex richtext-w-full richtext-items-center richtext-gap-3 richtext-rounded-sm !richtext-border-none !richtext-bg-transparent richtext-px-2 richtext-py-1.5 richtext-text-left richtext-text-sm richtext-text-foreground !richtext-outline-none richtext-transition-colors hover:!richtext-bg-accent ",{"bg-item-active":d===r}),onClick:p=>{p.preventDefault(),o(d)},children:[((g=i==null?void 0:i.avatar)==null?void 0:g.src)&&m.jsx("img",{alt:i.label,className:"richtext-size-5 richtext-rounded-full",src:i.avatar.src}),i==null?void 0:i.label]},`mention-item-${i.id}`)}):m.jsx("div",{className:c.clsx("itemUserEmpty, richtext-text-foreground"),children:"Empty"})})})}),H=c.Extension.create({name:"richTextMentionWrapper",addExtensions(){var t,n,r,s;const e={...this.options};return(t=this.options)!=null&&t.suggestion&&(e.suggestion={render:x.renderNodeViewClosure(b),...this.options.suggestion}),(r=(n=this.options)==null?void 0:n.suggestions)!=null&&r.length&&(e.suggestions=(s=this.options.suggestions)==null?void 0:s.map(o=>({render:x.renderNodeViewClosure(b),...o}))),[A.configure({HTMLAttributes:{class:"mention"},...e})]}});exports.Mention=H;