@bagelink/vue 1.2.79 → 1.2.81

package/dist/index.cjs

@@ -554,7 +554,7 @@ const _hoisted_2$K = ["data-date", "onClick"];
 const _hoisted_3$E = { class: "event-content" };
 const _hoisted_4$r = { class: "event-time" };
 const _hoisted_5$q = { class: "event-details" };
-const _hoisted_6$n = { class: "event-title" };
+const _hoisted_6$m = { class: "event-title" };
 const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "AgendaView",
   props: {
@@ -677,7 +677,7 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_3$E, [
                 vue.createElementVNode("div", _hoisted_4$r, vue.toDisplayString(vue.unref(formatDate)(event.start_time, { fmt: "HH:mm" })), 1),
                 vue.createElementVNode("div", _hoisted_5$q, [
-                  vue.createElementVNode("div", _hoisted_6$n, vue.toDisplayString(event.title), 1),
+                  vue.createElementVNode("div", _hoisted_6$m, vue.toDisplayString(event.title), 1),
                   vue.createElementVNode("div", {
                     class: vue.normalizeClass(["event-day", { today: event.isToday }])
                   }, vue.toDisplayString(event.dayLabel), 3)
@@ -696,7 +696,7 @@ const _hoisted_2$J = { class: "border-bottom me-1 txt-center p-05 dayGrid" };
 const _hoisted_3$D = { class: "overflow h-100p pe-05" };
 const _hoisted_4$q = { class: "time-column" };
 const _hoisted_5$p = { class: "events-column" };
-const _hoisted_6$m = ["onClick"];
+const _hoisted_6$l = ["onClick"];
 const _hoisted_7$h = { class: "event-content" };
 const _hoisted_8$b = { class: "white-space ellipsis-1" };
 const _hoisted_9$7 = { class: "event-time opacity-8" };
@@ -880,7 +880,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
                     vue.createElementVNode("div", _hoisted_8$b, vue.toDisplayString(event.title), 1),
                     vue.createElementVNode("div", _hoisted_9$7, vue.toDisplayString(vue.unref(formatDate)(new Date(event.start_time), { fmt: "HH:mm" })) + " - " + vue.toDisplayString(vue.unref(formatDate)(new Date(event.end_time), { fmt: "HH:mm" })), 1)
                   ])
-                ], 12, _hoisted_6$m);
+                ], 12, _hoisted_6$l);
               }), 128))
             ]),
             dragState.value.isDragging && dragState.value.start && dragState.value.end ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -908,7 +908,7 @@ const _hoisted_2$I = { class: "month-header" };
 const _hoisted_3$C = { class: "month-grid" };
 const _hoisted_4$p = { class: "day-number" };
 const _hoisted_5$o = { class: "day-events" };
-const _hoisted_6$l = {
+const _hoisted_6$k = {
   key: 0,
   class: "event-dot"
 };
@@ -1011,7 +1011,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_4$p, vue.toDisplayString(vue.unref(fmtDate)(day.date, { fmt: "DD" })), 1),
               vue.createElementVNode("div", _hoisted_5$o, [
                 isMobile.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  day.events.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$l)) : vue.createCommentVNode("", true)
+                  day.events.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$k)) : vue.createCommentVNode("", true)
                 ], 64)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(day.events, (event) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: event.id,
@@ -1037,7 +1037,7 @@ const _hoisted_2$H = { class: "overflow h-100p pe-05" };
 const _hoisted_3$B = ["onMousedown"];
 const _hoisted_4$o = ["onClick"];
 const _hoisted_5$n = { class: "overflow-hidden color-white p-025 txt12 h-100p" };
-const _hoisted_6$k = { class: "white-space ellipsis-1" };
+const _hoisted_6$j = { class: "white-space ellipsis-1" };
 const _hoisted_7$f = { class: "txt10 opacity-8 user-select-none" };
 const _hoisted_8$9 = { class: "color-primary txt-12 p-025" };
 const slotHeight = 60;
@@ -1368,7 +1368,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
                     onClick: vue.withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
                   }, [
                     vue.createElementVNode("div", _hoisted_5$n, [
-                      vue.createElementVNode("div", _hoisted_6$k, vue.toDisplayString(event.title), 1),
+                      vue.createElementVNode("div", _hoisted_6$j, vue.toDisplayString(event.title), 1),
                       vue.createElementVNode("div", _hoisted_7$f, vue.toDisplayString(vue.unref(formatDate)(event.start_time, { fmt: "HH:mm" })) + " - " + vue.toDisplayString(vue.unref(formatDate)(event.end_time, { fmt: "HH:mm" })), 1)
                     ])
                   ], 44, _hoisted_4$o);
