Merge pull request #2513 from Human-Connection/fix_editor_only_visible_after_click

fix: editor not visible in server-side-rendering

webapp/components/ContributionForm/ContributionForm.vue

@@ -38,23 +38,21 @@
           </ds-chip>
           <ds-chip v-else size="base">{{ form.title.length }}/{{ formSchema.title.max }}</ds-chip>
         </ds-text>
-        <client-only>
+        <hc-editor
-          <hc-editor
+          :users="users"
-            :users="users"
+          :value="form.content"
-            :value="form.content"
+          :hashtags="hashtags"
-            :hashtags="hashtags"
+          @input="updateEditorContent"
-            @input="updateEditorContent"
+        />
-          />
+        <ds-text align="right">
-          <ds-text align="right">
+          <ds-chip v-if="errors && errors.content" color="danger" size="base">
-            <ds-chip v-if="errors && errors.content" color="danger" size="base">
+            {{ contentLength }}
-              {{ contentLength }}
+            <ds-icon name="warning"></ds-icon>
-              <ds-icon name="warning"></ds-icon>
+          </ds-chip>
-            </ds-chip>
+          <ds-chip v-else size="base">
-            <ds-chip v-else size="base">
+            {{ contentLength }}
-              {{ contentLength }}
+          </ds-chip>
-            </ds-chip>
+        </ds-text>
-          </ds-text>
-        </client-only>
         <ds-space margin-bottom="small" />
         <hc-categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
         <ds-text align="right">

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) {
@@ -129,7 +117,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.editor = new Editor({
       content: this.value || '',
       doc: this.doc,
@@ -247,11 +235,7 @@ export default {
     },
     onUpdate(e) {
       const content = e.getHTML()
-      const contentHash = stringHash(content)
+      this.$emit('input', content)
-      if (contentHash !== this.lastValueHash) {
-        this.lastValueHash = contentHash
-        this.$emit('input', content)
-      }
     },
     toggleLinkInput(attrs, element) {
       if (!this.isLinkInputActive && attrs && element) {

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",

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"