From 6f1aedb2b27c832f1acf9d5202bc2f0eb1cfc01d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 14 Dec 2019 23:54:20 +0100
Subject: [PATCH] add insertHTML command

---
 packages/tiptap-core/src/Editor.ts            |  2 ++
 .../tiptap-core/src/commands/insertHTML.ts    | 22 ++++++++++++
 .../tiptap-core/src/commands/insertText.ts    | 10 +++---
 src/templates/Post.vue                        | 35 +++++++++++++------
 4 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 packages/tiptap-core/src/commands/insertHTML.ts

diff --git a/packages/tiptap-core/src/Editor.ts b/packages/tiptap-core/src/Editor.ts
index 230271f8..fa2b0987 100644
--- a/packages/tiptap-core/src/Editor.ts
+++ b/packages/tiptap-core/src/Editor.ts
@@ -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() {
diff --git a/packages/tiptap-core/src/commands/insertHTML.ts b/packages/tiptap-core/src/commands/insertHTML.ts
new file mode 100644
index 00000000..9fda10cb
--- /dev/null
+++ b/packages/tiptap-core/src/commands/insertHTML.ts
@@ -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()
+}
\ No newline at end of file
diff --git a/packages/tiptap-core/src/commands/insertText.ts b/packages/tiptap-core/src/commands/insertText.ts
index 3de4f713..abc42d1a 100644
--- a/packages/tiptap-core/src/commands/insertText.ts
+++ b/packages/tiptap-core/src/commands/insertText.ts
@@ -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()
 }
diff --git a/src/templates/Post.vue b/src/templates/Post.vue
index 098aee20..72a9b5f1 100644
--- a/src/templates/Post.vue
+++ b/src/templates/Post.vue
@@ -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>
\ No newline at end of file