securemark 0.269.0 → 0.270.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.270.0
+
+- Change the operator precedence of double quotation to 3.
+
+## 0.269.1
+
+- Refactoring.
+
 ## 0.269.0
 
 - Change media syntax to line-level syntax.

package/README.md

@@ -68,11 +68,11 @@ Secure markdown renderer working on browsers for user input data.
 |P| Operators        |
 |-|------------------|
 |9| \n, \\\n         |
-|8| `, "             |
+|8| `                |
 |6| (()), [[]], ${}$ |
 |5| \<tag>\</tag>    |
 |4| [% %]            |
-|3| $                |
+|3| $, "             |
 |2| (), [], {}       |
 |1| _, *, ==, ++, ~~ |
 

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! securemark v0.269.0 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
+/*! securemark v0.270.0 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory(require("Prism"), require("DOMPurify"));
@@ -5744,9 +5744,7 @@ const combinator_1 = __webpack_require__(2087);
 const inline_1 = __webpack_require__(1160);
 const visibility_1 = __webpack_require__(7618);
 const dom_1 = __webpack_require__(3252);
-exports.annotation = (0, combinator_1.lazy)(() => (0, combinator_1.surround)('((', (0, combinator_1.constraint)(256 /* State.annotation */, false, (0, combinator_1.syntax)(0 /* Syntax.none */, 6, 1, 256 /* State.annotation */ | 8 /* State.media */, (0, visibility_1.startLoose)((0, combinator_1.context)({
-  delimiters: undefined
-}, (0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]), ')', [[/^\\?\n/, 9], [')', 2], ['))', 6]])), ')'))), '))', false, ([, ns], rest) => [[(0, dom_1.html)('sup', {
+exports.annotation = (0, combinator_1.lazy)(() => (0, combinator_1.surround)('((', (0, combinator_1.constraint)(256 /* State.annotation */, false, (0, combinator_1.syntax)(0 /* Syntax.none */, 6, 1, 256 /* State.annotation */ | 8 /* State.media */, (0, visibility_1.startLoose)((0, combinator_1.some)((0, combinator_1.union)([inline_1.inline]), ')', [[/^\\?\n/, 9], [')', 2], ['))', 6]]), ')'))), '))', false, ([, ns], rest) => [[(0, dom_1.html)('sup', {
   class: 'annotation'
 }, [(0, dom_1.html)('span', (0, visibility_1.trimNode)((0, dom_1.defrag)(ns)))])], rest]));
 
@@ -5978,7 +5976,7 @@ exports.bracket = (0, combinator_1.lazy)(() => (0, combinator_1.union)([(0, comb
   class: 'paren'
 }, (0, dom_1.defrag)((0, array_1.push)((0, array_1.unshift)(as, bs), cs)))], rest], ([as, bs = []], rest) => [(0, array_1.unshift)(as, bs), rest]), (0, combinator_1.surround)((0, source_1.str)('['), (0, combinator_1.syntax)(8 /* Syntax.bracket */, 2, 1, 0 /* State.none */, (0, combinator_1.some)(inline_1.inline, ']', [[']', 2]])), (0, source_1.str)(']'), true, undefined, ([as, bs = []], rest) => [(0, array_1.unshift)([''], (0, array_1.unshift)(as, bs)), rest]), (0, combinator_1.surround)((0, source_1.str)('{'), (0, combinator_1.syntax)(8 /* Syntax.bracket */, 2, 1, 0 /* State.none */, (0, combinator_1.some)(inline_1.inline, '}', [['}', 2]])), (0, source_1.str)('}'), true, undefined, ([as, bs = []], rest) => [(0, array_1.unshift)(as, bs), rest]),
 // Control media blinking in editing rather than control confusion of pairs of quote marks.
-(0, combinator_1.surround)((0, source_1.str)('"'), (0, combinator_1.syntax)(0 /* Syntax.none */, 8, 1, 0 /* State.none */, (0, combinator_1.some)(inline_1.inline, '"', [['"', 8]])), (0, source_1.str)('"'), true, undefined, ([as, bs = []], rest) => [(0, array_1.unshift)(as, bs), rest])]));
+(0, combinator_1.surround)((0, source_1.str)('"'), (0, combinator_1.syntax)(0 /* Syntax.none */, 3, 1, 0 /* State.none */, (0, combinator_1.some)(inline_1.inline, '"', [['"', 3]])), (0, source_1.str)('"'), true, undefined, ([as, bs = []], rest) => [(0, array_1.unshift)(as, bs), rest])]));
 
 /***/ }),
 
