improve the drawing example

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 {

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;
   }
 

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" />

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