@bagelink/vue 0.0.1294 → 0.0.1296

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

@@ -1 +1 @@
-{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/composables/useEditor.ts"],"names":[],"mappings":"AAmCA,wBAAgB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eALR,UAAU;;;;;;;;;;;;qDAlBI,CAAC;;+CAG9B,CAAD;;;;2CAGC,CAAC;;;gBAsTiB,QAAQ;;;0BApPR,MAAM,GAAG,MAAM;;;;;;;;;EAwUlC"}
+{"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;;;gBAkSiB,QAAQ;;;0BAhOR,MAAM,GAAG,MAAM;;;;;;;;;EAuTlC"}

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

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

package/dist/components/form/inputs/RichText/utils/media.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAKnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QAwClE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QAmBjE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QA0DlE"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/media.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAKnD,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QAyClE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QAoBjE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,QA2DlE"}

package/dist/components/form/inputs/RichText/utils/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,QAmBzE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAcrD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAiBpD;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAY/E;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,QAQrC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,QAQvC;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,EAAE,KAAK,QAgBtE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,QAkBxC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,QAgB3F"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/table.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,QAoBzE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAoBrD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAuBpD;AAED,wBAAgB,MAAM,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,QAkB/E;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,QAerC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,QAevC;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,EAAE,KAAK,EAAE,KAAK,QAsBtE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,QAyBxC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,QAsB3F"}

package/dist/index.cjs

@@ -18470,6 +18470,7 @@ function insertImage(modal, state2) {
         })() : img;
         range2.collapse(false);
         range2.insertNode(node);
+        state2.content = doc.body.innerHTML;
       }
     }
   });
@@ -18489,6 +18490,7 @@ function insertLink(modal, state2) {
         anchor.href = data2.url;
         if (data2.openInNewTab) anchor.target = "_blank";
         range2.surroundContents(anchor);
+        state2.content = doc.body.innerHTML;
       }
     }
   });
@@ -18536,6 +18538,7 @@ function insertEmbed(modal, state2) {
       wrapper.appendChild(iframe);
       range2.deleteContents();
       range2.insertNode(wrapper);
+      state2.content = doc.body.innerHTML;
     }
   });
 }
@@ -18557,6 +18560,7 @@ function insertTable(rows, cols, state2) {
   } else {
     state2.doc.body.appendChild(table);
   }
