docs: update extension examples

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>

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;

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

demos/src/Extensions/Dropcursor/Vue/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>

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

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>

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

demos/src/Extensions/Gapcursor/Vue/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>

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

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>

demos/src/Extensions/Typography/Vue/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>