@tiptap/react - npm Package Compare versions

Comparing version 2.5.8 to 3.0.0-next.0

dist/index.js

 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import React, { forwardRef, useState, useEffect, useDebugValue, useRef, createContext, useContext } from 'react';
-import ReactDOM, { flushSync } from 'react-dom';
+import ReactDOM, { flushSync, createPortal } from 'react-dom';
 import { Editor as Editor$1, NodeView } from '@tiptap/core';
@@ -828,13 +828,12 @@ export * from '@tiptap/core';
 const BubbleMenu = (props) => {
-    const [element, setElement] = useState(null);
+    const menuEl = useRef(document.createElement('div'));
     const { editor: currentEditor } = useCurrentEditor();
     useEffect(() => {
         var _a;
-        if (!element) {
-            return;
-        }
+        menuEl.current.style.visibility = 'hidden';
+        menuEl.current.style.position = 'absolute';
         if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
             return;
         }
-        const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
+        const { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, } = props;
         const menuEditor = editor || currentEditor;
@@ -847,26 +846,34 @@ if (!menuEditor) {
             updateDelay,
+            resizeDelay,
             editor: menuEditor,
-            element,
+            element: menuEl.current,
             pluginKey,
             shouldShow,
-            tippyOptions,
+            options: props.options,
         });
         menuEditor.registerPlugin(plugin);
-        return () => menuEditor.unregisterPlugin(pluginKey);
-    }, [props.editor, currentEditor, element]);
-    return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+        return () => {
+            menuEditor.unregisterPlugin(pluginKey);
+            window.requestAnimationFrame(() => {
+                if (menuEl.current.parentNode) {
+                    menuEl.current.parentNode.removeChild(menuEl.current);
+                }
+            });
+        };
+    }, [props.editor, currentEditor]);
+    const portal = createPortal((React.createElement("div", { className: props.className }, props.children)), menuEl.current);
+    return (React.createElement(React.Fragment, null, portal));
 };
 
 const FloatingMenu = (props) => {
-    const [element, setElement] = useState(null);
+    const menuEl = useRef(document.createElement('div'));
     const { editor: currentEditor } = useCurrentEditor();
     useEffect(() => {
         var _a;
-        if (!element) {
-            return;
-        }
+        menuEl.current.style.visibility = 'hidden';
+        menuEl.current.style.position = 'absolute';
         if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
             return;
         }
-        const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
+        const { pluginKey = 'floatingMenu', editor, options, shouldShow = null, } = props;
         const menuEditor = editor || currentEditor;
@@ -880,14 +887,21 @@ if (!menuEditor) {
             editor: menuEditor,
-            element,
-            tippyOptions,
+            element: menuEl.current,
+            options,
             shouldShow,
         });
         menuEditor.registerPlugin(plugin);
-        return () => menuEditor.unregisterPlugin(pluginKey);
+        return () => {
+            menuEditor.unregisterPlugin(pluginKey);
+            window.requestAnimationFrame(() => {
+                if (menuEl.current.parentNode) {
+                    menuEl.current.parentNode.removeChild(menuEl.current);
+                }
+            });
+        };
     }, [
         props.editor,
         currentEditor,
-        element,
     ]);
-    return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+    const portal = createPortal((React.createElement("div", { className: props.className }, props.children)), menuEl.current);
+    return (React.createElement(React.Fragment, null, portal));
 };
@@ -894,0 +908,0 @@

dist/index.umd.js

