reactjs-tiptap-editor 0.2.29 → 0.3.0

package/lib/SearchAndReplace.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./index-COecBbaE.cjs"),P=require("scroll-into-view-if-needed"),i=require("react/jsx-runtime"),f=require("react"),c=require("./RichTextEditor-DkpDEr5U.cjs"),A=require("./index-LbrE7K9i.cjs");function w({editor:e,...t}){const{t:s}=A.useLocale(),[a,n]=f.useState(-1),[r,l]=f.useState([]),[o,x]=f.useState(""),[u,h]=f.useState(""),[m,C]=f.useState(!1),[p,I]=f.useState(!1);return f.useEffect(()=>{m||(x(""),h(""),n(-1),l([]),e.commands.setSearchTerm(""),e.commands.setReplaceTerm(""))},[e,m]),f.useEffect(()=>{m&&e&&e.commands&&e.commands.setSearchTerm&&e.commands.setSearchTerm(o)},[m,o,e]),f.useEffect(()=>{m&&e&&e.commands&&e.commands.setReplaceTerm&&e.commands.setReplaceTerm(u)},[m,u,e]),f.useEffect(()=>{if(!e)return;const d=e.extensionManager.extensions.find(R=>R.name===j.name);if(!d)return;const T=()=>{if(!m)return;const R=d?d.storage.currentIndex:-1,v=d?d.storage.results:[];n(E=>E!==R?R:E),l(E=>c.deepEqual(E,v)?E:v)};return c.listenEvent(c.EVENTS.SEARCH_REPLCE,T),()=>{d&&c.listenEvent(c.EVENTS.SEARCH_REPLCE,T)}},[m,e]),i.jsxs(c.Popover,{onOpenChange:C,open:m,children:[i.jsx(c.PopoverTrigger,{asChild:!0,disabled:t==null?void 0:t.disabled,children:i.jsx(c.ActionButton,{disabled:t==null?void 0:t.disabled,isActive:t==null?void 0:t.isActive,tooltip:t==null?void 0:t.tooltip,children:i.jsx(c.IconComponent,{name:t==null?void 0:t.icon})})}),i.jsxs(c.PopoverContent,{align:"start",className:"richtext-w-full",hideWhenDetached:!0,side:"bottom",children:[i.jsxs("div",{className:"richtext-mb-[6px] richtext-flex richtext-items-center richtext-justify-between",children:[i.jsx(c.Label,{children:s("editor.search.dialog.text")}),i.jsx("span",{className:"richtext-font-semibold",children:r.length>0?`${a+1}/${r.length}`:"0/0"})]}),i.jsxs("div",{className:"richtext-mb-[10px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5",children:[i.jsx(c.Input,{autoFocus:!0,className:"richtext-w-full",onChange:d=>x(d.target.value),placeholder:"Text",required:!0,type:"text",value:o}),i.jsx(c.Button,{className:"richtext-flex-1",disabled:r.length===0,onClick:e.commands.goToPrevSearchResult,children:i.jsx(c.IconComponent,{name:"ChevronUp"})}),i.jsx(c.Button,{className:"richtext-flex-1",disabled:r.length===0,onClick:e.commands.goToNextSearchResult,children:i.jsx(c.IconComponent,{name:"ChevronDown"})})]}),i.jsx(c.Label,{className:"richtext-mb-[6px]",children:s("editor.replace.dialog.text")}),i.jsx("div",{className:"richtext-mb-[5px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5",children:i.jsx("div",{className:"richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center",children:i.jsx(c.Input,{className:"richtext-w-80",onChange:d=>h(d.target.value),placeholder:"Text",required:!0,type:"text",value:u})})}),i.jsxs("div",{className:"richtext-mb-[10px] richtext-flex richtext-items-center richtext-space-x-2",children:[i.jsx(c.Switch,{checked:p,onCheckedChange:d=>{I(d),e.commands.setCaseSensitive(d)}}),i.jsx(c.Label,{children:s("editor.replace.caseSensitive")})]}),i.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-[10px]",children:[i.jsx(c.Button,{className:"richtext-flex-1",disabled:r.length===0,onClick:e.commands.replace,children:s("editor.replace.dialog.text")}),i.jsx(c.Button,{className:"richtext-flex-1",disabled:r.length===0,onClick:e.commands.replaceAll,children:s("editor.replaceAll.dialog.text")})]})]})]})}const S=(e,t)=>t(e.tr);function V(e,t,s){return RegExp(t?e.replace(/[$()*+./?[\\\]^{|}-]/g,String.raw`\$&`):e,s?"gu":"gui")}function L(e,t,s){const a=[];let n=[];const r=[];let l=0;if(!t)return{decorationsToReturn:[],results:[]};e==null||e.descendants((o,x)=>{o.isText?n[l]?n[l]={text:n[l].text+o.text,pos:n[l].pos}:n[l]={text:`${o.text}`,pos:x}:l+=1}),n=n.filter(Boolean);for(const{text:o,pos:x}of n){const u=[...o.matchAll(t)];for(const h of u){if(h[0]==="")break;h.index!==void 0&&r.push({from:x+h.index,to:x+h.index+h[0].length})}}for(const o of r)a.push(g.Decoration.inline(o.from,o.to,{class:s}));return{decorationsToReturn:a,results:r}}function b(e,t,{state:s,dispatch:a}){if(!t[0])return;const{from:r,to:l}=t[0];a&&a(s.tr.insertText(e,r,l))}function y(e,t,s,a){const n=t+1;if(!a[n])return null;const{from:r,to:l}=a[t],o=l-r-e.length+s,{from:x,to:u}=a[n];return a[n]={to:u-o,from:x-o},[o,a]}function D(e,t,{tr:s,dispatch:a}){let n=0,r=t.slice();if(r.length===0)return!1;for(let l=0;l<r.length;l+=1){const{from:o,to:x}=r[l];s.insertText(e,o,x);const u=y(e,l,n,r);u&&(n=u[0],r=u[1])}return a(s),!0}function N({view:e,tr:t,searchResults:s,searchResultCurrentClass:a,gotoIndex:n}){const r=s[n];if(r){const l=t.setMeta("directDecoration",{fromPos:r.from,toPos:r.to,attrs:{class:a}});return e==null||e.dispatch(l),setTimeout(()=>{const o=window.document.querySelector(`.${a}`);o&&P(o,{behavior:"smooth",scrollMode:"if-needed"})},0),!0}return!1}const j=g.Extension.create({name:"search",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),searchTerm:"",replaceTerm:"",results:[],currentIndex:0,searchResultClass:"search-result",searchResultCurrentClass:"search-result-current",caseSensitive:!1,disableRegex:!1,onChange:()=>{},button:({editor:t,t:s})=>({component:w,componentProps:{action:()=>{},icon:"SearchAndReplace",tooltip:s("editor.searchAndReplace.tooltip"),isActive:()=>!1,disabled:!1,editor:t}})}},addStorage(){return{results:[],currentIndex:-1}},addCommands(){return{setSearchTerm:e=>({state:t,dispatch:s})=>(this.options.searchTerm=e,this.storage.results=[],this.storage.currentIndex=0,c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),S(t,s),!1),setReplaceTerm:e=>({state:t,dispatch:s})=>(this.options.replaceTerm=e,S(t,s),!1),setCaseSensitive:e=>({state:t,dispatch:s})=>(this.options.caseSensitive=e,S(t,s),!1),replace:()=>({state:e,dispatch:t})=>{const{replaceTerm:s}=this.options,{currentIndex:a,results:n}=this.storage,r=n[a];return r?(b(s,[r],{state:e,dispatch:t}),this.storage.results.splice(a,1)):(b(s,n,{state:e,dispatch:t}),this.storage.results.shift()),c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),S(e,t),!1},replaceAll:()=>({state:e,tr:t,dispatch:s})=>{const{replaceTerm:a}=this.options,{results:n}=this.storage;return D(a,n,{tr:t,dispatch:s}),this.storage.currentIndex=-1,this.storage.results=[],c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),S(e,s),!1},goToPrevSearchResult:()=>({view:e,tr:t})=>{const{searchResultCurrentClass:s}=this.options,{currentIndex:a,results:n}=this.storage,r=(a+n.length-1)%n.length;return this.storage.currentIndex=r,c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),N({view:e,tr:t,searchResults:n,searchResultCurrentClass:s,gotoIndex:r})},goToNextSearchResult:()=>({view:e,tr:t})=>{const{searchResultCurrentClass:s}=this.options,{currentIndex:a,results:n}=this.storage,r=(a+1)%n.length;return this.storage.currentIndex=r,this.options.onChange&&this.options.onChange(),c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),N({view:e,tr:t,searchResults:n,searchResultCurrentClass:s,gotoIndex:r})}}},addProseMirrorPlugins(){const e=this;return[new g.Plugin({key:new g.PluginKey("search"),state:{init(){return g.DecorationSet.empty},apply(t){const{doc:s,docChanged:a}=t,{searchTerm:n,searchResultClass:r,searchResultCurrentClass:l,disableRegex:o,caseSensitive:x}=e.options;if(a||n){const{decorationsToReturn:u,results:h}=L(s,V(n,o,x),r);if(e.storage.results=h,e.storage.currentIndex>h.length-1&&(e.storage.currentIndex=0),c.dispatchEvent(c.EVENTS.SEARCH_REPLCE),t.getMeta("directDecoration")){const{fromPos:m,toPos:C,attrs:p}=t.getMeta("directDecoration");u.push(g.Decoration.inline(m,C,p))}else h.length>0&&(u[0]=g.Decoration.inline(h[0].from,h[0].to,{class:l}));return g.DecorationSet.create(s,u)}return g.DecorationSet.empty}},props:{decorations(t){return this.getState(t)}}})]}});exports.SearchAndReplace=j;

