mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-12-05 04:19:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add new command syntax to examples

Browse Source
This commit is contained in:
Philipp Kühn 2018-10-28 22:57:05 +01:00
parent 340b1b2266
commit e66218bd95
11 changed files with 74 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
examples/Components/Routes/Basic/index.vue
View File

@ -20,7 +20,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
@ -28,7 +28,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
@ -36,7 +36,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.strike.active() }" :class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
</button> </button>
@ -44,23 +44,23 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.underline.active() }" :class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
@click="marks.code.command" :class="{ 'is-active': marks.code.active() }"
:class="{ 'is-active': marks.code.active() } @click="commands.code"
"> >
<icon name="code" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
</button> </button>
@ -68,7 +68,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
</button> </button>
@ -76,7 +76,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
</button> </button>
@ -84,7 +84,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
</button> </button>
@ -92,7 +92,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
@ -100,7 +100,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
@ -108,7 +108,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }" :class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
</button> </button>
@ -116,7 +116,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />
</button> </button>

26
examples/Components/Routes/Export/index.vue
View File

@ -2,12 +2,12 @@
<div> <div>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks, commands }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
@ -15,23 +15,23 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
@click="marks.code.command" :class="{ 'is-active': marks.code.active() }"
:class="{ 'is-active': marks.code.active() } @click="commands.code"
"> >
<icon name="code" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
</button> </button>
@ -39,7 +39,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
</button> </button>
@ -47,7 +47,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
</button> </button>
@ -55,7 +55,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
</button> </button>
@ -63,7 +63,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
@ -71,7 +71,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
@ -79,7 +79,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />
</button> </button>

16
examples/Components/Routes/FloatingMenu/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="editor"> <div class="editor">
<floating-menu class="editor__floating-menu" :editor="editor"> <floating-menu class="editor__floating-menu" :editor="editor">
<template slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks, commands }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
</button> </button>
@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
</button> </button>
@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
</button> </button>
@ -30,7 +30,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
@ -38,7 +38,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
@ -46,7 +46,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }" :class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
</button> </button>
@ -54,7 +54,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />
</button> </button>

32
examples/Components/Routes/HidingMenuBar/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar :editor="editor"> <menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, focused }"> <template slot-scope="{ nodes, marks, commands, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }"> <div class="menubar is-hidden" :class="{ 'is-focused': focused }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
@ -15,7 +15,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
@ -23,7 +23,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.strike.active() }" :class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command" @click="commands.strike"
> >
<icon name="strike" /> <icon name="strike" />
</button> </button>
@ -31,23 +31,23 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.underline.active() }" :class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command" @click="commands.underline"
> >
<icon name="underline" /> <icon name="underline" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
@click="marks.code.command" :class="{ 'is-active': marks.code.active() }"
:class="{ 'is-active': marks.code.active() } @click="commands.code"
"> >
<icon name="code" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command" @click="commands.paragraph"
> >
<icon name="paragraph" /> <icon name="paragraph" />
</button> </button>
@ -55,7 +55,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })" @click="commands.heading({ level: 1 })"
> >
H1 H1
</button> </button>
@ -63,7 +63,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })" @click="commands.heading({ level: 2 })"
> >
H2 H2
</button> </button>
@ -71,7 +71,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })" @click="commands.heading({ level: 3 })"
> >
H3 H3
</button> </button>
@ -79,7 +79,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command" @click="commands.bullet_list"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
@ -87,7 +87,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command" @click="commands.ordered_list"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
@ -95,7 +95,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }" :class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command" @click="commands.blockquote"
> >
<icon name="quote" /> <icon name="quote" />
</button> </button>
@ -103,7 +103,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command" @click="commands.code_block"
> >
<icon name="code" /> <icon name="code" />
</button> </button>

4
examples/Components/Routes/Images/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes }"> <template slot-scope="{ commands }">
<button <button
class="menubar__button" class="menubar__button"
@click="showImagePrompt(nodes.image.command)" @click="showImagePrompt(commands.image)"
> >
<icon name="image" /> <icon name="image" />
</button> </button>

2
examples/Components/Routes/MarkdownShortcuts/index.vue
View File

@ -50,7 +50,7 @@ export default {
], ],
content: ` content: `
<h2> <h2>
down Shortcuts Markdown Shortcuts
</h2> </h2>
<p> <p>
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline. Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.

8
examples/Components/Routes/MenuBubble/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bubble class="menububble" :editor="editor"> <menu-bubble class="menububble" :editor="editor">
<template slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks, commands }">
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
@ -14,7 +14,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
@ -22,7 +22,7 @@
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': marks.code.active() }"
@click="marks.code.command" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
</button> </button>

8
examples/Components/Routes/TextAlign/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks, commands }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }" :class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
@click="nodes.paragraph.command({ textAlign: 'left' })" @click="commands.paragraph({ textAlign: 'left' })"
> >
<icon name="align-left" /> <icon name="align-left" />
</button> </button>
@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }" :class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
@click="nodes.paragraph.command({ textAlign: 'center' })" @click="commands.paragraph({ textAlign: 'center' })"
> >
<icon name="align-center" /> <icon name="align-center" />
</button> </button>
@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }" :class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
@click="nodes.paragraph.command({ textAlign: 'right' })" @click="commands.paragraph({ textAlign: 'right' })"
> >
<icon name="align-right" /> <icon name="align-right" />
</button> </button>

10
examples/Components/Routes/TodoList/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks, commands }">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command" @click="commands.bold"
> >
<icon name="bold" /> <icon name="bold" />
</button> </button>
@ -14,7 +14,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command" @click="commands.italic"
> >
<icon name="italic" /> <icon name="italic" />
</button> </button>
@ -22,7 +22,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.code.active() }" :class="{ 'is-active': marks.code.active() }"
@click="marks.code.command" @click="commands.code"
> >
<icon name="code" /> <icon name="code" />
</button> </button>
@ -30,7 +30,7 @@
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }" :class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command" @click="commands.todo_list"
> >
<icon name="checklist" /> <icon name="checklist" />
</button> </button>

3
packages/tiptap/src/Components/FloatingMenu.js
View File

@ -17,7 +17,7 @@ export default {
}) })
} }
}, },
} },
}, },
render(createElement) { render(createElement) {
if (this.editor) { if (this.editor) {
@ -26,6 +26,7 @@ export default {
marks: this.editor.menuActions.marks, marks: this.editor.menuActions.marks,
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands,
})) }))
} }
}, },

3
packages/tiptap/src/Components/MenuBubble.js
View File

@ -17,7 +17,7 @@ export default {
}) })
} }
}, },
} },
}, },
render(createElement) { render(createElement) {
if (this.editor) { if (this.editor) {
@ -26,6 +26,7 @@ export default {
marks: this.editor.menuActions.marks, marks: this.editor.menuActions.marks,
focused: this.editor.view.focused, focused: this.editor.view.focused,
focus: this.editor.focus, focus: this.editor.focus,
commands: this.editor.commands,
})) }))
} }
}, },