+  state2.content = state2.doc.body.innerHTML;
 }
 function mergeCells(range2, doc) {
   var _a;
@@ -18570,6 +18574,10 @@ function mergeCells(range2, doc) {
     const actualCell = doc.getElementById(cell.id);
     actualCell == null ? void 0 : actualCell.remove();
   });
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function splitCell(range2, doc) {
   var _a;
@@ -18587,6 +18595,10 @@ function splitCell(range2, doc) {
   newCells.slice(1).forEach((newCell) => {
     newCells[0].insertAdjacentElement("afterend", newCell);
   });
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function addRow(position, range2, doc) {
   var _a;
@@ -18598,6 +18610,10 @@ function addRow(position, range2, doc) {
   const newRow = row.cloneNode(true);
   Array.from(newRow.cells).forEach((cell2) => cell2.innerHTML = " ");
   row.insertAdjacentElement(position === "before" ? "beforebegin" : "afterend", newRow);
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function deleteRow(range2) {
   var _a;
@@ -18605,7 +18621,12 @@ function deleteRow(range2) {
   if (!cell) return;
   const row = cell.parentElement;
   if (!row) return;
+  const doc = row.ownerDocument;
   row.remove();
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function deleteTable(range2) {
   var _a;
@@ -18613,7 +18634,12 @@ function deleteTable(range2) {
   if (!cell) return;
   const table = cell.closest("table");
   if (!table) return;
+  const doc = table.ownerDocument;
   table.remove();
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function insertColumn(position, range2) {
   var _a;
@@ -18629,6 +18655,10 @@ function insertColumn(position, range2) {
     newCell.style.border = "1px solid var(--border-color)";
     newCell.style.padding = "8px";
   }
+  const state2 = table.ownerDocument.editorState;
+  if (state2) {
+    state2.content = table.ownerDocument.body.innerHTML;
+  }
 }
 function deleteColumn(range2) {
   var _a;
@@ -18638,12 +18668,17 @@ function deleteColumn(range2) {
   if (!table) return;
   const columnIndex = cell.cellIndex;
   const { rows } = table;
+  const doc = table.ownerDocument;
   for (let i2 = 0; i2 < rows.length; i2++) {
     rows[i2].deleteCell(columnIndex);
   }
   if (rows[0].cells.length === 0) {
     table.remove();
   }
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function alignColumn(range2, alignment) {
   var _a;
@@ -18659,6 +18694,10 @@ function alignColumn(range2, alignment) {
       cell2.style.textAlign = alignment;
     }
   }
+  const state2 = table.ownerDocument.editorState;
+  if (state2) {
+    state2.content = table.ownerDocument.body.innerHTML;
+  }
 }
 function createCommand(name, execute, isActive) {
   return {
@@ -19224,42 +19263,31 @@ function useEditor() {
       cleanupListeners = null;
     }
     let isUpdating = false;
-    let contentUpdateTimeout = null;
-    let selectionUpdateTimeout = null;
     const events = {
       input: () => {
         if (isUpdating) return;
         isUpdating = true;
-        if (contentUpdateTimeout) {
-          window.clearTimeout(contentUpdateTimeout);
+        const newContent = doc.body.innerHTML;
+        if (newContent !== state2.content) {
+          state2.content = newContent;
         }
-        contentUpdateTimeout = window.setTimeout(() => {
-          const newContent = doc.body.innerHTML;
-          if (newContent !== state2.content) {
-            state2.content = newContent;
-          }
-          isUpdating = false;
-        }, 100);
+        isUpdating = false;
       },
       selectionchange: () => {
-        if (isUpdating) return;
-        if (selectionUpdateTimeout) {
-          window.clearTimeout(selectionUpdateTimeout);
+        if (!isUpdating) {
+          updateState.selection();
         }
-        selectionUpdateTimeout = window.setTimeout(() => {
-          if (!isUpdating) {
-            updateState.selection();
-          }
-        }, 150);
       },
       mouseup: () => {
-        if (isUpdating) return;
-        updateState.selection();
+        if (!isUpdating) {
+          updateState.selection();
+        }
       },
       keyup: (e) => {
-        if (isUpdating) return;
-        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-          updateState.selection();
+        if (!isUpdating) {
+          if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+            updateState.selection();
+          }
         }
       }
     };
@@ -19267,8 +19295,6 @@ function useEditor() {
       doc.addEventListener(event, handler);
     });
     cleanupListeners = () => {
-      if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
-      if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
       Object.entries(events).forEach(([event, handler]) => {
         doc.removeEventListener(event, handler);
       });
@@ -19284,6 +19310,7 @@ function useEditor() {
     }
     state2.doc = doc;
     state2.hasInit = true;
+    doc.editorState = state2;
     if (state2.content) {
       const preserved = preserveIframes(state2.content);
       doc.body.innerHTML = preserved.html;
@@ -19556,12 +19583,6 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
       }
       emit2("update:modelValue", newValue);
     });
-    vue.watch(() => editor.state.isSplitView, (isEnabled) => {
-      var _a;
-      if (isEnabled) {
-        editor.state.content = ((_a = editor.state.doc) == null ? void 0 : _a.body.innerHTML) || "";
-      }
-    });
     return (_ctx, _cache) => {
       var _a, _b;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
@@ -19645,7 +19666,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-0aa61b83"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-30bcda4c"]]);
 const _hoisted_1$r = { class: "flex gap-05" };
 const _hoisted_2$h = ["disabled"];
 const _hoisted_3$d = { key: 1 };

package/dist/index.mjs

@@ -18468,6 +18468,7 @@ function insertImage(modal, state2) {
         })() : img;
         range2.collapse(false);
         range2.insertNode(node);
+        state2.content = doc.body.innerHTML;
       }
     }
   });
@@ -18487,6 +18488,7 @@ function insertLink(modal, state2) {
         anchor.href = data2.url;
         if (data2.openInNewTab) anchor.target = "_blank";
         range2.surroundContents(anchor);
+        state2.content = doc.body.innerHTML;
       }
     }
   });
@@ -18534,6 +18536,7 @@ function insertEmbed(modal, state2) {
       wrapper.appendChild(iframe);
       range2.deleteContents();
       range2.insertNode(wrapper);
+      state2.content = doc.body.innerHTML;
     }
   });
 }
@@ -18555,6 +18558,7 @@ function insertTable(rows, cols, state2) {
   } else {
     state2.doc.body.appendChild(table);
   }
