mnfst 0.5.81 → 0.5.82

package/lib/manifest.markdown.js

@@ -17,11 +17,8 @@ if (typeof window !== 'undefined') {
     });
 }
 
-// Cache for DOMPurify loading (only fetched when the .safe modifier is used)
-let purifyPromise = null;
-
 // DOMPurify config tuned for Manifest's markdown output. The markdown
-// extensions emit <x-code>, <x-icon>, and other x-* custom elements that must
+// extensions emit <x-icon> custom elements and `x-*` directive attributes that must
 // survive sanitization, so custom-element handling is enabled with a
 // tag-name allowlist (x-*) and an attribute filter that rejects event
 // handlers (on*). DOMPurify's defaults handle <script>, javascript: URLs,
@@ -34,29 +31,36 @@ const MARKDOWN_PURIFY_CONFIG = {
     }
 };
 
-async function loadDOMPurify() {
-    if (typeof window.DOMPurify !== 'undefined') return window.DOMPurify;
-    if (purifyPromise) return purifyPromise;
-    purifyPromise = new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = 'https://cdn.jsdelivr.net/npm/dompurify@latest/dist/purify.min.js';
-        script.onload = () => {
-            if (typeof window.DOMPurify !== 'undefined') {
-                resolve(window.DOMPurify);
-            } else {
-                console.error('[Manifest Markdown] DOMPurify failed to load — DOMPurify is undefined');
-                purifyPromise = null;
-                reject(new Error('DOMPurify failed to load'));
-            }
-        };
-        script.onerror = (err) => {
-            console.error('[Manifest Markdown] DOMPurify script failed to load:', err);
-            purifyPromise = null;
-            reject(err);
-        };
-        document.head.appendChild(script);
-    });
-    return purifyPromise;
+// DOMPurify loader is defined on window by whichever of svg/markdown loads
+// first (see manifest.svg.js). Declaring `let purifyPromise` here at top
+// level collides with svg.js's identical declaration in the realm's shared
+// global lexical environment, so we use the shared loader instead.
+if (!window.ManifestDOMPurify) {
+    window.ManifestDOMPurify = {
+        _promise: null,
+        load() {
+            if (typeof window.DOMPurify !== 'undefined') return Promise.resolve(window.DOMPurify);
+            if (this._promise) return this._promise;
+            this._promise = new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/dompurify@latest/dist/purify.min.js';
+                script.onload = () => {
+                    if (typeof window.DOMPurify !== 'undefined') {
+                        resolve(window.DOMPurify);
+                    } else {
+                        this._promise = null;
+                        reject(new Error('DOMPurify failed to load'));
+                    }
+                };
+                script.onerror = (err) => {
+                    this._promise = null;
+                    reject(err);
+                };
+                document.head.appendChild(script);
+            });
+            return this._promise;
+        }
+    };
 }
 
 // Sanitize HTML if the .safe modifier was used; pass-through otherwise.
