From 45945e2c090be078f823e0dea37423c88e3caf5d Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Mon, 25 Feb 2019 16:20:02 +0100 Subject: [PATCH 1/8] make options for extensions reactive changing options will call the update method off the extension. --- packages/tiptap/src/Editor.js | 4 ++++ packages/tiptap/src/Utils/Extension.js | 4 ++++ packages/tiptap/src/Utils/ExtensionManager.js | 22 +++++++++++++++++++ 3 files changed, 30 insertions(+) diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index 36df54ab..053e3b24 100644 --- a/packages/tiptap/src/Editor.js +++ b/packages/tiptap/src/Editor.js @@ -67,6 +67,10 @@ export default class Editor { view: this.view, state: this.state, }) + + // give extension manager access to our view and state + this.extensions.state = this.state + 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..b5cce07b 100644 --- a/packages/tiptap/src/Utils/ExtensionManager.js +++ b/packages/tiptap/src/Utils/ExtensionManager.js @@ -15,6 +15,28 @@ export default class ExtensionManager { }), {}) } + get options() { + const { state, view } = this + return this.extensions + // { name, options, update = () => {} } + .reduce((nodes, extension) => ({ + ...nodes, + [extension.name]: new Proxy(extension.options, { + set(obj, prop, value) { + const changed = (obj[prop] !== value) + + obj[prop] = value + + if (changed) { + extension.update({ state, view }) + } + + return true + }, + }), + }), {}) + } + get marks() { return this.extensions .filter(extension => extension.type === 'mark') From 5b779072111ddab4bdc98af7a9a10d27c9da6016 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Mon, 25 Feb 2019 16:23:31 +0100 Subject: [PATCH 2/8] add update method to placeholder --- packages/tiptap-extensions/src/extensions/Placeholder.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js index cfd605f5..03a6775f 100644 --- a/packages/tiptap-extensions/src/extensions/Placeholder.js +++ b/packages/tiptap-extensions/src/extensions/Placeholder.js @@ -15,6 +15,13 @@ export default class Placeholder extends Extension { } } + get update() { + return ({ state, view }) => { + // TODO: fix error when content is not empty + view.updateState(state) + } + } + get plugins() { return [ new Plugin({ From 7762316ecdfb419e5d914f6cfd4cc2e11f80e6e3 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Mon, 25 Feb 2019 16:24:39 +0100 Subject: [PATCH 3/8] changed placeholder example for reactive placeholder --- examples/Components/Routes/Placeholder/index.vue | 7 +++++++ 1 file changed, 7 insertions(+) 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 + }, + }, } From 89e6436114985e77a81e19493b29403635b209ee Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Tue, 26 Feb 2019 11:33:54 +0100 Subject: [PATCH 4/8] state passed to ExtensionManager is not updated using view.state instead --- packages/tiptap/src/Editor.js | 3 +-- packages/tiptap/src/Utils/ExtensionManager.js | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index 053e3b24..321078c1 100644 --- a/packages/tiptap/src/Editor.js +++ b/packages/tiptap/src/Editor.js @@ -68,8 +68,7 @@ export default class Editor { state: this.state, }) - // give extension manager access to our view and state - this.extensions.state = this.state + // give extension manager access to our view this.extensions.view = this.view } diff --git a/packages/tiptap/src/Utils/ExtensionManager.js b/packages/tiptap/src/Utils/ExtensionManager.js index b5cce07b..21cbd216 100644 --- a/packages/tiptap/src/Utils/ExtensionManager.js +++ b/packages/tiptap/src/Utils/ExtensionManager.js @@ -16,7 +16,7 @@ export default class ExtensionManager { } get options() { - const { state, view } = this + const { view } = this return this.extensions // { name, options, update = () => {} } .reduce((nodes, extension) => ({ @@ -28,7 +28,7 @@ export default class ExtensionManager { obj[prop] = value if (changed) { - extension.update({ state, view }) + extension.update(view) } return true From 0f44e74d1ef1b32a88861de3656efa8460229605 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Tue, 26 Feb 2019 11:42:07 +0100 Subject: [PATCH 5/8] fixed placeholder change corrupts current state --- packages/tiptap-extensions/src/extensions/Placeholder.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tiptap-extensions/src/extensions/Placeholder.js b/packages/tiptap-extensions/src/extensions/Placeholder.js index 03a6775f..2d96ae13 100644 --- a/packages/tiptap-extensions/src/extensions/Placeholder.js +++ b/packages/tiptap-extensions/src/extensions/Placeholder.js @@ -16,9 +16,8 @@ export default class Placeholder extends Extension { } get update() { - return ({ state, view }) => { - // TODO: fix error when content is not empty - view.updateState(state) + return view => { + view.updateState(view.state) } } From 0f64e2e4d69fa654e05afdccdea110a11c1c2104 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Tue, 26 Feb 2019 11:50:12 +0100 Subject: [PATCH 6/8] adding update method of extensions to readme --- README.md | 1 + 1 file changed, 1 insertion(+) 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 From 1cd40d3b0be0e8b3e9934d9d5e8dbbb71a341c93 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Tue, 26 Feb 2019 11:56:50 +0100 Subject: [PATCH 7/8] removed unnecessary comment --- packages/tiptap/src/Utils/ExtensionManager.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/tiptap/src/Utils/ExtensionManager.js b/packages/tiptap/src/Utils/ExtensionManager.js index 21cbd216..08699bfe 100644 --- a/packages/tiptap/src/Utils/ExtensionManager.js +++ b/packages/tiptap/src/Utils/ExtensionManager.js @@ -18,7 +18,6 @@ export default class ExtensionManager { get options() { const { view } = this return this.extensions - // { name, options, update = () => {} } .reduce((nodes, extension) => ({ ...nodes, [extension.name]: new Proxy(extension.options, { From 1dbf54295cce9cd5ee28a8e3b18c804a0470c327 Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Tue, 26 Feb 2019 12:04:45 +0100 Subject: [PATCH 8/8] travis-ci fixed praram-reassign issue in proxy setter --- packages/tiptap/src/Utils/ExtensionManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tiptap/src/Utils/ExtensionManager.js b/packages/tiptap/src/Utils/ExtensionManager.js index 08699bfe..20da9068 100644 --- a/packages/tiptap/src/Utils/ExtensionManager.js +++ b/packages/tiptap/src/Utils/ExtensionManager.js @@ -24,7 +24,7 @@ export default class ExtensionManager { set(obj, prop, value) { const changed = (obj[prop] !== value) - obj[prop] = value + Object.assign(obj, { [prop]: value }) if (changed) { extension.update(view)