@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.
- package/dist/components/form/inputs/NumberInput.vue.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/composables/useCommands.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/composables/useEditor.d.ts.map +1 -1
- package/dist/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
- package/dist/index.cjs +12 -80
- package/dist/index.mjs +12 -80
- package/dist/style.css +20 -20
- package/package.json +1 -1
- package/src/components/form/inputs/NumberInput.vue +6 -3
- package/src/components/form/inputs/RichText/composables/useCommands.ts +0 -12
- package/src/components/form/inputs/RichText/composables/useEditor.ts +2 -51
- package/src/components/form/inputs/RichText/index.vue +4 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/NumberInput.vue"],"names":[],"mappings":"
|
|
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;;;
|
|
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;;;
|
|
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":"
|
|
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
|
-
|
|
25938
|
-
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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("
|
|
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-
|
|
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
|
-
|
|
25936
|
-
|
|
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-
|
|
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
|
-
|
|
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
|
-
|
|
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("
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
2066
|
+
.editor-container[data-v-44cb2419] {
|
|
2067
2067
|
display: flex;
|
|
2068
2068
|
gap: 1rem;
|
|
2069
2069
|
}
|
|
2070
|
-
.content-area[data-v-
|
|
2071
|
-
.preview-area[data-v-
|
|
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-
|
|
2076
|
+
.split-view[data-v-44cb2419] {
|
|
2077
2077
|
display: grid;
|
|
2078
2078
|
grid-template-columns: 1fr 1fr;
|
|
2079
2079
|
}
|
|
2080
|
-
.editableContent[data-v-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
2113
|
+
.fullscreen-mode .editor-container[data-v-44cb2419] {
|
|
2114
2114
|
height: calc(100vh - 4rem);
|
|
2115
2115
|
}
|
|
2116
|
-
.fullscreen-mode .content-area[data-v-
|
|
2117
|
-
.fullscreen-mode .preview-area[data-v-
|
|
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-
|
|
2121
|
+
.fullscreen-mode .code-editor[data-v-44cb2419]{
|
|
2122
2122
|
height: 100% !important;
|
|
2123
2123
|
}
|
|
2124
|
-
.debug-controls[data-v-
|
|
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
|
<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
|
-
|
|
122
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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>
|