u2ui 1.5.3 → 1.5.4

package/js/rte/images.js

@@ -0,0 +1,7 @@
+import {editor} from './rte.js';
+import {images} from './src/client/images.js';
+
+export {images, imageTools} from './src/client/images.js';
+export {elementAttributes, selectedElement} from './src/command/element.js';
+
+editor.add(images);

package/js/rte/link.js

@@ -0,0 +1,8 @@
+import {editor} from './rte.js';
+import {link} from './src/client/link.js';
+
+export {link, linkEditor} from './src/client/link.js';
+export {linkHtml} from './src/mark/standard.js';
+export {valueMark} from './src/command/mark.js';
+
+editor.add(link);

package/js/rte/playground/README.md

@@ -0,0 +1,95 @@
+# RTE playground
+
+`index.html` is a dependency-free visual client of the real `RepairPlanner`,
+`Normalizer`, `PointMap`, range classes, command registry, and mark commands. It
+contains no alternative editor or normalization implementation.
+
+`hosts.html` is a focused live matrix for comparing the convention client
+across block, text, interactive, list, table, and custom editing hosts. It also
+covers links in both nesting directions, non-modal and declarative `show-modal`
+dialogs, `showPopover()` and fullscreen hosts, plain-text editing, empty hosts,
+and non-editable islands. The shared editor chrome follows an active native
+top-layer boundary and returns to the document when that boundary closes.
+It reports registration, resolved host defaults, selection, serialized content,
+and recent native events without turning the observations into cross-browser
+assertions.
+
+Open `/u2/js/rte/playground/` through the local HTTP server. Included scenarios
+cover inline runs, generic blocks, redundant wrappers, lists, lift-and-split,
+nested editable isolation, CSS-class marks, and the original invalid `p/div`
+example.
+
+## Capabilities
+
+- Analyze planned actions without changing DOM.
+- Execute exactly one normalizer operation or run to a fixed point.
+- Change cleanup level and default block through the production CSS custom
+  properties; `auto` demonstrates semantic host defaults such as `li` for a
+  `ul` editor.
+- Dispatch selected Input Events through the production `InputPipeline` and
+  control its `input paste drop command` triggers with `--u2-rte-clean-on`.
+- Observe the prevented-input path: `insertParagraph` and `insertLineBreak` run
+  the registered `enter` and `lineBreak` commands instead of native editing;
+  structural Backspace uses the same production command as the convention
+  client.
+- Apply, remove, or toggle the `.x` mark over a live selection. The toggle
+  exposes active, mixed, and caret state; the dedicated scenario makes wrapper
+  creation, reuse of an existing inline element, and cleanup of a neutral
+  `span` visible in the DOM tree and serialized HTML. At a caret, toggling also
+  formats the next ordinary text input through `PendingMarks`.
+- Exercise the convention prototype's full ready toolbar: undo and redo, the
+  standard inline marks, bulleted and numbered lists with their nesting levels,
+  and a separator. The readout under that surface reports how many history
+  entries exist and where it stands, which makes grouping visible — continuous
+  typing coalesces into one entry, while each command is its own step.
+- Configure the prototype surface live from the panel beside it: tick the
+  controls `--u2-rte-toolbar` lists, and switch the other host properties. A
+  change and its effect stay in view at once, and the control names come from
+  the registered modules, so the panel cannot drift from what the editor offers.
+- Give a selection one of the host's declared content classes and watch the same
+  declaration drive the sanitizer and remove-format.
+- Click the image and drag a corner to resize it, or reset it to its own size.
+- Put the caret in a table cell and use the handles on the table to add or drop
+  its rows and columns.
+- Create a link from a selection or edit an existing one from a caret through
+  the contextual form, and remove one by emptying its address.
+- Open the surface's HTML in the modal source dialog, syntax highlighted through
+  `<u2-code>`, edit it, and apply it as one undo step.
+- Toggle the ready-made bold mark by button or Ctrl/Command+B. The scenario
+  exposes `<b>` alias recognition, canonical `<strong>` output, semantic
+  removal, and pending bold input at a caret.
+- Exercise the production roaming `Toolbar` with application-owned markup: it
+  follows the active surface, reflects command availability and mark state,
+  preserves the selection during pointer or keyboard interaction, and uses the
+  production collapsed-range geometry in its replaceable placement callback.
+- Exercise the one-import `rte.js` convention client on a visible surface.
+  It is opted in only through CSS and exposes its lazy default Bold toolbar,
+  optional `blocks.js` value control, context-aware Enter behavior, and the
+  optional staged `unstyle.js` action and non-mutating `breaks.js` line-break
+  marker without playground-side wiring.
+- Edit content directly or parse serialized HTML through the browser.
+- Compare the live DOM tree with `innerHTML` serialization.
+- Display executed actions, unresolved repairs, and selection endpoints. Green
+  anchor and blue focus `┃` markers also show the exact boundary directly in
+  the rendered DOM tree; element-boundary carets get their own marker line
+  between the affected children.
+- Map and restore a live selection through each normalization run.
+
+Scenarios that browsers repair during HTML parsing are constructed with DOM
+methods. The raw HTML button remains available specifically to expose that
+difference.
+
+`tests/playground.test.js` loads the complete page in a same-origin frame. It
+checks bootstrapping, pure analysis, one-step selection restoration, complete
+normalization, action reporting, host-specific list defaults, synthetic input
+routing including structural Backspace, and the roaming toolbar. It also drives
+the class-mark controls and checks their exact DOM result in every target
+browser.
+
+## TODO
+
+- Highlight the nodes affected by the current plan in the editable view.
+- Add scope selection and transaction dirty-scope visualization.
+- Show before/after range boundaries for every individual operation.
+- Export and import minimized custom scenarios as JSON.
+- Add clipboard/drop payload and history panels when those modules exist.

