From 6ddfd3c426ddb4b81673eedd9e24851402b105d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 2 Dec 2020 22:21:46 +0100
Subject: [PATCH] add inline option to demo component

---
 docs/src/components/Demo/index.vue                    | 11 ++++++++++-
 .../src/demos/Examples/CollaborativeEditing/index.vue |  1 +
 docs/src/docPages/introduction.md                     |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 71cd96b7..30e33d15 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="demo">
+  <div v-if="inline && mainFile">
+    <component :is="mainFile" v-if="mode === 'vue'" />
+    <react-renderer :component="mainFile" v-if="mode === 'react'" />
+  </div>
+  <div class="demo" v-else>
     <template v-if="mainFile">
       <div class="demo__preview">
         <component :is="mainFile" v-if="mode === 'vue'" />
@@ -57,6 +61,11 @@ export default {
       default: 'vue',
     },
 
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+
     highlight: {
       type: String,
       default: null,
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index a857d84e..5ed9325d 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -155,6 +155,7 @@ export default {
 
 <style lang="scss" scoped>
 .editor {
+  color: black;
   background-color: white;
   border: 1px solid rgba(black, 0.1);
   border-radius: 0.5rem;
diff --git a/docs/src/docPages/introduction.md b/docs/src/docPages/introduction.md
index 4906edfe..8a4b04e2 100644
--- a/docs/src/docPages/introduction.md
+++ b/docs/src/docPages/introduction.md
@@ -13,7 +13,7 @@ tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a
 Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
 
 ## Example
-<demo name="Examples/CollaborativeEditing" :show-source="false" />
+<demo name="Examples/CollaborativeEditing" :show-source="false" inline />
 
 ## Features
 **Headless.** We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.