fix modal in textarea

src/components/MagicoModal.vue

@@ -1,30 +1,10 @@
 <template>
-  <div
+  <div :id="id" class="modal">
-    :id="id"
+    <div class="modal-dialog" :class="class_other">
-    class="modal"
+      <div v-if="modal" class="modal-content">
-  >
+        <div v-if="title" class="modal-header">
-    <div
+          <h4 class="modal-title" v-html="title" />
-      class="modal-dialog"
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
-      :class="class_other"
-    >
-      <div
-        v-if="modal"
-        class="modal-content"
-      >
-        <div
-          v-if="title"
-          class="modal-header"
-        >
-          <h4
-            class="modal-title"
-            v-html="title"
-          />
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          />
         </div>
         <div class="p-3">
           <slot />
@@ -35,50 +15,53 @@
 </template>
 
 <script>
-import { Modal } from "bootstrap";
+import { Modal } from 'bootstrap'
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 export default {
-  props: ["modelValue", "title", "class_other"],
+  props: ['modelValue', 'title', 'class_other'],
   setup(props, { emit }) {
-    const id = "modal" + Math.round(Math.random() * 100000);
+    const id = 'modal' + Math.round(Math.random() * 100000)
-    const modal = ref(null);
+    const modal = ref(null)
 
     const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-        modal.value.show();
+        modal.value.show()
       } else {
-        modal.value.hide();
+        modal.value.hide()
         if (emitEvent) {
-          emit("hide");
+          emit('hide')
         }
       }
-      emit("update:modelValue", value);
+      emit('update:modelValue', value)
-    };
+    }
 
     onMounted(() => {
-      document.body.append(document.getElementById(id));
+      document.body.append(document.getElementById(id))
-      modal.value = new Modal(document.getElementById(id));
+      modal.value = new Modal(document.getElementById(id))
-      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
+      document.getElementById(id).addEventListener('hidden.bs.modal', function () {
-        triggerModal(false);
+        triggerModal(false)
-      });
+      })
-      triggerModal(props.modelValue, false);
+      triggerModal(props.modelValue, false)
-    });
+    })
 
     onBeforeUnmount(() => {
-      document.getElementById(id).remove();
+      modal.value.hide()
-    });
+      setTimeout(function () {
+        document.getElementById(id).remove()
+      }, 500)
+    })
 
     watch(
       () => props.modelValue,
       () => {
-        triggerModal(props.modelValue);
+        triggerModal(props.modelValue)
       }
-    );
+    )
 
-    return { id, modal };
+    return { id, modal }
-  },
+  }
-};
+}
 </script>
 
 <style>

src/components/plugin/SectionTextarea.vue

@@ -1,26 +1,42 @@
 <template>
   <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
+      <span class="material-icons-outlined box-move me-2" style="cursor: move">open_with</span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
+      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
     </div>
 
     <div class="col-sm-12 col-md-6 p-0 text-end">
-            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
+      <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
-                    class="material-icons-outlined">create</i></a>
+        ><i class="material-icons-outlined">create</i></a
-            <b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
+      >
-                v-on:hide="onCloseModal">
+      <b-modal
+        no-enforce-focus
+        class_other="modal-xl"
+        v-model="modalBox"
+        :title="langs.label"
+        v-on:hide="onCloseModal"
+      >
         <div class="mb-4">
           <div class="form-group">
-                        <editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
+            <editor
+              api-key="no-api-key"
+              rows="12"
+              class="form-control"
+              v-if="modalBox"
+              v-model="text"
+              :init="vtinymce"
+            />
           </div>
         </div>
-                <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
+        <div class="d-flex">
-                        langs.saveclose
+          <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
-                }}</button></div>
+            {{ langs.saveclose }}
+          </button>
+        </div>
       </b-modal>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
-                    class="material-icons-outlined">delete</i></a>
+        ><i class="material-icons-outlined">delete</i></a
+      >
     </div>
     <div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
   </div>
@@ -35,25 +51,24 @@ export default {
   components: {
     'b-modal': MagicoModal,
 
-        'editor': Editor // <- To jest TINYMCE
+    editor: Editor // <- To jest TINYMCE
   },
   props: {
     modelValue: Object
   },
   mounted: function () {
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
-        if (this.modelValue.open) this.modalBox = true;
+    if (this.modelValue.open) this.modalBox = true
-        console.log('mounted textarea');
+    console.log('mounted textarea')
-        this.$emit('update:modelValue', this.modelValue);
+    this.$emit('update:modelValue', this.modelValue)
-
   },
   data: function () {
     return {
       langs: {
-                saveclose: "Zapisz",
+        saveclose: 'Zapisz',
-                label: "Pole tekstowe",
+        label: 'Pole tekstowe',
-                close: "Zamknij"
+        close: 'Zamknij'
       },
       height: window.innerHeight - window.innerHeight / 4,
       modalBox: false,
@@ -65,43 +80,49 @@ export default {
             this.$filechooser.open({
               chooseCallback: function (ev) {
                 console.log('filePathChosed', ev)
-                                callback(ev.publicUrl);
+                callback(ev.publicUrl)
               }
             })
           }
         }
-            }),
+      })
     }
   },
   watch: {
     modalBox: function () {
       if (this.modalBox) {
         document.addEventListener('focusin', (e) => {
-                    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
+          if (
-                        e.stopImmediatePropagation();
+            e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null
+          ) {
+            e.stopImmediatePropagation()
           }
-                });
+        })
+      }
+      console.log('focus')
     }
-            console.log('focus');
-        },
   },
   computed: {
     ctext: function () {
-            return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
+      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
     }
   },
   methods: {
     removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
+      this.$emit('itemRemoved', this.modelValue)
     },
     onCloseModal: function () {
-            this.modalBox = false;
+      setTimeout(
+        function () {
+          this.modalBox = false
           this.$emit('update:modelValue', {
             name: this.name,
-                text: this.text,
+            text: this.text
           })
+        }.bind(this),
+        200
+      )
+    }
   }
-    },
-
 }
 </script>