package/js/rte/playground/hosts.html

@@ -0,0 +1,518 @@
+<!doctype html>
+<html lang=en>
+<head>
+  <meta charset=utf-8>
+  <meta name=viewport content="width=device-width, initial-scale=1">
+  <title>RTE host matrix</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      font: 14px/1.4 system-ui, sans-serif;
+      --border: color-mix(in srgb, CanvasText 25%, transparent);
+      --panel: color-mix(in srgb, CanvasText 5%, Canvas);
+    }
+
+    * { box-sizing: border-box; }
+    body { margin: 0 auto; max-inline-size: 90rem; padding: 1rem; }
+    h1 { font-size: 1.35rem; margin-block: 0 .25rem; }
+    h2 { font-size: 1.1rem; margin-block: .35rem 0; }
+    h3 { font-size: 1rem; margin-block: 0 .65rem; }
+    p { margin-block: .35rem .8rem; }
+    code, pre { font: .85rem/1.4 ui-monospace, monospace; }
+
+    .matrix {
+      display: grid;
+      gap: .8rem;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    }
+    .group { grid-column: 1 / -1; }
+    .case, .inspector {
+      background: var(--panel);
+      border: 1px solid var(--border);
+      border-radius: .4rem;
+      min-inline-size: 0;
+      padding: .8rem;
+    }
+    .case[data-active=true] { border-color: Highlight; }
+    .case > output {
+      display: block;
+      margin-block-start: .65rem;
+      overflow-wrap: anywhere;
+    }
+    .shell { margin: 0; padding-inline-start: 1.5rem; }
+    .shell-table { border-collapse: collapse; inline-size: 100%; }
+    .shell-table :is(th, td) { border: 1px solid var(--border); padding: .35rem; }
+
+    .rte-host {
+      --u2-rte: true;
+      --u2-rte-toolbar: undo redo block style bold italic underline strike code link bullets numbers outdent indent rule insertTable imageOriginal unstyle breaks source;
+      border: 2px solid color-mix(in srgb, Highlight 48%, var(--border));
+      min-block-size: 2.8rem;
+      outline: 0;
+      padding: .45rem;
+
+      &:focus { border-color: Highlight; }
+    }
+    ul.rte-host { padding-inline-start: 2rem; }
+    li.rte-host { display: list-item; }
+    x-editor.rte-host { display: block; }
+    table.rte-host { border-collapse: collapse; inline-size: 100%; }
+    table.rte-host :is(th, td) { border: 1px solid var(--border); padding: .35rem; }
+    dialog.rte-host[open]:not([data-modal]) { inline-size: 100%; margin: 0; position: static; }
+    dialog.rte-host[data-modal] { inline-size: min(30rem, calc(100% - 2rem)); }
+    dialog.rte-host::backdrop { background: #0008; }
+    .rte-host:popover-open { inline-size: min(30rem, calc(100% - 2rem)); }
+    .rte-host:fullscreen { background: Canvas; box-sizing: border-box; padding: 2rem; }
+    button.rte-host { color: inherit; font: inherit; inline-size: 100%; text-align: start; }
+    a.rte-host, a > .rte-host { display: inline-block; min-inline-size: 10rem; }
+    [contenteditable=false] { border: 1px dashed var(--border); padding: .2rem; }
+
+    .inspector { margin-block-start: .8rem; }
+    .inspector header { align-items: center; display: flex; gap: .8rem; justify-content: space-between; }
+    .inspector h2 { font-size: 1rem; margin: 0; }
+    .inspector h3 { font-size: .9rem; font-weight: 500; margin: 0; }
+    .inspector button { font: inherit; }
+    .readout {
+      display: grid;
+      gap: .8rem;
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
+      margin-block-start: .7rem;
+    }
+    pre {
+      background: Canvas;
+      border: 1px solid var(--border);
+      margin: .25rem 0 0;
+      min-block-size: 5rem;
+      overflow: auto;
+      padding: .5rem;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body>
+  <nav><a href=index.html>Normalization playground</a></nav>
+  <h1>RTE host matrix</h1>
+  <p>
+    Focus and edit every surface, especially with Enter and Backspace. These
+    are representative content models rather than a whitelist of supported
+    tags. Link activation and element-specific browser behavior remain native.
+  </p>
+
+  <main class=matrix>
+    <h2 class=group>Block containers</h2>
+
+    <section class=case>
+      <h3><code>&lt;div contenteditable&gt;</code></h3>
+      <div class=rte-host contenteditable data-name=div>Editable generic block</div>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;article contenteditable&gt;</code></h3>
+      <article class=rte-host contenteditable data-name=article>Editable article</article>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;blockquote contenteditable&gt;</code></h3>
+      <blockquote class=rte-host contenteditable data-name=blockquote>Editable quotation</blockquote>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;figure contenteditable&gt;</code></h3>
+      <figure class=rte-host contenteditable data-name=figure>Editable figure content</figure>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;figcaption contenteditable&gt;</code></h3>
+      <figure>
+        <figcaption class=rte-host contenteditable data-name=figcaption>Editable caption</figcaption>
+      </figure>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;details contenteditable&gt;</code></h3>
+      <details class=rte-host contenteditable data-name=details open>
+        <summary>Editable summary in host</summary>
+        Editable details content
+      </details>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;x-editor contenteditable&gt;</code></h3>
+      <x-editor class=rte-host contenteditable data-name=custom>Editable custom element</x-editor>
+      <output></output>
+    </section>
+
+    <h2 class=group>Text and interactive hosts</h2>
+
+    <section class=case>
+      <h3><code>&lt;p contenteditable&gt;</code></h3>
+      <p class=rte-host contenteditable data-name=paragraph>Editable paragraph host</p>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;h2 contenteditable&gt;</code></h3>
+      <h2 class=rte-host contenteditable data-name=heading>Editable heading host</h2>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;pre contenteditable&gt;</code></h3>
+      <pre class=rte-host contenteditable data-name=pre>Editable preformatted host</pre>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;span contenteditable&gt;</code></h3>
+      <span class=rte-host contenteditable data-name=span>Editable inline host</span>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;code contenteditable&gt;</code></h3>
+      <code class=rte-host contenteditable data-name=code>Editable code host</code>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;label contenteditable&gt;</code></h3>
+      <label for="native-input" class=rte-host contenteditable data-name=label>Editable label host</label>
+      <input id="native-input" type=text placeholder="Native input" />
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;output contenteditable&gt;</code></h3>
+      <p><output class=rte-host contenteditable data-name=output>Editable output host</output></p>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;summary contenteditable&gt;</code></h3>
+      <details open>
+        <summary class=rte-host contenteditable data-name=summary>Editable summary host</summary>
+        Non-editable details content
+      </details>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;button contenteditable&gt;</code></h3>
+      <button class=rte-host contenteditable data-name=button type=button>Editable button</button>
+      <output></output>
+    </section>
+
+    <section class=case id=links>
+      <h3><code>&lt;a contenteditable&gt;</code></h3>
+      <a class=rte-host contenteditable data-name=link href=#links>Editable link host</a>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;a&gt; &lt;span contenteditable&gt;</code></h3>
+      <a href=#links>
+        Before <span class=rte-host contenteditable data-name=inside-link>editable host</span> after
+      </a>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;div contenteditable&gt; &lt;a&gt;</code></h3>
+      <div class=rte-host contenteditable data-name=around-link>
+        Editable host around <a href=#links>a link</a>
+      </div>
+      <output></output>
+    </section>
+
+    <h2 class=group>Lists</h2>
+
+    <section class=case>
+      <h3><code>&lt;ul contenteditable&gt;</code></h3>
+      <ul class=rte-host contenteditable data-name=ul>
+        <li>First item
+        <li>Second item
+      </ul>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;ol contenteditable&gt;</code></h3>
+      <ol class=rte-host contenteditable data-name=ol>
+        <li>First item
+        <li>Second item
+      </ol>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;li contenteditable&gt;</code></h3>
+      <ul class=shell>
+        <li class=rte-host contenteditable data-name=li>Editable list item
+      </ul>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;dl contenteditable&gt;</code></h3>
+      <dl class=rte-host contenteditable data-name=description-list>
+        <dt>Term
+        <dd>Description
+      </dl>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;dt contenteditable&gt;</code></h3>
+      <dl>
+        <dt class=rte-host contenteditable data-name=term>Editable term
+        <dd>Description
+      </dl>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;dd contenteditable&gt;</code></h3>
+      <dl>
+        <dt>Term
+        <dd class=rte-host contenteditable data-name=description>Editable description
+      </dl>
+      <output></output>
+    </section>
+
+    <h2 class=group>Tables</h2>
+
+    <section class=case>
+      <h3><code>&lt;table contenteditable&gt;</code></h3>
+      <table class=rte-host contenteditable data-name=table>
+        <tbody>
+          <tr><th>One<th>Two
+          <tr><td>Alpha<td>Beta
+        </tbody>
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;thead contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <thead class=rte-host contenteditable data-name=thead><tr><th>Editable head<th>Second cell
+        <tbody><tr><td>Body<td>Body
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;tbody contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <tbody class=rte-host contenteditable data-name=tbody><tr><td>Editable body<td>Second cell
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;tfoot contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <tbody><tr><td>Body<td>Body
+        <tfoot class=rte-host contenteditable data-name=tfoot><tr><td>Editable foot<td>Second cell
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;tr contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <tbody><tr class=rte-host contenteditable data-name=row><td>Editable row<td>Second cell
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;th contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <tbody><tr><th class=rte-host contenteditable data-name=header-cell>Editable header cell<th>Peer
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;td contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <tbody><tr><td class=rte-host contenteditable data-name=cell>Editable cell<td>Peer
+      </table>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>&lt;caption contenteditable&gt;</code></h3>
+      <table class=shell-table>
+        <caption class=rte-host contenteditable data-name=caption>Editable table caption</caption>
+        <tbody><tr><td>Body<td>Body
+      </table>
+      <output></output>
+    </section>
+
+    <h2 class=group>Dialogs and editing boundaries</h2>
+
+    <section class=case>
+      <h3><code>&lt;dialog open contenteditable&gt;</code></h3>
+      <dialog class=rte-host contenteditable data-name=dialog open>Editable non-modal dialog</dialog>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>command="show-modal"</code></h3>
+      <button commandfor=modal-host command=show-modal type=button>Show modal editor</button>
+      <dialog class=rte-host contenteditable data-name=modal-dialog data-modal id=modal-host tabindex=-1>
+        <p>Edit this modal dialog.</p>
+        <button commandfor=modal-host command=close contenteditable=false type=button>Close</button>
+      </dialog>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>showPopover()</code></h3>
+      <button id=show-popover-host type=button>Show popover editor</button>
+      <div class=rte-host contenteditable data-name=popover id=popover-host popover=manual tabindex=-1>
+        Edit this popover host.
+        <button popovertarget=popover-host popovertargetaction=hide contenteditable=false type=button>Close</button>
+      </div>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>requestFullscreen()</code></h3>
+      <button id=show-fullscreen-host type=button>Show fullscreen editor</button>
+      <div class=rte-host contenteditable data-name=fullscreen id=fullscreen-host tabindex=-1>
+        <p>Edit this fullscreen host.</p>
+        <button id=hide-fullscreen-host contenteditable=false type=button>Exit fullscreen</button>
+      </div>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>contenteditable="plaintext-only"</code></h3>
+      <div class=rte-host contenteditable=plaintext-only data-name=plain-text>Native plain-text host</div>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3><code>contenteditable="false"</code> island</h3>
+      <div class=rte-host contenteditable data-name=false-island>
+        Editable before <span contenteditable=false>fixed island</span> editable after
+      </div>
+      <output></output>
+    </section>
+
+    <section class=case>
+      <h3>Empty editing host</h3>
+      <div class=rte-host contenteditable data-name=empty></div>
+      <output></output>
+    </section>
+  </main>
+
+  <section class=inspector>
+    <header>
+      <h2>Live inspector</h2>
+      <button id=clear type=button>Clear events</button>
+    </header>
+    <div class=readout>
+      <section><h3>Active surface</h3><pre id=active>None — focus a surface.</pre></section>
+      <section><h3>Selection</h3><pre id=selection>None</pre></section>
+      <section><h3>HTML</h3><pre id=html>None</pre></section>
+      <section><h3>Recent events</h3><pre id=events>None</pre></section>
+    </div>
+  </section>
+
+  <script type=module>
+    import {config, rte, Source} from '../rte.js';
+
+    const hosts = [...document.querySelectorAll('.rte-host')];
+    const events = [];
+    const active = document.querySelector('#active');
+    const selection = document.querySelector('#selection');
+    const html = document.querySelector('#html');
+    const eventLog = document.querySelector('#events');
+
+    const name = host => host?.dataset.name || 'none';
+    const node = value => {
+      if (!value) return 'none';
+      if (value.nodeType === Node.TEXT_NODE) {
+        const text = value.data.replace(/\s+/g, ' ').trim();
+        return `#text "${text.slice(0, 32)}"`;
+      }
+      return `<${value.localName}>`;
+    };
+
+    function render() {
+      for (const host of hosts) {
+        const surface = rte.get(host);
+        const settings = config(host);
+        const state = surface?.active ? 'active' : surface ? 'registered' : 'focus to register';
+        const mode = host.getAttribute('contenteditable') === 'plaintext-only' ? ' · plain text' : '';
+        host.closest('.case').dataset.active = surface?.active || false;
+        host.closest('.case').querySelector(':scope > output').textContent =
+          `${state}${mode} · block ${settings.block || 'none'} · Enter ${settings.enter}`;
+      }
+
+      const host = rte.active?.element;
+      if (!host) {
+        active.textContent = 'None — focus a surface.';
+        selection.textContent = 'None';
+        html.textContent = 'None';
+      } else {
+        const settings = rte.active.config;
+        active.textContent = `${name(host)}\nblock: ${settings.block || 'none'}\nEnter: ${settings.enter}`;
+        html.textContent = new Source(rte.active).read().html;
+        const range = getSelection();
+        selection.textContent = range?.rangeCount
+          ? `anchor: ${node(range.anchorNode)} @ ${range.anchorOffset}\nfocus:  ${node(range.focusNode)} @ ${range.focusOffset}\ncollapsed: ${range.isCollapsed}`
+          : 'None';
+      }
+      eventLog.textContent = events.length ? events.join('\n') : 'None';
+    }
+
+    function record(event) {
+      const host = event.composedPath().find(item => item?.matches?.('.rte-host'));
+      if (!host) return;
+      const detail = event.inputType || event.key || '';
+      events.push(`${name(host)} · ${event.type}${detail ? ` · ${detail}` : ''}`);
+      events.splice(0, Math.max(0, events.length - 16));
+      queueMicrotask(render);
+    }
+
+    for (const type of ['focusin', 'focusout', 'beforeinput', 'input', 'keydown', 'click', 'cancel', 'close']) {
+      document.addEventListener(type, record, true);
+    }
+    rte.addEventListener('u2-rte-add', event => {
+      events.push(`${name(event.detail.surface.element)} · registered`);
+      render();
+    });
+    rte.addEventListener('u2-rte-activechange', render);
+    document.addEventListener('selectionchange', render);
+    document.querySelector('#clear').addEventListener('click', () => {
+      events.length = 0;
+      render();
+    });
+    const popover = document.querySelector('#popover-host');
+    document.querySelector('#show-popover-host').addEventListener('click', () => {
+      popover.showPopover();
+      popover.focus();
+    });
+    const fullscreen = document.querySelector('#fullscreen-host');
+    const enterFullscreen = document.querySelector('#show-fullscreen-host');
+    enterFullscreen.disabled = typeof fullscreen.requestFullscreen !== 'function';
+    enterFullscreen.addEventListener('click', async () => {
+      await fullscreen.requestFullscreen();
+      fullscreen.focus();
+    });
+    document.querySelector('#hide-fullscreen-host').addEventListener('click', () => document.exitFullscreen());
+    render();
+  </script>
+</body>
+</html>