Merge pull request #210 from Chrissi2812/reactive-plugin-options

Reactive extension options

README.md

@@ -299,6 +299,7 @@ The most powerful feature of tiptap is that you can create your own extensions.
 | `commands({ schema, attrs })` | `Object` | `null` | Define a command. |
 | `inputRules({ schema })` | `Array` | `[]` | Define a list of input rules. |
 | `pasteRules({ schema })` | `Array` | `[]` | Define a list of paste rules. |
+| `get update()` | `Function` | `undefined` | Called when options of extension are changed via `editor.extensions.options` |
 
 ### Node|Mark Class
 

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(),
@@ -34,6 +36,11 @@ export default {
   beforeDestroy() {
     this.editor.destroy()
   },
+  watch: {
+    placeholder(newValue) {
+      this.editor.extensions.options.placeholder.emptyNodeText = newValue
+    },
+  },
 }
 </script>
 

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

@@ -15,6 +15,12 @@ export default class Placeholder extends Extension {
     }
   }
 
+  get update() {
+    return view => {
+      view.updateState(view.state)
+    }
+  }
+
   get plugins() {
     return [
       new Plugin({

packages/tiptap/src/Editor.js

@@ -67,6 +67,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) {

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')