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

Comparing version 2.0.0-beta.3 to 2.0.0-beta.4

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-floating-menu@2.0.0-beta.3...@tiptap/extension-floating-menu@2.0.0-beta.4) (2021-04-16)
+
+
+### Bug Fixes
+
+* fix tippy for react ([398fc7f](https://github.com/ueberdosis/tiptap-next/commit/398fc7f210b9d5449cbb00543ddf4af768552b9c))
+
+
+### Features
+
+* add tippyOptions prop ([9a56f66](https://github.com/ueberdosis/tiptap-next/commit/9a56f666a118ca7c59a6f1f67f40e6490e20d3b8))
+* use tippy for floating menu ([54df2ce](https://github.com/ueberdosis/tiptap-next/commit/54df2ce077a4bac09c3f1d1eab8c68a09d8f8fa9))
+
+
+
+
+
 # [2.0.0-beta.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/extension-floating-menu@2.0.0-beta.2...@tiptap/extension-floating-menu@2.0.0-beta.3) (2021-04-15)
@@ -8,0 +25,0 @@

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

 import { Editor } from '@tiptap/core';
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { Instance, Props } from 'tippy.js';
 export interface FloatingMenuPluginProps {
     editor: Editor;
     element: HTMLElement;
+    tippyOptions?: Partial<Props>;
 }
@@ -15,15 +17,13 @@ export declare type FloatingMenuViewProps = FloatingMenuPluginProps & {
     view: EditorView;
-    isActive: boolean;
-    top: number;
-    left: number;
     preventHide: boolean;
-    constructor({ editor, element, view, }: FloatingMenuViewProps);
+    tippy: Instance;
+    constructor({ editor, element, view, tippyOptions, }: FloatingMenuViewProps);
     mousedownHandler: () => void;
     focusHandler: () => void;
-    resizeHandler: () => void;
     blurHandler: ({ event }: {
         event: FocusEvent;
     }) => void;
+    createTooltip(options?: Partial<Props>): void;
     update(view: EditorView, oldState?: EditorState): void;
-    render(): void;
+    show(): void;
     hide(): void;
@@ -30,0 +30,0 @@ destroy(): void;

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

@@ -7,8 +7,10 @@ 'use strict';
 var prosemirrorState = require('prosemirror-state');
+var tippy = require('tippy.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
+
 class FloatingMenuView {
-    constructor({ editor, element, view, }) {
-        this.isActive = false;
-        this.top = 0;
-        this.left = 0;
+    constructor({ editor, element, view, tippyOptions, }) {
         this.preventHide = false;
@@ -22,7 +24,2 @@ this.mousedownHandler = () => {
         };
-        this.resizeHandler = () => {
-            if (this.isActive) {
-                this.update(this.editor.view);
-            }
-        };
         this.blurHandler = ({ event }) => {
@@ -46,5 +43,17 @@ var _a;
         this.editor.on('blur', this.blurHandler);
-        this.editor.on('resize', this.resizeHandler);
-        this.render();
+        this.createTooltip(tippyOptions);
+        this.element.style.visibility = 'visible';
     }
+    createTooltip(options = {}) {
+        this.tippy = tippy__default['default'](this.view.dom, {
+            duration: 0,
+            getReferenceClientRect: null,
+            content: this.element,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'right',
+            hideOnClick: 'toggle',
+            ...options,
+        });
+    }
     update(view, oldState) {
@@ -57,4 +66,3 @@ const { state, composing } = view;
         }
-        const { $anchor, anchor, empty } = selection;
-        const parent = this.element.offsetParent;
+        const { $anchor, empty, from, to, } = selection;
         const isRootDepth = $anchor.depth === 1;
@@ -64,34 +72,22 @@ const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType;
         const isActive = isRootDepth && isDefaultNodeType && isDefaultNodeEmpty;
-        if (!empty || !parent || !isActive) {
+        if (!empty || !isActive) {
             this.hide();
             return;
         }
-        const parentBox = parent.getBoundingClientRect();
-        const cursorCoords = view.coordsAtPos(anchor);
-        const top = cursorCoords.top - parentBox.top;
-        const left = cursorCoords.left - parentBox.left;
-        this.isActive = true;
-        this.top = top;
-        this.left = left;
-        this.render();
-    }
-    render() {
-        Object.assign(this.element.style, {
-            position: 'absolute',
-            zIndex: 1,
-            visibility: this.isActive ? 'visible' : 'hidden',
-            opacity: this.isActive ? 1 : 0,
-            left: `${this.left}px`,
-            top: `${this.top}px`,
+        this.tippy.setProps({
+            getReferenceClientRect: () => core.posToDOMRect(view, from, to),
         });
+        this.show();
     }
+    show() {
+        this.tippy.show();
+    }
     hide() {
-        this.isActive = false;
-        this.render();
+        this.tippy.hide();
     }
     destroy() {
+        this.tippy.destroy();
         this.element.removeEventListener('mousedown', this.mousedownHandler);
         this.editor.off('focus', this.focusHandler);
         this.editor.off('blur', this.blurHandler);
-        this.editor.off('resize', this.resizeHandler);
     }
@@ -111,2 +107,3 @@ }
         element: null,
+        tippyOptions: {},
     },
@@ -121,2 +118,3 @@ addProseMirrorPlugins() {
                 element: this.options.element,
+                tippyOptions: this.options.tippyOptions,
             }),
@@ -123,0 +121,0 @@ ];

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

@@ -1,9 +0,7 @@
-import { isNodeEmpty, Extension } from '@tiptap/core';
+import { isNodeEmpty, posToDOMRect, Extension } from '@tiptap/core';
 import { PluginKey, Plugin } from 'prosemirror-state';
+import tippy from 'tippy.js';
 
 class FloatingMenuView {
-    constructor({ editor, element, view, }) {
-        this.isActive = false;
-        this.top = 0;
-        this.left = 0;
+    constructor({ editor, element, view, tippyOptions, }) {
         this.preventHide = false;
@@ -17,7 +15,2 @@ this.mousedownHandler = () => {
         };
-        this.resizeHandler = () => {
-            if (this.isActive) {
-                this.update(this.editor.view);
-            }
-        };
         this.blurHandler = ({ event }) => {
@@ -41,5 +34,17 @@ var _a;
         this.editor.on('blur', this.blurHandler);
-        this.editor.on('resize', this.resizeHandler);
-        this.render();
+        this.createTooltip(tippyOptions);
+        this.element.style.visibility = 'visible';
     }
+    createTooltip(options = {}) {
+        this.tippy = tippy(this.view.dom, {
+            duration: 0,
+            getReferenceClientRect: null,
+            content: this.element,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'right',
+            hideOnClick: 'toggle',
+            ...options,
+        });
+    }
     update(view, oldState) {
@@ -52,4 +57,3 @@ const { state, composing } = view;
         }
-        const { $anchor, anchor, empty } = selection;
-        const parent = this.element.offsetParent;
+        const { $anchor, empty, from, to, } = selection;
         const isRootDepth = $anchor.depth === 1;
@@ -59,34 +63,22 @@ const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType;
         const isActive = isRootDepth && isDefaultNodeType && isDefaultNodeEmpty;
-        if (!empty || !parent || !isActive) {
+        if (!empty || !isActive) {
             this.hide();
             return;
         }
-        const parentBox = parent.getBoundingClientRect();
-        const cursorCoords = view.coordsAtPos(anchor);
-        const top = cursorCoords.top - parentBox.top;
-        const left = cursorCoords.left - parentBox.left;
-        this.isActive = true;
-        this.top = top;
-        this.left = left;
-        this.render();
-    }
-    render() {
-        Object.assign(this.element.style, {
-            position: 'absolute',
-            zIndex: 1,
-            visibility: this.isActive ? 'visible' : 'hidden',
-            opacity: this.isActive ? 1 : 0,
-            left: `${this.left}px`,
-            top: `${this.top}px`,
+        this.tippy.setProps({
+            getReferenceClientRect: () => posToDOMRect(view, from, to),
         });
+        this.show();
     }
+    show() {
+        this.tippy.show();
+    }
     hide() {
-        this.isActive = false;
-        this.render();
+        this.tippy.hide();
     }
     destroy() {
+        this.tippy.destroy();
         this.element.removeEventListener('mousedown', this.mousedownHandler);
         this.editor.off('focus', this.focusHandler);
         this.editor.off('blur', this.blurHandler);
-        this.editor.off('resize', this.resizeHandler);
     }
@@ -106,2 +98,3 @@ }
         element: null,
+        tippyOptions: {},
     },
@@ -116,2 +109,3 @@ addProseMirrorPlugins() {
                 element: this.options.element,
+                tippyOptions: this.options.tippyOptions,
             }),
@@ -118,0 +112,0 @@ ];

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

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-state')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-state'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@tiptap/extension-floating-menu'] = {}, global.core, global.prosemirrorState));
-}(this, (function (exports, core, prosemirrorState) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-state'), require('tippy.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-state', 'tippy.js'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@tiptap/extension-floating-menu'] = {}, global.core, global.prosemirrorState, global.tippy));
+}(this, (function (exports, core, prosemirrorState, tippy) { 'use strict';
 
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
+
   class FloatingMenuView {
-      constructor({ editor, element, view, }) {
-          this.isActive = false;
-          this.top = 0;
-          this.left = 0;
+      constructor({ editor, element, view, tippyOptions, }) {
           this.preventHide = false;
@@ -20,7 +21,2 @@ this.mousedownHandler = () => {
           };
-          this.resizeHandler = () => {
-              if (this.isActive) {
-                  this.update(this.editor.view);
-              }
-          };
           this.blurHandler = ({ event }) => {
@@ -44,5 +40,17 @@ var _a;
           this.editor.on('blur', this.blurHandler);
-          this.editor.on('resize', this.resizeHandler);
-          this.render();
+          this.createTooltip(tippyOptions);
+          this.element.style.visibility = 'visible';
       }
+      createTooltip(options = {}) {
+          this.tippy = tippy__default['default'](this.view.dom, {
+              duration: 0,
+              getReferenceClientRect: null,
+              content: this.element,
+              interactive: true,
+              trigger: 'manual',
+              placement: 'right',
+              hideOnClick: 'toggle',
+              ...options,
+          });
+      }
       update(view, oldState) {
@@ -55,4 +63,3 @@ const { state, composing } = view;
           }
-          const { $anchor, anchor, empty } = selection;
-          const parent = this.element.offsetParent;
+          const { $anchor, empty, from, to, } = selection;
           const isRootDepth = $anchor.depth === 1;
@@ -62,34 +69,22 @@ const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType;
           const isActive = isRootDepth && isDefaultNodeType && isDefaultNodeEmpty;
-          if (!empty || !parent || !isActive) {
+          if (!empty || !isActive) {
               this.hide();
               return;
           }
-          const parentBox = parent.getBoundingClientRect();
-          const cursorCoords = view.coordsAtPos(anchor);
-          const top = cursorCoords.top - parentBox.top;
-          const left = cursorCoords.left - parentBox.left;
-          this.isActive = true;
-          this.top = top;
-          this.left = left;
-          this.render();
-      }
-      render() {
-          Object.assign(this.element.style, {
-              position: 'absolute',
-              zIndex: 1,
-              visibility: this.isActive ? 'visible' : 'hidden',
-              opacity: this.isActive ? 1 : 0,
-              left: `${this.left}px`,
-              top: `${this.top}px`,
+          this.tippy.setProps({
+              getReferenceClientRect: () => core.posToDOMRect(view, from, to),
           });
+          this.show();
       }
+      show() {
+          this.tippy.show();
+      }
       hide() {
-          this.isActive = false;
-          this.render();
+          this.tippy.hide();
       }
       destroy() {
+          this.tippy.destroy();
           this.element.removeEventListener('mousedown', this.mousedownHandler);
           this.editor.off('focus', this.focusHandler);
           this.editor.off('blur', this.blurHandler);
-          this.editor.off('resize', this.resizeHandler);
       }
@@ -109,2 +104,3 @@ }
           element: null,
+          tippyOptions: {},
       },
@@ -119,2 +115,3 @@ addProseMirrorPlugins() {
                   element: this.options.element,
+                  tippyOptions: this.options.tippyOptions,
               }),
@@ -121,0 +118,0 @@ ];

package.json

 {
   "name": "@tiptap/extension-floating-menu",
   "description": "floating-menu extension for tiptap",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "homepage": "https://tiptap.dev",
@@ -29,5 +29,6 @@ "keywords": [
     "prosemirror-state": "^1.3.4",
-    "prosemirror-view": "^1.18.2"
+    "prosemirror-view": "^1.18.2",
+    "tippy.js": "^6.3.1"
   },
-  "gitHead": "634c1ae4931a8a268c7251f702b2a7d5121f02d2"
+  "gitHead": "ea9f5410915f45f7ba12d5c816965976f1956862"
 }

src/floating-menu-plugin.ts

@@ -1,4 +0,5 @@
-import { Editor, isNodeEmpty } from '@tiptap/core'
+import { Editor, isNodeEmpty, posToDOMRect } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
+import tippy, { Instance, Props } from 'tippy.js'
 
@@ -8,2 +9,3 @@ export interface FloatingMenuPluginProps {
   element: HTMLElement,
+  tippyOptions?: Partial<Props>,
 }
@@ -22,10 +24,6 @@
 
-  public isActive = false
+  public preventHide = false
 
-  public top = 0
+  public tippy!: Instance
 
-  public left = 0
-
-  public preventHide = false
-
   constructor({
@@ -35,2 +33,3 @@ editor,
     view,
+    tippyOptions,
   }: FloatingMenuViewProps) {
@@ -43,4 +42,4 @@ this.editor = editor
     this.editor.on('blur', this.blurHandler)
-    this.editor.on('resize', this.resizeHandler)
-    this.render()
+    this.createTooltip(tippyOptions)
+    this.element.style.visibility = 'visible'
   }
@@ -57,8 +56,2 @@
 
-  resizeHandler = () => {
-    if (this.isActive) {
-      this.update(this.editor.view)
-    }
-  }
-
   blurHandler = ({ event }: { event: FocusEvent }) => {
@@ -81,2 +74,15 @@ if (this.preventHide) {
 
+  createTooltip(options: Partial<Props> = {}) {
+    this.tippy = tippy(this.view.dom, {
+      duration: 0,
+      getReferenceClientRect: null,
+      content: this.element,
+      interactive: true,
+      trigger: 'manual',
+      placement: 'right',
+      hideOnClick: 'toggle',
+      ...options,
+    })
+  }
+
   update(view: EditorView, oldState?: EditorState) {
@@ -91,4 +97,8 @@ const { state, composing } = view
 
-    const { $anchor, anchor, empty } = selection
-    const parent = this.element.offsetParent
+    const {
+      $anchor,
+      empty,
+      from,
+      to,
+    } = selection
     const isRootDepth = $anchor.depth === 1
@@ -99,3 +109,3 @@ const isDefaultNodeType = $anchor.parent.type === state.doc.type.contentMatch.defaultType
 
-    if (!empty || !parent || !isActive) {
+    if (!empty || !isActive) {
       this.hide()
@@ -106,35 +116,22 @@
 
-    const parentBox = parent.getBoundingClientRect()
-    const cursorCoords = view.coordsAtPos(anchor)
-    const top = cursorCoords.top - parentBox.top
-    const left = cursorCoords.left - parentBox.left
+    this.tippy.setProps({
+      getReferenceClientRect: () => posToDOMRect(view, from, to),
+    })
 
-    this.isActive = true
-    this.top = top
-    this.left = left
-
-    this.render()
+    this.show()
   }
 
-  render() {
-    Object.assign(this.element.style, {
-      position: 'absolute',
-      zIndex: 1,
-      visibility: this.isActive ? 'visible' : 'hidden',
-      opacity: this.isActive ? 1 : 0,
-      left: `${this.left}px`,
-      top: `${this.top}px`,
-    })
+  show() {
+    this.tippy.show()
   }
 
   hide() {
-    this.isActive = false
-    this.render()
+    this.tippy.hide()
   }
 
   destroy() {
+    this.tippy.destroy()
     this.element.removeEventListener('mousedown', this.mousedownHandler)
     this.editor.off('focus', this.focusHandler)
     this.editor.off('blur', this.blurHandler)
-    this.editor.off('resize', this.resizeHandler)
   }
@@ -141,0 +138,0 @@ }

src/floating-menu.ts

@@ -13,2 +13,3 @@ import { Extension } from '@tiptap/core'
     element: null,
+    tippyOptions: {},
   },
@@ -25,2 +26,3 @@
         element: this.options.element,
+        tippyOptions: this.options.tippyOptions,
       }),
@@ -27,0 +29,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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

730590

increased by49.4%

Lines of code

1012

increased by16.72%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low supply chain risk alerts

21

increased by2000%

Dependency changes

• + Addedtippy.js@^6.3.1

• + Added@popperjs/core@2.11.8(transitive)

• + Addedtippy.js@6.3.7(transitive)