reactjs-tiptap-editor/lib/SlashCommandNodeView-CZoM3ZlS.cjs

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

"use strict";const d=require("react/jsx-runtime"),m=require("react"),h=require("./index-BnVcq33n.cjs");require("./theme.cjs");const w=require("./index-BsFvo9PG.cjs"),v=require("./index-NsYff_Ni.cjs");function S({t:i}){const s=[{name:"format",title:i("editor.slash.format"),commands:[]},{name:"insert",title:i("editor.slash.insert"),commands:[]}];return w.HEADINGS.forEach(e=>{s[0].commands.push({name:`heading${e}`,label:i(e==="Paragraph"?"editor.paragraph.tooltip":`editor.heading.h${e}.tooltip`),aliases:[`h${e}`,"bt",`bt${e}`],iconName:`Heading${e}`,isActive:t=>e==="Paragraph"?!1:t.isActive("heading",{level:e})||!1,action:({editor:t,range:l})=>{const a=w.HEADINGS.find(u=>t.isActive("heading",{level:u}));if(e==="Paragraph"){a!==void 0&&a!=="Paragraph"&&t.commands.toggleHeading({level:a}),t.chain().focus().deleteRange(l).run();return}if(e){t.chain().focus().deleteRange(l).setHeading({level:e}).run();return}t.chain().focus().deleteRange(l).run()}})}),s[0].commands.push({name:"bulletList",label:i("editor.bulletlist.tooltip"),aliases:["ul","yxlb"],iconName:"List",isActive:e=>e.isActive("bulletList"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).toggleBulletList().run()}}),s[0].commands.push({name:"orderedlist",label:i("editor.orderedlist.tooltip"),aliases:["ol","yxlb"],iconName:"ListOrdered",isActive:e=>e.isActive("orderedList"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).toggleOrderedList().run()}}),s[0].commands.push({name:"taskList",label:i("editor.tasklist.tooltip"),iconName:"ListTodo",description:"Task list with todo items",aliases:["todo"],isActive:e=>e.isActive("taskList"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).toggleTaskList().run()}}),s[0].commands.push({name:"blockquote",label:i("editor.blockquote.tooltip"),description:"插入引入格式",aliases:["yr"],iconName:"TextQuote",isActive:e=>e.isActive("blockquote"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).setBlockquote().run()}}),s[0].commands.push({name:"codeBlock",label:i("editor.codeblock.tooltip"),iconName:"Code2",description:"Code block with syntax highlighting",shouldBeHidden:e=>e.isActive("columns"),isActive:e=>e.isActive("codeBlock"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).setCodeBlock().run()}}),s[1].commands.push({name:"image",label:i("editor.image.tooltip"),iconName:"ImageUp",description:"Insert a image",aliases:["image","tp","tupian"],shouldBeHidden:e=>e.isActive("columns"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).run();const l=h.EVENTS.UPLOAD_IMAGE(e.id);h.emit(l,!0)}}),s[1].commands.push({name:"video",label:i("editor.video.tooltip"),iconName:"Video",description:"Insert a video",aliases:["video","sp","shipin"],shouldBeHidden:e=>e.isActive("columns"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).run();const l=h.EVENTS.UPLOAD_VIDEO(e.id);h.emit(l,!0)}}),s[1].commands.push({name:"table",label:i("editor.table.tooltip"),iconName:"Table",description:"Insert a table",aliases:["table","bg","biaoge","biao"],shouldBeHidden:e=>e.isActive("columns"),action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).insertTable({rows:3,cols:3,withHeaderRow:!1}).run()}}),s[1].commands.push({name:"horizontalRule",label:i("editor.horizontalrule.tooltip"),iconName:"Minus",description:"Insert a horizontal divider",aliases:["hr","fgx","fg"],action:({editor:e,range:t})=>{e.chain().focus().deleteRange(t).setHorizontalRule().run()}}),s[1].commands.push({name:"columns",label:i("editor.columns.tooltip"),iconName:"Columns2",description:"Add two column content",action:({editor:e})=>{e.chain().focus().insertColumns({cols:2}).run()}}),s}function C(i,s){return i.map(l=>({...l,commands:l.commands.filter(a=>{const u=a.label.toLowerCase().trim(),x=s.toLowerCase().trim();if(a.aliases){const b=a.aliases.map(f=>f.toLowerCase().trim()),r=u.match(x),g=b.some(f=>f.match(x));return r||g}return u.match(x)})})).filter(l=>l.commands.length>0)}const y=v.y([]);function L(){const[i,s]=v.V(y);return[i,s]}function q(i,s){const[e]=L(),[t,l]=m.useState(0),[a,u]=m.useState(0),x=m.useRef(null),{t:b}=w.useLocale(),r=C(e,i.query),g=m.useRef([]);m.useImperativeHandle(s,()=>({onKeyDown:f})),m.useEffect(()=>{if(!x.current)return;const o=a*1e3+t,n=g.current[o];n&&n.scrollIntoView({behavior:"smooth",block:"nearest"})},[t,a]);function f({event:o}){return o.key==="ArrowUp"?(A(),!0):o.key==="ArrowDown"?(I(),!0):o.key==="Enter"?(R(),!0):!1}function A(){var c;if(r.length===0)return!1;let o=t-1,n=a;o<0&&(n=a-1,o=((c=r[n])==null?void 0:c.commands.length)-1||0),n<0&&(n=r.length-1,o=r[n].commands.length-1),l(o),u(n)}function I(){if(r.length===0)return!1;const o=r[a].commands;let n=t+1,c=a;o.length-1<n&&(n=0,c=a+1),r.length-1<c&&(c=0),l(n),u(c)}function R(){if(r.length===0||a===-1||t===-1)return!1;N(a,t)}function N(o,n){const c=r[o].commands[n];i==null||i.command(c)}function k(o,n){N(o,n)}function E(o,n,c){g.current[o*1e3+n]=c}return d.jsx("div",{className:"richtext-max-h-[min(80vh,24rem)] richtext-flex-wrap 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:x,children:r!=null&&r.length?d.jsx("div",{className:"richtext-grid richtext-min-w-48 richtext-grid-cols-1 richtext-gap-0.5",children:r==null?void 0:r.map((o,n)=>d.jsxs(m.Fragment,{children:[d.jsx(h.Label,{className:"richtext-mx-[4px] richtext-mb-[4px] richtext-mt-[8px] !richtext-text-[0.65rem] richtext-uppercase ",children:o.title}),o.commands.map((c,p)=>d.jsxs("button",{onClick:()=>k(n,p),ref:H=>E(n,p,H),className:h.cn("richtext-flex richtext-items-center richtext-gap-3 richtext-px-2 richtext-py-1.5 richtext-text-sm richtext-text-foreground richtext-text-left richtext-w-full richtext-rounded-sm !richtext-outline-none !richtext-border-none richtext-transition-colors !richtext-bg-transparent hover:!richtext-bg-accent ",{"bg-item-active":a===n&&t===p}),children:[c.iconUrl&&d.jsx("img",{alt:"",className:"richtext-size-6",src:c.iconUrl}),c.iconName&&d.jsx(h.IconComponent,{className:"!richtext-mr-1 !richtext-text-lg",name:c.iconName}),c.label]},`command-${p}`))]},`slash-${o.title}`))}):d.jsx("div",{className:"richtext-p-3",children:d.jsx("span",{className:"richtext-text-xs richtext-text-foreground",children:b("editor.slash.empty")})})})}const D=m.forwardRef(q);exports.SlashCommandNodeView=D;exports.renderCommandListDefault=S;exports.useFilterCommandList=C;exports.useSignalCommandList=L;