@@ -7927,7 +7927,7 @@ const _hoisted_2$1$1 = ["width", "height", "viewBox"];
 const _hoisted_3$y = { class: "layer-rectangles" };
 const _hoisted_4$m = ["transform", "onMouseover"];
 const _hoisted_5$m = ["width", "height"];
-const _hoisted_6$j = {
+const _hoisted_6$i = {
   x: 0 + 10,
   y: 0 + 20,
   "font-size": `15px`,
@@ -7970,7 +7970,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 }, () => [
                   vue.createElementVNode(
                     "text",
-                    _hoisted_6$j,
+                    _hoisted_6$i,
                     vue.toDisplayString(r2.data.name),
                     1
                     /* TEXT */
@@ -9533,7 +9533,7 @@ const _hoisted_2$C = {
 const _hoisted_3$x = { class: "infinite-wrapper" };
 const _hoisted_4$l = { class: "row first-row" };
 const _hoisted_5$l = { key: 0 };
-const _hoisted_6$i = ["onClick"];
+const _hoisted_6$h = ["onClick"];
 const _hoisted_7$d = { class: "flex" };
 const _hoisted_8$8 = ["onClick"];
 const _hoisted_9$5 = { key: 0 };
@@ -9695,7 +9695,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_6$i);
+                ], 8, _hoisted_6$h);
               }), 128))
             ]),
             vue.createElementVNode("tbody", null, [
@@ -13396,17 +13396,19 @@ function getFallbackSchema(data2, columns) {
 function sleep(ms = 100) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
-function appendScript(src, options) {
-  return new Promise((resolve, reject3) => {
-    if (options == null ? void 0 : options.id) {
-      if (document.getElementById(options.id)) {
-        resolve();
-        return;
-      }
-    } else if (document.querySelector(`script[src="${src}"]`)) {
-      resolve();
-      return;
-    }
+const scriptsLoading = /* @__PURE__ */ new Map();
+async function appendScript(src, options) {
+  const scriptId = (options == null ? void 0 : options.id) || src;
+  await sleep(1);
+  if (scriptsLoading.has(scriptId)) {
+    return scriptsLoading.get(scriptId);
+  }
+  if ((options == null ? void 0 : options.id) && document.getElementById(options.id)) {
+    return Promise.resolve();
+  } else if (document.querySelector(`script[src="${src}"]`)) {
+    return Promise.resolve();
+  }
+  const loadingPromise = new Promise((resolve, reject3) => {
     const script2 = document.createElement("script");
     script2.src = src;
     if (options == null ? void 0 : options.id) {
@@ -13414,10 +13416,16 @@ function appendScript(src, options) {
     }
     script2.onload = () => {
       resolve();
+      scriptsLoading.delete(scriptId);
+    };
+    script2.onerror = (err) => {
+      reject3(err);
+      scriptsLoading.delete(scriptId);
     };
-    script2.onerror = reject3;
     document.head.append(script2);
   });
+  scriptsLoading.set(scriptId, loadingPromise);
+  return loadingPromise;
 }
 function appendStyle(src) {
   return new Promise((resolve, reject3) => {
@@ -13549,6 +13557,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return ((_a = form.value) == null ? void 0 : _a.reportValidity()) ?? false;
     };
+    const checkValidity = () => {
+      var _a;
+      return ((_a = form.value) == null ? void 0 : _a.checkValidity()) ?? false;
+    };
     const formError = vue.ref();
     async function handleSubmit() {
       var _a;
@@ -13588,7 +13600,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
         updateFormData(input.name, value);
       }
     }
-    __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema });
+    __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkValidity });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         formState.value !== "success" || !_ctx.$slots.success ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -13651,7 +13663,7 @@ const _hoisted_5$k = {
   key: 0,
   class: "bgl-step-label"
 };
-const _hoisted_6$h = { class: "bgl-form-wrapper" };
+const _hoisted_6$g = { class: "bgl-form-wrapper" };
 const _hoisted_7$c = { class: "bgl-step-controls" };
 const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   __name: "BglMultiStepForm",
@@ -13673,6 +13685,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
   }),
   emits: /* @__PURE__ */ vue.mergeModels(["submit", "stepChange"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
     const props2 = __props;
     const emits = __emit;
     const formRef = vue.ref();
@@ -13734,8 +13747,6 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
       const actualIndex = schemaIndexMap.value[currentStep.value];
       return [computedSchema.value[actualIndex]];
     });
-    const isStepping = vue.ref(false);
-    let isSteppingTO;
     const slideDirection = vue.ref(props2.rtl ? "right" : "left");
     vue.watch(
       () => currentStep.value,
@@ -13746,9 +13757,6 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
           slideDirection.value = props2.direction;
         }
         previousStep.value = oldStep;
-        clearTimeout(isSteppingTO);
-        isStepping.value = true;
-        isSteppingTO = setTimeout(() => isStepping.value = false, 200);
         emits("stepChange", {
           newStep,
           oldStep,
@@ -13757,15 +13765,24 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
         });
       }
     );