@@ -6146,6 +6144,7 @@ function identity(id, text, name = 'index') {
     case 'index':
       return `${name}:${id ?? ''}:${cs.slice(0, 97).join('')}...`;
     case 'mark':
+    case 'note':
       return `${name}:${id ?? ''}:${cs.slice(0, 50).join('')}...${cs.slice(-47).join('')}`;
   }
 }
@@ -6701,9 +6700,7 @@ const source_1 = __webpack_require__(6743);
 const visibility_1 = __webpack_require__(7618);
 const util_1 = __webpack_require__(9437);
 const dom_1 = __webpack_require__(3252);
-exports.reference = (0, combinator_1.lazy)(() => (0, combinator_1.surround)('[[', (0, combinator_1.constraint)(128 /* State.reference */, false, (0, combinator_1.syntax)(256 /* Syntax.reference */, 6, 1, 256 /* State.annotation */ | 128 /* State.reference */ | 8 /* State.media */, (0, visibility_1.startLoose)((0, combinator_1.context)({
-  delimiters: undefined
-}, (0, combinator_1.subsequence)([abbr, (0, combinator_1.open)((0, source_1.stropt)(/^(?=\^)/), (0, combinator_1.some)(inline_1.inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]])), (0, combinator_1.some)(inline_1.inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]])])), ']'))), ']]', false, ([, ns], rest) => [[(0, dom_1.html)('sup', attributes(ns), [(0, dom_1.html)('span', (0, visibility_1.trimNode)((0, dom_1.defrag)(ns)))])], rest]));
+exports.reference = (0, combinator_1.lazy)(() => (0, combinator_1.surround)('[[', (0, combinator_1.constraint)(128 /* State.reference */, false, (0, combinator_1.syntax)(256 /* Syntax.reference */, 6, 1, 256 /* State.annotation */ | 128 /* State.reference */ | 8 /* State.media */, (0, visibility_1.startLoose)((0, combinator_1.subsequence)([abbr, (0, combinator_1.open)((0, source_1.stropt)(/^(?=\^)/), (0, combinator_1.some)(inline_1.inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]])), (0, combinator_1.some)(inline_1.inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]])]), ']'))), ']]', false, ([, ns], rest) => [[(0, dom_1.html)('sup', attributes(ns), [(0, dom_1.html)('span', (0, visibility_1.trimNode)((0, dom_1.defrag)(ns)))])], rest]));
 const abbr = (0, combinator_1.creation)((0, combinator_1.bind)((0, combinator_1.surround)('^', (0, combinator_1.union)([(0, source_1.str)(/^(?![0-9]+\s?[|\]])[0-9A-Za-z]+(?:(?:-|(?=\W)(?!'\d)'?(?!\.\d)\.?(?!,\S),? ?)[0-9A-Za-z]+)*(?:-|'?\.?,? ?)?/)]), /^\|?(?=]])|^\|[^\S\n]*/), ([source], rest) => [[(0, dom_1.html)('abbr', source)], rest.replace(visibility_1.regBlankStart, '')]));
 function attributes(ns) {
   return typeof ns[0] === 'object' && ns[0].tagName === 'ABBR' ? {
@@ -7085,7 +7082,9 @@ function build(syntax, marker, splitter = '_') {
       const ref = refs[i];
       const identifier = ref.getAttribute('data-abbr') || ` ${ref.firstElementChild.innerHTML}`;
       if (titles.has(identifier)) continue;
-      const content = (0, dom_1.frag)(ref.firstElementChild.cloneNode(true).childNodes);
+      const content = (0, dom_1.html)('span', {
+        id: (0, indexee_1.identity)(opts.id, (0, indexee_1.text)(ref.firstElementChild), 'note')
+      }, ref.firstElementChild.cloneNode(true).childNodes);
       const title = (0, indexee_1.text)(content).trim();
       if (!title) continue;
       titles.set(identifier, title);
@@ -7131,7 +7130,6 @@ function build(syntax, marker, splitter = '_') {
         ref.lastChild?.remove();
       }
       const title = titles.get(identifier);
-      const content = (0, dom_1.frag)(ref.firstElementChild.cloneNode(true).childNodes);
       const refIndex = ++count;
       const refId = opts.id !== '' ? `${syntax}:${opts.id ?? ''}:ref:${refIndex}` : undefined;
       const def =  false || defs.get(identifier) || defs.set(identifier, (0, dom_1.html)('li', {
@@ -7157,7 +7155,7 @@ function build(syntax, marker, splitter = '_') {
       }, marker(defIndex, abbr)));
       def.lastChild.appendChild((0, dom_1.html)('a', {
         href: refId && `#${refId}`,
-        title: abbr && (0, indexee_1.text)(content).trim() || undefined
+        title: abbr && (0, indexee_1.text)((0, dom_1.frag)(ref.firstElementChild.cloneNode(true).childNodes)).trim() || undefined
       }, `^${refIndex}`));
     }
     if (defs.size > 0 || footnote) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "securemark",
-  "version": "0.269.0",
+  "version": "0.270.0",
   "description": "Secure markdown renderer working on browsers for user input data.",
   "private": false,
   "homepage": "https://github.com/falsandtru/securemark",
@@ -28,17 +28,17 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@types/dompurify": "2.4.0",
+    "@types/dompurify": "3.0.0",
     "@types/jquery": "3.5.16",
     "@types/mathjax": "0.0.37",
     "@types/mocha": "10.0.1",
     "@types/power-assert": "1.5.8",
     "@types/prismjs": "1.26.0",
-    "@typescript-eslint/parser": "^5.54.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-unassert": "^3.2.0",
     "concurrently": "^7.6.0",
-    "eslint": "^8.35.0",
+    "eslint": "^8.36.0",
     "eslint-plugin-redos": "^4.4.5",
     "eslint-webpack-plugin": "^4.0.0",
     "glob": "^8.1.0",
@@ -49,13 +49,13 @@
     "karma-mocha": "^2.0.1",
     "karma-power-assert": "^1.0.0",
     "mocha": "^10.2.0",
-    "npm-check-updates": "^16.7.10",
+    "npm-check-updates": "^16.7.12",
     "semver": "^7.3.8",
     "spica": "0.0.719",
     "ts-loader": "^9.4.2",
     "typed-dom": "^0.0.317",
     "typescript": "4.9.5",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.1",
     "webpack-cli": "^5.0.1",
     "webpack-merge": "^5.8.0"
   },

package/src/parser/api/bind.test.ts

@@ -214,15 +214,15 @@ describe('Unit: parser/api/bind', () => {
         cfgs.footnotes.references?.outerHTML,
         html('ol', [
           html('li', { id: 'reference::def:1' }, [
-            '1',
+            html('span', { id: 'note::1' }, '1'),
             html('sup', [html('a', { href: '#reference::ref:1' }, '^1')]),
           ]),
           html('li', { id: 'reference::def:2' }, [
-            '2',
+            html('span', { id: 'note::2' }, '2'),
             html('sup', [html('a', { href: '#reference::ref:2' }, '^2')]),
           ]),
           html('li', { id: 'reference::def:3' }, [
-            '3',
+            html('span', { id: 'note::3' }, '3'),
             html('sup', [html('a', { href: '#reference::ref:3' }, '^3')]),
           ]),
         ]).outerHTML);

package/src/parser/api/parse.test.ts

@@ -135,7 +135,7 @@ describe('Unit: parser/api/parse', () => {
           '<p><a href="https://source/x/a" target="_blank"><img class="media" data-src="https://source/x/a" alt=""></a></p>',
           '<p><a href="/z/a" target="_blank"><img class="media" data-src="/z/a" alt=""></a></p>',
           '<p><a href="https://source/a" target="_blank"><img class="media" data-src="https://source/a" alt=""></a></p>',
-          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1">a<sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
+          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1"><span id="note::a">a</span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
         ]);
       assert.deepStrictEqual(
         [...parse([
@@ -208,11 +208,11 @@ describe('Unit: parser/api/parse', () => {
         [
           '<figure data-type="math" data-label="$-a" data-group="$" data-number="1" id="label:$-a"><figcaption><span class="figindex">(1)</span><span class="figtext"></span></figcaption><div><div class="math" translate="no">$$\n$$</div></div></figure>',
           '<p><sup class="annotation" id="annotation::ref:1" title="(1)"><span hidden=""><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:1">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:2">[2]</a></sup></span><a href="#annotation::def:1">*1</a></sup></p>',
-          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1"><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:1">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:2">[2]</a></sup><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
+          '<ol class="annotations"><li id="annotation::def:1" data-marker="*1"><span id="note::(1)"><a class="label" data-label="$-a" href="#label:$-a">(1)</a><sup class="reference" id="reference::ref:1" title="b"><span hidden="">b</span><a href="#reference::def:1">[1]</a></sup><sup class="reference" id="reference::ref:2" title="cd"><span hidden="">c<em>d</em></span><a href="#reference::def:2">[2]</a></sup></span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>',
         ]);
       assert.deepStrictEqual(
         footnotes.references.outerHTML,
-        '<ol><li id="reference::def:1">b<sup><a href="#reference::ref:1">^1</a></sup></li><li id="reference::def:2">c<em>d</em><sup><a href="#reference::ref:2">^2</a></sup></li></ol>');
+        '<ol><li id="reference::def:1"><span id="note::b">b</span><sup><a href="#reference::ref:1">^1</a></sup></li><li id="reference::def:2"><span id="note::cd">c<em>d</em></span><sup><a href="#reference::ref:2">^2</a></sup></li></ol>');
     });
 
     it('normalize', () => {

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

@@ -96,7 +96,7 @@ describe('Unit: parser/block/blockquote', () => {
       assert.deepStrictEqual(inspect(parser('!>> ## a\n> ## a')), [['<blockquote><blockquote><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></blockquote><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser('!>> ~ a\n> ~ a')), [['<blockquote><blockquote><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
       assert.deepStrictEqual(inspect(parser('!>> ~~~figure $test-a\n>> > \n>>\n~~~\n> ~~~figure $test-a\n> > \n>\n[#a]\n~~~')), [['<blockquote><blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote><section><figure data-type="quote" data-label="test-a" data-group="test" data-number="1"><figcaption><span class="figindex">Test 1. </span><span class="figtext"><a class="index">a</a></span></figcaption><div><blockquote></blockquote></div></figure><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
-      assert.deepStrictEqual(inspect(parser('!>> ((a))\n> ((a))')), [['<blockquote><blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
+      assert.deepStrictEqual(inspect(parser('!>> ((a))\n> ((a))')), [['<blockquote><blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>'], '']);
     });
 
   });

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

@@ -23,7 +23,7 @@ describe('Unit: parser/block/extension/example', () => {
       assert.deepStrictEqual(inspect(parser('~~~example/markdown\n[$fig-a]\n!https://host\n~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">[$fig-a]\n!https://host</pre><hr><section><figure data-type="media" data-label="fig-a" data-group="fig" data-number="1"><figcaption><span class="figindex">Fig. 1. </span><span class="figtext"></span></figcaption><div><a href="https://host" target="_blank"><img class="media" data-src="https://host" alt=""></a></div></figure><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~example/markdown\n## a\n~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">## a</pre><hr><section><h2>a</h2><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~example/markdown\n~ a\n~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">~ a</pre><hr><section><dl><dt>a</dt><dd></dd></dl><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
-      assert.deepStrictEqual(inspect(parser('~~~example/markdown\n((a))[[b]]\n~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">((a))[[b]]</pre><hr><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup><sup class="reference disabled" title="b"><span hidden="">b</span><a>[1]</a></sup></p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"><li>b<sup><a>^1</a></sup></li></ol></section></aside>'], '']);
+      assert.deepStrictEqual(inspect(parser('~~~example/markdown\n((a))[[b]]\n~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">((a))[[b]]</pre><hr><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup><sup class="reference disabled" title="b"><span hidden="">b</span><a>[1]</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"><li><span>b</span><sup><a>^1</a></sup></li></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~~example/markdown\na\n~~~~')), [['<aside class="example" data-type="markdown"><pre translate="no">a</pre><hr><section><p>a</p><h2>References</h2><ol class="references"></ol></section></aside>'], '']);
       assert.deepStrictEqual(inspect(parser('~~~example/math\na\n~~~')), [['<aside class="example" data-type="math"><pre translate="no">a</pre><hr><div class="math" translate="no">$$\na\n$$</div></aside>'], '']);
       assert.deepStrictEqual(inspect(parser(`~~~example/math\n0${'\n'.repeat(100)}~~~`), '>'), [['<aside class="example" data-type="math">'], '']);

package/src/parser/inline/annotation.ts

@@ -1,5 +1,5 @@
 import { AnnotationParser } from '../inline';
-import { union, some, context, syntax, constraint, surround, lazy } from '../../combinator';
+import { union, some, syntax, constraint, surround, lazy } from '../../combinator';
 import { inline } from '../inline';
 import { Syntax, State } from '../context';
 import { startLoose, trimNode } from '../visibility';
@@ -10,8 +10,7 @@ export const annotation: AnnotationParser = lazy(() => surround(
   constraint(State.annotation, false,
   syntax(Syntax.none, 6, 1, State.annotation | State.media,
   startLoose(
-  context({ delimiters: undefined },
-  some(union([inline]), ')', [[/^\\?\n/, 9], [')', 2], ['))', 6]])), ')'))),
+  some(union([inline]), ')', [[/^\\?\n/, 9], [')', 2], ['))', 6]]), ')'))),
   '))',
   false,
   ([, ns], rest) => [[html('sup', { class: 'annotation' }, [html('span', trimNode(defrag(ns)))])], rest]));

package/src/parser/inline/bracket.ts

@@ -24,7 +24,7 @@ export const bracket: BracketParser = lazy(() => union([
     undefined,
     ([as, bs = []], rest) => [unshift(as, bs), rest]),
   // Control media blinking in editing rather than control confusion of pairs of quote marks.
-  surround(str('"'), syntax(Syntax.none, 8, 1, State.none, some(inline, '"', [['"', 8]])), str('"'), true,
+  surround(str('"'), syntax(Syntax.none, 3, 1, State.none, some(inline, '"', [['"', 3]])), str('"'), true,
     undefined,
     ([as, bs = []], rest) => [unshift(as, bs), rest]),
 ]));

package/src/parser/inline/extension/indexee.ts

@@ -8,7 +8,7 @@ export function indexee(parser: Parser<HTMLElement, MarkdownParser.Context>, opt
   return fmap(parser, ([el], _, { id }) => [define(el, { id: identity(id, text(el, optional)) })]);
 }
 
-export function identity(id: string | undefined, text: string, name: 'index' | 'mark' = 'index'): string | undefined {
+export function identity(id: string | undefined, text: string, name: 'index' | 'mark' | 'note' = 'index'): string | undefined {
   assert(!id?.match(/[^0-9a-z/-]/i));
   assert(!text.includes('\n'));
   if (id === '') return undefined;
@@ -20,6 +20,7 @@ export function identity(id: string | undefined, text: string, name: 'index' | '
     case 'index':
       return `${name}:${id ?? ''}:${cs.slice(0, 97).join('')}...`;
     case 'mark':
+    case 'note':
       return `${name}:${id ?? ''}:${cs.slice(0, 50).join('')}...${cs.slice(-47).join('')}`;
   }
   assert(false);
@@ -31,7 +32,7 @@ assert(identity(undefined, '0'.repeat(100 - 1) + 1, 'mark')!.slice(6) === '0'.re
 assert(identity(undefined, '0'.repeat(100) + 1, 'mark')!.slice(6) === '0'.repeat(50) + '...' + '0'.repeat(47 - 1) + 1);
 assert(identity(undefined, '0'.repeat(200) + 1, 'mark')!.slice(6) === '0'.repeat(50) + '...' + '0'.repeat(47 - 1) + 1);
 
-export function text(source: HTMLElement | DocumentFragment, optional = false): string {
+export function text(source: Element | DocumentFragment, optional = false): string {
   assert(source instanceof DocumentFragment || !source.matches('.indexer'));
   assert(source.querySelectorAll(':scope > .indexer').length <= 1);
   if (!source.firstChild) return '';

package/src/parser/inline/reference.ts

@@ -1,5 +1,5 @@
 import { ReferenceParser } from '../inline';
-import { union, subsequence, some, context, syntax, creation, constraint, surround, open, lazy, bind } from '../../combinator';
+import { union, subsequence, some, syntax, creation, constraint, surround, open, lazy, bind } from '../../combinator';
 import { inline } from '../inline';
 import { str, stropt } from '../source';
 import { Syntax, State } from '../context';
@@ -12,12 +12,11 @@ export const reference: ReferenceParser = lazy(() => surround(
   constraint(State.reference, false,
   syntax(Syntax.reference, 6, 1, State.annotation | State.reference | State.media,
   startLoose(
-  context({ delimiters: undefined },
   subsequence([
     abbr,
     open(stropt(/^(?=\^)/), some(inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]])),
     some(inline, ']', [[/^\\?\n/, 9], [']', 2], [']]', 6]]),
-  ])), ']'))),
+  ]), ']'))),
   ']]',
   false,
   ([, ns], rest) => [[html('sup', attributes(ns), [html('span', trimNode(defrag(ns)))])], rest]));

package/src/parser/inline.test.ts

@@ -97,7 +97,7 @@ describe('Unit: parser/inline', () => {
       assert.deepStrictEqual(inspect(parser('[++[a\nb++]')), [['', '[', '++', '[', 'a', '<br>', 'b', '++', ']'], '']);
       assert.deepStrictEqual(inspect(parser('[[++a\nb++]]')), [['[', '[', '<ins>a<br>b</ins>', ']', ']'], '']);
       assert.deepStrictEqual(inspect(parser('"[% *"*"*')), [['"', '[%', ' ', '*', '"', '*', '"', '*'], '']);
-      assert.deepStrictEqual(inspect(parser('"[% "*"* %]')), [['"', '[%', ' ', '"', '*', '"', '*', ' ', '%', ']'], '']);
+      assert.deepStrictEqual(inspect(parser('"[% "*"* %]')), [['"', '<span class="comment"><input type="checkbox"><span>[% "*"* %]</span></span>'], '']);
     });
 
     it('uri', () => {

package/src/parser/processor/footnote.test.ts

@@ -37,7 +37,7 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'annotation::def:1' }, [
-              'a b',
+              html('span', { id: 'note::a_b' }, 'a b'),
               html('sup', [html('a', { href: '#annotation::ref:1' }, '^1')])
             ]),
           ]).outerHTML);
@@ -67,11 +67,11 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'annotation::def:1' }, [
-              '1',
+              html('span', { id: 'note::1' }, '1'),
               html('sup', [html('a', { href: '#annotation::ref:1' }, '^1')])
             ]),
             html('li', { id: 'annotation::def:2' }, [
-              '12345678901234567890',
+              html('span', { id: 'note::12345678901234567890' }, '12345678901234567890'),
               html('sup', [html('a', { href: '#annotation::ref:2' }, '^2')])
             ]),
           ]).outerHTML);
@@ -113,22 +113,22 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'annotation::def:1' }, [
-              '1',
+              html('span', { id: 'note::1' }, '1'),
               html('sup', [html('a', { href: '#annotation::ref:1' }, '^1')])
             ]),
             html('li', { id: 'annotation::def:2' }, [
-              '2',
+              html('span', { id: 'note::2' }, '2'),
               html('sup', [
                 html('a', { href: '#annotation::ref:2' }, '^2'),
                 html('a', { href: '#annotation::ref:4' }, '^4'),
               ]),
             ]),
             html('li', { id: 'annotation::def:3' }, [
-              '3',
+              html('span', { id: 'note::3' }, '3'),
               html('sup', [html('a', { href: '#annotation::ref:3' }, '^3')])
             ]),
             html('li', { id: 'annotation::def:4' }, [
-              '4',
+              html('span', { id: 'note::4' }, '4'),
               html('sup', [html('a', { href: '#annotation::ref:5' }, '^5')])
             ]),
           ]).outerHTML);
@@ -151,13 +151,13 @@ describe('Unit: parser/processor/footnote', () => {
         assert.deepStrictEqual(
           [...target.children].map(el => el.outerHTML),
           [
-            '<blockquote><blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup><br>~~~</p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>',
-            '<aside class="example" data-type="markdown"><pre translate="no">((a))</pre><hr><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1">a<sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></aside>',
+            '<blockquote><blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup><br>~~~</p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></blockquote>',
+            '<aside class="example" data-type="markdown"><pre translate="no">((a))</pre><hr><section><p><sup class="annotation disabled" title="a"><span hidden="">a</span><a>*1</a></sup></p><ol class="annotations"><li data-marker="*1"><span>a</span><sup><a>^1</a></sup></li></ol><h2>References</h2><ol class="references"></ol></section></aside>',
             '<p><sup class="annotation" id="annotation::ref:1" title="a"><span hidden="">a</span><a href="#annotation::def:1">*1</a></sup></p>',
           ]);
         assert.deepStrictEqual(
           footnote.outerHTML,
-          '<ol><li id="annotation::def:1">a<sup><a href="#annotation::ref:1">^1</a></sup></li></ol>');
+          '<ol><li id="annotation::def:1"><span id="note::a">a</span><sup><a href="#annotation::ref:1">^1</a></sup></li></ol>');
       }
     });
 
@@ -180,7 +180,7 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'annotation:0:def:1' }, [
-              'a b',
+              html('span', { id: 'note:0:a_b' }, 'a b'),
               html('sup', [html('a', { href: '#annotation:0:ref:1' }, '^1')])
             ]),
           ]).outerHTML);
@@ -202,7 +202,7 @@ describe('Unit: parser/processor/footnote', () => {
             ]).outerHTML,
             html('ol', { class: 'annotations' }, [
               html('li', { id: 'annotation::def:1', 'data-marker': '*1' }, [
-                '1',
+                html('span', { id: 'note::1' }, '1'),
                 html('sup', [html('a', { href: '#annotation::ref:1' }, '^1')])
               ]),
             ]).outerHTML,
@@ -220,11 +220,11 @@ describe('Unit: parser/processor/footnote', () => {
             ]).outerHTML,
             html('ol', { class: 'annotations' }, [
               html('li', { id: 'annotation::def:2', 'data-marker': '*2' }, [
-                '2',
+                html('span', { id: 'note::2' }, '2'),
                 html('sup', [html('a', { href: '#annotation::ref:2' }, '^2')])
               ]),
               html('li', { id: 'annotation::def:3', 'data-marker': '*3' }, [
-                '3',
+                html('span', { id: 'note::3' }, '3'),
                 html('sup', [html('a', { href: '#annotation::ref:3' }, '^3')])
               ]),
             ]).outerHTML,
@@ -237,7 +237,7 @@ describe('Unit: parser/processor/footnote', () => {
             ]).outerHTML,
             html('ol', { class: 'annotations' }, [
               html('li', { id: 'annotation::def:4', 'data-marker': '*4' }, [
-                '4',
+                html('span', { id: 'note::4' }, '4'),
                 html('sup', [html('a', { href: '#annotation::ref:4' }, '^4')])
               ]),
             ]).outerHTML,
@@ -267,7 +267,7 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'reference::def:1' }, [
-              'a b',
+              html('span', { id: 'note::a_b' }, 'a b'),
               html('sup', [html('a', { href: '#reference::ref:1' }, '^1')])
             ]),
           ]).outerHTML);
