markmap-lib 0.12.0 → 0.13.0-alpha.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-/*! markmap-lib v0.12.0 | MIT License */
+/*! markmap-lib v0.13.0-alpha.0 | MIT License */
 import _extends from '@babel/runtime/helpers/esm/extends';
 import { persistCSS, persistJS, wrapFunction, Hook } from 'markmap-common';
 import { Remarkable } from 'remarkable';
@@ -8,19 +8,16 @@ 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.7.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.2.7"}`].map(src => ({
+const BASE_JS = [`https://cdn.jsdelivr.net/npm/d3@${"6.7.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.13.0-alpha.0"}`].map(src => ({
   type: 'script',
   data: {
     src
   }
 }));
-function fillTemplate(root, 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);
@@ -31,24 +28,24 @@ function fillTemplate(root, assets, extra) {
   const cssList = [...(styles ? persistCSS(styles) : [])];
   const context = {
     getMarkmap: () => window.markmap,
-    getOptions: extra.getOptions,
-    data: root
+    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)];
@@ -127,7 +124,7 @@ function transform$1(transformHooks) {
         enableFeature();
         let grammar = Prism.languages[lang];
 
-        if (!grammar) {
+        if (!grammar && lang) {
           loadLanguages([lang]);
           grammar = Prism.languages[lang];
         }
@@ -149,7 +146,7 @@ function transform$1(transformHooks) {
     styles: [{
       type: 'stylesheet',
       data: {
-        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.25.0"}/themes/prism.css`
+        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.28.0"}/themes/prism.css`
       }
     }]
   };
@@ -210,18 +207,18 @@ function createTransformHooks() {
 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;
@@ -230,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;
@@ -247,17 +244,17 @@ 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 {
@@ -274,12 +271,11 @@ class Transformer {
     }
 
     this.assetsMap = assetsMap;
-    const md = new Remarkable({
+    const md = new Remarkable('full', {
       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);
@@ -292,14 +288,13 @@ class Transformer {
   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;
@@ -318,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();
@@ -327,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;
@@ -358,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 ;
     }
@@ -383,7 +378,7 @@ class Transformer {
   }
 
   transform(content) {
-    var _root$c;
+    var _root$children;
 
     const context = {
       features: {}
@@ -392,7 +387,7 @@ class Transformer {
     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];
+    if (((_root$children = root.children) == null ? void 0 : _root$children.length) === 1) root = root.children[0];
     return _extends({}, context, {
       root
     });

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! markmap-lib v0.12.0 | MIT License */
+/*! markmap-lib v0.13.0-alpha.0 | MIT License */
 'use strict';
 
 var _extends = require('@babel/runtime/helpers/extends');
@@ -18,19 +18,16 @@ var loadLanguages__default = /*#__PURE__*/_interopDefaultLegacy(loadLanguages);
 var yaml__default = /*#__PURE__*/_interopDefaultLegacy(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.7.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.2.7"}`].map(src => ({
+const BASE_JS = [`https://cdn.jsdelivr.net/npm/d3@${"6.7.0"}`, `https://cdn.jsdelivr.net/npm/markmap-view@${"0.13.0-alpha.0"}`].map(src => ({
   type: 'script',
   data: {
     src
   }
 }));
-function fillTemplate(root, assets, extra) {
-  if (typeof extra === 'function') {
-    extra = {
-      getOptions: extra
-    };
-  }
 
+const defaultGetOptions = (markmap, jsonOptions) => markmap.deriveOptions(jsonOptions);
+
+function fillTemplate(root, assets, extra) {
   extra = _extends__default({
     baseJs: BASE_JS
   }, extra);
@@ -41,24 +38,24 @@ function fillTemplate(root, assets, extra) {
   const cssList = [...(styles ? markmapCommon.persistCSS(styles) : [])];
   const context = {
     getMarkmap: () => window.markmap,
-    getOptions: extra.getOptions,
-    data: root
+    getOptions: extra.getOptions || defaultGetOptions,
+    jsonOptions: extra.jsonOptions,
+    root
   };
-  const jsList = [...markmapCommon.persistJS(extra.baseJs), ...markmapCommon.persistJS([...(scripts || []), {
+  const jsList = [...markmapCommon.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)];
@@ -137,7 +134,7 @@ function transform$1(transformHooks) {
         enableFeature();
         let grammar = Prism__default.languages[lang];
 
-        if (!grammar) {
+        if (!grammar && lang) {
           loadLanguages__default([lang]);
           grammar = Prism__default.languages[lang];
         }
@@ -159,7 +156,7 @@ function transform$1(transformHooks) {
     styles: [{
       type: 'stylesheet',
       data: {
-        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.25.0"}/themes/prism.css`
+        href: `https://cdn.jsdelivr.net/npm/prismjs@${"1.28.0"}/themes/prism.css`
       }
     }]
   };
@@ -220,18 +217,18 @@ function createTransformHooks() {
 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__default({}, 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__default({}, node.payload, item.payload);
         }
 
         return false;
@@ -240,16 +237,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__default({}, 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__default({}, item.payload, {
           index
         });
         index += 1;
@@ -257,17 +254,17 @@ 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 {
@@ -284,12 +281,11 @@ class Transformer {
     }
 
     this.assetsMap = assetsMap;
-    const md = new remarkable.Remarkable({
+    const md = new remarkable.Remarkable('full', {
       html: true,
       breaks: true,
       maxNesting: Infinity
     });
-    md.block.ruler.enable(['deflist']);
     md.renderer.rules.htmltag = markmapCommon.wrapFunction(md.renderer.rules.htmltag, {
       after: ctx => {
         this.hooks.htmltag.call(ctx);
@@ -302,14 +298,13 @@ class Transformer {
   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;
@@ -328,7 +323,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();
@@ -337,27 +332,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;
@@ -368,23 +363,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 ;
     }
@@ -393,7 +388,7 @@ class Transformer {
   }
 
   transform(content) {
-    var _root$c;
+    var _root$children;
 
     const context = {
       features: {}
@@ -402,7 +397,7 @@ class Transformer {
     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];
+    if (((_root$children = root.children) == null ? void 0 : _root$children.length) === 1) root = root.children[0];
     return _extends__default({}, context, {
       root
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-lib",
-  "version": "0.12.0",
+  "version": "0.13.0-alpha.0",
   "description": "Visualize your Markdown as mindmaps with Markmap",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -35,16 +35,16 @@
   "repository": "git@github.com:gera2ld/markmap.git",
   "devDependencies": {
     "@types/remarkable": "^2.0.3",
-    "markmap-view": "^0.2.7"
+    "markmap-view": "^0.13.0-alpha.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "js-yaml": "^4.1.0",
     "katex": "^0.15.1",
-    "markmap-common": "^0.1.6",
+    "markmap-common": "^0.13.0-alpha.0",
     "prismjs": "^1.25.0",
     "remarkable": "^2.0.1",
     "remarkable-katex": "^1.1.8"
   },
-  "gitHead": "fbec667e1706813f9f60bea6a971f3820858ca40"
+  "gitHead": "969aa149f36580954e77b7ba434e5c48b409cfc2"
 }

package/types/template.d.ts

@@ -1,6 +1,8 @@
 import { JSItem, INode } from 'markmap-common';
+import type { IMarkmapOptions, IMarkmapJSONOptions } from 'markmap-view';
 import { IAssets } from './types';
 export declare function fillTemplate(root: INode | undefined, assets: IAssets, extra?: {
     baseJs?: JSItem[];
-    getOptions?: () => any;
-} | (() => any)): string;
+    jsonOptions?: IMarkmapJSONOptions;
+    getOptions?: (markmap: typeof window.markmap, jsonOptions: IMarkmapJSONOptions) => Partial<IMarkmapOptions>;
+}): string;

package/types/types.d.ts

@@ -1,5 +1,6 @@
 import type { Remarkable } from 'remarkable';
 import { CSSItem, JSItem, INode, IWrapContext, Hook } from 'markmap-common';
+declare type Htmltag = Remarkable.Rule<Remarkable.HtmlTagToken, string>;
 export interface ITransformHooks {
     /**
      * Tapped once when the parser is created.
@@ -12,7 +13,7 @@ export interface ITransformHooks {
     /**
      * Tapped when Remarkable renders an HTML tag in Markdown.
      */
-    htmltag: Hook<[ctx: IWrapContext<any>]>;
+    htmltag: Hook<[ctx: IWrapContext<Parameters<Htmltag>, ReturnType<Htmltag>>]>;
     /**
      * 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.
@@ -42,7 +43,7 @@ export interface IFeatures {
 }
 export interface ITransformContext {
     features: IFeatures;
-    frontmatter?: any;
+    frontmatter?: unknown;
 }
 export interface ITransformResult extends ITransformContext {
     root: INode;
@@ -51,3 +52,4 @@ export interface ITransformPlugin {
     name: string;
     transform: (transformHooks: ITransformHooks) => IAssets;
 }
+export {};