@bagelink/vue 0.0.1270 → 0.0.1274

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AAmOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AAyVD,wBAQG"}
1
+ {"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"AAsOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI7C,KAAK,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;AAEzD,UAAU,gBAAgB;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;;;;;;AA4VD,wBAQG"}
@@ -1 +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"}
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;;;EAkD1C"}
@@ -1 +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"}
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;;;gBAsTiB,QAAQ;;;0BApPR,MAAM,GAAG,MAAM;;;;;;;;;EAwUlC"}
@@ -1 +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"}
1
+ {"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/inputs/RichText/index.vue"],"names":[],"mappings":"AAyRA,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;;;;;;;;AAyV1G,wBASG"}
package/dist/index.cjs CHANGED
@@ -25934,11 +25934,14 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
25934
25934
  emit2("update:modelValue", numberValue.value);
25935
25935
  }
25936
25936
  vue.watch(() => numberValue.value, () => {
25937
- formattedValue.value = numberValue.value !== void 0 ? formatNumber2(numberValue.value) : "";
25938
- }, { immediate: true });
25937
+ vue.nextTick(() => {
25938
+ formattedValue.value = numberValue.value !== void 0 ? formatNumber2(numberValue.value) : "";
25939
+ });
25940
+ });
25939
25941
  vue.watch(() => __props.modelValue, (newVal) => {
25940
25942
  if (newVal !== numberValue.value) {
25941
25943
  numberValue.value = Number.parseFloat(`${newVal}`) || 0;
25944
+ console.log("newVal", numberValue.value);
25942
25945
  }
25943
25946
  }, { immediate: true });
25944
25947
  return (_ctx, _cache) => {
@@ -26042,7 +26045,7 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
26042
26045
  };
26043
26046
  }
26044
26047
  });
26045
- const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-26b79ca5"]]);
26048
+ const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-3b46ec89"]]);
26046
26049
  const _hoisted_1$z = ["value", "autofocus", "onKeydown", "onPaste"];
26047
26050
  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
26048
26051
  __name: "OTP",
