Remove tippy.js and replace with Floating UI (#5398)

* start experimenting with floating-ui

* add options to floating-ui bubble menu plugin & fix smaller issues

* add vue support for new floating-ui

* start experimenting with floating-ui

* adjust floating-menu plugin for floating-ui & update react component

* add vue support for floating-menu with floating-ui

* update tests for new floating-ui integration

* added changeset file

* move floating-ui dependency to peerDeps

* add install notice to changelog

* remove unnecessary code for destroying and removing component element in Vue suggestion.js

* remove unnecessary code for destroying and removing component element in React suggestion.js

* sync package-lock

* widen range for peerDeps again

Author: bdbch

.changeset/dirty-bats-look.md

@@ -0,0 +1,36 @@
+---
+"@tiptap/extension-floating-menu": major
+"@tiptap/extension-bubble-menu": major
+"@tiptap/extension-mention": major
+"@tiptap/suggestion": major
+"@tiptap/react": major
+"@tiptap/vue-2": major
+"@tiptap/vue-3": major
+---
+
+Removed tippy.js and replaced it with [Floating UI](https://floating-ui.com/) - a newer, more lightweight and customizable floating element library.
+
+This change is breaking existing menu implementations and will require a manual migration.
+
+**Affected packages:**
+
+- `@tiptap/extension-floating-menu`
+- `@tiptap/extension-bubble-menu`
+- `@tiptap/extension-mention`
+- `@tiptap/suggestion`
+- `@tiptap/react`
+- `@tiptap/vue-2`
+- `@tiptap/vue-3`
+
+Make sure to remove `tippyOptions` from the `FloatingMenu` and `BubbleMenu` components, and replace them with the new `options` object. Check our documentation to see how to migrate your existing menu implementations.
+
+- [FloatingMenu](https://tiptap.dev/docs/editor/extensions/functionality/floatingmenu)
+- [BubbleMenu](https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu)
+
+You'll also need to install `@floating-ui/dom` as a peer dependency to your project like this:
+
+```bash
+npm install @floating-ui/dom@^1.6.0
+```
+
+The new `options` object is compatible with all components that use these extensions.

demos/includeDependencies.txt

@@ -23,7 +23,7 @@ react-dom
 react-dom/client
 shiki
 simplify-js
-tippy.js
+@floating-ui/dom
 uuid
 y-webrtc
 yjs

demos/src/Examples/Community/React/index.spec.js

@@ -20,10 +20,10 @@ context('/src/Examples/Community/React/', () => {
     cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
-    cy.get('.tippy-content .dropdown-menu').should('be.visible')
+    cy.get('.dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.tippy-content .dropdown-menu button').first().then($el => {
+    cy.get('.dropdown-menu button').first().then($el => {
       const name = $el.text()
 
       $el.click()

demos/src/Examples/Community/React/suggestion.js

@@ -1,8 +1,29 @@
-import { ReactRenderer } from '@tiptap/react'
-import tippy from 'tippy.js'
+import {
+  computePosition,
+  flip,
+  shift,
+} from '@floating-ui/dom'
+import { posToDOMRect, ReactRenderer } from '@tiptap/react'
 
 import { MentionList } from './MentionList.jsx'
 
+const updatePosition = (editor, element) => {
+  const virtualElement = {
+    getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+  }
+
+  computePosition(virtualElement, element, {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    middleware: [shift(), flip()],
+  }).then(({ x, y, strategy }) => {
+    element.style.width = 'max-content'
+    element.style.position = strategy
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+  })
+}
+
 export default {
   items: ({ query }) => {
     return [
@@ -12,7 +33,6 @@ export default {
 
   render: () => {
     let reactRenderer
-    let popup
 
     return {
       onStart: props => {
@@ -26,15 +46,11 @@ export default {
           editor: props.editor,
         })
 
-        popup = tippy('body', {
-          getReferenceClientRect: props.clientRect,
-          appendTo: () => document.body,
-          content: reactRenderer.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: 'manual',
-          placement: 'bottom-start',
-        })
+        reactRenderer.element.style.position = 'absolute'
+
+        document.body.appendChild(reactRenderer.element)
+
+        updatePosition(props.editor, reactRenderer.element)
       },
 
       onUpdate(props) {
@@ -43,15 +59,13 @@ export default {
         if (!props.clientRect) {
           return
         }
-
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        })
+        updatePosition(props.editor, reactRenderer.element)
       },
 
       onKeyDown(props) {
         if (props.event.key === 'Escape') {
-          popup[0].hide()
+          reactRenderer.destroy()
+          reactRenderer.element.remove()
 
           return true
         }
@@ -60,8 +74,8 @@ export default {
       },
 
       onExit() {
-        popup[0].destroy()
         reactRenderer.destroy()
+        reactRenderer.element.remove()
       },
     }
   },

demos/src/Examples/Community/Vue/index.spec.js

@@ -20,10 +20,10 @@ context('/src/Examples/Community/Vue/', () => {
     cy.get('.tiptap').type('{selectall}{backspace}@')
 
     // check if the mention autocomplete is visible
-    cy.get('.tippy-content .dropdown-menu').should('be.visible')
+    cy.get('.dropdown-menu').should('be.visible')
 
     // select the first user
-    cy.get('.tippy-content .dropdown-menu button').first().then($el => {
+    cy.get('.dropdown-menu button').first().then($el => {
       const name = $el.text()
 
       $el.click()

demos/src/Examples/Community/Vue/suggestion.js

@@ -1,8 +1,29 @@
-import { VueRenderer } from '@tiptap/vue-3'
-import tippy from 'tippy.js'
+import {
+  computePosition,
+  flip,
+  shift,
+} from '@floating-ui/dom'
+import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
 
 import MentionList from './MentionList.vue'
 
+const updatePosition = (editor, element) => {
+  const virtualElement = {
+    getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+  }
+
+  computePosition(virtualElement, element, {
+    placement: 'bottom-start',
+    strategy: 'absolute',
+    middleware: [shift(), flip()],
+  }).then(({ x, y, strategy }) => {
+    element.style.width = 'max-content'
+    element.style.position = strategy
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+  })
+}
+
 export default {
   items: ({ query }) => {
     return [
@@ -12,7 +33,6 @@ export default {
 
   render: () => {
     let component
-    let popup
 
     return {
       onStart: props => {
@@ -28,15 +48,11 @@ export default {
           return
         }
 
-        popup = tippy('body', {
-          getReferenceClientRect: props.clientRect,
-          appendTo: () => document.body,
-          content: component.element,
-          showOnCreate: true,
-          interactive: true,
-          trigger: 'manual',
-          placement: 'bottom-start',
-        })
+        component.element.style.position = 'absolute'
+
+        document.body.appendChild(component.element)
+
+        updatePosition(props.editor, component.element)
       },
 
       onUpdate(props) {
@@ -46,14 +62,13 @@ export default {
           return
         }
 
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        })
+        updatePosition(props.editor, component.element)
       },
 
       onKeyDown(props) {
         if (props.event.key === 'Escape') {
-          popup[0].hide()
+          component.destroy()
+          component.element.remove()
 
           return true
         }
@@ -62,8 +77,8 @@ export default {
       },
 
       onExit() {
-        popup[0].destroy()
         component.destroy()
+        component.element.remove()
       },
     }
   },

demos/src/Examples/Menus/React/index.jsx

@@ -26,7 +26,7 @@ export default () => {
 
   return (
     <>
-      {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor}>
+      {editor && <BubbleMenu className="bubble-menu" editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}
@@ -47,7 +47,7 @@ export default () => {
         </button>
       </BubbleMenu>}
 
-      {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} editor={editor}>
+      {editor && <FloatingMenu className="floating-menu" editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}

demos/src/Examples/Menus/React/index.spec.js

@@ -10,17 +10,17 @@ context('/src/Examples/Menus/React/', () => {
   })
 
   it('should show menu when the editor is empty', () => {
-    cy.get('#app')
-      .find('[data-tippy-root]')
+    cy.get('body')
+      .find('.floating-menu')
   })
 
   it('should show menu when text is selected', () => {
     cy.get('.tiptap')
       .type('Test')
       .type('{selectall}')
 
-    cy.get('#app')
-      .find('[data-tippy-root]')
+    cy.get('body')
+      .find('.bubble-menu')
   })
 
   const marks = [
@@ -44,8 +44,8 @@ context('/src/Examples/Menus/React/', () => {
         .type('Test')
         .type('{selectall}')
 
-      cy.get('#app')
-        .find('[data-tippy-root]')
+      cy.get('body')
+        .find('.bubble-menu')
         .contains(mark.button)
         .click()
 

demos/src/Examples/Menus/Vue/index.spec.js

@@ -10,17 +10,17 @@ context('/src/Examples/Menus/Vue/', () => {
   })
 
   it('should show menu when the editor is empty', () => {
-    cy.get('#app')
-      .find('[data-tippy-root]')
+    cy.get('body')
+      .find('.floating-menu')
   })
 
   it('should show menu when text is selected', () => {
     cy.get('.tiptap')
       .type('Test')
       .type('{selectall}')
 
-    cy.get('#app')
-      .find('[data-tippy-root]')
+    cy.get('body')
+      .find('.bubble-menu')
   })
 
   const marks = [
@@ -44,8 +44,8 @@ context('/src/Examples/Menus/Vue/', () => {
         .type('Test')
         .type('{selectall}')
 
-      cy.get('#app')
-        .find('[data-tippy-root]')
+      cy.get('body')
+        .find('.bubble-menu')
         .contains(mark.button)
         .click()
 

demos/src/Examples/Menus/Vue/index.vue

@@ -1,35 +1,35 @@
 <template>
   <div v-if="editor">
     <bubble-menu
-      class="bubble-menu"
-      :tippy-options="{ duration: 100 }"
       :editor="editor"
     >
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        Bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        Italic
-      </button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-        Strike
-      </button>
+      <div class="bubble-menu">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+          Bold
+        </button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+          Italic
+        </button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          Strike
+        </button>
+      </div>
     </bubble-menu>
 
     <floating-menu
-      class="floating-menu"
-      :tippy-options="{ duration: 100 }"
       :editor="editor"
     >
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        H1
-      </button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        H2
-      </button>
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        Bullet list
-      </button>
+      <div class="floating-menu">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+          H1
+        </button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+          H2
+        </button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+          Bullet list
+        </button>
+      </div>
     </floating-menu>
   </div>