-    const canDoNext = vue.computed(() => currentStep.value < numberOfSteps.value - 1);
+    const isLastStep = vue.computed(() => currentStep.value === numberOfSteps.value - 1);
     const isStepValidated = vue.computed(() => (stepIndex) => validatedSteps.value.includes(stepIndex));
+    const isStepValid = vue.ref(false);
+    async function checkCurrentStepValidity() {
+      var _a2;
+      await vue.nextTick();
+      if (!props2.validateOnSteps) isStepValid.value = true;
+      else isStepValid.value = ((_a2 = formRef.value) == null ? void 0 : _a2.checkValidity()) ?? false;
+    }
     function prevStep() {
       if (currentStep.value > 0) currentStep.value--;
     }
     const formContainer = vue.ref();
-    function nextStep() {
+    async function nextStep() {
       if (props2.validateOnSteps && reportValidity() === false) return;
-      if (canDoNext.value) currentStep.value++;
+      if (!isLastStep.value) currentStep.value++;
+      await sleep(400);
+      checkCurrentStepValidity();
     }
     function goToStep(stepIndex) {
       if (stepIndex < currentStep.value || validatedSteps.value.includes(stepIndex)) {
@@ -13790,6 +13807,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
       currentStep.value = 0;
     }
     vue.watch(() => formData.value, () => {
+      checkCurrentStepValidity();
       if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
         currentStep.value = 0;
       }
@@ -13797,14 +13815,16 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     __expose({
       submit: handleSubmit,
       validateForm: reportValidity,
+      checkValidity: (_a = formRef.value) == null ? void 0 : _a.checkValidity,
       isDirty: vue.computed(() => {
-        var _a;
-        return (_a = formRef.value) == null ? void 0 : _a.isDirty;
+        var _a2;
+        return (_a2 = formRef.value) == null ? void 0 : _a2.isDirty;
       }),
       reset,
       goToStep,
       currentStep: vue.computed(() => currentStep.value),
       totalSteps: vue.computed(() => numberOfSteps.value),
+      isStepValid,
       nextStep,
       prevStep
     });
@@ -13837,13 +13857,13 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
             ])
           ], true)
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_6$h, [
+        vue.createElementVNode("div", _hoisted_6$g, [
           vue.createVNode(vue.Transition, {
             name: slideDirection.value === "right" ? "slide-right" : "slide-left",
             mode: "out-in"
           }, {
             default: vue.withCtx(() => [
-              !isStepping.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              (vue.openBlock(), vue.createElementBlock("div", {
                 key: currentStep.value,
                 ref_key: "formContainer",
                 ref: formContainer,
@@ -13871,7 +13891,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
                     key: "1"
                   } : void 0
                 ]), 1040, ["modelValue", "schema"])
-              ])) : vue.createCommentVNode("", true)
+              ]))
             ]),
             _: 3
           }, 8, ["name"]),
