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

fix basic example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 08:43:48 +02:00
parent b7bda1bae3
commit 9ec3d82d12
2 changed files with 128 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,257 +1,116 @@
<template> <template>
<div> <div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes, marks }">
<div class="editor"> <button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<menu-bar class="menubar" :editor="editor"> <button
<template slot-scope="{ nodes, marks }"> class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.bold.active() }" :class="{ 'is-active': marks.strike.active() }"
@click="marks.bold.command" @click="marks.strike.command"
> >
<icon name="bold" /> <icon name="strike" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.italic.active() }" :class="{ 'is-active': marks.underline.active() }"
@click="marks.italic.command" @click="marks.underline.command"
> >
<icon name="italic" /> <icon name="underline" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.strike.active() }" @click="marks.code.command"
@click="marks.strike.command" :class="{ 'is-active': marks.code.active() }
> ">
<icon name="strike" /> <icon name="code" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': marks.underline.active() }" :class="{ 'is-active': nodes.paragraph.active() }"
@click="marks.underline.command" @click="nodes.paragraph.command"
> >
<icon name="underline" /> <icon name="paragraph" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
@click="marks.code.command" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
:class="{ 'is-active': marks.code.active() } @click="nodes.heading.command({ level: 1 })"
"> >
<icon name="code" /> H1
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.paragraph.command" @click="nodes.heading.command({ level: 2 })"
> >
<icon name="paragraph" /> H2
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 1 })" @click="nodes.heading.command({ level: 3 })"
> >
H1 H3
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }" :class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.heading.command({ level: 2 })" @click="nodes.bullet_list.command"
> >
H2 <icon name="ul" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }" :class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.heading.command({ level: 3 })" @click="nodes.ordered_list.command"
> >
H3 <icon name="ol" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }" :class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.bullet_list.command" @click="nodes.blockquote.command"
> >
<icon name="ul" /> <icon name="quote" />
</button> </button>
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }" :class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.ordered_list.command" @click="nodes.code_block.command"
> >
<icon name="ol" /> <icon name="code" />
</button> </button>
<button </template>
class="menubar__button" </menu-bar>
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button <editor-content class="editor__content" :editor="editor" />
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
</template>
</menu-bar>
<editor-content class="editor__content" :editor="editor" />
</div>
<!-- <editor class="editor" :extensions="extensions">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</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
class="menubar__button"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
<icon name="paragraph" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
</div>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
</li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing 👏
<br />
– mom
</blockquote>
</div>
</editor> -->
</div> </div>
</template> </template>
@@ -305,18 +164,28 @@ export default {
new UnderlineMark(), new UnderlineMark(),
new HistoryExtension(), new HistoryExtension(),
], ],
content: { content: `
type: 'doc', <h2>
content: [{ Hi there,
type: 'paragraph', </h2>
content: [ <p>
{ this is a very <em>basic</em> example of tiptap.
type: 'text', </p>
text: 'This is some inserted text. 👋', <pre><code>body { display: none; }</code></pre>
}, <ul>
], <li>
}], A regular list
}, </li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing 👏
<br />
– mom
</blockquote>
`,
}), }),
} }
}, },

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

@@ -133,7 +133,14 @@ export default class Editor {
return this.schema.nodeFromJSON(content) return this.schema.nodeFromJSON(content)
} }
// return DOMParser.fromSchema(this.schema).parse(this.contentNode.elm) if (typeof content === 'string') {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
}
return false
} }
createView() { createView() {
@@ -187,25 +194,10 @@ export default class Editor {
return this.state.doc.toJSON() return this.state.doc.toJSON()
} }
getDocFromContent(content) {
if (typeof content === 'object') {
return this.schema.nodeFromJSON(content)
}
if (typeof content === 'string') {
const element = document.createElement('div')
element.innerHTML = content.trim()
return DOMParser.fromSchema(this.schema).parse(element)
}
return false
}
setContent(content = {}, emitUpdate = false) { setContent(content = {}, emitUpdate = false) {
this.state = EditorState.create({ this.state = EditorState.create({
schema: this.state.schema, schema: this.state.schema,
doc: this.getDocFromContent(content), doc: this.createDocument(content),
plugins: this.state.plugins, plugins: this.state.plugins,
}) })