From 72c17f9dde3b49411d005e84b158eb0a2bcace89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 18 Mar 2021 23:47:15 +0100
Subject: [PATCH 1/7] improve syntax highlighting for react docs

---
 docs/src/docPages/installation/react.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/docPages/installation/react.md b/docs/src/docPages/installation/react.md
index 1bdb2f3e..7d25d9d5 100644
--- a/docs/src/docPages/installation/react.md
+++ b/docs/src/docPages/installation/react.md
@@ -40,7 +40,7 @@ To actually start using tiptap, you’ll need to add a new component to your app
 
 This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
 
-```js
+```jsx
 import { useEditor, EditorContent } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 
@@ -61,7 +61,7 @@ export default Tiptap
 ## 4. Add it to your app
 Now, let’s replace the content of `src/App.js` with the following example code to use our new `Tiptap` component in our app.
 
-```js
+```jsx
 import Tiptap from './Tiptap.jsx'
 
 const App = () => {

From 7a20640872c01ec76991061e029cf31fee16f92b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 17:01:36 +0100
Subject: [PATCH 2/7] load demo only when in viewport

---
 docs/package.json                       |  1 +
 docs/src/components/DemoFrame/index.vue | 21 ++++++++++++++++++++-
 yarn.lock                               |  5 +++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index cb85e109..da35ef4b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -28,6 +28,7 @@
     "simplify-js": "^1.2.4",
     "tippy.js": "^6.3.1",
     "vue-github-button": "^1.1.2",
+    "vue-observe-visibility": "^1.0.0",
     "y-indexeddb": "^9.0.6",
     "y-prosemirror": "^1.0.7",
     "y-webrtc": "^10.1.7",
diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
index 410fe9e6..f45b4728 100644
--- a/docs/src/components/DemoFrame/index.vue
+++ b/docs/src/components/DemoFrame/index.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="demo-frame" :class="{ 'is-inline': inline, 'is-loading': isLoading }">
+  <div
+    class="demo-frame"
+    :class="{ 'is-inline': inline, 'is-loading': isLoading }"
+    v-observe-visibility="{
+      callback: visibilityChanged,
+      once: true,
+    }"
+  >
     <div class="demo-frame__loader-wrapper" v-if="isLoading">
       <div class="demo-frame__loader" />
     </div>
@@ -11,11 +18,14 @@
       height="0"
       frameborder="0"
       @load="onLoad"
+      v-if="isVisible"
     />
   </div>
 </template>
 
 <script>
+import { ObserveVisibility } from 'vue-observe-visibility'
+
 export default {
   props: {
     name: {
@@ -39,9 +49,14 @@ export default {
     },
   },
 
+  directives: {
+    ObserveVisibility,
+  },
+
   data() {
     return {
       isLoading: true,
+      isVisible: false,
     }
   },
 
@@ -55,6 +70,10 @@ export default {
     onLoad() {
       this.isLoading = false
     },
+
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible
+    },
   },
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 87190937..27c74143 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14863,6 +14863,11 @@ vue-meta@^2.2.2:
   dependencies:
     deepmerge "^4.2.2"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-router@^3.1.3:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"

From 40f14f904c6cbe7768d0289dc4a433d2090d493e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 18:36:27 +0100
Subject: [PATCH 3/7] add tabs to demos

---
 docs/src/components/Demo/index.vue      | 22 ++++---
 docs/src/components/Demo/style.scss     | 35 +++++++----
 docs/src/components/Demos/index.vue     | 83 +++++++++++++++++++++++++
 docs/src/docPages/examples/community.md |  9 ++-
 docs/src/docPages/examples/default.md   |  9 ++-
 docs/src/main.js                        |  1 +
 6 files changed, 126 insertions(+), 33 deletions(-)
 create mode 100644 docs/src/components/Demos/index.vue

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 9c192d85..341c058e 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -5,16 +5,18 @@
       <template v-if="mainFile">
         <demo-frame class="demo__preview" v-bind="props" />
         <div class="demo__source" v-if="showSource">
-          <div class="demo__tabs" v-if="showFileNames">
-            <button
-              class="demo__tab"
-              :class="{ 'is-active': currentIndex === index}"
-              v-for="(file, index) in files"
-              :key="index"
-              @click="currentIndex = index"
-            >
-              {{ file.name }}
-            </button>
+          <div class="demo__scroller" v-if="showFileNames">
+            <div class="demo__tabs">
+              <button
+                class="demo__tab"
+                :class="{ 'is-active': currentIndex === index}"
+                v-for="(file, index) in files"
+                :key="index"
+                @click="currentIndex = index"
+              >
+                {{ file.name }}
+              </button>
+            </div>
           </div>
           <div class="demo__code" v-if="activeFile" :key="activeFile.path">
             <!-- eslint-disable-next-line -->
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 6403afd0..5e8baaa5 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -18,33 +18,42 @@
     background-color: $colorBlack;
   }
 
