@bagelink/vue 1.2.13 → 1.2.15

package/dist/index.mjs

@@ -16076,14 +16076,13 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
     });
     return (_ctx, _cache) => {
-      const _component_Icon = resolveComponent("Icon");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(props2.class)
       }, [
         _ctx.label ? (openBlock(), createElementBlock("p", _hoisted_1$K, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$x, [
           schemaState.value !== "loaded" ? (openBlock(), createElementBlock("div", _hoisted_3$t, [
-            schemaState.value === "loading" ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : schemaState.value === "error" ? (openBlock(), createBlock(_component_Icon, {
+            schemaState.value === "loading" ? (openBlock(), createBlock(unref(Loading), { key: 0 })) : schemaState.value === "error" ? (openBlock(), createBlock(unref(_sfc_main$s), {
               key: 1,
               icon: "error",
               color: "red"
@@ -23006,13 +23005,15 @@ const toolbarOptions = [
   { name: "fontColor", label: "Font Color", icon: "format_color_text" },
   { name: "bgColor", label: "Background Color", icon: "format_color_fill" },
   { name: "insertTable", label: "Insert Table", icon: "table" },
-  { name: "deleteTable", label: "Delete Table", icon: "table_rows" },
-  { name: "insertRowAbove", label: "Insert Row Above", icon: "table_rows" },
-  { name: "insertRowBelow", label: "Insert Row Below", icon: "table_rows" },
-  { name: "deleteRow", label: "Delete Row", icon: "table_rows" },
-  { name: "insertColumnLeft", label: "Insert Column Left", icon: "add_column_left" },
-  { name: "insertColumnRight", label: "Insert Column Right", icon: "add_column_right" },
-  { name: "deleteColumn", label: "Delete Column", icon: "view_column" },
+  { name: "deleteTable", label: "Delete Table", icon: "delete_sweep" },
+  { name: "mergeCells", label: "Merge Cells", icon: "table_chart" },
+  { name: "splitCells", label: "Split Cells", icon: "dashboard" },
+  { name: "addRowBefore", label: "Insert Row Above", icon: "add_box" },
+  { name: "addRowAfter", label: "Insert Row Below", icon: "vertical_align_bottom" },
+  { name: "deleteRow", label: "Delete Row", icon: "remove" },
+  { name: "insertColumnLeft", label: "Insert Column Left", icon: "format_indent_decrease" },
+  { name: "insertColumnRight", label: "Insert Column Right", icon: "format_indent_increase" },
+  { name: "deleteColumn", label: "Delete Column", icon: "view_week" },
   { name: "separator" },
   { name: "undo", label: "Undo", icon: "undo" },
   { name: "redo", label: "Redo", icon: "redo" },
@@ -23023,12 +23024,16 @@ const _hoisted_1$u = { class: "grid grid-wrap p-05" };
 const _hoisted_2$j = ["onMousemove", "onClick"];
 const _hoisted_3$g = { class: "txt-center txt-12 color-gray" };
 const fb = 1;
-const base = 5;
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "gridBox",
+  props: {
+    gridSize: {}
+  },
   emits: ["select"],
   setup(__props, { emit: __emit }) {
+    const props2 = __props;
     const emit2 = __emit;
+    const base = props2.gridSize || 5;
     const hoveredRow = ref(fb);
     const hoveredCol = ref(fb);
     const rowSize = computed(() => {
@@ -23076,7 +23081,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-4548b70f"]]);
+const GridBox = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-2f424c9c"]]);
 const _hoisted_1$t = {
   class: "toolbar flex gap-025 pb-05 flex-wrap",
   role: "toolbar"
@@ -23109,10 +23114,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
               default: withCtx(({ hide }) => [
                 createVNode(GridBox, {
                   gridSize: 5,
-                  onSelect: ($event) => {
-                    var _a;
-                    runAction("insertTable", $event);
-                    (_a = $event.target) == null ? void 0 : _a.blur();
+                  onSelect: (value) => {
+                    runAction("insertTable", value);
                     hide();
                   }
                 }, null, 8, ["onSelect"])
@@ -23139,7 +23142,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-9d8a6eb6"]]);
+const EditorToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-7e9466dc"]]);
 function isStyleActive(style, doc) {
   const selection = doc.getSelection();
   if (!selection || !selection.rangeCount) return false;
@@ -23259,11 +23262,22 @@ function formatting(state2) {
         range2.surroundContents(span);
       }
     } else {
-      doc.execCommand(command, false);
+      if (range2.collapsed) return;
+      const span = doc.createElement("span");
+      if (command === "bold") span.style.fontWeight = "bold";
+      else if (command === "italic") span.style.fontStyle = "italic";
+      else if (command === "underline") span.style.textDecoration = "underline";
+      try {
+        range2.surroundContents(span);
+      } catch (e) {
+        const fragment = range2.extractContents();
+        span.appendChild(fragment);
+        range2.insertNode(span);
+      }
     }
   };
   const block = (command, tag) => {
-    var _a, _b;
+    var _a;
     const selection = doc.getSelection();
     if (!selection || !selection.rangeCount) return;
     const range2 = selection.getRangeAt(0);
@@ -23280,10 +23294,18 @@ function formatting(state2) {
         wrapper.remove();
       }
     }
-    doc.execCommand("formatBlock", false, tag);
-    if (isRTL) {
-      const newBlock = (_b = (_a = selection.anchorNode) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.closest(tag.toLowerCase());
-      if (newBlock) newBlock.dir = "rtl";
+    const newBlock = doc.createElement(tag);
+    if (isRTL) newBlock.dir = "rtl";
+    const currentBlock = (parentBlock == null ? void 0 : parentBlock.closest("p,h1,h2,h3,h4,h5,h6,blockquote,div")) || parentBlock;
+    if (currentBlock) {
+      while (currentBlock.firstChild) {
+        newBlock.appendChild(currentBlock.firstChild);
+      }
+      (_a = currentBlock.parentNode) == null ? void 0 : _a.replaceChild(newBlock, currentBlock);
+      range2.selectNodeContents(newBlock);
+      range2.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range2);
     }
   };
   const list = (command) => {
@@ -23348,13 +23370,34 @@ function formatting(state2) {
     restoreSelection(state2.doc, state2.range, state2.selection, selectionInfo, listEl);
   };
   const clear = () => {
-    if (!state2.doc || !state2.range || !state2.selection) return;
+    console.log("[Clear Format] Starting clear format process", state2);
+    console.assert(state2, "[Clear Format] State must exist");
+    console.assert(state2.doc, "[Clear Format] Document must exist");
+    console.assert(state2.range, "[Clear Format] Range must exist");
+    console.assert(state2.selection, "[Clear Format] Selection must exist");
+    if (!state2.doc || !state2.range || !state2.selection) {
+      console.log("[Clear Format] No document or selection");
+      return;
+    }
     const selectionInfo = analyzeSelection(state2.doc, state2.range);
-    if (!selectionInfo) return;
-    const inlineTags = ["b", "i", "u", "strong", "em", "span"];
+    console.log("[Clear Format] Selection info:", selectionInfo);
+    if (!selectionInfo) {
+      console.log("[Clear Format] No valid selection info");
+      return;
+    }
+    if (state2.range.collapsed) {
+      console.log("[Clear Format] Selection is collapsed, nothing to clear");
+      return;
+    }
+    console.log("[Clear Format] Processing selection:", {
+      startContainer: state2.range.startContainer,
+      endContainer: state2.range.endContainer,
+      selectedText: state2.range.toString()
+    });
     const fragment = state2.range.cloneContents();
     const tempDiv = state2.doc.createElement("div");
     tempDiv.appendChild(fragment);
+    console.log("[Clear Format] Original HTML:", tempDiv.innerHTML);
     const cleanNode = (node) => {
       if (!state2.doc) return node;
       if (node.nodeType === 3) {
@@ -23363,12 +23406,36 @@ function formatting(state2) {
       if (node.nodeType === 1) {
         const el = node;
         const nodeName = el.nodeName.toLowerCase();
+        const inlineTags = ["b", "i", "u", "strong", "em", "span", "font", "strike", "sub", "sup"];
+        console.log("[Clear Format] Processing element:", nodeName, {
+          hasStyle: el.hasAttribute("style"),
+          style: el.getAttribute("style"),
+          className: el.className
+        });
         if (inlineTags.includes(nodeName)) {
-          return state2.doc.createTextNode(el.textContent || "");
+          const textContent = el.textContent || "";
+          console.log("[Clear Format] Extracting text from inline element:", textContent);
+          return state2.doc.createTextNode(textContent);
         }
         const newEl = state2.doc.createElement(nodeName);
-        newEl.removeAttribute("style");
-        newEl.removeAttribute("class");
+        if (el.hasAttribute("style")) {
+          console.log("[Clear Format] Removing style attribute:", el.getAttribute("style"));
+        }
+        if (el.className) {
+          console.log("[Clear Format] Removing class:", el.className);
+        }
+        if (nodeName === "a" && el.hasAttribute("href")) {
+          newEl.setAttribute("href", el.getAttribute("href") || "");
+          if (el.hasAttribute("target")) {
+            newEl.setAttribute("target", el.getAttribute("target") || "");
+          }
+          console.log("[Clear Format] Preserving link attributes");
+        }
+        if (nodeName === "img") {
+          if (el.hasAttribute("src")) newEl.setAttribute("src", el.getAttribute("src") || "");
+          if (el.hasAttribute("alt")) newEl.setAttribute("alt", el.getAttribute("alt") || "");
+          console.log("[Clear Format] Preserving image attributes");
+        }
         Array.from(el.childNodes).forEach((child) => {
           newEl.appendChild(cleanNode(child));
         });
@@ -23380,9 +23447,14 @@ function formatting(state2) {
     Array.from(tempDiv.childNodes).forEach((node) => {
       cleanedFragment.appendChild(cleanNode(node));
     });
+    const debugDiv = state2.doc.createElement("div");
+    debugDiv.appendChild(cleanedFragment.cloneNode(true));
+    console.log("[Clear Format] Cleaned HTML:", debugDiv.innerHTML);
     state2.range.deleteContents();
     state2.range.insertNode(cleanedFragment);
     restoreSelection(state2.doc, state2.range, state2.selection, selectionInfo);
+    state2.content = state2.doc.body.innerHTML;
+    console.log("[Clear Format] Updated document HTML:", state2.content);
   };
   return { text, block, list, clear };
 }
@@ -23495,16 +23567,44 @@ function insertTable(rows, cols, state2) {
   const table = state2.doc.createElement("table");
   table.style.width = "100%";
   table.style.borderCollapse = "collapse";
+  table.style.marginBottom = "1rem";
+  const thead = state2.doc.createElement("thead");
+  const headerRow = thead.insertRow();
+  for (let j = 0; j < cols; j++) {
+    const th = state2.doc.createElement("th");
+    th.innerHTML = `Header ${j + 1}`;
+    th.style.padding = "8px";
+    th.style.border = "1px solid var(--border-color, #ddd)";
+    th.style.backgroundColor = "var(--bgl-gray-light, #f4f4f4)";
+    headerRow.appendChild(th);
+  }
+  table.appendChild(thead);
+  const tbody = state2.doc.createElement("tbody");
   for (let i2 = 0; i2 < rows; i2++) {
-    const row = table.insertRow();
+    const row = tbody.insertRow();
     for (let j = 0; j < cols; j++) {
       const cell = row.insertCell();
       cell.innerHTML = "&nbsp;";
+      cell.style.padding = "8px";
+      cell.style.border = "1px solid var(--border-color, #ddd)";
     }
   }
+  table.appendChild(tbody);
   const { range: range2 } = state2;
   if (range2) {
     range2.insertNode(table);
+    if (state2.doc.getSelection()) {
+      const firstCell = table.querySelector("td");
+      if (firstCell) {
+        range2.selectNodeContents(firstCell);
+        range2.collapse(true);
+        const selection = state2.doc.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range2);
+        }
+      }
+    }
   } else {
     state2.doc.body.appendChild(table);
   }
@@ -23665,12 +23765,9 @@ function createFormattingCommand(state2, type3, command, tag) {
       var _a, _b;
       if (!state2.doc) return;
       if (type3 === "text") {
-        if (command === "bold") state2.doc.execCommand("bold", false);
-        else if (command === "italic") state2.doc.execCommand("italic", false);
-        else if (command === "underline") state2.doc.execCommand("underline", false);
-        else format2.text(command);
+        format2.text(command);
       } else if (type3 === "block") {
-        state2.doc.execCommand("formatBlock", false, `<${command}>`);
+        format2.block(command, command);
       } else if (type3 === "list") {
         const selection = state2.doc.getSelection();
         if (!selection || !selection.rangeCount) return;
@@ -23691,10 +23788,7 @@ function createFormattingCommand(state2, type3, command, tag) {
           selection.removeAllRanges();
           selection.addRange(range2);
         } else {
-          state2.doc.execCommand(
-            command === "orderedList" ? "insertOrderedList" : "insertUnorderedList",
-            false
-          );
+          format2.list(command);
         }
       }
     },
@@ -23703,34 +23797,167 @@ function createFormattingCommand(state2, type3, command, tag) {
 }
 function isNodeEmpty$1(node) {
   var _a;
-  const text = ((_a = node.textContent) == null ? void 0 : _a.trim()) || "";
+  const text = ((_a = node.textContent) == null ? void 0 : _a.replace(/\s/g, "")) || "";
   if (text) return false;
-  const brElements = node.getElementsByTagName("br");
+  const brElements = node.getElementsByTagName ? node.getElementsByTagName("br") : [];
   if (brElements.length === 0) return true;
-  return brElements.length === 1 && node.childNodes.length === 1;
+  return brElements.length === 1 && node.childNodes.length <= 2;
 }
 function createCommandRegistry(state2) {
   const format2 = formatting(state2);
   const historyCommands = {
     undo: createCommand("Undo", () => {
-      var _a;
-      return (_a = state2.doc) == null ? void 0 : _a.execCommand("undo", false);
+      if (state2.undoStack.length > 0 && state2.doc) {
+        const lastContent = state2.undoStack.pop();
+        if (lastContent !== void 0) {
+          state2.redoStack.push(state2.content);
+          state2.content = lastContent;
+          if (state2.doc) state2.doc.body.innerHTML = lastContent;
+        }
+      }
     }),
     redo: createCommand("Redo", () => {
-      var _a;
-      return (_a = state2.doc) == null ? void 0 : _a.execCommand("redo", false);
+      if (state2.redoStack.length > 0 && state2.doc) {
+        const nextContent = state2.redoStack.pop();
+        if (nextContent !== void 0) {
+          state2.undoStack.push(state2.content);
+          state2.content = nextContent;
+          if (state2.doc) state2.doc.body.innerHTML = nextContent;
+        }
+      }
+    })
+  };
+  const textCommands = {
+    bold: createCommand("Bold", (state22) => {
+      console.log("[Command] Bold called");
+      if (!state22.doc || !state22.range || !state22.selection) return;
+      const { range: range2 } = state22;
+      if (range2.collapsed) return;
+      try {
+        const span = state22.doc.createElement("span");
+        span.style.fontWeight = "bold";
+        try {
+          range2.surroundContents(span);
+        } catch (e) {
+          const fragment = range2.extractContents();
+          span.appendChild(fragment);
+          range2.insertNode(span);
+        }
+        range2.selectNodeContents(span);
+        state22.selection.removeAllRanges();
+        state22.selection.addRange(range2);
+        state22.content = state22.doc.body.innerHTML;
+      } catch (error) {
+        console.error("[Command] Error applying bold:", error);
+      }
+    }),
+    italic: createCommand("Italic", (state22) => {
+      console.log("[Command] Italic called");
+      if (!state22.doc || !state22.range || !state22.selection) return;
+      const { range: range2 } = state22;
+      if (range2.collapsed) return;
+      try {
+        const span = state22.doc.createElement("span");
+        span.style.fontStyle = "italic";
+        try {
+          range2.surroundContents(span);
+        } catch (e) {
+          const fragment = range2.extractContents();
+          span.appendChild(fragment);
+          range2.insertNode(span);
+        }
+        range2.selectNodeContents(span);
+        state22.selection.removeAllRanges();
+        state22.selection.addRange(range2);
+        state22.content = state22.doc.body.innerHTML;
+      } catch (error) {
+        console.error("[Command] Error applying italic:", error);
+      }
+    }),
+    underline: createCommand("Underline", (state22) => {
+      console.log("[Command] Underline called");
+      if (!state22.doc || !state22.range || !state22.selection) return;
+      const { range: range2 } = state22;
+      if (range2.collapsed) return;
+      try {
+        const span = state22.doc.createElement("span");
+        span.style.textDecoration = "underline";
+        try {
+          range2.surroundContents(span);
+        } catch (e) {
+          const fragment = range2.extractContents();
+          span.appendChild(fragment);
+          range2.insertNode(span);
+        }
+        range2.selectNodeContents(span);
+        state22.selection.removeAllRanges();
+        state22.selection.addRange(range2);
+        state22.content = state22.doc.body.innerHTML;
+      } catch (error) {
+        console.error("[Command] Error applying underline:", error);
+      }
     })
   };
-  const textCommands = ["bold", "italic", "underline"].reduce((acc, cmd) => ({
-    ...acc,
-    [cmd]: createFormattingCommand(state2, "text", cmd)
-  }), {});
   const headingCommands = ["h1", "h2", "h3", "h4", "h5", "h6"].reduce((acc, cmd) => ({
     ...acc,
-    [cmd]: createFormattingCommand(state2, "block", cmd)
+    [cmd]: createCommand(`Heading ${cmd}`, (state22) => {
+      var _a;
+      console.log(`[Command] ${cmd} heading called`);
+      if (!state22.doc || !state22.range || !state22.selection) return;
+      const { range: range2, doc, selection } = state22;
+      const container = range2.commonAncestorContainer;
+      const parentBlock = container.nodeType === 3 ? container.parentElement : container;
+      const currentBlock = (parentBlock == null ? void 0 : parentBlock.closest("p,h1,h2,h3,h4,h5,h6,blockquote,div")) || parentBlock;
+      const isToggleOff = (currentBlock == null ? void 0 : currentBlock.tagName.toLowerCase()) === cmd.toLowerCase();
+      const newTag = isToggleOff ? "p" : cmd;
+      try {
+        const newBlock = doc.createElement(newTag);
+        if (currentBlock) {
+          while (currentBlock.firstChild) {
+            newBlock.appendChild(currentBlock.firstChild);
+          }
+          (_a = currentBlock.parentNode) == null ? void 0 : _a.replaceChild(newBlock, currentBlock);
+          range2.selectNodeContents(newBlock);
+          range2.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range2);
+        }
+        state22.content = doc.body.innerHTML;
+      } catch (error) {
+        console.error(`[Command] Error applying ${cmd} heading:`, error);
+      }
+    })
   }), {});
   const blockCommands = {
-    p: createFormattingCommand(state2, "block", "p"),
+    p: createCommand("Paragraph", (state22) => {
+      var _a;
+      console.log("[Command] Paragraph called");
+      if (!state22.doc || !state22.range || !state22.selection) return;
+      const { range: range2, doc, selection } = state22;
+      const container = range2.commonAncestorContainer;
+      const parentBlock = container.nodeType === 3 ? container.parentElement : container;
+      const currentBlock = (parentBlock == null ? void 0 : parentBlock.closest("p,h1,h2,h3,h4,h5,h6,blockquote,div")) || parentBlock;
+      if ((currentBlock == null ? void 0 : currentBlock.tagName.toLowerCase()) === "p") {
+        console.log("[Command] Already a paragraph");
+        return;
+      }
+      try {
+        const newParagraph = doc.createElement("p");
+        if (currentBlock) {
+          while (currentBlock.firstChild) {
+            newParagraph.appendChild(currentBlock.firstChild);
+          }
+          (_a = currentBlock.parentNode) == null ? void 0 : _a.replaceChild(newParagraph, currentBlock);
+          range2.selectNodeContents(newParagraph);
+          range2.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range2);
+        }
+        state22.content = doc.body.innerHTML;
+      } catch (error) {
+        console.error("[Command] Error applying paragraph:", error);
+      }
+    }),
     blockquote: createFormattingCommand(state2, "block", "blockquote")
   };
   const listCommands = {
@@ -23773,8 +24000,62 @@ function createCommandRegistry(state2) {
     embed: createCommand("Insert Embed", (state22) => state22.modal && insertEmbed(state22.modal, state22))
   };
   const otherCommands = {
-    clear: createCommand("Clear Formatting", () => {
-      format2.clear();
+    clear: createCommand("Clear Formatting", (state22) => {
+      var _a;
+      console.log("[Command] Clear formatting called");
+      console.log("[Command] Current selection:", (_a = state22.selection) == null ? void 0 : _a.toString());
+      console.log("[Command] Range exists:", !!state22.range);
+      console.log("[Command] Document exists:", !!state22.doc);
+      try {
+        if (!state22.doc || !state22.range || !state22.selection) {
+          console.log("[Command] Missing required state for clear formatting");
+          return;
+        }
+        const { selection, range: range2, doc } = state22;
+        if (range2.collapsed) {
+          console.log("[Command] Selection is collapsed, nothing to clear");
+          return;
+        }
+        const fragment = range2.cloneContents();
+        const tempDiv = doc.createElement("div");
+        tempDiv.appendChild(fragment);
+        console.log("[Command] Original HTML:", tempDiv.innerHTML);
+        const structuralTags = ["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "li", "blockquote", "div", "table", "tr", "td", "th"];
+        const inlineTags = ["b", "i", "u", "strong", "em", "span", "font", "strike", "sub", "sup"];
+        const cleanElement = (element) => {
+          element.removeAttribute("style");
+          element.removeAttribute("class");
+          Array.from(element.children).forEach((child) => {
+            if (inlineTags.includes(child.tagName.toLowerCase())) {
+              const textContent = child.textContent || "";
+              const textNode = doc.createTextNode(textContent);
+              child.replaceWith(textNode);
+            } else {
+              cleanElement(child);
+            }
+          });
+        };
+        Array.from(tempDiv.querySelectorAll("*")).forEach((element) => {
+          const tagName = element.tagName.toLowerCase();
+          if (structuralTags.includes(tagName)) {
+            cleanElement(element);
+          }
+        });
+        console.log("[Command] Cleaned HTML:", tempDiv.innerHTML);
+        range2.deleteContents();
+        const cleanedFragment = doc.createDocumentFragment();
+        while (tempDiv.firstChild) {
+          cleanedFragment.appendChild(tempDiv.firstChild);
+        }
+        range2.insertNode(cleanedFragment);
+        range2.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range2);
+        state22.content = doc.body.innerHTML;
+        console.log("[Command] Clear formatting completed");
+      } catch (error) {
+        console.error("[Command] Error in clear formatting:", error);
+      }
     }),
     indent: createCommand("Indent", () => {
       format2.text("indent");
@@ -23821,9 +24102,14 @@ function useCommands(state2, debug) {
   const executor = createCommandExecutor(state2, commands);
   return {
     execute: (command, value) => {
-      if (!state2.doc) return;
+      console.log(`[useCommands] Executing command: ${command}`, value ? `with value: ${value}` : "");
+      if (!state2.doc) {
+        console.log("[useCommands] No document available, skipping command");
+        return;
+      }
       debug == null ? void 0 : debug.logCommand(command, value);
       if (["splitView", "codeView", "fullScreen"].includes(command)) {
+        console.log(`[useCommands] Handling view state command: ${command}`);
         switch (command) {
           case "splitView":
             state2.isSplitView = !state2.isSplitView;
@@ -23836,16 +24122,29 @@ function useCommands(state2, debug) {
             return;
         }
       }
-      state2.doc.body.focus();
-      executor.execute(command, value);
+      try {
+        state2.doc.body.focus();
+        console.log("[useCommands] Editor focused");
+      } catch (e) {
+        console.error("[useCommands] Error focusing editor:", e);
+      }
+      try {
+        console.log("[useCommands] Executing command via executor");
+        executor.execute(command, value);
+        console.log("[useCommands] Command execution completed");
+      } catch (e) {
+        console.error("[useCommands] Error during command execution:", e);
+      }
       const newContent = state2.doc.body.innerHTML;
       if (newContent !== state2.content) {
+        console.log("[useCommands] Content changed, updating state");
         state2.content = newContent;
       }
       const selection = state2.doc.getSelection();
       if (selection == null ? void 0 : selection.rangeCount) {
         const hasSelectionChanged = !state2.selection || state2.selection !== selection || state2.rangeCount !== selection.rangeCount;
         if (hasSelectionChanged) {
+          console.log("[useCommands] Selection changed, updating state");
           state2.selection = selection;
           state2.range = selection.getRangeAt(0).cloneRange();
           state2.rangeCount = selection.rangeCount;

package/dist/style.css

@@ -2011,7 +2011,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 }
 
-.tableBoxSelect[data-v-4548b70f]::after {
+.tableBoxSelect[data-v-2f424c9c]::after {
 	content: '';
 	display: block;
 	width: calc(100% - 4px);
@@ -2019,12 +2019,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border: 1px solid var(--bgl-gray);
 	background: var(--bgl-gray-light);
 }
-.borderSelect[data-v-4548b70f]::after {
+.borderSelect[data-v-2f424c9c]::after {
 	border-color: var(--bgl-primary-tint);
 	background: var(--bgl-primary-light);
 }
 
-.toolbar[data-v-9d8a6eb6] .active {
+.toolbar[data-v-7e9466dc] .active {
 	background: var(--bgl-primary);
 	color: white;
 }

package/package.json

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

package/src/components/form/FieldArray.vue

@@ -7,7 +7,7 @@ import type {
 	BglFormSchemaFnT,
 	Field,
 } from '@bagelink/vue'
-import { BagelForm, Btn, Loading } from '@bagelink/vue'
+import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
 import { ref, onMounted, computed, watch } from 'vue'
 
 const props = withDefaults(

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

@@ -23,10 +23,9 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
 				<template #default="{ hide }">
 					<GridBox
-						:gridSize="5" @select="$event => {
-							runAction('insertTable', $event);
-							($event.target as any)?.blur();
-							hide()
+						:gridSize="5" @select="(value) => {
+							runAction('insertTable', value);
+							hide();
 						}"
 					/>
 				</template>

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+const props = defineProps<{
+	gridSize?: number
+}>()
 const emit = defineEmits(['select'])
 const fb = 1
-const base = 5
+const base = props.gridSize || 5
 const hoveredRow = $ref(fb)
 const hoveredCol = $ref(fb)