From a7a1e4affc814a70c203e2763df83a40c9f100f7 Mon Sep 17 00:00:00 2001 From: roschaefer Date: Sat, 14 Dec 2019 01:33:22 +0100 Subject: [PATCH 1/5] fix: editor not visible in server-side-rendering This is fixing a bug where sometimes the editor would not get displayed until you click into the title text fields. This commit also removes some obscure optimizations. I'm really annoyed by the cruft that we still carry around until this very day. Every single line of untested code, which you left because you thought: "Well sure this is going to improve performance!" is going to bite you. --- .../ContributionForm/ContributionForm.vue | 32 +++++++++---------- webapp/components/Editor/Editor.vue | 31 ++---------------- webapp/package.json | 1 - webapp/yarn.lock | 5 --- 4 files changed, 17 insertions(+), 52 deletions(-) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index ec9fe96166..eeba47b729 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -38,23 +38,21 @@ {{ form.title.length }}/{{ formSchema.title.max }} - - - - - {{ contentLength }} - - - - {{ contentLength }} - - - + + + + {{ contentLength }} + + + + {{ contentLength }} + + diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 234d94d2d7..41ec986d75 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -24,7 +24,6 @@ import { Editor, EditorContent } from 'tiptap' import { History } from 'tiptap-extensions' import linkify from 'linkify-it' -import stringHash from 'string-hash' import { replace, build } from 'xregexp/xregexp-all.js' import * as key from '../../constants/keycodes' @@ -107,29 +106,7 @@ export default { return extensions }, }, - watch: { - value: { - immediate: true, - handler: function(content, old) { - const contentHash = stringHash(content) - if (!content || contentHash === this.lastValueHash) { - return - } - this.lastValueHash = contentHash - this.$nextTick(() => this.editor.setContent(content)) - }, - }, - placeholder: { - immediate: true, - handler: function(val) { - if (!val || !this.editor) { - return - } - this.editor.extensions.options.placeholder.emptyNodeText = val - }, - }, - }, - created() { + mounted() { this.editor = new Editor({ content: this.value || '', doc: this.doc, @@ -247,11 +224,7 @@ export default { }, onUpdate(e) { const content = e.getHTML() - const contentHash = stringHash(content) - if (contentHash !== this.lastValueHash) { - this.lastValueHash = contentHash - this.$emit('input', content) - } + this.$emit('input', content) }, toggleLinkInput(attrs, element) { if (!this.isLinkInputActive && attrs && element) { diff --git a/webapp/package.json b/webapp/package.json index 250cb52c6a..b0e817582d 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -80,7 +80,6 @@ "nuxt-dropzone": "^1.0.4", "nuxt-env": "~0.1.0", "stack-utils": "^1.0.2", - "string-hash": "^1.1.3", "tippy.js": "^4.3.5", "tiptap": "~1.26.3", "tiptap-extensions": "~1.28.5", diff --git a/webapp/yarn.lock b/webapp/yarn.lock index e5e12297ba..986ed769e6 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -15052,11 +15052,6 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= -string-hash@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" - integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs= - string-length@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" From 65b92786b7b6a901a73cc8a312c46e7163d0ca3e Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 16 Dec 2019 11:00:55 +0100 Subject: [PATCH 2/5] Revert unrelated changes --- webapp/components/Editor/Editor.vue | 31 +++++++++++++++++++++++++++-- webapp/package.json | 1 + webapp/yarn.lock | 5 +++++ 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 41ec986d75..234d94d2d7 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -24,6 +24,7 @@ import { Editor, EditorContent } from 'tiptap' import { History } from 'tiptap-extensions' import linkify from 'linkify-it' +import stringHash from 'string-hash' import { replace, build } from 'xregexp/xregexp-all.js' import * as key from '../../constants/keycodes' @@ -106,7 +107,29 @@ export default { return extensions }, }, - mounted() { + watch: { + value: { + immediate: true, + handler: function(content, old) { + const contentHash = stringHash(content) + if (!content || contentHash === this.lastValueHash) { + return + } + this.lastValueHash = contentHash + this.$nextTick(() => this.editor.setContent(content)) + }, + }, + placeholder: { + immediate: true, + handler: function(val) { + if (!val || !this.editor) { + return + } + this.editor.extensions.options.placeholder.emptyNodeText = val + }, + }, + }, + created() { this.editor = new Editor({ content: this.value || '', doc: this.doc, @@ -224,7 +247,11 @@ export default { }, onUpdate(e) { const content = e.getHTML() - this.$emit('input', content) + const contentHash = stringHash(content) + if (contentHash !== this.lastValueHash) { + this.lastValueHash = contentHash + this.$emit('input', content) + } }, toggleLinkInput(attrs, element) { if (!this.isLinkInputActive && attrs && element) { diff --git a/webapp/package.json b/webapp/package.json index b0e817582d..250cb52c6a 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -80,6 +80,7 @@ "nuxt-dropzone": "^1.0.4", "nuxt-env": "~0.1.0", "stack-utils": "^1.0.2", + "string-hash": "^1.1.3", "tippy.js": "^4.3.5", "tiptap": "~1.26.3", "tiptap-extensions": "~1.28.5", diff --git a/webapp/yarn.lock b/webapp/yarn.lock index 986ed769e6..e5e12297ba 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -15052,6 +15052,11 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= +string-hash@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" + integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs= + string-length@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" From 70c63297d42441b0725f08a9f2bd6ec86a1b99b9 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 16 Dec 2019 11:06:47 +0100 Subject: [PATCH 3/5] Revert unrelated changes - @roschaefer, I reverted the changes you made that were unrelated to the server-side rendering issue with the editor... maybe we can put in a separate PR with them, or a subset of them that doesn't remove the reactivity of the editor placholder(?) --- webapp/components/Editor/Editor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 234d94d2d7..3310b8f87c 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -129,7 +129,7 @@ export default { }, }, }, - created() { + mounted() { this.editor = new Editor({ content: this.value || '', doc: this.doc, From 83ab648e930288b494ccc7565a73d40d81a6a532 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 16 Dec 2019 11:42:37 +0100 Subject: [PATCH 4/5] Add back @roschaefer changes - maintain reactive placeholders --- webapp/components/Editor/Editor.vue | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 3310b8f87c..6c8a1908a5 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -24,7 +24,6 @@ import { Editor, EditorContent } from 'tiptap' import { History } from 'tiptap-extensions' import linkify from 'linkify-it' -import stringHash from 'string-hash' import { replace, build } from 'xregexp/xregexp-all.js' import * as key from '../../constants/keycodes' @@ -108,17 +107,6 @@ export default { }, }, watch: { - value: { - immediate: true, - handler: function(content, old) { - const contentHash = stringHash(content) - if (!content || contentHash === this.lastValueHash) { - return - } - this.lastValueHash = contentHash - this.$nextTick(() => this.editor.setContent(content)) - }, - }, placeholder: { immediate: true, handler: function(val) { @@ -247,11 +235,7 @@ export default { }, onUpdate(e) { const content = e.getHTML() - const contentHash = stringHash(content) - if (contentHash !== this.lastValueHash) { - this.lastValueHash = contentHash - this.$emit('input', content) - } + this.$emit('input', content) }, toggleLinkInput(attrs, element) { if (!this.isLinkInputActive && attrs && element) { From e8c4624250dcaf70bddae64b4c722fc4d7523d2f Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 16 Dec 2019 11:48:28 +0100 Subject: [PATCH 5/5] Remove string-hash package --- webapp/package.json | 1 - webapp/yarn.lock | 10 ---------- 2 files changed, 11 deletions(-) diff --git a/webapp/package.json b/webapp/package.json index 250cb52c6a..b0e817582d 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -80,7 +80,6 @@ "nuxt-dropzone": "^1.0.4", "nuxt-env": "~0.1.0", "stack-utils": "^1.0.2", - "string-hash": "^1.1.3", "tippy.js": "^4.3.5", "tiptap": "~1.26.3", "tiptap-extensions": "~1.28.5", diff --git a/webapp/yarn.lock b/webapp/yarn.lock index e5e12297ba..8686a3f77e 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -14302,11 +14302,6 @@ serve-static@1.14.1, serve-static@^1.14.1: version "1.14.1" resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9" integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg== - dependencies: - encodeurl "~1.0.2" - escape-html "~1.0.3" - parseurl "~1.3.3" - send "0.17.1" server-destroy@^1.0.1: version "1.0.1" @@ -15052,11 +15047,6 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= -string-hash@^1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" - integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs= - string-length@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"