📚2️⃣ Rich text: (not really) functional components for all views

web-frontend/modules/database/components/view/grid/fields/GridViewFieldRichText.vue

@@ -5,23 +5,15 @@
     :class="{ editing: opened }"
     @contextmenu="stopContextIfEditing($event)"
   >
-    <div v-if="!opened" class="grid-field-long-text">
-      {{ value }}
-    </div>
-    <div
-      v-else-if="editing"
-      v-prevent-parent-scroll
-      class="grid-field-long-text__textarea"
-    >
+    <div v-prevent-parent-scroll="opened && editing" :class="classNames">
       <RichTextEditor
         ref="input"
         v-model="richCopy"
+        :editable="editing"
+        :content-scaled="!opened || !editing"
         :enable-rich-text-formatting="true"
       ></RichTextEditor>
     </div>
-    <div v-else class="grid-field-long-text__textarea">
-      {{ richCopy }}
-    </div>
   </div>
 </template>
 
@@ -39,6 +31,17 @@ export default {
       richCopy: '',
     }
   },
+  computed: {
+    classNames() {
+      if (!this.opened) {
+        return 'grid-field-long-text'
+      } else if (this.editing) {
+        return 'grid-field-long-text__textarea grid-field-long-text__textarea--rich-editor'
+      } else {
+        return 'grid-field-long-text__textarea'
+      }
+    },
+  },
   watch: {
     value: {
       handler(value) {
@@ -46,6 +49,11 @@ export default {
       },
       immediate: true,
     },
+    editing(editing) {
+      if (!editing) {
+        this.richCopy = this.value || ''
+      }
+    },
   },
   methods: {
     beforeSave() {