reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/index.cjs

@@ -1 +1,132 @@
-"use strict";const t=require("./RichTextEditor-CxvwGvQG.cjs");module.exports=t.RichTextEditor_default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("react"),l=require("./index-DV5kbgRU.cjs"),j=require("./theme-D8_cxGqB.cjs"),N=require("./tooltip-BuEiE96N.cjs"),g="data-rc-order",m="data-rc-priority",P="rc-util-key",f=new Map;function R(e,r){if(!e)return!1;if(e.contains)return e.contains(r);let t=r;for(;t;){if(t===e)return!0;t=t.parentNode}return!1}function x({mark:e}={}){return e?e.startsWith("data-")?e:`data-${e}`:P}function h(e){return e.attachTo?e.attachTo:document.querySelector("head")||document.body}function T(e){return e==="queue"?"prependQueue":e?"prepend":"append"}function v(e){return[...(f.get(e)||e).children].filter(r=>r.tagName==="STYLE")}function y(e,r={}){const{csp:t,prepend:n,priority:i=0}=r,a=T(n),u=a==="prependQueue",o=document.createElement("style");o.setAttribute(g,a),u&&i&&o.setAttribute(m,`${i}`),t!=null&&t.nonce&&(o.nonce=t==null?void 0:t.nonce),o.innerHTML=e;const s=h(r),{firstChild:w}=s;if(n){if(u){const p=v(s).filter(b=>{if(!["prepend","prependQueue"].includes(b.getAttribute(g)))return!1;const E=Number(b.getAttribute(m)||0);return i>=E});if(p.length>0)return s.insertBefore(o,p.at(-1).nextSibling),o}w.before(o)}else s.append(o);return o}function S(e,r={}){const t=h(r);return v(t).find(n=>n.getAttribute(x(r))===e)}function C(e,r={}){const t=S(e,r);t&&t.remove()}function M(e,r){const t=f.get(e);if(!t||!R(document,t)){const n=y("",r),{parentNode:i}=n;f.set(e,i),n.remove()}}function A(e,r,t={}){var u,o,s;const n=h(t);M(n,t);const i=S(r,t);if(i)return(u=t.csp)!=null&&u.nonce&&i.nonce!==((o=t.csp)==null?void 0:o.nonce)&&(i.nonce=(s=t.csp)==null?void 0:s.nonce),i.innerHTML!==e&&(i.innerHTML=e),i;const a=y(e,t);return a.setAttribute(x(t),r),a}const q=`
+.reactjs-tiptap-editor,
+.richtext-dialog-content {
+  color: hsl(var(--richtext-foreground));
+
+  button,
+  input:where([type=button]),
+  input:where([type=reset]),
+  input:where([type=submit]) {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+
+  input,
+  optgroup,
+  select {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+
+  button {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: hsl(var(--richtext-border));
+  }
+
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  input {
+    border-width: 1px;
+  }
+
+
+  input::placeholder {
+    opacity: 1;
+    color: #9ca3af;
+  }
+
+  button, input {
+    cursor: pointer;
+    color: inherit;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+div[data-radix-popper-content-wrapper] {
+  color: hsl(var(--richtext-foreground));
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: hsl(var(--richtext-border));
+  }
+
+  button, input {
+    cursor: pointer;
+    color: inherit;
+  }
+}
+`;function L({editor:e,children:r}){const[t,n]=l.useStoreEditor(i=>i.editor);return d.useEffect(()=>{n({editor:e})},[e]),t?c.jsx(c.Fragment,{children:r}):c.jsx(c.Fragment,{})}function z({editor:e,children:r,dark:t}){const n=d.useId();return d.useEffect(()=>{document.documentElement.classList.toggle("dark",t),j.themeActions.setTheme(n,t?"dark":"light")},[t]),d.useEffect(()=>(A(q,"react-tiptap-reset"),()=>{C("react-tiptap-reset")}),[]),d.useEffect(()=>{e&&(e.id=n)},[n,e]),e?c.jsx("div",{className:"reactjs-tiptap-editor",children:c.jsx(l.ProviderEditor,{children:c.jsx(l.ProviderUniqueId,{editor:e,id:n,children:c.jsx(N.TooltipProvider,{delayDuration:0,disableHoverableContent:!0,children:c.jsx(L,{editor:e,children:r})})})})}):c.jsx(c.Fragment,{})}exports.RichTextProvider=z;

package/lib/index.d.cts

