wiki-formant 0.76.0 → 0.77.1

package/README.md

@@ -761,6 +761,8 @@ const safe = mapBlockTree(blocks, b => sanitizeCoreLeaf(b, clean), BLOCK_SHAPE);
 
 The default list is derived from what the editor nodes in `wiki-formant/tiptap` store — the embed wrappers' data attributes, the tab markup `activateTabGroups` reads back, the table classes — plus the presentational SVG subset the infographics pipeline embeds. Extend it with `tags`, `attributes`, `classes` and `schemesByTag` derived from your stored HTML, never from memory: a list written from memory erases content on the first render.
 
+A YouTube iframe comes out as the `YouTube` node's markup, `<div data-youtube-video><iframe …></iframe></div>`, whoever wrote it: an agent, an import, a pasted embed code. The editor then opens it as that node, and `base.css` draws it as the same full-width 16:9 player as one the editor wrote, as it does a map embed. Two wikis had drawn that player in their own stylesheets and a third drew any iframe its own way; spacing, corners, borders and the editor's selection ring stay the site's.
+
 Classes pass by name only. Limiting `style` to layout and paint is worth nothing while `class` is free, because every site's own stylesheet ships `fixed inset-0 z-50`, and those draw a fake prompt over the chrome as well as `position` does.
 
 ## Image uploads

package/dist/base.css

@@ -430,3 +430,15 @@ pre:hover > .code-copy-btn,
 .stats-filters a { display: inline-block; padding: 0.25em 0.75em; border: 1px solid; border-radius: 9999px; text-decoration: none; }
 .stats-filters p { margin: 0; opacity: 0.7; }
 .stats-count { font-variant-numeric: tabular-nums; }
+
+/* ---- embeds ------------------------------------------------------------------
+   The players the `wiki-formant/tiptap` nodes store, filling their column at a
+   screen's proportions. The node writes a width and height onto the iframe,
+   which `aspect-ratio` with `height: auto` overrides. Spacing, corners,
+   borders and the editor's selection ring are the site's. */
+:is(div[data-youtube-video], .map-embed) iframe {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}

package/dist/sanitize.js

@@ -143,8 +143,16 @@ export function createHtmlSanitizer(options = {}) {
         // Drop the contents of a disallowed <script> or <style>, not just the tags.
         nonTextTags: ['script', 'style', 'textarea', 'option', 'noscript'],
     };
-    return (html) => (!html || !html.includes('<') ? html : sanitizeHtml(html, config));
+    return (html) => (!html || !html.includes('<') ? html : asYouTubeNodes(sanitizeHtml(html, config)));
 }
+// A YouTube player the editor did not write: an agent's, an import's, a pasted
+// embed code. Run over the sanitiser's own output, whose markup is regular.
+const BARE_YOUTUBE = /(<div data-youtube-video>)?(<iframe\b[^>]*\bsrc="https:\/\/www\.youtube(?:-nocookie)?\.com\/embed\/[^"]*"[^>]*><\/iframe>)/g;
+/**
+ * Every YouTube iframe in the markup the `YouTube` node stores, so the editor
+ * opens it as that node and base.css draws it as one player, whoever wrote it.
+ */
+const asYouTubeNodes = (html) => html.includes('youtube') ? html.replace(BARE_YOUTUBE, (all, wrapped, frame) => (wrapped ? all : `<div data-youtube-video>${frame}</div>`)) : html;
 const each = (v, map) => Array.isArray(v) ? v.map(item => (item && typeof item === 'object' ? map(item) : item)) : v;
 const str = (v) => typeof v === 'string';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.76.0",
+  "version": "0.77.1",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",