marked-tree-to-html 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

package/README.md

@@ -0,0 +1,69 @@
+# marked-tree-to-html
+
+Marked extension for rendering ASCII tree structures as HTML tables.
+
+## Installation
+
+```bash
+npm install marked-tree-to-html tree-to-html marked
+```
+
+Or install from GitHub:
+
+```json
+{
+  "dependencies": {
+    "marked-tree-to-html": "github:iafan/marked-tree-to-html",
+    "tree-to-html": "github:iafan/tree-to-html"
+  }
+}
+```
+
+## Usage
+
+```typescript
+import { marked } from 'marked'
+import { treeExtension, renderTreeBlocks } from 'marked-tree-to-html'
+
+// Register the extension
+marked.use({ extensions: [treeExtension] })
+
+// Parse markdown
+const html = marked.parse(markdown)
+
+// Insert into DOM
+document.body.innerHTML = html
+
+// Post-process to render tree structures
+renderTreeBlocks()
+```
+
+## How It Works
+
+The extension intercepts:
+1. Code blocks marked with ` ```tree `
+2. Unmarked code blocks that contain ASCII tree characters (├, └, ─)
+
+These are rendered as placeholders that `renderTreeBlocks()` converts to HTML tables.
+
+## API
+
+### `treeExtension`
+
+Marked extension object. Use with `marked.use({ extensions: [treeExtension] })`.
+
+### `renderTreeBlocks(): void`
+
+Post-processes the DOM to convert tree placeholders to actual HTML tables.
+
+### `isTreeStructure(code: string): boolean`
+
+Check if a string contains ASCII tree characters.
+
+## Styling
+
+See [tree-to-html](https://github.com/iafan/tree-to-html) for CSS class documentation.
+
+## License
+
+This is free and unencumbered software released into the public domain (Unlicense).

package/dist/index.cjs

@@ -0,0 +1,86 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  isTreeStructure: () => isTreeStructure,
+  renderTreeBlocks: () => renderTreeBlocks,
+  treeExtension: () => treeExtension
+});
+module.exports = __toCommonJS(index_exports);
+var import_tree_to_html = require("tree-to-html");
+function isTreeStructure(code) {
+  const hasBranch = code.includes("\u251C");
+  const hasCorner = code.includes("\u2514");
+  const hasDash = code.includes("\u2500");
+  return (hasBranch || hasCorner) && hasDash;
+}
+function renderTreeBlocks() {
+  const containers = document.querySelectorAll(".tree-container-raw");
+  for (const container of containers) {
+    const source = container.textContent || "";
+    if (!source.trim()) continue;
+    try {
+      const html = (0, import_tree_to_html.renderTree)(source);
+      container.outerHTML = html;
+    } catch (error) {
+      console.error("Failed to render tree:", error);
+    }
+  }
+}
+var treeExtension = {
+  name: "tree",
+  level: "block",
+  start(src) {
+    const match = src.match(/^```(?:tree)?\n/);
+    return match?.index;
+  },
+  tokenizer(src) {
+    const treeMatch = src.match(/^```tree\n([\s\S]*?)\n```/);
+    if (treeMatch) {
+      return {
+        type: "tree",
+        raw: treeMatch[0],
+        text: treeMatch[1]
+      };
+    }
+    const codeMatch = src.match(/^```\n([\s\S]*?)\n```/);
+    if (codeMatch && isTreeStructure(codeMatch[1])) {
+      return {
+        type: "tree",
+        raw: codeMatch[0],
+        text: codeMatch[1]
+      };
+    }
+    return void 0;
+  },
+  renderer(token) {
+    const escaped = token.text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<div class="tree-container-raw">${escaped}</div>
+`;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isTreeStructure,
+  renderTreeBlocks,
+  treeExtension
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { TokenizerExtension, RendererExtension } from 'marked'\nimport { renderTree } from 'tree-to-html'\n\n/**\n * Check if a code block contains ASCII tree characters.\n */\nexport function isTreeStructure(code: string): boolean {\n  const hasBranch = code.includes('├')\n  const hasCorner = code.includes('└')\n  const hasDash = code.includes('─')\n  return (hasBranch || hasCorner) && hasDash\n}\n\n/**\n * Post-process rendered HTML to convert tree containers to actual tree HTML.\n * Call this after marked.parse() completes and DOM is ready.\n */\nexport function renderTreeBlocks(): void {\n  const containers = document.querySelectorAll<HTMLElement>('.tree-container-raw')\n\n  for (const container of containers) {\n    const source = container.textContent || ''\n    if (!source.trim()) continue\n\n    try {\n      const html = renderTree(source)\n      container.outerHTML = html\n    } catch (error) {\n      console.error('Failed to render tree:', error)\n    }\n  }\n}\n\n/**\n * Marked extension that intercepts code blocks with tree structure.\n * Use with: marked.use({ extensions: [treeExtension] })\n */\nexport const treeExtension: TokenizerExtension & RendererExtension = {\n  name: 'tree',\n  level: 'block',\n  start(src: string) {\n    // Look for code blocks that might contain tree structure\n    const match = src.match(/^```(?:tree)?\\n/)\n    return match?.index\n  },\n  tokenizer(src: string) {\n    // Match code blocks: ```tree or ``` followed by tree content\n    const treeMatch = src.match(/^```tree\\n([\\s\\S]*?)\\n```/)\n    if (treeMatch) {\n      return {\n        type: 'tree',\n        raw: treeMatch[0],\n        text: treeMatch[1],\n      }\n    }\n\n    // Match unmarked code blocks that contain tree characters\n    const codeMatch = src.match(/^```\\n([\\s\\S]*?)\\n```/)\n    if (codeMatch && isTreeStructure(codeMatch[1])) {\n      return {\n        type: 'tree',\n        raw: codeMatch[0],\n        text: codeMatch[1],\n      }\n    }\n\n    return undefined\n  },\n  renderer(token) {\n    const escaped = token.text\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n    return `<div class=\"tree-container-raw\">${escaped}</div>\\n`\n  },\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAA2B;AAKpB,SAAS,gBAAgB,MAAuB;AACrD,QAAM,YAAY,KAAK,SAAS,QAAG;AACnC,QAAM,YAAY,KAAK,SAAS,QAAG;AACnC,QAAM,UAAU,KAAK,SAAS,QAAG;AACjC,UAAQ,aAAa,cAAc;AACrC;AAMO,SAAS,mBAAyB;AACvC,QAAM,aAAa,SAAS,iBAA8B,qBAAqB;AAE/E,aAAW,aAAa,YAAY;AAClC,UAAM,SAAS,UAAU,eAAe;AACxC,QAAI,CAAC,OAAO,KAAK,EAAG;AAEpB,QAAI;AACF,YAAM,WAAO,gCAAW,MAAM;AAC9B,gBAAU,YAAY;AAAA,IACxB,SAAS,OAAO;AACd,cAAQ,MAAM,0BAA0B,KAAK;AAAA,IAC/C;AAAA,EACF;AACF;AAMO,IAAM,gBAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,KAAa;AAEjB,UAAM,QAAQ,IAAI,MAAM,iBAAiB;AACzC,WAAO,OAAO;AAAA,EAChB;AAAA,EACA,UAAU,KAAa;AAErB,UAAM,YAAY,IAAI,MAAM,2BAA2B;AACvD,QAAI,WAAW;AACb,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,UAAU,CAAC;AAAA,QAChB,MAAM,UAAU,CAAC;AAAA,MACnB;AAAA,IACF;AAGA,UAAM,YAAY,IAAI,MAAM,uBAAuB;AACnD,QAAI,aAAa,gBAAgB,UAAU,CAAC,CAAC,GAAG;AAC9C,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,UAAU,CAAC;AAAA,QAChB,MAAM,UAAU,CAAC;AAAA,MACnB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,OAAO;AACd,UAAM,UAAU,MAAM,KACnB,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AACvB,WAAO,mCAAmC,OAAO;AAAA;AAAA,EACnD;AACF;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import { TokenizerExtension, RendererExtension } from 'marked';
+
+/**
+ * Check if a code block contains ASCII tree characters.
+ */
+declare function isTreeStructure(code: string): boolean;
+/**
+ * Post-process rendered HTML to convert tree containers to actual tree HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+declare function renderTreeBlocks(): void;
+/**
+ * Marked extension that intercepts code blocks with tree structure.
+ * Use with: marked.use({ extensions: [treeExtension] })
+ */
+declare const treeExtension: TokenizerExtension & RendererExtension;
+
+export { isTreeStructure, renderTreeBlocks, treeExtension };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { TokenizerExtension, RendererExtension } from 'marked';
+
+/**
+ * Check if a code block contains ASCII tree characters.
+ */
+declare function isTreeStructure(code: string): boolean;
+/**
+ * Post-process rendered HTML to convert tree containers to actual tree HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+declare function renderTreeBlocks(): void;
+/**
+ * Marked extension that intercepts code blocks with tree structure.
+ * Use with: marked.use({ extensions: [treeExtension] })
+ */
+declare const treeExtension: TokenizerExtension & RendererExtension;
+
+export { isTreeStructure, renderTreeBlocks, treeExtension };

package/dist/index.js

@@ -0,0 +1,59 @@
+// src/index.ts
+import { renderTree } from "tree-to-html";
+function isTreeStructure(code) {
+  const hasBranch = code.includes("\u251C");
+  const hasCorner = code.includes("\u2514");
+  const hasDash = code.includes("\u2500");
+  return (hasBranch || hasCorner) && hasDash;
+}
+function renderTreeBlocks() {
+  const containers = document.querySelectorAll(".tree-container-raw");
+  for (const container of containers) {
+    const source = container.textContent || "";
+    if (!source.trim()) continue;
+    try {
+      const html = renderTree(source);
+      container.outerHTML = html;
+    } catch (error) {
+      console.error("Failed to render tree:", error);
+    }
+  }
+}
+var treeExtension = {
+  name: "tree",
+  level: "block",
+  start(src) {
+    const match = src.match(/^```(?:tree)?\n/);
+    return match?.index;
+  },
+  tokenizer(src) {
+    const treeMatch = src.match(/^```tree\n([\s\S]*?)\n```/);
+    if (treeMatch) {
+      return {
+        type: "tree",
+        raw: treeMatch[0],
+        text: treeMatch[1]
+      };
+    }
+    const codeMatch = src.match(/^```\n([\s\S]*?)\n```/);
+    if (codeMatch && isTreeStructure(codeMatch[1])) {
+      return {
+        type: "tree",
+        raw: codeMatch[0],
+        text: codeMatch[1]
+      };
+    }
+    return void 0;
+  },
+  renderer(token) {
+    const escaped = token.text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<div class="tree-container-raw">${escaped}</div>
+`;
+  }
+};
+export {
+  isTreeStructure,
+  renderTreeBlocks,
+  treeExtension
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { TokenizerExtension, RendererExtension } from 'marked'\nimport { renderTree } from 'tree-to-html'\n\n/**\n * Check if a code block contains ASCII tree characters.\n */\nexport function isTreeStructure(code: string): boolean {\n  const hasBranch = code.includes('├')\n  const hasCorner = code.includes('└')\n  const hasDash = code.includes('─')\n  return (hasBranch || hasCorner) && hasDash\n}\n\n/**\n * Post-process rendered HTML to convert tree containers to actual tree HTML.\n * Call this after marked.parse() completes and DOM is ready.\n */\nexport function renderTreeBlocks(): void {\n  const containers = document.querySelectorAll<HTMLElement>('.tree-container-raw')\n\n  for (const container of containers) {\n    const source = container.textContent || ''\n    if (!source.trim()) continue\n\n    try {\n      const html = renderTree(source)\n      container.outerHTML = html\n    } catch (error) {\n      console.error('Failed to render tree:', error)\n    }\n  }\n}\n\n/**\n * Marked extension that intercepts code blocks with tree structure.\n * Use with: marked.use({ extensions: [treeExtension] })\n */\nexport const treeExtension: TokenizerExtension & RendererExtension = {\n  name: 'tree',\n  level: 'block',\n  start(src: string) {\n    // Look for code blocks that might contain tree structure\n    const match = src.match(/^```(?:tree)?\\n/)\n    return match?.index\n  },\n  tokenizer(src: string) {\n    // Match code blocks: ```tree or ``` followed by tree content\n    const treeMatch = src.match(/^```tree\\n([\\s\\S]*?)\\n```/)\n    if (treeMatch) {\n      return {\n        type: 'tree',\n        raw: treeMatch[0],\n        text: treeMatch[1],\n      }\n    }\n\n    // Match unmarked code blocks that contain tree characters\n    const codeMatch = src.match(/^```\\n([\\s\\S]*?)\\n```/)\n    if (codeMatch && isTreeStructure(codeMatch[1])) {\n      return {\n        type: 'tree',\n        raw: codeMatch[0],\n        text: codeMatch[1],\n      }\n    }\n\n    return undefined\n  },\n  renderer(token) {\n    const escaped = token.text\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n    return `<div class=\"tree-container-raw\">${escaped}</div>\\n`\n  },\n}\n"],"mappings":";AACA,SAAS,kBAAkB;AAKpB,SAAS,gBAAgB,MAAuB;AACrD,QAAM,YAAY,KAAK,SAAS,QAAG;AACnC,QAAM,YAAY,KAAK,SAAS,QAAG;AACnC,QAAM,UAAU,KAAK,SAAS,QAAG;AACjC,UAAQ,aAAa,cAAc;AACrC;AAMO,SAAS,mBAAyB;AACvC,QAAM,aAAa,SAAS,iBAA8B,qBAAqB;AAE/E,aAAW,aAAa,YAAY;AAClC,UAAM,SAAS,UAAU,eAAe;AACxC,QAAI,CAAC,OAAO,KAAK,EAAG;AAEpB,QAAI;AACF,YAAM,OAAO,WAAW,MAAM;AAC9B,gBAAU,YAAY;AAAA,IACxB,SAAS,OAAO;AACd,cAAQ,MAAM,0BAA0B,KAAK;AAAA,IAC/C;AAAA,EACF;AACF;AAMO,IAAM,gBAAwD;AAAA,EACnE,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM,KAAa;AAEjB,UAAM,QAAQ,IAAI,MAAM,iBAAiB;AACzC,WAAO,OAAO;AAAA,EAChB;AAAA,EACA,UAAU,KAAa;AAErB,UAAM,YAAY,IAAI,MAAM,2BAA2B;AACvD,QAAI,WAAW;AACb,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,UAAU,CAAC;AAAA,QAChB,MAAM,UAAU,CAAC;AAAA,MACnB;AAAA,IACF;AAGA,UAAM,YAAY,IAAI,MAAM,uBAAuB;AACnD,QAAI,aAAa,gBAAgB,UAAU,CAAC,CAAC,GAAG;AAC9C,aAAO;AAAA,QACL,MAAM;AAAA,QACN,KAAK,UAAU,CAAC;AAAA,QAChB,MAAM,UAAU,CAAC;AAAA,MACnB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,OAAO;AACd,UAAM,UAAU,MAAM,KACnB,QAAQ,MAAM,OAAO,EACrB,QAAQ,MAAM,MAAM,EACpB,QAAQ,MAAM,MAAM;AACvB,WAAO,mCAAmC,OAAO;AAAA;AAAA,EACnD;AACF;","names":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "marked-tree-to-html",
+  "version": "1.0.0",
+  "description": "Marked extension for rendering ASCII tree structures as HTML",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "marked",
+    "tree",
+    "ascii",
+    "html",
+    "extension"
+  ],
+  "author": "Igor Afanasyev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iafan/marked-tree-to-html.git"
+  },
+  "license": "Unlicense",
+  "peerDependencies": {
+    "marked": ">=4.0.0",
+    "tree-to-html": ">=1.0.0"
+  },
+  "devDependencies": {
+    "marked": "^17.0.1",
+    "tree-to-html": "^1.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+import type { TokenizerExtension, RendererExtension } from 'marked'
+import { renderTree } from 'tree-to-html'
+
+/**
+ * Check if a code block contains ASCII tree characters.
+ */
+export function isTreeStructure(code: string): boolean {
+  const hasBranch = code.includes('├')
+  const hasCorner = code.includes('└')
+  const hasDash = code.includes('─')
+  return (hasBranch || hasCorner) && hasDash
+}
+
+/**
+ * Post-process rendered HTML to convert tree containers to actual tree HTML.
+ * Call this after marked.parse() completes and DOM is ready.
+ */
+export function renderTreeBlocks(): void {
+  const containers = document.querySelectorAll<HTMLElement>('.tree-container-raw')
+
+  for (const container of containers) {
+    const source = container.textContent || ''
+    if (!source.trim()) continue
+
+    try {
+      const html = renderTree(source)
+      container.outerHTML = html
+    } catch (error) {
+      console.error('Failed to render tree:', error)
+    }
+  }
+}
+
+/**
+ * Marked extension that intercepts code blocks with tree structure.
+ * Use with: marked.use({ extensions: [treeExtension] })
+ */
+export const treeExtension: TokenizerExtension & RendererExtension = {
+  name: 'tree',
+  level: 'block',
+  start(src: string) {
+    // Look for code blocks that might contain tree structure
+    const match = src.match(/^```(?:tree)?\n/)
+    return match?.index
+  },
+  tokenizer(src: string) {
+    // Match code blocks: ```tree or ``` followed by tree content
+    const treeMatch = src.match(/^```tree\n([\s\S]*?)\n```/)
+    if (treeMatch) {
+      return {
+        type: 'tree',
+        raw: treeMatch[0],
+        text: treeMatch[1],
+      }
+    }
+
+    // Match unmarked code blocks that contain tree characters
+    const codeMatch = src.match(/^```\n([\s\S]*?)\n```/)
+    if (codeMatch && isTreeStructure(codeMatch[1])) {
+      return {
+        type: 'tree',
+        raw: codeMatch[0],
+        text: codeMatch[1],
+      }
+    }
+
+    return undefined
+  },
+  renderer(token) {
+    const escaped = token.text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+    return `<div class="tree-container-raw">${escaped}</div>\n`
+  },
+}