Merge pull request #2 from md2docx/optimize

Optimize

Author: mayank1513

lib/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @m2d/html
 
+## 1.0.1
+
+### Patch Changes
+
+- 114454a: fix: Fix inline tag extraction logic
+- 2cc7d49: fix: Improve inline tag list. 2. Remove extra spacings.
+- 5964742: Fix: fix form styles
+- 0d71109: fix: Fix nested inline html tags
+- 06a4f14: Fix: handle block and inline nodes in preprocess.
+
 ## 1.0.0
 
 ### Major Changes

lib/package.json

@@ -2,7 +2,7 @@
   "name": "@m2d/html",
   "author": "Mayank Kumar Chaudhari (https://mayank-chaudhari.vercel.app)",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Extend MDAST by parsing embedded HTML in Markdown. Converts HTML into structured MDAST nodes compatible with @m2d/core for DOCX generation.",
   "license": "MPL-2.0",
   "main": "./dist/index.js",

lib/src/index.ts

@@ -9,48 +9,79 @@ import {
   RootContent,
   BlockContent,
   TableRow,
+  Html,
 } from "@m2d/core";
 import { standardizeColor } from "./utils";
-import {
-  AlignmentType,
-  BorderStyle,
-  FrameAnchorType,
-  HorizontalPositionAlign,
-  IBorderOptions,
-  VerticalPositionAlign,
-} from "docx";
+import { AlignmentType, BorderStyle, IBorderOptions } from "docx";
 
 /**
  * HTML inline tags supported by the plugin for conversion.
  */
 const INLINE_TAGS = [
+  "A",
+  "ABBR",
+  "ACRONYM", // Deprecated but still inline
+  "B",
+  "BDI",
+  "BDO",
+  "BIG", // Deprecated but still inline
   "BR",
-  "IMG",
+  "BUTTON", // Technically inline-block, but often treated inline
+  "CITE",
+  "CODE",
+  "DATA",
+  "DATALIST",
+  "DEL",
+  "DFN",
   "EM",
   "I",
-  "STRONG",
-  "B",
-  "DEL",
+  "IMG",
+  "INPUT",
+  "INS",
+  "KBD",
+  "LABEL",
+  "MARK",
+  "METER",
+  "NOSCRIPT",
+  "OBJECT",
+  "OUTPUT",
+  "Q",
+  "RUBY",
+  "RP",
+  "RT",
   "S",
-  "A",
-  "SUP",
+  "SAMP",
+  "SCRIPT",
+  "SELECT",
+  "SLOT",
+  "SMALL",
+  "SPAN",
+  "STRONG",
   "SUB",
+  "SUP",
   "svg",
+  "TEMPLATE",
+  "TEXTAREA",
+  "TIME",
+  "U",
+  "TT", // Deprecated
+  "VAR",
+  "WBR",
 ] as const;
 
 /**
  * Mapping of DOM tag names to MDAST node types.
  */
 const DOM_TO_MDAST_MAP = {
+  A: "link",
+  B: "strong",
   BR: "break",
-  IMG: "image",
   EM: "emphasis",
-  I: "emphasis",
   STRONG: "strong",
-  B: "strong",
+  I: "emphasis",
+  IMG: "image",
   DEL: "delete",
   S: "delete",
-  A: "link",
 } as const;
 
 /**
@@ -68,6 +99,11 @@ const CSS_BORDER_STYLES = [
   "outset",
 ];
 
+interface HtmlNode extends Html {
+  tag: string;
+  children: (RootContent | PhrasingContent)[];
+}
+
 /**
  * Parsed CSS border representation.
  */
