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

add read only example

Browse Source
This commit is contained in:
Philipp Kühn
2018-08-22 19:28:57 +02:00
parent c6fb4ce8a3
commit ff8b138a3c
9 changed files with 266 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/Components/Navigation/index.vue
View File

@@ -34,6 +34,9 @@
<router-link class="navigation__link" to="/markdown-shortcuts">
Markdown Shortcuts
</router-link>
<router-link class="navigation__link" to="/read-only">
Read-Only
</router-link>
</div>
</div>

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

@@ -1,87 +1,87 @@
<template>
<div>
<editor :editable="true" class="editor" @update="onUpdate">
<editor class="editor" @update="onUpdate">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
<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"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<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': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</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 })"
>
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 })"
>
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 })"
>
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"
>
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"
>
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.code_block.active() }"
@click="nodes.code_block.command"
>
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
@@ -89,13 +89,13 @@
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h1>
Hiding Menu Bar
</h1>
<p>
Try to focus the editor to see the menu. It's like magic. 🔮
</p>
</div>
<h1>
Hiding Menu Bar
</h1>
<p>
Try to focus the editor to see the menu. It's like magic. 🔮
</p>
</div>
</editor>
</div>
@@ -106,14 +106,14 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

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

@@ -41,36 +41,36 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
components: {
Editor,
Icon,
},
data() {
return {
linkUrl: null,
return {
linkUrl: null,
linkMenuIsActive: false,
}
},
methods: {
showLinkMenu(type) {
this.linkUrl = type.attrs.href
this.linkMenuIsActive = true
this.$nextTick(() => {
this.$refs.linkInput.focus()
})
},
hideLinkMenu() {
this.linkUrl = null
this.linkMenuIsActive = false
},
setLinkUrl(url, type, focus) {
type.command({ href: url })
this.hideLinkMenu()
focus()
},
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
methods: {
showLinkMenu(type) {
this.linkUrl = type.attrs.href
this.linkMenuIsActive = true
this.$nextTick(() => {
this.$refs.linkInput.focus()
})
},
hideLinkMenu() {
this.linkUrl = null
this.linkMenuIsActive = false
},
setLinkUrl(url, type, focus) {
type.command({ href: url })
this.hideLinkMenu()
focus()
},
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

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

@@ -1,6 +1,6 @@
<template>
<div>
<editor :editable="true" class="editor" @update="onUpdate">
<editor class="editor" @update="onUpdate">
<div class="editor__content" slot="content" slot-scope="props">
<h1>

164
examples/Components/Routes/MenuBar/index.vue
View File

@@ -1,87 +1,87 @@
<template>
<div>
<editor :editable="true" class="editor" @update="onUpdate">
<editor class="editor" @update="onUpdate">
<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"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<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': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</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 })"
>
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 })"
>
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 })"
>
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"
>
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"
>
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.code_block.active() }"
@click="nodes.code_block.command"
>
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
<icon name="code" />
</button>
@@ -89,27 +89,27 @@
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h1>
A renderless rich-text editor for Vue.js
</h1>
<p>
This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
</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>
<h1>
A renderless rich-text editor for Vue.js
</h1>
<p>
This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
</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>
@@ -120,14 +120,14 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

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

@@ -50,20 +50,20 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
},
data() {
return {
linkUrl: null,
linkMenuIsActive: false,
}
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
components: {
Editor,
Icon,
},
data() {
return {
linkUrl: null,
linkMenuIsActive: false,
}
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

33
examples/Components/Routes/ReadOnly/index.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div>
<editor :editable="false" class="editor" @update="onUpdate">
<div class="editor__content" slot="content" slot-scope="props">
<h1>
Read-Only
</h1>
<p>
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
</p>
</div>
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

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

@@ -6,34 +6,34 @@
<div v-if="nodes && marks">
<button
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
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 })"
>
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 })"
>
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.todo_list.active() }"
@click="nodes.todo_list.command"
>
class="menubar__button"
:class="{ 'is-active': nodes.todo_list.active() }"
@click="nodes.todo_list.command"
>
<icon name="checklist" />
</button>
@@ -41,10 +41,10 @@
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h1>
Todo List
</h1>
<ul data-type="todo_list">
<h1>
Todo List
</h1>
<ul data-type="todo_list">
<li data-type="todo_item" data-done="true">
Buy beer
</li>
@@ -58,7 +58,7 @@
Call mom
</li>
</ul>
</div>
</div>
</editor>
</div>
@@ -69,14 +69,14 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
export default {
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
components: {
Editor,
Icon,
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
}
</script>

8
examples/main.js
View File

@@ -9,6 +9,7 @@ import RouteLinks from 'Components/Routes/Links'
import RouteHidingMenuBar from 'Components/Routes/HidingMenuBar'
import RouteTodoList from 'Components/Routes/TodoList'
import RouteMarkdownShortcuts from 'Components/Routes/MarkdownShortcuts'
import RouteReadOnly from 'Components/Routes/ReadOnly'
const __svg__ = { path: './assets/images/icons/*.svg', name: 'assets/images/[hash].sprite.svg' }
svgSpriteLoader(__svg__.filename)
@@ -60,6 +61,13 @@ const routes = [
githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/MarkdownShortcuts',
},
},
{
path: '/read-only',
component: RouteReadOnly,
meta: {
githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/ReadOnly',
},
},
]
const router = new VueRouter({