ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix some examples

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 21:40:12 +02:00
parent b913c84b58
commit 7437992dd5
6 changed files with 104 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -188,5 +188,8 @@ export default {
}), }),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>

52
examples/Components/Routes/Embeds/index.vue
View File

@@ -1,23 +1,11 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <editor-content class="editor__content" :editor="editor" />
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Embeds
</h2>
<p>
This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
</p>
<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import { Editor } from 'tiptap' import { Editor, EditorContent } from 'tiptap'
import { import {
HardBreakNode, HardBreakNode,
HeadingNode, HeadingNode,
@@ -29,21 +17,35 @@ import IframeNode from './Iframe.js'
export default { export default {
components: { components: {
Editor, EditorContent,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new HardBreakNode(), extensions: [
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new BoldMark(), new HeadingNode({ maxLevel: 3 }),
new ItalicMark(), new BoldMark(),
new HistoryExtension(), new ItalicMark(),
// custom extension new HistoryExtension(),
new IframeNode(), // custom extension
], new IframeNode(),
],
content: `
<h2>
Embeds
</h2>
<p>
This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
</p>
<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
`,
}),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>

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

@@ -1,9 +1,8 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }"> <div class="menubar is-hidden" :class="{ 'is-focused': focused }">
<div v-if="nodes && marks">
<button <button
class="menubar__button" class="menubar__button"
@@ -21,6 +20,22 @@
<icon name="italic" /> <icon name="italic" />
</button> </button>
<button
class="menubar__button"
:class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command"
>
<icon name="strike" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command"
>
<icon name="underline" />
</button>
<button <button
class="menubar__button" class="menubar__button"
@click="marks.code.command" @click="marks.code.command"
@@ -77,6 +92,14 @@
<icon name="ol" /> <icon name="ol" />
</button> </button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@@ -86,24 +109,16 @@
</button> </button>
</div> </div>
</div> </template>
</menu-bar>
<div class="editor__content" slot="content" slot-scope="props"> <editor-content class="editor__content" :editor="editor" />
<h2>
Hiding Menu Bar
</h2>
<p>
Click into this text to see the menu. Click outside and the menu will disappear. It's like magic.
</p>
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBar } from 'tiptap'
import { import {
BlockquoteNode, BlockquoteNode,
BulletListNode, BulletListNode,
@@ -118,33 +133,51 @@ import {
CodeMark, CodeMark,
ItalicMark, ItalicMark,
LinkMark, LinkMark,
StrikeMark,
UnderlineMark,
HistoryExtension, HistoryExtension,
} from 'tiptap-extensions' } from 'tiptap-extensions'
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBar,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new BlockquoteNode(), extensions: [
new BulletListNode(), new BlockquoteNode(),
new CodeBlockNode(), new BulletListNode(),
new HardBreakNode(), new CodeBlockNode(),
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new ListItemNode(), new HeadingNode({ maxLevel: 3 }),
new OrderedListNode(), new ListItemNode(),
new TodoItemNode(), new OrderedListNode(),
new TodoListNode(), new TodoItemNode(),
new BoldMark(), new TodoListNode(),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
new LinkMark(), new ItalicMark(),
new HistoryExtension(), new LinkMark(),
], new StrikeMark(),
new UnderlineMark(),
new HistoryExtension(),
],
content: `
<h2>
Hiding Menu Bar
</h2>
<p>
Click into this text to see the menu. Click outside and the menu will disappear. It's like magic.
</p>
`,
}),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>

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

@@ -94,5 +94,8 @@ export default {
}), }),
} }
}, },
beforeDestroy() {
this.editor.destroy()
},
} }
</script> </script>

2
packages/tiptap/src/Components/MenuBar.js
View File

@@ -10,6 +10,8 @@ export default {
return createElement('div', this.$scopedSlots.default({ return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes, nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks, marks: this.editor.menuActions.marks,
focused: this.editor.view.focused,
focus: this.editor.focus,
})) }))
} }
}, },

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

@@ -24,6 +24,8 @@ export default {
return createElement('div', this.$scopedSlots.default({ return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes, nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks, marks: this.editor.menuActions.marks,
focused: this.editor.view.focused,
focus: this.editor.focus,
})) }))
} }
}, },