Merge branch 'master' into issue-232

.eslintrc.js

@@ -56,5 +56,7 @@ module.exports = {
     'class-methods-use-this': 'off',
 
     'global-require': 'off',
+
+    'func-names': ['error', 'never'],
   }
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: 'bug'
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Steps to Reproduce / Codesandbox Example**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+ Fork this or create a new Codesandbox replicating your error
+ https://codesandbox.io/s/qxv5m9y6oq?fontsize=14
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+ - Mobile / Desktop: [eg. Desktop]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: 'feature request'
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.nvmrc

@@ -0,0 +1 @@
+v11.6.0

README.md

@@ -117,8 +117,8 @@ The `<editor-menu-bar />` component is renderless and will receive some properti
 
 ```vue
 <template>
-  <editor-menu-bar :editor="editor">
+  <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-    <div slot-scope="{ commands, isActive }">
+    <div>
       <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
         Bold
       </button>
@@ -147,9 +147,8 @@ The `<editor-menu-bubble />` component is renderless and will receive some prope
 
 ```vue
 <template>
-  <editor-menu-bubble :editor="editor">
+  <editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
     >
@@ -181,9 +180,8 @@ The `<editor-floating-menu />` component is renderless and will receive some pro
 
 ```vue
 <template>
-  <editor-floating-menu :editor="editor">
+  <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
     <div
-      slot-scope="{ commands, isActive, menu }"
       :class="{ 'is-active': menu.isActive }"
       :style="`top: ${menu.top}px`"
     >
@@ -207,12 +205,10 @@ By default, the editor will only support paragraphs. Other nodes and marks are a
 ```vue
 <template>
   <div>
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div slot-scope="{ commands, isActive }">
         <button :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
           Bold
         </button>
-      </div>
     </editor-menu-bar>
     <editor-content :editor="editor" />
   </div>
