add inline option to demo component

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,

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;

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.