Merge branch 'master' into feature/collab-plugin

# Conflicts:
#	packages/tiptap/src/Editor.js
#	yarn.lock

packages/tiptap-commands/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-commands",
-  "version": "1.5.0",
+  "version": "1.8.0",
   "description": "Commands for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -22,8 +22,8 @@
   "dependencies": {
     "prosemirror-commands": "^1.0.7",
     "prosemirror-inputrules": "^1.0.1",
-    "prosemirror-schema-list": "^1.0.1",
+    "prosemirror-schema-list": "^1.0.3",
     "prosemirror-state": "^1.2.2",
-    "tiptap-utils": "^1.1.1"
+    "tiptap-utils": "^1.4.0"
   }
 }

packages/tiptap-commands/src/commands/splitToDefaultListItem.js

@@ -69,7 +69,7 @@ keepItem = $from.index(-1) > 0
     /* Change ends here */
 
     if (!canSplit(tr.doc, $from.pos, 2, types)) return false
-    if (dispatch) dispatch(tr.split($from.pos, 2, [{ type: state.schema.nodes.todo_item, attrs: { done: false } }]).scrollIntoView())
+    if (dispatch) dispatch(tr.split($from.pos, 2, types).scrollIntoView())
     return true
   }
 }

packages/tiptap-extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extensions",
-  "version": "1.11.0",
+  "version": "1.17.0",
   "description": "Extensions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -22,13 +22,13 @@
   },
   "dependencies": {
     "lowlight": "^1.11.0",
-    "prosemirror-history": "^1.0.3",
+    "prosemirror-history": "^1.0.4",
     "prosemirror-state": "^1.2.2",
-    "prosemirror-tables": "^0.7.10",
-    "prosemirror-utils": "^0.7.5",
-    "prosemirror-view": "^1.6.8",
-    "tiptap": "^1.11.0",
-    "tiptap-commands": "^1.5.0"
+    "prosemirror-tables": "^0.7.11",
+    "prosemirror-utils": "^0.7.6",
+    "prosemirror-view": "^1.8.9",
+    "tiptap": "^1.17.0",
+    "tiptap-commands": "^1.8.0"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

packages/tiptap-extensions/src/extensions/History.js

@@ -7,6 +7,13 @@ export default class History extends Extension {
     return 'history'
   }
 
+  get defaultOptions() {
+    return {
+      depth: '',
+      newGroupDelay: '',
+    }
+  }
+
   keys() {
     const isMac = typeof navigator !== 'undefined' ? /Mac/.test(navigator.platform) : false
     const keymap = {
@@ -23,7 +30,10 @@ export default class History extends Extension {
 
   get plugins() {
     return [
-      history(),
+      history({
+        depth: this.options.depth,
+        newGroupDelay: this.options.newGroupDelay,
+      }),
     ]
   }
 

packages/tiptap-extensions/src/extensions/Placeholder.js

@@ -11,6 +11,13 @@ export default class Placeholder extends Extension {
     return {
       emptyNodeClass: 'is-empty',
       emptyNodeText: 'Write something...',
+      showOnlyWhenEditable: true,
+    }
+  }
+
+  get update() {
+    return view => {
+      view.updateState(view.state)
     }
   }
 
@@ -18,7 +25,15 @@ export default class Placeholder extends Extension {
     return [
       new Plugin({
         props: {
-          decorations: ({ doc }) => {
+          decorations: ({ doc, plugins }) => {
+            const editablePlugin = plugins.find(plugin => plugin.key.startsWith('editable$'))
+            const editable = editablePlugin.props.editable()
+            const active = editable || !this.options.showOnlyWhenEditable
+
+            if (!active) {
+              return false
+            }
+
             const decorations = []
             const completelyEmpty = doc.textContent === '' && doc.childCount <= 1 && doc.content.size <= 2
 

packages/tiptap-extensions/src/index.js

@@ -27,3 +27,4 @@ export { default as History } from './extensions/History'
 export { default as Placeholder } from './extensions/Placeholder'
 
 export { default as Suggestions } from './plugins/Suggestions'
+export { default as Highlight } from './plugins/Highlight'

packages/tiptap-extensions/src/marks/Link.js

@@ -1,6 +1,6 @@
-import { Mark, Plugin, TextSelection } from 'tiptap'
+import { Mark, Plugin } from 'tiptap'
 import { updateMark, removeMark, pasteRule } from 'tiptap-commands'
-import { getMarkRange } from 'tiptap-utils'
+import { getMarkAttrs } from 'tiptap-utils'
 
 export default class Link extends Mark {
 
@@ -55,19 +55,14 @@ export default class Link extends Mark {
     return [
       new Plugin({
         props: {
-          handleClick(view, pos) {
-            const { schema, doc, tr } = view.state
-            const range = getMarkRange(doc.resolve(pos), schema.marks.link)
+          handleClickOn(view, pos, node, nodePos, event) {
+            const { schema } = view.state
+            const attrs = getMarkAttrs(view.state, schema.marks.link)
 
-            if (!range) {
-              return
+            if (attrs.href && event.target instanceof HTMLAnchorElement) {
+              event.stopPropagation()
+              window.open(attrs.href)
             }
-
-            const $start = doc.resolve(range.from)
-            const $end = doc.resolve(range.to)
-            const transaction = tr.setSelection(new TextSelection($start, $end))
-
-            view.dispatch(transaction)
           },
         },
       }),

packages/tiptap-extensions/src/nodes/BulletList.js

@@ -1,7 +1,7 @@
 import { Node } from 'tiptap'
 import { wrappingInputRule, toggleList } from 'tiptap-commands'
 
-export default class Bullet extends Node {
+export default class BulletList extends Node {
 
   get name() {
     return 'bullet_list'

packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js

@@ -1,65 +1,7 @@
-import { Node, Plugin } from 'tiptap'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { toggleBlockType, setBlockType, textblockTypeInputRule } from 'tiptap-commands'
-import { findBlockNodes } from 'prosemirror-utils'
+import { Node } from 'tiptap'
 import low from 'lowlight/lib/core'
-
-function getDecorations(doc) {
-  const decorations = []
-
-  const blocks = findBlockNodes(doc)
-    .filter(item => item.node.type.name === 'code_block')
-
-  const flatten = list => list.reduce(
-    (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [],
-    )
-
-  function parseNodes(nodes, className = []) {
-    return nodes.map(node => {
-
-      const classes = [
-        ...className,
-        ...node.properties ? node.properties.className : [],
-      ]
-
-      if (node.children) {
-        return parseNodes(node.children, classes)
-      }
-
-      return {
-        text: node.value,
-        classes,
-      }
-    })
-  }
-
-  blocks.forEach(block => {
-    let startPos = block.pos + 1
-    const nodes = low.highlightAuto(block.node.textContent).value
-
-    flatten(parseNodes(nodes))
-      .map(node => {
-        const from = startPos
-        const to = from + node.text.length
-
-        startPos = to
-
-        return {
-          ...node,
-          from,
-          to,
-        }
-      })
-      .forEach(node => {
-        const decoration = Decoration.inline(node.from, node.to, {
-          class: node.classes.join(' '),
-        })
-        decorations.push(decoration)
-      })
-  })
-
-  return DecorationSet.create(doc, decorations)
-}
+import { toggleBlockType, setBlockType, textblockTypeInputRule } from 'tiptap-commands'
+import HighlightPlugin from '../plugins/Highlight'
 
 export default class CodeBlockHighlight extends Node {
 
@@ -74,16 +16,16 @@ export default class CodeBlockHighlight extends Node {
     }
   }
 
+  get name() {
+    return 'code_block'
+  }
+
   get defaultOptions() {
     return {
       languages: {},
     }
   }
 
-  get name() {
-    return 'code_block'
-  }
-
   get schema() {
     return {
       content: 'text*',
@@ -117,29 +59,7 @@ export default class CodeBlockHighlight extends Node {
 
   get plugins() {
     return [
-      new Plugin({
-        state: {
-          init(_, { doc }) {
-            return getDecorations(doc)
-          },
-          apply(transaction, decorationSet, oldState) {
-            // TODO: find way to cache decorations
-            // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
-
-            const previousNodeName = oldState.selection.$head.parent.type.name
-            if (transaction.docChanged && previousNodeName === 'code_block') {
-              return getDecorations(transaction.doc)
-            }
-
-            return decorationSet.map(transaction.mapping, transaction.doc)
-          },
-        },
-        props: {
-          decorations(state) {
-            return this.getState(state)
-          },
-        },
-      }),
+      HighlightPlugin({ name: this.name }),
     ]
   }
 

packages/tiptap-extensions/src/nodes/TodoItem.js

@@ -18,7 +18,7 @@ export default class TodoItem extends Node {
         },
       },
       template: `
-        <li data-type="todo_item" :data-done="node.attrs.done.toString()">
+        <li :data-type="node.type.name" :data-done="node.attrs.done.toString()">
           <span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
           <div class="todo-content" ref="content" :contenteditable="editable.toString()"></div>
         </li>
@@ -35,11 +35,13 @@ export default class TodoItem extends Node {
       },
       draggable: true,
       content: 'paragraph',
-      toDOM(node) {
+      toDOM: node => {
         const { done } = node.attrs
 
-        return ['li', {
-            'data-type': 'todo_item',
+        return [
+          'li',
+          {
+            'data-type': this.name,
             'data-done': done.toString(),
           },
           ['span', { class: 'todo-checkbox', contenteditable: 'false' }],
@@ -48,7 +50,7 @@ export default class TodoItem extends Node {
       },
       parseDOM: [{
         priority: 51,
-        tag: '[data-type="todo_item"]',
+        tag: `[data-type="${this.name}"]`,
         getAttrs: dom => ({
           done: dom.getAttribute('data-done') === 'true',
         }),

packages/tiptap-extensions/src/nodes/TodoList.js

@@ -11,10 +11,10 @@ export default class TodoList extends Node {
     return {
       group: 'block',
       content: 'todo_item+',
-      toDOM: () => ['ul', { 'data-type': 'todo_list' }, 0],
+      toDOM: () => ['ul', { 'data-type': this.name }, 0],
       parseDOM: [{
         priority: 51,
-        tag: '[data-type="todo_list"]',
+        tag: `[data-type="${this.name}"]`,
       }],
     }
   }

packages/tiptap-extensions/src/plugins/Highlight.js

@@ -0,0 +1,85 @@
+import { Plugin, PluginKey } from 'tiptap'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { findBlockNodes } from 'prosemirror-utils'
+import low from 'lowlight/lib/core'
+
+function getDecorations({ doc, name }) {
+  const decorations = []
+  const blocks = findBlockNodes(doc).filter(item => item.node.type.name === name)
+  const flatten = list => list.reduce(
+    (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [],
+  )
+
+  function parseNodes(nodes, className = []) {
+    return nodes.map(node => {
+
+      const classes = [
+        ...className,
+        ...node.properties ? node.properties.className : [],
+      ]
+
+      if (node.children) {
+        return parseNodes(node.children, classes)
+      }
+
+      return {
+        text: node.value,
+        classes,
+      }
+    })
+  }
+
+  blocks.forEach(block => {
+    let startPos = block.pos + 1
+    const nodes = low.highlightAuto(block.node.textContent).value
+
+    flatten(parseNodes(nodes))
+      .map(node => {
+        const from = startPos
+        const to = from + node.text.length
+
+        startPos = to
+
+        return {
+          ...node,
+          from,
+          to,
+        }
+      })
+      .forEach(node => {
+        const decoration = Decoration.inline(node.from, node.to, {
+          class: node.classes.join(' '),
+        })
+        decorations.push(decoration)
+      })
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export default function HighlightPlugin({ name }) {
+  return new Plugin({
+    name: new PluginKey('highlight'),
+    state: {
+      init: (_, { doc }) => getDecorations({ doc, name }),
+      apply: (transaction, decorationSet, oldState, state) => {
+        // TODO: find way to cache decorations
+        // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
+
+        const nodeName = state.selection.$head.parent.type.name
+        const previousNodeName = oldState.selection.$head.parent.type.name
+
+        if (transaction.docChanged && [nodeName, previousNodeName].includes(name)) {
+          return getDecorations({ doc: transaction.doc, name })
+        }
+
+        return decorationSet.map(transaction.mapping, transaction.doc)
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state)
+      },
+    },
+  })
+}

packages/tiptap-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-utils",
-  "version": "1.1.1",
+  "version": "1.4.0",
   "description": "Utility functions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -20,9 +20,9 @@
     "url": "https://github.com/scrumpy/tiptap/issues"
   },
   "dependencies": {
-    "prosemirror-model": "^1.6.4",
+    "prosemirror-model": "^1.7.0",
     "prosemirror-state": "^1.2.2",
-    "prosemirror-tables": "^0.7.9",
-    "prosemirror-utils": "^0.7.5"
+    "prosemirror-tables": "^0.7.11",
+    "prosemirror-utils": "^0.7.6"
   }
 }

packages/tiptap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap",
-  "version": "1.11.0",
+  "version": "1.17.0",
   "description": "A rich-text editor for Vue.js",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -25,11 +25,11 @@
     "prosemirror-gapcursor": "^1.0.3",
     "prosemirror-inputrules": "^1.0.1",
     "prosemirror-keymap": "^1.0.1",
-    "prosemirror-model": "^1.6.4",
+    "prosemirror-model": "^1.7.0",
     "prosemirror-state": "^1.2.1",
-    "prosemirror-view": "^1.6.8",
-    "tiptap-commands": "^1.5.0",
-    "tiptap-utils": "^1.1.1"
+    "prosemirror-view": "^1.8.9",
+    "tiptap-commands": "^1.8.0",
+    "tiptap-utils": "^1.4.0"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

packages/tiptap/src/Components/EditorContent.js

@@ -25,4 +25,8 @@ export default {
     return createElement('div')
   },
 
+  beforeDestroy() {
+    this.editor.element = this.$el
+  },
+
 }

packages/tiptap/src/Components/EditorMenuBubble.js

@@ -7,6 +7,10 @@ export default {
       default: null,
       type: Object,
     },
+    keepInBounds: {
+      default: true,
+      type: Boolean,
+    },
   },
 
   data() {
@@ -27,7 +31,14 @@ export default {
           this.$nextTick(() => {
             editor.registerPlugin(MenuBubble({
               element: this.$el,
+              keepInBounds: this.keepInBounds,
               onUpdate: menu => {
+                // the second check ensures event is fired only once
+                if (menu.isActive && this.menu.isActive === false) {
+                  this.$emit('show', menu)
+                } else if (!menu.isActive && this.menu.isActive === true) {
+                  this.$emit('hide', menu)
+                }
                 this.menu = menu
               },
             }))

packages/tiptap/src/Editor.js

@@ -1,10 +1,15 @@
-import { EditorState, Plugin } from 'prosemirror-state'
+import {
+  EditorState,
+  Plugin,
+  PluginKey,
+  TextSelection,
+} from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { Schema, DOMParser, DOMSerializer } from 'prosemirror-model'
 import { dropCursor } from 'prosemirror-dropcursor'
 import { gapCursor } from 'prosemirror-gapcursor'
 import { keymap } from 'prosemirror-keymap'
-import { baseKeymap, selectParentNode } from 'prosemirror-commands'
+import { baseKeymap } from 'prosemirror-commands'
 import { inputRules, undoInputRule } from 'prosemirror-inputrules'
 import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
 import { ExtensionManager, ComponentView } from './Utils'
@@ -27,11 +32,13 @@ export default class Editor {
       },
       useBuiltInExtensions: true,
       dropCursor: {},
+      parseOptions: {},
       onInit: () => {},
       onUpdate: () => {},
       onFocus: () => {},
       onBlur: () => {},
       onPaste: () => {},
+      onDrop: () => {},
       onTransaction: () => true,
     }
 
@@ -67,6 +74,9 @@ export default class Editor {
       view: this.view,
       state: this.state,
     })
+
+    // give extension manager access to our view
+    this.extensions.view = this.view
   }
 
   setOptions(options) {
@@ -157,14 +167,18 @@ export default class Editor {
         ...this.keymaps,
         keymap({
           Backspace: undoInputRule,
-          Escape: selectParentNode,
         }),
         keymap(baseKeymap),
         dropCursor(this.options.dropCursor),
         gapCursor(),
         new Plugin({
+          key: new PluginKey('editable'),
           props: {
             editable: () => this.options.editable,
+          },
+        }),
+        new Plugin({
+          props: {
             attributes: {
               tabindex: 0,
             },
@@ -177,7 +191,11 @@ export default class Editor {
     })
   }
 
-  createDocument(content) {
+  createDocument(content, parseOptions = this.options.parseOptions) {
+    if (content === null) {
+      return this.schema.nodeFromJSON(this.options.emptyDocument)
+    }
+
     if (typeof content === 'object') {
       try {
         return this.schema.nodeFromJSON(content)
@@ -191,7 +209,7 @@ export default class Editor {
       const element = document.createElement('div')
       element.innerHTML = content.trim()
 
-      return DOMParser.fromSchema(this.schema).parse(element)
+      return DOMParser.fromSchema(this.schema).parse(element, parseOptions)
     }
 
     return false
@@ -201,7 +219,7 @@ export default class Editor {
     const view = new EditorView(this.element, {
       state: this.state,
       handlePaste: this.options.onPaste,
-      handleDrop: this.options.onPaste,
+      handleDrop: this.options.onDrop,
       dispatchTransaction: this.dispatchTransaction.bind(this),
     })
 
@@ -290,10 +308,28 @@ export default class Editor {
     })
   }
 
-  focus() {
+  focus(position = null) {
+    if (position !== null) {
+      let pos = position
+
+      if (position === 'start') {
+        pos = 0
+      } else if (position === 'end') {
+        pos = this.view.state.doc.nodeSize - 2
+      }
+
+      const selection = TextSelection.near(this.view.state.doc.resolve(pos))
+      const transaction = this.view.state.tr.setSelection(selection)
+      this.view.dispatch(transaction)
+    }
+
     this.view.focus()
   }
 
+  blur() {
+    this.view.dom.blur()
+  }
+
   getHTML() {
     const div = document.createElement('div')
     const fragment = DOMSerializer
@@ -309,10 +345,10 @@ export default class Editor {
     return this.state.doc.toJSON()
   }
 
-  setContent(content = {}, emitUpdate = false) {
+  setContent(content = {}, emitUpdate = false, parseOptions) {
     this.state = EditorState.create({
       schema: this.state.schema,
-      doc: this.createDocument(content),
+      doc: this.createDocument(content, parseOptions),
       plugins: this.state.plugins,
     })
 

packages/tiptap/src/Plugins/MenuBubble.js

@@ -1,11 +1,63 @@
 import { Plugin } from 'prosemirror-state'
 
+function textRange(node, from, to) {
+  const range = document.createRange()
+  range.setEnd(node, to == null ? node.nodeValue.length : to)
+  range.setStart(node, from || 0)
+  return range
+}
+
+function singleRect(object, bias) {
+  const rects = object.getClientRects()
+  return !rects.length ? object.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
+}
+
+function coordsAtPos(view, pos, end = false) {
+  const { node, offset } = view.docView.domFromPos(pos)
+  let side
+  let rect
+  if (node.nodeType === 3) {
+    if (end && offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1)
+      side = 'right'
+    } else if (offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset, offset + 1), -1)
+      side = 'left'
+    }
+  } else if (node.firstChild) {
+    if (offset < node.childNodes.length) {
+      const child = node.childNodes[offset]
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1)
+      side = 'left'
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1]
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1)
+      side = 'right'
+    }
+  } else {
+    rect = node.getBoundingClientRect()
+    side = 'left'
+  }
+
+  const x = rect[side]
+
+  return {
+    top: rect.top,
+    bottom: rect.bottom,
+    left: x,
+    right: x,
+  }
+}
+
+
 class Menu {
 
   constructor({ options, editorView }) {
     this.options = {
       ...{
         element: null,
+        keepInBounds: true,
         onUpdate: () => false,
       },
       ...options,
@@ -36,19 +88,24 @@ class Menu {
     const { from, to } = state.selection
 
     // These are in screen coordinates
-    const start = view.coordsAtPos(from)
-    const end = view.coordsAtPos(to)
+    // We can't use EditorView.cordsAtPos here because it can't handle linebreaks correctly
+    // See: https://github.com/ProseMirror/prosemirror-view/pull/47
+    const start = coordsAtPos(view, from)
+    const end = coordsAtPos(view, to, true)
 
     // The box in which the tooltip is positioned, to use as base
     const box = this.options.element.offsetParent.getBoundingClientRect()
+    const el = this.options.element.getBoundingClientRect()
 
     // Find a center-ish x position from the selection endpoints (when
     // crossing lines, end may be more to the left)
-    const left = Math.max((start.left + end.left) / 2, start.left + 3)
+    const left = ((start.left + end.left) / 2) - box.left
 
+    // Keep the menuBubble in the bounding box of the offsetParent i
+    this.left = Math.round(this.options.keepInBounds
+        ? Math.min(box.width - (el.width / 2), Math.max(left, el.width / 2)) : left)
+    this.bottom = Math.round(box.bottom - start.top)
     this.isActive = true
-    this.left = parseInt(left - box.left, 10)
-    this.bottom = parseInt(box.bottom - start.top, 10)
 
     this.sendUpdate()
   }

packages/tiptap/src/Utils/ComponentView.js

@@ -108,6 +108,10 @@ export default class ComponentView {
 
   // disable (almost) all prosemirror event listener for node views
   stopEvent(event) {
+    if (typeof this.extension.stopEvent === 'function') {
+      return this.extension.stopEvent(event)
+    }
+
     const isPaste = event.type === 'paste'
     const draggable = !!this.extension.schema.draggable
 

packages/tiptap/src/Utils/Extension.js

@@ -15,6 +15,10 @@ export default class Extension {
     return 'extension'
   }
 
+  get update() {
+    return () => {}
+  }
+
   get defaultOptions() {
     return {}
   }

packages/tiptap/src/Utils/ExtensionManager.js

@@ -15,6 +15,27 @@ export default class ExtensionManager {
       }), {})
   }
 
+  get options() {
+    const { view } = this
+    return this.extensions
+        .reduce((nodes, extension) => ({
+          ...nodes,
+          [extension.name]: new Proxy(extension.options, {
+            set(obj, prop, value) {
+              const changed = (obj[prop] !== value)
+
+              Object.assign(obj, { [prop]: value })
+
+              if (changed) {
+                extension.update(view)
+              }
+
+              return true
+            },
+          }),
+        }), {})
+  }
+
   get marks() {
     return this.extensions
       .filter(extension => extension.type === 'mark')

packages/tiptap/test/Editor.spec.js

@@ -25,6 +25,14 @@ test('create editor', () => {
   expect(editor).toBeDefined()
 })
 
+test('check empty content (null)', () => {
+  const editor = new Editor({
+    content: null,
+  })
+
+  expect(editor.getHTML()).toEqual('<p></p>')
+})
+
 test('check invalid content (JSON)', () => {
   const editor = new Editor({
     content: { thisIsNotAValidDocument: true },
@@ -270,3 +278,52 @@ test('update callback', done => {
 
   editor.setContent('<p>Bar</p>', true)
 })
+
+test('parse options in set content', done => {
+  const editor = new Editor({
+    content: '<p>Foo</p>',
+    onUpdate: ({ getHTML, getJSON }) => {
+      expect(getHTML()).toEqual('<p>  Foo  </p>')
+      expect(getJSON()).toEqual({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: '  Foo  ',
+              },
+            ],
+          },
+        ],
+      })
+      done()
+    },
+  })
+
+  editor.setContent('<p>  Foo  </p>', true, { preserveWhitespace: true })
+})
+
+test('parse options in constructor', () => {
+  const editor = new Editor({
+    content: '<p>  Foo  </p>',
+    parseOptions: { preserveWhitespace: true },
+  })
+
+  expect(editor.getHTML()).toEqual('<p>  Foo  </p>')
+  expect(editor.getJSON()).toEqual({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: '  Foo  ',
+          },
+        ],
+      },
+    ],
+  })
+})