add remixicon

2020-12-01 12:01:44 +01:00
parent 612253ea4a
commit 29cd8f53ae
5 changed files with 199 additions and 66 deletions
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <menu-item v-for="(item, index) in items" :key="index" v-bind="item" />
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue'
+
+export default {
+  components: {
+    MenuItem,
+  },
+
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      items: [
+        {
+          icon: 'bold',
+          action: () => this.editor.chain().focus().toggleBold().run(),
+          isActive: () => this.editor.isActive('bold'),
+        },
+        {
+          icon: 'italic',
+          action: () => this.editor.chain().focus().toggleItalic().run(),
+          isActive: () => this.editor.isActive('italic'),
+        },
+        {
+          icon: 'strikethrough',
+          action: () => this.editor.chain().focus().toggleStrike().run(),
+          isActive: () => this.editor.isActive('strike'),
+        },
+        {
+          icon: 'code-view',
+          action: () => this.editor.chain().focus().toggleCode().run(),
+          isActive: () => this.editor.isActive('code'),
+        },
+        {
+          icon: 'format-clear',
+          action: () => this.editor.chain().focus().unsetAllMarks().run(),
+        },
+        {
+          icon: 'eraser-line',
+          action: () => this.editor.chain().focus().clearNodes().run(),
+        },
+        {
+          icon: 'paragraph',
+          action: () => this.editor.chain().focus().setParagraph().run(),
+          isActive: () => this.editor.isActive('paragraph'),
+        },
+        {
+          icon: 'h-1',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 1 }),
+        },
+        {
+          icon: 'h-2',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 2 }),
+        },
+        {
+          icon: 'h-3',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 3 }),
+        },
+        {
+          icon: 'h-4',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 4 }),
+        },
+        {
+          icon: 'h-5',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 5 }),
+        },
+        {
+          icon: 'h-6',
+          action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
+          isActive: () => this.editor.isActive('heading', { level: 6 }),
+        },
+        {
+          icon: 'list-unordered',
+          action: () => this.editor.chain().focus().toggleBulletList().run(),
+          isActive: () => this.editor.isActive('bulletList'),
+        },
+        {
+          icon: 'list-ordered',
+          action: () => this.editor.chain().focus().toggleOrderedList().run(),
+          isActive: () => this.editor.isActive('orderedList'),
+        },
+        {
+          icon: 'code-view',
+          action: () => this.editor.chain().focus().toggleCodeBlock().run(),
+          isActive: () => this.editor.isActive('codeBlock'),
+        },
+        {
+          icon: 'double-quotes-l',
+          action: () => this.editor.chain().focus().toggleBlockQuote().run(),
+          isActive: () => this.editor.isActive('blockQuote'),
+        },
+        {
+          icon: 'separator',
+          action: () => this.editor.chain().focus().setHorizontalRule().run(),
+        },
+        {
+          icon: 'text-wrap',
+          action: () => this.editor.chain().focus().setHardBreak().run(),
+        },
+        {
+          icon: 'arrow-go-back-line',
+          action: () => this.editor.chain().focus().undo().run(),
+        },
+        {
+          icon: 'arrow-go-forward-line',
+          action: () => this.editor.chain().focus().redo().run(),
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style>
+
+</style>