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

fix menububble example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 17:40:55 +02:00
parent 9ec3d82d12
commit 3718591d33
4 changed files with 95 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,53 +1,42 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <menu-bubble class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }"> <button
<template v-if="marks"> class="menububble__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="marks.bold.command" @click="marks.italic.command"
> >
<icon name="bold" /> <icon name="italic" />
</button> </button>
<button <button
class="menububble__button" class="menububble__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.code.active() }"
@click="marks.italic.command" @click="marks.code.command"
> >
<icon name="italic" /> <icon name="code" />
</button> </button>
<button </template>
class="menububble__button" </menu-bubble>
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
<icon name="code" />
</button>
</template> <editor-content class="editor__content" :editor="editor" />
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
</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, MenuBubble } from 'tiptap'
import { import {
BlockquoteNode, BlockquoteNode,
BulletListNode, BulletListNode,
@@ -62,32 +51,48 @@ 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,
MenuBubble,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new BlockquoteNode(), editable: true,
new BulletListNode(), extensions: [
new CodeBlockNode(), new BlockquoteNode(),
new HardBreakNode(), new BulletListNode(),
new HeadingNode({ maxLevel: 3 }), new CodeBlockNode(),
new ListItemNode(), new HardBreakNode(),
new OrderedListNode(), new HeadingNode({ maxLevel: 3 }),
new TodoItemNode(), new ListItemNode(),
new TodoListNode(), new OrderedListNode(),
new BoldMark(), new TodoItemNode(),
new CodeMark(), new TodoListNode(),
new ItalicMark(), new BoldMark(),
new LinkMark(), new CodeMark(),
new HistoryExtension(), new ItalicMark(),
], new LinkMark(),
new StrikeMark(),
new UnderlineMark(),
new HistoryExtension(),
],
content: `
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
</p>
`,
}),
} }
}, },
} }

16
packages/tiptap/src/Components/MenuBubble.js Normal file
View File

@@ -0,0 +1,16 @@
export default {
props: {
editor: {
default: null,
type: Object,
},
},
render(createElement) {
if (this.editor) {
return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
}))
}
},
}

1
packages/tiptap/src/index.js
View File

@@ -1,6 +1,7 @@
export { default as Editor } from './Utils/Editor' export { default as Editor } from './Utils/Editor'
export { default as EditorContent } from './Components/EditorContent' export { default as EditorContent } from './Components/EditorContent'
export { default as MenuBar } from './Components/MenuBar' export { default as MenuBar } from './Components/MenuBar'
export { default as MenuBubble } from './Components/MenuBubble'
export { default as Extension } from './Utils/Extension' export { default as Extension } from './Utils/Extension'
export { default as Node } from './Utils/Node' export { default as Node } from './Utils/Node'

24
packages/tiptap/src/utils/Editor.js
View File

@@ -21,10 +21,21 @@ import builtInNodes from '../Nodes'
export default class Editor { export default class Editor {
constructor(options = {}) { constructor(options = {}) {
const defaultOptions = {
content: '',
on: {
update: () => {},
},
}
this.element = document.createElement('div') this.element = document.createElement('div')
this.bus = new Vue() this.bus = new Vue()
this.options = options this.options = {
...defaultOptions,
...options,
}
this.extensions = this.createExtensions() this.extensions = this.createExtensions()
this.nodes = this.createNodes() this.nodes = this.createNodes()
this.marks = this.createMarks() this.marks = this.createMarks()
@@ -171,12 +182,11 @@ export default class Editor {
} }
emitUpdate() { emitUpdate() {
console.log(this.getHTML()) this.emit('update', {
// this.$emit('update', { getHTML: this.getHTML,
// getHTML: this.getHTML, getJSON: this.getJSON,
// getJSON: this.getJSON, state: this.state,
// state: this.state, })
// })
} }
getHTML() { getHTML() {