reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/Mention.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./dom-dataset-_6-diIRQ.cjs"),c=require("./index-DF2Lp4HZ.cjs"),M=require("./index-DpCrt7xs.cjs"),h=require("react/jsx-runtime"),g=require("react"),T=require("scroll-into-view-if-needed");function L({editor:e,overrideSuggestionOptions:r,extensionName:n,char:t="@"}){const s=new c.PluginKey;return{editor:e,char:t,pluginKey:s,command:({editor:i,range:a,props:d})=>{var u,o,l;const b=i.view.state.selection.$to.nodeAfter;((u=b==null?void 0:b.text)==null?void 0:u.startsWith(" "))&&(a.to+=1),i.chain().focus().insertContentAt(a,[{type:n,attrs:{...d,mentionSuggestionChar:t}},{type:"text",text:" "}]).run(),(l=(o=i.view.dom.ownerDocument.defaultView)==null?void 0:o.getSelection())==null||l.collapseToEnd()},allow:({state:i,range:a})=>{const d=i.doc.resolve(a.from),u=i.schema.nodes[n];return!!d.parent.type.contentMatch.matchType(u)},...r}}function y(e){return(e.options.suggestions.length?e.options.suggestions:[e.options.suggestion]).map(r=>L({editor:e.editor,overrideSuggestionOptions:r,extensionName:e.name,char:r.char}))}function p(e,r){const n=y(e),t=n.find(s=>s.char===r);return t||(n.length?n[0]:null)}var v=c.Node3.create({name:"mention",priority:101,addOptions(){return{HTMLAttributes:{},renderText({node:e,suggestion:r}){var n,t;return`${(n=r==null?void 0:r.char)!=null?n:"@"}${(t=e.attrs.label)!=null?t:e.attrs.id}`},deleteTriggerWithBackspace:!1,renderHTML({options:e,node:r,suggestion:n}){var t,s;return["span",c.mergeAttributes(this.HTMLAttributes,e.HTMLAttributes),`${(t=n==null?void 0:n.char)!=null?t:"@"}${(s=r.attrs.label)!=null?s:r.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:r}){const n=p(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,r),this.options.renderLabel({options:this.options,node:e,suggestion:n})];const t={...this.options};t.HTMLAttributes=c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,r);const s=this.options.renderHTML({options:t,node:e,suggestion:n});return typeof s=="string"?["span",c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,r),s]:s},...c.createInlineMarkdownSpec({nodeName:"mention",name:"@",selfClosing:!0,allowedAttributes:["id","label"]}),renderText({node:e}){const r={options:this.options,node:e,suggestion:p(this,e.attrs.mentionSuggestionChar)};return this.options.renderLabel!==void 0?(console.warn("renderLabel is deprecated use renderText and renderHTML instead"),this.options.renderLabel(r)):this.options.renderText(r)},addKeyboardShortcuts(){return{Backspace:()=>this.editor.commands.command(({tr:e,state:r})=>{let n=!1;const{selection:t}=r,{empty:s,anchor:i}=t;if(!s)return!1;let a=new c.Node,d=0;return r.doc.nodesBetween(i-1,i,(u,o)=>{if(u.type.name===this.name)return n=!0,a=u,d=o,!1}),n&&e.insertText(this.options.deleteTriggerWithBackspace?"":a.attrs.mentionSuggestionChar,d,d+a.nodeSize),n})}},addProseMirrorPlugins(){return y(this).map(M.Suggestion)}}),w=v;const x="_listUsers_en3pm_1",S="_itemUser_en3pm_10",A="_selectedUser_en3pm_31",f={listUsers:x,itemUser:S,selectedUser:A},H=g.forwardRef((e,r)=>{const n=g.useRef(null),[t,s]=g.useState(0),i=o=>{const l=e.items[o];l&&(e.command({id:l,label:l}),e!=null&&e.onClose&&(e==null||e.onClose()))},a=()=>{s((t+e.items.length-1)%e.items.length)},d=()=>{s((t+1)%e.items.length)},u=()=>{i(t)};return g.useEffect(()=>s(0),[e.items]),g.useEffect(()=>{if(Number.isNaN(t+1))return;const o=n.current.querySelector(`span:nth-of-type(${t+1})`);o&&T(o,{behavior:"smooth",scrollMode:"if-needed"})},[t]),g.useImperativeHandle(r,()=>({onKeyDown:({event:o})=>o.key==="ArrowUp"?(a(),!0):o.key==="ArrowDown"?(d(),!0):o.key==="Enter"?(u(),!0):!1})),h.jsx("div",{className:m.clsx("listUsers",f.listUsers),children:h.jsx("div",{ref:n,children:e.items.length>0?e.items.map((o,l)=>h.jsx("span",{className:m.clsx("itemUser",f.itemUser,l===t?f.selectedUser:""),onClick:()=>i(l),children:o},l)):h.jsx("div",{className:m.clsx("itemUserEmpty",f.itemUser),children:"Empty"})})})}),C=[{id:"1",name:"John Doe"},{id:"2",name:"Jane Doe"},{id:"3",name:"Alice"},{id:"4",name:"Bob"}],U=w.extend({addAttributes(){return{id:{default:"",parseHTML:m.getDatasetAttribute("id")},label:{default:"",parseHTML:m.getDatasetAttribute("label")}}}}).configure({HTMLAttributes:{class:"mention"},suggestion:{items:async({query:e})=>C.map(n=>n.name).filter(n=>n.toLowerCase().startsWith(e.toLowerCase())),render:()=>{let e;function r(t){if(!e||!e.element)return;const s={getBoundingClientRect(){return t}};m.computePosition(s,e.element,{placement:"bottom-start"}).then(i=>{Object.assign(e.element.style,{left:`${i.x}px`,top:`${i.y}px`,position:i.strategy==="fixed"?"fixed":"absolute"})})}const n=()=>{e&&(document.body.contains(e.element)&&document.body.removeChild(e.element),e.destroy())};return{onStart:t=>{n(),e=new m.ReactRenderer(H,{props:{...t,onClose:n},editor:t.editor}),document.body.appendChild(e.element),r(t.clientRect())},onUpdate(t){e.updateProps(t),r(t.clientRect())},onKeyDown(t){var s;return t.event.key==="Escape"?(document.body.removeChild(e.element),e.destroy(),!0):(s=e.ref)==null?void 0:s.onKeyDown(t)}}}}});exports.Mention=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./index-RfTlOzIr.cjs"),v=require("@tiptap/pm/model"),g=require("./updatePosition-8Sdem5jb.cjs"),w=require("@tiptap/pm/state"),M=require("./index-BH4bc3jN.cjs"),m=require("react/jsx-runtime"),h=require("react"),x=require("./clsx-C11secjj.cjs"),T=require("scroll-into-view-if-needed"),p=require("./dom-dataset-BqoJhJXt.cjs");function L({editor:e,overrideSuggestionOptions:t,extensionName:r,char:n="@"}){const i=new w.PluginKey;return{editor:e,char:n,pluginKey:i,command:({editor:s,range:a,props:l})=>{var d,o,u;const f=s.view.state.selection.$to.nodeAfter;((d=f==null?void 0:f.text)==null?void 0:d.startsWith(" "))&&(a.to+=1),s.chain().focus().insertContentAt(a,[{type:r,attrs:{...l,mentionSuggestionChar:n}},{type:"text",text:" "}]).run(),(u=(o=s.view.dom.ownerDocument.defaultView)==null?void 0:o.getSelection())==null||u.collapseToEnd()},allow:({state:s,range:a})=>{const l=s.doc.resolve(a.from),d=s.schema.nodes[r];return!!l.parent.type.contentMatch.matchType(d)},...t}}function y(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 b(e,t){const r=y(e),n=r.find(i=>i.char===t);return n||(r.length?r[0]:null)}var S=c.Node3.create({name:"mention",priority:101,addOptions(){return{HTMLAttributes:{},renderText({node:e,suggestion:t}){var r,n;return`${(r=t==null?void 0:t.char)!=null?r:"@"}${(n=e.attrs.label)!=null?n:e.attrs.id}`},deleteTriggerWithBackspace:!1,renderHTML({options:e,node:t,suggestion:r}){var n,i;return["span",c.mergeAttributes(this.HTMLAttributes,e.HTMLAttributes),`${(n=r==null?void 0:r.char)!=null?n:"@"}${(i=t.attrs.label)!=null?i: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 r=b(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:r})];const n={...this.options};n.HTMLAttributes=c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,t);const i=this.options.renderHTML({options:n,node:e,suggestion:r});return typeof i=="string"?["span",c.mergeAttributes({"data-type":this.name},this.options.HTMLAttributes,t),i]:i},...c.createInlineMarkdownSpec({nodeName:"mention",name:"@",selfClosing:!0,allowedAttributes:["id","label",{name:"mentionSuggestionChar",skipIfDefault:"@"}],parseAttributes:e=>{const t={},r=/(\w+)=(?:"([^"]*)"|'([^']*)')/g;let n=r.exec(e);for(;n!==null;){const[,i,s,a]=n,l=s??a;t[i==="char"?"mentionSuggestionChar":i]=l,n=r.exec(e)}return t},serializeAttributes:e=>Object.entries(e).filter(([,t])=>t!=null).map(([t,r])=>`${t==="mentionSuggestionChar"?"char":t}="${r}"`).join(" ")}),renderText({node:e}){const t={options:this.options,node:e,suggestion:b(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 r=!1;const{selection:n}=t,{empty:i,anchor:s}=n;if(!i)return!1;let a=new v.Node,l=0;return t.doc.nodesBetween(s-1,s,(d,o)=>{if(d.type.name===this.name)return r=!0,a=d,l=o,!1}),r&&e.insertText(this.options.deleteTriggerWithBackspace?"":a.attrs.mentionSuggestionChar,l,l+a.nodeSize),r})}},addProseMirrorPlugins(){return y(this).map(g.Suggestion)}}),A=S;const H=h.forwardRef((e,t)=>{const r=h.useRef(null),[n,i]=h.useState(0),s=o=>{const u=e.items[o];u&&e.command({id:u,label:u})},a=()=>{i((n+e.items.length-1)%e.items.length)},l=()=>{i((n+1)%e.items.length)},d=()=>{s(n)};return h.useEffect(()=>i(0),[e.items]),h.useEffect(()=>{if(Number.isNaN(n+1))return;const o=r.current.querySelector(`span:nth-of-type(${n+1})`);o&&T(o,{behavior:"smooth",scrollMode:"if-needed"})},[n]),h.useImperativeHandle(t,()=>({onKeyDown:({event:o})=>o.key==="ArrowUp"?(a(),!0):o.key==="ArrowDown"?(l(),!0):o.key==="Enter"?(d(),!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-[hsl(var(--richtext-border))] richtext-bg-popover richtext-p-1 richtext-text-popover-foreground richtext-shadow-md richtext-outline-none",children:m.jsx("div",{ref:r,children:e.items.length>0?e.items.map((o,u)=>m.jsx("span",{className:x.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-neutral-800 !richtext-outline-none richtext-transition-colors hover:!richtext-bg-accent dark:!richtext-text-neutral-200",{"bg-item-active":u===n}),onClick:()=>s(u),children:o},u)):m.jsx("div",{className:x.clsx("itemUserEmpty"),children:"Empty"})})})}),C=[{id:"1",name:"John Doe"},{id:"2",name:"Jane Doe"},{id:"3",name:"Alice"},{id:"4",name:"Bob"}],$=A.extend({addAttributes(){return{id:{default:"",parseHTML:p.getDatasetAttribute("id")},label:{default:"",parseHTML:p.getDatasetAttribute("label")}}}}).configure({HTMLAttributes:{class:"mention"},suggestion:{items:async({query:e})=>C.map(r=>r.name).filter(r=>r.toLowerCase().startsWith(e.toLowerCase())),render:()=>{let e;return{onStart:t=>{t.clientRect&&(e=new M.ReactRenderer(H,{props:t,editor:t.editor}),e.element.style.position="absolute",document.body.appendChild(e.element),g.updatePosition(t.editor,e.element))},onUpdate(t){e.updateProps(t),t.clientRect&&g.updatePosition(t.editor,e.element)},onKeyDown(t){var r;return t.event.key==="Escape"?(e.destroy(),e.element.remove(),!0):(r=e.ref)==null?void 0:r.onKeyDown(t)},onExit(){e.destroy(),e.element.remove()}}}}});exports.Mention=$;

package/lib/Mention.d.cts

@@ -37,11 +37,22 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
         };
     }
 }
@@ -49,8 +60,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        excalidraw: {
-            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -68,7 +80,16 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
         };
     }
 }
@@ -93,10 +114,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -136,22 +155,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Set the indent attribute
-             */
-            indent: () => ReturnType;
-            /**
-             * Set the outdent attribute
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -174,8 +177,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -183,9 +193,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -201,20 +210,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        columns: {
-            insertColumns: (attrs?: {
-                cols: number;
-            }) => ReturnType;
-            addColBefore: () => ReturnType;
-            addColAfter: () => ReturnType;
-            deleteCol: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         search: {
@@ -238,16 +233,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        tableOfContents: {
-            setTableOfContents: () => ReturnType;
-            removeTableOfContents: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         twitter: {

package/lib/Mention.d.ts

@@ -37,11 +37,22 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
         };
     }
 }
@@ -49,8 +60,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        excalidraw: {
-            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -68,7 +80,16 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
         };
     }
 }
@@ -93,10 +114,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -136,22 +155,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Set the indent attribute
-             */
-            indent: () => ReturnType;
-            /**
-             * Set the outdent attribute
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -174,8 +177,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -183,9 +193,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -201,20 +210,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        columns: {
-            insertColumns: (attrs?: {
-                cols: number;
-            }) => ReturnType;
-            addColBefore: () => ReturnType;
-            addColAfter: () => ReturnType;
-            deleteCol: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         search: {
@@ -238,16 +233,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        tableOfContents: {
-            setTableOfContents: () => ReturnType;
-            removeTableOfContents: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         twitter: {