From a0ba4542efc66f13b55eb46fba616bdfb9ec9386 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 16 Apr 2021 13:29:50 +0200
Subject: [PATCH] fix menu fade animations

---
 docs/src/demos/Examples/Menus/React/index.jsx   | 4 ++--
 docs/src/demos/Examples/Menus/React/styles.scss | 4 ----
 docs/src/demos/Examples/Menus/Vue/index.vue     | 8 ++------
 packages/core/src/style.ts                      | 4 ++++
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/docs/src/demos/Examples/Menus/React/index.jsx b/docs/src/demos/Examples/Menus/React/index.jsx
index ec70b28a..072159d3 100644
--- a/docs/src/demos/Examples/Menus/React/index.jsx
+++ b/docs/src/demos/Examples/Menus/React/index.jsx
@@ -25,7 +25,7 @@ export default () => {
 
   return (
     <div style={{ position: 'relative' }}>
-      {editor && <BubbleMenu className="bubble-menu" editor={editor}>
+      {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}
@@ -46,7 +46,7 @@ export default () => {
         </button>
       </BubbleMenu>}
 
-      {editor && <FloatingMenu className="floating-menu" editor={editor}>
+      {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
diff --git a/docs/src/demos/Examples/Menus/React/styles.scss b/docs/src/demos/Examples/Menus/React/styles.scss
index f7d94e8b..c54b4517 100644
--- a/docs/src/demos/Examples/Menus/React/styles.scss
+++ b/docs/src/demos/Examples/Menus/React/styles.scss
@@ -14,7 +14,6 @@
   background-color: #0D0D0D;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
@@ -37,9 +36,6 @@
   background-color: #0D0D0D10;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
diff --git a/docs/src/demos/Examples/Menus/Vue/index.vue b/docs/src/demos/Examples/Menus/Vue/index.vue
index cfc17cd3..93094b53 100644
--- a/docs/src/demos/Examples/Menus/Vue/index.vue
+++ b/docs/src/demos/Examples/Menus/Vue/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="position: relative">
-    <bubble-menu class="bubble-menu" :editor="editor" v-if="editor">
+    <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         Bold
       </button>
@@ -12,7 +12,7 @@
       </button>
     </bubble-menu>
 
-    <floating-menu class="floating-menu" :editor="editor" v-if="editor">
+    <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         H1
       </button>
@@ -95,7 +95,6 @@ export default {
   background-color: #0D0D0D;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
@@ -118,9 +117,6 @@ export default {
   background-color: #0D0D0D10;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
diff --git a/packages/core/src/style.ts b/packages/core/src/style.ts
index e98e74b8..d7f0dc5f 100644
--- a/packages/core/src/style.ts
+++ b/packages/core/src/style.ts
@@ -57,6 +57,10 @@ const style = `.ProseMirror {
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0
 }`
 
 export default style