reactjs-tiptap-editor 0.2.29 → 0.3.0

package/lib/TextAlign.js

@@ -0,0 +1,165 @@
+import { E as T } from "./index-Drmyqk9P.js";
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+import { P as M, m as v, A as S, k as A, n as C, T as j, a as K, r as w, b as P, s as z } from "./RichTextEditor-Cy9XKEI5.js";
+const L = T.create({
+  name: "textAlign",
+  addOptions() {
+    return {
+      types: [],
+      alignments: ["left", "center", "right", "justify"],
+      defaultAlignment: null
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          textAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (t) => {
+              const i = t.style.textAlign;
+              return this.options.alignments.includes(i) ? i : this.options.defaultAlignment;
+            },
+            renderHTML: (t) => t.textAlign ? { style: `text-align: ${t.textAlign}` } : {}
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setTextAlign: (t) => ({ commands: i }) => this.options.alignments.includes(t) ? this.options.types.map((l) => i.updateAttributes(l, { textAlign: t })).every((l) => l) : !1,
+      unsetTextAlign: () => ({ commands: t }) => this.options.types.map((i) => t.resetAttributes(i, "textAlign")).every((i) => i)
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-l": () => this.editor.commands.setTextAlign("left"),
+      "Mod-Shift-e": () => this.editor.commands.setTextAlign("center"),
+      "Mod-Shift-r": () => this.editor.commands.setTextAlign("right"),
+      "Mod-Shift-j": () => this.editor.commands.setTextAlign("justify")
+    };
+  }
+});
+function N(t) {
+  var l;
+  const i = b(() => {
+    var a;
+    const e = (a = t == null ? void 0 : t.items) == null ? void 0 : a.find((c) => c.isActive());
+    return e && !e.default ? {
+      ...e,
+      icon: e.icon ? e.icon : t.icon
+    } : {
+      title: t == null ? void 0 : t.tooltip,
+      icon: t.icon,
+      isActive: () => !1
+    };
+  }, [t]);
+  return /* @__PURE__ */ g(M, { modal: !0, children: [
+    /* @__PURE__ */ n(
+      v,
+      {
+        asChild: !0,
+        disabled: t == null ? void 0 : t.disabled,
+        children: /* @__PURE__ */ n(
+          S,
+          {
+            customClass: "!richtext-w-12 richtext-h-12",
+            disabled: t == null ? void 0 : t.disabled,
+            icon: t == null ? void 0 : t.icon,
+            tooltip: t == null ? void 0 : t.tooltip,
+            children: /* @__PURE__ */ n(
+              A,
+              {
+                className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
+                name: "MenuDown"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      C,
+      {
+        align: "start",
+        className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
+        side: "bottom",
+        children: (l = t == null ? void 0 : t.items) == null ? void 0 : l.map((e, r) => {
+          var a, c;
+          return /* @__PURE__ */ g(j, { children: [
+            /* @__PURE__ */ n(K, { asChild: !0, children: /* @__PURE__ */ n(
+              w,
+              {
+                className: "richtext-size-7 richtext-p-1",
+                "data-state": i.title === e.title ? "on" : "off",
+                onClick: e == null ? void 0 : e.action,
+                pressed: i.title === e.title,
+                size: "sm",
+                children: (e == null ? void 0 : e.icon) && /* @__PURE__ */ n(A, { name: e.icon })
+              }
+            ) }),
+            /* @__PURE__ */ g(P, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
+              /* @__PURE__ */ n("span", { children: e.title }),
+              !!((a = e.shortcutKeys) != null && a.length) && /* @__PURE__ */ n("span", { children: (c = e.shortcutKeys) == null ? void 0 : c.map((o) => z(o)).join(" ") })
+            ] })
+          ] }, `text-align-${r}`);
+        })
+      }
+    )
+  ] });
+}
+const H = /* @__PURE__ */ L.extend({
+  addOptions() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      types: ["heading", "paragraph", "list_item", "title"],
+      button({
+        editor: i,
+        extension: l,
+        t: e
+      }) {
+        var u;
+        const r = ((u = l.options) == null ? void 0 : u.alignments) || [], a = {
+          left: ["mod", "Shift", "L"],
+          center: ["mod", "Shift", "E"],
+          right: ["mod", "Shift", "R"],
+          justify: ["mod", "Shift", "J"]
+        }, c = {
+          left: "AlignLeft",
+          center: "AlignCenter",
+          right: "AlignRight",
+          justify: "AlignJustify"
+        }, o = r.map((s) => {
+          var x, h, m;
+          return {
+            title: e(`editor.textalign.${s}.tooltip`),
+            icon: c[s],
+            shortcutKeys: a[s],
+            isActive: () => i.isActive({ textAlign: s }) || !1,
+            action: () => {
+              var d, f;
+              return (f = (d = i.commands) == null ? void 0 : d.setTextAlign) == null ? void 0 : f.call(d, s);
+            },
+            disabled: !((m = (h = (x = i == null ? void 0 : i.can) == null ? void 0 : x.call(i)) == null ? void 0 : h.setTextAlign) != null && m.call(h, s))
+          };
+        }), y = o.filter((s) => s.disabled).length === o.length;
+        return {
+          component: N,
+          componentProps: {
+            icon: "AlignJustify",
+            tooltip: e("editor.textalign.tooltip"),
+            disabled: y,
+            items: o
+          }
+        };
+      }
+    };
+  }
+});
+export {
+  H as TextAlign
+};

package/lib/TextBubble.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("./index-COecBbaE.cjs"),t=require("react/jsx-runtime"),l=require("react"),x=require("lucide-react"),c=require("./RichTextEditor-DkpDEr5U.cjs"),g=require("./index-LbrE7K9i.cjs");function b(e){const{t:i}=g.useLocale(),n=l.useMemo(()=>[{name:"paragraph",label:i("editor.paragraph.tooltip"),iconName:"Heading1",isActive:()=>e.editor.isActive("paragraph")&&!e.editor.isActive("orderedList")&&!e.editor.isActive("bulletList")&&!e.editor.isActive("taskList"),action:()=>e.editor.chain().focus().clearNodes().run()},{name:"heading1",label:i("editor.heading.h1.tooltip"),isActive:()=>e.editor.isActive("heading",{level:1}),iconName:"Heading1",action:()=>e.editor.chain().focus().clearNodes().toggleHeading({level:1}).run()},{name:"heading2",label:i("editor.heading.h2.tooltip"),isActive:()=>e.editor.isActive("heading",{level:2}),iconName:"Heading2",action:()=>e.editor.chain().focus().clearNodes().toggleHeading({level:2}).run()},{name:"heading3",label:i("editor.heading.h3.tooltip"),isActive:()=>e.editor.isActive("heading",{level:3}),iconName:"Heading3",action:()=>e.editor.chain().focus().clearNodes().toggleHeading({level:3}).run()},{name:"bulletList",label:i("editor.bulletlist.tooltip"),isActive:()=>e.editor.isActive("bulletList"),iconName:"List",action:()=>e.editor.chain().focus().clearNodes().toggleBulletList().run()},{name:"numberedList",label:i("editor.orderedlist.tooltip"),isActive:()=>e.editor.isActive("orderedList"),iconName:"ListOrdered",action:()=>e.editor.chain().focus().clearNodes().toggleOrderedList().run()},{name:"taskList",label:i("editor.tasklist.tooltip"),isActive:()=>e.editor.isActive("taskList"),iconName:"ListTodo",action:()=>e.editor.chain().focus().clearNodes().toggleTaskList().run()},{name:"blockquote",label:i("editor.blockquote.tooltip"),isActive:()=>e.editor.isActive("blockquote"),iconName:"TextQuote",action:()=>e.editor.chain().focus().clearNodes().toggleBlockquote().run()}],[e.editor,i]),a=l.useMemo(()=>n.findLast(o=>o.isActive())??{label:"Empty"},[n]);return t.jsxs(c.DropdownMenu,{children:[t.jsx(c.DropdownMenuTrigger,{asChild:!0,children:t.jsxs(c.Button,{className:"richtext-flex richtext-h-[32px] richtext-gap-1 richtext-px-1.5",variant:"ghost",children:[t.jsxs("span",{className:"richtext-whitespace-nowrap richtext-text-sm richtext-font-normal",children:[" ",a==null?void 0:a.label]}),t.jsx(x.ChevronDown,{className:"richtext-size-4"})]})}),t.jsx(c.DropdownMenuContent,{align:"start",className:"richtext-w-full richtext-p-1",hideWhenDetached:!0,sideOffset:5,children:n.map((o,d)=>{var r;const u=c.icons[o.iconName];return t.jsx(c.DropdownMenuCheckboxItem,{checked:((r=o.isActive)==null?void 0:r.call(o))||!1,className:"richtext-cursor-pointer",onClick:()=>o.action(),children:t.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-2 richtext-px-2",children:[t.jsx(u,{className:"richtext-h3 richtext-w-3"}),t.jsxs("span",{children:[" ",o.label]})]})},`text-bubble-${d}`)})})]})}const s=h.Extension.create({name:"text-bubble",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),toolbar:!1,button:()=>({component:b,componentProps:{}})}}});exports.TextBubble=s;exports.default=s;

package/lib/TextBubble.d.cts

@@ -0,0 +1,343 @@
+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 const TextBubble: Extension<TextBubbleOptions, any>;
+export { TextBubble }
+export default TextBubble;
+
+export declare interface TextBubbleOptions extends GeneralOptions<TextBubbleOptions> {
+}
+
+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;
+        };
+    }
+}