feat: fencedBlock

vivliostyle · Jun 14, 2020 · 3761ef7 · 3761ef7
1 parent f9d6298
commit 3761ef7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 15 deletions.
diff --git a/packages/vfm/src/index.test.ts b/packages/vfm/src/index.test.ts
@@ -1,37 +1,55 @@
 import * as lib from './index';
 
+function partial(body: string) {
+  return lib.stringify(body, {partial: true});
+}
+
+it.only('handle fenced block', () => {
+  expect(
+    partial(`
+:::appendix
+# Appendix
+test
+:::
+`),
+  ).toBe(`<div class="appendix"><h1>Appendix</h1><p>test</p></div>`);
+
+  expect(
+    partial(`
+:::
+# Plain block
+:::
+`),
+  ).toBe(`<div><h1>Plain block</h1></div>`);
+});
+
 it('handle hard line break', () => {
-  const result = lib.stringify(
-    `a
-b`,
-    {partial: true},
-  );
-  expect(result).toBe(`<p>a<br>
+  expect(
+    partial(`
+a
+b`),
+  ).toBe(`<p>a<br>
 b</p>`);
 });
 
 it('stringify math', () => {
-  const result = lib.stringify('$$sum$$', {partial: true});
-  expect(result).toContain(
+  expect(partial('$$sum$$')).toContain(
     `<p><span class="math math-inline"><mjx-container class="MathJax" jax="SVG">`,
   );
 });
 
 it('stringify ruby', () => {
-  const result = lib.stringify('{A|B}', {partial: true});
-  expect(result).toBe(`<p><ruby>A<rt>B</rt></ruby></p>`);
+  expect(partial('{A|B}')).toBe(`<p><ruby>A<rt>B</rt></ruby></p>`);
 });
 
 it('convert img to figure', () => {
-  const result = lib.stringify('![fig](image.png)', {partial: true});
-  expect(result).toBe(
+  expect(partial('![fig](image.png)')).toBe(
     `<p><figure><img src="image.png" alt="fig"><figcaption>fig</figcaption></figure></p>`,
   );
 });
 
 it('stringify markdown string into html document', () => {
-  const result = lib.stringify('# hello');
-  expect(result).toBe(`<!doctype html>
+  expect(lib.stringify('# hello')).toBe(`<!doctype html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">

diff --git a/packages/vfm/src/plugins/fencedBlock.ts b/packages/vfm/src/plugins/fencedBlock.ts
@@ -0,0 +1,51 @@
+import {Plugin} from 'unified';
+import {Parent} from 'unist';
+import u from 'unist-builder';
+import {H, Handler} from 'mdast-util-to-hast';
+import all from 'mdast-util-to-hast/lib/all';
+
+// remark
+function locator(value: string, fromIndex: number) {
+  return value.indexOf(':::', fromIndex);
+}
+
+const tokenizer: Tokenizer = function (eat, value, silent) {
+  const now = eat.now();
+  const match = /^:::(.*?)\n([\w\W]+?)\n:::$/m.exec(value);
+  if (!match) return;
+  if (match.index !== 0) return;
+
+  const [eaten, blockType, contentString] = match;
+
+  if (silent) return true;
+
+  console.log(match);
+
+  const add = eat(eaten);
+
+  const exit = this.enterBlock();
+  const contents = this.tokenizeBlock(contentString, now);
+  exit();
+
+  return add({
+    type: 'div',
+    children: contents,
+    data: {
+      hName: 'div',
+      hProperties: {
+        className: blockType ? [blockType] : undefined,
+      },
+    },
+  });
+};
+
+tokenizer.notInLink = true;
+tokenizer.locator = locator;
+
+export const parser: Plugin = function () {
+  if (!this.Parser) return;
+
+  const {blockTokenizers, blockMethods} = this.Parser.prototype;
+  blockTokenizers.fencedBlock = tokenizer;
+  blockMethods.splice(blockMethods.indexOf('text'), 0, 'fencedBlock');
+};
diff --git a/packages/vfm/src/revive-parse.ts b/packages/vfm/src/revive-parse.ts
@@ -4,9 +4,11 @@ import math from 'remark-math';
 import breaks from 'remark-breaks';
 
 import {rubyParser as ruby} from './plugins/ruby';
+import {parser as fencedBlock} from './plugins/fencedBlock';
 
 export default [
   [markdown, {commonmark: true}],
+  fencedBlock,
   breaks,
   ruby,
   math,

diff --git a/packages/vfm/types/remark.d.ts b/packages/vfm/types/remark.d.ts
@@ -38,6 +38,7 @@ interface Tokenizer {
 }
 
 type TokenizerInstance = {
-  tokenizeBlock: (value: string) => Node | void;
+  tokenizeBlock: (value: string, location: Point) => Node | void;
   tokenizeInline: (value: string, location: Point) => Node | void;
+  enterBlock: () => () => void;
 };