@@ -27391,10 +27394,8 @@ function useCommands(state2, debug) {
27391
27394
  return {
27392
27395
  execute: (command, value) => {
27393
27396
  if (!state2.doc) return;
27394
- console.log("[useCommands.execute] Starting command execution:", command, value);
27395
27397
  debug == null ? void 0 : debug.logCommand(command, value);
27396
27398
  if (["splitView", "codeView", "fullScreen"].includes(command)) {
27397
- console.log("[useCommands.execute] Handling view state command:", command);
27398
27399
  switch (command) {
27399
27400
  case "splitView":
27400
27401
  state2.isSplitView = !state2.isSplitView;
@@ -27407,25 +27408,16 @@ function useCommands(state2, debug) {
27407
27408
  return;
27408
27409
  }
27409
27410
  }
27410
- console.log("[useCommands.execute] Focusing editor");
27411
27411
  state2.doc.body.focus();
27412
- console.log("[useCommands.execute] Executing command");
27413
27412
  executor.execute(command, value);
27414
27413
  const newContent = state2.doc.body.innerHTML;
27415
- console.log("[useCommands.execute] Checking content changes");
27416
- console.log("[useCommands.execute] Old content length:", state2.content.length);
27417
- console.log("[useCommands.execute] New content length:", newContent.length);
27418
27414
  if (newContent !== state2.content) {
27419
- console.log("[useCommands.execute] Content changed, updating state");
27420
27415
  state2.content = newContent;
27421
27416
  }
27422
- console.log("[useCommands.execute] Checking selection changes");
27423
27417
  const selection = state2.doc.getSelection();
27424
27418
  if (selection == null ? void 0 : selection.rangeCount) {
27425
27419
  const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
27426
- console.log("[useCommands.execute] Selection changed:", hasSelectionChanged);
27427
27420
  if (hasSelectionChanged) {
27428
- console.log("[useCommands.execute] Updating selection state");
27429
27421
  state2.selection = selection;
27430
27422
  state2.range = selection.getRangeAt(0).cloneRange();
27431
27423
  state2.rangeCount = selection.rangeCount;
@@ -27622,7 +27614,6 @@ function useEditor() {
27622
27614
  const updateState = {
27623
27615
  styles: () => {
27624
27616
  if (!state2.doc) return;
27625
- console.log("[updateState.styles] Starting style update");
27626
27617
  const styles = /* @__PURE__ */ new Set();
27627
27618
  const styleTypes = [
27628
27619
  "bold",
@@ -27645,82 +27636,59 @@ function useEditor() {
27645
27636
  styles.add(style);
27646
27637
  }
27647
27638
  });
27648
- console.log("[updateState.styles] New styles:", Array.from(styles));
27649
27639
  state2.selectedStyles = styles;
27650
27640
  },
27651
27641
  content: (source) => {
27652
27642
  if (!state2.doc) return;
27653
- console.log("[updateState.content] Starting content update, source:", source);
27654
27643
  const currentContent = state2.doc.body.innerHTML;
27655
- console.log("[updateState.content] Current content length:", currentContent.length);
27656
- console.log("[updateState.content] State content length:", state2.content.length);
27657
27644
  if (currentContent !== state2.content) {
27658
- console.log("[updateState.content] Content changed, pushing to undo stack");
27659
27645
  state2.undoStack.push(state2.content);
27660
27646
  state2.redoStack = [];
27661
27647
  }
27662
27648
  const selection = state2.doc.getSelection();
27663
27649
  const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
27664
- console.log("[updateState.content] Has selection:", !!selection, "Has range:", !!range2);
27665
27650
  if (source === "html") {
27666
- console.log("[updateState.content] Processing HTML content");
27667
27651
  const preserved = preserveIframes(state2.content);
27668
- console.log("[updateState.content] Preserved iframes count:", preserved.iframes.length);
27669
27652
  state2.doc.body.innerHTML = preserved.html;
27670
27653
  setTimeout(() => {
27671
- console.log("[updateState.content] Restoring iframes");
27672
27654
  if (state2.doc) {
27673
27655
  restoreIframes(state2.doc, state2.content, preserved.iframes);
27674
27656
  if (range2 && selection) {
27675
27657
  try {
27676
27658
  selection.removeAllRanges();
27677
27659
  selection.addRange(range2);
27678
- console.log("[updateState.content] Selection restored");
27679
27660
  } catch (e) {
27680
- console.warn("[updateState.content] Could not restore selection:", e);
27681
27661
  }
27682
27662
  }
27683
27663
  }
27684
27664
  }, 0);
27685
27665
  } else {
27686
- console.log("[updateState.content] Setting text content");
27687
27666
  state2.doc.body.textContent = state2.content;
27688
27667
  }
27689
27668
  },
27690
27669
  selection: () => {
27691
27670
  if (!state2.doc) return;
27692
- console.log("[updateState.selection] Starting selection update");
27693
27671
  const newSelection = state2.doc.getSelection();
27694
27672
  if (!newSelection) {
27695
- console.log("[updateState.selection] No selection available");
27696
27673
  return;
27697
27674
  }
27698
27675
  try {
27699
27676
  if (!state2.doc.body.contains(newSelection.anchorNode)) {
27700
- console.log("[updateState.selection] Selection outside editor body, refocusing");
27701
27677
  state2.doc.body.focus();
27702
27678
  return;
27703
27679
  }
27704
27680
  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);
27705
- console.log("[updateState.selection] Selection changed:", hasSelectionChanged);
27706
27681
  if (hasSelectionChanged) {
27707
27682
  state2.selection = newSelection;
27708
27683
  state2.rangeCount = newSelection.rangeCount;
27709
27684
  if (newSelection.rangeCount > 0) {
27710
27685
  state2.range = newSelection.getRangeAt(0).cloneRange();
27711
- console.log("[updateState.selection] New range:", {
27712
- startOffset: state2.range.startOffset,
27713
- endOffset: state2.range.endOffset,
27714
- collapsed: state2.range.collapsed
27715
- });
27716
27686
  }
27717
27687
  requestAnimationFrame(() => {
27718
- console.log("[updateState.selection] Updating styles in RAF");
27719
27688
  updateState.styles();
27720
27689
  });
27721
27690
  }
27722
27691
  } catch (e) {
27723
- console.warn("[updateState.selection] Selection error:", e);
27724
27692
  state2.selection = null;
27725
27693
  state2.range = null;
27726
27694
  state2.rangeCount = 0;
@@ -27810,70 +27778,44 @@ function useEditor() {
27810
27778
  }
27811
27779
  };
27812
27780
  function setupEventListeners(doc) {
27813
- console.log("[setupEventListeners] Starting setup");
27814
27781
  if (cleanupListeners) {
27815
- console.log("[setupEventListeners] Cleaning up existing listeners");
27816
27782
  cleanupListeners();
27817
27783
  cleanupListeners = null;
27818
27784
  }
27819
27785
  let isUpdating = false;
27820
27786
  let contentUpdateTimeout = null;
27821
27787
  let selectionUpdateTimeout = null;
27822
- let updateCount = 0;
27823
27788
  const events = {
27824
27789
  input: () => {
27825
- updateCount++;
27826
- console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating);
27827
- if (isUpdating) {
27828
- console.log(`[input event #${updateCount}] Skipped - already updating`);
27829
- return;
27830
- }
27790
+ if (isUpdating) return;
27831
27791
  isUpdating = true;
27832
27792
  if (contentUpdateTimeout) {
27833
- console.log(`[input event #${updateCount}] Clearing previous timeout`);
27834
27793
  window.clearTimeout(contentUpdateTimeout);
27835
27794
  }
27836
27795
  contentUpdateTimeout = window.setTimeout(() => {
27837
- console.log(`[input event #${updateCount}] Timeout fired`);
27838
27796
  const newContent = doc.body.innerHTML;
27839
27797
  if (newContent !== state2.content) {
27840
- console.log(`[input event #${updateCount}] Content changed, updating state`);
27841
27798
  state2.content = newContent;
27842
- } else {
27843
- console.log(`[input event #${updateCount}] Content unchanged`);
27844
27799
  }
27845
27800
  isUpdating = false;
27846
27801
  }, 100);
27847
27802
  },
27848
27803
  selectionchange: () => {
27849
- updateCount++;
27850
- console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating);
27851
- if (isUpdating) {
27852
- console.log(`[selectionchange #${updateCount}] Skipped - already updating`);
27853
- return;
27854
- }
27804
+ if (isUpdating) return;
27855
27805
  if (selectionUpdateTimeout) {
27856
- console.log(`[selectionchange #${updateCount}] Clearing previous timeout`);
27857
27806
  window.clearTimeout(selectionUpdateTimeout);
27858
27807
  }
27859
27808
  selectionUpdateTimeout = window.setTimeout(() => {
27860
- console.log(`[selectionchange #${updateCount}] Timeout fired`);
27861
27809
  if (!isUpdating) {
27862
27810
  updateState.selection();
27863
- } else {
27864
- console.log(`[selectionchange #${updateCount}] Skipped - still updating`);
27865
27811
  }
27866
27812
  }, 150);
27867
27813
  },
27868
27814
  mouseup: () => {
27869
- updateCount++;
27870
- console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating);
27871
27815
  if (isUpdating) return;
27872
27816
  updateState.selection();
27873
27817
  },
27874
27818
  keyup: (e) => {
27875
- updateCount++;
27876
- console.log(`[keyup #${updateCount}] Key:`, e.key, "isUpdating:", isUpdating);
27877
27819
  if (isUpdating) return;
27878
27820
  if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
27879
27821
  updateState.selection();
@@ -27882,10 +27824,8 @@ function useEditor() {
27882
27824
  };
27883
27825
  Object.entries(events).forEach(([event, handler]) => {
27884
27826
  doc.addEventListener(event, handler);
27885
- console.log("[setupEventListeners] Added listener for:", event);
27886
27827
  });
27887
27828
  cleanupListeners = () => {
27888
- console.log("[setupEventListeners] Cleaning up event listeners");
27889
27829
  if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
27890
27830
  if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
27891
27831
  Object.entries(events).forEach(([event, handler]) => {
@@ -27895,9 +27835,7 @@ function useEditor() {
27895
27835
  return cleanupListeners;
27896
27836
  }
27897
27837
  function init(doc) {
27898
- console.log("[init] Starting initialization");
27899
27838
  if (state2.hasInit) {
27900
- console.log("[init] Already initialized, cleaning up first");
27901
27839
  if (cleanupListeners) {
27902
27840
  cleanupListeners();
27903
27841
  cleanupListeners = null;
@@ -28089,9 +28027,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28089
28027
  });
28090
28028
  async function initEditor() {
28091
28029
  var _a2;
28092
- console.log("[initEditor] Starting, isInitializing:", isInitializing.value, "hasInitialized:", hasInitialized.value);
28093
28030
  if (isInitializing.value || !iframe.value || hasInitialized.value) {
28094
- console.log("[initEditor] Skipped - already initializing/initialized or no iframe");
28095
28031
  return;
28096
28032
  }
28097
28033
  isInitializing.value = true;
@@ -28119,10 +28055,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28119
28055
  </html>
28120
28056
  `;
28121
28057
  const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
28122
- if (!doc) {
28123
- console.warn("[initEditor] No document found");
28124
- return;
28125
- }
28058
+ if (!doc) return;
28126
28059
  doc.open();
28127
28060
  doc.write(htmlContent);
28128
28061
  doc.close();
@@ -28161,7 +28094,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28161
28094
  doc.body.focus();
28162
28095
  hasInitialized.value = true;
28163
28096
  } catch (error) {
28164
- console.error("[initEditor] Error during initialization:", error);
28097
+ console.error("Error during editor initialization:", error);
28165
28098
  } finally {
28166
28099
  isInitializing.value = false;
28167
28100
  }
@@ -28169,7 +28102,6 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28169
28102
  vue.watch(() => props2.modelValue, (newValue, oldValue) => {
28170
28103
  if (newValue !== editor.state.content) {
28171
28104
  if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
28172
- console.log("[watch] Significant content change, resetting initialization state");
28173
28105
  hasInitialized.value = false;
28174
28106
  editor.state.content = newValue;
28175
28107
  editor.updateState.content("html");
@@ -28206,8 +28138,8 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28206
28138
  ref: iframe,
28207
28139
  class: "editableContent",
28208
28140
  title: "Editor",
28141
+ srcdoc: "",
28209
28142
  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",
28210
- src: "about:blank",
28211
28143
  onLoad: initEditor
28212
28144
  }, null, 544)
28213
28145
  ]),
@@ -28265,7 +28197,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
28265
28197
  };
28266
28198
  }
28267
28199
  });
28268
- const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-b58de58d"]]);
28200
+ const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-44cb2419"]]);
28269
28201
  const _hoisted_1$r = { class: "flex gap-05" };
28270
28202
  const _hoisted_2$h = ["disabled"];
28271
28203
  const _hoisted_3$d = { key: 1 };
package/dist/index.mjs CHANGED
@@ -25932,11 +25932,14 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
25932
25932
  emit2("update:modelValue", numberValue.value);
25933
25933
  }
25934
25934
  watch(() => numberValue.value, () => {
25935
- formattedValue.value = numberValue.value !== void 0 ? formatNumber2(numberValue.value) : "";
25936
- }, { immediate: true });
25935
+ nextTick(() => {
25936
+ formattedValue.value = numberValue.value !== void 0 ? formatNumber2(numberValue.value) : "";
25937
+ });
25938
+ });
25937
25939
  watch(() => __props.modelValue, (newVal) => {
25938
25940
  if (newVal !== numberValue.value) {
25939
25941
  numberValue.value = Number.parseFloat(`${newVal}`) || 0;
25942
+ console.log("newVal", numberValue.value);
25940
25943
  }
25941
25944
  }, { immediate: true });
25942
25945
  return (_ctx, _cache) => {
@@ -26040,7 +26043,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
26040
26043
  };
26041
26044
  }
26042
26045
  });
26043
- const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-26b79ca5"]]);
26046
+ const NumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-3b46ec89"]]);
26044
26047
  const _hoisted_1$z = ["value", "autofocus", "onKeydown", "onPaste"];
26045
26048
  const _sfc_main$G = /* @__PURE__ */ defineComponent({
26046
26049
  __name: "OTP",
@@ -27389,10 +27392,8 @@ function useCommands(state2, debug) {
27389
27392
  return {
27390
27393
  execute: (command, value) => {
27391
27394
  if (!state2.doc) return;
27392
- console.log("[useCommands.execute] Starting command execution:", command, value);
27393
27395
  debug == null ? void 0 : debug.logCommand(command, value);
27394
27396
  if (["splitView", "codeView", "fullScreen"].includes(command)) {
27395
- console.log("[useCommands.execute] Handling view state command:", command);
27396
27397
  switch (command) {
27397
27398
  case "splitView":
27398
27399
  state2.isSplitView = !state2.isSplitView;
@@ -27405,25 +27406,16 @@ function useCommands(state2, debug) {
27405
27406
  return;
27406
27407
  }
27407
27408
  }
27408
- console.log("[useCommands.execute] Focusing editor");
27409
27409
  state2.doc.body.focus();
27410
- console.log("[useCommands.execute] Executing command");
27411
27410
  executor.execute(command, value);
27412
27411
  const newContent = state2.doc.body.innerHTML;
27413
- console.log("[useCommands.execute] Checking content changes");
27414
- console.log("[useCommands.execute] Old content length:", state2.content.length);
27415
- console.log("[useCommands.execute] New content length:", newContent.length);
27416
27412
  if (newContent !== state2.content) {
27417
- console.log("[useCommands.execute] Content changed, updating state");
27418
27413
  state2.content = newContent;
27419
27414
  }
27420
- console.log("[useCommands.execute] Checking selection changes");
27421
27415
  const selection = state2.doc.getSelection();
27422
27416
  if (selection == null ? void 0 : selection.rangeCount) {
27423
27417
  const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
27424
- console.log("[useCommands.execute] Selection changed:", hasSelectionChanged);
27425
27418
  if (hasSelectionChanged) {
27426
- console.log("[useCommands.execute] Updating selection state");
27427
27419
  state2.selection = selection;
27428
27420
  state2.range = selection.getRangeAt(0).cloneRange();
27429
27421
  state2.rangeCount = selection.rangeCount;
@@ -27620,7 +27612,6 @@ function useEditor() {
27620
27612
  const updateState = {
27621
27613
  styles: () => {
27622
27614
  if (!state2.doc) return;
27623
- console.log("[updateState.styles] Starting style update");
27624
27615
  const styles = /* @__PURE__ */ new Set();
27625
27616
  const styleTypes = [
27626
27617
  "bold",
@@ -27643,82 +27634,59 @@ function useEditor() {
27643
27634
  styles.add(style);
27644
27635
  }
27645
27636
  });
27646
- console.log("[updateState.styles] New styles:", Array.from(styles));
27647
27637
  state2.selectedStyles = styles;
27648
27638
  },
27649
27639
  content: (source) => {
27650
27640
  if (!state2.doc) return;
27651
- console.log("[updateState.content] Starting content update, source:", source);
27652
27641
  const currentContent = state2.doc.body.innerHTML;
27653
- console.log("[updateState.content] Current content length:", currentContent.length);
27654
- console.log("[updateState.content] State content length:", state2.content.length);
27655
27642
  if (currentContent !== state2.content) {
27656
- console.log("[updateState.content] Content changed, pushing to undo stack");
27657
27643
  state2.undoStack.push(state2.content);
27658
27644
  state2.redoStack = [];
27659
27645
  }
27660
27646
  const selection = state2.doc.getSelection();
27661
27647
  const range2 = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0).cloneRange() : null;
27662
- console.log("[updateState.content] Has selection:", !!selection, "Has range:", !!range2);
27663
27648
  if (source === "html") {
27664
- console.log("[updateState.content] Processing HTML content");
27665
27649
  const preserved = preserveIframes(state2.content);
27666
- console.log("[updateState.content] Preserved iframes count:", preserved.iframes.length);
27667
27650
  state2.doc.body.innerHTML = preserved.html;
27668
27651
  setTimeout(() => {
27669
- console.log("[updateState.content] Restoring iframes");
27670
27652
  if (state2.doc) {
27671
27653
  restoreIframes(state2.doc, state2.content, preserved.iframes);
27672
27654
  if (range2 && selection) {
27673
27655
  try {
27674
27656
  selection.removeAllRanges();
27675
27657
  selection.addRange(range2);
27676
- console.log("[updateState.content] Selection restored");
27677
27658
  } catch (e) {
27678
- console.warn("[updateState.content] Could not restore selection:", e);
27679
27659
  }
27680
27660
  }
27681
27661
  }
27682
27662
  }, 0);
27683
27663
  } else {
27684
- console.log("[updateState.content] Setting text content");
27685
27664
  state2.doc.body.textContent = state2.content;
27686
27665
  }
27687
27666
  },
27688
27667
  selection: () => {
27689
27668
  if (!state2.doc) return;
27690
- console.log("[updateState.selection] Starting selection update");
27691
27669
  const newSelection = state2.doc.getSelection();
27692
27670
  if (!newSelection) {
27693
- console.log("[updateState.selection] No selection available");
27694
27671
  return;
27695
27672
  }
27696
27673
  try {
27697
27674
  if (!state2.doc.body.contains(newSelection.anchorNode)) {
27698
- console.log("[updateState.selection] Selection outside editor body, refocusing");
27699
27675
  state2.doc.body.focus();
27700
27676
  return;
27701
27677
  }
27702
27678
  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);
27703
- console.log("[updateState.selection] Selection changed:", hasSelectionChanged);
27704
27679
  if (hasSelectionChanged) {
27705
27680
  state2.selection = newSelection;
27706
27681
  state2.rangeCount = newSelection.rangeCount;
27707
27682
  if (newSelection.rangeCount > 0) {
27708
27683
  state2.range = newSelection.getRangeAt(0).cloneRange();
27709
- console.log("[updateState.selection] New range:", {
27710
- startOffset: state2.range.startOffset,
27711
- endOffset: state2.range.endOffset,
27712
- collapsed: state2.range.collapsed
27713
- });
27714
27684
  }
27715
27685
  requestAnimationFrame(() => {
27716
- console.log("[updateState.selection] Updating styles in RAF");
27717
27686
  updateState.styles();
27718
27687
  });
27719
27688
  }
27720
27689
  } catch (e) {
27721
- console.warn("[updateState.selection] Selection error:", e);
27722
27690
  state2.selection = null;
27723
27691
  state2.range = null;
27724
27692
  state2.rangeCount = 0;
@@ -27808,70 +27776,44 @@ function useEditor() {
27808
27776
  }
27809
27777
  };
27810
27778
  function setupEventListeners(doc) {
27811
- console.log("[setupEventListeners] Starting setup");
27812
27779
  if (cleanupListeners) {
27813
- console.log("[setupEventListeners] Cleaning up existing listeners");
27814
27780
  cleanupListeners();
27815
27781
  cleanupListeners = null;
27816
27782
  }
27817
27783
  let isUpdating = false;
27818
27784
  let contentUpdateTimeout = null;
27819
27785
  let selectionUpdateTimeout = null;
27820
- let updateCount = 0;
27821
27786
  const events = {
27822
27787
  input: () => {
27823
- updateCount++;
27824
- console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating);
27825
- if (isUpdating) {
27826
- console.log(`[input event #${updateCount}] Skipped - already updating`);
27827
- return;
27828
- }
27788
+ if (isUpdating) return;
27829
27789
  isUpdating = true;
27830
27790
  if (contentUpdateTimeout) {
27831
- console.log(`[input event #${updateCount}] Clearing previous timeout`);
27832
27791
  window.clearTimeout(contentUpdateTimeout);
27833
27792
  }
27834
27793
  contentUpdateTimeout = window.setTimeout(() => {
27835
- console.log(`[input event #${updateCount}] Timeout fired`);
27836
27794
  const newContent = doc.body.innerHTML;
27837
27795
  if (newContent !== state2.content) {
27838
- console.log(`[input event #${updateCount}] Content changed, updating state`);
27839
27796
  state2.content = newContent;
27840
- } else {
27841
- console.log(`[input event #${updateCount}] Content unchanged`);
27842
27797
  }
27843
27798
  isUpdating = false;
27844
27799
  }, 100);
27845
27800
  },
27846
27801
  selectionchange: () => {
27847
- updateCount++;
27848
- console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating);
27849
- if (isUpdating) {
27850
- console.log(`[selectionchange #${updateCount}] Skipped - already updating`);
27851
- return;
27852
- }
27802
+ if (isUpdating) return;
27853
27803
  if (selectionUpdateTimeout) {
27854
- console.log(`[selectionchange #${updateCount}] Clearing previous timeout`);
27855
27804
  window.clearTimeout(selectionUpdateTimeout);
27856
27805
  }
27857
27806
  selectionUpdateTimeout = window.setTimeout(() => {
27858
- console.log(`[selectionchange #${updateCount}] Timeout fired`);
27859
27807
  if (!isUpdating) {
27860
27808
  updateState.selection();
27861
- } else {
27862
- console.log(`[selectionchange #${updateCount}] Skipped - still updating`);
27863
27809
  }
27864
27810
  }, 150);
27865
27811
  },
27866
27812
  mouseup: () => {
27867
- updateCount++;
27868
- console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating);
27869
27813
  if (isUpdating) return;
27870
27814
  updateState.selection();
27871
27815
  },
27872
27816
  keyup: (e) => {
27873
- updateCount++;
27874
- console.log(`[keyup #${updateCount}] Key:`, e.key, "isUpdating:", isUpdating);
27875
27817
  if (isUpdating) return;
27876
27818
  if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
27877
27819
  updateState.selection();
@@ -27880,10 +27822,8 @@ function useEditor() {
27880
27822
  };
27881
27823
  Object.entries(events).forEach(([event, handler]) => {
27882
27824
  doc.addEventListener(event, handler);
27883
- console.log("[setupEventListeners] Added listener for:", event);
27884
27825
  });
27885
27826
  cleanupListeners = () => {
27886
- console.log("[setupEventListeners] Cleaning up event listeners");
27887
27827
  if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
27888
27828
  if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
27889
27829
  Object.entries(events).forEach(([event, handler]) => {
@@ -27893,9 +27833,7 @@ function useEditor() {
27893
27833
  return cleanupListeners;
27894
27834
  }
27895
27835
  function init(doc) {
27896
- console.log("[init] Starting initialization");
27897
27836
  if (state2.hasInit) {
27898
- console.log("[init] Already initialized, cleaning up first");
27899
27837
  if (cleanupListeners) {
27900
27838
  cleanupListeners();
27901
27839
  cleanupListeners = null;
@@ -28087,9 +28025,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28087
28025
  });
28088
28026
  async function initEditor() {
28089
28027
  var _a2;
28090
- console.log("[initEditor] Starting, isInitializing:", isInitializing.value, "hasInitialized:", hasInitialized.value);
28091
28028
  if (isInitializing.value || !iframe.value || hasInitialized.value) {
28092
- console.log("[initEditor] Skipped - already initializing/initialized or no iframe");
28093
28029
  return;
28094
28030
  }
28095
28031
  isInitializing.value = true;
@@ -28117,10 +28053,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28117
28053
  </html>
28118
28054
  `;
28119
28055
  const doc = iframe.value.contentDocument || ((_a2 = iframe.value.contentWindow) == null ? void 0 : _a2.document);
28120
- if (!doc) {
28121
- console.warn("[initEditor] No document found");
28122
- return;
28123
- }
28056
+ if (!doc) return;
28124
28057
  doc.open();
28125
28058
  doc.write(htmlContent);
28126
28059
  doc.close();
@@ -28159,7 +28092,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28159
28092
  doc.body.focus();
28160
28093
  hasInitialized.value = true;
28161
28094
  } catch (error) {
28162
- console.error("[initEditor] Error during initialization:", error);
28095
+ console.error("Error during editor initialization:", error);
28163
28096
  } finally {
28164
28097
  isInitializing.value = false;
28165
28098
  }
@@ -28167,7 +28100,6 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28167
28100
  watch(() => props2.modelValue, (newValue, oldValue) => {
28168
28101
  if (newValue !== editor.state.content) {
28169
28102
  if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
28170
- console.log("[watch] Significant content change, resetting initialization state");
28171
28103
  hasInitialized.value = false;
28172
28104
  editor.state.content = newValue;
28173
28105
  editor.updateState.content("html");
@@ -28204,8 +28136,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28204
28136
  ref: iframe,
28205
28137
  class: "editableContent",
28206
28138
  title: "Editor",
28139
+ srcdoc: "",
28207
28140
  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",
28208
- src: "about:blank",
28209
28141
  onLoad: initEditor
28210
28142
  }, null, 544)
28211
28143
  ]),
@@ -28263,7 +28195,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
28263
28195
  };
28264
28196
  }
28265
28197
  });
28266
- const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-b58de58d"]]);
28198
+ const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-44cb2419"]]);
28267
28199
  const _hoisted_1$r = { class: "flex gap-05" };
28268
28200
  const _hoisted_2$h = ["disabled"];
28269
28201
  const _hoisted_3$d = { key: 1 };
package/dist/style.css CHANGED
@@ -1846,14 +1846,14 @@ pre code.hljs{
1846
1846
  direction: ltr;
1847
1847
  }
1848
1848
 
1849
- .txtInputIconStart .iconStart[data-v-26b79ca5] {
1849
+ .txtInputIconStart .iconStart[data-v-3b46ec89] {
1850
1850
  color: var(--input-color);
1851
1851
  position: absolute;
1852
1852
  inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
1853
1853
  margin-top: calc(var(--input-height) / 2 );
1854
1854
  line-height: 0;
1855
1855
  }
1856
- .textInputSpinnerWrap .spinner[data-v-26b79ca5] {
1856
+ .textInputSpinnerWrap .spinner[data-v-3b46ec89] {
1857
1857
  color: var(--input-color);
1858
1858
  position: absolute;
1859
1859
  inset-inline-end: 0;
@@ -1863,18 +1863,18 @@ pre code.hljs{
1863
1863
  flex-direction: column;
1864
1864
  gap: 0;
1865
1865
  }
1866
- .top-bgl-ctrl-num-btn[data-v-26b79ca5]{
1866
+ .top-bgl-ctrl-num-btn[data-v-3b46ec89]{
1867
1867
  margin-top: calc(var(--input-height) / 10) !important;
1868
1868
  }
1869
- .bgl-ctrl-num-btn[data-v-26b79ca5]{
1869
+ .bgl-ctrl-num-btn[data-v-3b46ec89]{
1870
1870
  height: calc(var(--input-height) / 2.5) !important;
1871
1871
  isolation: isolate;
1872
1872
  }
1873
- .bgl-big-ctrl-num-btn[data-v-26b79ca5]{
1873
+ .bgl-big-ctrl-num-btn[data-v-3b46ec89]{
1874
1874
  width: 100% !important;
1875
1875
  isolation: isolate;
1876
1876
  }
1877
- .bgl-number-input[data-v-26b79ca5]{
1877
+ .bgl-number-input[data-v-3b46ec89]{
1878
1878
  padding-inline-end: 1.75rem !important;
1879
1879
  }
1880
1880
 
@@ -2058,26 +2058,26 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
2058
2058
  line-height: 1.65;
2059
2059
  }
2060
2060
 
2061
- .rich-text-editor[data-v-b58de58d] {
2061
+ .rich-text-editor[data-v-44cb2419] {
2062
2062
  background: var(--input-bg);
2063
2063
  border: 1px solid var(--border-color);
2064
2064
  transition: all 0.3s ease;
2065
2065
  }
2066
- .editor-container[data-v-b58de58d] {
2066
+ .editor-container[data-v-44cb2419] {
2067
2067
  display: flex;
2068
2068
  gap: 1rem;
2069
2069
  }
2070
- .content-area[data-v-b58de58d],
2071
- .preview-area[data-v-b58de58d] {
2070
+ .content-area[data-v-44cb2419],
2071
+ .preview-area[data-v-44cb2419] {
2072
2072
  flex: 1;
2073
2073
  min-height: 200px;
2074
2074
  background: var(--bgl-richtext-color);
2075
2075
  }
2076
- .split-view[data-v-b58de58d] {
2076
+ .split-view[data-v-44cb2419] {
2077
2077
  display: grid;
2078
2078
  grid-template-columns: 1fr 1fr;
2079
2079
  }
2080
- .editableContent[data-v-b58de58d] {
2080
+ .editableContent[data-v-44cb2419] {
2081
2081
  width: 100%;
2082
2082
  min-height: 240px;
2083
2083
  height: 100%;
@@ -2085,7 +2085,7 @@ line-height: 1.65;
2085
2085
  outline: none;
2086
2086
  background: transparent;
2087
2087
  }
2088
- .html-editor[data-v-b58de58d] {
2088
+ .html-editor[data-v-44cb2419] {
2089
2089
  width: 100%;
2090
2090
  height: 100%;
2091
2091
  min-height: 200px;
@@ -2096,12 +2096,12 @@ line-height: 1.65;
2096
2096
  color: white;
2097
2097
  background-color: var(--bgl-black);
2098
2098
  }
2099
- .preview-area[data-v-b58de58d] {
2099
+ .preview-area[data-v-44cb2419] {
2100
2100
  font-family: monospace;
2101
2101
  white-space: pre-wrap;
2102
2102
  overflow-x: auto;
2103
2103
  }
2104
- .fullscreen-mode[data-v-b58de58d] {
2104
+ .fullscreen-mode[data-v-44cb2419] {
2105
2105
  position: fixed;
2106
2106
  top: 0;
2107
2107
  left: 0;
@@ -2110,18 +2110,18 @@ line-height: 1.65;
2110
2110
  z-index: 9999;
2111
2111
  padding: 2rem;
2112
2112
  }
2113
- .fullscreen-mode .editor-container[data-v-b58de58d] {
2113
+ .fullscreen-mode .editor-container[data-v-44cb2419] {
2114
2114
  height: calc(100vh - 4rem);
2115
2115
  }
2116
- .fullscreen-mode .content-area[data-v-b58de58d],
2117
- .fullscreen-mode .preview-area[data-v-b58de58d] {
2116
+ .fullscreen-mode .content-area[data-v-44cb2419],
2117
+ .fullscreen-mode .preview-area[data-v-44cb2419] {
2118
2118
  height: 100%;
2119
2119
  overflow-y: auto;
2120
2120
  }
2121
- .fullscreen-mode .code-editor[data-v-b58de58d]{
2121
+ .fullscreen-mode .code-editor[data-v-44cb2419]{
2122
2122
  height: 100% !important;
2123
2123
  }
2124
- .debug-controls[data-v-b58de58d] {
2124
+ .debug-controls[data-v-44cb2419] {
2125
2125
  display: flex;
2126
2126
  gap: 0.5rem;
2127
2127
  justify-content: flex-end;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.1270",
4
+ "version": "0.0.1274",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -1,7 +1,7 @@
1
1
  <script setup lang="ts">
2
2
  import type { IconType } from '@bagelink/vue'
3
3
  import { Icon, Btn } from '@bagelink/vue'
4
- import { onMounted, watch } from 'vue'
4
+ import { nextTick, onMounted, watch } from 'vue'
5
5
 
6
6
  type NumberLayout = 'default' | 'vertical' | 'horizontal'
7
7
 
@@ -118,12 +118,15 @@ function inputHandler() {
118
118
  }
119
119
 
120
120
  watch(() => numberValue, () => {
121
- formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
122
- }, { immediate: true })
121
+ nextTick(() => {
122
+ formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
123
+ })
124
+ })
123
125
 
124
126
  watch(() => modelValue, (newVal) => {
125
127
  if (newVal !== numberValue) {
126
128
  numberValue = Number.parseFloat(`${newVal}`) || 0
129
+ console.log('newVal', numberValue)
127
130
  }
128
131
  }, { immediate: true })
129
132
  </script>
@@ -9,14 +9,11 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
9
9
  execute: (command: string, value?: string) => {
10
10
  if (!state.doc) return
11
11
 
12
- console.log('[useCommands.execute] Starting command execution:', command, value)
13
-
14
12
  // Log command if debug is enabled
15
13
  debug?.logCommand(command, value)
16
14
 
17
15
  // Handle view state commands directly
18
16
  if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
19
- console.log('[useCommands.execute] Handling view state command:', command)
20
17
  switch (command) {
21
18
  case 'splitView':
22
19
  state.isSplitView = !state.isSplitView
@@ -31,34 +28,25 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
31
28
  }
32
29
 
33
30
  // Focus the editor before executing command
34
- console.log('[useCommands.execute] Focusing editor')
35
31
  state.doc.body.focus()
36
32
 
37
33
  // Execute the command
38
- console.log('[useCommands.execute] Executing command')
39
34
  executor.execute(command, value)
40
35
 
41
36
  // Update content state only if it has changed
42
37
  const newContent = state.doc.body.innerHTML
43
- console.log('[useCommands.execute] Checking content changes')
44
- console.log('[useCommands.execute] Old content length:', state.content.length)
45
- console.log('[useCommands.execute] New content length:', newContent.length)
46
38
  if (newContent !== state.content) {
47
- console.log('[useCommands.execute] Content changed, updating state')
48
39
  state.content = newContent
49
40
  }
50
41
 
51
42
  // Update selection state if needed
52
- console.log('[useCommands.execute] Checking selection changes')
53
43
  const selection = state.doc.getSelection()
54
44
  if (selection?.rangeCount) {
55
45
  const hasSelectionChanged = !state.selection
56
46
  || state.selection !== selection
57
47
  || state.rangeCount !== selection.rangeCount
58
48
 
59
- console.log('[useCommands.execute] Selection changed:', hasSelectionChanged)
60
49
  if (hasSelectionChanged) {
61
- console.log('[useCommands.execute] Updating selection state')
62
50
  state.selection = selection
63
51
  state.range = selection.getRangeAt(0).cloneRange()
64
52
  state.rangeCount = selection.rangeCount
@@ -58,7 +58,6 @@ export function useEditor() {
58
58
  const updateState = {
59
59
  styles: () => {
60
60
  if (!state.doc) return
61
- console.log('[updateState.styles] Starting style update')
62
61
  const styles = new Set<string>()
63
62
  const styleTypes = [
64
63
  'bold',
@@ -81,19 +80,14 @@ export function useEditor() {
81
80
  styles.add(style)
82
81
  }
83
82
  })
84
- console.log('[updateState.styles] New styles:', Array.from(styles))
85
83
  state.selectedStyles = styles
86
84
  },
87
85
  content: (source: 'html' | 'text') => {
88
86
  if (!state.doc) return
89
- console.log('[updateState.content] Starting content update, source:', source)
90
87
 
91
88
  // Only push to undo stack if content has changed
92
89
  const currentContent = state.doc.body.innerHTML
93
- console.log('[updateState.content] Current content length:', currentContent.length)
94
- console.log('[updateState.content] State content length:', state.content.length)
95
90
  if (currentContent !== state.content) {
96
- console.log('[updateState.content] Content changed, pushing to undo stack')
97
91
  state.undoStack.push(state.content)
98
92
  state.redoStack = []
99
93
  }
@@ -101,18 +95,14 @@ export function useEditor() {
101
95
  // Store current selection
102
96
  const selection = state.doc.getSelection()
103
97
  const range = selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null
104
- console.log('[updateState.content] Has selection:', !!selection, 'Has range:', !!range)
105
98
 
106
99
  if (source === 'html') {
107
- console.log('[updateState.content] Processing HTML content')
108
100
  // Preserve iframes before setting content
109
101
  const preserved = preserveIframes(state.content)
110
- console.log('[updateState.content] Preserved iframes count:', preserved.iframes.length)
111
102
  state.doc.body.innerHTML = preserved.html
112
103
 
113
104
  // Restore iframes after a short delay to ensure the document is ready
114
105
  setTimeout(() => {
115
- console.log('[updateState.content] Restoring iframes')
116
106
  if (state.doc) {
117
107
  restoreIframes(state.doc, state.content, preserved.iframes)
118
108
 
@@ -121,30 +111,24 @@ export function useEditor() {
121
111
  try {
122
112
  selection.removeAllRanges()
123
113
  selection.addRange(range)
124
- console.log('[updateState.content] Selection restored')
125
114
  } catch (e) {
126
- console.warn('[updateState.content] Could not restore selection:', e)
127
115
  }
128
116
  }
129
117
  }
130
118
  }, 0)
131
119
  } else {
132
- console.log('[updateState.content] Setting text content')
133
120
  state.doc.body.textContent = state.content
134
121
  }
135
122
  },
136
123
  selection: () => {
137
124
  if (!state.doc) return
138
- console.log('[updateState.selection] Starting selection update')
139
125
  const newSelection = state.doc.getSelection()
140
126
  if (!newSelection) {
141
- console.log('[updateState.selection] No selection available')
142
127
  return
143
128
  }
144
129
 
145
130
  try {
146
131
  if (!state.doc.body.contains(newSelection.anchorNode)) {
147
- console.log('[updateState.selection] Selection outside editor body, refocusing')
148
132
  state.doc.body.focus()
149
133
  return
150
134
  }
@@ -160,28 +144,20 @@ export function useEditor() {
160
144
  || state.range.endOffset !== newSelection.getRangeAt(0).endOffset
161
145
  ))
162
146
 
163
- console.log('[updateState.selection] Selection changed:', hasSelectionChanged)
164
147
  if (hasSelectionChanged) {
165
148
  state.selection = newSelection
166
149
  state.rangeCount = newSelection.rangeCount
167
150
 
168
151
  if (newSelection.rangeCount > 0) {
169
152
  state.range = newSelection.getRangeAt(0).cloneRange()
170
- console.log('[updateState.selection] New range:', {
171
- startOffset: state.range.startOffset,
172
- endOffset: state.range.endOffset,
173
- collapsed: state.range.collapsed
174
- })
175
153
  }
176
154
 
177
155
  // Update styles less frequently
178
156
  requestAnimationFrame(() => {
179
- console.log('[updateState.selection] Updating styles in RAF')
180
157
  updateState.styles()
181
158
  })
182
159
  }
183
160
  } catch (e) {
184
- console.warn('[updateState.selection] Selection error:', e)
185
161
  state.selection = null
186
162
  state.range = null
187
163
  state.rangeCount = 0
@@ -275,10 +251,8 @@ export function useEditor() {
275
251
  }
276
252
 
277
253
  function setupEventListeners(doc: Document) {
278
- console.log('[setupEventListeners] Starting setup')
279
254
  // Clean up existing listeners if they exist
280
255
  if (cleanupListeners) {
281
- console.log('[setupEventListeners] Cleaning up existing listeners')
282
256
  cleanupListeners()
283
257
  cleanupListeners = null
284
258
  }
@@ -291,62 +265,43 @@ export function useEditor() {
291
265
  const events = {
292
266
  input: () => {
293
267
  updateCount++
294
- console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating)
295
- if (isUpdating) {
296
- console.log(`[input event #${updateCount}] Skipped - already updating`)
297
- return
298
- }
268
+ if (isUpdating) return
299
269
  isUpdating = true
300
270
 
301
271
  // Clear any pending content updates
302
272
  if (contentUpdateTimeout) {
303
- console.log(`[input event #${updateCount}] Clearing previous timeout`)
304
273
  window.clearTimeout(contentUpdateTimeout)
305
274
  }
306
275
 
307
276
  contentUpdateTimeout = window.setTimeout(() => {
308
- console.log(`[input event #${updateCount}] Timeout fired`)
309
277
  const newContent = doc.body.innerHTML
310
278
  if (newContent !== state.content) {
311
- console.log(`[input event #${updateCount}] Content changed, updating state`)
312
279
  state.content = newContent
313
- } else {
314
- console.log(`[input event #${updateCount}] Content unchanged`)
315
280
  }
316
281
  isUpdating = false
317
282
  }, 100)
318
283
  },
319
284
  selectionchange: () => {
320
285
  updateCount++
321
- console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating)
322
- if (isUpdating) {
323
- console.log(`[selectionchange #${updateCount}] Skipped - already updating`)
324
- return
325
- }
286
+ if (isUpdating) return
326
287
 
327
288
  if (selectionUpdateTimeout) {
328
- console.log(`[selectionchange #${updateCount}] Clearing previous timeout`)
329
289
  window.clearTimeout(selectionUpdateTimeout)
330
290
  }
331
291
 
332
292
  selectionUpdateTimeout = window.setTimeout(() => {
333
- console.log(`[selectionchange #${updateCount}] Timeout fired`)
334
293
  if (!isUpdating) {
335
294
  updateState.selection()
336
- } else {
337
- console.log(`[selectionchange #${updateCount}] Skipped - still updating`)
338
295
  }
339
296
  }, 150)
340
297
  },
341
298
  mouseup: () => {
342
299
  updateCount++
343
- console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating)
344
300
  if (isUpdating) return
345
301
  updateState.selection()
346
302
  },
347
303
  keyup: (e: KeyboardEvent) => {
348
304
  updateCount++
349
- console.log(`[keyup #${updateCount}] Key:`, e.key, 'isUpdating:', isUpdating)
350
305
  if (isUpdating) return
351
306
  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
352
307
  updateState.selection()
@@ -357,12 +312,10 @@ export function useEditor() {
357
312
  // Only add listeners if they haven't been added yet
358
313
  Object.entries(events).forEach(([event, handler]) => {
359
314
  doc.addEventListener(event, handler as EventListener)
360
- console.log('[setupEventListeners] Added listener for:', event)
361
315
  })
362
316
 
363
317
  // Store cleanup function
364
318
  cleanupListeners = () => {
365
- console.log('[setupEventListeners] Cleaning up event listeners')
366
319
  if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout)
367
320
  if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout)
368
321
  Object.entries(events).forEach(([event, handler]) => {
@@ -374,9 +327,7 @@ export function useEditor() {
374
327
  }
375
328
 
376
329
  function init(doc: Document) {
377
- console.log('[init] Starting initialization')
378
330
  if (state.hasInit) {
379
- console.log('[init] Already initialized, cleaning up first')
380
331
  if (cleanupListeners) {
381
332
  cleanupListeners()
382
333
  cleanupListeners = null
@@ -32,9 +32,7 @@ onUnmounted(() => {
32
32
  })
33
33
 
34
34
  async function initEditor() {
35
- console.log('[initEditor] Starting, isInitializing:', isInitializing.value, 'hasInitialized:', hasInitialized.value)
36
35
  if (isInitializing.value || !iframe.value || hasInitialized.value) {
37
- console.log('[initEditor] Skipped - already initializing/initialized or no iframe')
38
36
  return
39
37
  }
40
38
 
@@ -69,10 +67,7 @@ async function initEditor() {
69
67
 
70
68
  // Write the complete HTML document to the iframe
71
69
  const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document
72
- if (!doc) {
73
- console.warn('[initEditor] No document found')
74
- return
75
- }
70
+ if (!doc) return
76
71
 
77
72
  // First write the content
78
73
  doc.open()
@@ -122,7 +117,8 @@ async function initEditor() {
122
117
  doc.body.focus()
123
118
  hasInitialized.value = true
124
119
  } catch (error) {
125
- console.error('[initEditor] Error during initialization:', error)
120
+ // Keep only this error log for debugging critical issues
121
+ console.error('Error during editor initialization:', error)
126
122
  } finally {
127
123
  isInitializing.value = false
128
124
  }
@@ -133,7 +129,6 @@ watch(() => props.modelValue, (newValue, oldValue) => {
133
129
  if (newValue !== editor.state.content) {
134
130
  // Only reset if content change is significant (not just minor edits)
135
131
  if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
136
- console.log('[watch] Significant content change, resetting initialization state')
137
132
  hasInitialized.value = false
138
133
  editor.state.content = newValue
139
134
  editor.updateState.content('html')
@@ -164,8 +159,8 @@ watch(() => editor.state.content, (newValue) => {
164
159
  ref="iframe"
165
160
  class="editableContent"
166
161
  title="Editor"
162
+ srcdoc=""
167
163
  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"
168
- src="about:blank"
169
164
  @load="initEditor"
170
165
  />
171
166
  </div>