-  &__tabs {
-    padding: 0.5rem 1.25rem 0 1.25rem;
-    background-color: rgba($colorBlack, 0.9);
-    white-space: nowrap;
+  &__scroller {
+    display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  &__tabs {
+    display: flex;
+    flex: 1 1 auto;
+    padding: 0 1.25rem 0 1.25rem;
+    border-bottom: 2px solid rgba($colorWhite, 0.1);
+  }
+
   &__tab {
+    position: relative;
     display: inline-flex;
     position: relative;
     background-color: transparent;
     color: rgba($colorWhite, 0.7);
-    padding: 0.1rem 0.5rem;
-    border-radius: 5px;
-    font-weight: 500;
+    padding: 0.3rem 0 calc(0.3rem + 2px) 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
     border: none;
-    margin-right: 0.5rem;
-
-    &:first-child {
-      margin-left: -0.5rem;
-    }
+    margin-right: 1rem;
+    margin-bottom: -2px;
+    border-bottom: 2px solid transparent;
 
     &.is-active,
     &:hover {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.1);
+    }
+
+    &.is-active {
+      font-weight: 700;
+      border-bottom-color: $colorWhite
     }
   }
 
diff --git a/docs/src/components/Demos/index.vue b/docs/src/components/Demos/index.vue
new file mode 100644
index 00000000..d6c9442c
--- /dev/null
+++ b/docs/src/components/Demos/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="demos" :class="{ 'is-first-active': selectedIndex === 0 }">
+    <button
+      class="demos__tab"
+      :class="{ 'is-active': selectedIndex === index }"
+      v-for="(item, index) in formattedItems"
+      :key="index"
+      @click="selectedIndex = index"
+    >
+      {{ item.title }}
+    </button>
+    <demo
+      :name="selectedItem.name"
+      :key="selectedItem.title"
+    />
+  </div>
+</template>
+
+<script>
+import Demo from '@/components/Demo'
+
+export default {
+  components: {
+    Demo,
+  },
+
+  props: {
+    items: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  computed: {
+    formattedItems() {
+      return Object
+        .entries(this.items)
+        .map(([title, name]) => {
+          return {
+            title,
+            name,
+          }
+        })
+    },
+
+    selectedItem() {
+      return this.formattedItems[this.selectedIndex]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demos {
+  &__tab {
+    border-radius: 0.4rem 0.4rem 0 0;
+    border: none;
+    background: none;
+    padding: 0.3rem 1.25rem;
+    font: inherit;
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025rem;
+
+    &.is-active {
+      background-color: $colorBlack;
+      color: $colorWhite;
+      font-weight: 700;
+    }
+  }
+
+  &.is-first-active ::v-deep .demo {
+    border-top-left-radius: 0;
+  }
+}
+</style>
diff --git a/docs/src/docPages/examples/community.md b/docs/src/docPages/examples/community.md
index bcc957d8..fd34d2d5 100644
--- a/docs/src/docPages/examples/community.md
+++ b/docs/src/docPages/examples/community.md
@@ -1,7 +1,6 @@
 # Suggestions
 
-## Vue
-<demo name="Examples/Community/Vue" />
-
-## React
-<demo name="Examples/Community/React" />
+<demos :items="{
+  Vue: 'Examples/Community/Vue',
+  React: 'Examples/Community/React',
+}" />
diff --git a/docs/src/docPages/examples/default.md b/docs/src/docPages/examples/default.md
index 47ff89cd..73ab03ac 100644
--- a/docs/src/docPages/examples/default.md
+++ b/docs/src/docPages/examples/default.md
@@ -1,8 +1,7 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
 
-## Vue
-<demo name="Examples/Default/Vue" />
-
-## React
-<demo name="Examples/Default/React" />
+<demos :items="{
+  Vue: 'Examples/Default/Vue',
+  React: 'Examples/Default/React',
+}" />
diff --git a/docs/src/main.js b/docs/src/main.js
index c5735d8f..70f63040 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -51,4 +51,5 @@ export default function (Vue) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
+  Vue.component('Demos', () => import(/* webpackChunkName: "demos" */ '~/components/Demos'))
 }

From 7ea7cd44ea32f239587ec6e122da30efe85c5af4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 18:51:39 +0100
Subject: [PATCH 4/7] add copy button

---
 docs/package.json                   |  1 +
 docs/src/components/Demo/index.vue  | 10 ++++++++++
 docs/src/components/Demo/style.scss | 21 ++++++++++++++++++++-
 yarn.lock                           | 12 ++++++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index da35ef4b..374feb8c 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,6 +14,7 @@
     "@mvasilkov/outdent": "^1.0.4",
     "canvas": "^2.6.1",
     "collect.js": "^4.28.6",
+    "copy-to-clipboard": "^3.3.1",
     "d3": "^6.5.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.23",
diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 341c058e..c682f6b5 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -22,6 +22,9 @@
             <!-- eslint-disable-next-line -->
             <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
           </div>
+          <button class="demo__copy" @click="copy">
+            Copy
+          </button>
         </div>
         <div class="demo__meta">
           <div class="demo__name">
@@ -40,6 +43,7 @@
 </template>
 
 <script>
+import copy from 'copy-to-clipboard'
 import Prism from '~/components/Prism'
 import DemoFrame from '~/components/DemoFrame'
 import DemoMixin from '~/components/DemoMixin'
@@ -75,6 +79,12 @@ export default {
       return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
     },
   },
+
+  methods: {
+    copy() {
+      copy(this.activeFile.content)
+    },
+  },
 }
 </script>
 
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 5e8baaa5..0f1ccd2e 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -15,6 +15,7 @@
   }
 
   &__source {
+    position: relative;
     background-color: $colorBlack;
   }
 
