Google Sheet integration fix (#493)

* Google Sheet integration fix

* fix testcase

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/RichTextAreaInput.client.vue

@@ -1,10 +1,10 @@
 <template>
-  <input-wrapper v-bind="inputWrapperProps">
+  <InputWrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
 
-    <vue-editor
+    <VueEditor
       :id="id ? id : name"
       ref="editor"
       v-model="compVal"
@@ -18,6 +18,7 @@
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,
       ]"
+      :editor-options="editorOptions"
       :editor-toolbar="editorToolbar"
       class="rich-editor resize-y"
       :style="inputStyle"
@@ -29,40 +30,58 @@
     <template #error>
       <slot name="error" />
     </template>
-  </input-wrapper>
+  </InputWrapper>
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
-import { VueEditor, Quill } from "vue3-editor"
+import { Quill, VueEditor } from 'vue3-editor'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
 
-Quill.imports["formats/link"].PROTOCOL_WHITELIST.push("notion")
+Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
 
 export default {
-  name: "RichTextAreaInput",
+  name: 'RichTextAreaInput',
   components: { InputWrapper, VueEditor },
 
   props: {
     ...inputProps,
+    editorOptions: {
+      type: Object,
+      default: () => {
+        return {
+          formats: [
+            'bold',
+            'color',
+            'font',
+            'italic',
+            'link',
+            'underline',
+            'header',
+            'indent',
+            'list'
+          ]
+        }
+      }
+    },
     editorToolbar: {
       type: Array,
       default: () => {
         return [
           [{ header: 1 }, { header: 2 }],
-          ["bold", "italic", "underline", "link"],
-          [{ list: "ordered" }, { list: "bullet" }],
-          [{ color: [] }],
+          ['bold', 'italic', 'underline', 'link'],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }]
         ]
-      },
-    },
-  },
-
-  setup(props, context) {
-    return {
-      ...useFormInput(props, context),
+      }
     }
   },
+
+  setup (props, context) {
+    return {
+      ...useFormInput(props, context)
+    }
+  }
 }
 </script>
 

client/components/forms/SelectInput.vue

@@ -74,7 +74,7 @@
                 theme.SelectInput.fontSize,
               ]"
             >
-              {{ option.name }}
+              {{ getOptionName(option) }}
             </p>
             <span
               v-if="selected"
@@ -157,7 +157,8 @@ export default {
   methods: {
     getOptionName(val) {
       const option = this.finalOptions.find((optionCandidate) => {
-        return optionCandidate[this.optionKey] === val
+        return optionCandidate[this.optionKey] === val ||
+          (typeof val === 'object' && optionCandidate[this.optionKey] === val[this.optionKey])
       })
       if (option) return option[this.displayKey]
       return null