@@ -13882,19 +13902,21 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
               submit: handleSubmit,
               currentStep: currentStep.value,
               totalSteps: numberOfSteps.value,
-              canDoNext: canDoNext.value
+              isLastStep: isLastStep.value,
+              isStepValid: isStepValid.value
             })), () => [
               currentStep.value !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: 0,
                 color: "gray",
                 icon: "arrow_back",
-                click: "prevStep"
+                onClick: prevStep
               })) : vue.createCommentVNode("", true),
-              canDoNext.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+              !isLastStep.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: 1,
                 icon: "arrow_forward",
+                disabled: props2.validateOnSteps && !isStepValid.value,
                 onClick: nextStep
-              })) : (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
+              }, null, 8, ["disabled"])) : (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                 key: 2,
                 value: "Submit",
                 onClick: handleSubmit
@@ -13906,7 +13928,7 @@ const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const BglMultiStepForm = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-53bb3be3"]]);
+const BglMultiStepForm = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-9c0b618c"]]);
 const _hoisted_1$M = {
   key: 0,
   class: "label mb-05"
@@ -13924,7 +13946,7 @@ const _hoisted_5$j = {
   key: 0,
   class: "minimizedText txt14 p-025 opacity-7"
 };
-const _hoisted_6$g = { class: "bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column" };
+const _hoisted_6$f = { class: "bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column" };
 const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
   __name: "FieldArray",
   props: {
@@ -14058,7 +14080,7 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                   schema: resolvedSchemaData.value,
                   "onUpdate:modelValue": (val) => updateItem(i2, val)
                 }, null, 8, ["model-value", "schema", "onUpdate:modelValue"])),
