reactjs-tiptap-editor 0.2.29 → 0.3.1

package/lib/TableOfContent.js

@@ -0,0 +1,184 @@
+import { N as b, m as v } from "./index-Drmyqk9P.js";
+import { N as C, c as g, R as N } from "./dom-dataset-CJ7GyQ2E.js";
+import { jsx as l, jsxs as T } from "react/jsx-runtime";
+import { useState as p, useCallback as m, useEffect as d } from "react";
+import { u as O } from "./index-D9llIWB5.js";
+import { _, A as y } from "./RichTextEditor-DvrUVNK2.js";
+const x = "_toc_aag8a_1", A = "_visible_aag8a_7", w = "_list_aag8a_11", E = "_item_aag8a_16", f = {
+  toc: x,
+  visible: A,
+  list: w,
+  item: E
+};
+function k(t) {
+  const o = [], a = [o];
+  return t.forEach((n) => {
+    let e = -1, s = a[n.level + e];
+    for (; !s; )
+      e -= 1, s = a[n.level + e];
+    s.push({ ...n, children: a[n.level] = [] });
+  }), o;
+}
+function M({ editor: t }) {
+  const o = _(), [a, n] = p([]), { t: e } = O(), s = m(() => {
+    const i = [], r = t.state.tr;
+    t.state.doc.descendants((c, h) => {
+      if (c.type.name === "heading") {
+        const u = `heading-${i.length + 1}`;
+        c.attrs.id !== u && r.setNodeMarkup(h, void 0, {
+          ...c.attrs,
+          id: u
+        }), i.push({
+          level: c.attrs.level,
+          text: c.textContent,
+          id: u
+        });
+      }
+    }), r.setMeta("addToHistory", !1), r.setMeta("preventUpdate", !0), t.view.dispatch(r), n(i), t.eventEmitter && t.eventEmitter.emit("TableOfContents", k(i));
+  }, [t]);
+  return d(() => {
+    if (t) {
+      if (!t.options.editable) {
+        s();
+        return;
+      }
+      return t.on("update", s), () => {
+        t.off("update", s);
+      };
+    }
+  }, [t, s]), d(() => {
+    s();
+  }, []), /* @__PURE__ */ l(C, { className: g("tableOfContent", f.toc, o && f.visible), children: o ? /* @__PURE__ */ T("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ l("p", { className: "text-[20px] richtext-mb-[8px] richtext-font-semibold", children: e("editor.table_of_content") }),
+    /* @__PURE__ */ l("ul", { className: f.list, children: a.map((i, r) => /* @__PURE__ */ l(
+      "li",
+      {
+        className: f.item,
+        style: { paddingLeft: `${i.level - 1}rem` },
+        children: /* @__PURE__ */ l("a", { href: `#${i.id}`, children: i.text })
+      },
+      `table-of-content-${r}`
+    )) })
+  ] }) : null });
+}
+function B(t, ...o) {
+  const [a, n] = p(!1);
+  return d(() => {
+    const e = () => {
+      n(t.isActive.apply(t, o));
+    };
+    return t.on("selectionUpdate", e), t.on("transaction", e), () => {
+      t.off("selectionUpdate", e), t.off("transaction", e);
+    };
+  }, [t, o, n]), a;
+}
+function H({ editor: t, icon: o, tooltip: a }) {
+  const n = B(t, z.name), e = m(() => {
+    if (n) {
+      t.chain().focus().removeTableOfContents().run();
+      return;
+    }
+    t.chain().focus().setTableOfContents().run();
+  }, [t, n]);
+  return /* @__PURE__ */ l(
+    y,
+    {
+      action: e,
+      isActive: () => n || !1,
+      icon: o,
+      tooltip: a
+    }
+  );
+}
+function L(t) {
+  return t && t.type.name === "title";
+}
+function S(t, o) {
+  const n = [t.getJSON()], e = [];
+  for (; n.length > 0; ) {
+    const s = n.shift();
+    s.type === o && e.push(s), s.content && s.content.length > 0 && n.push(...s.content);
+  }
+  return e;
+}
+const z = /* @__PURE__ */ b.create({
+  name: "tableOfContents",
+  group: "block",
+  atom: !0,
+  addOptions() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      onHasOneBeforeInsert: () => {
+      },
+      resizable: !0,
+      lastColumnResizable: !0,
+      allowTableNodeSelection: !1,
+      button: ({ editor: o, t: a }) => ({
+        component: H,
+        componentProps: {
+          disabled: !1,
+          icon: "BookMarked",
+          tooltip: a("editor.table.tooltip"),
+          editor: o
+        }
+      })
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "toc"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["toc", v(t)];
+  },
+  addNodeView() {
+    return N(M);
+  },
+  // @ts-expect-error
+  addCommands() {
+    return {
+      setTableOfContents: () => ({ commands: t, editor: o, view: a }) => {
+        if (S(o, this.name).length > 0) {
+          this.options.onHasOneBeforeInsert();
+          return;
+        }
+        const e = a.props.state.doc.content.firstChild;
+        if (L(e)) {
+          const s = (e.firstChild && e.firstChild.nodeSize || 0) + 1;
+          return t.insertContentAt(s, { type: this.name });
+        }
+        return t.insertContent({
+          type: this.name
+        });
+      },
+      removeTableOfContents: () => ({ state: t, dispatch: o }) => {
+        const { tr: a } = t, n = t.schema.nodes.tableOfContents;
+        return t.doc.descendants((e, s) => {
+          if (e.type === n) {
+            const i = s, r = s + e.nodeSize;
+            a.delete(i, r);
+          }
+        }), a.docChanged ? (o(a), !0) : !1;
+      }
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["heading"],
+        attributes: {
+          id: {
+            default: null
+          }
+        }
+      }
+    ];
+  }
+});
+export {
+  z as TableOfContents
+};

