@bagelink/vue 0.0.1272 → 0.0.1276

package/dist/components/form/inputs/FileUpload.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAqtBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAYhD,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,WAAW,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC;AAmKF,iBAAS,MAAM,SAkBd;AA8BD,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;CAChC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAslBT,OAAO,IAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BArxBvC,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAuwBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA1wBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAwwBgB,GAAG;;;;EAerC;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;6FAWnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAstBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAYhD,KAAK,MAAM,GAAG,MAAM,WAAW,CAAA;AAE/B,KAAK,WAAW,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC;AAmKF,iBAAS,MAAM,SAkBd;AA8BD,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;CAChC,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAslBT,OAAO,IAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BArxBvC,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;YAuwBS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA1wBpB,MAAM;4BACJ,OAAO;uBACZ,MAAM;2BACF,OAAO;;;YAwwBgB,GAAG;;;;EAerC;AA0BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;6FAWnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/form/inputs/RichText/composables/useCommands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCommands.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/composables/useCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;uBAK5F,MAAM,UAAU,MAAM;;;EA8D1C"}
+{"version":3,"file":"useCommands.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/composables/useCommands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE;uBAK5F,MAAM,UAAU,MAAM;;;EAkD1C"}

package/dist/components/form/inputs/RichText/composables/useEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/composables/useEditor.ts"],"names":[],"mappings":"AAmCA,wBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eALR,UAAU;;;;;;;;;;;;qDAlBI,CAAC;;+CAG9B,CAAD;;;;2CAGC,CAAC;;;gBAqWiB,QAAQ;;;0BAjSR,MAAM,GAAG,MAAM;;;;;;;;;EAuXlC"}
+{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/composables/useEditor.ts"],"names":[],"mappings":"AAmCA,wBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eALR,UAAU;;;;;;;;;;;;qDAlBI,CAAC;;+CAG9B,CAAD;;;;2CAGC,CAAC;;;gBAsTiB,QAAQ;;;0BApPR,MAAM,GAAG,MAAM;;;;;;;;;EAwUlC"}

package/dist/components/form/inputs/RichText/index.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText/index.vue"],"names":[],"mappings":"AA8RA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAQpD,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;;;;;;;;AA8V1G,wBASG"}
+{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText/index.vue"],"names":[],"mappings":"AAsSA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAQpD,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,aAAa,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;;;;;;;;AAiW1G,wBASG"}

package/dist/index.cjs

@@ -25804,7 +25804,7 @@ const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-9939a5fb"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-50fd0597"]]);
 const _hoisted_1$B = ["title"];
 const _hoisted_2$p = { key: 0 };
 const _hoisted_3$k = ["value", "placeholder"];