package/lib/SearchAndReplace.d.cts

@@ -0,0 +1,358 @@
+import { Editor } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+
+/**
+ * Represents the ButtonView function.
+ */
+declare type ButtonView<T = any> = (options: ButtonViewParams<T>) => ButtonViewReturn | ButtonViewReturn[];
+
+/**
+ * Represents the parameters for the ButtonView function.
+ */
+declare interface ButtonViewParams<T = any> {
+    /** Editor object */
+    editor: Editor;
+    /** Extension object */
+    extension: Extension<T>;
+    /** Translation function */
+    t: (path: string) => string;
+}
+
+/**
+ * Represents the return value for the ButtonView component.
+ */
+declare interface ButtonViewReturn {
+    /** Component */
+    component: unknown;
+    /** Component props */
+    componentProps: ButtonViewReturnComponentProps;
+    /** Component slots */
+    componentSlots?: ButtonViewReturnComponentSlots;
+}
+
+/**
+ * Represents the props for the ButtonView component.
+ */
+declare interface ButtonViewReturnComponentProps {
+    /** Method triggered when action is performed */
+    action?: (value?: any) => void;
+    /** Whether it is in the active state */
+    isActive?: () => boolean;
+    /** Button icon */
+    icon?: any;
+    /** Text displayed on hover */
+    tooltip?: string;
+    [x: string]: any;
+}
+
+/**
+ * Represents the slots for the ButtonView component.
+ */
+declare interface ButtonViewReturnComponentSlots {
+    /** Dialog slot */
+    dialog: () => any;
+    [x: string]: () => any;
+}
+
+/**
+ * Represents the general options for Tiptap extensions.
+ */
+declare interface GeneralOptions<T> {
+    /** Enabled divider */
+    divider: boolean;
+    /** Enabled spacer */
+    spacer: boolean;
+    /** Button view function */
+    button: ButtonView<T>;
+    /** Show on Toolbar */
+    toolbar?: boolean;
+}
+
+declare interface Result {
+    from: number;
+    to: number;
+}
+
+export declare const SearchAndReplace: Extension<SearchOptions, SearchStorage>;
+
+declare interface SearchOptions extends GeneralOptions<SearchOptions> {
+    searchTerm: string;
+    replaceTerm: string;
+    searchResultClass: string;
+    searchResultCurrentClass: string;
+    caseSensitive: boolean;
+    disableRegex: boolean;
+    onChange?: () => void;
+}
+
+declare interface SearchStorage {
+    results: Result[];
+    currentIndex: number;
+}
+
+export { }
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        attachment: {
+            setAttachment: (attrs?: unknown) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        setCodeBlock: {
+            setCodeBlock: (options?: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        exportWord: {
+            exportToWord: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the text font size. ex: "12px", "2em", or "small". Must be a valid
+             * CSS font-size
+             * (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
+             */
+            setFontSize: (fontSize: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        painter: {
+            setPainter: (marks: Mark[]) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+                service: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            /**
+             * Add an image
+             */
+            setImageInline: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Update an image
+             */
+            updateImage: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Set image alignment
+             */
+            setAlignImage: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageGifUpload: {
+            /**
+             * Add an image gif
+             */
+            setImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Update an image gif
+             */
+            updateImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Set image alignment
+             */
+            setAlignImageGif: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+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> {
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        mermaid: {
+            setMermaid: (options: any, replace?: any) => ReturnType;
+            setAlignImageMermaid: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+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: {
+            setSearchTerm: (searchTerm: string) => ReturnType;
+            setReplaceTerm: (replaceTerm: string) => ReturnType;
+            replace: () => ReturnType;
+            replaceAll: () => ReturnType;
+            goToPrevSearchResult: () => void;
+            goToNextSearchResult: () => void;
+            setCaseSensitive: (caseSensitive: boolean) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tableOfContents: {
+            setTableOfContents: () => ReturnType;
+            removeTableOfContents: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        twitter: {
+            /**
+             * Insert a tweet
+             * @param options The tweet attributes
+             * @example editor.commands.setTweet({ src: 'https://x.com/seanpk/status/1800145949580517852' })
+             */
+            setTweet: (options: SetTweetOptions) => ReturnType;
+            updateTweet: (options: SetTweetOptions) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        video: {
+            /**
+             * Add an video
+             */
+            setVideo: (options: Partial<SetVideoOptions>) => ReturnType;
+            /**
+             * Update an video
+             */
+            updateVideo: (options: Partial<SetVideoOptions>) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tableCellBackground: {
+            setTableCellBackground: (color: string) => ReturnType;
+            unsetTableCellBackground: () => ReturnType;
+        };
+    }
+}