@bagelink/vue 1.2.79 → 1.2.81

package/dist/index.mjs

@@ -552,7 +552,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__ */ defineComponent({
   __name: "AgendaView",
   props: {
@@ -675,7 +675,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_3$E, [
                 createElementVNode("div", _hoisted_4$r, toDisplayString(unref(formatDate)(event.start_time, { fmt: "HH:mm" })), 1),
                 createElementVNode("div", _hoisted_5$q, [
-                  createElementVNode("div", _hoisted_6$n, toDisplayString(event.title), 1),
+                  createElementVNode("div", _hoisted_6$m, toDisplayString(event.title), 1),
                   createElementVNode("div", {
                     class: normalizeClass(["event-day", { today: event.isToday }])
                   }, toDisplayString(event.dayLabel), 3)
@@ -694,7 +694,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" };
@@ -878,7 +878,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
                     createElementVNode("div", _hoisted_8$b, toDisplayString(event.title), 1),
                     createElementVNode("div", _hoisted_9$7, toDisplayString(unref(formatDate)(new Date(event.start_time), { fmt: "HH:mm" })) + " - " + toDisplayString(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 ? (openBlock(), createElementBlock("div", {
@@ -906,7 +906,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"
 };
@@ -1009,7 +1009,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_4$p, toDisplayString(unref(fmtDate)(day.date, { fmt: "DD" })), 1),
               createElementVNode("div", _hoisted_5$o, [
                 isMobile.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  day.events.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6$l)) : createCommentVNode("", true)
+                  day.events.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6$k)) : createCommentVNode("", true)
                 ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(day.events, (event) => {
                   return openBlock(), createElementBlock("div", {
                     key: event.id,
@@ -1035,7 +1035,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;
@@ -1366,7 +1366,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
                     onClick: withModifiers(($event) => handleEventSelection(event, $event), ["stop"])
                   }, [
                     createElementVNode("div", _hoisted_5$n, [
-                      createElementVNode("div", _hoisted_6$k, toDisplayString(event.title), 1),
+                      createElementVNode("div", _hoisted_6$j, toDisplayString(event.title), 1),
                       createElementVNode("div", _hoisted_7$f, toDisplayString(unref(formatDate)(event.start_time, { fmt: "HH:mm" })) + " - " + toDisplayString(unref(formatDate)(event.end_time, { fmt: "HH:mm" })), 1)
                     ])
                   ], 44, _hoisted_4$o);
@@ -7925,7 +7925,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`,
@@ -7968,7 +7968,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 }, () => [
                   createElementVNode(
                     "text",
-                    _hoisted_6$j,
+                    _hoisted_6$i,
                     toDisplayString(r2.data.name),
                     1
                     /* TEXT */
@@ -9531,7 +9531,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 };
@@ -9693,7 +9693,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
                       }, null, 8, ["class"])
                     ], 2)
                   ])
-                ], 8, _hoisted_6$i);
+                ], 8, _hoisted_6$h);
               }), 128))
             ]),
             createElementVNode("tbody", null, [
@@ -13394,17 +13394,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) {
@@ -13412,10 +13414,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) => {
@@ -13547,6 +13555,10 @@ const _sfc_main$V = /* @__PURE__ */ 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 = ref();
     async function handleSubmit() {
       var _a;
@@ -13586,7 +13598,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
         updateFormData(input.name, value);
       }
     }
-    __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema });
+    __expose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkValidity });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         formState.value !== "success" || !_ctx.$slots.success ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
@@ -13649,7 +13661,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__ */ defineComponent({
   __name: "BglMultiStepForm",
@@ -13671,6 +13683,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["submit", "stepChange"], ["update:modelValue"]),
   setup(__props, { expose: __expose, emit: __emit }) {
+    var _a;
     const props2 = __props;
     const emits = __emit;
     const formRef = ref();
@@ -13732,8 +13745,6 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       const actualIndex = schemaIndexMap.value[currentStep.value];
       return [computedSchema.value[actualIndex]];
     });
-    const isStepping = ref(false);
-    let isSteppingTO;
     const slideDirection = ref(props2.rtl ? "right" : "left");
     watch(
       () => currentStep.value,
@@ -13744,9 +13755,6 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           slideDirection.value = props2.direction;
         }
         previousStep.value = oldStep;
-        clearTimeout(isSteppingTO);
-        isStepping.value = true;
-        isSteppingTO = setTimeout(() => isStepping.value = false, 200);
         emits("stepChange", {
           newStep,
           oldStep,
@@ -13755,15 +13763,24 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         });
       }
     );
-    const canDoNext = computed(() => currentStep.value < numberOfSteps.value - 1);
+    const isLastStep = computed(() => currentStep.value === numberOfSteps.value - 1);
     const isStepValidated = computed(() => (stepIndex) => validatedSteps.value.includes(stepIndex));
+    const isStepValid = ref(false);
+    async function checkCurrentStepValidity() {
+      var _a2;
+      await 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 = 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)) {
@@ -13788,6 +13805,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
       currentStep.value = 0;
     }
     watch(() => formData.value, () => {
+      checkCurrentStepValidity();
       if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
         currentStep.value = 0;
       }
@@ -13795,14 +13813,16 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     __expose({
       submit: handleSubmit,
       validateForm: reportValidity,
+      checkValidity: (_a = formRef.value) == null ? void 0 : _a.checkValidity,
       isDirty: 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: computed(() => currentStep.value),
       totalSteps: computed(() => numberOfSteps.value),
+      isStepValid,
       nextStep,
       prevStep
     });
@@ -13835,13 +13855,13 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             ])
           ], true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_6$h, [
+        createElementVNode("div", _hoisted_6$g, [
           createVNode(Transition, {
             name: slideDirection.value === "right" ? "slide-right" : "slide-left",
             mode: "out-in"
           }, {
             default: withCtx(() => [
-              !isStepping.value ? (openBlock(), createElementBlock("div", {
+              (openBlock(), createElementBlock("div", {
                 key: currentStep.value,
                 ref_key: "formContainer",
                 ref: formContainer,
@@ -13869,7 +13889,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                     key: "1"
                   } : void 0
                 ]), 1040, ["modelValue", "schema"])
-              ])) : createCommentVNode("", true)
+              ]))
             ]),
             _: 3
           }, 8, ["name"]),
@@ -13880,19 +13900,21 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
               submit: handleSubmit,
               currentStep: currentStep.value,
               totalSteps: numberOfSteps.value,
-              canDoNext: canDoNext.value
+              isLastStep: isLastStep.value,
+              isStepValid: isStepValid.value
             })), () => [
               currentStep.value !== 0 ? (openBlock(), createBlock(unref(Btn), {
                 key: 0,
                 color: "gray",
                 icon: "arrow_back",
-                click: "prevStep"
+                onClick: prevStep
               })) : createCommentVNode("", true),
-              canDoNext.value ? (openBlock(), createBlock(unref(Btn), {
+              !isLastStep.value ? (openBlock(), createBlock(unref(Btn), {
                 key: 1,
                 icon: "arrow_forward",
+                disabled: props2.validateOnSteps && !isStepValid.value,
                 onClick: nextStep
-              })) : (openBlock(), createBlock(unref(Btn), {
+              }, null, 8, ["disabled"])) : (openBlock(), createBlock(unref(Btn), {
                 key: 2,
                 value: "Submit",
                 onClick: handleSubmit
@@ -13904,7 +13926,7 @@ const _sfc_main$U = /* @__PURE__ */ 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"
@@ -13922,7 +13944,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__ */ defineComponent({
   __name: "FieldArray",
   props: {
@@ -14056,7 +14078,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
                   schema: resolvedSchemaData.value,
                   "onUpdate:modelValue": (val) => updateItem(i2, val)
                 }, null, 8, ["model-value", "schema", "onUpdate:modelValue"])),
-                createElementVNode("div", _hoisted_6$g, [
+                createElementVNode("div", _hoisted_6$f, [
                   showMinimizeButton.value ? (openBlock(), createBlock(unref(Btn), {
                     key: 0,
                     class: "block rotate-180 txt10 opacity-7 p-025",
@@ -14170,55 +14192,54 @@ const _sfc_main$R = /* @__PURE__ */ 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__ */ 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 = ref(null);
-    let elHeight = ref(__props.height);
-    let code = ref("");
-    const textarea = ref();
-    let loaded = ref(false);
-    const cannotDetectLanguage = computed(() => {
-      var _a;
-      const lang = __props.language || "";
-      return !(__props.autodetect ?? !lang) && !((_a = hljs.value) == null ? void 0 : _a.getLanguage(lang));
-    });
-    const className = computed(() => {
-      if (cannotDetectLanguage.value) return "";
-      return `hljs ${__props.language || ""}`;
-    });
-    const highlightedCode = computed(() => {
-      var _a, _b;
-      if (cannotDetectLanguage.value) {
-        console.warn(`The language "${__props.language}" you specified could not be found.`);
+    const code = ref(props2.modelValue || "");
+    const editorRef = ref();
+    const loaded = ref(false);
+    const hljs = ref(null);
+    const maxHeight = computed(() => {
+      const h2 = props2.height ?? "240px";
+      return h2.match(/^\d+$/) ? `${h2}px` : h2;
+    });
+    const formattedCode = 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) => {
@@ -14232,75 +14253,77 @@ const _sfc_main$Q = /* @__PURE__ */ 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);
-      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);
     }
     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);
       }
     });
-    watch(() => __props.modelValue, (newVal) => {
-      adjustHeight();
-      if (newVal !== code.value) {
+    watch(() => props2.modelValue, (newVal) => {
+      if (newVal !== void 0 && newVal !== code.value) {
         code.value = newVal;
       }
     }, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$J, [
-        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_2$x, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
-        unref(loaded) ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-          createElementVNode("div", {
-            class: "relative block h-100",
-            style: normalizeStyle({ height: `calc(${unref(elHeight)} - 2rem)` })
-          }, [
-            createElementVNode("pre", _hoisted_4$i, [
-              _cache[2] || (_cache[2] = createTextVNode("					")),
-              createElementVNode("code", {
-                class: normalizeClass(["absolute inset-0", className.value]),
-                innerHTML: highlightedCode.value
-              }, null, 10, _hoisted_5$i),
-              _cache[3] || (_cache[3] = createTextVNode("\n				"))
+      return openBlock(), createElementBlock("div", {
+        class: "code-editor-container ltr",
+        style: normalizeStyle({ maxHeight: maxHeight.value })
+      }, [
+        _ctx.label ? (openBlock(), createElementBlock("label", _hoisted_1$J, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
+        loaded.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: "code-editor-grandpa"
+        }, [
+          createElementVNode("div", _hoisted_2$x, [
+            createElementVNode("pre", _hoisted_3$t, [
+              createElementVNode("code", { innerHTML: formattedCode.value }, null, 8, _hoisted_4$i)
             ]),
-            !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("textarea", {
+            !_ctx.readonly ? (openBlock(), createElementBlock("textarea", {
               key: 0,
-              ref_key: "textarea",
-              ref: textarea,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => 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: withKeys(withModifiers(handleTab, ["prevent"]), ["tab"]),
-              onInput: _cache[1] || (_cache[1] = ($event) => emit2("update:modelValue", unref(code)))
-            }, null, 40, _hoisted_6$f)), [
-              [vModelText, unref(code)]
-            ]) : createCommentVNode("", true)
-          ], 4)
-        ])) : createCommentVNode("", true)
-      ]);
+              autocomplete: "off",
+              autocorrect: "off",
+              autocapitalize: "off",
+              onInput: handleInput,
+              onKeydown: handleTab
+            }, null, 40, _hoisted_5$i)) : createCommentVNode("", true)
+          ])
+        ], 512)) : 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"];
@@ -18795,6 +18818,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     const editor = useEditor();
     const isInitializing = ref(false);
     const hasInitialized = ref(false);
+    editor.state.content = props2.modelValue;
     if (props2.debug) {
       editor.initDebugger();
     }
@@ -18842,6 +18866,7 @@ const _sfc_main$B = /* @__PURE__ */ 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) {
@@ -18849,6 +18874,7 @@ const _sfc_main$B = /* @__PURE__ */ 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 = [];
@@ -18869,6 +18895,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
               doc.body.removeChild(textNode);
             }
           });
+          editor.state.content = doc.body.innerHTML;
         }
         doc.body.focus();
         hasInitialized.value = true;
@@ -18930,8 +18957,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                 _cache[1] || (_cache[1] = ($event) => unref(editor).updateState.content("html"))
               ],
               language: "html",
-              class: "code-editor"
-            }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+              height: unref(editor).state.isFullscreen ? "calc(100vh - 4rem)" : "250px"
+            }, null, 8, ["modelValue", "height"])) : createCommentVNode("", true)
           ], 2),
           _ctx.debug ? (openBlock(), createElementBlock("div", _hoisted_3$h, [
             _cache[6] || (_cache[6] = createElementVNode("p", { class: "text12 txt-gray mb-0 p-0" }, " Debug ", -1)),
@@ -18977,7 +19004,7 @@ const _sfc_main$B = /* @__PURE__ */ 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"];