-                vue.createElementVNode("div", _hoisted_6$g, [
+                vue.createElementVNode("div", _hoisted_6$f, [
                   showMinimizeButton.value ? (vue.openBlock(), vue.createBlock(vue.unref(Btn), {
                     key: 0,
                     class: "block rotate-180 txt10 opacity-7 p-025",
@@ -14172,55 +14194,54 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-722373de"]]);
-const _hoisted_1$J = { class: "mb-05" };
-const _hoisted_2$x = {
+const _hoisted_1$J = {
   key: 0,
-  class: "label txt-start"
+  class: "label"
 };
+const _hoisted_2$x = { class: "editor-content-papa relative" };
 const _hoisted_3$t = {
-  key: 1,
-  class: "code-editor-wrap grid rounded p-1 overflow hm-300px ltr txt-start relative h-100p"
+  class: "code-display",
+  wrap: ""
 };
-const _hoisted_4$i = { class: "overflow-hidden absolute inset-0 p-0 m-0 h-100 codeText" };
-const _hoisted_5$i = ["innerHTML"];
-const _hoisted_6$f = ["onKeydown"];
+const _hoisted_4$i = ["innerHTML"];
+const _hoisted_5$i = ["value"];
 const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
   __name: "Index",
   props: {
-    language: {},
+    language: { default: "html" },
     readonly: { type: Boolean, default: false },
     modelValue: { default: "" },
-    autodetect: { type: Boolean },
+    autodetect: { type: Boolean, default: true },
     ignoreIllegals: { type: Boolean, default: true },
-    label: {},
-    height: { default: "300px" }
+    label: { default: "" },
+    height: { default: "240px" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const props2 = __props;
     const emit2 = __emit;
-    let hljs = vue.ref(null);
-    let elHeight = vue.ref(__props.height);
-    let code = vue.ref("");
-    const textarea = vue.ref();
-    let loaded = vue.ref(false);
-    const cannotDetectLanguage = vue.computed(() => {
-      var _a;
-      const lang = __props.language || "";
-      return !(__props.autodetect ?? !lang) && !((_a = hljs.value) == null ? void 0 : _a.getLanguage(lang));
-    });
-    const className = vue.computed(() => {
-      if (cannotDetectLanguage.value) return "";
-      return `hljs ${__props.language || ""}`;
-    });
-    const highlightedCode = vue.computed(() => {
-      var _a, _b;
-      if (cannotDetectLanguage.value) {
-        console.warn(`The language "${__props.language}" you specified could not be found.`);
+    const code = vue.ref(props2.modelValue || "");
+    const editorRef = vue.ref();
+    const loaded = vue.ref(false);
+    const hljs = vue.ref(null);
+    const maxHeight = vue.computed(() => {
+      const h2 = props2.height ?? "240px";
+      return h2.match(/^\d+$/) ? `${h2}px` : h2;
+    });
+    const formattedCode = vue.computed(() => {
+      if (!hljs.value) return escapeHtml(code.value);
+      try {
+        const lang = props2.language || "";
+        if (lang && !props2.autodetect && !hljs.value.getLanguage(lang)) {
+          console.warn(`The language "${lang}" is not available.`);
+          return escapeHtml(code.value);
+        }
+        const result2 = props2.autodetect ? hljs.value.highlightAuto(code.value) : hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props2.ignoreIllegals });
+        return result2.value || escapeHtml(code.value);
+      } catch (error) {
+        console.error("Highlighting error:", error);
         return escapeHtml(code.value);
       }
-      const lang = __props.language || "";
-      const result2 = __props.autodetect ? (_a = hljs.value) == null ? void 0 : _a.highlightAuto(code.value) : (_b = hljs.value) == null ? void 0 : _b.highlight(code.value, { language: lang, ignoreIllegals: __props.ignoreIllegals });
-      return (result2 == null ? void 0 : result2.value) || "";
     });
     function escapeHtml(unsafe) {
       return unsafe.replace(/[&<>"']/g, (m2) => {
@@ -14234,75 +14255,77 @@ const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
         return replacements[m2] || "";
       });
     }
+    function handleInput(e) {
+      const target = e.target;
+      code.value = target.value;
+      emit2("update:modelValue", code.value);
+    }
     function handleTab(event) {
+      if (event.key !== "Tab") return;
+      event.preventDefault();
       const target = event.target;
       const start = target.selectionStart;
-      const tab = "  ";
-      code.value = code.value.slice(0, start) + tab + code.value.slice(start);
-      vue.nextTick(() => {
-        target.selectionStart = target.selectionEnd = start + tab.length;
-      });
-    }
-    function adjustHeight() {
-      var _a;
-      if (((_a = textarea.value) == null ? void 0 : _a.scrollHeight) && textarea.value.scrollHeight > Number.parseInt(elHeight.value)) {
-        elHeight.value = `${textarea.value.scrollHeight}px`;
-      }
+      const end = target.selectionEnd;
+      const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`;
+      code.value = newValue;
+      emit2("update:modelValue", code.value);
+      setTimeout(() => {
+        target.selectionStart = target.selectionEnd = start + 2;
+      }, 0);
     }
     vue.onMounted(async () => {
-      await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
-      await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
-      if (window.hljs) {
-        hljs.value = window.hljs;
-        loaded.value = true;
-      } else {
-        console.error("Highlight.js failed to load.");
+      try {
+        await appendScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js", { id: "hljs-cdn" });
+        await appendStyle("https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css");
+        if (window.hljs) {
+          hljs.value = window.hljs;
+          loaded.value = true;
+        } else {
+          console.error("Failed to load highlight.js");
+        }
+      } catch (error) {
+        console.error("Error loading highlight.js:", error);
       }
     });
-    vue.watch(() => __props.modelValue, (newVal) => {
-      adjustHeight();
-      if (newVal !== code.value) {
+    vue.watch(() => props2.modelValue, (newVal) => {
+      if (newVal !== void 0 && newVal !== code.value) {
         code.value = newVal;
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
-        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$x, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
-        vue.unref(loaded) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, [
-          vue.createElementVNode("div", {
-            class: "relative block h-100",
-            style: vue.normalizeStyle({ height: `calc(${vue.unref(elHeight)} - 2rem)` })
-          }, [
-            vue.createElementVNode("pre", _hoisted_4$i, [
-              _cache[2] || (_cache[2] = vue.createTextVNode("					")),
-              vue.createElementVNode("code", {
-                class: vue.normalizeClass(["absolute inset-0", className.value]),
-                innerHTML: highlightedCode.value
-              }, null, 10, _hoisted_5$i),
-              _cache[3] || (_cache[3] = vue.createTextVNode("\n				"))
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "code-editor-container ltr",
+        style: vue.normalizeStyle({ maxHeight: maxHeight.value })
+      }, [
+        _ctx.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$J, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
+        loaded.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: "code-editor-grandpa"
+        }, [
+          vue.createElementVNode("div", _hoisted_2$x, [
+            vue.createElementVNode("pre", _hoisted_3$t, [
+              vue.createElementVNode("code", { innerHTML: formattedCode.value }, null, 8, _hoisted_4$i)
             ]),
-            !_ctx.readonly ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
+            !_ctx.readonly ? (vue.openBlock(), vue.createElementBlock("textarea", {
               key: 0,
-              ref_key: "textarea",
-              ref: textarea,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(code) ? code.value = $event : code = $event),
-              class: "code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start",
+              value: code.value,
+              class: "code-input",
               spellcheck: "false",
-              placeholder: "Write your code here",
-              "aria-label": "Code Editor",
-              "data-gramm": "false",
-              onKeydown: vue.withKeys(vue.withModifiers(handleTab, ["prevent"]), ["tab"]),
-              onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", vue.unref(code)))
-            }, null, 40, _hoisted_6$f)), [
-              [vue.vModelText, vue.unref(code)]
-            ]) : vue.createCommentVNode("", true)
-          ], 4)
-        ])) : vue.createCommentVNode("", true)
-      ]);
+              autocomplete: "off",
+              autocorrect: "off",
+              autocapitalize: "off",
+              onInput: handleInput,
+              onKeydown: handleTab
+            }, null, 40, _hoisted_5$i)) : vue.createCommentVNode("", true)
+          ])
+        ], 512)) : vue.createCommentVNode("", true)
+      ], 4);
     };
   }
 });
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-13335b34"]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-6ab9613f"]]);
 const _hoisted_1$I = ["title"];
 const _hoisted_2$w = { class: "flex bg-input rounded px-025 colorInputPickWrap" };
 const _hoisted_3$s = ["id", "placeholder", "required"];
@@ -18797,6 +18820,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     const editor = useEditor();
     const isInitializing = vue.ref(false);
     const hasInitialized = vue.ref(false);
+    editor.state.content = props2.modelValue;
     if (props2.debug) {
       editor.initDebugger();
     }
@@ -18844,6 +18868,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
         doc.designMode = "on";
         doc.body.contentEditable = "true";
         doc.body.dir = hasRTL.value ? "rtl" : "ltr";
+        editor.state.content = doc.body.innerHTML;
         editor.init(doc);
         useEditorKeyboard(doc, commands);
         if (!doc.body.firstElementChild) {
@@ -18851,6 +18876,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
           p2.dir = doc.body.dir;
           p2.innerHTML = "<br>";
           doc.body.appendChild(p2);
+          editor.state.content = doc.body.innerHTML;
         } else {
           const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
           const textNodes = [];
@@ -18871,6 +18897,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
               doc.body.removeChild(textNode);
             }
           });
+          editor.state.content = doc.body.innerHTML;
         }
         doc.body.focus();
         hasInitialized.value = true;
@@ -18932,8 +18959,8 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
                 _cache[1] || (_cache[1] = ($event) => vue.unref(editor).updateState.content("html"))
               ],
               language: "html",
-              class: "code-editor"
-            }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true)
+              height: vue.unref(editor).state.isFullscreen ? "calc(100vh - 4rem)" : "250px"
+            }, null, 8, ["modelValue", "height"])) : vue.createCommentVNode("", true)
           ], 2),
           _ctx.debug ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$h, [
             _cache[6] || (_cache[6] = vue.createElementVNode("p", { class: "text12 txt-gray mb-0 p-0" }, " Debug ", -1)),
@@ -18979,7 +19006,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-30bcda4c"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-2782b5dd"]]);
 const _hoisted_1$t = { key: 0 };
 const _hoisted_2$j = { class: "flex gap-05" };
 const _hoisted_3$g = ["disabled"];