package/lib/TaskList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-COecBbaE.cjs"),k=require("./RichTextEditor-CM-Xq9RS.cjs"),b=/^\s*(\[([( |x])?\])\s$/,f=a.Node.create({name:"taskItem",addOptions(){return{nested:!1,HTMLAttributes:{},taskListTypeName:"taskList"}},content(){return this.options.nested?"paragraph block*":"paragraph+"},defining:!0,addAttributes(){return{checked:{default:!1,keepOnSplit:!1,parseHTML:t=>{const n=t.getAttribute("data-checked");return n===""||n==="true"},renderHTML:t=>({"data-checked":t.checked})}}},parseHTML(){return[{tag:`li[data-type="${this.name}"]`,priority:51}]},renderHTML({node:t,HTMLAttributes:n}){return["li",a.mergeAttributes(this.options.HTMLAttributes,n,{"data-type":this.name}),["label",["input",{type:"checkbox",checked:t.attrs.checked?"checked":null}],["span"]],["div",0]]},addKeyboardShortcuts(){const t={Enter:()=>this.editor.commands.splitListItem(this.name),"Shift-Tab":()=>this.editor.commands.liftListItem(this.name)};return this.options.nested?{...t,Tab:()=>this.editor.commands.sinkListItem(this.name)}:t},addNodeView(){return({node:t,HTMLAttributes:n,getPos:c,editor:o})=>{const i=document.createElement("li"),d=document.createElement("label"),m=document.createElement("span"),s=document.createElement("input"),p=document.createElement("div");return d.contentEditable="false",s.type="checkbox",s.addEventListener("mousedown",e=>e.preventDefault()),s.addEventListener("change",e=>{if(!o.isEditable&&!this.options.onReadOnlyChecked){s.checked=!s.checked;return}const{checked:r}=e.target;o.isEditable&&typeof c=="function"&&o.chain().focus(void 0,{scrollIntoView:!1}).command(({tr:l})=>{const u=c();if(typeof u!="number")return!1;const h=l.doc.nodeAt(u);return l.setNodeMarkup(u,void 0,{...h==null?void 0:h.attrs,checked:r}),!0}).run(),!o.isEditable&&this.options.onReadOnlyChecked&&(this.options.onReadOnlyChecked(t,r)||(s.checked=!s.checked))}),Object.entries(this.options.HTMLAttributes).forEach(([e,r])=>{i.setAttribute(e,r)}),i.dataset.checked=t.attrs.checked,s.checked=t.attrs.checked,d.append(s,m),i.append(d,p),Object.entries(n).forEach(([e,r])=>{i.setAttribute(e,r)}),{dom:i,contentDOM:p,update:e=>e.type!==this.type?!1:(i.dataset.checked=e.attrs.checked,s.checked=e.attrs.checked,!0)}}},addInputRules(){return[a.wrappingInputRule({find:b,type:this.type,getAttributes:t=>({checked:t[t.length-1]==="x"})})]}}),L=a.Node.create({name:"taskList",addOptions(){return{itemTypeName:"taskItem",HTMLAttributes:{}}},group:"block list",content(){return`${this.options.itemTypeName}+`},parseHTML(){return[{tag:`ul[data-type="${this.name}"]`,priority:51}]},renderHTML({HTMLAttributes:t}){return["ul",a.mergeAttributes(this.options.HTMLAttributes,t,{"data-type":this.name}),0]},addCommands(){return{toggleTaskList:()=>({commands:t})=>t.toggleList(this.name,this.options.itemTypeName)}},addKeyboardShortcuts(){return{"Mod-Shift-9":()=>this.editor.commands.toggleTaskList()}}}),T=L.extend({addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),HTMLAttributes:{class:"task-list"},taskItem:{HTMLAttributes:{class:"task-list-item"}},button:({editor:n,t:c})=>({component:k.ActionButton,componentProps:{action:()=>n.commands.toggleTaskList(),isActive:()=>n.isActive("taskList")||!1,disabled:!1,icon:"ListTodo",shortcutKeys:["shift","mod","9"],tooltip:c("editor.tasklist.tooltip")}})}},addExtensions(){return[f.configure(this.options.taskItem)]}});exports.TaskList=T;

package/lib/TaskList.d.cts

@@ -0,0 +1,349 @@
+import { Editor } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+import { Node as Node_2 } from '@tiptap/core';
+import { TaskItemOptions } from '@tiptap/extension-task-item';
+import { TaskListOptions as TaskListOptions_2 } from '@tiptap/extension-task-list';
+
+/**
+ * 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;
+}
+
+export declare const TaskList: Node_2<TaskListOptions, any>;
+
+/**
+ * Represents the interface for task list options, extending TiptapTaskListOptions and GeneralOptions.
+ */
+export declare interface TaskListOptions extends TaskListOptions_2, GeneralOptions<TaskListOptions> {
+    /** options for task items */
+    taskItem: Partial<TaskItemOptions>;
+}
+
+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;
+        };
+    }
+}