@tiptap/extension-floating-menu - npm Package Compare versions

Comparing version 2.0.0-beta.26 to 2.0.0-beta.27

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [2.0.0-beta.27](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-floating-menu@2.0.0-beta.26...@tiptap/extension-floating-menu@2.0.0-beta.27) (2021-09-07)
+
+
+### Bug Fixes
+
+* don’t initialize tippy on requestAnimationFrame to avoid race conditions ([#1820](https://github.com/ueberdosis/tiptap/issues/1820)) ([ca3763d](https://github.com/ueberdosis/tiptap/commit/ca3763d3c29cc0715727fe12a0e907ad86d99806))
+
+
+
+
+
 # [2.0.0-beta.26](https://github.com/ueberdosis/tiptap/compare/@tiptap/extension-floating-menu@2.0.0-beta.25...@tiptap/extension-floating-menu@2.0.0-beta.26) (2021-09-06)
@@ -8,0 +19,0 @@

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

@@ -26,2 +26,3 @@ import { Editor } from '@tiptap/core';
     tippy: Instance | undefined;
+    tippyOptions?: Partial<Props>;
     shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null>;
@@ -34,3 +35,3 @@ constructor({ editor, element, view, tippyOptions, shouldShow, }: FloatingMenuViewProps);
     }) => void;
-    createTooltip(options?: Partial<Props>): void;
+    createTooltip(): void;
     update(view: EditorView, oldState?: EditorState): void;
@@ -37,0 +38,0 @@ show(): void;

dist/tiptap-extension-floating-menu.cjs.js

