rte-builder 2.0.7 → 2.0.9

package/dist/index.mjs

@@ -1528,7 +1528,10 @@ var init_Indent = __esm({
       },
       addCommands() {
         return {
-          indent: () => ({ tr, state, dispatch }) => {
+          indent: () => ({ tr, state, dispatch, editor }) => {
+            if (editor.isActive("listItem")) {
+              return editor.chain().sinkListItem("listItem").run();
+            }
             const { selection } = state;
             const { from, to } = selection;
             let changed = false;
@@ -1548,7 +1551,10 @@ var init_Indent = __esm({
             });
             return changed;
           },
-          outdent: () => ({ tr, state, dispatch }) => {
+          outdent: () => ({ tr, state, dispatch, editor }) => {
+            if (editor.isActive("listItem")) {
+              return editor.chain().liftListItem("listItem").run();
+            }
             const { selection } = state;
             const { from, to } = selection;
             let changed = false;
@@ -1574,13 +1580,13 @@ var init_Indent = __esm({
         return {
           Tab: () => {
             if (this.editor.isActive("listItem")) {
-              return false;
+              return this.editor.commands.sinkListItem("listItem");
             }
             return this.editor.commands.indent();
           },
           "Shift-Tab": () => {
             if (this.editor.isActive("listItem")) {
-              return false;
+              return this.editor.commands.liftListItem("listItem");
             }
             return this.editor.commands.outdent();
           }
@@ -1590,6 +1596,149 @@ var init_Indent = __esm({
   }
 });
 
+// src/utils/formatHtml.ts
+function tokenize(html) {
+  const tokens = [];
+  const re = /<!--[\s\S]*?-->|<!DOCTYPE[^>]*>|<\/([a-zA-Z][a-zA-Z0-9]*)\s*>|<([a-zA-Z][a-zA-Z0-9]*)(\s[^>]*)?\s*\/?>|[^<]+/gi;
+  let match;
+  while ((match = re.exec(html)) !== null) {
+    const raw = match[0];
+    if (raw.startsWith("<!--")) {
+      tokens.push({ type: "comment", raw });
+    } else if (raw.startsWith("<!")) {
+      tokens.push({ type: "doctype", raw });
+    } else if (match[1]) {
+      tokens.push({ type: "close", tag: match[1].toLowerCase(), raw });
+    } else if (match[2]) {
+      const tag = match[2].toLowerCase();
+      const isVoid = VOID_ELEMENTS.has(tag) || raw.endsWith("/>");
+      tokens.push({
+        type: isVoid ? "self-close" : "open",
+        tag,
+        raw
+      });
+    } else {
+      const text = raw;
+      if (text.trim()) {
+        tokens.push({ type: "text", raw: text });
+      }
+    }
+  }
+  return tokens;
+}
+function formatHtml(html, indentStr = "  ") {
+  if (!html || !html.trim()) return html;
+  const tokens = tokenize(html.trim());
+  const lines = [];
+  let depth = 0;
+  for (const token of tokens) {
+    const indent = indentStr.repeat(depth);
+    switch (token.type) {
+      case "open": {
+        const isBlock = BLOCK_ELEMENTS.has(token.tag);
+        if (isBlock) {
+          lines.push(`${indent}${token.raw}`);
+          depth++;
+        } else {
+          lines.push(`${indent}${token.raw}`);
+          depth++;
+        }
+        break;
+      }
+      case "close": {
+        depth = Math.max(0, depth - 1);
+        const closeIndent = indentStr.repeat(depth);
+        lines.push(`${closeIndent}${token.raw}`);
+        break;
+      }
+      case "self-close":
+      case "comment":
+      case "doctype":
+        lines.push(`${indent}${token.raw}`);
+        break;
+      case "text":
+        lines.push(`${indent}${token.raw.trim()}`);
+        break;
+    }
+  }
+  return collapseInlineTags(lines.join("\n"));
+}
+function collapseInlineTags(formatted) {
+  return formatted.replace(
+    /^(\s*)<((?!\/)[a-zA-Z][a-zA-Z0-9]*)([^>]*)>\n\s+([^<\n]+)\n\s*<\/\2>/gm,
+    (match, indent, tag, attrs, text) => {
+      if (BLOCK_ELEMENTS.has(tag.toLowerCase())) return match;
+      return `${indent}<${tag}${attrs}>${text.trim()}</${tag}>`;
+    }
+  );
+}
+var VOID_ELEMENTS, BLOCK_ELEMENTS;
+var init_formatHtml = __esm({
+  "src/utils/formatHtml.ts"() {
+    "use strict";
+    VOID_ELEMENTS = /* @__PURE__ */ new Set([
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ]);
+    BLOCK_ELEMENTS = /* @__PURE__ */ new Set([
+      "address",
+      "article",
+      "aside",
+      "blockquote",
+      "body",
+      "details",
+      "dialog",
+      "dd",
+      "div",
+      "dl",
+      "dt",
+      "fieldset",
+      "figcaption",
+      "figure",
+      "footer",
+      "form",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "head",
+      "header",
+      "hgroup",
+      "hr",
+      "html",
+      "li",
+      "main",
+      "nav",
+      "ol",
+      "p",
+      "pre",
+      "section",
+      "table",
+      "tbody",
+      "td",
+      "tfoot",
+      "th",
+      "thead",
+      "tr",
+      "ul"
+    ]);
+  }
+});
+
 // src/adapters/tiptap/TipTapToolbar.tsx
 import { useState, useRef, useEffect } from "react";
 import { CodeXml } from "lucide-react";
@@ -1599,6 +1748,7 @@ var init_TipTapToolbar = __esm({
   "src/adapters/tiptap/TipTapToolbar.tsx"() {
     "use strict";
     init_Emoji();
+    init_formatHtml();
     FONT_FAMILIES = [
       { value: "Arial", label: "Arial" },
       { value: "Georgia", label: "Georgia" },
@@ -1803,12 +1953,13 @@ var init_TipTapToolbar = __esm({
                   } else {
                     const currentHTML = editor.getHTML();
                     const isEmptyContent = !currentHTML || currentHTML === "<p></p>" || currentHTML.trim() === "";
+                    const formattedHTML = isEmptyContent ? "" : formatHtml(currentHTML);
                     const codeBlockContent = isEmptyContent ? { type: "doc", content: [{ type: "codeBlock" }] } : {
                       type: "doc",
                       content: [
                         {
                           type: "codeBlock",
-                          content: [{ type: "text", text: currentHTML }]
+                          content: [{ type: "text", text: formattedHTML }]
                         }
                       ]
                     };
@@ -6020,6 +6171,7 @@ import { common as common2, createLowlight as createLowlight2 } from "lowlight";
 
 // src/components/Toolbar.tsx
 init_Emoji();
+init_formatHtml();
 import { useState as useState7, useRef as useRef7, useEffect as useEffect7 } from "react";
 import {
   Bold as Bold2,
@@ -6245,12 +6397,15 @@ var Toolbar = ({
               } else {
                 const currentHTML = editor.getHTML();
                 const isEmptyContent = !currentHTML || currentHTML === "<p></p>" || currentHTML.trim() === "";
+                const formattedHTML = isEmptyContent ? "" : formatHtml(currentHTML);
                 const codeBlockContent = isEmptyContent ? { type: "doc", content: [{ type: "codeBlock" }] } : {
                   type: "doc",
                   content: [
                     {
                       type: "codeBlock",
-                      content: [{ type: "text", text: currentHTML }]
+                      content: [
+                        { type: "text", text: formattedHTML }
+                      ]
                     }
                   ]
                 };