markmap-lib 0.15.8 → 0.15.9-alpha.11

package/dist/browser/index.mjs

@@ -1,29 +1,212 @@
+import { Hook, buildJSItem, buildCSSItem, loadJS, noop, wrapFunction, UrlBuilder, persistCSS, persistJS } from "markmap-common";
+import { buildTree } from "markmap-html-parser";
 import { Remarkable } from "remarkable";
-import { buildJSItem, buildCSSItem, Hook, noop, loadJS, UrlBuilder, wrapFunction, persistCSS, persistJS } from "markmap-common";
-import remarkableKatex from "remarkable-katex";
 import yaml from "js-yaml";
+import remarkableKatex from "remarkable-katex";
 const template = '<!DOCTYPE html>\n<html>\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<meta http-equiv="X-UA-Compatible" content="ie=edge">\n<title>Markmap</title>\n<style>\n* {\n  margin: 0;\n  padding: 0;\n}\n#mindmap {\n  display: block;\n  width: 100vw;\n  height: 100vh;\n}\n</style>\n<!--CSS-->\n</head>\n<body>\n<svg id="mindmap"></svg>\n<!--JS-->\n</body>\n</html>\n';
 const baseJsPaths = [
   `d3@${"7.8.5"}/dist/d3.min.js`,
   `markmap-view@${"0.15.8"}/dist/browser/index.js`
 ];
