Merge branch 'master' into add-dropcursor

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   plugins: ['html'],
 
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module',
   },
 
@@ -25,6 +25,7 @@ module.exports = {
   },
 
   extends: [
+    'plugin:vue/base',
     'airbnb-base',
   ],
 

README.md

@@ -72,8 +72,8 @@ useBuiltInExtensions
 | `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
 | `useBuiltInExtensions` | `Boolean` | `true` | By default tiptap adds a `Doc`, `Paragraph` and `Text` node to the Prosemirror schema. |
 | `onInit` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. |
-| `onFocus` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on focus. |
+| `onFocus` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on focus. |
-| `onBlur` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on blur. |
+| `onBlur` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on blur. |
 | `onUpdate` | `Function` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function on every change. |
 
 ## Components

examples/Components/Routes/Placeholder/index.vue

@@ -24,6 +24,7 @@ export default {
           new ListItem(),
           new Placeholder({
             emptyClass: 'is-empty',
+            emptyNodeText: 'Write something …',
           }),
         ],
       }),
@@ -37,7 +38,7 @@ export default {
 
 <style lang="scss">
 .editor p.is-empty:first-child::before {
-  content: 'Start typing…';
+  content: attr(data-empty-text);
   float: left;
   color: #aaa;
   pointer-events: none;

examples/Components/Routes/ReadOnly/index.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="editor">
+    <div class="checkbox">
+      <input type="checkbox" id="editable" v-model="editable" />
+      <label for="editable">editable</label>
+    </div>
+
     <editor-content class="editor__content" :editor="editor" />
   </div>
 </template>
@@ -40,10 +45,24 @@ export default {
           </p>
         `,
       }),
+      editable: false,
     }
   },
+  watch: {
+    editable() {
+      this.editor.setOptions({
+        editable: this.editable,
+      })
+    },
+  },
   beforeDestroy() {
     this.editor.destroy()
   },
 }
 </script>
+
+<style lang="scss">
+.checkbox {
+  margin-bottom: 1rem;
+}
+</style>

package.json

@@ -23,15 +23,15 @@
     "ie >= 9"
   ],
   "devDependencies": {
-    "@babel/core": "^7.2.0",
+    "@babel/core": "^7.2.2",
-    "@babel/node": "^7.2.0",
+    "@babel/node": "^7.2.2",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/runtime": "^7.2.0",
-    "autoprefixer": "^9.4.2",
+    "autoprefixer": "^9.4.3",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
@@ -39,8 +39,8 @@
     "browser-sync": "^2.26.3",
     "connect-history-api-fallback": "^1.5.0",
     "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.0.0",
+    "css-loader": "^2.0.1",
-    "eslint": "^5.8.0",
+    "eslint": "^5.10.0",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-import": "^2.13.0",
@@ -53,33 +53,33 @@
     "http-server": "^0.11.1",
     "imagemin-webpack-plugin": "^2.3.0",
     "jest": "^23.6.0",
-    "lerna": "^3.5.1",
+    "lerna": "^3.7.0",
     "mini-css-extract-plugin": "^0.5.0",
     "minimist": "^1.2.0",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "ora": "^3.0.0",
-    "postcss": "^7.0.5",
+    "postcss": "^7.0.7",
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.0.0",
     "regenerator-runtime": "^0.13.1",
-    "rollup": "^0.67.4",
+    "rollup": "^0.68.0",
-    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-babel": "^4.1.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-flow-no-whitespace": "^1.0.0",
-    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-vue": "^4.3.2",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.23.1",
     "tippy.js": "^3.3.0",
     "uglify-js": "^3.4.9",
-    "vue": "^2.5.18",
+    "vue": "^2.5.21",
     "vue-loader": "^15.4.2",
     "vue-router": "^3.0.2",
     "vue-style-loader": "^4.1.0",
-    "vue-template-compiler": "^2.5.18",
+    "vue-template-compiler": "^2.5.21",
-    "webpack": "^4.27.1",
+    "webpack": "^4.28.0",
     "webpack-dev-middleware": "^3.4.0",
     "webpack-hot-middleware": "^2.24.3",
     "webpack-manifest-plugin": "^2.0.4",

packages/tiptap-commands/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-commands",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Commands for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -24,6 +24,6 @@
     "prosemirror-inputrules": "^1.0.1",
     "prosemirror-schema-list": "^1.0.1",
     "prosemirror-state": "^1.2.2",
-    "tiptap-utils": "^1.0.1"
+    "tiptap-utils": "^1.1.0"
   }
 }

