From 3b3a0103b9da3ed6d53d22b55a5549167835056b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 17:36:22 +0200
Subject: [PATCH] add basic styling for menus example

---
 docs/src/demos/Examples/Menus/React/index.jsx | 10 ++--
 .../demos/Examples/Menus/React/styles.scss    | 45 ++++++++++++++++
 docs/src/demos/Examples/Menus/Vue/index.vue   | 53 +++++++++++++++++--
 .../Extensions/BubbleMenu/React/index.jsx     |  6 +--
 .../demos/Extensions/BubbleMenu/Vue/index.vue |  4 +-
 5 files changed, 104 insertions(+), 14 deletions(-)

diff --git a/docs/src/demos/Examples/Menus/React/index.jsx b/docs/src/demos/Examples/Menus/React/index.jsx
index dd6ca274..af78c4a5 100644
--- a/docs/src/demos/Examples/Menus/React/index.jsx
+++ b/docs/src/demos/Examples/Menus/React/index.jsx
@@ -22,7 +22,7 @@ export default () => {
 
   return (
     <div style={{ position: 'relative' }}>
-      {editor && <BubbleMenu editor={editor}>
+      {editor && <BubbleMenu className="bubble-menu" editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}
@@ -36,14 +36,14 @@ export default () => {
           italic
         </button>
         <button
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          className={editor.isActive('code') ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? 'is-active' : ''}
         >
-          code
+          strike
         </button>
       </BubbleMenu>}
 
-      {editor && <FloatingMenu 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' : ''}
diff --git a/docs/src/demos/Examples/Menus/React/styles.scss b/docs/src/demos/Examples/Menus/React/styles.scss
index 9489311c..90e2aa38 100644
--- a/docs/src/demos/Examples/Menus/React/styles.scss
+++ b/docs/src/demos/Examples/Menus/React/styles.scss
@@ -8,3 +8,48 @@
     padding: 0 1rem;
   }
 }
+
+.bubble-menu {
+  display: flex;
+  background-color: #0D0D0D;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    color: #FFF;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+
+.floating-menu {
+  display: flex;
+  background-color: #0D0D0D10;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+  margin-top: -0.25rem;
+  margin-left: 0.25rem;
+
+  button {
+    border: none;
+    background: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
diff --git a/docs/src/demos/Examples/Menus/Vue/index.vue b/docs/src/demos/Examples/Menus/Vue/index.vue
index 7aa15d5e..deec5537 100644
--- a/docs/src/demos/Examples/Menus/Vue/index.vue
+++ b/docs/src/demos/Examples/Menus/Vue/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div style="position: relative">
-    <bubble-menu :editor="editor" v-if="editor">
+    <bubble-menu class="bubble-menu" :editor="editor" v-if="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().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+        strike
       </button>
     </bubble-menu>
 
-    <floating-menu :editor="editor" v-if="editor">
+    <floating-menu class="floating-menu" :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         h1
       </button>
@@ -86,4 +86,49 @@ export default {
     border-left: 2px solid rgba(#0D0D0D, 0.1);
   }
 }
+
+.bubble-menu {
+  display: flex;
+  background-color: #0D0D0D;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    color: #FFF;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+
+.floating-menu {
+  display: flex;
+  background-color: #0D0D0D10;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+  margin-top: -0.25rem;
+  margin-left: 0.25rem;
+
+  button {
+    border: none;
+    background: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
 </style>
diff --git a/docs/src/demos/Extensions/BubbleMenu/React/index.jsx b/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
index 01787e1f..8271a415 100644
--- a/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
+++ b/docs/src/demos/Extensions/BubbleMenu/React/index.jsx
@@ -31,10 +31,10 @@ export default () => {
           italic
         </button>
         <button
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          className={editor.isActive('code') ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? 'is-active' : ''}
         >
-          code
+          strike
         </button>
       </BubbleMenu>}
       <EditorContent editor={editor} />
diff --git a/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue b/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
index d803dc94..8ced328a 100644
--- a/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
+++ b/docs/src/demos/Extensions/BubbleMenu/Vue/index.vue
@@ -7,8 +7,8 @@
       <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
-      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
-        code
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+        strike
       </button>
     </bubble-menu>
     <editor-content :editor="editor" />