@webround/editor 0.3.13 → 0.3.14

package/dist/check/producer-code.js

@@ -225,7 +225,7 @@ function fromJsx(el, config, file, options) {
     const children = el.isKind(SyntaxKind.JsxElement) ? nodesUnder(el, config, file, options) : [];
     // Plain components we know nothing about (`<Card>`) are only transparent: what they hold is what counts. A shared one is entered: what it renders is part of the page
     if (!wrKind && /^[A-Z]/.test(name))
-        return [...sharedNodesOf(el, name, options), ...children];
+        return [...sharedNodesOf(el, name, options), ...children].map(node => ({ ...node, viaComponent: true }));
     const attrs = {};
     const alt = inLang(json.alt, options) ?? str(attrOf(el, 'alt'));
     if (alt !== undefined)

package/dist/check/rules.js

@@ -49,6 +49,35 @@ export const RULES = [
                 report(null, `${problem.message} (${problem.file}:${problem.line})`);
         },
     },
+    {
+        name: 'html-structure',
+        severity: 'warning',
+        run(page, report) {
+            // What a tag may hold directly, and what it must sit in: the HTML content model, for the tags a WrSection can be. A node under a component
+            // we do not read (`viaComponent`) is not judged: that component may draw the list around it.
+            const OWN_CHILDREN = { ul: ['li'], ol: ['li'], menu: ['li'] };
+            const MUST_SIT_IN = { li: ['ul', 'ol', 'menu'], dt: ['dl', 'div'], dd: ['dl', 'div'], figcaption: ['figure'], summary: ['details'] };
+            const INTERACTIVE = new Set(['a', 'button']);
+            const visit = (node, parent, interactive) => {
+                if (!node.viaComponent) {
+                    const allowed = parent ? OWN_CHILDREN[parent.tag] : undefined;
+                    if (parent && allowed && !allowed.includes(node.tag))
+                        report(node, `A <${node.tag}> inside a <${parent.tag}>: a list holds only <${allowed.join('>, <')}>.`);
+                    const sits = MUST_SIT_IN[node.tag];
+                    if (parent && sits && !sits.includes(parent.tag) && !parent.children.some(c => c.viaComponent))
+                        report(node, `A <${node.tag}> must be inside ${sits.map(t => `a <${t}>`).join(' or ')}, not a <${parent.tag}>.`);
+                }
+                // Links and buttons cannot hold each other: a browser repairs it in a way that breaks the page
+                if (INTERACTIVE.has(node.tag) && interactive && !node.attrs['{spread}'])
+                    report(node, `A <${node.tag}> inside a <${interactive.tag}>: an interactive element cannot hold another.`);
+                const next = INTERACTIVE.has(node.tag) ? node : interactive;
+                for (const child of node.children)
+                    visit(child, node, next);
+            };
+            for (const node of page.nodes)
+                visit(node, null, null);
+        },
+    },
     {
         name: 'img-alt',
         severity: 'warning',

package/dist/check/types.d.ts

@@ -26,6 +26,8 @@ export interface CheckNode {
         key: string;
         side: string;
     }[];
+    /** Only the code producer says it: the node sits under a component we do not read (`<Card>`), so what is around it may be drawn by that component; the nesting rules do not judge it. */
+    viaComponent?: true;
     /** Shown as hidden in the JSON: the checks do not count it (it does not render), an outline says so. */
     hidden?: true;
     /** What the element says in each language, for the fields that are translated (`content`, `alt`, `ariaLabel`): field → language key → value. */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webround/editor",
-    "version": "0.3.13",
+    "version": "0.3.14",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -75,7 +75,7 @@
         "@lexical/selection": "^0.51.0",
         "@lexical/utils": "^0.51.0",
         "@monaco-editor/react": "^4.7.0",
-        "@webround/core": "^0.3.13",
+        "@webround/core": "^0.3.14",
         "highlight.js": "^11.12.0",
         "hls.js": "^1.5.0",
         "lexical": "^0.51.0",