docs: add divider to collab demo, fix #252

docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <menu-item v-for="(item, index) in items" :key="index" v-bind="item" />
+    <template v-for="(item, index) in items">
+      <div class="divider" v-if="item.type === 'divider'" :key="index" />
+      <menu-item v-else :key="index" v-bind="item" />
+    </template>
   </div>
 </template>
 
@@ -52,6 +55,9 @@ export default {
           action: () => this.editor.chain().focus().toggleHighlight().run(),
           isActive: () => this.editor.isActive('highlight'),
         },
+        {
+          type: 'divider',
+        },
         {
           icon: 'h-1',
           title: 'Heading 1',
@@ -94,6 +100,9 @@ export default {
           action: () => this.editor.chain().focus().toggleCodeBlock().run(),
           isActive: () => this.editor.isActive('codeBlock'),
         },
+        {
+          type: 'divider',
+        },
         {
           icon: 'double-quotes-l',
           title: 'Blockquote',
@@ -105,6 +114,9 @@ export default {
           title: 'Horizontal Rule',
           action: () => this.editor.chain().focus().setHorizontalRule().run(),
         },
+        {
+          type: 'divider',
+        },
         {
           icon: 'text-wrap',
           title: 'Hard Break',
@@ -119,6 +131,9 @@ export default {
             .unsetAllMarks()
             .run(),
         },
+        {
+          type: 'divider',
+        },
         {
           icon: 'arrow-go-back-line',
           title: 'Undo',
@@ -134,3 +149,13 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.divider {
+  width: 2px;
+  height: 1.5rem;
+  background-color: rgba($colorBlack, 0.1);
+  margin-left: 0.5rem;
+  margin-right: 0.75rem;
+}
+</style>

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -148,6 +148,7 @@ export default {
 
   &__header {
     display: flex;
+    align-items: center;
     flex: 0 0 auto;
     flex-wrap: wrap;
     padding: 0.25rem;