@@ -1,249 +1,13 @@
-import { AnyExtension } from '@tiptap/core';
-import { default as default_2 } from 'react';
-import { Editor } from '@tiptap/react';
-import { Editor as Editor_2 } from '@tiptap/core';
-import { ForwardRefExoticComponent } from 'react';
-import { RefAttributes } from 'react';
-import { TooltipContentProps } from '@radix-ui/react-tooltip';
-import { UseEditorOptions } from '@tiptap/react';
+import { Editor } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 
-declare interface ActionButtonProps {
-    icon?: string;
-    title?: string;
-    tooltip?: string;
-    disabled?: boolean;
-    shortcutKeys?: string[];
-    customClass?: string;
-    loading?: boolean;
-    tooltipOptions?: TooltipContentProps;
-    color?: string;
-    action?: ButtonViewReturnComponentProps['action'];
-    isActive?: ButtonViewReturnComponentProps['isActive'];
-    children?: default_2.ReactNode;
-    asChild?: boolean;
-    upload?: boolean;
-    initialDisplayedColor?: string;
-}
-
-/**
- * Represents the BubbleMenuProps.
- */
-declare interface BubbleMenuProps {
-    columnConfig?: {
-        /**
-         * @description Column menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    tableConfig?: TableMenuConfig;
-    floatingMenuConfig?: {
-        /**
-         * @description Floating menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    linkConfig?: {
-        /**
-         * @description Link menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    textConfig?: {
-        /**
-         * @description Text menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    imageConfig?: {
-        /**
-         * @description Image menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    imageGifConfig?: {
-        /**
-         * @description Image menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    videoConfig?: {
-        /**
-         * @description Video menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    katexConfig?: {
-        /**
-         * @description katex menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    excalidrawConfig?: {
-        /**
-         * @description excalidraw menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    iframeConfig?: {
-        /**
-         * @description iframe menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    mermaidConfig?: {
-        /**
-         * @description mermaid menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    twitterConfig?: {
-        /**
-         * @description twitter menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    drawerConfig?: {
-        /**
-         * @description twitter menu hidden
-         * @default false
-         */
-        hidden?: boolean;
-    };
-    render?: (props: BubbleMenuRenderProps, dom: React.ReactNode) => React.ReactNode;
-}
-
-/**
- * Represents the BubbleMenuRenderProps.
- */
-declare interface BubbleMenuRenderProps {
+declare interface IProviderRichTextProps {
     editor: Editor;
-    disabled: boolean;
-    bubbleMenu: BubbleMenuProps;
-    extensionsNames: string[];
-}
-
-/**
- * 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;
-}
-
-declare const _default: ForwardRefExoticComponent<RichTextEditorProps & RefAttributes<    {
-editor: Editor_2 | null;
-}>>;
-export default _default;
-
-/**
- * Interface for RichTextEditor component props
- */
-declare interface RichTextEditorProps {
-    /** Content of the editor */
-    content: string;
-    /** Extensions for the editor */
-    extensions: AnyExtension[];
-    /** Output format */
-    output: 'html' | 'json' | 'text';
-    /** Model value */
-    modelValue?: string | object;
-    /** Dark mode flag */
+    children: React.ReactNode;
     dark?: boolean;
-    /** Dense mode flag */
-    dense?: boolean;
-    /** Disabled flag */
-    disabled?: boolean;
-    /** Label for the editor */
-    label?: string;
-    /** Hide toolbar flag */
-    hideToolbar?: boolean;
-    /** Disable bubble menu flag */
-    disableBubble?: boolean;
-    /** Hide bubble menu flag */
-    hideBubble?: boolean;
-    /** Remove default wrapper flag */
-    removeDefaultWrapper?: boolean;
-    /** Maximum width */
-    maxWidth?: string | number;
-    /** Minimum height */
-    minHeight?: string | number;
-    /** Maximum height */
-    maxHeight?: string | number;
-    /** Content class */
-    contentClass?: string | string[] | Record<string, any>;
-    /** Content change callback */
-    onChangeContent?: (val: any) => void;
-    /** Bubble menu props */
-    bubbleMenu?: BubbleMenuProps;
-    /** Toolbar props */
-    toolbar?: ToolbarProps;
-    /** Use editor options */
-    useEditorOptions?: UseEditorOptions;
-    /** Use editor options */
-    resetCSS?: boolean;
-    /** This option gives us the control to enable the default behavior of rendering the editor immediately.*/
-    immediatelyRender?: boolean;
-    shouldRerenderOnTransaction?: boolean;
-}
-
-declare interface TableMenuConfig {
-    /**
-     * @description Column menu hidden
-     * @default false
-     */
-    hidden?: boolean;
-    /**
-     * custom menu actions
-     */
-    actions?: ActionButtonProps[];
-    /**
-     * hidden default actions, if any
-     */
-    hiddenActions?: string[];
 }
 
-/**
- * Represents the ToolbarItemProps.
- */
-declare interface ToolbarItemProps {
-    button: {
-        component: React.ComponentType<any>;
-        componentProps: Record<string, any>;
-    };
-    divider: boolean;
-    spacer: boolean;
-    type: string;
-    name: string;
-}
-
-declare interface ToolbarProps {
-    render?: (props: ToolbarRenderProps, toolbarItems: ToolbarItemProps[], dom: any[], containerDom: (innerContent: React.ReactNode) => React.ReactNode) => React.ReactNode;
-    tooltipSide?: 'top' | 'bottom';
-}
-
-declare interface ToolbarRenderProps {
-    editor: Editor;
-    disabled: boolean;
-}
+export declare function RichTextProvider({ editor, children, dark }: IProviderRichTextProps): JSX.Element;
 
 export { }
 
@@ -278,11 +42,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;
         };
     }
 }
@@ -290,8 +65,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;
         };
     }
 }
@@ -309,7 +85,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;
         };
     }
 }
@@ -334,10 +119,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -377,22 +160,6 @@ declare module '@tiptap/core' {
 }
 
 
-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> {
         imageGifUpload: {
@@ -415,8 +182,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -424,9 +198,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -442,20 +215,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: {
@@ -479,16 +238,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: {