add insertHTML command

This commit is contained in:
Philipp Kühn
2019-12-14 23:54:20 +01:00
parent 90f86bafbb
commit 6f1aedb2b2
4 changed files with 55 additions and 14 deletions

View File

@@ -9,6 +9,7 @@ import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"
import insertText from './commands/insertText'
import insertHTML from './commands/insertHTML'
import focus from './commands/focus'
interface EditorOptions {
@@ -36,6 +37,7 @@ export class Editor {
this.view = this.createView()
this.registerCommand('focus', focus)
this.registerCommand('insertText', insertText)
this.registerCommand('insertHTML', insertHTML)
}
get state() {

View File

@@ -0,0 +1,22 @@
import { DOMParser } from 'prosemirror-model'
import { Editor } from '../Editor'
declare module '../Editor' {
interface Editor {
insertHTML(value: string): Editor,
}
}
export default function insertHTML(next: Function, { state, view }: Editor, value: string): void {
const { selection } = state
const element = document.createElement('div')
element.innerHTML = value.trim()
const slice = DOMParser.fromSchema(state.schema).parseSlice(element)
const transaction = state.tr.insert(selection.anchor, slice.content)
view.dispatch(transaction)
next()
}

View File

@@ -1,12 +1,14 @@
import { Editor } from '../Editor'
declare module "../Editor" {
declare module '../Editor' {
interface Editor {
insertText(text: string): Editor,
insertText(value: string): Editor,
}
}
export default function insertText(next: Function, { state, view }: Editor, text: string): void {
view.dispatch(state.tr.insertText(text))
export default function insertText(next: Function, { state, view }: Editor, value: string): void {
const transaction = state.tr.insertText(value)
view.dispatch(transaction)
next()
}

View File

@@ -2,6 +2,8 @@
<Layout>
<h1>{{ $page.post.title }}</h1>
<VueRemarkContent />
<div ref="editor"></div>
</Layout>
</template>
@@ -20,16 +22,29 @@ export default {
mounted() {
// console.log(tiptap())
// new Editor()
// .registerCommand('lol', (next) => {
// console.log('lol')
// next()
// })
// .focus('end')
// .insertText('mega ')
// .focus('start')
// .command('insertText', 'giga ')
// .lol()
new Editor({
element: this.$refs.editor,
content: '<p>test <strong>strong</strong></p>',
})
// .registerCommand('lol', (next) => {
// console.log('lol')
// next()
// })
// .focus('end')
// .insertText('mega ')
// .focus('start')
// .command('insertText', 'giga ')
// .lol()
// .registerCommand('insertHTML', (next, editor, html) => {
// console.log(html)
// next()
// })
.focus('start')
.insertText('<p>start</p>')
.focus('end')
.insertHTML('<p>end</p>')
}
}
</script>