securemark 0.254.1 → 0.254.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.254.2
+
+- Refactoring.
+
 ## 0.254.1
 
 - Fix footnote processing.

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! securemark v0.254.1 https://github.com/falsandtru/securemark | (c) 2017, falsandtru | UNLICENSED License */
+/*! securemark v0.254.2 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("DOMPurify"), require("Prism"));
@@ -6219,7 +6219,7 @@ const attrspecs = {
 global_1.Object.setPrototypeOf(attrspecs, null);
 global_1.Object.values(attrspecs).forEach(o => global_1.Object.setPrototypeOf(o, null));
 exports.html = (0, combinator_1.lazy)(() => (0, combinator_1.creator)((0, combinator_1.validate)('<', (0, combinator_1.validate)(/^<[a-z]+(?=[^\S\n]|>)/, (0, combinator_1.union)([(0, combinator_1.focus)('<wbr>', () => [[(0, dom_1.html)('wbr')], '']), (0, combinator_1.focus)( // https://html.spec.whatwg.org/multipage/syntax.html#void-elements
-/^<(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)(?=[^\S\n]|>)/, source => [[source], '']), (0, combinator_1.match)(new RegExp(String.raw`^<(${TAGS.join('|')})(?=[^\S\n]|>)`), (0, memoize_1.memoize)(([, tag]) => (0, combinator_1.surround)((0, combinator_1.surround)((0, source_1.str)(`<${tag}`), (0, combinator_1.some)(exports.attribute), (0, source_1.str)(/^[^\S\n]*>/), true), (0, util_1.startLoose)((0, combinator_1.some)((0, combinator_1.union)([(0, combinator_1.open)(/^\n?/, (0, combinator_1.some)(inline_1.inline, (0, util_1.blankWith)('\n', `</${tag}>`)), true)])), `</${tag}>`), (0, source_1.str)(`</${tag}>`), false, ([as, bs, cs], rest) => [[elem(tag, as, bs, cs)], rest]), ([, tag]) => TAGS.indexOf(tag), [])), (0, combinator_1.match)(/^<([a-z]+)(?=[^\S\n]|>)/, (0, memoize_1.memoize)(([, tag]) => (0, combinator_1.surround)((0, combinator_1.surround)((0, source_1.str)(`<${tag}`), (0, combinator_1.some)(exports.attribute), (0, source_1.str)(/^[^\S\n]*>/), true), (0, util_1.startLoose)((0, combinator_1.some)((0, combinator_1.union)([(0, combinator_1.open)(/^\n?/, (0, combinator_1.some)(inline_1.inline, (0, util_1.blankWith)('\n', `</${tag}>`)), true)])), `</${tag}>`), (0, source_1.str)(`</${tag}>`), false, ([as, bs, cs], rest) => [[elem(tag, as, bs, cs)], rest]), ([, tag]) => tag, new cache_1.Cache(10000)))])))));
+/^<(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)(?=[^\S\n]|>)/, source => [[source], '']), (0, combinator_1.match)(new RegExp(String.raw`^<(${TAGS.join('|')})(?=[^\S\n]|>)`), (0, memoize_1.memoize)(([, tag]) => (0, combinator_1.surround)((0, combinator_1.surround)((0, source_1.str)(`<${tag}`), (0, combinator_1.some)(exports.attribute), (0, source_1.str)(/^[^\S\n]*>/), true), (0, util_1.startLoose)((0, combinator_1.some)((0, combinator_1.union)([(0, combinator_1.open)(/^\n?/, (0, combinator_1.some)(inline_1.inline, (0, util_1.blankWith)('\n', `</${tag}>`)), true)])), `</${tag}>`), (0, source_1.str)(`</${tag}>`), false, ([as, bs, cs], rest) => [[elem(tag, as, bs, cs)], rest]), ([, tag]) => TAGS.indexOf(tag), [])), (0, combinator_1.match)(new RegExp(String.raw`^<(?!${TAGS.join('|')}\b)([a-z]+)(?=[^\S\n]|>)`), (0, memoize_1.memoize)(([, tag]) => (0, combinator_1.surround)((0, combinator_1.surround)((0, source_1.str)(`<${tag}`), (0, combinator_1.some)(exports.attribute), (0, source_1.str)(/^[^\S\n]*>/), true), (0, util_1.startLoose)((0, combinator_1.some)((0, combinator_1.union)([(0, combinator_1.open)(/^\n?/, (0, combinator_1.some)(inline_1.inline, (0, util_1.blankWith)('\n', `</${tag}>`)), true)])), `</${tag}>`), (0, source_1.str)(`</${tag}>`), false, ([as, bs, cs], rest) => [[elem(tag, as, bs, cs)], rest]), ([, tag]) => tag, new cache_1.Cache(10000)))])))));
 exports.attribute = (0, combinator_1.union)([(0, source_1.str)(/^[^\S\n]+[a-z]+(?:-[a-z]+)*(?:="(?:\\[^\n]|[^\\\n"])*")?(?=[^\S\n]|>)/)]); // https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 // [...document.querySelectorAll('tbody > tr > td:first-child')].map(el => el.textContent.slice(1, -1))
 
@@ -6588,6 +6588,12 @@ exports.media = (0, combinator_1.lazy)(() => (0, combinator_1.creator)(10, (0, c
   cache?.hasAttribute('alt') && cache?.setAttribute('alt', text);
   if (!sanitize(el, url, text)) return [[el], rest];
   (0, dom_1.define)(el, (0, html_1.attributes)('media', (0, array_1.push)([], el.classList), optspec, params));
+
+  // Awaiting the generic support for attr().
+  if (el.hasAttribute('aspect-ratio')) {
+    el.style.aspectRatio = el.getAttribute('aspect-ratio');
+  }
+
   if (context.syntax?.inline?.link === false || cache && cache.tagName !== 'IMG') return [[el], rest];
   return (0, combinator_1.fmap)(link_1.link, ([link]) => [(0, dom_1.define)(link, {
     target: '_blank'
@@ -7637,7 +7643,7 @@ const str_1 = __webpack_require__(2790);
 
 const dom_1 = __webpack_require__(3252);
 
-exports.delimiter = /[\s\x00-\x7F]|\S#|[、。！？][^\S\n]*(?=\\\n)/;
+exports.delimiter = /[\s\x00-\x7F]|\S#|[（）、。！？][^\S\n]*(?=\\\n)/;
 exports.nonWhitespace = /[\S\n]|$/;
 exports.nonAlphanumeric = /[^0-9A-Za-z]|\S#|$/;
 const repeat = (0, str_1.str)(/^(.)\1*/);