@@ -67,7 +71,7 @@ async function loadDOMPurify() {
 async function maybeSanitizeMarkdownHtml(html, safe) {
     if (!safe) return html;
     try {
-        const DOMPurify = await loadDOMPurify();
+        const DOMPurify = await window.ManifestDOMPurify.load();
         return DOMPurify.sanitize(html, MARKDOWN_PURIFY_CONFIG);
     } catch {
         // Loader failure — fall back to escaping rather than silently emitting
@@ -117,7 +121,7 @@ async function loadMarkedJS() {
 // HTML-escape a string for safe interpolation inside an attribute value.
 // Used by the code-fence renderer below — title/language strings come from
 // the markdown source, so without escaping a fence like ```js " onclick=alert(1) x="
-// could inject arbitrary attributes onto the <x-code> element.
+// could inject arbitrary attributes onto the <pre> element.
 function escapeForAttribute(s) {
     return String(s)
         .replace(/&/g, '&amp;')
@@ -126,45 +130,49 @@ function escapeForAttribute(s) {
         .replace(/>/g, '&gt;');
 }
 
+// Escape a literal HTML fragment so it displays as source text when placed
+// inside a <code> element. Used for the ::: frame demo modifier, where the
+// same content is rendered live AND shown below as its own source.
+function escapeForText(s) {
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
 // Configure marked to preserve full language strings
 async function configureMarked(marked) {
     marked.use({
         renderer: {
+            // Render fenced code blocks as <pre x-code="…"><code>…</code></pre>.
+            // The code plugin's directive then handles highlighting, copy
+            // buttons, collapse, line numbers, etc. — same code path whether
+            // the block was authored in HTML or markdown.
             code(token) {
                 const lang = token.lang || '';
                 const text = token.text || '';
-                const escaped = token.escaped || false;
-
-                // Parse the language string to extract attributes
-                const attributes = parseLanguageString(lang);
 
-                // Build attributes for the x-code element
-                let xCodeAttributes = '';
-                if (attributes.title) {
-                    xCodeAttributes += ` name="${escapeForAttribute(attributes.title)}"`;
-                }
-                if (attributes.language) {
-                    xCodeAttributes += ` language="${escapeForAttribute(attributes.language)}"`;
-                }
-                if (attributes.numbers) {
-                    xCodeAttributes += ' numbers';
-                }
-                if (attributes.copy) {
-                    xCodeAttributes += ' copy';
+                const attrs = parseLanguageString(lang);
+
+                let preAttrs = '';
+                // x-code carries the language as its value (empty string for
+                // "no explicit language; auto-detect")
+                preAttrs += ` x-code="${attrs.language ? escapeForAttribute(attrs.language) : ''}"`;
+                if (attrs.title)    preAttrs += ` name="${escapeForAttribute(attrs.title)}"`;
+                if (attrs.lines)    preAttrs += ' lines';
+                if (attrs.copy)     preAttrs += ' copy';
+                if (attrs.edit)     preAttrs += ' edit';
+                if (attrs.collapse !== null) {
+                    preAttrs += attrs.collapse === ''
+                        ? ' collapse'
+                        : ` collapse="${escapeForAttribute(attrs.collapse)}"`;
                 }
+                if (attrs.from) preAttrs += ` from="${escapeForAttribute(attrs.from)}"`;
 
-                // For x-code elements, use the raw text to preserve formatting
-                let code = text;
-                let preserveOriginal = '';
-
-                // For HTML language code blocks, preserve the original raw text to maintain indentation
-                if (attributes.language === 'html' || text.includes('<!DOCTYPE') || (text.includes('<html') && text.includes('<head') && text.includes('<body'))) {
-                    // Store the original content in a data attribute to preserve indentation
-                    preserveOriginal = ` data-original-content="${text.replace(/"/g, '&quot;')}"`;
-                }
-
-                // Always create an x-code element, with or without attributes
-                return `<x-code${xCodeAttributes}${preserveOriginal}>${code}</x-code>\n`;
+                // marked has already HTML-escaped `text`. It's safe to drop
+                // it inside <code> and let the code plugin read .textContent
+                // as the highlight source.
+                return `<pre${preAttrs}><code>${text}</code></pre>\n`;
             }
         },
         // Configure marked to allow custom HTML tags
@@ -219,9 +227,17 @@ async function configureMarked(marked) {
                 }
             },
             renderer(token) {
-                const classes = token.classes || '';
+                let classes = token.classes || '';
                 const iconValue = token.iconValue || '';
 
+                // `::: frame demo` — render the frame contents live AND emit
+                // a sibling <pre x-code="html"> showing the same source. Lets
+                // authors write the example once and have it both rendered
+                // and documented. Strip `demo` from the class list so the
+                // resulting <aside> has just `frame`.
+                const isDemo = /\bframe\b/.test(classes) && /\bdemo\b/.test(classes);
+                if (isDemo) classes = classes.replace(/\bdemo\b/, '').replace(/\s+/g, ' ').trim();
+
                 // For frame callouts, don't parse as markdown to avoid wrapping HTML in <p> tags
                 let parsedContent;
                 if (classes.includes('frame')) {
@@ -247,7 +263,11 @@ async function configureMarked(marked) {
                     `<div>${parsedContent}</div>` :
                     parsedContent;
 
-                return `<aside${classes ? ` class="${classes}"` : ''}>${iconHtml}${wrappedContent}</aside>\n`;
+                const aside = `<aside${classes ? ` class="${classes}"` : ''}>${iconHtml}${wrappedContent}</aside>`;
+                if (isDemo) {
+                    return `${aside}\n<pre x-code="html" copy><code>${escapeForText(token.text.trim())}</code></pre>\n`;
+                }
+                return `${aside}\n`;
             }
         }]
     });
@@ -259,17 +279,16 @@ async function configureMarked(marked) {
     });
 }
 
-// Custom renderer for x-code-group to handle line breaks properly
+// Markdown preprocessor: ensure that block-level HTML containers (the
+// wrappers authors use to group fenced code blocks into tabs, frames, etc.)
+// have a blank line after their opening tag so marked treats the contents
+// as block-level markdown rather than raw inline HTML. Without this, a
+// fenced ```js immediately after `<div x-code-group>` is treated as text.
 function renderXCodeGroup(markdown) {
-    // Find x-code-group blocks and process them specially
-    const xCodeGroupRegex = /<x-code-group[^>]*>([\s\S]*?)<\/x-code-group>/g;
-
-    return markdown.replace(xCodeGroupRegex, (match, content) => {
-        // Ensure there's a line break after the opening tag if there isn't one
-        const processedContent = content.replace(/^(?!\s*\n)/, '\n');
-
-        return `<x-code-group>${processedContent}</x-code-group>`;
-    });
+    return markdown.replace(
+        /(<(?:div|section|article|aside)[^>]*\bx-code-group\b[^>]*>)(?!\s*\n)/g,
+        '$1\n'
+    );
 }
 
 // Post-process HTML to enable checkboxes by removing disabled attribute
@@ -296,68 +315,69 @@ function isHighlightJsAvailable() {
 
 
 
-// Parse language string to extract title and attributes
+// Parse a fence's info-string into an attributes bag. Supported tokens:
+//   javascript            language (first non-flag bareword)
+//   "Tab name"            quoted name → name attribute (tabs / title bar)
+//   lines                 line numbers gutter
+//   copy                  copy button
+//   edit                  CodeJar editor
+//   collapse              collapse with default threshold (20 lines)
+//   collapse=10           collapse to first 10 lines
+//   from=#demo            pull source from referenced element
 function parseLanguageString(languageString) {
-    if (!languageString || languageString.trim() === '') {
-        return { title: null, language: null, numbers: false, copy: false };
-    }
-
-    const parts = languageString.split(/\s+/);
-
     const attributes = {
         title: null,
         language: null,
-        numbers: false,
-        copy: false
+        lines: false,
+        copy: false,
+        edit: false,
+        collapse: null,   // null = not collapsible; '' = default threshold; '10' = explicit
+        from: null
     };
+    if (!languageString || languageString.trim() === '') return attributes;
 
+    const parts = languageString.split(/\s+/);
     let i = 0;
     while (i < parts.length) {
         const part = parts[i];
 
-        // Check for attributes
-        if (part === 'numbers') {
-            attributes.numbers = true;
-            i++;
-            continue;
+        if (part === 'lines')   { attributes.lines = true;   i++; continue; }
+        if (part === 'copy')    { attributes.copy = true;    i++; continue; }
+        if (part === 'edit')    { attributes.edit = true;    i++; continue; }
+        if (part === 'collapse') { attributes.collapse = ''; i++; continue; }
+        if (part.startsWith('collapse=')) {
+            attributes.collapse = part.slice('collapse='.length).replace(/^"|"$/g, '');
+            i++; continue;
         }
-
-        if (part === 'copy') {
-            attributes.copy = true;
-            i++;
-            continue;
+        if (part.startsWith('from=')) {
+            attributes.from = part.slice('from='.length).replace(/^"|"$/g, '');
+            i++; continue;
         }
 
-        // Check for quoted names (e.g., "Example")
-        if (part.startsWith('"') && part.endsWith('"')) {
-            // Single word quoted name
+        // Quoted name handling — single-word "Foo" or multi-word "Foo Bar Baz"
+        if (part.startsWith('"') && part.endsWith('"') && part.length > 1) {
             attributes.title = part.slice(1, -1);
-            i++;
-            continue;
-        } else if (part.startsWith('"')) {
-            // Multi-word quoted name
+            i++; continue;
+        }
+        if (part.startsWith('"')) {
             let fullName = part.slice(1);
             i++;
             while (i < parts.length) {
-                const nextPart = parts[i];
-                if (nextPart.endsWith('"')) {
-                    fullName += ' ' + nextPart.slice(0, -1);
+                const next = parts[i];
+                if (next.endsWith('"')) {
+                    fullName += ' ' + next.slice(0, -1);
                     attributes.title = fullName;
                     i++;
                     break;
-                } else {
-                    fullName += ' ' + nextPart;
-                    i++;
                 }
+                fullName += ' ' + next;
+                i++;
             }
             continue;
         }
 
-        // Store language identifiers (e.g., "css", "javascript", etc.)
-        // Use the first language identifier found
-        if (!attributes.language) {
-            attributes.language = part;
-        }
+        // Unrecognized bareword → treat as language (first one wins)
+        if (!attributes.language) attributes.language = part;
         i++;
     }
 
@@ -415,7 +435,8 @@ async function initializeMarkdownPlugin() {
             // (`x-markdown.safe="$x.user.bio"`), parsed HTML is run through
             // DOMPurify before injection. Default is unsanitized — Manifest's
             // design lets authors render raw HTML and custom-element extensions
-            // (x-code, x-icon, callouts) freely. Use .safe when the markdown
+            // (x-icon, callouts) and directive attributes (x-code, etc.) freely.
+            // Use .safe when the markdown
             // source can contain content from untrusted parties (Appwrite
             // collections, API responses, crowdsourced translations, etc.).
             const safe = Array.isArray(modifiers) && modifiers.includes('safe');