fix: richeditor load

Author: didoda

resources/js/app/components/form/field-textarea.vue

@@ -3,11 +3,10 @@
         :id="id"
         :name="name"
         :data-ref="reference"
-        :data-config="config"
-        :data-toolbar="toolbar"
+        :data-loaded="loaded"
         class="field-textarea"
         v-model="v"
-        v-richeditor
+        v-richeditor="richeditorConfig"
         @change="change($event.target.value)"
         v-if="loaded"
     />
@@ -39,21 +38,17 @@ export default {
     },
     data() {
         return {
-            config: null,
+            richeditorConfig: {},
             loaded: false,
-            toolbar: null,
             v: null,
         };
     },
     mounted() {
         this.$nextTick(() => {
-            const map = BEDITA?.richeditorByPropertyConfig?.[this.field] || null;
-            if (map) {
-                map.config = map.config || {};
-                map.toolbar = map.toolbar || {};
+            this.richeditorConfig = {
+                config: BEDITA?.richeditorByPropertyConfig?.[this.field]?.config || {},
+                toolbar: BEDITA?.richeditorByPropertyConfig?.[this.field]?.toolbar || null
             }
-            this.config = JSON.stringify(map?.config) || null;
-            this.toolbar = JSON.stringify(map?.toolbar) || null;
             this.v = this.value;
             this.loaded = true;
             this.$forceUpdate();

resources/js/app/directives/richeditor.js

@@ -79,16 +79,18 @@ export default {
             async inserted(element, binding) {
                 let changing = false;
                 let toolbar = DEFAULT_TOOLBAR;
-                if (element.dataset?.toolbar?.length > 0 || binding?.expression) {
-                    let exp = element.dataset?.toolbar?.length > 0 ? JSON.parse(element.dataset.toolbar) : JSON.parse(binding.expression);
+                if (binding?.value?.toolbar) {
+                    toolbar = binding.value.toolbar.join(' ');
+                } else if (binding?.expression) {
+                    let exp = JSON.parse(binding.expression);
                     toolbar = exp ? exp.join(' ') : toolbar;
                 }
                 if (!binding.modifiers?.placeholders) {
                     toolbar = toolbar.replace(/\bplaceholders\b/, '');
                 }
                 const sizes = {};
-                if (element.dataset?.config?.length > 0) {
-                    const c = JSON.parse(element.dataset.config);
+                if (binding?.value?.config) {
+                    const c = binding.value.config;
                     if (c?.height) {
                         sizes.height = c.height;
                     }