Merge branch 'master' into feature/collab-plugin

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

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/Embeds/Iframe.js

@@ -47,7 +47,7 @@ export default class Iframe extends Node {
       template: `
         <div class="iframe">
           <iframe class="iframe__embed" :src="src"></iframe>
-          <input class="iframe__input" type="text" v-model="src" v-if="editable" />
+          <input class="iframe__input" @paste.stop type="text" v-model="src" v-if="editable" />
         </div>
       `,
     }

examples/Components/Routes/Images/index.vue

@@ -51,7 +51,7 @@ export default {
           <p>
             This is basic example of implementing images. Try to drop new images here. Reordering also works.
           </p>
-          <img src="https://ljdchost.com/8I2DeFn.gif" />
+          <img src="https://66.media.tumblr.com/dcd3d24b79d78a3ee0f9192246e727f1/tumblr_o00xgqMhPM1qak053o1_400.gif" />
         `,
       }),
     }

examples/Components/Routes/Links/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble class="menububble" :editor="editor">
+    <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu">
       <div
         slot-scope="{ commands, isActive, getMarkAttrs, menu }"
         class="menububble"
@@ -21,7 +21,7 @@
             @click="showLinkMenu(getMarkAttrs('link'))"
             :class="{ 'is-active': isActive.link() }"
           >
-            <span>Add Link</span>
+            <span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
             <icon name="link" />
           </button>
         </template>

examples/Components/Routes/MenuBubble/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <editor-menu-bubble :editor="editor">
+    <editor-menu-bubble :editor="editor" :keep-in-bounds="keepInBounds">
       <div
         slot-scope="{ commands, isActive, menu }"
         class="menububble"
@@ -69,6 +69,7 @@ export default {
   },
   data() {
     return {
+      keepInBounds: true,
       editor: new Editor({
         extensions: [
           new Blockquote(),

examples/Components/Routes/Placeholder/index.vue

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

examples/Components/Routes/Suggestions/index.vue

@@ -159,6 +159,7 @@ export default {
       filteredUsers: [],
       navigatedUserIndex: 0,
       insertMention: () => {},
+      observer: null,
     }
   },
 
@@ -222,20 +223,35 @@ export default {
         interactive: true,
         theme: 'dark',
         placement: 'top-start',
-        performance: true,
         inertia: true,
         duration: [400, 200],
         showOnInit: true,
         arrow: true,
         arrowType: 'round',
       })
+
+      // we have to update tippy whenever the DOM is updated
+      if (MutationObserver) {
+        this.observer = new MutationObserver(() => {
+          this.popup.popperInstance.scheduleUpdate()
+        })
+        this.observer.observe(this.$refs.suggestions, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        })
+      }
     },
 
     destroyPopup() {
       if (this.popup) {
-        this.popup.destroyAll()
+        this.popup.destroy()
         this.popup = null
       }
+
+      if (this.observer) {
+        this.observer.disconnect()
+      }
     },
 
   },
@@ -244,7 +260,6 @@ export default {
 
 <style lang="scss">
 @import "~variables";
-@import '~modules/tippy.js/dist/tippy.css';
 
 .mention {
   background: rgba($color-black, 0.1);