@@ -227,11 +263,14 @@ const parseStyles = (el: Node, inline = true): Data => {
  * @param el - DOM node to process.
  * @returns PhrasingContent-compatible node.
  */
-const processInlineDOMNode = (el: Node): PhrasingContent => {
+const processInlineDOMNode = (el: Node, isPre = false): PhrasingContent => {
   if (!(el instanceof HTMLElement || el instanceof SVGElement))
-    return { type: "text", value: el.textContent ?? "" };
+    return {
+      type: "text",
+      value: (isPre ? el.textContent : el.textContent?.replace(/^\s+|\s+$/g, " ")) ?? "",
+    };
 
-  const children = Array.from(el.childNodes).map(processInlineDOMNode);
+  const children = Array.from(el.childNodes).map(cNode => processInlineDOMNode(cNode, isPre));
   const data = parseStyles(el);
   const attributes: Record<string, string> = el
     .getAttributeNames()
@@ -269,7 +308,13 @@ const processInlineDOMNode = (el: Node): PhrasingContent => {
         data,
       };
     case "INPUT":
-      if (/(radio|checkbox)/.test((el as HTMLInputElement).type)) return { type: "checkbox" };
+      return /(radio|checkbox)/.test((el as HTMLInputElement).type)
+        ? { type: "checkbox" }
+        : {
+            type: "text",
+            value: `_${(el as HTMLInputElement).value || "_".repeat(20)}_`,
+            data: { ...data, border: { style: BorderStyle.OUTSET } },
+          };
   }
   return { type: "fragment", children, data };
 };
@@ -291,14 +336,21 @@ const createFragmentWithParentNodes = (el: Node, data?: Data): BlockContent => {
       !INLINE_TAGS.includes(node.tagName as (typeof INLINE_TAGS)[number])
     ) {
       if (tmp.length) {
-        children.push({ type: "paragraph", children: tmp.map(processInlineDOMNode) });
+        children.push({
+          type: "paragraph",
+          children: tmp.map(tNode => processInlineDOMNode(tNode, data?.pre)),
+        });
         tmp.length = 0;
       }
       // skipcq: JS-0357
       children.push(processDOMNode(node));
     } else tmp.push(node);
   }
-  if (tmp.length) children.push({ type: "paragraph", children: tmp.map(processInlineDOMNode) });
+  if (tmp.length)
+    children.push({
+      type: "paragraph",
+      children: tmp.map(tNode => processInlineDOMNode(tNode, data?.pre)),
+    });
   return children.length === 1
     ? { ...children[0], data: { ...data, ...children[0].data } }
     : {
@@ -356,7 +408,7 @@ const processDOMNode = (el: HTMLElement | SVGElement): BlockContent => {
       return {
         type: "heading",
         depth: parseInt(el.tagName[1]),
-        children: Array.from(el.childNodes).map(processInlineDOMNode),
+        children: Array.from(el.childNodes).map(cNode => processInlineDOMNode(cNode)),
         data,
       } as Heading;
     case "PRE":
@@ -400,48 +452,41 @@ const processDOMNode = (el: HTMLElement | SVGElement): BlockContent => {
         children: [{ type: "text", value: `Not supported yet!\n\n${el.textContent}` }],
         data: { ...data, pre: true, border: defaultBorder },
       };
-    case "INPUT":
-      if (!/(radio|checkbox)/.test((el as HTMLInputElement).type)) {
-        return {
-          type: "paragraph",
-          children: [],
-          data: {
-            ...data,
-            frame: {
-              width: 5000,
-              height: 90,
-              alignment: { x: HorizontalPositionAlign.LEFT, y: VerticalPositionAlign.CENTER },
-              anchor: {
-                horizontal: FrameAnchorType.TEXT,
-                vertical: FrameAnchorType.TEXT,
-              },
-              type: "alignment",
-            },
-            border: defaultBorder,
-          },
-        };
-      }
   }
   return { type: "paragraph", children: [processInlineDOMNode(el)], data };
 };
 
+const processInlineNode = (node: HtmlNode) => {
+  const value = node.value?.trim() ?? "";
+  const tag = value.split(" ")[0].slice(1);
+  const el = document.createElement("div");
+  el.innerHTML = value.endsWith("/>") ? value : `${value}</${tag}>`;
+  Object.assign(node, {
+    ...processInlineDOMNode(el.children[0]),
+    children: node.children ?? [],
+  });
+};
+
 /**
  * Consolidates inline HTML tag children inside valid tag-matching groups.
  *
  * @param pNode - MDAST parent node.
  */