-const name$3 = "katex";
+function createTransformHooks(transformer) {
+  return {
+    transformer,
+    parser: new Hook(),
+    beforeParse: new Hook(),
+    afterParse: new Hook(),
+    htmltag: new Hook(),
+    retransform: new Hook()
+  };
+}
+function definePlugin(plugin2) {
+  return plugin2;
+}
+const svg_marked = `<svg width="16" height="16" fill="currentColor" viewBox="0 -3 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"/></svg>`;
+const svg_unmarked = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 -3 24 24"><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5z" clip-rule="evenodd"/></svg>`;
+const name$5 = "checkbox";
+const plugin$3 = definePlugin({
+  name: name$5,
+  transform(transformHooks) {
+    transformHooks.parser.tap((md) => {
+      md.core.ruler.before(
+        "inline",
+        "checkbox",
+        (state) => {
+          for (let i = 2; i < state.tokens.length; i += 1) {
+            const token = state.tokens[i];
+            if (token.type === "inline" && token.content) {
+              const prevType = state.tokens[i - 1].type;
+              const prevPrevType = state.tokens[i - 2].type;
+              if (prevType === "heading_open" || prevType === "paragraph_open" && prevPrevType === "list_item_open") {
+                if (token.content.startsWith("[ ]")) {
+                  token.content = `${svg_unmarked} ${token.content.slice(3)}`;
+                } else if (token.content.startsWith("[x]")) {
+                  token.content = `${svg_marked} ${token.content.slice(3)}`;
+                }
+              }
+            }
+          }
+          return false;
+        },
+        {}
+      );
+    });
+    return {};
+  }
+});
+const checkbox = plugin$3;
+const name$4 = "frontmatter";
+const frontmatter = definePlugin({
+  name: name$4,
+  transform(transformHooks) {
+    transformHooks.beforeParse.tap((md, context) => {
+      const { content } = context;
+      if (!/^---\r?\n/.test(content))
+        return;
+      const match = /\n---\r?\n/.exec(content);
+      if (!match)
+        return;
+      const raw = content.slice(4, match.index);
+      let frontmatter2;
+      try {
+        frontmatter2 = yaml.load(raw);
+        if (frontmatter2 == null ? void 0 : frontmatter2.markmap) {
+          frontmatter2.markmap = normalizeMarkmapJsonOptions(
+            frontmatter2.markmap
+          );
+        }
+      } catch {
+        return;
+      }
+      context.frontmatter = frontmatter2;
+      context.content = content.slice(match.index + match[0].length);
+      context.contentLineOffset = content.slice(0, match.index).split("\n").length + 1;
+    });
+    return {};
+  }
+});
+function normalizeMarkmapJsonOptions(options) {
+  if (!options)
+    return;
+  ["color", "extraJs", "extraCss"].forEach((key) => {
+    if (options[key] != null)
+      options[key] = normalizeStringArray(options[key]);
+  });
+  ["duration", "maxWidth", "initialExpandLevel"].forEach((key) => {
+    if (options[key] != null)
+      options[key] = normalizeNumber(options[key]);
+  });
+  return options;
+}
+function normalizeStringArray(value) {
+  let result;
+  if (typeof value === "string")
+    result = [value];
+  else if (Array.isArray(value))
+    result = value.filter((item) => item && typeof item === "string");
+  return (result == null ? void 0 : result.length) ? result : void 0;
+}
+function normalizeNumber(value) {
+  if (isNaN(+value))
+    return;
+  return +value;
+}
+function patchJSItem(urlBuilder, item) {
+  if (item.type === "script" && item.data.src) {
+    return {
+      ...item,
+      data: {
+        ...item.data,
+        src: urlBuilder.getFullUrl(item.data.src)
+      }
+    };
+  }
+  return item;
+}
+function patchCSSItem(urlBuilder, item) {
+  if (item.type === "stylesheet" && item.data.href) {
+    return {
+      ...item,
+      data: {
+        ...item.data,
+        href: urlBuilder.getFullUrl(item.data.href)
+      }
+    };
+  }
+  return item;
+}
+const name$3 = "hljs";
 const preloadScripts$1 = [
+  `@highlightjs/cdn-assets@${"11.8.0"}/highlight.min.js`
+].map((path) => buildJSItem(path));
+const styles$1 = [
+  `@highlightjs/cdn-assets@${"11.8.0"}/styles/default.min.css`
+  // `highlight.js@${process.env.HLJS_VERSION}/styles/default.css`,
+].map((path) => buildCSSItem(path));
+const config$1 = {
+  versions: {
+    hljs: "11.8.0"
+  },
+  preloadScripts: preloadScripts$1,
+  styles: styles$1
+};
+const plugin$2 = definePlugin({
+  name: name$3,
+  config: config$1,
+  transform(transformHooks) {
+    var _a, _b, _c;
+    let loading;
+    const preloadScripts2 = ((_b = (_a = plugin$2.config) == null ? void 0 : _a.preloadScripts) == null ? void 0 : _b.map(
+      (item) => patchJSItem(transformHooks.transformer.urlBuilder, item)
+    )) || [];
+    const autoload = () => {
+      loading || (loading = loadJS(preloadScripts2));
+      return loading;
+    };
+    let enableFeature = noop;
+    transformHooks.parser.tap((md) => {
+      md.set({
+        highlight: (str, language) => {
+          enableFeature();
+          const { hljs: hljs2 } = window;
+          if (hljs2) {
+            return hljs2.highlightAuto(str, language ? [language] : void 0).value;
+          }
+          autoload().then(() => {
+            transformHooks.retransform.call();
+          });
+          return str;
+        }
+      });
+    });
+    transformHooks.beforeParse.tap((_, context) => {
+      enableFeature = () => {
+        context.features[name$3] = true;
+      };
+    });
+    return {
+      styles: (_c = plugin$2.config) == null ? void 0 : _c.styles
+    };
+  }
+});
+const hljs = plugin$2;
+const name$2 = "katex";
+const preloadScripts = [
   `katex@${"0.16.8"}/dist/katex.min.js`
 ].map((path) => buildJSItem(path));
 const webfontloader = buildJSItem(
   `webfontloader@${"1.6.28"}/webfontloader.js`
 );
 webfontloader.data.defer = true;
-const styles$1 = [`katex@${"0.16.8"}/dist/katex.min.css`].map(
+const styles = [`katex@${"0.16.8"}/dist/katex.min.css`].map(
   (path) => buildCSSItem(path)
 );
-const config$1 = {
+const config = {
   versions: {
     katex: "0.16.8",
     webfontloader: "1.6.28"
   },
-  preloadScripts: preloadScripts$1,
+  preloadScripts,
   scripts: [
     {
       type: "iife",
@@ -58,7 +241,7 @@ const config$1 = {
     },
     webfontloader
   ],
-  styles: styles$1
+  styles
 };
 function addDefaultVersions(paths, name2, version) {
   return paths.map((path) => {
@@ -76,46 +259,9 @@ function addDefaultVersions(paths, name2, version) {
     return path;
   });
 }
-function patchJSItem(urlBuilder, item) {
-  if (item.type === "script" && item.data.src) {
-    return {
-      ...item,
-      data: {
-        ...item.data,
-        src: urlBuilder.getFullUrl(item.data.src)
-      }
-    };
-  }
-  return item;
-}
-function patchCSSItem(urlBuilder, item) {
-  if (item.type === "stylesheet" && item.data.href) {
-    return {
-      ...item,
-      data: {
-        ...item.data,
-        href: urlBuilder.getFullUrl(item.data.href)
-      }
-    };
-  }
-  return item;
-}
-function createTransformHooks(transformer) {
-  return {
-    transformer,
-    parser: new Hook(),
-    beforeParse: new Hook(),
-    afterParse: new Hook(),
-    htmltag: new Hook(),
-    retransform: new Hook()
-  };
-}
-function definePlugin(plugin2) {
-  return plugin2;
-}
 const plugin$1 = definePlugin({
-  name: name$3,
-  config: config$1,
+  name: name$2,
+  config,
   transform(transformHooks) {
     var _a, _b, _c, _d;
     let loading;
@@ -127,9 +273,9 @@ const plugin$1 = definePlugin({
       return loading;
     };
     const renderKatex = (source, displayMode) => {
-      const { katex } = window;
-      if (katex) {
-        return katex.renderToString(source, {
+      const { katex: katex2 } = window;
+      if (katex2) {
+        return katex2.renderToString(source, {
           displayMode,
           throwOnError: false
         });
@@ -150,7 +296,7 @@ const plugin$1 = definePlugin({
     });
     transformHooks.beforeParse.tap((_, context) => {
       enableFeature = () => {
-        context.features[name$3] = true;
+        context.features[name$2] = true;
       };
     });
     transformHooks.afterParse.tap((_, context) => {
@@ -163,7 +309,7 @@ const plugin$1 = definePlugin({
           if (value) {
             markmap[key] = addDefaultVersions(
               value,
-              name$3,
+              name$2,
               ((_b2 = (_a3 = plugin$1.config) == null ? void 0 : _a3.versions) == null ? void 0 : _b2.katex) || ""
             );
           }
@@ -176,62 +322,7 @@ const plugin$1 = definePlugin({
     };
   }
 });
-const name$2 = "frontmatter";
-const frontmatter = definePlugin({
-  name: name$2,
-  transform(transformHooks) {
-    transformHooks.beforeParse.tap((md, context) => {
-      const { content } = context;
-      if (!/^---\r?\n/.test(content))
-        return;
-      const match = /\n---\r?\n/.exec(content);
-      if (!match)
-        return;
-      const raw = content.slice(4, match.index);
-      let frontmatter2;
-      try {
-        frontmatter2 = yaml.load(raw);
-        if (frontmatter2 == null ? void 0 : frontmatter2.markmap) {
-          frontmatter2.markmap = normalizeMarkmapJsonOptions(
-            frontmatter2.markmap
-          );
-        }
-      } catch {
-        return;
-      }
-      context.frontmatter = frontmatter2;
-      context.content = content.slice(match.index + match[0].length);
-      context.contentLineOffset = content.slice(0, match.index).split("\n").length + 1;
-    });
-    return {};
-  }
-});
-function normalizeMarkmapJsonOptions(options) {
-  if (!options)
-    return;
-  ["color", "extraJs", "extraCss"].forEach((key) => {
-    if (options[key] != null)
-      options[key] = normalizeStringArray(options[key]);
-  });
-  ["duration", "maxWidth", "initialExpandLevel"].forEach((key) => {
-    if (options[key] != null)
-      options[key] = normalizeNumber(options[key]);
-  });
-  return options;
-}
-function normalizeStringArray(value) {
-  let result;
-  if (typeof value === "string")
-    result = [value];
-  else if (Array.isArray(value))
-    result = value.filter((item) => item && typeof item === "string");
-  return (result == null ? void 0 : result.length) ? result : void 0;
-}
-function normalizeNumber(value) {
-  if (isNaN(+value))
-    return;
-  return +value;
-}
+const katex = plugin$1;
 const name$1 = "npmUrl";
 const npmUrl = definePlugin({
   name: name$1,
@@ -258,113 +349,68 @@ const npmUrl = definePlugin({
     return {};
   }
 });
-const name = "hljs";
-const preloadScripts = [
-  `@highlightjs/cdn-assets@${"11.8.0"}/highlight.min.js`
-].map((path) => buildJSItem(path));
-const styles = [
-  `@highlightjs/cdn-assets@${"11.8.0"}/styles/default.min.css`
-  // `highlight.js@${process.env.HLJS_VERSION}/styles/default.css`,
-].map((path) => buildCSSItem(path));
-const config = {
-  versions: {
-    hljs: "11.8.0"
-  },
-  preloadScripts,
-  styles
-};
+const name = "sourceLines";
 const plugin = definePlugin({
   name,
-  config,
   transform(transformHooks) {
-    var _a, _b, _c;
-    let loading;
-    const preloadScripts2 = ((_b = (_a = plugin.config) == null ? void 0 : _a.preloadScripts) == null ? void 0 : _b.map(
-      (item) => patchJSItem(transformHooks.transformer.urlBuilder, item)
-    )) || [];
-    const autoload = () => {
-      loading || (loading = loadJS(preloadScripts2));
-      return loading;
-    };
-    let enableFeature = noop;
     transformHooks.parser.tap((md) => {
-      md.set({
-        highlight: (str, language) => {
-          enableFeature();
-          const { hljs } = window;
-          if (hljs) {
-            return hljs.highlightAuto(str, language ? [language] : void 0).value;
-          }
-          autoload().then(() => {
-            transformHooks.retransform.call();
+      Object.entries(md.renderer.rules).forEach(([key, value]) => {
+        if (typeof value === "function") {
+          md.renderer.rules[key] = patchRule(value);
+        } else {
+          Object.entries(value).forEach(([k, v]) => {
+            value[k] = patchRule(v);
           });
-          return str;
         }
       });
     });
-    transformHooks.beforeParse.tap((_, context) => {
-      enableFeature = () => {
-        context.features[name] = true;
-      };
-    });
-    return {
-      styles: (_c = plugin.config) == null ? void 0 : _c.styles
-    };
+    return {};
   }
 });
-const plugins = [frontmatter, plugin$1, plugin, npmUrl];
-function cleanNode(node) {
-  var _a, _b;
-  if (node.type === "heading") {
-    node.children = node.children.filter((item) => item.type !== "paragraph");
-  } else if (node.type === "list_item") {
-    node.children = node.children.filter((item) => {
-      if (["paragraph", "fence"].includes(item.type)) {
-        if (!node.content) {
-          node.content = item.content;
-          node.payload = {
-            ...node.payload,
-            ...item.payload
-          };
-        }
-        return false;
-      }
-      return true;
-    });
-    if (((_a = node.payload) == null ? void 0 : _a.index) != null) {
-      node.content = `${node.payload.index}. ${node.content}`;
+function patchRule(rule, _key) {
+  return wrapFunction(rule, (render, tokens, idx, ...rest) => {
+    let html = render(tokens, idx, ...rest);
+    const { lines } = tokens[idx];
+    if (lines) {
+      html = html.replace(
+        /^<[\w-]+/,
+        (m) => `${m} data-lines="${lines.join(",")}"`
+      );
     }
-  } else if (node.type === "ordered_list") {
-    let index = ((_b = node.payload) == null ? void 0 : _b.startIndex) ?? 1;
-    node.children.forEach((item) => {
-      if (item.type === "list_item") {
-        item.payload = {
-          ...item.payload,
-          index
-        };
-        index += 1;
-      }
-    });
+    return html;
+  });
+}
+const sourceLines = plugin;
+const plugins = [
+  frontmatter,
+  katex,
+  hljs,
+  npmUrl,
+  checkbox,
+  sourceLines
+];
+const builtInPlugins = plugins;
+function cleanNode(node) {
+  while (!node.content && node.children.length === 1) {
+    node = node.children[0];
   }
-  if (node.children.length > 0) {
-    node.children.forEach((child) => cleanNode(child));
-    if (node.children.length === 1 && !node.children[0].content) {
-      node.children = node.children[0].children;
-    }
+  while (node.children.length === 1 && !node.children[0].content) {
+    node = {
+      ...node,
+      children: node.children[0].children
+    };
   }
-}
-function resetDepth(node, depth = 0) {
-  node.depth = depth;
-  node.children.forEach((child) => {
-    resetDepth(child, depth + 1);
-  });
+  return {
+    ...node,
+    children: node.children.map(cleanNode)
+  };
 }
 class Transformer {
-  constructor(plugins$1 = plugins) {
+  constructor(plugins2 = builtInPlugins) {
     this.assetsMap = {};
     this.urlBuilder = new UrlBuilder();
     this.hooks = createTransformHooks(this);
-    this.plugins = plugins$1.map(
+    this.plugins = plugins2.map(
       (plugin2) => typeof plugin2 === "function" ? plugin2() : plugin2
     );
     const assetsMap = {};
@@ -388,100 +434,22 @@ class Transformer {
     this.md = md;
     this.hooks.parser.call(md);
   }
-  buildTree(tokens) {
-    const { md } = this;
-    const root = {
-      type: "root",
-      depth: 0,
-      content: "",
-      children: [],
-      payload: {}
-    };
-    const stack = [root];
-    let depth = 0;
-    for (const token of tokens) {
-      const payload = {};
-      if (token.lines) {
-        payload.lines = token.lines;
-      }
-      let current = stack[stack.length - 1];
-      if (token.type.endsWith("_open")) {
-        const type = token.type.slice(0, -5);
-        if (type === "heading") {
-          depth = token.hLevel;
-          while ((current == null ? void 0 : current.depth) >= depth) {
-            stack.pop();
-            current = stack[stack.length - 1];
-          }
-        } else {
-          depth = Math.max(depth, (current == null ? void 0 : current.depth) || 0) + 1;
-          if (type === "ordered_list") {
-            payload.startIndex = token.order;
-          }
-        }
-        const item = {
-          type,
-          depth,
-          payload,
-          content: "",
-          children: []
-        };
-        current.children.push(item);
-        stack.push(item);
-      } else if (!current) {
-        continue;
-      } else if (token.type === `${current.type}_close`) {
-        if (current.type === "heading") {
-          depth = current.depth;
-        } else {
-          stack.pop();
-          depth = 0;
-        }
-      } else if (token.type === "inline") {
-        const revoke = this.hooks.htmltag.tap((ctx) => {
-          var _a;
-          const comment = (_a = ctx.result) == null ? void 0 : _a.match(/^<!--([\s\S]*?)-->$/);
-          const data = comment == null ? void 0 : comment[1].trim().split(" ");
-          if ((data == null ? void 0 : data[0]) === "fold") {
-            current.payload = {
-              ...current.payload,
-              fold: ["all", "recursively"].includes(data[1]) ? 2 : 1
-            };
-            ctx.result = "";
-          }
-        });
-        const text = md.renderer.render([token], md.options, {});
-        revoke();
-        current.content = `${current.content || ""}${text}`;
-      } else if (token.type === "fence") {
-        const result = md.renderer.render([token], md.options, {});
-        current.children.push({
-          type: token.type,
-          depth: depth + 1,
-          content: result,
-          children: [],
-          payload
-        });
-      } else
-        ;
-    }
-    return root;
-  }
-  transform(content) {
-    var _a;
+  transform(content, opts) {
+    var _a, _b;
     const context = {
       content,
       features: {},
       contentLineOffset: 0
     };
     this.hooks.beforeParse.call(this.md, context);
-    const tokens = this.md.parse(context.content, {});
+    const html = this.md.render(context.content, {});
     this.hooks.afterParse.call(this.md, context);
-    let root = this.buildTree(tokens);
-    cleanNode(root);
-    if (((_a = root.children) == null ? void 0 : _a.length) === 1)
-      root = root.children[0];
-    resetDepth(root);
+    const root = cleanNode(
+      buildTree(html, {
+        ...(_b = (_a = context.frontmatter) == null ? void 0 : _a.markmap) == null ? void 0 : _b.htmlParser,
+        ...opts
+      })
+    );
     return { ...context, root };
   }
   /**
@@ -560,7 +528,7 @@ const transformerVersions = {
 export {
   Transformer,
   baseJsPaths,
-  plugins as builtInPlugins,
+  builtInPlugins,
   template,
   transformerVersions
 };