feat: reactive font size for ace editor + i18n support for font size settings strings

components/smart/AceEditor.vue

@@ -108,6 +108,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -145,6 +153,8 @@ export default {
       })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     if (this.value) editor.setValue(this.value, 1)
 
     this.editor = editor

components/smart/FontSizePicker.vue

@@ -9,15 +9,15 @@
             class="pr-8"
             icon="format_size"
             outline
-            :label="`${fontSizes.find(({ code }) => code == active.code).name}`"
+            :label="getFontSizeName(fontSizes.find((size) => size == active))"
           />
         </template>
         <SmartItem
           v-for="(size, index) in fontSizes"
           :key="`size-${index}`"
-          :label="size.name"
-          :info-icon="size.code === active.code ? 'done' : ''"
-          :active-info-icon="size.code === active.code"
+          :label="getFontSizeName(size)"
+          :info-icon="size === active ? 'done' : ''"
+          :active-info-icon="size === active"
           @click.native="
             setActiveFont(size)
             $refs.fontSize.tippy().hide()
@@ -45,8 +45,11 @@ export default defineComponent({
     }
   },
   methods: {
+    getFontSizeName(size: HoppFontSize) {
+      return this.$t(`settings.font_size_${size}`)
+    },
     setActiveFont(size: HoppFontSize) {
-      document.documentElement.setAttribute("data-font-size", size.code)
+      document.documentElement.setAttribute("data-font-size", size)
       applySetting("FONT_SIZE", size)
     },
   },

components/smart/JsEditor.vue

@@ -52,6 +52,14 @@ export default {
     }
   },
 
+  computed: {
+    appFontSize() {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        "--body-font-size"
+      )
+    },
+  },
+
   watch: {
     value(value) {
       if (value !== this.cacheValue) {
@@ -100,6 +108,8 @@ export default {
         })
     })
 
+    editor.setFontSize(this.appFontSize)
+
     const completer = {
       getCompletions: (
         editor,