@@ -301,7 +301,7 @@ describe('Unit: parser/processor/footnote', () => {
           footnote.outerHTML,
           html('ol', [
             html('li', { id: 'reference::def:1' }, [
-              'b',
+              html('span', { id: 'note::b' }, 'b'),
               html('sup', [
                 html('a', { href: '#reference::ref:1' }, '^1'),
                 html('a', { href: '#reference::ref:2', title: 'b' }, '^2'),

package/src/parser/processor/footnote.ts

@@ -1,4 +1,4 @@
-import { text } from '../inline/extension/indexee';
+import { identity, text } from '../inline/extension/indexee';
 import { frag, html, define } from 'typed-dom/dom';
 
 export function* footnote(
@@ -44,13 +44,15 @@ function build(
     }
     const refs = target.querySelectorAll(`sup.${syntax}:not(.disabled)`);
     const titles = new Map<string, string>();
-    const contents = new Map<string, DocumentFragment>();
+    const contents = new Map<string, HTMLSpanElement>();
     for (let len = refs.length, i = 0; i < len; ++i) {
       if (i % 10 === 9) yield;
       const ref = refs[i];
       const identifier = ref.getAttribute('data-abbr') || ` ${ref.firstElementChild!.innerHTML}`;
       if (titles.has(identifier)) continue;
-      const content = frag(ref.firstElementChild!.cloneNode(true).childNodes);
+      const content = html('span',
+        { id: identity(opts.id, text(ref.firstElementChild!), 'note') },
+        ref.firstElementChild!.cloneNode(true).childNodes);
       const title = text(content).trim();
       if (!title) continue;
       titles.set(identifier, title);
@@ -100,7 +102,6 @@ function build(
       const title = titles.get(identifier);
       assert(title !== '');
       assert(syntax !== 'annotation' || title);
-      const content = frag(ref.firstElementChild!.cloneNode(true).childNodes);
       const refIndex = ++count;
       const refId = opts.id !== ''
         ? `${syntax}:${opts.id ?? ''}:ref:${refIndex}`
@@ -134,7 +135,7 @@ function build(
         html('a',
           {
             href: refId && `#${refId}`,
-            title: abbr && text(content).trim() || undefined,
+            title: abbr && text(frag(ref.firstElementChild!.cloneNode(true).childNodes)).trim() || undefined,
           },
           `^${refIndex}`));
     }