From 3fe97621e7d3cb0f4bf96a4e1cbc4c282aa5d634 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 19 Oct 2021 21:28:48 +0200
Subject: [PATCH] docs: update extension examples

---
 .../Extensions/Collaboration/Vue/index.vue    | 22 +++++++++++++++++++
 .../CollaborationCursor/Vue/index.vue         | 20 +++++++++++++++++
 demos/src/Extensions/Color/Vue/index.vue      |  2 +-
 demos/src/Extensions/Dropcursor/Vue/index.vue |  4 +---
 .../src/Extensions/FloatingMenu/Vue/index.vue |  6 ++---
 demos/src/Extensions/Focus/Vue/index.vue      |  4 ++++
 demos/src/Extensions/FontFamily/Vue/index.vue |  2 +-
 demos/src/Extensions/Gapcursor/Vue/index.vue  |  4 +---
 .../src/Extensions/Placeholder/Vue/index.vue  | 17 +++++++++++---
 demos/src/Extensions/TextAlign/Vue/index.vue  |  2 +-
 demos/src/Extensions/Typography/Vue/index.vue |  4 +---
 11 files changed, 69 insertions(+), 18 deletions(-)

diff --git a/demos/src/Extensions/Collaboration/Vue/index.vue b/demos/src/Extensions/Collaboration/Vue/index.vue
index 01e5b27e..623e1932 100644
--- a/demos/src/Extensions/Collaboration/Vue/index.vue
+++ b/demos/src/Extensions/Collaboration/Vue/index.vue
@@ -8,6 +8,7 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Collaboration from '@tiptap/extension-collaboration'
+import Placeholder from '@tiptap/extension-placeholder'
 import * as Y from 'yjs'
 import { WebrtcProvider } from 'y-webrtc'
 
@@ -35,6 +36,9 @@ export default {
         Collaboration.configure({
           document: ydoc,
         }),
+        Placeholder.configure({
+          placeholder: 'Write something … It’ll be shared with everyone else looking at this example.',
+        }),
       ],
     })
   },
@@ -45,3 +49,21 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+/* Placeholder (at the top) */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
+</style>
diff --git a/demos/src/Extensions/CollaborationCursor/Vue/index.vue b/demos/src/Extensions/CollaborationCursor/Vue/index.vue
index 06f6004e..c36a1d7c 100644
--- a/demos/src/Extensions/CollaborationCursor/Vue/index.vue
+++ b/demos/src/Extensions/CollaborationCursor/Vue/index.vue
@@ -11,6 +11,7 @@ import Collaboration from '@tiptap/extension-collaboration'
 import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 import * as Y from 'yjs'
 import { WebrtcProvider } from 'y-webrtc'
+import Placeholder from '@tiptap/extension-placeholder'
 
 export default {
   components: {
@@ -43,6 +44,9 @@ export default {
             color: '#f783ac',
           },
         }),
+        Placeholder.configure({
+          placeholder: 'Write something … It’ll be shared with everyone else looking at this example.',
+        }),
       ],
     })
   },
