Add actions for moderating instance document

src/store/modules/settings.js

-import { fetchDescription, fetchSettings, removeSettings, updateSettings } from '@/api/settings'
+import {
+  deleteInstanceDocument,
+  fetchDescription,
+  fetchSettings,
+  getInstanceDocument,
+  removeSettings,
+  updateInstanceDocument,
+  updateSettings } from '@/api/settings'
 import { formSearchObject, parseNonTuples, parseTuples, valueHasTuples, wrapUpdatedSettings } from './normalizers'
 import _ from 'lodash'
 
@@ -8,15 +15,20 @@ const settings = {
     configDisabled: true,
     db: {},
     description: [],
+    instancePanel: '',
     loading: true,
     searchData: {},
     settings: {},
+    termsOfServices: '',
     updatedSettings: {}
   },
   mutations: {
     CLEAR_UPDATED_SETTINGS: (state) => {
       state.updatedSettings = {}
     },
+    SET_INSTANCE_PANEL: (state, data) => {
+      state.instancePanel = data
+    },
     REMOVE_SETTING_FROM_UPDATED: (state, { group, key, subkeys }) => {
       if (_.get(state.updatedSettings, [group, key, subkeys[0]])) {
         const { [subkeys[0]]: value, ...updatedSettings } = state.updatedSettings[group][key]
@@ -71,6 +83,10 @@ const settings = {
     }
   },
   actions: {
+    async FetchInstanceDocument({ commit, getters }, name) {
+      const { data } = await getInstanceDocument(name, getters.authHost, getters.token)
+      commit('SET_INSTANCE_PANEL', data.url)
+    },
     async FetchSettings({ commit, getters }) {
       commit('SET_LOADING', true)
       try {
@@ -89,6 +105,9 @@ const settings = {
       commit('TOGGLE_TABS', false)
       commit('SET_LOADING', false)
     },
+    async RemoveInstanceDocument({ getters }, name) {
+      await deleteInstanceDocument(name, getters.authHost, getters.token)
+    },
     async RemoveSetting({ commit, getters }, configs) {
       await removeSettings(configs, getters.authHost, getters.token)
       const response = await fetchSettings(getters.authHost, getters.token)
@@ -111,6 +130,11 @@ const settings = {
       commit('TOGGLE_REBOOT', response.data.need_reboot)
       commit('CLEAR_UPDATED_SETTINGS')
     },
+    async UpdateInstanceDocs({ getters }, { name, content }) {
+      const formData = new FormData()
+      formData.append('file', content)
+      await updateInstanceDocument(name, formData, getters.authHost, getters.token)
+    },
     UpdateSettings({ commit }, { group, key, input, value, type }) {
       key
         ? commit('UPDATE_SETTINGS', { group, key, input, value, type })

src/views/settings/components/Instance.vue

 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <editor-input />
+    <editor-input :content="instancePanelContent" @input="handleEditorUpdate"/>
     <el-form :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
@@ -63,6 +63,11 @@ export default {
     EditorInput,
     Setting
   },
+  data() {
+    return {
+      editorContent: ''
+    }
+  },
   computed: {
     ...mapGetters([
       'settings'
@@ -73,6 +78,9 @@ export default {
     adminTokenData() {
       return _.get(this.settings.settings, [':pleroma', ':admin_token']) || {}
     },
+    instancePanelContent() {
+      return this.$store.state.settings.instancePanel
+    },
     favicons() {
       return this.settings.description.find(setting => setting.key === ':instances_favicons')
     },
@@ -158,10 +166,17 @@ export default {
       return _.get(this.settings.settings, [':pleroma', ':welcome']) || {}
     }
   },
+  mounted() {
+    this.$store.dispatch('FetchInstanceDocument', 'instance-panel')
+  },
   methods: {
+    handleEditorUpdate(content) {
+      this.editorContent = content
+    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
+        await this.$store.dispatch('UpdateInstanceDocs', { name: 'instance-panel', content: this.editorContent })
       } catch (e) {
         return
       }

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

@@ -116,6 +116,12 @@ export default {
     EditorContent,
     EditorMenuBar
   },
+  props: {
+    content: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       editor: new Editor({
@@ -133,28 +139,10 @@ export default {
           new OrderedList(),
           new Underline()
         ],
-        content: `
-          <h2>
-            Hi there,
-          </h2>
-          <p>
-            this is a very <em>basic</em> example of tiptap.
-          </p>
-          <pre><code>body { display: none; }</code></pre>
-          <ul>
-            <li>
-              A regular list
-            </li>
-            <li>
-              With regular items
-            </li>
-          </ul>
-          <blockquote>
-            It's amazing 👏
-            <br />
-            – mom
-          </blockquote>
-        `
+        content: this.content,
+        onUpdate: ({ getHTML }) => {
+          this.$emit('input', getHTML())
+        }
       })
     }
   },