From 2a3d08d6f1d9b3c9af0146b7642ae0d3579e1e0d Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 1 Dec 2020 12:53:24 +0100 Subject: [PATCH 1/3] add title to menu items --- .../Examples/CollaborativeEditing/MenuBar.vue | 21 +++++++++++++++++++ .../CollaborativeEditing/MenuItem.vue | 6 ++++++ 2 files changed, 27 insertions(+) diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue index d5ef1cbe..191a5192 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue @@ -24,101 +24,122 @@ export default { items: [ { icon: 'bold', + title: 'Bold', action: () => this.editor.chain().focus().toggleBold().run(), isActive: () => this.editor.isActive('bold'), }, { icon: 'italic', + title: 'Italic', action: () => this.editor.chain().focus().toggleItalic().run(), isActive: () => this.editor.isActive('italic'), }, { icon: 'strikethrough', + title: 'Strike', action: () => this.editor.chain().focus().toggleStrike().run(), isActive: () => this.editor.isActive('strike'), }, { icon: 'code-view', + title: 'Code', action: () => this.editor.chain().focus().toggleCode().run(), isActive: () => this.editor.isActive('code'), }, { icon: 'format-clear', + title: 'Clear Inline Format', action: () => this.editor.chain().focus().unsetAllMarks().run(), }, { icon: 'eraser-line', + title: 'Reset Format', action: () => this.editor.chain().focus().clearNodes().run(), }, { icon: 'paragraph', + title: 'Paragraph', action: () => this.editor.chain().focus().setParagraph().run(), isActive: () => this.editor.isActive('paragraph'), }, { icon: 'h-1', + title: 'Heading 1', action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(), isActive: () => this.editor.isActive('heading', { level: 1 }), }, { icon: 'h-2', + title: 'Heading 2', action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(), isActive: () => this.editor.isActive('heading', { level: 2 }), }, { icon: 'h-3', + title: 'Heading 3', action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(), isActive: () => this.editor.isActive('heading', { level: 3 }), }, { icon: 'h-4', + title: 'Heading 4', action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(), isActive: () => this.editor.isActive('heading', { level: 4 }), }, { icon: 'h-5', + title: 'Heading 5', action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(), isActive: () => this.editor.isActive('heading', { level: 5 }), }, { icon: 'h-6', + title: 'Heading 6', action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(), isActive: () => this.editor.isActive('heading', { level: 6 }), }, { icon: 'list-unordered', + title: 'Bullet List', action: () => this.editor.chain().focus().toggleBulletList().run(), isActive: () => this.editor.isActive('bulletList'), }, { icon: 'list-ordered', + title: 'Ordered List', action: () => this.editor.chain().focus().toggleOrderedList().run(), isActive: () => this.editor.isActive('orderedList'), }, { icon: 'code-box-line', + title: 'Code Block', action: () => this.editor.chain().focus().toggleCodeBlock().run(), isActive: () => this.editor.isActive('codeBlock'), }, { icon: 'double-quotes-l', + title: 'Blockquote', action: () => this.editor.chain().focus().toggleBlockquote().run(), isActive: () => this.editor.isActive('blockquote'), }, { icon: 'separator', + title: 'Horizontal Rule', action: () => this.editor.chain().focus().setHorizontalRule().run(), }, { icon: 'text-wrap', + title: 'Hard Break', action: () => this.editor.chain().focus().setHardBreak().run(), }, { icon: 'arrow-go-back-line', + title: 'Undo', action: () => this.editor.chain().focus().undo().run(), }, { icon: 'arrow-go-forward-line', + title: 'Redo', action: () => this.editor.chain().focus().redo().run(), }, ], diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue index 8e27898e..672a6e91 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/MenuItem.vue @@ -3,6 +3,7 @@ class="menu-item" :class="{ 'is-active': isActive ? isActive(): null }" @click="action" + :title="title" > @@ -18,6 +19,11 @@ export default { required: true, }, + title: { + type: String, + required: true, + }, + action: { type: Function, required: true, From 4ba1d7c5f2d1ff8a2e47fdef7c0a2305c0b058af Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 1 Dec 2020 12:55:38 +0100 Subject: [PATCH 2/3] merge clear format buttons --- .../demos/Examples/CollaborativeEditing/MenuBar.vue | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue index 191a5192..94530804 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue @@ -48,13 +48,12 @@ export default { }, { icon: 'format-clear', - title: 'Clear Inline Format', - action: () => this.editor.chain().focus().unsetAllMarks().run(), - }, - { - icon: 'eraser-line', - title: 'Reset Format', - action: () => this.editor.chain().focus().clearNodes().run(), + title: 'Clear Format', + action: () => this.editor.chain() + .focus() + .clearNodes() + .unsetAllMarks() + .run(), }, { icon: 'paragraph', From 5abb7121dde301d2a627f8a3a4ab13a1df41c201 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 1 Dec 2020 12:56:19 +0100 Subject: [PATCH 3/3] move clear format button to the end --- .../Examples/CollaborativeEditing/MenuBar.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue index 94530804..b1ccacfb 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue @@ -46,15 +46,6 @@ export default { action: () => this.editor.chain().focus().toggleCode().run(), isActive: () => this.editor.isActive('code'), }, - { - icon: 'format-clear', - title: 'Clear Format', - action: () => this.editor.chain() - .focus() - .clearNodes() - .unsetAllMarks() - .run(), - }, { icon: 'paragraph', title: 'Paragraph', @@ -131,6 +122,15 @@ export default { title: 'Hard Break', action: () => this.editor.chain().focus().setHardBreak().run(), }, + { + icon: 'format-clear', + title: 'Clear Format', + action: () => this.editor.chain() + .focus() + .clearNodes() + .unsetAllMarks() + .run(), + }, { icon: 'arrow-go-back-line', title: 'Undo',