@@ -27394,10 +27394,8 @@ function useCommands(state2, debug) {
   return {
     execute: (command, value) => {
       if (!state2.doc) return;
-      console.log("[useCommands.execute] Starting command execution:", command, value);
       debug == null ? void 0 : debug.logCommand(command, value);
       if (["splitView", "codeView", "fullScreen"].includes(command)) {
-        console.log("[useCommands.execute] Handling view state command:", command);
         switch (command) {
           case "splitView":
             state2.isSplitView = !state2.isSplitView;
@@ -27410,25 +27408,16 @@ function useCommands(state2, debug) {
             return;
         }
       }
-      console.log("[useCommands.execute] Focusing editor");
       state2.doc.body.focus();
-      console.log("[useCommands.execute] Executing command");
       executor.execute(command, value);
       const newContent = state2.doc.body.innerHTML;
-      console.log("[useCommands.execute] Checking content changes");
-      console.log("[useCommands.execute] Old content length:", state2.content.length);
-      console.log("[useCommands.execute] New content length:", newContent.length);
       if (newContent !== state2.content) {
-        console.log("[useCommands.execute] Content changed, updating state");
         state2.content = newContent;
       }
-      console.log("[useCommands.execute] Checking selection changes");
       const selection = state2.doc.getSelection();
       if (selection == null ? void 0 : selection.rangeCount) {
         const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
-        console.log("[useCommands.execute] Selection changed:", hasSelectionChanged);
         if (hasSelectionChanged) {
-          console.log("[useCommands.execute] Updating selection state");
           state2.selection = selection;
           state2.range = selection.getRangeAt(0).cloneRange();
           state2.rangeCount = selection.rangeCount;
@@ -27625,7 +27614,6 @@ function useEditor() {
   const updateState = {
     styles: () => {
       if (!state2.doc) return;
-      console.log("[updateState.styles] Starting style update");
       const styles = /* @__PURE__ */ new Set();
       const styleTypes = [
         "bold",
@@ -27648,82 +27636,59 @@ function useEditor() {
           styles.add(style);
         }
       });
-      console.log("[updateState.styles] New styles:", Array.from(styles));
       state2.selectedStyles = styles;
     },
     content: (source) => {
       if (!state2.doc) return;
-      console.log("[updateState.content] Starting content update, source:", source);
       const currentContent = state2.doc.body.innerHTML;
-      console.log("[updateState.content] Current content length:", currentContent.length);
-      console.log("[updateState.content] State content length:", state2.content.length);
       if (currentContent !== state2.content) {
-        console.log("[updateState.content] Content changed, pushing to undo stack");
         state2.undoStack.push(state2.content);
         state2.redoStack = [];
       }
       const selection = state2.doc.getSelection();
       const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
-      console.log("[updateState.content] Has selection:", !!selection, "Has range:", !!range2);
       if (source === "html") {
-        console.log("[updateState.content] Processing HTML content");
         const preserved = preserveIframes(state2.content);
-        console.log("[updateState.content] Preserved iframes count:", preserved.iframes.length);
         state2.doc.body.innerHTML = preserved.html;
         setTimeout(() => {
-          console.log("[updateState.content] Restoring iframes");
           if (state2.doc) {
             restoreIframes(state2.doc, state2.content, preserved.iframes);
             if (range2 && selection) {
               try {
                 selection.removeAllRanges();
                 selection.addRange(range2);
-                console.log("[updateState.content] Selection restored");
               } catch (e) {
-                console.warn("[updateState.content] Could not restore selection:", e);
               }
             }
           }
         }, 0);
       } else {
-        console.log("[updateState.content] Setting text content");
         state2.doc.body.textContent = state2.content;
       }
     },
     selection: () => {
       if (!state2.doc) return;
-      console.log("[updateState.selection] Starting selection update");
       const newSelection = state2.doc.getSelection();
       if (!newSelection) {
-        console.log("[updateState.selection] No selection available");
         return;
       }
       try {
         if (!state2.doc.body.contains(newSelection.anchorNode)) {
-          console.log("[updateState.selection] Selection outside editor body, refocusing");
           state2.doc.body.focus();
           return;
         }
         const hasSelectionChanged = !state2.selection || state2.selection !== newSelection || state2.rangeCount !== newSelection.rangeCount || newSelection.rangeCount > 0 && state2.range && (state2.range.startContainer !== newSelection.getRangeAt(0).startContainer || state2.range.startOffset !== newSelection.getRangeAt(0).startOffset || state2.range.endContainer !== newSelection.getRangeAt(0).endContainer || state2.range.endOffset !== newSelection.getRangeAt(0).endOffset);
-        console.log("[updateState.selection] Selection changed:", hasSelectionChanged);
         if (hasSelectionChanged) {
           state2.selection = newSelection;
           state2.rangeCount = newSelection.rangeCount;
           if (newSelection.rangeCount > 0) {
             state2.range = newSelection.getRangeAt(0).cloneRange();
-            console.log("[updateState.selection] New range:", {
-              startOffset: state2.range.startOffset,
-              endOffset: state2.range.endOffset,
-              collapsed: state2.range.collapsed
-            });
           }
           requestAnimationFrame(() => {
-            console.log("[updateState.selection] Updating styles in RAF");
             updateState.styles();
           });
         }
       } catch (e) {
-        console.warn("[updateState.selection] Selection error:", e);
         state2.selection = null;
         state2.range = null;
         state2.rangeCount = 0;
@@ -27813,70 +27778,44 @@ function useEditor() {
     }
   };
   function setupEventListeners(doc) {
-    console.log("[setupEventListeners] Starting setup");
     if (cleanupListeners) {
-      console.log("[setupEventListeners] Cleaning up existing listeners");
       cleanupListeners();
       cleanupListeners = null;
     }
     let isUpdating = false;
     let contentUpdateTimeout = null;
     let selectionUpdateTimeout = null;
-    let updateCount = 0;
     const events = {
       input: () => {
-        updateCount++;
-        console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating);
-        if (isUpdating) {
-          console.log(`[input event #${updateCount}] Skipped - already updating`);
-          return;
-        }
+        if (isUpdating) return;
         isUpdating = true;
         if (contentUpdateTimeout) {
-          console.log(`[input event #${updateCount}] Clearing previous timeout`);
           window.clearTimeout(contentUpdateTimeout);
         }
         contentUpdateTimeout = window.setTimeout(() => {
-          console.log(`[input event #${updateCount}] Timeout fired`);
           const newContent = doc.body.innerHTML;
           if (newContent !== state2.content) {
-            console.log(`[input event #${updateCount}] Content changed, updating state`);
             state2.content = newContent;
-          } else {
-            console.log(`[input event #${updateCount}] Content unchanged`);
           }
           isUpdating = false;
         }, 100);
       },
       selectionchange: () => {
-        updateCount++;
-        console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating);
-        if (isUpdating) {
-          console.log(`[selectionchange #${updateCount}] Skipped - already updating`);
-          return;
-        }
+        if (isUpdating) return;
         if (selectionUpdateTimeout) {
-          console.log(`[selectionchange #${updateCount}] Clearing previous timeout`);
           window.clearTimeout(selectionUpdateTimeout);
         }
         selectionUpdateTimeout = window.setTimeout(() => {
-          console.log(`[selectionchange #${updateCount}] Timeout fired`);
           if (!isUpdating) {
             updateState.selection();
-          } else {
-            console.log(`[selectionchange #${updateCount}] Skipped - still updating`);
           }
         }, 150);
       },
       mouseup: () => {
-        updateCount++;
-        console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating);
         if (isUpdating) return;
         updateState.selection();
       },
       keyup: (e) => {
-        updateCount++;
-        console.log(`[keyup #${updateCount}] Key:`, e.key, "isUpdating:", isUpdating);
         if (isUpdating) return;
         if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
           updateState.selection();
@@ -27885,10 +27824,8 @@ function useEditor() {
     };
     Object.entries(events).forEach(([event, handler]) => {
       doc.addEventListener(event, handler);
-      console.log("[setupEventListeners] Added listener for:", event);
     });
     cleanupListeners = () => {
-      console.log("[setupEventListeners] Cleaning up event listeners");
       if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
       if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
       Object.entries(events).forEach(([event, handler]) => {
@@ -27898,9 +27835,7 @@ function useEditor() {
     return cleanupListeners;
   }
   function init(doc) {
-    console.log("[init] Starting initialization");
     if (state2.hasInit) {
-      console.log("[init] Already initialized, cleaning up first");
       if (cleanupListeners) {
         cleanupListeners();
         cleanupListeners = null;
@@ -28092,9 +28027,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     });
     async function initEditor() {
       var _a2;
-      console.log("[initEditor] Starting, isInitializing:", isInitializing.value, "hasInitialized:", hasInitialized.value);
       if (isInitializing.value || !iframe.value || hasInitialized.value) {
-        console.log("[initEditor] Skipped - already initializing/initialized or no iframe");
         return;
       }
       isInitializing.value = true;
@@ -28122,10 +28055,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
 			</html>
 		`;
         const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
-        if (!doc) {
-          console.warn("[initEditor] No document found");
-          return;
-        }
+        if (!doc) return;
         doc.open();
         doc.write(htmlContent);
         doc.close();
@@ -28164,7 +28094,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
         doc.body.focus();
         hasInitialized.value = true;
       } catch (error) {
-        console.error("[initEditor] Error during initialization:", error);
+        console.error("Error during editor initialization:", error);
       } finally {
         isInitializing.value = false;
       }
@@ -28172,7 +28102,6 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     vue.watch(() => props2.modelValue, (newValue, oldValue) => {
       if (newValue !== editor.state.content) {
         if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
-          console.log("[watch] Significant content change, resetting initialization state");
           hasInitialized.value = false;
           editor.state.content = newValue;
           editor.updateState.content("html");
@@ -28186,6 +28115,12 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       }
       emit2("update:modelValue", newValue);
     });
+    vue.watch(() => editor.state.isSplitView, (isEnabled) => {
+      var _a2;
+      if (isEnabled) {
+        editor.state.content = ((_a2 = editor.state.doc) == null ? void 0 : _a2.body.innerHTML) || "";
+      }
+    });
     return (_ctx, _cache) => {
       var _a2, _b;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
@@ -28209,8 +28144,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 ref: iframe,
                 class: "editableContent",
                 title: "Editor",
+                srcdoc: "",
                 sandbox: "allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation",
-                src: "about:blank",
                 onLoad: initEditor
               }, null, 544)
             ]),
@@ -28221,7 +28156,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
                 _cache[0] || (_cache[0] = ($event) => vue.unref(editor).state.content = $event),
                 _cache[1] || (_cache[1] = ($event) => vue.unref(editor).updateState.content("html"))
               ],
-              language: "html"
+              language: "html",
+              class: "code-editor"
             }, null, 8, ["modelValue"])) : vue.createCommentVNode("", true)
           ], 2),
           _ctx.debug ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$e, [
@@ -28268,7 +28204,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-b58de58d"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-0aa61b83"]]);
 const _hoisted_1$r = { class: "flex gap-05" };
 const _hoisted_2$h = ["disabled"];
 const _hoisted_3$d = { key: 1 };

package/dist/index.mjs

@@ -25802,7 +25802,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-9939a5fb"]]);
+const FileUpload = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-50fd0597"]]);
 const _hoisted_1$B = ["title"];
 const _hoisted_2$p = { key: 0 };
 const _hoisted_3$k = ["value", "placeholder"];
@@ -27392,10 +27392,8 @@ function useCommands(state2, debug) {
   return {
     execute: (command, value) => {
       if (!state2.doc) return;
-      console.log("[useCommands.execute] Starting command execution:", command, value);
       debug == null ? void 0 : debug.logCommand(command, value);
       if (["splitView", "codeView", "fullScreen"].includes(command)) {
-        console.log("[useCommands.execute] Handling view state command:", command);
         switch (command) {
           case "splitView":
             state2.isSplitView = !state2.isSplitView;
@@ -27408,25 +27406,16 @@ function useCommands(state2, debug) {
             return;
         }
       }
-      console.log("[useCommands.execute] Focusing editor");
       state2.doc.body.focus();
-      console.log("[useCommands.execute] Executing command");
       executor.execute(command, value);
       const newContent = state2.doc.body.innerHTML;
-      console.log("[useCommands.execute] Checking content changes");
-      console.log("[useCommands.execute] Old content length:", state2.content.length);
-      console.log("[useCommands.execute] New content length:", newContent.length);
       if (newContent !== state2.content) {
-        console.log("[useCommands.execute] Content changed, updating state");
         state2.content = newContent;
       }
-      console.log("[useCommands.execute] Checking selection changes");
       const selection = state2.doc.getSelection();
       if (selection == null ? void 0 : selection.rangeCount) {
         const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
-        console.log("[useCommands.execute] Selection changed:", hasSelectionChanged);
         if (hasSelectionChanged) {
-          console.log("[useCommands.execute] Updating selection state");
           state2.selection = selection;
           state2.range = selection.getRangeAt(0).cloneRange();
           state2.rangeCount = selection.rangeCount;
@@ -27623,7 +27612,6 @@ function useEditor() {
   const updateState = {
     styles: () => {
       if (!state2.doc) return;
-      console.log("[updateState.styles] Starting style update");
       const styles = /* @__PURE__ */ new Set();
       const styleTypes = [
         "bold",
@@ -27646,82 +27634,59 @@ function useEditor() {
           styles.add(style);
         }
       });
-      console.log("[updateState.styles] New styles:", Array.from(styles));
       state2.selectedStyles = styles;
     },
     content: (source) => {
       if (!state2.doc) return;
-      console.log("[updateState.content] Starting content update, source:", source);
       const currentContent = state2.doc.body.innerHTML;
-      console.log("[updateState.content] Current content length:", currentContent.length);
-      console.log("[updateState.content] State content length:", state2.content.length);
       if (currentContent !== state2.content) {
-        console.log("[updateState.content] Content changed, pushing to undo stack");
         state2.undoStack.push(state2.content);
         state2.redoStack = [];
       }
       const selection = state2.doc.getSelection();
       const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
-      console.log("[updateState.content] Has selection:", !!selection, "Has range:", !!range2);
       if (source === "html") {
-        console.log("[updateState.content] Processing HTML content");
         const preserved = preserveIframes(state2.content);
-        console.log("[updateState.content] Preserved iframes count:", preserved.iframes.length);
         state2.doc.body.innerHTML = preserved.html;
         setTimeout(() => {
-          console.log("[updateState.content] Restoring iframes");
           if (state2.doc) {
             restoreIframes(state2.doc, state2.content, preserved.iframes);
             if (range2 && selection) {
               try {
                 selection.removeAllRanges();
                 selection.addRange(range2);
-                console.log("[updateState.content] Selection restored");
               } catch (e) {
-                console.warn("[updateState.content] Could not restore selection:", e);
               }
             }
           }
         }, 0);
       } else {
-        console.log("[updateState.content] Setting text content");
         state2.doc.body.textContent = state2.content;
       }
     },
     selection: () => {
       if (!state2.doc) return;
-      console.log("[updateState.selection] Starting selection update");
       const newSelection = state2.doc.getSelection();
       if (!newSelection) {
-        console.log("[updateState.selection] No selection available");
         return;
       }
       try {
         if (!state2.doc.body.contains(newSelection.anchorNode)) {
-          console.log("[updateState.selection] Selection outside editor body, refocusing");
           state2.doc.body.focus();
           return;
         }
         const hasSelectionChanged = !state2.selection || state2.selection !== newSelection || state2.rangeCount !== newSelection.rangeCount || newSelection.rangeCount > 0 && state2.range && (state2.range.startContainer !== newSelection.getRangeAt(0).startContainer || state2.range.startOffset !== newSelection.getRangeAt(0).startOffset || state2.range.endContainer !== newSelection.getRangeAt(0).endContainer || state2.range.endOffset !== newSelection.getRangeAt(0).endOffset);
-        console.log("[updateState.selection] Selection changed:", hasSelectionChanged);
         if (hasSelectionChanged) {
           state2.selection = newSelection;
           state2.rangeCount = newSelection.rangeCount;
           if (newSelection.rangeCount > 0) {
             state2.range = newSelection.getRangeAt(0).cloneRange();
-            console.log("[updateState.selection] New range:", {
-              startOffset: state2.range.startOffset,
-              endOffset: state2.range.endOffset,
-              collapsed: state2.range.collapsed
-            });
           }
           requestAnimationFrame(() => {
-            console.log("[updateState.selection] Updating styles in RAF");
             updateState.styles();
           });
         }
       } catch (e) {
-        console.warn("[updateState.selection] Selection error:", e);
         state2.selection = null;
         state2.range = null;
         state2.rangeCount = 0;
@@ -27811,70 +27776,44 @@ function useEditor() {
     }
   };
   function setupEventListeners(doc) {
-    console.log("[setupEventListeners] Starting setup");
     if (cleanupListeners) {
-      console.log("[setupEventListeners] Cleaning up existing listeners");
       cleanupListeners();
       cleanupListeners = null;
     }
     let isUpdating = false;
     let contentUpdateTimeout = null;
     let selectionUpdateTimeout = null;
-    let updateCount = 0;
     const events = {
       input: () => {
-        updateCount++;
-        console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating);
-        if (isUpdating) {
-          console.log(`[input event #${updateCount}] Skipped - already updating`);
-          return;
-        }
+        if (isUpdating) return;
         isUpdating = true;
         if (contentUpdateTimeout) {
-          console.log(`[input event #${updateCount}] Clearing previous timeout`);
           window.clearTimeout(contentUpdateTimeout);
         }
         contentUpdateTimeout = window.setTimeout(() => {
-          console.log(`[input event #${updateCount}] Timeout fired`);
           const newContent = doc.body.innerHTML;
           if (newContent !== state2.content) {
-            console.log(`[input event #${updateCount}] Content changed, updating state`);
             state2.content = newContent;
-          } else {
-            console.log(`[input event #${updateCount}] Content unchanged`);
           }
           isUpdating = false;
         }, 100);
       },
       selectionchange: () => {
-        updateCount++;
-        console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating);
-        if (isUpdating) {
-          console.log(`[selectionchange #${updateCount}] Skipped - already updating`);
-          return;
-        }
+        if (isUpdating) return;
         if (selectionUpdateTimeout) {
-          console.log(`[selectionchange #${updateCount}] Clearing previous timeout`);
           window.clearTimeout(selectionUpdateTimeout);
         }
         selectionUpdateTimeout = window.setTimeout(() => {
-          console.log(`[selectionchange #${updateCount}] Timeout fired`);
           if (!isUpdating) {
             updateState.selection();
-          } else {
-            console.log(`[selectionchange #${updateCount}] Skipped - still updating`);
           }
         }, 150);
       },
       mouseup: () => {
-        updateCount++;
-        console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating);
         if (isUpdating) return;
         updateState.selection();
       },
       keyup: (e) => {
-        updateCount++;
-        console.log(`[keyup #${updateCount}] Key:`, e.key, "isUpdating:", isUpdating);
         if (isUpdating) return;
         if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
           updateState.selection();
@@ -27883,10 +27822,8 @@ function useEditor() {
     };
     Object.entries(events).forEach(([event, handler]) => {
       doc.addEventListener(event, handler);
-      console.log("[setupEventListeners] Added listener for:", event);
     });
     cleanupListeners = () => {
-      console.log("[setupEventListeners] Cleaning up event listeners");
       if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
       if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
       Object.entries(events).forEach(([event, handler]) => {
@@ -27896,9 +27833,7 @@ function useEditor() {
     return cleanupListeners;
   }
   function init(doc) {
-    console.log("[init] Starting initialization");
     if (state2.hasInit) {
-      console.log("[init] Already initialized, cleaning up first");
       if (cleanupListeners) {
         cleanupListeners();
         cleanupListeners = null;
@@ -28090,9 +28025,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     });
     async function initEditor() {
       var _a2;
-      console.log("[initEditor] Starting, isInitializing:", isInitializing.value, "hasInitialized:", hasInitialized.value);
       if (isInitializing.value || !iframe.value || hasInitialized.value) {
-        console.log("[initEditor] Skipped - already initializing/initialized or no iframe");
         return;
       }
       isInitializing.value = true;
@@ -28120,10 +28053,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 			</html>
 		`;
         const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
-        if (!doc) {
-          console.warn("[initEditor] No document found");
-          return;
-        }
+        if (!doc) return;
         doc.open();
         doc.write(htmlContent);
         doc.close();
@@ -28162,7 +28092,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         doc.body.focus();
         hasInitialized.value = true;
       } catch (error) {
-        console.error("[initEditor] Error during initialization:", error);
+        console.error("Error during editor initialization:", error);
       } finally {
         isInitializing.value = false;
       }
@@ -28170,7 +28100,6 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     watch(() => props2.modelValue, (newValue, oldValue) => {
       if (newValue !== editor.state.content) {
         if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
-          console.log("[watch] Significant content change, resetting initialization state");
           hasInitialized.value = false;
           editor.state.content = newValue;
           editor.updateState.content("html");
@@ -28184,6 +28113,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
       emit2("update:modelValue", newValue);
     });
+    watch(() => editor.state.isSplitView, (isEnabled) => {
+      var _a2;
+      if (isEnabled) {
+        editor.state.content = ((_a2 = editor.state.doc) == null ? void 0 : _a2.body.innerHTML) || "";
+      }
+    });
     return (_ctx, _cache) => {
       var _a2, _b;
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
@@ -28207,8 +28142,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 ref: iframe,
                 class: "editableContent",
                 title: "Editor",
+                srcdoc: "",
                 sandbox: "allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation",
-                src: "about:blank",
                 onLoad: initEditor
               }, null, 544)
             ]),
@@ -28219,7 +28154,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 _cache[0] || (_cache[0] = ($event) => unref(editor).state.content = $event),
                 _cache[1] || (_cache[1] = ($event) => unref(editor).updateState.content("html"))
               ],
-              language: "html"
+              language: "html",
+              class: "code-editor"
             }, null, 8, ["modelValue"])) : createCommentVNode("", true)
           ], 2),
           _ctx.debug ? (openBlock(), createElementBlock("div", _hoisted_3$e, [
@@ -28266,7 +28202,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-b58de58d"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-0aa61b83"]]);
 const _hoisted_1$r = { class: "flex gap-05" };
 const _hoisted_2$h = ["disabled"];
 const _hoisted_3$d = { key: 1 };

package/dist/style.css

@@ -1638,7 +1638,7 @@ pre code.hljs{
 }
 }
 
-.fileUploadWrap[data-v-9939a5fb] {
+.fileUploadWrap[data-v-50fd0597] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1650,7 +1650,7 @@ pre code.hljs{
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-9939a5fb] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-50fd0597] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1658,14 +1658,14 @@ pre code.hljs{
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-9939a5fb],
-.fileUploadWrap[data-v-9939a5fb]:hover {
+.fileUploadWrap.dragover[data-v-50fd0597],
+.fileUploadWrap[data-v-50fd0597]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*='height: auto;'][data-v-9939a5fb] {
+.fileUploadWrap[style*='height: auto;'][data-v-50fd0597] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-9939a5fb] {
+.multi-image-item-preview[data-v-50fd0597] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1679,12 +1679,12 @@ pre code.hljs{
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-9939a5fb] {
+.multi-image-item-preview p[data-v-50fd0597] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-9939a5fb] {
+.multi-preview[data-v-50fd0597] {
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1695,17 +1695,17 @@ pre code.hljs{
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-9939a5fb] {
+.bgl-single-preview[data-v-50fd0597] {
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-9939a5fb] {
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-50fd0597] {
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-9939a5fb] {
+.single-image-item-preview[data-v-50fd0597] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1713,13 +1713,13 @@ pre code.hljs{
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-9939a5fb] {
+.fileUploadWrap[style*='height: auto'] .single-image-item-preview[data-v-50fd0597] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*='height: auto'] .single-preview[data-v-9939a5fb] {
+.fileUploadWrap[style*='height: auto'] .single-preview[data-v-50fd0597] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-9939a5fb] {
+.single-preview[data-v-50fd0597] {
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1727,9 +1727,10 @@ pre code.hljs{
 	height: calc(100% - 2rem);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	width: 90%;
+	width: calc(90% - 2rem);
+	min-width: 5rem;
 }
-.single-image-item-preview[data-v-9939a5fb]:hover::after {
+.single-image-item-preview[data-v-50fd0597]:hover::after {
 	content: 'zoom_in';
 	font-size: 32px;
 	font-family: 'Material Symbols Outlined', serif;
@@ -1739,20 +1740,20 @@ pre code.hljs{
 	z-index: 9;
 	pointer-events: none;
 }
-.single-image-item-preview:hover img[data-v-9939a5fb] {
+.single-image-item-preview:hover img[data-v-50fd0597] {
 	filter: brightness(70%);
 }
-.bgl_fill-image.single-image-item-preview[data-v-9939a5fb] {
+.bgl_fill-image.single-image-item-preview[data-v-50fd0597] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-9939a5fb] {
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-50fd0597] {
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-9939a5fb] {
+.single-image-item-preview .pie[data-v-50fd0597] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1766,31 +1767,31 @@ pre code.hljs{
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-9939a5fb] {
+.bgl_oval-upload[data-v-50fd0597] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-9939a5fb] {
+.bgl_oval-upload p[data-v-50fd0597] {
 	padding: 0.75rem !important;
 	font-size: 12px;
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-9939a5fb] {
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-50fd0597] {
 	top: 0;
 }
-.bgl_oval-upload .pie[data-v-9939a5fb] {
+.bgl_oval-upload .pie[data-v-50fd0597] {
 	transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-9939a5fb] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-50fd0597] {
 	transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-9939a5fb] {
+.bgl_oval-upload .single-image-item-preview[data-v-50fd0597] {
 	height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-9939a5fb] {
+.bgl_oval-upload .single-preview[data-v-50fd0597] {
 	margin: 0;
 	height: 100% !important;
 }
-.pie[data-v-9939a5fb] {
+.pie[data-v-50fd0597] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1798,7 +1799,7 @@ pre code.hljs{
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-9939a5fb]:before {
+.pie[data-v-50fd0597]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1816,26 +1817,26 @@ pre code.hljs{
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-9939a5fb] {
+.pie .success[data-v-50fd0597] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-9939a5fb] {
+.pie .progress[data-v-50fd0597] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-9939a5fb] {
+.pie.complete .progress[data-v-50fd0597] {
 	display: none;
 }
-.pie.complete .success[data-v-9939a5fb] {
+.pie.complete .success[data-v-50fd0597] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-9939a5fb]:before {
+.pie.complete[data-v-50fd0597]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-9939a5fb] {
+.pie.complete[data-v-50fd0597] {
 	color: var(--bgl-green);
 }
 
@@ -2055,29 +2056,34 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 .content-area p,
 .content-area span,
 .content-area li{
-line-height: 1.65;
+	line-height: 1.65;
+}
+.code-editor {
+	flex: 1;
+	min-height: 240px !important;
+	height: 100%;
 }
 
-.rich-text-editor[data-v-b58de58d] {
+.rich-text-editor[data-v-0aa61b83] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-b58de58d] {
+.editor-container[data-v-0aa61b83] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-b58de58d],
-.preview-area[data-v-b58de58d] {
+.content-area[data-v-0aa61b83],
+.preview-area[data-v-0aa61b83] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-b58de58d] {
+.split-view[data-v-0aa61b83] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-b58de58d] {
+.editableContent[data-v-0aa61b83] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -2085,7 +2091,7 @@ line-height: 1.65;
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-b58de58d] {
+.html-editor[data-v-0aa61b83] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -2096,12 +2102,12 @@ line-height: 1.65;
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-b58de58d] {
+.preview-area[data-v-0aa61b83] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-b58de58d] {
+.fullscreen-mode[data-v-0aa61b83] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -2110,18 +2116,18 @@ line-height: 1.65;
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-b58de58d] {
+.fullscreen-mode .editor-container[data-v-0aa61b83] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-b58de58d],
-.fullscreen-mode .preview-area[data-v-b58de58d] {
+.fullscreen-mode .content-area[data-v-0aa61b83],
+.fullscreen-mode .preview-area[data-v-0aa61b83] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-b58de58d]{
+.fullscreen-mode .code-editor[data-v-0aa61b83]{
 	height: 100% !important;
 }
-.debug-controls[data-v-b58de58d] {
+.debug-controls[data-v-0aa61b83] {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: flex-end;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1272",
+  "version": "0.0.1276",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/form/inputs/FileUpload.vue

@@ -598,7 +598,8 @@ function drop(e: DragEvent) {
 	height: calc(100% - 2rem);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
-	width: 90%;
+	width: calc(90% - 2rem);
+	min-width: 5rem;
 }
 .single-image-item-preview:hover::after {
 	content: 'zoom_in';

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -9,14 +9,11 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 		execute: (command: string, value?: string) => {
 			if (!state.doc) return
 
-			console.log('[useCommands.execute] Starting command execution:', command, value)
-
 			// Log command if debug is enabled
 			debug?.logCommand(command, value)
 
 			// Handle view state commands directly
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
-				console.log('[useCommands.execute] Handling view state command:', command)
 				switch (command) {
 					case 'splitView':
 						state.isSplitView = !state.isSplitView
@@ -31,34 +28,25 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			}
 
 			// Focus the editor before executing command
-			console.log('[useCommands.execute] Focusing editor')
 			state.doc.body.focus()
 
 			// Execute the command
-			console.log('[useCommands.execute] Executing command')
 			executor.execute(command, value)
 
 			// Update content state only if it has changed
 			const newContent = state.doc.body.innerHTML
-			console.log('[useCommands.execute] Checking content changes')
-			console.log('[useCommands.execute] Old content length:', state.content.length)
-			console.log('[useCommands.execute] New content length:', newContent.length)
 			if (newContent !== state.content) {
-				console.log('[useCommands.execute] Content changed, updating state')
 				state.content = newContent
 			}
 
 			// Update selection state if needed
-			console.log('[useCommands.execute] Checking selection changes')
 			const selection = state.doc.getSelection()
 			if (selection?.rangeCount) {
 				const hasSelectionChanged = !state.selection
 					|| state.selection !== selection
 					|| state.rangeCount !== selection.rangeCount
 
-				console.log('[useCommands.execute] Selection changed:', hasSelectionChanged)
 				if (hasSelectionChanged) {
-					console.log('[useCommands.execute] Updating selection state')
 					state.selection = selection
 					state.range = selection.getRangeAt(0).cloneRange()
 					state.rangeCount = selection.rangeCount

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -58,7 +58,6 @@ export function useEditor() {
 	const updateState = {
 		styles: () => {
 			if (!state.doc) return
-			console.log('[updateState.styles] Starting style update')
 			const styles = new Set<string>()
 			const styleTypes = [
 				'bold',
@@ -81,19 +80,14 @@ export function useEditor() {
 					styles.add(style)
 				}
 			})
-			console.log('[updateState.styles] New styles:', Array.from(styles))
 			state.selectedStyles = styles
 		},
 		content: (source: 'html' | 'text') => {
 			if (!state.doc) return
-			console.log('[updateState.content] Starting content update, source:', source)
 
 			// Only push to undo stack if content has changed
 			const currentContent = state.doc.body.innerHTML
-			console.log('[updateState.content] Current content length:', currentContent.length)
-			console.log('[updateState.content] State content length:', state.content.length)
 			if (currentContent !== state.content) {
-				console.log('[updateState.content] Content changed, pushing to undo stack')
 				state.undoStack.push(state.content)
 				state.redoStack = []
 			}
@@ -101,18 +95,14 @@ export function useEditor() {
 			// Store current selection
 			const selection = state.doc.getSelection()
 			const range = selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null
-			console.log('[updateState.content] Has selection:', !!selection, 'Has range:', !!range)
 
 			if (source === 'html') {
-				console.log('[updateState.content] Processing HTML content')
 				// Preserve iframes before setting content
 				const preserved = preserveIframes(state.content)
-				console.log('[updateState.content] Preserved iframes count:', preserved.iframes.length)
 				state.doc.body.innerHTML = preserved.html
 
 				// Restore iframes after a short delay to ensure the document is ready
 				setTimeout(() => {
-					console.log('[updateState.content] Restoring iframes')
 					if (state.doc) {
 						restoreIframes(state.doc, state.content, preserved.iframes)
 
@@ -121,30 +111,24 @@ export function useEditor() {
 							try {
 								selection.removeAllRanges()
 								selection.addRange(range)
-								console.log('[updateState.content] Selection restored')
 							} catch (e) {
-								console.warn('[updateState.content] Could not restore selection:', e)
 							}
 						}
 					}
 				}, 0)
 			} else {
-				console.log('[updateState.content] Setting text content')
 				state.doc.body.textContent = state.content
 			}
 		},
 		selection: () => {
 			if (!state.doc) return
-			console.log('[updateState.selection] Starting selection update')
 			const newSelection = state.doc.getSelection()
 			if (!newSelection) {
-				console.log('[updateState.selection] No selection available')
 				return
 			}
 
 			try {
 				if (!state.doc.body.contains(newSelection.anchorNode)) {
-					console.log('[updateState.selection] Selection outside editor body, refocusing')
 					state.doc.body.focus()
 					return
 				}
@@ -160,28 +144,20 @@ export function useEditor() {
 						|| state.range.endOffset !== newSelection.getRangeAt(0).endOffset
 					))
 
-				console.log('[updateState.selection] Selection changed:', hasSelectionChanged)
 				if (hasSelectionChanged) {
 					state.selection = newSelection
 					state.rangeCount = newSelection.rangeCount
 
 					if (newSelection.rangeCount > 0) {
 						state.range = newSelection.getRangeAt(0).cloneRange()
-						console.log('[updateState.selection] New range:', {
-							startOffset: state.range.startOffset,
-							endOffset: state.range.endOffset,
-							collapsed: state.range.collapsed
-						})
 					}
 
 					// Update styles less frequently
 					requestAnimationFrame(() => {
-						console.log('[updateState.selection] Updating styles in RAF')
 						updateState.styles()
 					})
 				}
 			} catch (e) {
-				console.warn('[updateState.selection] Selection error:', e)
 				state.selection = null
 				state.range = null
 				state.rangeCount = 0
@@ -275,10 +251,8 @@ export function useEditor() {
 	}
 
 	function setupEventListeners(doc: Document) {
-		console.log('[setupEventListeners] Starting setup')
 		// Clean up existing listeners if they exist
 		if (cleanupListeners) {
-			console.log('[setupEventListeners] Cleaning up existing listeners')
 			cleanupListeners()
 			cleanupListeners = null
 		}
@@ -291,62 +265,43 @@ export function useEditor() {
 		const events = {
 			input: () => {
 				updateCount++
-				console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating)
-				if (isUpdating) {
-					console.log(`[input event #${updateCount}] Skipped - already updating`)
-					return
-				}
+				if (isUpdating) return
 				isUpdating = true
 
 				// Clear any pending content updates
 				if (contentUpdateTimeout) {
-					console.log(`[input event #${updateCount}] Clearing previous timeout`)
 					window.clearTimeout(contentUpdateTimeout)
 				}
 
 				contentUpdateTimeout = window.setTimeout(() => {
-					console.log(`[input event #${updateCount}] Timeout fired`)
 					const newContent = doc.body.innerHTML
 					if (newContent !== state.content) {
-						console.log(`[input event #${updateCount}] Content changed, updating state`)
 						state.content = newContent
-					} else {
-						console.log(`[input event #${updateCount}] Content unchanged`)
 					}
 					isUpdating = false
 				}, 100)
 			},
 			selectionchange: () => {
 				updateCount++
-				console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating)
-				if (isUpdating) {
-					console.log(`[selectionchange #${updateCount}] Skipped - already updating`)
-					return
-				}
+				if (isUpdating) return
 
 				if (selectionUpdateTimeout) {
-					console.log(`[selectionchange #${updateCount}] Clearing previous timeout`)
 					window.clearTimeout(selectionUpdateTimeout)
 				}
 
 				selectionUpdateTimeout = window.setTimeout(() => {
-					console.log(`[selectionchange #${updateCount}] Timeout fired`)
 					if (!isUpdating) {
 						updateState.selection()
-					} else {
-						console.log(`[selectionchange #${updateCount}] Skipped - still updating`)
 					}
 				}, 150)
 			},
 			mouseup: () => {
 				updateCount++
-				console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating)
 				if (isUpdating) return
 				updateState.selection()
 			},
 			keyup: (e: KeyboardEvent) => {
 				updateCount++
-				console.log(`[keyup #${updateCount}] Key:`, e.key, 'isUpdating:', isUpdating)
 				if (isUpdating) return
 				if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
 					updateState.selection()
@@ -357,12 +312,10 @@ export function useEditor() {
 		// Only add listeners if they haven't been added yet
 		Object.entries(events).forEach(([event, handler]) => {
 			doc.addEventListener(event, handler as EventListener)
-			console.log('[setupEventListeners] Added listener for:', event)
 		})
 
 		// Store cleanup function
 		cleanupListeners = () => {
-			console.log('[setupEventListeners] Cleaning up event listeners')
 			if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout)
 			if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout)
 			Object.entries(events).forEach(([event, handler]) => {
@@ -374,9 +327,7 @@ export function useEditor() {
 	}
 
 	function init(doc: Document) {
-		console.log('[init] Starting initialization')
 		if (state.hasInit) {
-			console.log('[init] Already initialized, cleaning up first')
 			if (cleanupListeners) {
 				cleanupListeners()
 				cleanupListeners = null

package/src/components/form/inputs/RichText/index.vue

@@ -32,9 +32,7 @@ onUnmounted(() => {
 })
 
 async function initEditor() {
-	console.log('[initEditor] Starting, isInitializing:', isInitializing.value, 'hasInitialized:', hasInitialized.value)
 	if (isInitializing.value || !iframe.value || hasInitialized.value) {
-		console.log('[initEditor] Skipped - already initializing/initialized or no iframe')
 		return
 	}
 
@@ -69,10 +67,7 @@ async function initEditor() {
 
 		// Write the complete HTML document to the iframe
 		const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document
-		if (!doc) {
-			console.warn('[initEditor] No document found')
-			return
-		}
+		if (!doc) return
 
 		// First write the content
 		doc.open()
@@ -122,7 +117,8 @@ async function initEditor() {
 		doc.body.focus()
 		hasInitialized.value = true
 	} catch (error) {
-		console.error('[initEditor] Error during initialization:', error)
+		// Keep only this error log for debugging critical issues
+		console.error('Error during editor initialization:', error)
 	} finally {
 		isInitializing.value = false
 	}
@@ -133,7 +129,6 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 	if (newValue !== editor.state.content) {
 		// Only reset if content change is significant (not just minor edits)
 		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
-			console.log('[watch] Significant content change, resetting initialization state')
 			hasInitialized.value = false
 			editor.state.content = newValue
 			editor.updateState.content('html')
@@ -147,6 +142,12 @@ watch(() => editor.state.content, (newValue) => {
 	}
 	emit('update:modelValue', newValue)
 })
+
+watch(() => editor.state.isSplitView, (isEnabled) => {
+	if (isEnabled) {
+		editor.state.content = editor.state.doc?.body.innerHTML || ''
+	}
+})
 </script>
 
 <template>
@@ -164,8 +165,8 @@ watch(() => editor.state.content, (newValue) => {
 						ref="iframe"
 						class="editableContent"
 						title="Editor"
+						srcdoc=""
 						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
-						src="about:blank"
 						@load="initEditor"
 					/>
 				</div>
@@ -173,6 +174,7 @@ watch(() => editor.state.content, (newValue) => {
 					v-if="editor.state.isSplitView"
 					v-model="editor.state.content"
 					language="html"
+					class="code-editor"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
 			</div>
@@ -198,7 +200,13 @@ watch(() => editor.state.content, (newValue) => {
 .content-area p,
 .content-area span,
 .content-area li{
-line-height: 1.65;
+	line-height: 1.65;
+}
+
+.code-editor {
+	flex: 1;
+	min-height: 240px !important;
+	height: 100%;
 }
 </style>