@@ -477,6 +473,7 @@ Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
 - [Philipp Kühn](https://github.com/philippkuehn)
 - [Christoph Flathmann](https://github.com/Chrissi2812)
 - [Erick Wilder](https://github.com/erickwilder)
+- [Marius Tolzmann](https://github.com/mariux)
 - [All Contributors](../../contributors)
 
 ## Packages Using Tiptap

build/examples/webpack.config.js

@@ -1,6 +1,5 @@
 import path from 'path'
 import webpack from 'webpack'
-import Fiber from 'fibers'
 import DartSass from 'dart-sass'
 import { VueLoaderPlugin } from 'vue-loader'
 import SvgStore from 'webpack-svgstore-plugin'
@@ -93,7 +92,6 @@ export default {
             loader: 'sass-loader',
             options: {
               implementation: DartSass,
-              fiber: Fiber,
             },
           },
         ]),

build/packages/build.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import zlib from 'zlib'
-import uglify from 'uglify-js'
+import Terser from 'terser'
 import { rollup } from 'rollup'
 import config from './config'
 
@@ -43,9 +43,8 @@ function buildEntry({ input, output }) {
   return rollup(input)
     .then(bundle => bundle.generate(output))
     .then(response => {
-      // console.log({ bla })
       if (isProd) {
-        const minified = uglify.minify(response.output[0].code, {
+        const minified = Terser.minify(response.output[0].code, {
           output: {
             preamble: output.banner,
             ascii_only: true,
@@ -53,8 +52,6 @@ function buildEntry({ input, output }) {
         }).code
         return write(output.file, minified, true)
       }
-      // console.log({ isProd })
-      // console.dir(response, { depth: null })
       return write(output.file, response.output[0].code)
     })
 }

build/packages/config.js

@@ -41,7 +41,7 @@ function genConfig(opts) {
       file: opts.file,
       format: opts.format,
       banner,
-      name: 'tiptap',
+      name: opts.outputName,
     },
   }
 
@@ -57,23 +57,28 @@ function genConfig(opts) {
 export default [
   {
     package: 'tiptap',
+    outputName: 'tiptap',
     outputFileName: 'tiptap',
   },
   {
     package: 'tiptap-commands',
+    outputName: 'tiptapCommands',
     outputFileName: 'commands',
   },
   {
     package: 'tiptap-utils',
+    outputName: 'tiptapUtils',
     outputFileName: 'utils',
   },
   {
     package: 'tiptap-extensions',
+    outputName: 'tiptapExtensions',
     outputFileName: 'extensions',
   },
 ].map(item => [
   {
     name: item.package,
+    outputName: item.outputName,
     package: resolve(`packages/${item.package}/package.json`),
     input: resolve(`packages/${item.package}/src/index.js`),
     file: resolve(`packages/${item.package}/dist/${item.outputFileName}.js`),
@@ -82,6 +87,7 @@ export default [
   },
   {
     name: item.package,
+    outputName: item.outputName,
     package: resolve(`packages/${item.package}/package.json`),
     input: resolve(`packages/${item.package}/src/index.js`),
     file: resolve(`packages/${item.package}/dist/${item.outputFileName}.min.js`),
@@ -90,6 +96,7 @@ export default [
   },
   {
     name: item.package,
+    outputName: item.outputName,
     package: resolve(`packages/${item.package}/package.json`),
     input: resolve(`packages/${item.package}/src/index.js`),
     file: resolve(`packages/${item.package}/dist/${item.outputFileName}.common.js`),
@@ -97,6 +104,7 @@ export default [
   },
   {
     name: item.package,
+    outputName: item.outputName,
     package: resolve(`packages/${item.package}/package.json`),
     input: resolve(`packages/${item.package}/src/index.js`),
     file: resolve(`packages/${item.package}/dist/${item.outputFileName}.esm.js`),

examples/Components/Navigation/index.vue

@@ -6,6 +6,9 @@
     </h1>
 
     <div>
+      <a class="navigation__link" href="https://tiptap.scrumpy.io/docs" target="_blank">
+        Documentation
+      </a>
       <a class="navigation__link" href="https://github.com/scrumpy/tiptap/blob/master/CONTRIBUTING.md" target="_blank">
         Contribute
       </a>

examples/Components/Routes/Basic/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"

examples/Components/Routes/Collaboration/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="editor">
+    <h2>
+      Collaborative Editing
+    </h2>
+    <div class="message">
+      With the Collaboration Extension it's possible for several users to work on a document at the same time. To make this possible, client-side and server-side code is required. This example shows this using a <a href="https://glitch.com/edit/#!/tiptap-sockets" target="_blank">socket server on glitch.com</a>. To keep the demo code clean, only a few nodes and marks are activated. There is also set a 250ms debounce for all changes. Try it out below:
+    </div>
+    <template v-if="editor && !loading">
+      <div class="count">
+        {{ count }} {{ count === 1 ? 'user' : 'users' }} connected
+      </div>
+      <editor-content class="editor__content" :editor="editor"  />
+    </template>
+    <em v-else>
+      Connecting to socket server …
+    </em>
+  </div>
+</template>
+
+<script>
+import io from 'socket.io-client'
+import { Editor, EditorContent } from 'tiptap'
+import {
+  HardBreak,
+  Heading,
+  Bold,
+  Code,
+  Italic,
+  History,
+  Collaboration,
+} from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      loading: true,
+      editor: null,
+      socket: null,
+      count: 0,
+    }
+  },
+
+  methods: {
+    onInit({ doc, version }) {
+      this.loading = false
+
+      if (this.editor) {
+        this.editor.destroy()
+      }
+
+      this.editor = new Editor({
+        content: doc,
+        extensions: [
+          new HardBreak(),
+          new Heading({ levels: [1, 2, 3] }),
+          new Bold(),
+          new Code(),
+          new Italic(),
+          new History(),
+          new Collaboration({
+            // the initial version we start with
+            // version is an integer which is incremented with every change
+            version,
+            // debounce changes so we can save some bandwidth
+            debounce: 250,
+            // onSendable is called whenever there are changed we have to send to our server
+            onSendable: data => {
+              this.socket.emit('update', data)
+            },
+          }),
+        ],
+      })
+    },
+
+    setCount(count) {
+      this.count = count
+    },
+  },
+
+  mounted() {
+    // server implementation: https://glitch.com/edit/#!/tiptap-sockets
+    this.socket = io('wss://tiptap-sockets.glitch.me')
+      // get the current document and its version
+      .on('init', data => this.onInit(data))
+      // send all updates to the collaboration extension
+      .on('update', data => this.editor.extensions.options.collaboration.update(data))
+      // get count of connected users
+      .on('getCount', count => this.setCount(count))
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+@import "~variables";
+
+.count {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: rgba($color-black, 0.5);
+  color: #27b127;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  line-height: 1;
+
+  &:before {
+    content: '';
+    display: inline-flex;
+    background-color: #27b127;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    margin-right: 0.3rem;
+  }
+}
+</style>

examples/Components/Routes/Export/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="editor">
-      <editor-menu-bar :editor="editor">
+      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-        <div class="menubar" slot-scope="{ commands, isActive }">
+        <div class="menubar">
 
           <button
             class="menubar__button"

examples/Components/Routes/FloatingMenu/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-floating-menu :editor="editor">
+    <editor-floating-menu :editor="editor" v-slot="{ commands, isActive, menu }">
       <div
-        slot-scope="{ commands, isActive, menu }"
         class="editor__floating-menu"
         :class="{ 'is-active': menu.isActive }"
         :style="`top: ${menu.top}px`"

examples/Components/Routes/HidingMenuBar/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
       <div
         class="menubar is-hidden"
         :class="{ 'is-focused': focused }"
-        slot-scope="{ commands, isActive, focused }"
       >
 
         <button

examples/Components/Routes/History/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"

examples/Components/Routes/Images/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands }">
-      <div class="menubar" slot-scope="{ commands }">
+      <div class="menubar">
         <button
           class="menubar__button"
           @click="showImagePrompt(commands.image)"

examples/Components/Routes/Links/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu">
+    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu" v-slot="{ commands, isActive, getMarkAttrs, menu }">
       <div
-        slot-scope="{ commands, isActive, getMarkAttrs, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"

examples/Components/Routes/MenuBubble/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble :editor="editor">
+    <editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds" v-slot="{ commands, isActive, menu }">
       <div
-        slot-scope="{ commands, isActive, menu }"
         class="menububble"
         :class="{ 'is-active': menu.isActive }"
         :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
@@ -69,6 +68,7 @@ export default {
   },
   data() {
     return {
+      keepInBounds: true,
       editor: new Editor({
         extensions: [
           new Blockquote(),

examples/Components/Routes/Placeholder/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <input type="text" v-model="placeholder">
+    <input type="text" v-model="editor.extensions.options.placeholder.emptyNodeText">
     <editor-content class="editor__content" :editor="editor" />
   </div>
 </template>
@@ -19,7 +19,6 @@ export default {
   },
   data() {
     return {
-      placeholder: 'Write something …',
       editor: new Editor({
         extensions: [
           new BulletList(),
@@ -36,11 +35,6 @@ export default {
   beforeDestroy() {
     this.editor.destroy()
   },
-  watch: {
-    placeholder(newValue) {
-      this.editor.extensions.options.placeholder.emptyNodeText = newValue
-    },
-  },
 }
 </script>
 

examples/Components/Routes/Suggestions/index.vue

@@ -2,8 +2,8 @@
   <div>
 
     <div class="editor">
-      <editor-menu-bar :editor="editor">
+      <editor-menu-bar :editor="editor" v-slot="{ commands }">
-        <div class="menubar" slot-scope="{ commands }">
+        <div class="menubar">
           <button class="menubar__button" @click="commands.mention({ id: 1, label: 'Philipp Kühn' })">
             <icon name="mention" />
             <span>Insert Mention</span>

examples/Components/Routes/Tables/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<editor-menu-bar :editor="editor">
+		<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-			<div class="menubar" slot-scope="{ commands, isActive }">
+			<div class="menubar">
 				<div class="toolbar">
 					<button
 						class="menubar__button"

examples/Components/Routes/TodoList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
-    <editor-menu-bar :editor="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+      <div class="menubar">
 
         <button
           class="menubar__button"

examples/Components/Subnavigation/index.vue

@@ -45,6 +45,9 @@
     <router-link class="subnavigation__link" to="/placeholder">
       Placeholder
     </router-link>
+    <router-link class="subnavigation__link" to="/collaboration">
+      Collaboration
+    </router-link>
     <router-link class="subnavigation__link" to="/export">
       Export HTML or JSON
     </router-link>

examples/assets/sass/main.scss

@@ -74,6 +74,15 @@ h3 {
   background-color: rgba($color-black, 0.1);
 }
 
+.message {
+  background-color: rgba($color-black, 0.05);
+  color: rgba($color-black, 0.7);
+  padding: 1rem;
+  border-radius: 6px;
+  margin-bottom: 1.5rem;
+  font-style: italic;
+}
+
 @import "./editor";
 @import "./menubar";
 @import "./menububble";

examples/main.js

@@ -117,6 +117,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Placeholder',
     },
   },
+  {
+    path: '/collaboration',
+    component: () => import('Components/Routes/Collaboration'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
+    },
+  },
   {
     path: '/export',
     component: () => import('Components/Routes/Export'),

package.json

@@ -24,23 +24,23 @@
     "ie >= 9"
   ],
   "devDependencies": {
-    "@babel/core": "^7.4.3",
+    "@babel/core": "^7.4.4",
     "@babel/node": "^7.2.2",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.3",
+    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/polyfill": "^7.4.3",
+    "@babel/polyfill": "^7.4.4",
-    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-env": "^7.4.4",
     "@babel/preset-stage-2": "^7.0.0",
-    "@babel/runtime": "^7.4.3",
+    "@babel/runtime": "^7.4.4",
     "audit-ci": "^1.6.0",
     "autoprefixer": "^9.5.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.5",
-    "browser-sync": "^2.26.3",
+    "browser-sync": "^2.26.5",
     "connect-history-api-fallback": "^1.6.0",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.0",
     "dart-sass": "^1.19.0",
     "eslint": "^5.16.0",
@@ -48,7 +48,6 @@
     "eslint-plugin-html": "^5.0.3",
     "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-vue": "5.2.2",
-    "fibers": "^3.1.1",
     "file-loader": "^3.0.1",
     "fuse.js": "^3.4.2",
     "glob": "^7.1.3",
@@ -57,7 +56,7 @@
     "http-server": "^0.11.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "jest": "^24.7.1",
-    "lerna": "^3.13.3",
+    "lerna": "^3.13.4",
     "mini-css-extract-plugin": "^0.6.0",
     "minimist": "^1.2.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -75,8 +74,8 @@
     "rollup-plugin-vue": "^5.0.0",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.23.1",
-    "tippy.js": "^4.2.1",
+    "terser": "^3.17.0",
-    "uglify-js": "^3.5.5",
+    "tippy.js": "^4.3.0",
     "vue": "^2.6.10",
     "vue-loader": "^15.7.0",
     "vue-router": "^3.0.6",
@@ -84,10 +83,12 @@
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.30.0",
     "webpack-dev-middleware": "^3.6.2",
-    "webpack-hot-middleware": "^2.24.3",
+    "webpack-hot-middleware": "^2.24.4",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-svgstore-plugin": "^4.1.0",
     "zlib": "^1.0.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "socket.io-client": "^2.2.0"
+  }
 }

packages/tiptap-commands/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-commands",
-  "version": "1.7.1",
+  "version": "1.9.1",
   "description": "Commands for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -22,9 +22,9 @@
   "dependencies": {
     "prosemirror-commands": "^1.0.7",
     "prosemirror-inputrules": "^1.0.1",
-    "prosemirror-schema-list": "^1.0.2",
+    "prosemirror-schema-list": "^1.0.3",
     "prosemirror-state": "^1.2.2",
     "prosemirror-model": "^1.7.0",
-    "tiptap-utils": "^1.3.0"
+    "tiptap-utils": "^1.4.1"
   }
 }

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

@@ -34,8 +34,8 @@ index = $pos.index(d)
 // this is a copy of splitListItem
 // see https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js
 
-export default function splitListItem(itemType) {
+export default function splitToDefaultListItem(itemType) {
-  return function _splitListItem(state, dispatch) {
+  return function (state, dispatch) {
     const { $from, $to, node } = state.selection
     if ((node && node.isBlock) || $from.depth < 2 || !$from.sameParent($to)) return false
     const grandParent = $from.node(-1)

packages/tiptap-extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extensions",
-  "version": "1.16.2",
+  "version": "1.18.1",
   "description": "Extensions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -22,13 +22,16 @@
   },
   "dependencies": {
     "lowlight": "^1.11.0",
+    "prosemirror-collab": "^1.1.1",
     "prosemirror-history": "^1.0.4",
+    "prosemirror-model": "^1.7.0",
     "prosemirror-state": "^1.2.2",
-    "prosemirror-tables": "^0.7.10",
+    "prosemirror-tables": "^0.7.11",
+    "prosemirror-transform": "^1.1.3",
     "prosemirror-utils": "^0.7.6",
-    "prosemirror-view": "^1.8.9",
+    "prosemirror-view": "^1.9.1",
-    "tiptap": "^1.16.2",
+    "tiptap": "^1.18.1",
-    "tiptap-commands": "^1.7.1"
+    "tiptap-commands": "^1.9.1"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

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

@@ -0,0 +1,78 @@
+import { Extension } from 'tiptap'
+import { Step } from 'prosemirror-transform'
+import {
+  collab,
+  sendableSteps,
+  getVersion,
+  receiveTransaction,
+} from 'prosemirror-collab'
+
+export default class Collaboration extends Extension {
+
+  get name() {
+    return 'collaboration'
+  }
+
+  init() {
+    this.getSendableSteps = this.debounce(state => {
+      const sendable = sendableSteps(state)
+
+      if (sendable) {
+        this.options.onSendable({
+          version: sendable.version,
+          steps: sendable.steps.map(step => step.toJSON()),
+          clientID: sendable.clientID,
+        })
+      }
+    }, this.options.debounce)
+
+    this.editor.on('update', ({ state }) => {
+      this.getSendableSteps(state)
+    })
+  }
+
+  get defaultOptions() {
+    return {
+      version: 0,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+      debounce: 250,
+      onSendable: () => {},
+      update: ({ steps, version }) => {
+        const { state, view, schema } = this.editor
+
+        if (getVersion(state) > version) {
+          return
+        }
+
+        view.dispatch(receiveTransaction(
+          state,
+          steps.map(item => Step.fromJSON(schema, item.step)),
+          steps.map(item => item.clientID),
+        ))
+      },
+    }
+  }
+
+  get plugins() {
+    return [
+      collab({
+        version: this.options.version,
+        clientID: this.options.clientID,
+      }),
+    ]
+  }
+
+  debounce(fn, delay) {
+    let timeout
+    return function (...args) {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+      timeout = setTimeout(() => {
+        fn(...args)
+        timeout = null
+      }, delay)
+    }
+  }
+
+}

packages/tiptap-extensions/src/index.js

@@ -23,6 +23,7 @@ export { default as Link } from './marks/Link'
 export { default as Strike } from './marks/Strike'
 export { default as Underline } from './marks/Underline'
 
+export { default as Collaboration } from './extensions/Collaboration'
 export { default as History } from './extensions/History'
 export { default as Placeholder } from './extensions/Placeholder'
 

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

@@ -44,7 +44,7 @@ export default class Link extends Mark {
   pasteRules({ type }) {
     return [
       pasteRule(
-        /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g,
+        /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-zA-Z]{2,}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/g,
         type,
         url => ({ href: url }),
       ),
@@ -59,7 +59,7 @@ export default class Link extends Mark {
             const { schema } = view.state
             const attrs = getMarkAttrs(view.state, schema.marks.link)
 
-            if (attrs.href) {
+            if (attrs.href && event.target instanceof HTMLAnchorElement) {
               event.stopPropagation()
               window.open(attrs.href)
             }

packages/tiptap-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-utils",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Utility functions for tiptap",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -22,7 +22,7 @@
   "dependencies": {
     "prosemirror-model": "^1.7.0",
     "prosemirror-state": "^1.2.2",
-    "prosemirror-tables": "^0.7.9",
+    "prosemirror-tables": "^0.7.11",
     "prosemirror-utils": "^0.7.6"
   }
 }

packages/tiptap-utils/src/utils/getMarkRange.js

@@ -17,19 +17,18 @@ export default function ($pos = null, type = null) {
 
   let startIndex = $pos.index()
   let startPos = $pos.start() + start.offset
+  let endIndex = startIndex + 1
+  let endPos = startPos + start.node.nodeSize
+
   while (startIndex > 0 && link.isInSet($pos.parent.child(startIndex - 1).marks)) {
     startIndex -= 1
     startPos -= $pos.parent.child(startIndex).nodeSize
   }
 
-  // const endIndex = $pos.indexAfter()
+  while (endIndex < $pos.parent.childCount && link.isInSet($pos.parent.child(endIndex).marks)) {
-  const endPos = startPos + start.node.nodeSize
+    endPos += $pos.parent.child(endIndex).nodeSize
-
+    endIndex += 1
-  // disable for now. see #156
+  }
-  // while (endIndex < $pos.parent.childCount && link.isInSet($pos.parent.child(endIndex).marks)) {
-  //   endPos += $pos.parent.child(endIndex).nodeSize
-  //   endIndex += 1
-  // }
 
   return { from: startPos, to: endPos }
 

packages/tiptap-utils/src/utils/nodeIsActive.js

@@ -1,12 +1,16 @@
-import { findParentNode } from 'prosemirror-utils'
+import {
+  findParentNode,
+  findSelectedNodeOfType,
+} from 'prosemirror-utils'
 
 export default function (state, type, attrs = {}) {
   const predicate = node => node.type === type
-  const parent = findParentNode(predicate)(state.selection)
+  const node = findSelectedNodeOfType(type)(state.selection)
+    || findParentNode(predicate)(state.selection)
 
-  if (!Object.keys(attrs).length || !parent) {
+  if (!Object.keys(attrs).length || !node) {
-    return !!parent
+    return !!node
   }
 
-  return parent.node.hasMarkup(type, attrs)
+  return node.node.hasMarkup(type, attrs)
 }

packages/tiptap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap",
-  "version": "1.16.2",
+  "version": "1.18.1",
   "description": "A rich-text editor for Vue.js",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -26,10 +26,10 @@
     "prosemirror-inputrules": "^1.0.1",
     "prosemirror-keymap": "^1.0.1",
     "prosemirror-model": "^1.7.0",
-    "prosemirror-state": "^1.2.1",
+    "prosemirror-state": "^1.2.2",
-    "prosemirror-view": "^1.8.9",
+    "prosemirror-view": "^1.9.1",
-    "tiptap-commands": "^1.7.1",
+    "tiptap-commands": "^1.9.1",
-    "tiptap-utils": "^1.3.0"
+    "tiptap-utils": "^1.4.1"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

packages/tiptap/src/Components/EditorMenuBubble.js

@@ -7,6 +7,10 @@ export default {
       default: null,
       type: Object,
     },
+    keepInBounds: {
+      default: true,
+      type: Boolean,
+    },
   },
 
   data() {
@@ -27,6 +31,7 @@ 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) {

packages/tiptap/src/Editor.js

@@ -12,12 +12,16 @@ import { keymap } from 'prosemirror-keymap'
 import { baseKeymap } from 'prosemirror-commands'
 import { inputRules, undoInputRule } from 'prosemirror-inputrules'
 import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
-import { ExtensionManager, ComponentView } from './Utils'
+import {
+ camelCase, Emitter, ExtensionManager, ComponentView,
+} from './Utils'
 import { Doc, Paragraph, Text } from './Nodes'
 
-export default class Editor {
+export default class Editor extends Emitter {
 
   constructor(options = {}) {
+    super()
+
     this.defaultOptions = {
       editorProps: {},
       editable: true,
@@ -41,6 +45,15 @@ export default class Editor {
       onDrop: () => {},
     }
 
+    this.events = [
+      'init',
+      'update',
+      'focus',
+      'blur',
+      'paste',
+      'drop',
+    ]
+
     this.init(options)
   }
 
@@ -58,7 +71,6 @@ export default class Editor {
     this.keymaps = this.createKeymaps()
     this.inputRules = this.createInputRules()
     this.pasteRules = this.createPasteRules()
-    this.state = this.createState()
     this.view = this.createView()
     this.commands = this.createCommands()
     this.setActiveNodesAndMarks()
@@ -69,7 +81,11 @@ export default class Editor {
       }, 10)
     }
 
-    this.options.onInit({
+    this.events.forEach(name => {
+      this.on(name, this.options[camelCase(`on ${name}`)])
+    })
+
+    this.emit('init', {
       view: this.view,
       state: this.state,
     })
@@ -101,11 +117,15 @@ export default class Editor {
     ]
   }
 
+  get state() {
+    return this.view ? this.view.state : null
+  }
+
   createExtensions() {
     return new ExtensionManager([
       ...this.builtInExtensions,
       ...this.options.extensions,
-    ])
+    ], this)
   }
 
   createPlugins() {
@@ -216,21 +236,21 @@ export default class Editor {
 
   createView() {
     const view = new EditorView(this.element, {
-      state: this.state,
+      state: this.createState(),
-      handlePaste: this.options.onPaste,
+      handlePaste: (...args) => { this.emit('paste', ...args) },
-      handleDrop: this.options.onDrop,
+      handleDrop: (...args) => { this.emit('drop', ...args) },
       dispatchTransaction: this.dispatchTransaction.bind(this),
     })
 
     view.dom.style.whiteSpace = 'pre-wrap'
 
-    view.dom.addEventListener('focus', event => this.options.onFocus({
+    view.dom.addEventListener('focus', event => this.emit('focus', {
       event,
       state: this.state,
       view: this.view,
     }))
 
-    view.dom.addEventListener('blur', event => this.options.onBlur({
+    view.dom.addEventListener('blur', event => this.emit('blur', {
       event,
       state: this.state,
       view: this.view,
@@ -283,8 +303,8 @@ export default class Editor {
   }
 
   dispatchTransaction(transaction) {
-    this.state = this.state.apply(transaction)
+    const newState = this.state.apply(transaction)
-    this.view.updateState(this.state)
+    this.view.updateState(newState)
     this.setActiveNodesAndMarks()
 
     if (!transaction.docChanged) {
@@ -295,7 +315,7 @@ export default class Editor {
   }
 
   emitUpdate(transaction) {
-    this.options.onUpdate({
+    this.emit('update', {
       getHTML: this.getHTML.bind(this),
       getJSON: this.getJSON.bind(this),
       state: this.state,
@@ -325,6 +345,13 @@ export default class Editor {
     this.view.dom.blur()
   }
 
+  getSchemaJSON() {
+    return JSON.parse(JSON.stringify({
+      nodes: this.extensions.nodes,
+      marks: this.extensions.marks,
+    }))
+  }
+
   getHTML() {
     const div = document.createElement('div')
     const fragment = DOMSerializer
@@ -341,13 +368,13 @@ export default class Editor {
   }
 
   setContent(content = {}, emitUpdate = false, parseOptions) {
-    this.state = EditorState.create({
+    const newState = EditorState.create({
       schema: this.state.schema,
       doc: this.createDocument(content, parseOptions),
       plugins: this.state.plugins,
     })
 
-    this.view.updateState(this.state)
+    this.view.updateState(newState)
 
     if (emitUpdate) {
       this.emitUpdate()
@@ -402,10 +429,11 @@ export default class Editor {
       return
     }
 
-    this.state = this.state.reconfigure({
+    const newState = this.state.reconfigure({
       plugins: this.state.plugins.concat([plugin]),
     })
-    this.view.updateState(this.state)
+    this.view.updateState(newState)
+    this.view.updatePluginViews()
   }
 
   destroy() {

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)
+    // We can't use EditorView.cordsAtPos here because it can't handle linebreaks correctly
-    const end = view.coordsAtPos(to)
+    // 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

@@ -65,6 +65,10 @@ export default class ComponentView {
   }
 
   updateComponentProps(props) {
+    if (!this.vm._props) {
+      return
+    }
+
     // Update props in component
     // TODO: Avoid mutating a prop directly.
     // Maybe there is a better way to do this?

packages/tiptap/src/Utils/Emitter.js

@@ -0,0 +1,45 @@
+export default class Emitter {
+  // Add an event listener for given event
+  on(event, fn) {
+    this._callbacks = this._callbacks || {}
+    // Create namespace for this event
+    if (!this._callbacks[event]) {
+      this._callbacks[event] = []
+    }
+    this._callbacks[event].push(fn)
+    return this
+  }
+
+  emit(event, ...args) {
+    this._callbacks = this._callbacks || {}
+    const callbacks = this._callbacks[event]
+
+    if (callbacks) {
+      callbacks.forEach(callback => callback.apply(this, args))
+    }
+
+    return this
+  }
+
+  // Remove event listener for given event.
+  // If fn is not provided, all event listeners for that event will be removed.
+  // If neither is provided, all event listeners will be removed.
+  off(event, fn) {
+
+    if (!arguments.length) {
+      this._callbacks = {}
+    } else {
+      // event listeners for the given event
+      const callbacks = this._callbacks ? this._callbacks[event] : null
+      if (callbacks) {
+        if (fn) {
+          this._callbacks[event] = callbacks.filter(cb => cb !== fn) // remove specific handler
+        } else {
+          delete this._callbacks[event] // remove all handlers
+        }
+      }
+    }
+
+    return this
+  }
+}

packages/tiptap/src/Utils/Extension.js

@@ -7,6 +7,14 @@ export default class Extension {
     }
   }
 
+  init() {
+    return null
+  }
+
+  bindEditor(editor = null) {
+    this.editor = editor
+  }
+
   get name() {
     return null
   }

packages/tiptap/src/Utils/ExtensionManager.js

@@ -2,7 +2,11 @@ import { keymap } from 'prosemirror-keymap'
 
 export default class ExtensionManager {
 
-  constructor(extensions = []) {
+  constructor(extensions = [], editor) {
+    extensions.forEach(extension => {
+      extension.bindEditor(editor)
+      extension.init()
+    })
     this.extensions = extensions
   }
 
@@ -133,44 +137,28 @@ export default class ExtensionManager {
           } : {},
         })
 
-        if (Array.isArray(value)) {
+        const apply = (cb, attrs) => {
-          commands[name] = attrs => value
-            .forEach(callback => {
           if (!editable) {
             return false
           }
           view.focus()
-              return callback(attrs)(view.state, view.dispatch, view)
+          return cb(attrs)(view.state, view.dispatch, view)
-            })
-        } else if (typeof value === 'function') {
-          commands[name] = attrs => {
-            if (!editable) {
-              return false
         }
-            view.focus()
+
-            return value(attrs)(view.state, view.dispatch, view)
+        const handle = (_name, _value) => {
+          if (Array.isArray(_value)) {
+            commands[_name] = attrs => _value.forEach(callback => apply(callback, attrs))
+          } else if (typeof _value === 'function') {
+            commands[_name] = attrs => apply(_value, attrs)
           }
-        } else if (typeof value === 'object') {
+        }
+
+        if (typeof value === 'object') {
           Object.entries(value).forEach(([commandName, commandValue]) => {
-            if (Array.isArray(commandValue)) {
+            handle(commandName, commandValue)
-              commands[commandName] = attrs => commandValue
-                .forEach(callback => {
-                  if (!editable) {
-                    return false
-                  }
-                  view.focus()
-                  return callback(attrs)(view.state, view.dispatch, view)
           })
         } else {
-              commands[commandName] = attrs => {
+          handle(name, value)
-                if (!editable) {
-                  return false
-                }
-                view.focus()
-                return commandValue(attrs)(view.state, view.dispatch, view)
-              }
-            }
-          })
         }
 
         return {

packages/tiptap/src/Utils/camelCase.js

@@ -0,0 +1,3 @@
+export default function (str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase())).replace(/\s+/g, '')
+}

packages/tiptap/src/Utils/index.js

@@ -1,4 +1,6 @@
+export { default as camelCase } from './camelCase'
 export { default as ComponentView } from './ComponentView'
+export { default as Emitter } from './Emitter'
 export { default as Extension } from './Extension'
 export { default as ExtensionManager } from './ExtensionManager'
 export { default as Mark } from './Mark'