securemark 0.269.0 → 0.269.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.269.1
+
+- Refactoring.
+
 ## 0.269.0
 
 - Change media syntax to line-level syntax.

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! securemark v0.269.0 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
+/*! securemark v0.269.1 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"));
@@ -6146,6 +6146,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('')}`;
   }
 }
@@ -7085,7 +7086,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 +7134,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 +7159,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.269.1",
   "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/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/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}`));
     }