@bagelink/vue 1.2.11 → 1.2.15

package/dist/index.cjs

@@ -211,14 +211,17 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props2 = __props;
     const isComponent = vue.computed(() => {
+      if (props2.disabled) return props2.is;
       if (props2.to) return vueRouter.RouterLink;
       if (props2.href) return "a";
       return props2.is;
     });
     const bind3 = vue.computed(() => {
       const obj = {};
-      if (props2.to && !props2.disabled) obj.to = props2.to;
-      else if (props2.href && !props2.disabled) obj.href = props2.href;
+      if (!props2.disabled) {
+        if (props2.to) obj.to = props2.to;
+        else if (props2.href) obj.href = props2.href;
+      }
       if (!props2.to && !props2.href) {
         obj.role = props2.role;
         obj.type = props2.type;
@@ -275,7 +278,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-b609e748"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$1j, [["__scopeId", "data-v-99c4aa53"]]);
 const _hoisted_1$17 = ["dismissable"];
 const _hoisted_2$R = { class: "m-0" };
 const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
@@ -16075,14 +16078,13 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       return resolvedSchemaData.value.length > 2 || resolvedSchemaData.value.some((schema) => schema.$el === "richtext");
     });
     return (_ctx, _cache) => {
-      const _component_Icon = vue.resolveComponent("Icon");
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(props2.class)
       }, [
         _ctx.label ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$K, vue.toDisplayString(_ctx.label), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_2$x, [
           schemaState.value !== "loaded" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, [
-            schemaState.value === "loading" ? (vue.openBlock(), vue.createBlock(vue.unref(Loading), { key: 0 })) : schemaState.value === "error" ? (vue.openBlock(), vue.createBlock(_component_Icon, {
+            schemaState.value === "loading" ? (vue.openBlock(), vue.createBlock(vue.unref(Loading), { key: 0 })) : schemaState.value === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$s), {
               key: 1,
               icon: "error",
               color: "red"
@@ -23005,13 +23007,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" },
@@ -23022,12 +23026,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__ */ vue.defineComponent({
   __name: "gridBox",
+  props: {
+    gridSize: {}
+  },
   emits: ["select"],
   setup(__props, { emit: __emit }) {
+    const props2 = __props;
     const emit2 = __emit;
+    const base = props2.gridSize || 5;
     const hoveredRow = vue.ref(fb);
     const hoveredCol = vue.ref(fb);
     const rowSize = vue.computed(() => {
@@ -23075,7 +23083,7 @@ const _sfc_main$B = /* @__PURE__ */ vue.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"
@@ -23108,10 +23116,8 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
               default: vue.withCtx(({ hide }) => [
                 vue.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"])
@@ -23138,7 +23144,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.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;
@@ -23258,11 +23264,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);
@@ -23279,10 +23296,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) => {
@@ -23347,13 +23372,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) {
@@ -23362,12 +23408,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));
         });
@@ -23379,9 +23449,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 };
 }
@@ -23494,16 +23569,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);
   }
@@ -23664,12 +23767,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;
@@ -23690,10 +23790,7 @@ function createFormattingCommand(state2, type3, command, tag) {
           selection.removeAllRanges();
           selection.addRange(range2);
         } else {
-          state2.doc.execCommand(
-            command === "orderedList" ? "insertOrderedList" : "insertUnorderedList",
-            false
-          );
+          format2.list(command);
         }
       }
     },
@@ -23702,34 +23799,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 = {
@@ -23772,8 +24002,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");
@@ -23820,9 +24104,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;
@@ -23835,16 +24124,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;