@@ -8378,6 +8384,7 @@ function video(source, url) {
     src: source.getAttribute('data-src'),
     'data-type': 'video',
     ...global_1.Object.fromEntries([...source.attributes].map(attr => [attr.name, attr.value])),
+    style: source.hasAttribute('aspect-ratio') ? `aspect-ratio: ${source.getAttribute('aspect-ratio')};` : global_1.undefined,
     muted: '',
     controls: ''
   });

package/package.json

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

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

@@ -27,7 +27,7 @@ describe('Unit: parser/api/bind', () => {
       return acc;
     }
 
-    const cfgs = { footnotes: { annotations: html('ol'), references: html('ol') } };
+    const cfgs = { footnotes: { references: html('ol') } };
 
     it('huge input', () => {
       const iter = bind(html('div'), { ...cfgs, id: '' }).parse(`${'\n'.repeat(10 * 1000 ** 2)}`);
@@ -168,62 +168,62 @@ describe('Unit: parser/api/bind', () => {
       const el = html('div');
       const chunk = frag();
       const update = bind(chunk, { ...cfgs, chunk: true }).parse;
-      const iter = update([...Array(3)].map((_, i) => `((${i + 1}))`).join('\n\n'));
+      const iter = update([...Array(3)].map((_, i) => `[[${i + 1}]]`).join('\n\n'));
 
       inspect(iter, 2);
       el.appendChild(chunk);
       assert.deepStrictEqual(
         [...el.children].map(el => el.outerHTML),
         [
-          html('p', [html('sup', { class: "annotation" }, [html('span', '1')]),]).outerHTML,
-          html('p', [html('sup', { class: "annotation" }, [html('span', '2')]),]).outerHTML,
+          html('p', [html('sup', { class: "reference" }, [html('span', '1')]),]).outerHTML,
+          html('p', [html('sup', { class: "reference" }, [html('span', '2')]),]).outerHTML,
         ]);
       inspect(iter, 1);
       el.appendChild(chunk);
       assert.deepStrictEqual(
         [...el.children].map(el => el.outerHTML),
         [
-          html('p', [html('sup', { class: "annotation" }, [html('span', '1')]),]).outerHTML,
-          html('p', [html('sup', { class: "annotation" }, [html('span', '2')]),]).outerHTML,
-          html('p', [html('sup', { class: "annotation" }, [html('span', '3')]),]).outerHTML,
+          html('p', [html('sup', { class: "reference" }, [html('span', '1')]),]).outerHTML,
+          html('p', [html('sup', { class: "reference" }, [html('span', '2')]),]).outerHTML,
+          html('p', [html('sup', { class: "reference" }, [html('span', '3')]),]).outerHTML,
         ]);
       inspect(iter);
       assert.deepStrictEqual(
         [...el.children].map(el => el.outerHTML),
         [
           html('p', [
-            html('sup', { class: "annotation", id: "annotation:ref:1", title: "1" }, [
+            html('sup', { class: "reference", id: "reference:ref:1", title: "1" }, [
               html('span', { hidden: '' }, '1'),
-              html('a', { href: "#annotation:def:1" }, '*1')
+              html('a', { href: "#reference:def:1" }, '[1]'),
             ]),
           ]).outerHTML,
           html('p', [
-            html('sup', { class: "annotation", id: "annotation:ref:2", title: "2" }, [
+            html('sup', { class: "reference", id: "reference:ref:2", title: "2" }, [
               html('span', { hidden: '' }, '2'),
-              html('a', { href: "#annotation:def:2" }, '*2')
+              html('a', { href: "#reference:def:2" }, '[2]'),
             ]),
           ]).outerHTML,
           html('p', [
-            html('sup', { class: "annotation", id: "annotation:ref:3", title: "3" }, [
+            html('sup', { class: "reference", id: "reference:ref:3", title: "3" }, [
               html('span', { hidden: '' }, '3'),
-              html('a', { href: "#annotation:def:3" }, '*3')
+              html('a', { href: "#reference:def:3" }, '[3]'),
             ]),
           ]).outerHTML,
         ]);
       assert.deepStrictEqual(
-        cfgs.footnotes.annotations?.outerHTML,
+        cfgs.footnotes.references?.outerHTML,
         html('ol', [
-          html('li', { id: 'annotation:def:1' }, [
+          html('li', { id: 'reference:def:1' }, [
             '1',
-            html('sup', [html('a', { href: '#annotation:ref:1' }, '^1')])
+            html('sup', [html('a', { href: '#reference:ref:1' }, '^1')]),
           ]),
-          html('li', { id: 'annotation:def:2' }, [
+          html('li', { id: 'reference:def:2' }, [
             '2',
-            html('sup', [html('a', { href: '#annotation:ref:2' }, '^2')])
+            html('sup', [html('a', { href: '#reference:ref:2' }, '^2')]),
           ]),
-          html('li', { id: 'annotation:def:3' }, [
+          html('li', { id: 'reference:def:3' }, [
             '3',
-            html('sup', [html('a', { href: '#annotation:ref:3' }, '^3')])
+            html('sup', [html('a', { href: '#reference:ref:3' }, '^3')]),
           ]),
         ]).outerHTML);
       assert.throws(() => update('').next());

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

@@ -204,16 +204,14 @@ describe('Unit: parser/api/parse', () => {
     });
 
     it('footnote', () => {
-      const footnotes = { annotations: html('ol'), references: html('ol') };
+      const footnotes = { references: html('ol') };
       assert.deepStrictEqual(
         [...parse('$-a\n$$\n$$\n\n(($-a[[b]][[c*d*]]))', { footnotes }).children].map(el => el.outerHTML),
         [
           '<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)[1][2]"><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>',
         ]);
-      assert.deepStrictEqual(
-        footnotes.annotations.outerHTML,
-        '<ol><li id="annotation:def: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>');
       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>');

package/src/parser/inline/annotation.test.ts

@@ -46,7 +46,6 @@ describe('Unit: parser/inline/annotation', () => {
       assert.deepStrictEqual(inspect(parser('((@a))')), [['<sup class="annotation"><span><a href="/@a" class="account">@a</a></span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('((http://host))')), [['<sup class="annotation"><span><a href="http://host" target="_blank">http://host</a></span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('((![]{a}))')), [['<sup class="annotation"><span>!<a href="a">a</a></span></sup>'], '']);
-      assert.deepStrictEqual(inspect(parser('((<a>))')), [['<sup class="annotation"><span>&lt;a&gt;</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('(((a)))')), [['<sup class="annotation"><span>(a)</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('((((a))))')), [['<sup class="annotation"><span><span class="paren">((a))</span></span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('(([[a]]))')), [['<sup class="annotation"><span><sup class="reference"><span>a</span></sup></span></sup>'], '']);

package/src/parser/inline/emphasis.test.ts

@@ -46,7 +46,6 @@ describe('Unit: parser/inline/emphasis', () => {
       assert.deepStrictEqual(inspect(parser('*a**b**c*')), [['<em>a<strong>b</strong>c</em>'], '']);
       assert.deepStrictEqual(inspect(parser('*a**b**c*d')), [['<em>a<strong>b</strong>c</em>'], 'd']);
       assert.deepStrictEqual(inspect(parser('*`a`*')), [['<em><code data-src="`a`">a</code></em>'], '']);
-      assert.deepStrictEqual(inspect(parser('*<bdi>*')), [['<em>&lt;bdi&gt;</em>'], '']);
       assert.deepStrictEqual(inspect(parser('*(*a*)*')), [['<em><span class="paren">(<em>a</em>)</span></em>'], '']);
       assert.deepStrictEqual(inspect(parser('*(**a**)*')), [['<em><span class="paren">(<strong>a</strong>)</span></em>'], '']);
     });

package/src/parser/inline/html.ts

@@ -40,7 +40,7 @@ export const html: HTMLParser = lazy(() => creator(validate('<', validate(/^<[a-
           [[elem(tag, as, bs, cs)], rest]),
     ([, tag]) => TAGS.indexOf(tag), [])),
   match(
-    /^<([a-z]+)(?=[^\S\n]|>)/,
+    new RegExp(String.raw`^<(?!${TAGS.join('|')}\b)([a-z]+)(?=[^\S\n]|>)`),
     memoize(
     ([, tag]) =>
       surround<HTMLParser.TagParser, string>(surround(

package/src/parser/inline/media.test.ts

@@ -106,9 +106,9 @@ describe('Unit: parser/inline/media', () => {
       assert.deepStrictEqual(inspect(parser('![]{/ nofollow}')), [['<a href="/" rel="nofollow" target="_blank"><img class="media" data-src="/" alt=""></a>'], '']);
       assert.deepStrictEqual(inspect(parser('![]{/ width="4" height="3"}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" width="4" height="3"></a>'], '']);
       assert.deepStrictEqual(inspect(parser('![]{/ 4x3}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" width="4" height="3"></a>'], '']);
-      assert.deepStrictEqual(inspect(parser('![]{/ aspect-ratio="4/3"}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3"></a>'], '']);
-      assert.deepStrictEqual(inspect(parser('![]{/ aspect-ratio="4/3" nofollow}')), [['<a href="/" rel="nofollow" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3"></a>'], '']);
-      assert.deepStrictEqual(inspect(parser('![]{/ 4:3}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3"></a>'], '']);
+      assert.deepStrictEqual(inspect(parser('![]{/ aspect-ratio="4/3"}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3" style="aspect-ratio: 4 / 3;"></a>'], '']);
+      assert.deepStrictEqual(inspect(parser('![]{/ aspect-ratio="4/3" nofollow}')), [['<a href="/" rel="nofollow" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3" style="aspect-ratio: 4 / 3;"></a>'], '']);
+      assert.deepStrictEqual(inspect(parser('![]{/ 4:3}')), [['<a href="/" target="_blank"><img class="media" data-src="/" alt="" aspect-ratio="4/3" style="aspect-ratio: 4 / 3;"></a>'], '']);
     });
 
   });

package/src/parser/inline/media.ts

@@ -48,6 +48,10 @@ export const media: MediaParser = lazy(() => creator(10, validate(['![', '!{'],
     assert(!el.matches('.invalid'));
     define(el, attributes('media', push([], el.classList), optspec, params));
     assert(el.matches('img') || !el.matches('.invalid'));
+    // Awaiting the generic support for attr().
+    if (el.hasAttribute('aspect-ratio')) {
+      el.style.aspectRatio = el.getAttribute('aspect-ratio')!;
+    }
     if (context.syntax?.inline?.link === false || cache && cache.tagName !== 'IMG') return [[el], rest];
     return fmap(
       link as MediaParser,

package/src/parser/inline/reference.test.ts

@@ -46,7 +46,6 @@ describe('Unit: parser/inline/reference', () => {
       assert.deepStrictEqual(inspect(parser('[[@a]]')), [['<sup class="reference"><span><a href="/@a" class="account">@a</a></span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('[[http://host]]')), [['<sup class="reference"><span><a href="http://host" target="_blank">http://host</a></span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('[[![]{a}]]')), [['<sup class="reference"><span>!<a href="a">a</a></span></sup>'], '']);
-      assert.deepStrictEqual(inspect(parser('[[<a>]]')), [['<sup class="reference"><span>&lt;a&gt;</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('[[[a]]]')), [['<sup class="reference"><span>[a]</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('[[[[a]]]]')), [['<sup class="reference"><span>[[a]]</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('[[((a))]]')), [['<sup class="reference"><span><span class="paren">((a))</span></span></sup>'], '']);

package/src/parser/inline/strong.test.ts

@@ -43,7 +43,6 @@ describe('Unit: parser/inline/strong', () => {
       assert.deepStrictEqual(inspect(parser('**a*b*c**')), [['<strong>a<em>b</em>c</strong>'], '']);
       assert.deepStrictEqual(inspect(parser('**a*b*c**d')), [['<strong>a<em>b</em>c</strong>'], 'd']);
       assert.deepStrictEqual(inspect(parser('**`a`**')), [['<strong><code data-src="`a`">a</code></strong>'], '']);
-      assert.deepStrictEqual(inspect(parser('**<bdi>**')), [['<strong>&lt;bdi&gt;</strong>'], '']);
       assert.deepStrictEqual(inspect(parser('**(*a*)**')), [['<strong><span class="paren">(<em>a</em>)</span></strong>'], '']);
       assert.deepStrictEqual(inspect(parser('**(**a**)**')), [['<strong><span class="paren">(<strong>a</strong>)</span></strong>'], '']);
     });

package/src/parser/inline.test.ts

@@ -155,8 +155,6 @@ describe('Unit: parser/inline', () => {
       assert.deepStrictEqual(inspect(parser('[(([a]{#}))]{#}')), [['<a href="#"><span class="paren">(<span class="paren">([a]{#})</span>)</span></a>'], '']);
       assert.deepStrictEqual(inspect(parser('"[[""]]')), [['"', '<sup class="reference"><span>""</span></sup>'], '']);
       assert.deepStrictEqual(inspect(parser('<http://host>')), [['<', '<a href="http://host" target="_blank">http://host</a>', '>'], '']);
-      assert.deepStrictEqual(inspect(parser('<<bdi>a<</bdi>')), [['<', '<bdi>a&lt;</bdi>'], '']);
-      assert.deepStrictEqual(inspect(parser('*<bdi>*`</bdi>`')), [['<em>&lt;bdi&gt;</em>', '<code data-src="`</bdi>`">&lt;/bdi&gt;</code>'], '']);
       assert.deepStrictEqual(inspect(parser('[~http://host')), [['[', '~', '<a href="http://host" target="_blank">http://host</a>'], '']);
       assert.deepStrictEqual(inspect(parser('[~a@b')), [['[', '~', '<a class="email" href="mailto:a@b">a@b</a>'], '']);
       assert.deepStrictEqual(inspect(parser('[~~a~~]')), [['[', '<del>a</del>', ']'], '']);

package/src/parser/source/text.ts

@@ -4,7 +4,7 @@ import { union, focus, creator } from '../../combinator';
 import { str } from './str';
 import { html } from 'typed-dom/dom';
 
-export const delimiter = /[\s\x00-\x7F]|\S#|[、。！？][^\S\n]*(?=\\\n)/;
+export const delimiter = /[\s\x00-\x7F]|\S#|[（）、。！？][^\S\n]*(?=\\\n)/;
 export const nonWhitespace = /[\S\n]|$/;
 export const nonAlphanumeric = /[^0-9A-Za-z]|\S#|$/;
 const repeat = str(/^(.)\1*/);

package/src/renderer/render/media/video.ts

@@ -1,4 +1,4 @@
-import { Object } from 'spica/global';
+import { undefined, Object } from 'spica/global';
 import { html } from 'typed-dom/dom';
 
 const extensions = [
@@ -13,6 +13,9 @@ export function video(source: HTMLImageElement, url: URL): HTMLVideoElement | un
     'data-type': 'video',
     ...Object.fromEntries([...source.attributes]
       .map(attr => [attr.name, attr.value])),
+    style: source.hasAttribute('aspect-ratio')
+      ? `aspect-ratio: ${source.getAttribute('aspect-ratio')};`
+      : undefined,
     muted: '',
     controls: '',
   });