@@ -827,13 +827,12 @@ (function (global, factory) {
   const BubbleMenu = (props) => {
-      const [element, setElement] = React.useState(null);
+      const menuEl = React.useRef(document.createElement('div'));
       const { editor: currentEditor } = useCurrentEditor();
       React.useEffect(() => {
           var _a;
-          if (!element) {
-              return;
-          }
+          menuEl.current.style.visibility = 'hidden';
+          menuEl.current.style.position = 'absolute';
           if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
               return;
           }
-          const { pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null, } = props;
+          const { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, } = props;
           const menuEditor = editor || currentEditor;
@@ -846,26 +845,34 @@ if (!menuEditor) {
               updateDelay,
+              resizeDelay,
               editor: menuEditor,
-              element,
+              element: menuEl.current,
               pluginKey,
               shouldShow,
-              tippyOptions,
+              options: props.options,
           });
           menuEditor.registerPlugin(plugin);
-          return () => menuEditor.unregisterPlugin(pluginKey);
-      }, [props.editor, currentEditor, element]);
-      return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+          return () => {
+              menuEditor.unregisterPlugin(pluginKey);
+              window.requestAnimationFrame(() => {
+                  if (menuEl.current.parentNode) {
+                      menuEl.current.parentNode.removeChild(menuEl.current);
+                  }
+              });
+          };
+      }, [props.editor, currentEditor]);
+      const portal = ReactDOM.createPortal((React.createElement("div", { className: props.className }, props.children)), menuEl.current);
+      return (React.createElement(React.Fragment, null, portal));
   };
 
   const FloatingMenu = (props) => {
-      const [element, setElement] = React.useState(null);
+      const menuEl = React.useRef(document.createElement('div'));
       const { editor: currentEditor } = useCurrentEditor();
       React.useEffect(() => {
           var _a;
-          if (!element) {
-              return;
-          }
+          menuEl.current.style.visibility = 'hidden';
+          menuEl.current.style.position = 'absolute';
           if (((_a = props.editor) === null || _a === void 0 ? void 0 : _a.isDestroyed) || (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.isDestroyed)) {
               return;
           }
-          const { pluginKey = 'floatingMenu', editor, tippyOptions = {}, shouldShow = null, } = props;
+          const { pluginKey = 'floatingMenu', editor, options, shouldShow = null, } = props;
           const menuEditor = editor || currentEditor;
@@ -879,14 +886,21 @@ if (!menuEditor) {
               editor: menuEditor,
-              element,
-              tippyOptions,
+              element: menuEl.current,
+              options,
               shouldShow,
           });
           menuEditor.registerPlugin(plugin);
-          return () => menuEditor.unregisterPlugin(pluginKey);
+          return () => {
+              menuEditor.unregisterPlugin(pluginKey);
+              window.requestAnimationFrame(() => {
+                  if (menuEl.current.parentNode) {
+                      menuEl.current.parentNode.removeChild(menuEl.current);
+                  }
+              });
+          };
       }, [
           props.editor,
           currentEditor,
-          element,
       ]);
-      return (React.createElement("div", { ref: setElement, className: props.className, style: { visibility: 'hidden' } }, props.children));
+      const portal = ReactDOM.createPortal((React.createElement("div", { className: props.className }, props.children)), menuEl.current);
+      return (React.createElement(React.Fragment, null, portal));
   };
@@ -893,0 +907,0 @@

dist/packages/core/src/Extension.d.ts

@@ -341,4 +341,4 @@ import { Plugin, Transaction } from '@tiptap/pm/state';
     static create<O = any, S = any>(config?: Partial<ExtensionConfig<O, S>>): Extension<O, S>;
-    configure(options?: Partial<Options>): Extension<any, any>;
+    configure(options?: Partial<Options>): Extension<Options, Storage>;
     extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig?: Partial<ExtensionConfig<ExtendedOptions, ExtendedStorage>>): Extension<ExtendedOptions, ExtendedStorage>;
 }

dist/packages/core/src/Mark.d.ts

@@ -445,3 +445,3 @@ import { DOMOutputSpec, Mark as ProseMirrorMark, MarkSpec, MarkType } from '@tiptap/pm/model';
     static create<O = any, S = any>(config?: Partial<MarkConfig<O, S>>): Mark<O, S>;
-    configure(options?: Partial<Options>): Mark<any, any>;
+    configure(options?: Partial<Options>): Mark<Options, Storage>;
     extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig?: Partial<MarkConfig<ExtendedOptions, ExtendedStorage>>): Mark<ExtendedOptions, ExtendedStorage>;
@@ -448,0 +448,0 @@ static handleExit({ editor, mark }: {

dist/packages/core/src/Node.d.ts

@@ -609,4 +609,4 @@ import { DOMOutputSpec, Node as ProseMirrorNode, NodeSpec, NodeType } from '@tiptap/pm/model';
     static create<O = any, S = any>(config?: Partial<NodeConfig<O, S>>): Node<O, S>;
-    configure(options?: Partial<Options>): Node<any, any>;
+    configure(options?: Partial<Options>): Node<Options, Storage>;
     extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig?: Partial<NodeConfig<ExtendedOptions, ExtendedStorage>>): Node<ExtendedOptions, ExtendedStorage>;
 }

dist/packages/core/src/style.d.ts

