reactjs-tiptap-editor 0.2.29 → 0.3.1

package/lib/ExportWord.js

@@ -0,0 +1,72 @@
+import { E as a } from "./index-Drmyqk9P.js";
+import { Packer as i, WidthType as c } from "docx";
+import { defaultNodes as t, DocxSerializer as d, defaultMarks as l } from "prosemirror-docx";
+import { A as p } from "./RichTextEditor-DvrUVNK2.js";
+const m = typeof window < "u";
+function u(e, o) {
+  if (m) {
+    const n = window.URL.createObjectURL(e), r = document.createElement("a");
+    return r.href = n, r.download = o, r.click(), window.URL.revokeObjectURL(n), Promise.resolve();
+  }
+  return console.error("Download is not supported in Node.js"), Promise.resolve();
+}
+const f = {
+  ...t,
+  hardBreak: t.hard_break,
+  codeBlock: t.code_block,
+  orderedList: t.ordered_list,
+  listItem: t.list_item,
+  bulletList: t.bullet_list,
+  horizontalRule: t.horizontal_rule,
+  // Requirement Buffer on browser
+  image(e, o) {
+    e.renderInline(o), e.closeBlock(o);
+  },
+  table(e, o) {
+    e.table(o, {
+      tableOptions: {
+        width: {
+          size: 100,
+          type: c.PERCENTAGE
+        }
+      }
+    });
+  }
+}, w = /* @__PURE__ */ new d(f, l), y = /* @__PURE__ */ a.create({
+  name: "exportWord",
+  addOptions() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      button: ({ editor: o, t: n }) => ({
+        component: p,
+        componentProps: {
+          icon: "ExportWord",
+          action: () => {
+            o == null || o.commands.exportToWord();
+          },
+          tooltip: n("editor.exportWord.tooltip"),
+          isActive: () => !1,
+          disabled: !1
+        }
+      })
+    };
+  },
+  // @ts-expect-error
+  addCommands() {
+    return {
+      exportToWord: () => async ({ editor: e }) => {
+        const o = {
+          getImageBuffer: async (r) => {
+            const s = await (await fetch(r)).arrayBuffer();
+            return new Uint8Array(s);
+          }
+        }, n = w.serialize(e.state.doc, o);
+        return i.toBlob(n).then((r) => u(new Blob([r]), "export-document.docx")), !0;
+      }
+    };
+  }
+});
+export {
+  y as ExportWord
+};

package/lib/FontFamily.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-DjP7Onch.cjs");const y=require("./index-COecBbaE.cjs"),m=require("./index-LbrE7K9i.cjs"),o=require("react/jsx-runtime"),F=require("react"),h=require("./ActionMenuButton-tLPdHfCT.cjs"),s=require("./RichTextEditor-CM-Xq9RS.cjs"),x=y.Extension.create({name:"fontFamily",addOptions(){return{types:["textStyle"]}},addGlobalAttributes(){return[{types:this.options.types,attributes:{fontFamily:{default:null,parseHTML:t=>t.style.fontFamily,renderHTML:t=>t.fontFamily?{style:`font-family: ${t.fontFamily}`}:{}}}}]},addCommands(){return{setFontFamily:t=>({chain:i})=>i().setMark("textStyle",{fontFamily:t}).run(),unsetFontFamily:()=>({chain:t})=>t().setMark("textStyle",{fontFamily:null}).removeEmptyTextStyle().run()}}});function M(t){var r,f,d;const{t:i,lang:u}=m.useLocale(),e=F.useMemo(()=>{var a;const n=(a=t==null?void 0:t.items)==null?void 0:a.find(l=>l.isActive());return n&&!n.default?{...n}:{title:t.tooltip,font:i("editor.fontFamily.default.tooltip"),isActive:()=>!1,disabled:!1,action:()=>t.editor.chain().focus().unsetFontFamily().run()}},[i,u,t]);return o.jsxs(s.DropdownMenu,{children:[o.jsx(s.DropdownMenuTrigger,{asChild:!0,disabled:t==null?void 0:t.disabled,children:o.jsx(h.ActionMenuButton,{disabled:t==null?void 0:t.disabled,icon:"MenuDown",title:((r=e==null?void 0:e.font)==null?void 0:r.length)>7?`${(f=e==null?void 0:e.font)==null?void 0:f.slice(0,6)}...`:e==null?void 0:e.font,tooltip:t==null?void 0:t.tooltip})}),o.jsx(s.DropdownMenuContent,{className:"richtext-w-full",children:(d=t==null?void 0:t.items)==null?void 0:d.map((n,c)=>{const a=n.font===i("editor.fontFamily.default.tooltip")?{}:{fontFamily:n.font};return o.jsxs(F.Fragment,{children:[o.jsx(s.DropdownMenuCheckboxItem,{checked:(e==null?void 0:e.font)===n.font,onClick:n.action,children:o.jsx("div",{className:"richtext-ml-1 richtext-h-full",style:a,children:n.font})}),n.font===i("editor.fontFamily.default.tooltip")&&o.jsx(s.DropdownMenuSeparator,{})]},`font-family-${c}`)})})]})}const b=x.extend({addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),fontFamilyList:m.DEFAULT_FONT_FAMILY_LIST,button({editor:i,extension:u,t:e}){var a;const{extensions:r=[]}=i.extensionManager??[],f=s.ensureNameValueOptions(((a=u==null?void 0:u.options)==null?void 0:a.fontFamilyList)||[]),d=r.find(l=>l.name==="base-kit"),n=f.map(l=>({action:()=>{i.chain().focus().setFontFamily(l.value).run()},isActive:()=>i.isActive("textStyle",{fontFamily:l.value})||!1,disabled:!i.can().setFontFamily(l.value),title:l.name,font:l.value}));d&&d.options.textStyle!==!1&&n.unshift({action:()=>i.chain().focus().unsetFontFamily().run(),isActive:()=>!1,disabled:!1,font:e("editor.fontFamily.default.tooltip"),title:e("editor.fontFamily.tooltip")});const c=n.filter(l=>l.disabled).length===n.length;return{component:M,componentProps:{tooltip:e("editor.fontFamily.tooltip"),disabled:c,items:n,editor:i}}}}}});exports.DEFAULT_FONT_FAMILY_LIST=m.DEFAULT_FONT_FAMILY_LIST;exports.FontFamily=b;

package/lib/FontFamily.d.cts

@@ -0,0 +1,354 @@
+import { Editor } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+import { FontFamilyOptions as FontFamilyOptions_2 } from '@tiptap/extension-font-family';
+
+/**
+ * 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;
+}
+
+/** Default font family list */
+export declare const DEFAULT_FONT_FAMILY_LIST: string[];
+
+export declare const FontFamily: Extension<FontFamilyOptions, any>;
+
+export declare interface FontFamilyOptions extends FontFamilyOptions_2, GeneralOptions<FontFamilyOptions> {
+    /**
+     * Font family list.
+     */
+    fontFamilyList: (string | NameValueOption)[];
+}
+
+/**
+ * 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 NameValueOption<T = string> {
+    name: string;
+    value: T;
+}
+
+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> {
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => 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;
+        };
+    }
+}