-const consolidateInlineHTML = (pNode: Parent) => {
+const preprocess = (pNode: Parent, isRoot = true) => {
   const children: RootContent[] = [];
-  const htmlNodeStack: (Parent & { tag: string })[] = [];
+  const htmlNodeStack: HtmlNode[] = [];
+
   for (const node of pNode.children) {
-    if ((node as Parent).children?.length) consolidateInlineHTML(node as Parent);
+    if ((node as Parent).children?.length) preprocess(node as Parent, false);
     // match only inline non-self-closing html nodes.
     if (node.type === "html" && /^<[^>]*[^/]>$/.test(node.value)) {
-      const tag = node.value.split(" ")[0].slice(1);
+      const tag = node.value.split(" ")[0].replace(/^<|>$/g, "");
       // ending tag
       if (tag[0] === "/") {
-        if (htmlNodeStack[0]?.tag === tag.slice(1, -1))
-          children.push(htmlNodeStack.shift() as RootContent);
+        const hNode = htmlNodeStack.shift();
+        if (!hNode) throw new Error(`Invalid HTML: ${node.value}`);
+        processInlineNode(hNode);
+        (htmlNodeStack[0]?.children ?? children).push(hNode);
       } else {
         htmlNodeStack.unshift({ ...node, children: [], tag });
       }
@@ -450,6 +495,21 @@ const consolidateInlineHTML = (pNode: Parent) => {
     } else {
       children.push(node);
     }
+
+    const isSelfClosingTag = node.type === "html" && /^<[^>]*\/>$/.test(node.value);
+    // self closing tags
+    if (isSelfClosingTag && !isRoot) {
+      // @ts-expect-error -- ok
+      processInlineNode(node);
+    } else if (
+      (isSelfClosingTag && isRoot) ||
+      (node.type === "html" && !/^<[^>]*>$/.test(node.value))
+    ) {
+      // block html
+      const el = document.createElement("div");
+      el.innerHTML = node.value;
+      Object.assign(node, createFragmentWithParentNodes(el));
+    }
   }
   pNode.children = children;
 };
@@ -465,26 +525,6 @@ const consolidateInlineHTML = (pNode: Parent) => {
  */
 export const htmlPlugin: () => IPlugin = () => {
   return {
-    block: async (_docx, node) => {
-      if (node.type === "html") {
-        const el = document.createElement("div");
-        el.innerHTML = node.value;
-
-        Object.assign(node, createFragmentWithParentNodes(el));
-      }
-      return [];
-    },
-    inline: async (_docx, node) => {
-      if (node.type === "html") {
-        const value = node.value?.trim() ?? "";
-        const tag = value.split(" ")[0].slice(1);
-        const el = document.createElement("div");
-        el.innerHTML = value.endsWith("/>") ? value : `${value}</${tag}>`;
-        // @ts-expect-error - changing node type here.
-        Object.assign(node, { ...processInlineDOMNode(el.children[0]), children: node.children });
-      }
-      return [];
-    },
-    preprocess: consolidateInlineHTML,
+    preprocess,
   };
 };

packages/shared/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @repo/shared
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [114454a]
+- Updated dependencies [2cc7d49]
+- Updated dependencies [5964742]
+- Updated dependencies [0d71109]
+- Updated dependencies [06a4f14]
+  - @m2d/html@1.0.1
+
 ## 0.0.2
 
 ### Patch Changes

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/shared",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -52,11 +52,9 @@
     "r18gs": "^3.0.1",
     "react-live": "^4.1.8",
     "react18-loaders": "^1.1.4",
-    "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
-    "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "unified": "^11.0.5",
     "unist-util-remove-position": "^5.0.0"
   }
-}
+}