diff --git a/README.md b/README.md index 45818d7f..39c68dac 100644 --- a/README.md +++ b/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 diff --git a/examples/Components/Routes/Placeholder/index.vue b/examples/Components/Routes/Placeholder/index.vue index a11c24f4..7549540d 100644 --- a/examples/Components/Routes/Placeholder/index.vue +++ b/examples/Components/Routes/Placeholder/index.vue @@ -1,5 +1,6 @@ @@ -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 + }, + }, } diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js index cfd605f5..2d96ae13 100644 --- a/packages/tiptap-extensions/src/extensions/Placeholder.js +++ b/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({ diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index 36df54ab..321078c1 100644 --- a/packages/tiptap/src/Editor.js +++ b/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) { diff --git a/packages/tiptap/src/Utils/Extension.js b/packages/tiptap/src/Utils/Extension.js index 92461dbe..d6579eef 100644 --- a/packages/tiptap/src/Utils/Extension.js +++ b/packages/tiptap/src/Utils/Extension.js @@ -15,6 +15,10 @@ export default class Extension { return 'extension' } + get update() { + return () => {} + } + get defaultOptions() { return {} } diff --git a/packages/tiptap/src/Utils/ExtensionManager.js b/packages/tiptap/src/Utils/ExtensionManager.js index 2ced93f4..20da9068 100644 --- a/packages/tiptap/src/Utils/ExtensionManager.js +++ b/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')