Merge pull request #655 from gambolputty/master

Make suggestions work with tippy.js v6

examples/Components/Routes/Suggestions/index.vue

@@ -35,7 +35,7 @@
 
 <script>
 import Fuse from 'fuse.js'
-import tippy from 'tippy.js'
+import tippy, { roundArrow, sticky } from 'tippy.js'
 import Icon from 'Components/Icon'
 import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
 import {
@@ -46,6 +46,7 @@ import {
   Bold,
   Italic,
 } from 'tiptap-extensions'
+import 'tippy.js/dist/svg-arrow.css'
 
 export default {
 
@@ -159,7 +160,6 @@ export default {
       filteredUsers: [],
       navigatedUserIndex: 0,
       insertMention: () => {},
-      observer: null,
     }
   },
 
@@ -217,41 +217,29 @@ export default {
         return
       }
 
-      this.popup = tippy(node, {
-        content: this.$refs.suggestions,
-        trigger: 'mouseenter',
+      // ref: https://atomiks.github.io/tippyjs/v6/all-props/
+      this.popup = tippy('.page', {
+        getReferenceClientRect: node.getBoundingClientRect,
+        appendTo: () => document.body,
         interactive: true,
+        arrow: roundArrow,
+        sticky: true, // make sure position of tippy is updated when content changes
+        plugins: [sticky],
+        content: this.$refs.suggestions,
+        trigger: 'mouseenter', // manual
+        showOnCreate: true,
         theme: 'dark',
         placement: 'top-start',
         inertia: true,
         duration: [400, 200],
-        showOnInit: true,
-        arrow: true,
-        arrowType: 'round',
       })
-
-      // we have to update tippy whenever the DOM is updated
-      if (MutationObserver) {
-        this.observer = new MutationObserver(() => {
-          this.popup.popperInstance.scheduleUpdate()
-        })
-        this.observer.observe(this.$refs.suggestions, {
-          childList: true,
-          subtree: true,
-          characterData: true,
-        })
-      }
     },
 
     destroyPopup() {
       if (this.popup) {
-        this.popup.destroy()
+        this.popup[0].destroy()
         this.popup = null
       }
-
-      if (this.observer) {
-        this.observer.disconnect()
-      }
     },
 
   },
@@ -306,7 +294,7 @@ export default {
   }
 }
 
-.tippy-tooltip.dark-theme {
+.tippy-box[data-theme~=dark] {
   background-color: $color-black;
   padding: 0;
   font-size: 1rem;
@@ -314,28 +302,28 @@ export default {
   color: $color-white;
   border-radius: 5px;
 
-  .tippy-backdrop {
-    display: none;
-  }
-
-  .tippy-roundarrow {
-    fill: $color-black;
-  }
-
-  .tippy-popper[x-placement^=top] & .tippy-arrow {
+  &[data-placement^=top]>.tippy-arrow:before {
     border-top-color: $color-black;
   }
 
-  .tippy-popper[x-placement^=bottom] & .tippy-arrow {
-    border-bottom-color: $color-black;
+  &[data-placement^=bottom]>.tippy-arrow:before {
+      border-bottom-color: $color-black;
   }
 
-  .tippy-popper[x-placement^=left] & .tippy-arrow {
-    border-left-color: $color-black;
+  &[data-placement^=left]>.tippy-arrow:before {
+      border-left-color: $color-black;
   }
 
-  .tippy-popper[x-placement^=right] & .tippy-arrow {
-    border-right-color: $color-black;
+  &[data-placement^=right]>.tippy-arrow:before {
+      border-right-color: $color-black;
+  }
+
+  &>.tippy-backdrop {
+      background-color: $color-black;
+  }
+
+  &>.tippy-svg-arrow {
+      fill: $color-black;
   }
 }
 </style>

package.json

@@ -76,7 +76,7 @@
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.1",
     "terser": "^4.4.2",
-    "tippy.js": "^4.3.5",
+    "tippy.js": "^6.1.0",
     "vue": "^2.6.10",
     "vue-loader": "^15.7.2",
     "vue-router": "^3.1.3",

yarn.lock

@@ -1812,6 +1812,11 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@popperjs/core@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.1.1.tgz#12c572ab88ef7345b43f21883fca26631c223085"
+  integrity sha512-sLqWxCzC5/QHLhziXSCAksBxHfOnQlhPRVgPK0egEw+ktWvG75T2k+aYWVjVh9+WKeT3tlG3ZNbZQvZLmfuOIw==
+
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -12406,12 +12411,12 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tippy.js@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
-  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+tippy.js@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.1.0.tgz#9c58b94f92f3044d5e861b9d83da3c2a6d3d4323"
+  integrity sha512-cRFydlVZlvo4soQSUfVNbH2K77zDUhDAzaAjxseyn81gGIa+j72y98yDL2yB0n8gas/E+Zlr1iOyR5ckslUFqA==
   dependencies:
-    popper.js "^1.14.7"
+    "@popperjs/core" "^2.1.1"
 
 tmp@^0.0.33:
   version "0.0.33"