From 9ac2179697765eade925c9a30bab2d96b19b2e98 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 11 Jan 2021 15:30:43 +0100
Subject: [PATCH] improve the drawing example

---
 docs/src/components/Demo/style.scss           |  3 +++
 docs/src/demos/Examples/Drawing/Component.vue | 18 +++++++++++++++---
 docs/src/docPages/examples/drawing.md         | 11 ++++++++++-
 docs/src/links.yaml                           |  2 --
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 4c6e6d3d..6ef8cee8 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -9,6 +9,9 @@
     border-bottom-width: 0;
     color: $colorBlack;
     background-color: $colorWhite;
+    max-height: 50rem;
+    overflow: auto;
+    scroll-behavior: smooth;
   }
 
   &__source {
diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 3d426471..4d1cd508 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/docs/src/demos/Examples/Drawing/Component.vue
@@ -30,6 +30,10 @@ import { v4 as uuid } from 'uuid'
 import * as d3 from 'd3'
 import simplify from 'simplify-js'
 
+const getRandomElement = list => {
+  return list[Math.floor(Math.random() * list.length)]
+}
+
 export default {
   name: 'Paper',
 
@@ -47,8 +51,16 @@ export default {
 
   data() {
     return {
-      color: '#000000',
-      size: 2,
+      color: getRandomElement([
+        '#A975FF',
+        '#FB5151',
+        '#FD9170',
+        '#FFCB6B',
+        '#68CEF8',
+        '#80CBC4',
+        '#9DEF8F',
+      ]),
+      size: Math.floor(Math.random() * Math.floor(20)),
       svg: null,
       path: null,
       points: [],
@@ -148,7 +160,7 @@ export default {
 <style lang="scss">
 .draw {
   svg {
-    background: #EEE;
+    background: #f1f3f5;
     cursor: crosshair;
   }
 
diff --git a/docs/src/docPages/examples/drawing.md b/docs/src/docPages/examples/drawing.md
index 81e41664..0fa36728 100644
--- a/docs/src/docPages/examples/drawing.md
+++ b/docs/src/docPages/examples/drawing.md
@@ -1,4 +1,13 @@
 # Drawing
 
-<demo name="Examples/Drawing" inline />
+Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with tiptap. If you want to build something like that, [learn more about node views](/guide/node-views).
+
+:::warning Shared Document
+Be nice! The content of this editor is shared with other users from the Internet.
+:::
+
+<demo name="Examples/Drawing" :show-source="false" />
+
+Here is another instance of that demo, to illustrate how changes can be synced. Be nice, those changes are synced to all users on this page. Open another tab to test that out!
+
 <demo name="Examples/Drawing" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 72ea163e..7b7a40a3 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -28,12 +28,10 @@
       link: /examples/todo-app
     - title: Write a book
       link: /examples/book
-      draft: true
     - title: For minimalists
       link: /examples/minimalist
     - title: Drawing
       link: /examples/drawing
-      draft: true
     - title: Multiple editors
       link: /examples/multiple-editors