@@ -27,7 +28,7 @@
   &__tabs {
     display: flex;
     flex: 1 1 auto;
-    padding: 0 1.25rem 0 1.25rem;
+    padding: 0 3.5rem 0 1.25rem;
     border-bottom: 2px solid rgba($colorWhite, 0.1);
   }
 
@@ -106,4 +107,22 @@
     font-weight: 700;
     margin-bottom: 0.25rem;
   }
+
+  &__copy {
+    position: absolute;
+    top: 0;
+    padding: 0.3rem 1rem;
+    right: 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
+    background: $colorBlack;
+    border: 0;
+    border-radius: 0.4rem;
+    color: rgba($colorWhite, 0.7);
+
+    &:hover {
+      color: $colorWhite;
+    }
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 27c74143..024040a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4648,6 +4648,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.5, core-js-compat@^3.8.1, core-js-compat@^3.9.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
@@ -14095,6 +14102,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"

From 19d29092daa2a58a579ea71902f5b13ee7935d40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 22:50:47 +0100
Subject: [PATCH 5/7] Revert "add copy button"

This reverts commit 7ea7cd44ea32f239587ec6e122da30efe85c5af4.
---
 docs/package.json                   |  1 -
 docs/src/components/Demo/index.vue  | 10 ----------
 docs/src/components/Demo/style.scss | 21 +--------------------
 yarn.lock                           | 12 ------------
 4 files changed, 1 insertion(+), 43 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 374feb8c..da35ef4b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,7 +14,6 @@
     "@mvasilkov/outdent": "^1.0.4",
     "canvas": "^2.6.1",
     "collect.js": "^4.28.6",
-    "copy-to-clipboard": "^3.3.1",
     "d3": "^6.5.0",
     "globby": "^11.0.0",
     "gridsome": "0.7.23",
diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index c682f6b5..341c058e 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -22,9 +22,6 @@
             <!-- eslint-disable-next-line -->
             <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
           </div>
-          <button class="demo__copy" @click="copy">
-            Copy
-          </button>
         </div>
         <div class="demo__meta">
           <div class="demo__name">
@@ -43,7 +40,6 @@
 </template>
 
 <script>
-import copy from 'copy-to-clipboard'
 import Prism from '~/components/Prism'
 import DemoFrame from '~/components/DemoFrame'
 import DemoMixin from '~/components/DemoMixin'
@@ -79,12 +75,6 @@ export default {
       return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
     },
   },
