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

Merge branch 'master' into feature/suggestions

Browse Source 
# Conflicts:
#	examples/Components/App/style.scss
#	examples/Components/Subnavigation/index.vue
#	examples/main.js
#	packages/tiptap-extensions/package.json
This commit is contained in:
Philipp Kühn
2018-09-24 15:44:42 +02:00
parent 20a7a490e9 2dd2e3361e
commit b2e73fc0a4
30 changed files with 567 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,22 @@
<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"
@@ -132,6 +148,8 @@ import {
CodeMark,
ItalicMark,
LinkMark,
StrikeMark,
UnderlineMark,
HistoryExtension,
} from 'tiptap-extensions'
@@ -156,6 +174,8 @@ export default {
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new StrikeMark(),
new UnderlineMark(),
new HistoryExtension(),
],
}

23
examples/Components/Routes/CodeHighlighting/index.vue
View File

@@ -18,49 +18,34 @@
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
CodeBlockHighlightNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
} from 'tiptap-extensions'
import { javascript, css } from './examples'
import {
javascript,
css,
} from './examples'
export default {
components: {
Editor,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockHighlightNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
javascript,
css,

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

@@ -17,22 +17,12 @@
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
} from 'tiptap-extensions'
import IframeNode from './Iframe.js'
@@ -40,24 +30,14 @@ import IframeNode from './Iframe.js'
export default {
components: {
Editor,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
// custom extension
new IframeNode(),

37
examples/Components/Routes/Export/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<editor class="editor" :extensions="extensions" @update="onUpdate">
<editor class="editor" :extensions="extensions" @update="onUpdate" ref="editor">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
@@ -99,6 +99,15 @@
</editor>
<div class="actions">
<button class="button" @click="clearContent">
Clear Content
</button>
<button class="button" @click="setContent">
Set Content
</button>
</div>
<div class="export">
<h3>JSON</h3>
<pre><code v-html="json"></code></pre>
@@ -161,6 +170,25 @@ export default {
this.json = getJSON()
this.html = getHTML()
},
clearContent() {
this.$refs.editor.clearContent()
this.$refs.editor.focus()
},
setContent() {
this.$refs.editor.setContent({
type: 'doc',
content: [{
type: 'paragraph',
content: [
{
type: 'text',
text: 'This is some inserted text. 👋',
},
],
}],
})
this.$refs.editor.focus()
},
},
}
</script>
@@ -168,10 +196,15 @@ export default {
<style lang="scss" scoped>
@import "~variables";
.actions {
max-width: 30rem;
margin: 0 auto 2rem auto;
}
.export {
max-width: 30rem;
margin: 0 auto 5rem auto;
margin: 0 auto 2rem auto;
pre {
padding: 1rem;

20
examples/Components/Routes/Images/index.vue
View File

@@ -17,49 +17,29 @@
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ImageNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
} from 'tiptap-extensions'
export default {
components: {
Editor,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ImageNode(),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
}
},

44
examples/Components/Routes/Placeholder/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props"></div>
</editor>
</div>
</template>
<script>
import { Editor } from 'tiptap'
import {
BulletListNode,
ListItemNode,
PlaceholderExtension,
} from 'tiptap-extensions'
export default {
components: {
Editor,
},
data() {
return {
extensions: [
new BulletListNode(),
new ListItemNode(),
new PlaceholderExtension({
emptyNodeClass: 'is-empty',
}),
],
}
},
}
</script>
<style lang="scss">
.editor p.is-empty:first-child::before {
content: 'Start typing…';
float: left;
color: #aaa;
pointer-events: none;
height: 0;
font-style: italic;
}
</style>

18
examples/Components/Routes/ReadOnly/index.vue
View File

@@ -16,47 +16,29 @@
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
} from 'tiptap-extensions'
export default {
components: {
Editor,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
}
},

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

@@ -71,20 +71,14 @@
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
HistoryExtension,
} from 'tiptap-extensions'
export default {
@@ -96,22 +90,60 @@ export default {
return {
customProp: 2,
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
}
},
}
</script>
</script>
<style lang="scss">
@import "~variables";
ul[data-type="todo_list"] {
padding-left: 0;
}
li[data-type="todo_item"] {
display: flex;
flex-direction: row;
}
.todo-checkbox {
border: 2px solid $color-black;
height: 0.9em;
width: 0.9em;
box-sizing: border-box;
margin-right: 10px;
margin-top: 0.3rem;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
border-radius: 0.2em;
background-color: transparent;
transition: 0.4s background;
}
.todo-content {
flex: 1;
}
li[data-done="true"] {
text-decoration: line-through;
}
li[data-done="true"] .todo-checkbox {
background-color: $color-black;
}
li[data-done="false"] {
text-decoration: none;
}
</style>

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

@@ -33,6 +33,9 @@
<router-link class="subnavigation__link" to="/mentions">
Mentions
</router-link>
<router-link class="subnavigation__link" to="/placeholder">
Placeholder
</router-link>
<router-link class="subnavigation__link" to="/export">
Export HTML or JSON
</router-link>