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"> <router-link class="navigation__link" to="/markdown-shortcuts">
Markdown Shortcuts Markdown Shortcuts
</router-link> </router-link>
<router-link class="navigation__link" to="/read-only">
Read-Only
</router-link>
</div> </div>
</div> </div>

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

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

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

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

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

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

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

@@ -1,87 +1,87 @@
<template> <template>
<div> <div>
<editor :editable="true" class="editor" @update="onUpdate"> <editor class="editor" @update="onUpdate">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }"> <div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks"> <div v-if="nodes && marks">
<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="marks.bold.command"
> >
<icon name="bold" /> <icon name="bold" />
</button> </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 <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }" :class="{ 'is-active': marks.italic.active() }"
@click="nodes.paragraph.command" @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" /> <icon name="paragraph" />
</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: 1 }) }"
@click="nodes.heading.command({ level: 1 })" @click="nodes.heading.command({ level: 1 })"
> >
H1 H1
</button> </button>
<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="nodes.heading.command({ level: 2 })"
> >
H2 H2
</button> </button>
<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="nodes.heading.command({ level: 3 })"
> >
H3 H3
</button> </button>
<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="nodes.bullet_list.command"
> >
<icon name="ul" /> <icon name="ul" />
</button> </button>
<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="nodes.ordered_list.command"
> >
<icon name="ol" /> <icon name="ol" />
</button> </button>
<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="nodes.code_block.command"
> >
<icon name="code" /> <icon name="code" />
</button> </button>
@@ -89,27 +89,27 @@
</div> </div>
<div class="editor__content" slot="content" slot-scope="props"> <div class="editor__content" slot="content" slot-scope="props">
<h1> <h1>
A renderless rich-text editor for Vue.js A renderless rich-text editor for Vue.js
</h1> </h1>
<p> <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>. 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> </p>
<pre><code>body { display: none; }</code></pre> <pre><code>body { display: none; }</code></pre>
<ul> <ul>
<li> <li>
A regular list A regular list
</li> </li>
<li> <li>
With regular items With regular items
</li> </li>
</ul> </ul>
<blockquote> <blockquote>
It's amazing 👏 It's amazing 👏
<br /> <br />
– mom – mom
</blockquote> </blockquote>
</div> </div>
</editor> </editor>
</div> </div>
@@ -120,14 +120,14 @@ import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor } from 'tiptap'
export default { export default {
components: { components: {
Editor, Editor,
Icon, Icon,
}, },
methods: { methods: {
onUpdate(state) { onUpdate(state) {
// console.log(state.doc.toJSON()) // console.log(state.doc.toJSON())
}, },
}, },
} }
</script> </script>

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

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

8
examples/main.js
View File

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