Update rendering and data flow for Tiptap Editor on Instance tab

src/store/modules/settings.js

@@ -88,11 +88,9 @@ const settings = {
   actions: {
     async FetchInstanceDocument({ commit, getters }, name) {
       const { data } = await getInstanceDocument(name, getters.authHost, getters.token)
-      console.log(data)
       if (name === 'instance-panel') {
         commit('SET_INSTANCE_PANEL', data)
       } else {
-        console.log(name)
         commit('SET_TERMS_OF_SERVICES', data)
       }
     },

src/views/settings/components/Instance.vue

@@ -3,7 +3,9 @@
     <el-form :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
-    <editor-input :content="instancePanelContent" :name="'instance-panel'" @input="handleEditorUpdate"/>
+    <div>
+      <editor-input v-model="instancePanelContent" :name="'instance-panel'" @input="handleEditorUpdate"/>
+    </div>
     <el-divider v-if="instance" class="divider thick-line"/>
     <el-form :model="restrictUnauthenticatedData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="restrictUnauthenticated" :data="restrictUnauthenticatedData"/>
@@ -78,8 +80,13 @@ export default {
     adminTokenData() {
       return _.get(this.settings.settings, [':pleroma', ':admin_token']) || {}
     },
-    instancePanelContent() {
+    instancePanelContent: {
-      return this.$store.state.settings.instancePanel
+      get() {
+        return this.$store.state.settings.instancePanel
+      },
+      set(content) {
+        this.editorContent = content
+      }
     },
     favicons() {
       return this.settings.description.find(setting => setting.key === ':instances_favicons')

src/views/settings/components/inputComponents/EditorInput.vue

@@ -123,7 +123,7 @@ export default {
     EditorMenuBar
   },
   props: {
-    content: {
+    value: {
       type: String,
       default: ''
     },
@@ -134,26 +134,8 @@ export default {
   },
   data() {
     return {
-      editor: new Editor({
+      editor: null,
-        extensions: [
+      emitAfterOnUpdate: false
-          new Blockquote(),
-          new Bold(),
-          new BulletList(),
-          new CodeBlock(),
-          new Heading({ levels: [1, 2, 3] }),
-          new History(),
-          new HorizontalRule(),
-          new Italic(),
-          new Link(),
-          new ListItem(),
-          new OrderedList(),
-          new Underline()
-        ],
-        content: this.content,
-        onUpdate: ({ getHTML }) => {
-          this.$emit('input', getHTML())
-        }
-      })
     }
   },
   computed: {
@@ -173,13 +155,48 @@ export default {
       }
     }
   },
+  watch: {
+    value(val) {
+      if (this.emitAfterOnUpdate) {
+        this.emitAfterOnUpdate = false
+        return
+      }
+      if (this.editor) this.editor.setContent(val)
+    }
+  },
   beforeDestroy() {
-    this.editor.destroy()
+    console.log(this.editor)
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  },
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        new Blockquote(),
+        new Bold(),
+        new BulletList(),
+        new CodeBlock(),
+        new Heading({ levels: [1, 2, 3] }),
+        new History(),
+        new HorizontalRule(),
+        new Italic(),
+        new Link(),
+        new ListItem(),
+        new OrderedList(),
+        new Underline()
+      ],
+      content: this.value,
+      onUpdate: ({ getHTML }) => {
+        this.$emit('input', getHTML())
+      }
+    })
+    this.editor.setContent(this.value)
   },
   methods: {
     async removeInstanceDoc() {
       await this.$store.dispatch('RemoveInstanceDocument', this.name)
-      this.editor.setContent(this.content)
+      this.editor.setContent(this.value)
     }
   }
 }