@@ -1,1 +0,1 @@
-export declare const style = ".ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\n.ProseMirror [contenteditable=\"false\"] {\n  white-space: normal;\n}\n\n.ProseMirror [contenteditable=\"false\"] [contenteditable=\"true\"] {\n  white-space: pre-wrap;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\nimg.ProseMirror-separator {\n  display: inline !important;\n  border: none !important;\n  margin: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection * {\n  caret-color: transparent;\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.tippy-box[data-animation=fade][data-state=hidden] {\n  opacity: 0\n}";
+export declare const style = ".ProseMirror {\n  position: relative;\n}\n\n.ProseMirror {\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\n.ProseMirror [contenteditable=\"false\"] {\n  white-space: normal;\n}\n\n.ProseMirror [contenteditable=\"false\"] [contenteditable=\"true\"] {\n  white-space: pre-wrap;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\nimg.ProseMirror-separator {\n  display: inline !important;\n  border: none !important;\n  margin: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-hideselection *::selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection *::-moz-selection {\n  background: transparent;\n}\n\n.ProseMirror-hideselection * {\n  caret-color: transparent;\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}";

dist/packages/extension-bubble-menu/src/bubble-menu-plugin.d.ts

@@ -0,5 +1,5 @@
+import { type ArrowOptions, type AutoPlacementOptions, type FlipOptions, type HideOptions, type InlineOptions, type OffsetOptions, type Placement, type ShiftOptions, type SizeOptions, type Strategy } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
-import { Instance, Props } from 'tippy.js';
 export interface BubbleMenuPluginProps {
@@ -23,7 +23,2 @@ /**
     /**
-     * The options for the tippy.js instance.
-     * @see https://atomiks.github.io/tippyjs/v6/all-props/
-     */
-    tippyOptions?: Partial<Props>;
-    /**
      * The delay in milliseconds before the menu should be updated.
@@ -36,6 +31,13 @@ * This can be useful to prevent performance issues.
     /**
+     * The delay in milliseconds before the menu position should be updated on window resize.
+     * This can be useful to prevent performance issues.
+     * @type {number}
+     * @default 60
+     */
+    resizeDelay?: number;
+    /**
      * A function that determines whether the menu should be shown or not.
      * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
      */
-    shouldShow?: ((props: {
+    shouldShow: ((props: {
         editor: Editor;
@@ -48,2 +50,17 @@ view: EditorView;
     }) => boolean) | null;
+    /**
+     * FloatingUI options.
+     */
+    options?: {
+        strategy?: Strategy;
+        placement?: Placement;
+        offset?: OffsetOptions | boolean;
+        flip?: FlipOptions | boolean;
+        shift?: ShiftOptions | boolean;
+        arrow?: ArrowOptions | false;
+        size?: SizeOptions | boolean;
+        autoPlacement?: AutoPlacementOptions | boolean;
+        hide?: HideOptions | boolean;
+        inline?: InlineOptions | boolean;
+    };
 }
@@ -58,8 +75,14 @@ export type BubbleMenuViewProps = BubbleMenuPluginProps & {
     preventHide: boolean;
-    tippy: Instance | undefined;
-    tippyOptions?: Partial<Props>;
     updateDelay: number;
+    resizeDelay: number;
     private updateDebounceTimer;
+    private resizeDebounceTimer;
+    private floatingUIOptions;
     shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null>;
-    constructor({ editor, element, view, tippyOptions, updateDelay, shouldShow, }: BubbleMenuViewProps);
+    get middlewares(): {
+        name: string;
+        options?: any;
+        fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
+    }[];
+    constructor({ editor, element, view, updateDelay, resizeDelay, shouldShow, options, }: BubbleMenuViewProps);
     mousedownHandler: () => void;
@@ -71,6 +94,6 @@ dragstartHandler: () => void;
     }) => void;
-    tippyBlurHandler: (event: FocusEvent) => void;
-    createTooltip(): void;
+    updatePosition(): void;
     update(view: EditorView, oldState?: EditorState): void;
     handleDebouncedUpdate: (view: EditorView, oldState?: EditorState) => void;
+    getShouldShow(oldState?: EditorState): boolean;
     updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
@@ -77,0 +100,0 @@ show(): void;

dist/packages/extension-floating-menu/src/floating-menu-plugin.d.ts

@@ -0,5 +1,5 @@
+import { type ArrowOptions, type AutoPlacementOptions, type FlipOptions, type HideOptions, type InlineOptions, type OffsetOptions, type Placement, type ShiftOptions, type SizeOptions, type Strategy } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
-import { Instance, Props } from 'tippy.js';
 export interface FloatingMenuPluginProps {
@@ -22,13 +22,6 @@ /**
     /**
-     * The options for the tippy instance.
-     * @default {}
-     * @see https://atomiks.github.io/tippyjs/v6/all-props/
-     */
-    tippyOptions?: Partial<Props>;
-    /**
      * A function that determines whether the menu should be shown or not.
      * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
-     * @default null
      */
-    shouldShow?: ((props: {
+    shouldShow: ((props: {
         editor: Editor;
@@ -38,3 +31,20 @@ view: EditorView;
         oldState?: EditorState;
+        from: number;
+        to: number;
     }) => boolean) | null;
+    /**
+   * FloatingUI options.
+   */
+    options?: {
+        strategy?: Strategy;
+        placement?: Placement;
+        offset?: OffsetOptions | boolean;
+        flip?: FlipOptions | boolean;
+        shift?: ShiftOptions | boolean;
+        arrow?: ArrowOptions | false;
+        size?: SizeOptions | boolean;
+        autoPlacement?: AutoPlacementOptions | boolean;
+        hide?: HideOptions | boolean;
+        inline?: InlineOptions | boolean;
+    };
 }
@@ -52,6 +62,12 @@ export type FloatingMenuViewProps = FloatingMenuPluginProps & {
     preventHide: boolean;
-    tippy: Instance | undefined;
-    tippyOptions?: Partial<Props>;
     shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null>;
-    constructor({ editor, element, view, tippyOptions, shouldShow, }: FloatingMenuViewProps);
+    private floatingUIOptions;
+    get middlewares(): {
+        name: string;
+        options?: any;
+        fn: (state: import("@floating-ui/dom").MiddlewareState) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
+    }[];
+    constructor({ editor, element, view, options, shouldShow, }: FloatingMenuViewProps);
+    getShouldShow(oldState?: EditorState): boolean;
+    updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
     mousedownHandler: () => void;
@@ -62,4 +78,3 @@ focusHandler: () => void;
     }) => void;
-    tippyBlurHandler: (event: FocusEvent) => void;
-    createTooltip(): void;
+    updatePosition(): void;
     update(view: EditorView, oldState?: EditorState): void;
@@ -66,0 +81,0 @@ show(): void;

dist/packages/react/src/BubbleMenu.d.ts

@@ -9,4 +9,6 @@ import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
     updateDelay?: number;
+    resizeDelay?: number;
+    options?: BubbleMenuPluginProps['options'];
 };
 export declare const BubbleMenu: (props: BubbleMenuProps) => React.JSX.Element;
 export {};

dist/packages/react/src/FloatingMenu.d.ts

@@ -8,4 +8,5 @@ import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
     children: React.ReactNode;
+    options?: FloatingMenuPluginProps['options'];
 };
 export declare const FloatingMenu: (props: FloatingMenuProps) => React.JSX.Element;
 export {};

package.json

 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.5.8",
+  "version": "3.0.0-next.0",
   "homepage": "https://tiptap.dev",
@@ -32,4 +32,4 @@ "keywords": [
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.5.8",
-    "@tiptap/extension-floating-menu": "^2.5.8",
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.0",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.0",
     "@types/use-sync-external-store": "^0.0.6",
@@ -39,4 +39,4 @@ "use-sync-external-store": "^1.2.2"
   "devDependencies": {
-    "@tiptap/core": "^2.5.8",
-    "@tiptap/pm": "^2.5.8",
+    "@tiptap/core": "^3.0.0-next.0",
+    "@tiptap/pm": "^3.0.0-next.0",
     "@types/react": "^18.2.14",
@@ -48,4 +48,4 @@ "@types/react-dom": "^18.2.6",
   "peerDependencies": {
-    "@tiptap/core": "^2.5.8",
-    "@tiptap/pm": "^2.5.8",
+    "@tiptap/core": "^3.0.0-next.0",
+    "@tiptap/pm": "^3.0.0-next.0",
     "react": "^17.0.0 || ^18.0.0",
@@ -52,0 +52,0 @@ "react-dom": "^17.0.0 || ^18.0.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

585380

increased by1.63%

Lines of code

8389

increased by1.33%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@remirror/core-constants@2.0.2(transitive)

• + Added@tiptap/core@3.0.0(transitive)

• + Added@tiptap/extension-bubble-menu@3.0.0(transitive)

• + Added@tiptap/extension-floating-menu@3.0.0(transitive)

• + Added@tiptap/pm@3.0.0(transitive)

• + Addedprosemirror-trailing-node@2.0.9(transitive)

• + Addedprosemirror-view@1.36.0(transitive)

• - Removed@remirror/core-constants@3.0.0(transitive)

• - Removed@tiptap/core@2.9.1(transitive)

• - Removed@tiptap/extension-bubble-menu@2.9.1(transitive)

• - Removed@tiptap/extension-floating-menu@2.9.1(transitive)

• - Removed@tiptap/pm@2.9.1(transitive)

• - Removedprosemirror-trailing-node@3.0.0(transitive)

• - Removedprosemirror-view@1.35.0(transitive)

• Updated@tiptap/extension-bubble-menu@^3.0.0-next.0

• Updated@tiptap/extension-floating-menu@^3.0.0-next.0