@@ -55,6 +59,22 @@ export default {
 </script>
 
 <style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+/* Placeholder (at the top) */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
+
 /* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
diff --git a/demos/src/Extensions/Color/Vue/index.vue b/demos/src/Extensions/Color/Vue/index.vue
index 15990c86..37967575 100644
--- a/demos/src/Extensions/Color/Vue/index.vue
+++ b/demos/src/Extensions/Color/Vue/index.vue
@@ -27,7 +27,7 @@
       green
     </button>
     <button @click="editor.chain().focus().unsetColor().run()">
-      remove color
+      unsetColor
     </button>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Extensions/Dropcursor/Vue/index.vue b/demos/src/Extensions/Dropcursor/Vue/index.vue
index 5d7ce08f..8e9b98f8 100644
--- a/demos/src/Extensions/Dropcursor/Vue/index.vue
+++ b/demos/src/Extensions/Dropcursor/Vue/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Extensions/FloatingMenu/Vue/index.vue b/demos/src/Extensions/FloatingMenu/Vue/index.vue
index 53e606f7..90e1db15 100644
--- a/demos/src/Extensions/FloatingMenu/Vue/index.vue
+++ b/demos/src/Extensions/FloatingMenu/Vue/index.vue
@@ -2,13 +2,13 @@
   <div>
     <floating-menu :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
-        h1
+        H1
       </button>
       <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
-        h2
+        H2
       </button>
       <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
-        bullet list
+        Bullet List
       </button>
     </floating-menu>
     <editor-content :editor="editor" />
diff --git a/demos/src/Extensions/Focus/Vue/index.vue b/demos/src/Extensions/Focus/Vue/index.vue
index 57d02e27..3194b69e 100644
--- a/demos/src/Extensions/Focus/Vue/index.vue
+++ b/demos/src/Extensions/Focus/Vue/index.vue
@@ -81,8 +81,12 @@ export default {
   }
 
   code {
+    font-size: 0.9rem;
+    padding: 0.25em;
+    border-radius: 0.25em;
     background-color: rgba(#616161, 0.1);
     color: #616161;
+    box-decoration-break: clone;
   }
 }
 </style>
diff --git a/demos/src/Extensions/FontFamily/Vue/index.vue b/demos/src/Extensions/FontFamily/Vue/index.vue
index 08dd55e9..66f29f8f 100644
--- a/demos/src/Extensions/FontFamily/Vue/index.vue
+++ b/demos/src/Extensions/FontFamily/Vue/index.vue
@@ -16,7 +16,7 @@
       cursive
     </button>
     <button @click="editor.chain().focus().unsetFontFamily().run()">
-      Remove font-family
+      unsetFontFamily
     </button>
 
     <editor-content :editor="editor" />
diff --git a/demos/src/Extensions/Gapcursor/Vue/index.vue b/demos/src/Extensions/Gapcursor/Vue/index.vue
index 0fe5488d..b062842c 100644
--- a/demos/src/Extensions/Gapcursor/Vue/index.vue
+++ b/demos/src/Extensions/Gapcursor/Vue/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
diff --git a/demos/src/Extensions/Placeholder/Vue/index.vue b/demos/src/Extensions/Placeholder/Vue/index.vue
index 70b120c7..e50dca39 100644
--- a/demos/src/Extensions/Placeholder/Vue/index.vue
+++ b/demos/src/Extensions/Placeholder/Vue/index.vue
@@ -22,7 +22,18 @@ export default {
     this.editor = new Editor({
       extensions: [
         StarterKit,
-        Placeholder,
+        Placeholder.configure({
+          // Use a placeholder:
+          placeholder: 'Write something …',
+          // Use different placeholders depending on the node type:
+          // placeholder: ({ node }) => {
+          //   if (node.type.name === 'heading') {
+          //     return 'What’s the title?'
+          //   }
+
+          //   return 'Can you add some further context?'
+          // },
+        }),
       ],
     })
   },
@@ -45,7 +56,7 @@ export default {
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: #ced4da;
+  color: #adb5bd;
   pointer-events: none;
   height: 0;
 }
@@ -54,7 +65,7 @@ export default {
 /*.ProseMirror p.is-empty::before {
   content: attr(data-placeholder);
   float: left;
-  color: #ced4da;
+  color: #adb5bd;
   pointer-events: none;
   height: 0;
 }*/
diff --git a/demos/src/Extensions/TextAlign/Vue/index.vue b/demos/src/Extensions/TextAlign/Vue/index.vue
index e939e1f2..dfdc5d00 100644
--- a/demos/src/Extensions/TextAlign/Vue/index.vue
+++ b/demos/src/Extensions/TextAlign/Vue/index.vue
@@ -13,7 +13,7 @@
       justify
     </button>
     <button @click="editor.chain().focus().unsetTextAlign().run()">
-      set default
+      unsetTextAlign
     </button>
     <editor-content :editor="editor" />
   </div>
diff --git a/demos/src/Extensions/Typography/Vue/index.vue b/demos/src/Extensions/Typography/Vue/index.vue
index 0f02717c..d0c32d7c 100644
--- a/demos/src/Extensions/Typography/Vue/index.vue
+++ b/demos/src/Extensions/Typography/Vue/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>