-
-  methods: {
-    copy() {
-      copy(this.activeFile.content)
-    },
-  },
 }
 </script>
 
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 0f1ccd2e..5e8baaa5 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -15,7 +15,6 @@
   }
 
   &__source {
-    position: relative;
     background-color: $colorBlack;
   }
 
@@ -28,7 +27,7 @@
   &__tabs {
     display: flex;
     flex: 1 1 auto;
-    padding: 0 3.5rem 0 1.25rem;
+    padding: 0 1.25rem 0 1.25rem;
     border-bottom: 2px solid rgba($colorWhite, 0.1);
   }
 
@@ -107,22 +106,4 @@
     font-weight: 700;
     margin-bottom: 0.25rem;
   }
-
-  &__copy {
-    position: absolute;
-    top: 0;
-    padding: 0.3rem 1rem;
-    right: 0;
-    font: inherit;
-    font-family: "JetBrainsMono", monospace;
-    font-size: 0.85rem;
-    background: $colorBlack;
-    border: 0;
-    border-radius: 0.4rem;
-    color: rgba($colorWhite, 0.7);
-
-    &:hover {
-      color: $colorWhite;
-    }
-  }
 }
diff --git a/yarn.lock b/yarn.lock
index 024040a4..27c74143 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4648,13 +4648,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.6.5, core-js-compat@^3.8.1, core-js-compat@^3.9.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.9.1.tgz#4e572acfe90aff69d76d8c37759d21a5c59bb455"
@@ -14102,11 +14095,6 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-toggle-selection@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
-  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
-
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"

From 2cf8fd81e982a2c30d89764a8b79efa9a7003bad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 23:08:43 +0100
Subject: [PATCH 6/7] fix ios bug

---
 docs/src/components/Demos/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/components/Demos/index.vue b/docs/src/components/Demos/index.vue
index d6c9442c..c96326f9 100644
--- a/docs/src/components/Demos/index.vue
+++ b/docs/src/components/Demos/index.vue
@@ -63,6 +63,7 @@ export default {
     border: none;
     background: none;
     padding: 0.3rem 1.25rem;
+    margin-bottom: -1px;
     font: inherit;
     font-weight: 700;
     font-size: 0.75rem;

From 02471afb2749ba6b0c67da94d1a3a83bd229c2a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 20 Mar 2021 21:25:18 +0100
Subject: [PATCH 7/7] add some color

---
 docs/src/demos/Examples/InteractiveNodeViews/Component.vue       | 1 +
 docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss        | 1 +
 docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss | 1 +
 docs/src/demos/Guide/NodeViews/VueComponent/Component.vue        | 1 +
 docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue | 1 +
 5 files changed, 5 insertions(+)

diff --git a/docs/src/demos/Examples/InteractiveNodeViews/Component.vue b/docs/src/demos/Examples/InteractiveNodeViews/Component.vue
index b1793b8c..8ececb89 100644
--- a/docs/src/demos/Examples/InteractiveNodeViews/Component.vue
+++ b/docs/src/demos/Examples/InteractiveNodeViews/Component.vue
@@ -32,6 +32,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
diff --git a/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss b/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
index 971b652e..93c543c4 100644
--- a/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
+++ b/docs/src/demos/Guide/NodeViews/ReactComponent/styles.scss
@@ -6,6 +6,7 @@
 }
 
 .react-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
diff --git a/docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss b/docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss
index 277092de..c61ccbe7 100644
--- a/docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss
+++ b/docs/src/demos/Guide/NodeViews/ReactComponentContent/styles.scss
@@ -6,6 +6,7 @@
 }
 
 .react-component-with-content {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
diff --git a/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue b/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
index b1793b8c..8ececb89 100644
--- a/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
@@ -32,6 +32,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;
diff --git a/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue b/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue
index 00056a71..e279318a 100644
--- a/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue
@@ -21,6 +21,7 @@ export default {
 
 <style lang="scss" scoped>
 .vue-component {
+  background: #FAF594;
   border: 3px solid #0D0D0D;
   border-radius: 0.5rem;
   margin: 1rem 0;