@@ -14,3 +14,3 @@ 'use strict';
 class FloatingMenuView {
-    constructor({ editor, element, view, tippyOptions, shouldShow, }) {
+    constructor({ editor, element, view, tippyOptions = {}, shouldShow, }) {
         this.preventHide = false;
@@ -57,11 +57,14 @@ this.shouldShow = ({ state }) => {
         this.editor.on('blur', this.blurHandler);
+        this.tippyOptions = tippyOptions;
+        // Detaches menu content from its current parent
+        this.element.remove();
         this.element.style.visibility = 'visible';
-        // We create tippy asynchronously to make sure that `editor.options.element`
-        // has already been moved to the right position in the DOM
-        requestAnimationFrame(() => {
-            this.createTooltip(tippyOptions);
-        });
     }
-    createTooltip(options = {}) {
-        this.tippy = tippy__default['default'](this.editor.options.element, {
+    createTooltip() {
+        const { element: editorElement } = this.editor.options;
+        const editorIsAttached = !!editorElement.parentElement;
+        if (this.tippy || !editorIsAttached) {
+            return;
+        }
+        this.tippy = tippy__default['default'](editorElement, {
             duration: 0,
@@ -74,3 +77,3 @@ getReferenceClientRect: null,
             hideOnClick: 'toggle',
-            ...options,
+            ...this.tippyOptions,
         });
@@ -87,2 +90,3 @@ }
         }
+        this.createTooltip();
         const shouldShow = (_a = this.shouldShow) === null || _a === void 0 ? void 0 : _a.call(this, {
@@ -89,0 +93,0 @@ editor: this.editor,

dist/tiptap-extension-floating-menu.esm.js

@@ -6,3 +6,3 @@ import { posToDOMRect, Extension } from '@tiptap/core';
 class FloatingMenuView {
-    constructor({ editor, element, view, tippyOptions, shouldShow, }) {
+    constructor({ editor, element, view, tippyOptions = {}, shouldShow, }) {
         this.preventHide = false;
@@ -49,11 +49,14 @@ this.shouldShow = ({ state }) => {
         this.editor.on('blur', this.blurHandler);
+        this.tippyOptions = tippyOptions;
+        // Detaches menu content from its current parent
+        this.element.remove();
         this.element.style.visibility = 'visible';
-        // We create tippy asynchronously to make sure that `editor.options.element`
-        // has already been moved to the right position in the DOM
-        requestAnimationFrame(() => {
-            this.createTooltip(tippyOptions);
-        });
     }
-    createTooltip(options = {}) {
-        this.tippy = tippy(this.editor.options.element, {
+    createTooltip() {
+        const { element: editorElement } = this.editor.options;
+        const editorIsAttached = !!editorElement.parentElement;
+        if (this.tippy || !editorIsAttached) {
+            return;
+        }
+        this.tippy = tippy(editorElement, {
             duration: 0,
@@ -66,3 +69,3 @@ getReferenceClientRect: null,
             hideOnClick: 'toggle',
-            ...options,
+            ...this.tippyOptions,
         });
@@ -79,2 +82,3 @@ }
         }
+        this.createTooltip();
         const shouldShow = (_a = this.shouldShow) === null || _a === void 0 ? void 0 : _a.call(this, {
@@ -81,0 +85,0 @@ editor: this.editor,

dist/tiptap-extension-floating-menu.umd.js

@@ -12,3 +12,3 @@ (function (global, factory) {
   class FloatingMenuView {
-      constructor({ editor, element, view, tippyOptions, shouldShow, }) {
+      constructor({ editor, element, view, tippyOptions = {}, shouldShow, }) {
           this.preventHide = false;
@@ -55,11 +55,14 @@ this.shouldShow = ({ state }) => {
           this.editor.on('blur', this.blurHandler);
+          this.tippyOptions = tippyOptions;
+          // Detaches menu content from its current parent
+          this.element.remove();
           this.element.style.visibility = 'visible';
-          // We create tippy asynchronously to make sure that `editor.options.element`
-          // has already been moved to the right position in the DOM
-          requestAnimationFrame(() => {
-              this.createTooltip(tippyOptions);
-          });
       }
-      createTooltip(options = {}) {
-          this.tippy = tippy__default['default'](this.editor.options.element, {
+      createTooltip() {
+          const { element: editorElement } = this.editor.options;
+          const editorIsAttached = !!editorElement.parentElement;
+          if (this.tippy || !editorIsAttached) {
+              return;
+          }
+          this.tippy = tippy__default['default'](editorElement, {
               duration: 0,
@@ -72,3 +75,3 @@ getReferenceClientRect: null,
               hideOnClick: 'toggle',
-              ...options,
+              ...this.tippyOptions,
           });
@@ -85,2 +88,3 @@ }
           }
+          this.createTooltip();
           const shouldShow = (_a = this.shouldShow) === null || _a === void 0 ? void 0 : _a.call(this, {
@@ -87,0 +91,0 @@ editor: this.editor,

package.json

 {
   "name": "@tiptap/extension-floating-menu",
   "description": "floating-menu extension for tiptap",
-  "version": "2.0.0-beta.26",
+  "version": "2.0.0-beta.27",
   "homepage": "https://tiptap.dev",
@@ -36,3 +36,3 @@ "keywords": [
   },
-  "gitHead": "b386728f357b826abbab34742e12b4e05a92985f"
+  "gitHead": "9e8eabe3f64c0d5ccd110453e2245135cf36dbed"
 }

src/floating-menu-plugin.ts

@@ -34,2 +34,4 @@ import { Editor, posToDOMRect } from '@tiptap/core'
 
+  public tippyOptions?: Partial<Props>
+
   public shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null> = ({ state }) => {
@@ -54,3 +56,3 @@ const { selection } = state
     view,
-    tippyOptions,
+    tippyOptions = {},
     shouldShow,
@@ -69,9 +71,6 @@ }: FloatingMenuViewProps) {
     this.editor.on('blur', this.blurHandler)
+    this.tippyOptions = tippyOptions
+    // Detaches menu content from its current parent
+    this.element.remove()
     this.element.style.visibility = 'visible'
-
-    // We create tippy asynchronously to make sure that `editor.options.element`
-    // has already been moved to the right position in the DOM
-    requestAnimationFrame(() => {
-      this.createTooltip(tippyOptions)
-    })
   }
@@ -105,4 +104,11 @@
 
-  createTooltip(options: Partial<Props> = {}) {
-    this.tippy = tippy(this.editor.options.element, {
+  createTooltip() {
+    const { element: editorElement } = this.editor.options
+    const editorIsAttached = !!editorElement.parentElement
+
+    if (this.tippy || !editorIsAttached) {
+      return
+    }
+
+    this.tippy = tippy(editorElement, {
       duration: 0,
@@ -115,3 +121,3 @@ getReferenceClientRect: null,
       hideOnClick: 'toggle',
-      ...options,
+      ...this.tippyOptions,
     })
@@ -130,2 +136,4 @@ }
 
+    this.createTooltip()
+
     const shouldShow = this.shouldShow?.({
@@ -132,0 +140,0 @@ editor: this.editor,

No alert changes

Improved metrics

Total package byte prevSize

63475

increased by2.98%

Lines of code

665

increased by2.78%

No dependency changes