packages/tiptap-extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extensions",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Extensions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -25,8 +25,8 @@
     "prosemirror-history": "^1.0.3",
     "prosemirror-state": "^1.2.2",
     "prosemirror-view": "^1.6.7",
-    "tiptap": "^1.4.0",
+    "tiptap": "^1.5.0",
-    "tiptap-commands": "^1.2.0"
+    "tiptap-commands": "^1.3.0"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

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

@@ -10,6 +10,7 @@ export default class Placeholder extends Extension {
   get defaultOptions() {
     return {
       emptyNodeClass: 'is-empty',
+      emptyNodeText: 'Write something...',
     }
   }
 
@@ -28,6 +29,7 @@ export default class Placeholder extends Extension {
 
               const decoration = Decoration.node(pos, pos + node.nodeSize, {
                 class: this.options.emptyNodeClass,
+                'data-empty-text': this.options.emptyNodeText,
               })
               decorations.push(decoration)
             })

packages/tiptap-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-utils",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Utility functions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -23,6 +23,6 @@
     "prosemirror-model": "^1.6.3",
     "prosemirror-state": "^1.2.2",
     "prosemirror-tables": "^0.7.9",
-    "prosemirror-utils": "^0.7.2"
+    "prosemirror-utils": "^0.7.3"
   }
 }

packages/tiptap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A rich-text editor for Vue.js",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "prosemirror-model": "^1.6.3",
     "prosemirror-state": "^1.2.1",
     "prosemirror-view": "^1.6.7",
-    "tiptap-commands": "^1.2.0",
+    "tiptap-commands": "^1.3.0",
-    "tiptap-utils": "^1.0.1"
+    "tiptap-utils": "^1.1.0"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

packages/tiptap/src/Editor.js

@@ -13,11 +13,32 @@ import { Doc, Paragraph, Text } from './Nodes'
 export default class Editor {
 
   constructor(options = {}) {
+    this.defaultOptions = {
+      editable: true,
+      extensions: [],
+      content: '',
+      emptyDocument: {
+        type: 'doc',
+        content: [{
+          type: 'paragraph',
+        }],
+      },
+      useBuiltInExtensions: true,
+      dropCursor: {},
+      onInit: () => {},
+      onUpdate: () => {},
+      onFocus: () => {},
+      onBlur: () => {},
+    }
+
     this.init(options)
   }
 
   init(options = {}) {
-    this.setOptions(options)
+    this.setOptions({
+      ...this.defaultOptions,
+      ...options,
+    })
     this.element = document.createElement('div')
     this.extensions = this.createExtensions()
     this.nodes = this.createNodes()
@@ -38,27 +59,13 @@ export default class Editor {
   }
 
   setOptions(options) {
-    const defaultOptions = {
+    this.options = {
-      editable: true,
+      ...this.options,
-      extensions: [],
+      ...options,
-      content: '',
-      dropCursor: {},
-      emptyDocument: {
-        type: 'doc',
-        content: [{
-          type: 'paragraph',
-        }],
-      },
-      useBuiltInExtensions: true,
-      onInit: () => {},
-      onUpdate: () => {},
-      onFocus: () => {},
-      onBlur: () => {},
     }
 
-    this.options = {
+    if (this.view && this.state) {
-      ...defaultOptions,
+      this.view.updateState(this.state)
-      ...options,
     }
   }
 
@@ -181,12 +188,14 @@ export default class Editor {
 
     view.dom.style.whiteSpace = 'pre-wrap'
 
-    view.dom.addEventListener('focus', () => this.options.onFocus({
+    view.dom.addEventListener('focus', event => this.options.onFocus({
+      event,
       state: this.state,
       view: this.view,
     }))
 
-    view.dom.addEventListener('blur', () => this.options.onBlur({
+    view.dom.addEventListener('blur', event => this.options.onBlur({
+      event,
       state: this.state,
       view: this.view,
     }))