securemark 0.243.0 → 0.244.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.243.0",
+  "version": "0.244.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1962,9 +1962,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001332",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz",
-      "integrity": "sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==",
+      "version": "1.0.30001334",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001334.tgz",
+      "integrity": "sha512-kbaCEBRRVSoeNs74sCuq92MJyGrMtjWVfhltoHUCW4t4pXFvGjUBrfo47weBRViHkiV3eBYyIsfl956NtHGazw==",
       "dev": true
     },
     "chalk": {
@@ -8028,9 +8028,9 @@
       }
     },
     "node-releases": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.3.tgz",
-      "integrity": "sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
       "dev": true
     },
     "nopt": {
@@ -8093,9 +8093,9 @@
       }
     },
     "npm-check-updates": {
-      "version": "12.5.9",
-      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-12.5.9.tgz",
-      "integrity": "sha512-l9iOvD7EsQb96gFJL45V01YG6bP8+dmobYnSguvehPuNwgdWNMrE8RC8bSfURX5iUmX4bkobN4T8XMHXN9GMHA==",
+      "version": "12.5.10",
+      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-12.5.10.tgz",
+      "integrity": "sha512-GKBmgC6ZDZwshsOSuse+JYDFVQcaKj9NWNWXW9oWX0TdrKJx26/iR6d4t6LG+iNm5jX+voBoGcEIaGF8CRzWpw==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.243.0",
+  "version": "0.244.0",
   "description": "Secure markdown renderer working on browsers for user input data.",
   "private": false,
   "homepage": "https://github.com/falsandtru/securemark",

package/src/combinator/control/manipulation/fence.ts

@@ -2,36 +2,46 @@ import { Parser, Ctx } from '../../data/parser';
 import { firstline, isEmpty } from '../constraint/line';
 import { unshift } from 'spica/array';
 
-export function fence<C extends Ctx, D extends Parser<unknown, C>[]>(opener: RegExp, limit: number, separation: boolean = true): Parser<string, C, D> {
+export function fence<C extends Ctx, D extends Parser<unknown, C>[]>(opener: RegExp, limit: number, separation = true): Parser<string, C, D> {
   return source => {
     if (source === '') return;
     const matches = source.match(opener);
     if (!matches) return;
     assert(matches[0] === firstline(source));
     const delim = matches[1];
+    assert(delim && delim === delim.trim());
     if (matches[0].indexOf(delim, delim.length) !== -1) return;
     let rest = source.slice(matches[0].length);
     // Prevent annoying parsing in editing.
     if (isEmpty(firstline(rest)) && firstline(rest.slice(firstline(rest).length)).trimEnd() !== delim) return;
     let block = '';
     let closer = '';
-    for (let count = 1, next = firstline(rest); ; ++count) {
+    let overflow = '';
+    for (let count = 1; ; ++count) {
       if (rest === '') break;
-      const line = next;
-      next = firstline(rest.slice(line.length));
-      if (count > limit + 1 && isEmpty(line)) break;
-      if (count <= limit + 1 &&
-          line.slice(0, delim.length) === delim &&
-          line.trimEnd() === delim &&
-          (!separation || isEmpty(next))) {
-        assert(line.trimEnd() === delim);
-        closer = delim;
-        rest = rest.slice(line.length);
-        break;
+      const line = firstline(rest);
+      if ((closer || count > limit + 1) && isEmpty(line)) break;
+      if(closer) {
+        overflow += line;
+      }
+      if (!closer && count <= limit + 1 && line.slice(0, delim.length) === delim && line.trimEnd() === delim) {
+        closer = line;
+        if (isEmpty(firstline(rest.slice(line.length)))) {
+          rest = rest.slice(line.length);
+          break;
+        }
+        if (!separation) {
+          rest = rest.slice(line.length);
+          break;
+        }
+        assert(!overflow);
+        overflow = line;
+      }
+      if (!overflow) {
+        block += line;
       }
-      block += line;
       rest = rest.slice(line.length);
     }
-    return [unshift([block, closer], matches), rest];
+    return [unshift([block, overflow, closer], matches), rest];
   };
 }

package/src/combinator/data/parser.ts

@@ -1,3 +1,5 @@
+import { undefined } from 'spica/global';
+
 export type Parser<T, C extends Ctx = Ctx, D extends Parser<unknown, C>[] = any>
   = (source: string, context: C) => Result<T, C, D>;
 export type Result<T, C extends Ctx = Ctx, D extends Parser<unknown, C>[] = any>

package/src/debug.test.ts

@@ -1,5 +1,6 @@
 import { Result, eval, exec } from './combinator/data/parser';
 import { html, define } from 'typed-dom/dom';
+import { querySelector, querySelectorAll } from 'typed-dom/query';
 
 export function inspect(result: Result<HTMLElement | string>, until: number | string = Infinity): Result<string> {
   return result && [
@@ -7,14 +8,15 @@ export function inspect(result: Result<HTMLElement | string>, until: number | st
       assert(node);
       if (typeof node === 'string') return node;
       node = node.cloneNode(true);
-      assert(!node.matches('.invalid[data-invalid-message$="."]'));
-      assert(!node.querySelector('.invalid[data-invalid-message$="."]'));
-      [node, ...node.querySelectorAll('.invalid')].forEach(el =>
+      assert(!querySelector(node, '.invalid[data-invalid-message$="."]'));
+      querySelectorAll(node, '.invalid').forEach(el => {
+        assert(el.matches('[data-invalid-syntax][data-invalid-type][data-invalid-message]'));
         define(el, {
           'data-invalid-syntax': null,
           'data-invalid-type': null,
           'data-invalid-message': null,
-        }));
+        });
+      });
       until = typeof until === 'number'
         ? until
         : ~(~node.outerHTML.indexOf(until) || -Infinity) + until.length;

package/src/parser/block/codeblock.test.ts

@@ -17,6 +17,7 @@ describe('Unit: parser/block/codeblock', () => {
       assert.deepStrictEqual(inspect(parser('```\na\n```\nb')), [['<pre class="invalid" translate="no">```\na\n```\nb</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n\n\n```')), undefined);
       assert.deepStrictEqual(inspect(parser('```a ```\n```')), undefined);
+      assert.deepStrictEqual(inspect(parser('```\n```\n```')), [['<pre class="invalid" translate="no">```\n```\n```</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n````')), [['<pre class="invalid" translate="no">```\n````</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('````\n```')), [['<pre class="invalid" translate="no">````\n```</pre>'], '']);
       assert.deepStrictEqual(inspect(parser(' ```\n```')), undefined);
@@ -30,7 +31,6 @@ describe('Unit: parser/block/codeblock', () => {
       assert.deepStrictEqual(inspect(parser('```\na\nb\n```')), [['<pre class="text">a<br>b</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n\\\n```')), [['<pre class="text">\\</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n`\n```')), [['<pre class="text">`</pre>'], '']);
-      assert.deepStrictEqual(inspect(parser('```\n```\n```')), [['<pre class="text">```</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n```\n\n```')), [['<pre class="text"></pre>'], '\n```']);
       assert.deepStrictEqual(inspect(parser('```\n````\n```')), [['<pre class="text">````</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('```\n````\n\n```')), [['<pre class="text">````<br></pre>'], '']);

package/src/parser/block/codeblock.ts

@@ -17,7 +17,7 @@ export const segment_: CodeBlockParser.SegmentParser = block(validate('```',
 export const codeblock: CodeBlockParser = block(validate('```', fmap(
   fence(opener, 300),
   // Bug: Type mismatch between outer and inner.
-  ([body, closer, opener, delim, param]: string[], _, context) => {
+  ([body, overflow, closer, opener, delim, param]: string[], _, context) => {
     const params = param.match(/(?:\\.?|\S)+/g)?.reduce<{
       lang?: string;
       path?: string;
@@ -45,17 +45,20 @@ export const codeblock: CodeBlockParser = block(validate('```', fmap(
           }
       }
       name in params
-        ? params.invalid = `Duplicate ${name} value`
+        ? params.invalid = `Duplicate ${name} attribute`
         : params[name] = value;
       return params;
     }, {}) ?? {};
-    if (!closer || params.invalid) return [html('pre', {
+    if (!closer || overflow || params.invalid) return [html('pre', {
       class: 'invalid',
       translate: 'no',
       'data-invalid-syntax': 'codeblock',
-      'data-invalid-type': !closer ? 'fence' : 'argument',
-      'data-invalid-message': !closer ? `Missing the closing delimiter "${delim}"` : params.invalid,
-    }, `${opener}${body}${closer}`)];
+      'data-invalid-type': !closer || overflow ? 'fence' : 'argument',
+      'data-invalid-message':
+        !closer ? `Missing the closing delimiter "${delim}"` :
+        overflow ?  `Invalid trailing line after the closing delimiter "${delim}"` :
+        params.invalid,
+    }, `${opener}${body}${overflow || closer}`)];
     const el = html('pre',
       {
         class: params.lang ? `code language-${params.lang}` : 'text',

package/src/parser/block/extension/aside.ts

@@ -7,14 +7,17 @@ import { html } from 'typed-dom/dom';
 export const aside: ExtensionParser.AsideParser = creator(100, block(validate('~~~', fmap(
   fence(/^(~{3,})aside(?!\S)([^\n]*)(?:$|\n)/, 300),
   // Bug: Type mismatch between outer and inner.
-  ([body, closer, opener, delim, param]: string[], _, context) => {
-    if (!closer || param.trimStart()) return [html('pre', {
+  ([body, overflow, closer, opener, delim, param]: string[], _, context) => {
+    if (!closer || overflow || param.trimStart()) return [html('pre', {
       class: 'invalid',
       translate: 'no',
       'data-invalid-syntax': 'aside',
-      'data-invalid-type': !closer ? 'fence' : 'argument',
-      'data-invalid-message': !closer ? `Missing the closing delimiter "${delim}"` : 'Invalid argument',
-    }, `${opener}${body}${closer}`)];
+      'data-invalid-type': !closer || overflow ? 'fence' : 'argument',
+      'data-invalid-message':
+        !closer ? `Missing the closing delimiter "${delim}"` :
+        overflow ?  `Invalid trailing line after the closing delimiter "${delim}"` :
+        'Invalid argument',
+    }, `${opener}${body}${overflow || closer}`)];
     const annotations = html('ol', { class: 'annotations' });
     const references = html('ol', { class: 'references' });
     const document = parse(body.slice(0, -1), {

package/src/parser/block/extension/example.ts

@@ -5,19 +5,22 @@ import { parse } from '../../api/parse';
 import { mathblock } from '../mathblock';
 import { html } from 'typed-dom/dom';
 
-const opener = /^(~{3,})(?:example\/(\S+)|(?!\S))([^\n]*)(?:$|\n)/;
+const opener = /^(~{3,})(?:example\/(\S+))?(?!\S)([^\n]*)(?:$|\n)/;
 
 export const example: ExtensionParser.ExampleParser = creator(100, block(validate('~~~', fmap(
   fence(opener, 300),
   // Bug: Type mismatch between outer and inner.
-  ([body, closer, opener, delim, type = 'markdown', param]: string[], _, context) => {
-    if (!closer || param.trimStart()) return [html('pre', {
+  ([body, overflow, closer, opener, delim, type = 'markdown', param]: string[], _, context) => {
+    if (!closer || overflow || param.trimStart()) return [html('pre', {
       class: 'invalid',
       translate: 'no',
       'data-invalid-syntax': 'example',
-      'data-invalid-type': !closer ? 'fence' : 'argument',
-      'data-invalid-message': !closer ? `Missing the closing delimiter "${delim}"` : 'Invalid argument',
-    }, `${opener}${body}${closer}`)];
+      'data-invalid-type': !closer || overflow ? 'fence' : 'argument',
+      'data-invalid-message':
+        !closer ? `Missing the closing delimiter "${delim}"` :
+        overflow ?  `Invalid trailing line after the closing delimiter "${delim}"` :
+        'Invalid argument',
+    }, `${opener}${body}${overflow || closer}`)];
     switch (type) {
       case 'markdown': {
         const annotations = html('ol', { class: 'annotations' });
@@ -52,6 +55,7 @@ export const example: ExtensionParser.ExampleParser = creator(100, block(validat
             class: 'invalid',
             translate: 'no',
             'data-invalid-syntax': 'example',
+            'data-invalid-type': 'type',
             'data-invalid-message': 'Invalid example type',
           }, `${opener}${body}${closer}`),
         ];

package/src/parser/block/extension/fig.test.ts

@@ -31,6 +31,8 @@ describe('Unit: parser/block/extension/fig', () => {
       assert.deepStrictEqual(inspect(parser('[$group-name]\n```\n~~~\n```')), [['<figure data-type="text" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><pre class="text">~~~</pre></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('[$group-name]\n$$\n\n$$')), [['<figure data-type="math" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('[$group-name]\n$$\n\n$$\n')), [['<figure data-type="math" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
+      assert.deepStrictEqual(inspect(parser('[$group-name]\n~~~\n~~~')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
+      assert.deepStrictEqual(inspect(parser('[$group-name]\n~~~\n~~~\n')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('[$group-name]\n~~~example/markdown\n~~~')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('[$group-name]\n~~~example/markdown\n~~~\n')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('[$group-name]\n~~~table\n~~~')), [['<figure data-type="table" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><table></table></div></figure>'], '']);

package/src/parser/block/extension/fig.ts

@@ -31,4 +31,4 @@ export const fig: FigParser = block(rewrite(segment, verify(convert(
     return `${fence}figure ${source}\n\n${fence}`;
   },
   union([figure])),
-  ([el]) => el.className !== 'invalid' || el.getAttribute('data-invalid-type') !== 'content')));
+  ([el]) => el.tagName === 'FIGURE')));

package/src/parser/block/extension/figure.test.ts

@@ -7,25 +7,24 @@ describe('Unit: parser/block/extension/figure', () => {
     const parser = (source: string) => some(figure)(source, {});
 
     it('invalid', () => {
-      assert.deepStrictEqual(inspect(parser('~~~figure\n!https://host\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure $group-name]\n!https://host\n~~~')), [['<figure data-type="media" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt=""></a></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name\n!https://host\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\nhttps://host\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\\\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n\\\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\na\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n\n\n\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n !https://host\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n\n!https://host\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n~~~\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n~~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~~figure [$group-name]\n!https://host\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]a\nhttps://host\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]a\n!https://host\n~~~')), [['<figure data-type="media" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt=""></a></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name] a\nhttps://host\n~~~')), [['<figure data-type="invalid" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><br></div></figure>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure $group-name]\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure $group-name]\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\nhttps://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\nhttps://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\\\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\\\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n\\\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\n\\\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\na\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\na\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n\n\n\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\n\n\n\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n !https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n !https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n~~~\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\n~~~\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n!https://host\n~~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]\n!https://host\n~~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~~figure [$group-name]\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~~figure [$group-name]\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]a\nhttps://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]a\nhttps://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]a\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name]a\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name] a\nhttps://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure [$group-name] a\nhttps://host\n~~~</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name] a\n!https://host\n~~~')), [['<figure data-type="media" data-label="group-name" data-group="group" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt=""></a></div></figure>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~figure a[$group-name]\n!https://host\n~~~')), undefined);
-      assert.deepStrictEqual(inspect(parser('~~~figure a [$group-name]\n!https://host\n~~~')), undefined);
+      assert.deepStrictEqual(inspect(parser('~~~figure a[$group-name]\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure a[$group-name]\n!https://host\n~~~</pre>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure a [$group-name]\n!https://host\n~~~')), [['<pre class="invalid" translate="no">~~~figure a [$group-name]\n!https://host\n~~~</pre>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~ [$group-name]\n!https://host\n~~~')), undefined);
       assert.deepStrictEqual(inspect(parser('~~~ $group-name\n!https://host\n~~~')), undefined);
       assert.deepStrictEqual(inspect(parser(' ~~~figure [$group-name]\n!https://host\n~~~')), undefined);
@@ -33,7 +32,8 @@ describe('Unit: parser/block/extension/figure', () => {
       assert.deepStrictEqual(inspect(parser('~~~figure [$fig-name]\n> \n\n~~~')), [['<figure data-type="quote" data-label="fig-name" data-group="fig" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><blockquote></blockquote></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$figure-name]\n> \n\n~~~')), [['<figure data-type="quote" data-label="figure-name" data-group="figure" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><blockquote></blockquote></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$table-name]\n> \n\n~~~')), [['<figure data-type="quote" data-label="table-name" data-group="table" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><blockquote></blockquote></div></figure>'], '']);
-      assert(!parser('~~~figure [$group-name]\n```\n0' + '\n'.repeat(301) + '```\n~~~'));
+      assert.deepStrictEqual(inspect(parser(`~~~figure [$group-name]\n0${'\n'.repeat(301)}~~~`), '>'), [['<pre class="invalid" translate="no">'], '']);
+      assert.deepStrictEqual(inspect(parser(`~~~figure [$group-name]\n~~~\n0${'\n'.repeat(301)}~~~\n~~~`), '>'), [['<pre class="invalid" translate="no">'], `${'\n'.repeat(300)}~~~\n~~~`]);
     });
 
     it('valid', () => {
@@ -52,6 +52,7 @@ describe('Unit: parser/block/extension/figure', () => {
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n$$\n\n$$\n~~~')), [['<figure data-type="math" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n$$\n~~~\n$$\n~~~')), [['<figure data-type="math" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><div class="math" translate="no">$$\n~~~\n$$</div></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n$$\n\n$$\n\ncaption\n~~~')), [['<figure data-type="math" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span>caption</figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n~~~\n~~~\n\ncaption\n~~~')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span>caption</figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n~~~example/markdown\n~~~\n\ncaption\n~~~')), [['<figure data-type="example" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span>caption</figcaption><div><aside class="example" data-type="markdown"><pre translate="no"></pre><hr><section><ol class="annotations"></ol><ol class="references"></ol></section></aside></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n~~~table\n~~~\n\ncaption\n~~~')), [['<figure data-type="table" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span>caption</figcaption><div><table></table></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$group-name]\n> \n~~~\n\n~~~')), [['<figure data-type="quote" data-label="group-name" data-group="group"><figcaption><span class="figindex"></span></figcaption><div><blockquote><pre><br>~~~</pre></blockquote></div></figure>'], '']);
@@ -67,8 +68,8 @@ describe('Unit: parser/block/extension/figure', () => {
       assert.deepStrictEqual(inspect(parser('~~~figure [$-0.0]\n$$\n\n$$\n~~~')), [['<figure data-type="math" data-label="$-0.0" data-group="$" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$-name]\n!https://host\n~~~')), [['<figure data-type="media" data-label="$-name" data-group="$" class="invalid"><figcaption><span class="figindex"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt=""></a></div></figure>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~figure [$-name]\n$$\n\n$$\n\ncaption\n~~~')), [['<figure data-type="math" data-label="$-name" data-group="$" class="invalid"><figcaption><span class="figindex"></span>caption</figcaption><div><div class="math" translate="no">$$\n\n$$</div></div></figure>'], '']);
-      assert(parser('~~~figure [$group-name]\n```\n0' + '\n'.repeat(300) + '```\n~~~'));
-      assert(parser('~~~figure [$group-name]\n' + '>\n'.repeat(500) + '\n~~~'));
+      assert.deepStrictEqual(inspect(parser(`~~~figure [$group-name]\n${'>\n'.repeat(500)}\n~~~`), '>'), [['<figure data-type="quote" data-label="group-name" data-group="group">'], '']);
+      assert.deepStrictEqual(inspect(parser(`~~~figure [$group-name]\n~~~\n0${'\n'.repeat(300)}~~~\n~~~`), '>'), [['<figure data-type="example" data-label="group-name" data-group="group">'], '']);
     });
 
   });

package/src/parser/block/extension/figure.ts

@@ -1,8 +1,8 @@
 import { undefined } from 'spica/global';
 import { ExtensionParser } from '../../block';
-import { union, inits, sequence, some, block, line, rewrite, context, close, match, convert, trim, fmap } from '../../../combinator';
+import { union, inits, sequence, some, block, line, fence, rewrite, context, close, match, convert, trim, fallback, fmap } from '../../../combinator';
 import { str, contentline, emptyline } from '../../source';
-import { label } from '../../inline/extension/label';
+import { label, segment as seg_label } from '../../inline/extension/label';
 import { ulist } from '../ulist';
 import { olist } from '../olist';
 import { table as styled_table } from '../table';
@@ -23,36 +23,35 @@ import { unshift } from 'spica/array';
 import FigureParser = ExtensionParser.FigureParser;
 
 export const segment: FigureParser.SegmentParser = block(match(
-  /^(~{3,})(?:figure[^\S\n]+)?(?=\[?\$[A-Za-z-][^\n]*\n)/,
+  /^(~{3,})(?:figure[^\S\n]|(?=\[?\$))/,
   memoize(
-  ([, fence], closer = new RegExp(String.raw`^${fence}[^\S\n]*(?:$|\n)`)) =>
-    close(
-      sequence([
-        contentline,
-        inits([
-          // All parsers which can include closing terms.
-          union([
-            seg_code,
-            seg_math,
-            seg_table,
-            seg_blockquote,
-            seg_placeholder,
-            some(contentline, closer),
-          ]),
+  ([, fence], closer = new RegExp(String.raw`^${fence}[^\S\n]*(?:$|\n)`)) => close(
+    sequence([
+      contentline,
+      inits([
+        // All parsers which can include closing terms.
+        union([
+          seg_code,
+          seg_math,
+          seg_table,
+          seg_blockquote,
+          seg_placeholder,
+          some(contentline, closer),
+        ]),
+        emptyline,
+        union([
           emptyline,
-          union([
-            emptyline,
-            some(contentline, closer),
-          ]),
+          some(contentline, closer),
         ]),
       ]),
-      closer),
+    ]),
+    closer),
   ([, fence]) => fence.length, [])));
 
-export const figure: FigureParser = block(rewrite(segment, fmap(
-  convert(source => source.slice(source.search(/[[$]/), source.trimEnd().lastIndexOf('\n')),
+export const figure: FigureParser = block(fallback(rewrite(segment, fmap(
+  convert(source => source.slice(source.match(/^~+(?:figure[^\S\n]+)?/)![0].length, source.trimEnd().lastIndexOf('\n')),
   sequence([
-    line(sequence([label, str(/^.*\n/)])),
+    line(sequence([label, str(/^(?=\s).*\n/)])),
     inits([
       block(union([
         ulist,
@@ -65,9 +64,8 @@ export const figure: FigureParser = block(rewrite(segment, fmap(
         table,
         blockquote,
         placeholder,
-        block(line(media)),
-        block(line(shortmedia)),
-        fmap(some(contentline), () => [html('br')]),
+        line(media),
+        line(shortmedia),
       ])),
       emptyline,
       block(localize(
@@ -84,7 +82,37 @@ export const figure: FigureParser = block(rewrite(segment, fmap(
           defrag(caption))),
         html('div', [content]),
       ])
-  ])));
+  ])),
+  fmap(
+    fence(/^(~{3,})(?:figure|\[?\$\S*)(?!\S)[^\n]*(?:$|\n)/, 300),
+    ([body, overflow, closer, opener, delim]: string[], _, context) => [
+      html('pre', {
+        class: 'invalid',
+        translate: 'no',
+        'data-invalid-syntax': 'figure',
+        ...
+        !closer && {
+          'data-invalid-type': 'fence',
+          'data-invalid-message': `Missing the closing delimiter "${delim}"`,
+        } ||
+        overflow && {
+          'data-invalid-type': 'fence',
+          'data-invalid-message': `Invalid trailing line after the closing delimiter "${delim}"`,
+        } ||
+        !seg_label(opener.match(/^~+(?:figure[^\S\n]+)?(\[?\$\S+)/)?.[1] ?? '', context) && {
+          'data-invalid-type': 'label',
+          'data-invalid-message': 'Invalid label',
+        } ||
+        /^~+(?:figure[^\S\n]+)?(\[?\$\S+)[^\S\n]+\S/.test(opener) && {
+          'data-invalid-type': 'argument',
+          'data-invalid-message': 'Invalid argument',
+        } ||
+        {
+          'data-invalid-type': 'content',
+          'data-invalid-message': 'Invalid content',
+        },
+      }, `${opener}${body}${overflow || closer}`),
+    ])));
 
 function attributes(label: string, param: string, content: HTMLElement, caption: readonly HTMLElement[]): Record<string, string | undefined> {
   const group = label.split('-', 1)[0];
@@ -104,9 +132,6 @@ function attributes(label: string, param: string, content: HTMLElement, caption:
     case 'A':
       type = 'media';
       break;
-    case 'BR':
-      type = 'invalid';
-      break;
     case 'text':
     case 'code':
     case 'math':
@@ -117,18 +142,14 @@ function attributes(label: string, param: string, content: HTMLElement, caption:
       assert(false);
   }
   const invalid =
-    type === 'invalid' && content.tagName === 'BR' && {
-      'data-invalid-type': 'content',
-      'data-invalid-message': 'Invalid content',
+    param.trimStart() !== '' && {
+      'data-invalid-type': 'argument',
+      'data-invalid-message': 'Invalid argument',
     } ||
     /^[^-]+-(?:[0-9]+\.)*0$/.test(label) && {
       'data-invalid-type': 'label',
       'data-invalid-message': 'The last part of the fixed label numbers must not be 0',
     } ||
-    param.trimStart() !== '' && {
-      'data-invalid-type': 'argument',
-      'data-invalid-message': 'Invalid argument',
-    } ||
     group === '$' && (type !== 'math' || caption.length > 0) && {
       'data-invalid-type': 'label',
       'data-invalid-message': '"$" label group must be used to math formulas with no caption',

package/src/parser/block/extension/message.ts

@@ -21,14 +21,17 @@ import MessageParser = ExtensionParser.MessageParser;
 export const message: MessageParser = block(validate('~~~', fmap(
   fence(/^(~{3,})message\/(\S+)([^\n]*)(?:$|\n)/, 300),
   // Bug: Type mismatch between outer and inner.
-  ([body, closer, opener, delim, type, param]: string[], _, context) => {
-    if (!closer || param.trimStart()) return [html('pre', {
+  ([body, overflow, closer, opener, delim, type, param]: string[], _, context) => {
+    if (!closer || overflow || param.trimStart()) return [html('pre', {
       class: 'invalid',
       translate: 'no',
       'data-invalid-syntax': 'message',
-      'data-invalid-type': !closer ? 'fence' : 'argument',
-      'data-invalid-message': !closer ? `Missing the closing delimiter "${delim}"` : 'Invalid argument',
-    }, `${opener}${body}${closer}`)];
+      'data-invalid-type': !closer || overflow ? 'fence' : 'argument',
+      'data-invalid-message':
+        !closer ? `Missing the closing delimiter "${delim}"` :
+        overflow ?  `Invalid trailing line after the closing delimiter "${delim}"` :
+        'Invalid argument',
+    }, `${opener}${body}${overflow || closer}`)];
     switch (type) {
       case 'note':
       case 'caution':
@@ -39,6 +42,7 @@ export const message: MessageParser = block(validate('~~~', fmap(
           class: 'invalid',
           translate: 'no',
           'data-invalid-syntax': 'message',
+          'data-invalid-type': 'type',
           'data-invalid-message': 'Invalid message type',
         }, `${opener}${body}${closer}`)];
     }

package/src/parser/block/extension/placeholder.ts

@@ -1,6 +1,5 @@
 import { ExtensionParser } from '../../block';
 import { block, validate, fence, clear, fmap } from '../../../combinator';
-import { segment as label } from '../../inline/extension/label';
 import { html } from 'typed-dom/dom';
 
 const opener = /^(~{3,})(?!~)[^\n]*(?:$|\n)/;
@@ -13,17 +12,13 @@ export const segment_: ExtensionParser.PlaceholderParser.SegmentParser = block(v
 
 export const placeholder: ExtensionParser.PlaceholderParser = block(validate('~~~', fmap(
   fence(opener, Infinity),
-  ([body, closer, opener, delim]: string[], _, context) => [
+  ([body, overflow, closer, opener, delim]) => [
     html('pre', {
       class: 'invalid',
       translate: 'no',
-      'data-invalid-syntax': 'extension',
-      'data-invalid-type': !closer ? 'fence' : 'syntax',
-      'data-invalid-message': !closer ? `Missing the closing delimiter "${delim}"` : 'Invalid extension name',
-      ...closer && (opener.slice(delim.length).split(/\s/, 1)[0] === 'figure' || label(opener.slice(delim.length), context)) && {
-        'data-invalid-syntax': 'figure',
-        'data-invalid-type': 'content',
-        'data-invalid-message': 'Invalid content',
-      },
-    }, `${opener}${body}${closer}`)
+      'data-invalid-message':
+        !closer ? `Missing the closing delimiter "${delim}"` :
+        overflow ?  `Invalid trailing line after the closing delimiter "${delim}"` :
+        'Invalid argument',
+    }, `${opener}${body}${overflow || closer}`),
   ])));