markmap-lib 0.11.6 → 0.13.0

package/dist/index.esm.js

@@ -1,25 +1,23 @@
-/*! markmap-lib v0.11.6 | MIT License */
+/*! markmap-lib v0.13.0 | MIT License */
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { persistCSS, persistJS, wrapFunction, Hook } from 'markmap-common';
 import { Remarkable } from 'remarkable';
 import remarkableKatex from 'remarkable-katex';
 import Prism from 'prismjs';
 import loadLanguages from 'prismjs/components/';
+import yaml from 'js-yaml';
 
 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 BASE_JS = [`https://cdn.jsdelivr.net/npm/d3@${"6.6.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.2.6"}`].map(src => ({
+const BASE_JS = [`https://cdn.jsdelivr.net/npm/d3@${"6.7.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.13.0"}`].map(src => ({
   type: 'script',
   data: {
     src
   }
 }));
-function fillTemplate(data, assets, extra) {
-  if (typeof extra === 'function') {
-    extra = {
-      getOptions: extra
-    };
-  }
 
+const defaultGetOptions = (markmap, jsonOptions) => markmap.deriveOptions(jsonOptions);
+
+function fillTemplate(root, assets, extra) {
   extra = _extends({
     baseJs: BASE_JS
   }, extra);
@@ -30,24 +28,24 @@ function fillTemplate(data, assets, extra) {
   const cssList = [...(styles ? persistCSS(styles) : [])];
   const context = {
     getMarkmap: () => window.markmap,
-    getOptions: extra.getOptions,
-    data
+    getOptions: extra.getOptions || defaultGetOptions,
+    jsonOptions: extra.jsonOptions,
+    root
   };
-  const jsList = [...persistJS(extra.baseJs), ...persistJS([...(scripts || []), {
+  const jsList = [...persistJS([...extra.baseJs, ...(scripts || []), {
     type: 'iife',
     data: {
-      fn: (getMarkmap, getOptions, data) => {
-        const {
-          Markmap
-        } = getMarkmap();
-        window.mm = Markmap.create('svg#mindmap', getOptions == null ? void 0 : getOptions(), data);
+      fn: (getMarkmap, getOptions, root, jsonOptions) => {
+        const markmap = getMarkmap();
+        window.mm = markmap.Markmap.create('svg#mindmap', getOptions == null ? void 0 : getOptions(markmap, jsonOptions), root);
       },
       getParams: ({
         getMarkmap,
         getOptions,
-        data
+        root,
+        jsonOptions
       }) => {
-        return [getMarkmap, getOptions, data];
+        return [getMarkmap, getOptions, root, jsonOptions];
       }
     }
   }], context)];
@@ -55,16 +53,23 @@ function fillTemplate(data, assets, extra) {
   return html;
 }
 
-const name$1 = 'katex';
-function transform$1(transformHooks) {
-  transformHooks.parser.tap((md, features) => {
+const name$2 = 'katex';
+function transform$2(transformHooks) {
+  let enableFeature = () => {};
+
+  transformHooks.parser.tap(md => {
     md.use(remarkableKatex);
     md.renderer.rules.katex = wrapFunction(md.renderer.rules.katex, {
       after: () => {
-        features[name$1] = true;
+        enableFeature();
       }
     });
   });
+  transformHooks.transform.tap((_, context) => {
+    enableFeature = () => {
+      context.features[name$2] = true;
+    };
+  });
   return {
     styles: [{
       type: 'stylesheet',
@@ -105,19 +110,21 @@ function transform$1(transformHooks) {
 
 var katex = /*#__PURE__*/Object.freeze({
 __proto__: null,
-name: name$1,
-transform: transform$1
+name: name$2,
+transform: transform$2
 });
 
-const name = 'prism';
-function transform(transformHooks) {
-  transformHooks.parser.tap((md, features) => {
+const name$1 = 'prism';
+function transform$1(transformHooks) {
+  let enableFeature = () => {};
+
+  transformHooks.parser.tap(md => {
     md.set({
       highlight: (str, lang) => {
-        features[name] = true;
+        enableFeature();
         let grammar = Prism.languages[lang];
 
-        if (!grammar) {
+        if (!grammar && lang) {
           loadLanguages([lang]);
           grammar = Prism.languages[lang];
         }
@@ -130,11 +137,16 @@ function transform(transformHooks) {
       }
     });
   });
+  transformHooks.transform.tap((_, context) => {
+    enableFeature = () => {
+      context.features[name$1] = true;
+    };
+  });
   return {
     styles: [{
       type: 'stylesheet',
       data: {
-        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.23.0"}/themes/prism.css`
+        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.28.0"}/themes/prism.css`
       }
     }]
   };
@@ -142,6 +154,43 @@ function transform(transformHooks) {
 
 var prism = /*#__PURE__*/Object.freeze({
 __proto__: null,
+name: name$1,
+transform: transform$1
+});
+
+const name = 'frontmatter';
+function transform(transformHooks) {
+  transformHooks.transform.tap((md, context) => {
+    const origParse = md.parse;
+    md.parse = wrapFunction(origParse, {
+      before(ctx) {
+        const [content] = ctx.args;
+        if (!content.startsWith('---\n')) return;
+        const endOffset = content.indexOf('\n---\n');
+        if (endOffset < 0) return;
+        const raw = content.slice(4, endOffset);
+
+        try {
+          context.frontmatter = yaml.load(raw);
+        } catch (_unused) {
+          return;
+        }
+
+        const offset = endOffset + 5;
+        ctx.args[0] = content.slice(offset);
+      },
+
+      after() {
+        md.parse = origParse;
+      }
+
+    });
+  });
+  return {};
+}
+
+var frontmatter = /*#__PURE__*/Object.freeze({
+__proto__: null,
 name: name,
 transform: transform
 });
@@ -149,31 +198,27 @@ transform: transform
 function createTransformHooks() {
   return {
     parser: new Hook(),
+    transform: new Hook(),
     htmltag: new Hook(),
-
-    /**
-     * Indicate that the last transformation is not complete for reasons like
-     * lack of resources and is called when it is ready for a new transformation.
-     */
     retransform: new Hook()
   };
 }
 
-const plugins = [katex, prism];
+const plugins = [katex, prism, frontmatter];
 
 function cleanNode(node, depth = 0) {
-  if (node.t === 'heading') {
+  if (node.type === 'heading') {
     // drop all paragraphs
-    node.c = node.c.filter(item => item.t !== 'paragraph');
-  } else if (node.t === 'list_item') {
-    var _node$p;
+    node.children = node.children.filter(item => item.type !== 'paragraph');
+  } else if (node.type === 'list_item') {
+    var _node$payload;
 
     // keep first paragraph as content of list_item, drop others
-    node.c = node.c.filter(item => {
-      if (['paragraph', 'fence'].includes(item.t)) {
-        if (!node.v) {
-          node.v = item.v;
-          node.p = _extends({}, node.p, item.p);
+    node.children = node.children.filter(item => {
+      if (['paragraph', 'fence'].includes(item.type)) {
+        if (!node.content) {
+          node.content = item.content;
+          node.payload = _extends({}, node.payload, item.payload);
         }
 
         return false;
@@ -182,16 +227,16 @@ function cleanNode(node, depth = 0) {
       return true;
     });
 
-    if (((_node$p = node.p) == null ? void 0 : _node$p.index) != null) {
-      node.v = `${node.p.index}. ${node.v}`;
+    if (((_node$payload = node.payload) == null ? void 0 : _node$payload.index) != null) {
+      node.content = `${node.payload.index}. ${node.content}`;
     }
-  } else if (node.t === 'ordered_list') {
-    var _node$p$start, _node$p2;
+  } else if (node.type === 'ordered_list') {
+    var _node$payload$startIn, _node$payload2;
 
-    let index = (_node$p$start = (_node$p2 = node.p) == null ? void 0 : _node$p2.start) != null ? _node$p$start : 1;
-    node.c.forEach(item => {
-      if (item.t === 'list_item') {
-        item.p = _extends({}, item.p, {
+    let index = (_node$payload$startIn = (_node$payload2 = node.payload) == null ? void 0 : _node$payload2.startIndex) != null ? _node$payload$startIn : 1;
+    node.children.forEach(item => {
+      if (item.type === 'list_item') {
+        item.payload = _extends({}, item.payload, {
           index
         });
         index += 1;
@@ -199,39 +244,23 @@ function cleanNode(node, depth = 0) {
     });
   }
 
-  if (node.c.length === 0) {
-    delete node.c;
+  if (node.children.length === 0) {
+    delete node.children;
   } else {
-    node.c.forEach(child => cleanNode(child, depth + 1));
+    node.children.forEach(child => cleanNode(child, depth + 1));
 
-    if (node.c.length === 1 && !node.c[0].v) {
-      node.c = node.c[0].c;
+    if (node.children.length === 1 && !node.children[0].content) {
+      node.children = node.children[0].children;
     }
   }
 
-  node.d = depth;
+  node.depth = depth;
 }
 
 class Transformer {
   constructor(plugins$1 = plugins) {
-    this.plugins = void 0;
-    this.hooks = void 0;
-    this.md = void 0;
-    this.assetsMap = void 0;
     this.plugins = plugins$1;
     this.hooks = createTransformHooks();
-    const md = new Remarkable({
-      html: true,
-      breaks: true,
-      maxNesting: Infinity
-    });
-    md.block.ruler.enable(['deflist']);
-    md.renderer.rules.htmltag = wrapFunction(md.renderer.rules.htmltag, {
-      after: ctx => {
-        this.hooks.htmltag.call(ctx);
-      }
-    });
-    this.md = md;
     const assetsMap = {};
 
     for (const {
@@ -242,19 +271,30 @@ class Transformer {
     }
 
     this.assetsMap = assetsMap;
+    const md = new Remarkable('full', {
+      html: true,
+      breaks: true,
+      maxNesting: Infinity
+    });
+    md.renderer.rules.htmltag = wrapFunction(md.renderer.rules.htmltag, {
+      after: ctx => {
+        this.hooks.htmltag.call(ctx);
+      }
+    });
+    this.md = md;
+    this.hooks.parser.call(md);
   }
 
   buildTree(tokens) {
     const {
       md
-    } = this; // TODO deal with <dl><dt>
-
+    } = this;
     const root = {
-      t: 'root',
-      d: 0,
-      v: '',
-      c: [],
-      p: {}
+      type: 'root',
+      depth: 0,
+      content: '',
+      children: [],
+      payload: {}
     };
     const stack = [root];
     let depth = 0;
@@ -273,7 +313,7 @@ class Transformer {
         if (type === 'heading') {
           depth = token.hLevel;
 
-          while (((_current = current) == null ? void 0 : _current.d) >= depth) {
+          while (((_current = current) == null ? void 0 : _current.depth) >= depth) {
             var _current;
 
             stack.pop();
@@ -282,27 +322,27 @@ class Transformer {
         } else {
           var _current2;
 
-          depth = Math.max(depth, ((_current2 = current) == null ? void 0 : _current2.d) || 0) + 1;
+          depth = Math.max(depth, ((_current2 = current) == null ? void 0 : _current2.depth) || 0) + 1;
 
           if (type === 'ordered_list') {
-            payload.start = token.order;
+            payload.startIndex = token.order;
           }
         }
 
         const item = {
-          t: type,
-          d: depth,
-          p: payload,
-          v: '',
-          c: []
+          type,
+          depth,
+          payload,
+          content: '',
+          children: []
         };
-        current.c.push(item);
+        current.children.push(item);
         stack.push(item);
       } else if (!current) {
         continue;
-      } else if (token.type === `${current.t}_close`) {
-        if (current.t === 'heading') {
-          depth = current.d;
+      } else if (token.type === `${current.type}_close`) {
+        if (current.type === 'heading') {
+          depth = current.depth;
         } else {
           stack.pop();
           depth = 0;
@@ -313,23 +353,23 @@ class Transformer {
           const data = comment == null ? void 0 : comment[1].trim();
 
           if (data === 'fold') {
-            current.p.f = true;
+            current.payload.fold = true;
             ctx.result = '';
           }
         });
         const text = md.renderer.render([token], md.options, {});
         revoke();
-        current.v = `${current.v || ''}${text}`;
+        current.content = `${current.content || ''}${text}`;
       } else if (token.type === 'fence') {
         let result = md.renderer.render([token], md.options, {}); // Remarkable only adds className to `<code>` but not `<pre>`, copy it to make PrismJS style work.
 
         const matches = result.match(/<code( class="[^"]*")>/);
         if (matches) result = result.replace('<pre>', `<pre${matches[1]}>`);
-        current.c.push({
-          t: token.type,
-          d: depth + 1,
-          v: result,
-          c: []
+        current.children.push({
+          type: token.type,
+          depth: depth + 1,
+          content: result,
+          children: []
         });
       } else ;
     }
@@ -338,18 +378,19 @@ class Transformer {
   }
 
   transform(content) {
-    var _root$c;
+    var _root$children;
 
-    const features = {};
-    this.hooks.parser.call(this.md, features);
-    const tokens = this.md.parse(content || '', {});
+    const context = {
+      features: {}
+    };
+    this.hooks.transform.call(this.md, context);
+    const tokens = this.md.parse(content, {});
     let root = this.buildTree(tokens);
     cleanNode(root);
-    if (((_root$c = root.c) == null ? void 0 : _root$c.length) === 1) root = root.c[0];
-    return {
-      root,
-      features
-    };
+    if (((_root$children = root.children) == null ? void 0 : _root$children.length) === 1) root = root.children[0];
+    return _extends({}, context, {
+      root
+    });
   }
   /**
    * Get all assets from enabled plugins or filter them by plugin names as keys.