+  state2.content = state2.doc.body.innerHTML;
 }
 function mergeCells(range2, doc) {
   var _a;
@@ -18568,6 +18572,10 @@ function mergeCells(range2, doc) {
     const actualCell = doc.getElementById(cell.id);
     actualCell == null ? void 0 : actualCell.remove();
   });
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function splitCell(range2, doc) {
   var _a;
@@ -18585,6 +18593,10 @@ function splitCell(range2, doc) {
   newCells.slice(1).forEach((newCell) => {
     newCells[0].insertAdjacentElement("afterend", newCell);
   });
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function addRow(position, range2, doc) {
   var _a;
@@ -18596,6 +18608,10 @@ function addRow(position, range2, doc) {
   const newRow = row.cloneNode(true);
   Array.from(newRow.cells).forEach((cell2) => cell2.innerHTML = " ");
   row.insertAdjacentElement(position === "before" ? "beforebegin" : "afterend", newRow);
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function deleteRow(range2) {
   var _a;
@@ -18603,7 +18619,12 @@ function deleteRow(range2) {
   if (!cell) return;
   const row = cell.parentElement;
   if (!row) return;
+  const doc = row.ownerDocument;
   row.remove();
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function deleteTable(range2) {
   var _a;
@@ -18611,7 +18632,12 @@ function deleteTable(range2) {
   if (!cell) return;
   const table = cell.closest("table");
   if (!table) return;
+  const doc = table.ownerDocument;
   table.remove();
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function insertColumn(position, range2) {
   var _a;
@@ -18627,6 +18653,10 @@ function insertColumn(position, range2) {
     newCell.style.border = "1px solid var(--border-color)";
     newCell.style.padding = "8px";
   }
+  const state2 = table.ownerDocument.editorState;
+  if (state2) {
+    state2.content = table.ownerDocument.body.innerHTML;
+  }
 }
 function deleteColumn(range2) {
   var _a;
@@ -18636,12 +18666,17 @@ function deleteColumn(range2) {
   if (!table) return;
   const columnIndex = cell.cellIndex;
   const { rows } = table;
+  const doc = table.ownerDocument;
   for (let i2 = 0; i2 < rows.length; i2++) {
     rows[i2].deleteCell(columnIndex);
   }
   if (rows[0].cells.length === 0) {
     table.remove();
   }
+  const state2 = doc.editorState;
+  if (state2) {
+    state2.content = doc.body.innerHTML;
+  }
 }
 function alignColumn(range2, alignment) {
   var _a;
@@ -18657,6 +18692,10 @@ function alignColumn(range2, alignment) {
       cell2.style.textAlign = alignment;
     }
   }
+  const state2 = table.ownerDocument.editorState;
+  if (state2) {
+    state2.content = table.ownerDocument.body.innerHTML;
+  }
 }
 function createCommand(name, execute, isActive) {
   return {
@@ -19222,42 +19261,31 @@ function useEditor() {
       cleanupListeners = null;
     }
     let isUpdating = false;
-    let contentUpdateTimeout = null;
-    let selectionUpdateTimeout = null;
     const events = {
       input: () => {
         if (isUpdating) return;
         isUpdating = true;
-        if (contentUpdateTimeout) {
-          window.clearTimeout(contentUpdateTimeout);
+        const newContent = doc.body.innerHTML;
+        if (newContent !== state2.content) {
+          state2.content = newContent;
         }
-        contentUpdateTimeout = window.setTimeout(() => {
-          const newContent = doc.body.innerHTML;
-          if (newContent !== state2.content) {
-            state2.content = newContent;
-          }
-          isUpdating = false;
-        }, 100);
+        isUpdating = false;
       },
       selectionchange: () => {
-        if (isUpdating) return;
-        if (selectionUpdateTimeout) {
-          window.clearTimeout(selectionUpdateTimeout);
+        if (!isUpdating) {
+          updateState.selection();
         }
-        selectionUpdateTimeout = window.setTimeout(() => {
-          if (!isUpdating) {
-            updateState.selection();
-          }
-        }, 150);
       },
       mouseup: () => {
-        if (isUpdating) return;
-        updateState.selection();
+        if (!isUpdating) {
+          updateState.selection();
+        }
       },
       keyup: (e) => {
-        if (isUpdating) return;
-        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-          updateState.selection();
+        if (!isUpdating) {
+          if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+            updateState.selection();
+          }
         }
       }
     };
@@ -19265,8 +19293,6 @@ function useEditor() {
       doc.addEventListener(event, handler);
     });
     cleanupListeners = () => {
-      if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout);
-      if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout);
       Object.entries(events).forEach(([event, handler]) => {
         doc.removeEventListener(event, handler);
       });
@@ -19282,6 +19308,7 @@ function useEditor() {
     }
     state2.doc = doc;
     state2.hasInit = true;
+    doc.editorState = state2;
     if (state2.content) {
       const preserved = preserveIframes(state2.content);
       doc.body.innerHTML = preserved.html;
@@ -19554,12 +19581,6 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
       emit2("update:modelValue", newValue);
     });
-    watch(() => editor.state.isSplitView, (isEnabled) => {
-      var _a;
-      if (isEnabled) {
-        editor.state.content = ((_a = editor.state.doc) == null ? void 0 : _a.body.innerHTML) || "";
-      }
-    });
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock("div", _hoisted_1$s, [
@@ -19643,7 +19664,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-0aa61b83"]]);
+const RichText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-30bcda4c"]]);
 const _hoisted_1$r = { class: "flex gap-05" };
 const _hoisted_2$h = ["disabled"];
 const _hoisted_3$d = { key: 1 };

package/dist/style.css

@@ -2064,26 +2064,26 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	height: 100%;
 }
 
-.rich-text-editor[data-v-0aa61b83] {
+.rich-text-editor[data-v-30bcda4c] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-0aa61b83] {
+.editor-container[data-v-30bcda4c] {
 	display: flex;
 	gap: 1rem;
 }
-.content-area[data-v-0aa61b83],
-.preview-area[data-v-0aa61b83] {
+.content-area[data-v-30bcda4c],
+.preview-area[data-v-30bcda4c] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-0aa61b83] {
+.split-view[data-v-30bcda4c] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-0aa61b83] {
+.editableContent[data-v-30bcda4c] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -2091,7 +2091,7 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-0aa61b83] {
+.html-editor[data-v-30bcda4c] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -2102,12 +2102,12 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-0aa61b83] {
+.preview-area[data-v-30bcda4c] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-0aa61b83] {
+.fullscreen-mode[data-v-30bcda4c] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -2116,18 +2116,18 @@ input[type="range"][data-v-25d991e5]:active::-webkit-slider-thumb {
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-0aa61b83] {
+.fullscreen-mode .editor-container[data-v-30bcda4c] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-0aa61b83],
-.fullscreen-mode .preview-area[data-v-0aa61b83] {
+.fullscreen-mode .content-area[data-v-30bcda4c],
+.fullscreen-mode .preview-area[data-v-30bcda4c] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-0aa61b83]{
+.fullscreen-mode .code-editor[data-v-30bcda4c]{
 	height: 100% !important;
 }
-.debug-controls[data-v-0aa61b83] {
+.debug-controls[data-v-30bcda4c] {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: flex-end;

package/package.json

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

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

@@ -258,53 +258,35 @@ export function useEditor() {
 		}
 
 		let isUpdating = false
-		let contentUpdateTimeout: number | null = null
-		let selectionUpdateTimeout: number | null = null
-		let updateCount = 0
 
 		const events = {
 			input: () => {
-				updateCount++
 				if (isUpdating) return
 				isUpdating = true
 
-				// Clear any pending content updates
-				if (contentUpdateTimeout) {
-					window.clearTimeout(contentUpdateTimeout)
+				// Immediately update content
+				const newContent = doc.body.innerHTML
+				if (newContent !== state.content) {
+					state.content = newContent
 				}
 
-				contentUpdateTimeout = window.setTimeout(() => {
-					const newContent = doc.body.innerHTML
-					if (newContent !== state.content) {
-						state.content = newContent
-					}
-					isUpdating = false
-				}, 100)
+				isUpdating = false
 			},
 			selectionchange: () => {
-				updateCount++
-				if (isUpdating) return
-
-				if (selectionUpdateTimeout) {
-					window.clearTimeout(selectionUpdateTimeout)
+				if (!isUpdating) {
+					updateState.selection()
 				}
-
-				selectionUpdateTimeout = window.setTimeout(() => {
-					if (!isUpdating) {
-						updateState.selection()
-					}
-				}, 150)
 			},
 			mouseup: () => {
-				updateCount++
-				if (isUpdating) return
-				updateState.selection()
+				if (!isUpdating) {
+					updateState.selection()
+				}
 			},
 			keyup: (e: KeyboardEvent) => {
-				updateCount++
-				if (isUpdating) return
-				if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-					updateState.selection()
+				if (!isUpdating) {
+					if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+						updateState.selection()
+					}
 				}
 			}
 		}
@@ -316,8 +298,6 @@ export function useEditor() {
 
 		// Store cleanup function
 		cleanupListeners = () => {
-			if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout)
-			if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout)
 			Object.entries(events).forEach(([event, handler]) => {
 				doc.removeEventListener(event, handler as EventListener)
 			})
@@ -335,7 +315,10 @@ export function useEditor() {
 		}
 
 		state.doc = doc
-		state.hasInit = true
+		state.hasInit = true as const
+
+		// Store state reference in document for table operations
+		(doc as any).editorState = state
 
 		// Initial setup without triggering updates
 		if (state.content) {

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

@@ -142,12 +142,6 @@ watch(() => editor.state.content, (newValue) => {
 	}
 	emit('update:modelValue', newValue)
 })
-
-watch(() => editor.state.isSplitView, (isEnabled) => {
-	if (isEnabled) {
-		editor.state.content = editor.state.doc?.body.innerHTML || ''
-	}
-})
 </script>
 
 <template>

package/src/components/form/inputs/RichText/utils/media.ts

@@ -41,6 +41,7 @@ export function insertImage(modal: typeof Modal, state: EditorState) {
 
 				range.collapse(false)
 				range.insertNode(node)
+				state.content = doc.body.innerHTML
 			}
 		}
 	})
@@ -62,6 +63,7 @@ export function insertLink(modal: typeof Modal, state: EditorState) {
 				anchor.href = data.url
 				if (data.openInNewTab) anchor.target = '_blank'
 				range.surroundContents(anchor)
+				state.content = doc.body.innerHTML
 			}
 		}
 	})
@@ -123,6 +125,7 @@ export function insertEmbed(modal: typeof Modal, state: EditorState) {
 
 			range.deleteContents()
 			range.insertNode(wrapper)
+			state.content = doc.body.innerHTML
 		}
 	})
 }

package/src/components/form/inputs/RichText/utils/table.ts

@@ -19,6 +19,7 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 	} else {
 		state.doc.body.appendChild(table)
 	}
+	state.content = state.doc.body.innerHTML
 }
 
 export function mergeCells(range: Range, doc: Document) {
@@ -35,6 +36,12 @@ export function mergeCells(range: Range, doc: Document) {
 		const actualCell = doc.getElementById(cell.id)
 		actualCell?.remove()
 	})
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function splitCell(range: Range, doc: Document) {
@@ -54,6 +61,12 @@ export function splitCell(range: Range, doc: Document) {
 	newCells.slice(1).forEach((newCell) => {
 		newCells[0].insertAdjacentElement('afterend', newCell)
 	})
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function addRow(position: 'before' | 'after', range: Range, doc: Document) {
@@ -68,6 +81,12 @@ export function addRow(position: 'before' | 'after', range: Range, doc: Document
 	Array.from(newRow.cells).forEach(cell => cell.innerHTML = ' ')
 
 	row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function deleteRow(range: Range) {
@@ -77,7 +96,14 @@ export function deleteRow(range: Range) {
 	const row = cell.parentElement
 	if (!row) return
 
+	const doc = row.ownerDocument
 	row.remove()
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function deleteTable(range: Range) {
@@ -87,7 +113,14 @@ export function deleteTable(range: Range) {
 	const table = cell.closest('table')
 	if (!table) return
 
+	const doc = table.ownerDocument
 	table.remove()
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function insertColumn(position: 'before' | 'after', range: Range) {
@@ -106,6 +139,12 @@ export function insertColumn(position: 'before' | 'after', range: Range) {
 		newCell.style.border = '1px solid var(--border-color)'
 		newCell.style.padding = '8px'
 	}
+
+	// Update state content
+	const state = (table.ownerDocument as any).editorState as EditorState
+	if (state) {
+		state.content = table.ownerDocument.body.innerHTML
+	}
 }
 
 export function deleteColumn(range: Range) {
@@ -117,6 +156,7 @@ export function deleteColumn(range: Range) {
 
 	const columnIndex = cell.cellIndex
 	const { rows } = table
+	const doc = table.ownerDocument
 
 	for (let i = 0; i < rows.length; i++) {
 		rows[i].deleteCell(columnIndex)
@@ -126,6 +166,12 @@ export function deleteColumn(range: Range) {
 	if (rows[0].cells.length === 0) {
 		table.remove()
 	}
+
+	// Update state content
+	const state = (doc as any).editorState as EditorState
+	if (state) {
+		state.content = doc.body.innerHTML
+	}
 }
 
 export function alignColumn(range: Range, alignment: 'left' | 'center' | 'right' | 'justify') {
@@ -144,4 +190,10 @@ export function alignColumn(range: Range, alignment: 'left' | 'center' | 'right'
 			cell.style.textAlign = alignment
 		}
 	}
+
+	// Update state content
+	const state = (table.ownerDocument as any).editorState as EditorState
+	if (state) {
+		state.content = table.ownerDocument.body.innerHTML
+	}
 }