Merge branch 'master' into issue-232

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">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ 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">
-        <div class="menubar" slot-scope="{ commands, isActive }">
+      <editor-menu-bar :editor="editor" v-slot="{ 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">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ 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">
-      <div class="menubar" slot-scope="{ commands }">
+    <editor-menu-bar :editor="editor" v-slot="{ 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">
-        <div class="menubar" slot-scope="{ commands }">
+      <editor-menu-bar :editor="editor" v-slot="{ 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">
-			<div class="menubar" slot-scope="{ commands, isActive }">
+		<editor-menu-bar :editor="editor" v-slot="{ 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">
-      <div class="menubar" slot-scope="{ commands, isActive }">
+    <editor-menu-bar :editor="editor" v-slot="{ 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'),