reactjs-tiptap-editor/lib/TableOfContent.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 h=require("./index-CSvnpArE.cjs"),p=require("./dom-dataset-DmsCLv1q.cjs"),l=require("react/jsx-runtime"),c=require("react"),C=require("./index-Dz3YxLE7.cjs"),b=require("./RichTextEditor-DaQRHXru.cjs"),g="_toc_aag8a_1",x="_visible_aag8a_7",T="_list_aag8a_11",O="_item_aag8a_16",f={toc:g,visible:x,list:T,item:O};function _(e){const o=[],a=[o];return e.forEach(n=>{let t=-1,s=a[n.level+t];for(;!s;)t-=1,s=a[n.level+t];s.push({...n,children:a[n.level]=[]})}),o}function y({editor:e}){const o=b.useEditableEditor(),[a,n]=c.useState([]),{t}=C.useLocale(),s=c.useCallback(()=>{const i=[],r=e.state.tr;e.state.doc.descendants((u,v)=>{if(u.type.name==="heading"){const d=`heading-${i.length+1}`;u.attrs.id!==d&&r.setNodeMarkup(v,void 0,{...u.attrs,id:d}),i.push({level:u.attrs.level,text:u.textContent,id:d})}}),r.setMeta("addToHistory",!1),r.setMeta("preventUpdate",!0),e.view.dispatch(r),n(i),e.eventEmitter&&e.eventEmitter.emit("TableOfContents",_(i))},[e]);return c.useEffect(()=>{if(e){if(!e.options.editable){s();return}return e.on("update",s),()=>{e.off("update",s)}}},[e,s]),c.useEffect(()=>{s()},[]),l.jsx(p.NodeViewWrapper,{className:p.clsx("tableOfContent",f.toc,o&&f.visible),children:o?l.jsxs("div",{style:{position:"relative"},children:[l.jsx("p",{className:"text-[20px] richtext-mb-[8px] richtext-font-semibold",children:t("editor.table_of_content")}),l.jsx("ul",{className:f.list,children:a.map((i,r)=>l.jsx("li",{className:f.item,style:{paddingLeft:`${i.level-1}rem`},children:l.jsx("a",{href:`#${i.id}`,children:i.text})},`table-of-content-${r}`))})]}):null})}function N(e,...o){const[a,n]=c.useState(!1);return c.useEffect(()=>{const t=()=>{n(e.isActive.apply(e,o))};return e.on("selectionUpdate",t),e.on("transaction",t),()=>{e.off("selectionUpdate",t),e.off("transaction",t)}},[e,o,n]),a}function A({editor:e,icon:o,tooltip:a}){const n=N(e,m.name),t=c.useCallback(()=>{if(n){e.chain().focus().removeTableOfContents().run();return}e.chain().focus().setTableOfContents().run()},[e,n]);return l.jsx(b.ActionButton,{action:t,isActive:()=>n||!1,icon:o,tooltip:a})}function j(e){return e&&e.type.name==="title"}function E(e,o){const n=[e.getJSON()],t=[];for(;n.length>0;){const s=n.shift();s.type===o&&t.push(s),s.content&&s.content.length>0&&n.push(...s.content)}return t}const m=h.Node.create({name:"tableOfContents",group:"block",atom:!0,addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),onHasOneBeforeInsert:()=>{},resizable:!0,lastColumnResizable:!0,allowTableNodeSelection:!1,button:({editor:o,t:a})=>({component:A,componentProps:{disabled:!1,icon:"BookMarked",tooltip:a("editor.table_of_content"),editor:o}})}},parseHTML(){return[{tag:"toc"}]},renderHTML({HTMLAttributes:e}){return["toc",h.mergeAttributes(e)]},addNodeView(){return p.ReactNodeViewRenderer(y)},addCommands(){return{setTableOfContents:()=>({commands:e,editor:o,view:a})=>{if(E(o,this.name).length>0){this.options.onHasOneBeforeInsert();return}const t=a.props.state.doc.content.firstChild;if(j(t)){const s=(t.firstChild&&t.firstChild.nodeSize||0)+1;return e.insertContentAt(s,{type:this.name})}return e.insertContent({type:this.name})},removeTableOfContents:()=>({state:e,dispatch:o})=>{const{tr:a}=e,n=e.schema.nodes.tableOfContents;return e.doc.descendants((t,s)=>{if(t.type===n){const i=s,r=s+t.nodeSize;a.delete(i,r)}}),a.docChanged?(o(a),!0):!1}}},addGlobalAttributes(){return[{types:["heading"],attributes:{id:{default:null}}}]}});exports.TableOfContents=m;