reactjs-tiptap-editor 0.4.2 → 1.0.0

package/lib/FontFamily.js

@@ -1,101 +1,99 @@
-import { F } from "./index-ByurDDMv.js";
-import { u as r, D as h } from "./index-LmrOdnen.js";
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useMemo as y, Fragment as b } from "react";
-import { A as M } from "./ActionMenuButton-DKRF6oa0.js";
-import { D as x, h as A, j as D, k as g, l as w, m as L } from "./RichTextEditor-DGcKEUGr.js";
-function k(t) {
-  var m, s, d;
-  const { t: e, lang: f } = r(), n = y(() => {
-    var o;
-    const i = (o = t == null ? void 0 : t.items) == null ? void 0 : o.find((l) => l.isActive());
-    return i && !i.default ? {
-      ...i
-    } : {
-      title: t.tooltip,
-      font: e("editor.fontFamily.default.tooltip"),
-      isActive: () => !1,
-      disabled: !1,
-      action: () => t.editor.chain().focus().unsetFontFamily().run()
-    };
-  }, [e, f, t]);
-  return /* @__PURE__ */ c(x, { children: [
-    /* @__PURE__ */ a(
-      A,
+import { F as p } from "./index-D2TUfKkC.js";
+import { u as F, D as y } from "./index-DYkucCoF.js";
+import { u as h, b as v, e as A } from "./useButtonProps-BsEd4zYM.js";
+import { jsx as i, Fragment as D, jsxs as f } from "react/jsx-runtime";
+import { useMemo as M, Fragment as w } from "react";
+import { A as L } from "./ActionMenuButton-BKOg7hkq.js";
+import "./index-BPfVXs5_.js";
+import { D as b, a as g, b as x, c as T, d as C } from "./dropdown-menu-BPp2Z_U-.js";
+function S() {
+  const { t: a } = F(), n = h(N.name), {
+    icon: s = void 0,
+    tooltip: c = void 0,
+    items: l = [],
+    isActive: r = void 0
+  } = (n == null ? void 0 : n.componentProps) ?? {}, { disabled: u, dataState: t } = v(r), o = M(() => (t == null ? void 0 : t.font) || a("editor.fontFamily.default.tooltip"), [t]);
+  return n ? /* @__PURE__ */ f(b, { children: [
+    /* @__PURE__ */ i(
+      g,
       {
         asChild: !0,
-        disabled: t == null ? void 0 : t.disabled,
-        children: /* @__PURE__ */ a(
-          M,
+        disabled: u,
+        children: /* @__PURE__ */ i(
+          L,
           {
-            disabled: t == null ? void 0 : t.disabled,
-            icon: "MenuDown",
-            title: ((m = n == null ? void 0 : n.font) == null ? void 0 : m.length) > 7 ? `${(s = n == null ? void 0 : n.font) == null ? void 0 : s.slice(0, 6)}...` : n == null ? void 0 : n.font,
-            tooltip: t == null ? void 0 : t.tooltip,
-            tooltipOptions: t == null ? void 0 : t.tooltipOptions
+            disabled: u,
+            icon: s,
+            title: (o == null ? void 0 : o.length) > 12 ? `${o == null ? void 0 : o.slice(0, 12)}...` : o,
+            tooltip: c
           }
         )
       }
     ),
-    /* @__PURE__ */ a(D, { className: "richtext-w-full", children: (d = t == null ? void 0 : t.items) == null ? void 0 : d.map((i, u) => {
-      const o = i.font === e("editor.fontFamily.default.tooltip") ? {} : { fontFamily: i.font };
-      return /* @__PURE__ */ c(b, { children: [
-        /* @__PURE__ */ a(
-          g,
+    /* @__PURE__ */ i(x, { className: "richtext-w-full", children: l == null ? void 0 : l.map((e, m) => {
+      const d = e.font === a("editor.fontFamily.default.tooltip") ? {} : { fontFamily: e.font };
+      return /* @__PURE__ */ f(w, { children: [
+        /* @__PURE__ */ i(
+          T,
           {
-            checked: (n == null ? void 0 : n.font) === i.font,
-            onClick: i.action,
-            children: /* @__PURE__ */ a(
+            checked: o === e.font,
+            onClick: e.action,
+            children: /* @__PURE__ */ i(
               "div",
               {
                 className: "richtext-ml-1 richtext-h-full",
-                style: o,
-                children: i.font
+                style: d,
+                children: e.font
               }
             )
           }
         ),
-        i.font === e("editor.fontFamily.default.tooltip") && /* @__PURE__ */ a(w, {})
-      ] }, `font-family-${u}`);
+        e.font === a("editor.fontFamily.default.tooltip") && /* @__PURE__ */ i(C, {})
+      ] }, `font-family-${m}`);
     }) })
-  ] });
+  ] }) : /* @__PURE__ */ i(D, {});
 }
-const v = /* @__PURE__ */ F.extend({
+const N = /* @__PURE__ */ p.extend({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-expect-error
   addOptions() {
-    var t;
+    var a;
     return {
-      ...(t = this.parent) == null ? void 0 : t.call(this),
-      fontFamilyList: h,
-      button({ editor: e, extension: f, t: n }) {
-        var o;
-        const { extensions: m = [] } = e.extensionManager ?? [], s = L(((o = f == null ? void 0 : f.options) == null ? void 0 : o.fontFamilyList) || []), d = m.find(
-          (l) => l.name === "base-kit"
-        ), i = s.map((l) => ({
+      ...(a = this.parent) == null ? void 0 : a.call(this),
+      fontFamilyList: y,
+      button({ editor: n, extension: s, t: c }) {
+        var u;
+        const l = A(((u = s == null ? void 0 : s.options) == null ? void 0 : u.fontFamilyList) || []), r = l.map((t) => ({
           action: () => {
-            e.chain().focus().setFontFamily(l.value).run();
+            if (t.value === "Default") {
+              n.chain().focus().unsetFontFamily().run();
+              return;
+            }
+            n.chain().focus().setFontFamily(t.value).run();
           },
-          isActive: () => e.isActive("textStyle", { fontFamily: l.value }) || !1,
-          disabled: !e.can().setFontFamily(l.value),
-          title: l.name,
-          font: l.value
+          isActive: () => n.isActive("textStyle", { fontFamily: t.value }) || !1,
+          // disabled: !editor.can().setFontFamily(font.value),
+          title: t.name,
+          font: t.value,
+          default: t.value === "Default"
         }));
-        d && d.options.textStyle !== !1 && i.unshift({
-          action: () => e.chain().focus().unsetFontFamily().run(),
-          isActive: () => !1,
-          disabled: !1,
-          font: n("editor.fontFamily.default.tooltip"),
-          title: n("editor.fontFamily.tooltip")
-        });
-        const u = i.filter((l) => l.disabled).length === i.length;
         return {
-          component: k,
+          // component: FontFamilyButton,
           componentProps: {
-            tooltip: n("editor.fontFamily.tooltip"),
-            disabled: u,
-            items: i,
-            editor: e
+            tooltip: c("editor.fontFamily.tooltip"),
+            disabled: !1,
+            items: r,
+            isActive: () => {
+              const t = r == null ? void 0 : r.find((e) => e.isActive());
+              return t && !t.default ? t : {
+                title: c("editor.fontFamily.default.tooltip"),
+                font: c("editor.fontFamily.default.tooltip"),
+                isActive: () => !1,
+                disabled: !1
+              };
+            },
+            icon: "MenuDown",
+            fontFamilyList: l
           }
         };
       }
@@ -103,6 +101,6 @@ const v = /* @__PURE__ */ F.extend({
   }
 });
 export {
-  h as DEFAULT_FONT_FAMILY_LIST,
-  v as FontFamily
+  N as FontFamily,
+  S as RichTextFontFamily
 };

package/lib/FontSize.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("./index-DF2Lp4HZ.cjs"),r=require("./index-6D1J-A-o.cjs"),a=require("./RichTextEditor-CxvwGvQG.cjs"),u=require("react/jsx-runtime"),m=require("react"),z=require("./ActionMenuButton-CYdM1xx5.cjs");function x(t){var s;const{t:e}=r.useLocale(),l=m.useMemo(()=>{const i=(t.items||[]).find(c=>c.isActive());return i||{title:e("editor.fontSize.default.tooltip"),isActive:()=>!1}},[t]);return u.jsxs(a.DropdownMenu,{children:[u.jsx(a.DropdownMenuTrigger,{asChild:!0,disabled:t==null?void 0:t.disabled,children:u.jsx(z.ActionMenuButton,{disabled:t==null?void 0:t.disabled,icon:"MenuDown",title:l==null?void 0:l.title,tooltip:`${t==null?void 0:t.tooltip}`,tooltipOptions:t==null?void 0:t.tooltipOptions})}),u.jsx(a.DropdownMenuContent,{className:"richtext-max-h-96 richtext-w-32 richtext-overflow-y-auto",children:(s=t==null?void 0:t.items)==null?void 0:s.map((i,o)=>u.jsx(a.DropdownMenuCheckboxItem,{checked:l.title===i.title,onClick:i.action,children:u.jsx("div",{className:"richtext-ml-1 richtext-h-full",children:i.title})},`font-size-${o}`))})]})}const v=f.Extension.create({name:"fontSize",addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),types:["textStyle"],fontSizes:[...r.DEFAULT_FONT_SIZE_LIST],button({editor:e,extension:l,t:s}){var d;const i=a.ensureNameValueOptions(((d=l.options)==null?void 0:d.fontSizes)||r.DEFAULT_FONT_SIZE_VALUE),o=a.ensureNameValueOptions([r.DEFAULT_FONT_SIZE_VALUE])[0],c=i.map(n=>({title:n.value===o.value?s("editor.fontSize.default.tooltip"):String(n.name),isActive:()=>{const{fontSize:S}=e.getAttributes("textStyle");return n.value===o.value&&S===void 0?!0:e.isActive({fontSize:String(n.value)})||!1},action:()=>{if(n.value===o.value){e.commands.unsetFontSize();return}e.commands.setFontSize(String(n.value))},disabled:!e.can().setFontSize(String(n.value)),divider:n.value===o.value||!1,default:n.value===o.value||!1}));return{component:x,componentProps:{editor:e,tooltip:s("editor.fontSize.tooltip"),disabled:!1,items:c,maxHeight:280}}}}},addGlobalAttributes(){return[{types:this.options.types,attributes:{fontSize:{default:null,parseHTML:t=>t.style.fontSize.replaceAll(/["']+/g,""),renderHTML:t=>t.fontSize?{style:`font-size: ${t.fontSize}`}:{}}}}]},addCommands(){return{setFontSize:t=>({chain:e})=>e().setMark("textStyle",{fontSize:t}).run(),unsetFontSize:()=>({chain:t})=>t().setMark("textStyle",{fontSize:null}).removeEmptyTextStyle().run()}}});exports.DEFAULT_FONT_SIZE_LIST=r.DEFAULT_FONT_SIZE_LIST;exports.FontSize=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./index-RfTlOzIr.cjs"),x=require("./index-Dfmm6FTT.cjs"),S=require("./useButtonProps-C6Vpn190.cjs"),o=require("react/jsx-runtime"),p=require("react"),h=require("./ActionMenuButton-DLQyd_gx.cjs");require("./index-DV5kbgRU.cjs");const l=require("./dropdown-menu-CdSm4emp.cjs");function v(){const{t:e}=x.useLocale(),n=S.useButtonProps(z.name),{icon:d=void 0,tooltip:s=void 0,items:c=[],isActive:a=void 0}=(n==null?void 0:n.componentProps)??{},{disabled:u,dataState:t}=S.useActive(a),r=p.useMemo(()=>(t==null?void 0:t.title)||e("editor.fontSize.default.tooltip"),[t]);return n?o.jsxs(l.DropdownMenu,{children:[o.jsx(l.DropdownMenuTrigger,{asChild:!0,disabled:u,children:o.jsx(h.ActionMenuButton,{disabled:u,icon:d,title:r,tooltip:s})}),o.jsx(l.DropdownMenuContent,{className:"richtext-max-h-96 richtext-w-32 richtext-overflow-y-auto",children:c==null?void 0:c.map((i,f)=>o.jsxs(p.Fragment,{children:[o.jsx(l.DropdownMenuCheckboxItem,{checked:r===i.title,onClick:i.action,children:o.jsx("div",{className:"richtext-ml-1 richtext-h-full",children:i.title})}),i.title===e("editor.fontSize.default.tooltip")&&o.jsx(l.DropdownMenuSeparator,{})]},`font-size-${f}`))})]}):o.jsx(o.Fragment,{})}const z=m.Extension.create({name:"fontSize",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),types:["textStyle"],fontSizes:x.DEFAULT_FONT_SIZE_LIST,button({editor:n,extension:d,t:s}){var u;const a=S.ensureNameValueOptions((u=d.options)==null?void 0:u.fontSizes).map(t=>({title:t.value==="Default"?s("editor.fontSize.default.tooltip"):String(t.name),isActive:()=>{const{fontSize:r}=n.getAttributes("textStyle"),i=t.value==="Default",f=r==null||r==="";return i&&f?!0:n.isActive({fontSize:String(t.value)})||!1},action:()=>{if(t.value==="Default"){n.commands.unsetFontSize();return}n.commands.setFontSize(String(t.value))},default:t.value==="Default"||!1}));return{componentProps:{editor:n,tooltip:s("editor.fontSize.tooltip"),disabled:!1,items:a,maxHeight:280,icon:"MenuDown",isActive:()=>{const t=(a||[]).find(i=>i.isActive());return t&&!t.default?t:{title:s("editor.fontSize.default.tooltip"),isActive:()=>!1}}}}}}},addGlobalAttributes(){return[{types:this.options.types,attributes:{fontSize:{default:null,parseHTML:e=>e.style.fontSize.replaceAll(/["']+/g,""),renderHTML:e=>e.fontSize?{style:`font-size: ${e.fontSize}`}:{}}}}]},addCommands(){return{setFontSize:e=>({chain:n})=>n().setMark("textStyle",{fontSize:e}).run(),unsetFontSize:()=>({chain:e})=>e().setMark("textStyle",{fontSize:null}).removeEmptyTextStyle().run()}}});exports.FontSize=z;exports.RichTextFontSize=v;

package/lib/FontSize.d.cts

@@ -1,5 +1,7 @@
+import { default as default_2 } from 'react';
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 
 /**
  * Represents the ButtonView function.
@@ -54,9 +56,6 @@ declare interface ButtonViewReturnComponentSlots {
     [x: string]: () => any;
 }
 
-/** Default font size list */
-export declare const DEFAULT_FONT_SIZE_LIST: readonly ["10px", "11px", "12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "36px", "48px", "72px"];
-
 export declare const FontSize: Extension<FontSizeOptions, any>;
 
 /**
@@ -88,11 +87,23 @@ declare interface GeneralOptions<T> {
     shortcutKeys?: string[] | string[][];
 }
 
+export declare interface Item {
+    title: string;
+    isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>;
+    action?: ButtonViewReturnComponentProps['action'];
+    style?: default_2.CSSProperties;
+    disabled?: boolean;
+    divider?: boolean;
+    default?: boolean;
+}
+
 declare interface NameValueOption<T = string> {
     name: string;
     value: T;
 }
 
+export declare function RichTextFontSize(): JSX.Element;
+
 export { }
 
 
@@ -126,11 +137,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;
         };
     }
 }
@@ -138,8 +160,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;
         };
     }
 }
@@ -157,7 +180,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;
         };
     }
 }
@@ -182,10 +214,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -270,16 +300,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         mermaid: {
@@ -290,20 +310,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: {
@@ -327,16 +333,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/FontSize.d.ts

@@ -1,5 +1,7 @@
+import { default as default_2 } from 'react';
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 
 /**
  * Represents the ButtonView function.
@@ -54,9 +56,6 @@ declare interface ButtonViewReturnComponentSlots {
     [x: string]: () => any;
 }
 
-/** Default font size list */
-export declare const DEFAULT_FONT_SIZE_LIST: readonly ["10px", "11px", "12px", "14px", "16px", "18px", "20px", "22px", "24px", "26px", "28px", "36px", "48px", "72px"];
-
 export declare const FontSize: Extension<FontSizeOptions, any>;
 
 /**
@@ -88,11 +87,23 @@ declare interface GeneralOptions<T> {
     shortcutKeys?: string[] | string[][];
 }
 
+export declare interface Item {
+    title: string;
+    isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>;
+    action?: ButtonViewReturnComponentProps['action'];
+    style?: default_2.CSSProperties;
+    disabled?: boolean;
+    divider?: boolean;
+    default?: boolean;
+}
+
 declare interface NameValueOption<T = string> {
     name: string;
     value: T;
 }
 
+export declare function RichTextFontSize(): JSX.Element;
+
 export { }
 
 
@@ -126,11 +137,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;
         };
     }
 }
@@ -138,8 +160,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;
         };
     }
 }
@@ -157,7 +180,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;
         };
     }
 }
@@ -182,10 +214,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -270,16 +300,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         mermaid: {
@@ -290,20 +310,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: {
@@ -327,16 +333,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: {