simple langs for pagebuilder

src/components/plugin/SectionTextarea.vue

@@ -2,7 +2,7 @@
   <div class="row m-0 p-0 align-items-center">
     <div class="col-sm-12 col-md-6 p-0">
       <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
-      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
+      ><span class="font-weight-bold text-primary">{{ t('pagebuilder.widget_textarea') }}</span>
     </div>
 
     <div class="col-sm-12 col-md-6 p-0 text-end">
@@ -13,7 +13,7 @@
         no-enforce-focus
         class_other="modal-xl"
         v-model="modalBox"
-        :title="langs.label"
+        :title="t('pagebuilder.widget_textarea')"
         v-on:hide="onCloseModal"
       >
         <div style="min-height: 400px">
@@ -24,14 +24,14 @@
                 rows="12"
                 class="form-control"
                 v-model="text"
-                :init="vtinymce"
+                :init="{ ...vtinymce, language: locale }"
               />
             </div>
           </div>
         </div>
         <div class="d-flex">
           <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
-            {{ langs.saveclose }}
+            {{ t('pagebuilder.save') }}
           </button>
         </div>
       </b-modal>
@@ -48,6 +48,7 @@ import tinymceConfig from '../tinymce/config.js'
 
 import Editor from '@tinymce/tinymce-vue'
 import { nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 export default {
   emits: ['update:modelValue'],
   components: {
@@ -58,6 +59,10 @@ export default {
   props: {
     modelValue: Object
   },
+  setup() {
+    const { t, locale } = useI18n()
+    return { t, locale }
+  },
   mounted: function () {
     let vm = this
     this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name