From a5dec253d2692a0160160aa7b39aa2f50e164b7f Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Thu, 17 Jul 2025 18:20:28 +0200 Subject: [PATCH] feat: support svg elements Ref https://github.com/webstudio-is/webstudio/issues/5258 Now users can create svg elements and paste svg code or html with svg. --- packages/html-data/bin/aria.ts | 8 +- packages/html-data/bin/attributes.ts | 8 +- packages/html-data/bin/crawler.ts | 28 +- packages/html-data/bin/elements.ts | 52 +- .../html-data/src/__generated__/elements.ts | 1218 +++++++++++++++-- packages/sdk/src/__generated__/tags.ts | 76 + 6 files changed, 1267 insertions(+), 123 deletions(-) diff --git a/packages/html-data/bin/aria.ts b/packages/html-data/bin/aria.ts index ed7f1f2c47f0..b886626e1b6c 100644 --- a/packages/html-data/bin/aria.ts +++ b/packages/html-data/bin/aria.ts @@ -11,7 +11,7 @@ import { } from "@webstudio-is/sdk"; import { generateWebstudioComponent } from "@webstudio-is/react-sdk"; import { - findTags, + findByTags, getAttr, getTextContent, loadPage, @@ -34,11 +34,11 @@ const overrides: Record> = { const html = await loadPage("aria1.3", "https://www.w3.org/TR/wai-aria-1.3"); const document = parseHtml(html); -const list = findTags(document, "dl").find( +const list = findByTags(document, "dl").find( (table) => getAttr(table, "id")?.value === "index_state_prop" ); -const terms = findTags(list, "dt"); -const details = findTags(list, "dd"); +const terms = findByTags(list, "dt"); +const details = findByTags(list, "dd"); const descriptions = new Map(); for (let index = 0; index < terms.length; index += 1) { const term = getTextContent(terms[index]); diff --git a/packages/html-data/bin/attributes.ts b/packages/html-data/bin/attributes.ts index 33f45d543b0b..735f26a04993 100644 --- a/packages/html-data/bin/attributes.ts +++ b/packages/html-data/bin/attributes.ts @@ -10,7 +10,7 @@ import { } from "@webstudio-is/sdk"; import { generateWebstudioComponent } from "@webstudio-is/react-sdk"; import { - findTags, + findByTags, getAttr, getTextContent, loadHtmlIndices, @@ -123,11 +123,11 @@ const overrides: Record< // Crawl WHATWG HTML. const html = await loadHtmlIndices(); const document = parseHtml(html); -const table = findTags(document, "table").find( +const table = findByTags(document, "table").find( (table) => getAttr(table, "id")?.value === "attributes-1" ); -const [tbody] = findTags(table, "tbody"); -const rows = findTags(tbody, "tr"); +const [tbody] = findByTags(table, "tbody"); +const rows = findByTags(tbody, "tr"); const attributesByTag: Record = {}; // textarea does not have value attribute and text content is used as initial value diff --git a/packages/html-data/bin/crawler.ts b/packages/html-data/bin/crawler.ts index 87536f008005..9dd3f6ed914c 100644 --- a/packages/html-data/bin/crawler.ts +++ b/packages/html-data/bin/crawler.ts @@ -13,7 +13,7 @@ type Element = DefaultTreeAdapterMap["element"]; type Attribute = Element["attrs"][number]; -export const findTags = ( +export const findByTags = ( node: undefined | Node, tagName: string, result: NodeWithChildren[] = [] @@ -23,7 +23,28 @@ export const findTags = ( result.push(node); } for (const child of node.childNodes) { - findTags(child, tagName, result); + findByTags(child, tagName, result); + } + } + return result; +}; + +export const findByClasses = ( + node: undefined | Node, + className: string, + result: NodeWithChildren[] = [] +): NodeWithChildren[] => { + if (node && "childNodes" in node) { + if ( + "tagName" in node && + node.attrs.some( + (item) => item.name === "class" && item.value === className + ) + ) { + result.push(node); + } + for (const child of node.childNodes) { + findByClasses(child, className, result); } } return result; @@ -72,3 +93,6 @@ export const loadHtmlIndices = () => "html-spec-indices", "https://html.spec.whatwg.org/multipage/indices.html" ); + +export const loadSvgSinglePage = () => + loadPage("svg-spec", "https://www.w3.org/TR/SVG11/single-page.html"); diff --git a/packages/html-data/bin/elements.ts b/packages/html-data/bin/elements.ts index 972ff0acc401..2499edd04b73 100644 --- a/packages/html-data/bin/elements.ts +++ b/packages/html-data/bin/elements.ts @@ -1,17 +1,16 @@ import { dirname } from "node:path"; import { mkdir, writeFile } from "node:fs/promises"; import { - findTags, + findByClasses, + findByTags, getTextContent, loadHtmlIndices, + loadSvgSinglePage, parseHtml, } from "./crawler"; // Crawl WHATWG HTML. -const html = await loadHtmlIndices(); -const document = parseHtml(html); - type Element = { description: string; categories: string[]; @@ -24,12 +23,15 @@ const elementsByTag: Record = {}; * scrape elements table with content model */ { - const table = findTags(document, "table").find((table) => { - const [caption] = findTags(table, "caption"); + const html = await loadHtmlIndices(); + const document = parseHtml(html); + + const table = findByTags(document, "table").find((table) => { + const [caption] = findByTags(table, "caption"); return getTextContent(caption).toLowerCase().includes("list of elements"); }); - const [tbody] = findTags(table, "tbody"); - const rows = findTags(tbody, "tr"); + const [tbody] = findByTags(table, "tbody"); + const rows = findByTags(tbody, "tr"); const parseList = (text: string) => { return text .trim() @@ -54,6 +56,7 @@ const elementsByTag: Record = {}; return item; } ); + categories.unshift("html-element"); let children = parseList(getTextContent(row.childNodes[4])); for (const tag of elements) { // textarea does not have value attribute and text content is used as initial value @@ -78,6 +81,39 @@ const elementsByTag: Record = {}; } } +{ + const svg = await loadSvgSinglePage(); + const document = parseHtml(svg); + const summaries = findByClasses(document, "element-summary"); + for (const summary of summaries) { + const [name] = findByClasses(summary, "element-summary-name").map((item) => + getTextContent(item).slice(1, -1) + ); + const children: string[] = []; + const [dl] = findByTags(summary, "dl"); + for (let index = 0; index < dl.childNodes.length; index += 1) { + const child = dl.childNodes[index]; + if (getTextContent(child).toLowerCase().includes("content model")) { + const dd = dl.childNodes[index + 1]; + for (const elementName of findByClasses(dd, "element-name")) { + children.push(getTextContent(elementName).slice(1, -1)); + } + } + } + if (elementsByTag[name]) { + console.info(`${name} element from SVG specification is skipped`); + continue; + } + const categories = name === "svg" ? ["flow", "phrasing"] : ["none"]; + categories.unshift("svg-element"); + elementsByTag[name] = { + description: "", + categories, + children, + }; + } +} + const contentModel = `type Element = { description: string; categories: string[]; diff --git a/packages/html-data/src/__generated__/elements.ts b/packages/html-data/src/__generated__/elements.ts index 14daffa58d81..180fd9c65455 100644 --- a/packages/html-data/src/__generated__/elements.ts +++ b/packages/html-data/src/__generated__/elements.ts @@ -7,78 +7,86 @@ type Element = { export const elementsByTag: Record = { a: { description: "Hyperlink", - categories: ["flow", "phrasing", "interactive", "palpable"], + categories: ["html-element", "flow", "phrasing", "interactive", "palpable"], children: ["transparent"], }, abbr: { description: "Abbreviation", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, address: { description: "Contact information for a page or article element", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, area: { description: "Hyperlink or dead area on an image map", - categories: ["flow", "phrasing"], + categories: ["html-element", "flow", "phrasing"], children: [], }, article: { description: "Self-contained syndicatable or reusable composition", - categories: ["flow", "sectioning", "palpable"], + categories: ["html-element", "flow", "sectioning", "palpable"], children: ["flow"], }, aside: { description: "Sidebar for tangentially related content", - categories: ["flow", "sectioning", "palpable"], + categories: ["html-element", "flow", "sectioning", "palpable"], children: ["flow"], }, audio: { description: "Audio player", - categories: ["flow", "phrasing", "embedded", "interactive", "palpable"], + categories: [ + "html-element", + "flow", + "phrasing", + "embedded", + "interactive", + "palpable", + ], children: ["source", "track", "transparent"], }, b: { description: "Keywords", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, base: { description: "Base URL and default target navigable for hyperlinks and forms", - categories: ["metadata"], + categories: ["html-element", "metadata"], children: [], }, bdi: { description: "Text directionality isolation", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, bdo: { description: "Text directionality formatting", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, blockquote: { description: "A section quoted from another source", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, body: { description: "Document body", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, br: { description: "Line break, e.g. in poem or postal address", - categories: ["flow", "phrasing"], + categories: ["html-element", "flow", "phrasing"], children: [], }, button: { description: "Button control", categories: [ + "html-element", "flow", "phrasing", "interactive", @@ -92,164 +100,177 @@ export const elementsByTag: Record = { }, canvas: { description: "Scriptable bitmap canvas", - categories: ["flow", "phrasing", "embedded", "palpable"], + categories: ["html-element", "flow", "phrasing", "embedded", "palpable"], children: ["transparent"], }, caption: { description: "Table caption", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, cite: { description: "Title of a work", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, code: { description: "Computer code", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, col: { description: "Table column", - categories: ["none"], + categories: ["html-element", "none"], children: [], }, colgroup: { description: "Group of columns in a table", - categories: ["none"], + categories: ["html-element", "none"], children: ["col", "template"], }, data: { description: "Machine-readable equivalent", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, datalist: { description: "Container for options for combo box control", - categories: ["flow", "phrasing"], + categories: ["html-element", "flow", "phrasing"], children: ["phrasing", "option", "script-supporting elements"], }, dd: { description: "Content for corresponding dt element(s)", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, del: { description: "A removal from the document", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["transparent"], }, details: { description: "Disclosure control for hiding details", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["summary", "flow"], }, dfn: { description: "Defining instance", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, dialog: { description: "Dialog box or window", - categories: ["flow"], + categories: ["html-element", "flow"], children: ["flow"], }, div: { description: "Generic flow container, or container for name-value groups in dl elements", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, dl: { description: "Association list consisting of zero or more name-value groups", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["dt", "dd", "div", "script-supporting elements"], }, dt: { description: "Legend for corresponding dd element(s)", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, em: { description: "Stress emphasis", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, embed: { description: "Plugin", - categories: ["flow", "phrasing", "embedded", "interactive", "palpable"], + categories: [ + "html-element", + "flow", + "phrasing", + "embedded", + "interactive", + "palpable", + ], children: [], }, fieldset: { description: "Group of form controls", - categories: ["flow", "listed", "form-associated", "palpable"], + categories: [ + "html-element", + "flow", + "listed", + "form-associated", + "palpable", + ], children: ["legend", "flow"], }, figcaption: { description: "Caption for figure", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, figure: { description: "Figure with optional caption", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["figcaption", "flow"], }, footer: { description: "Footer for a page or section", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, form: { description: "User-submittable form", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, h1: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, h2: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, h3: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, h4: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, h5: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, h6: { description: "Heading", - categories: ["flow", "heading content", "palpable"], + categories: ["html-element", "flow", "heading content", "palpable"], children: ["phrasing"], }, head: { description: "Container for document metadata", - categories: ["none"], + categories: ["html-element", "none"], children: ["metadata content"], }, header: { description: "Introductory or navigational aids for a page or section", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, hgroup: { description: "Heading container", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: [ "h1", "h2", @@ -262,27 +283,35 @@ export const elementsByTag: Record = { }, hr: { description: "Thematic break", - categories: ["flow"], + categories: ["html-element", "flow"], children: [], }, html: { description: "Root element", - categories: ["none"], + categories: ["html-element", "none"], children: ["head", "body"], }, i: { description: "Alternate voice", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, iframe: { description: "Child navigable", - categories: ["flow", "phrasing", "embedded", "interactive", "palpable"], + categories: [ + "html-element", + "flow", + "phrasing", + "embedded", + "interactive", + "palpable", + ], children: [], }, img: { description: "Image", categories: [ + "html-element", "flow", "phrasing", "embedded", @@ -295,6 +324,7 @@ export const elementsByTag: Record = { input: { description: "Form control", categories: [ + "html-element", "flow", "phrasing", "interactive", @@ -309,77 +339,78 @@ export const elementsByTag: Record = { }, ins: { description: "An addition to the document", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["transparent"], }, kbd: { description: "User input", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, label: { description: "Caption for a form control", - categories: ["flow", "phrasing", "interactive", "palpable"], + categories: ["html-element", "flow", "phrasing", "interactive", "palpable"], children: ["phrasing"], }, legend: { description: "Caption for fieldset", - categories: ["none"], + categories: ["html-element", "none"], children: ["phrasing", "heading content"], }, li: { description: "List item", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, link: { description: "Link metadata", - categories: ["metadata", "flow", "phrasing"], + categories: ["html-element", "metadata", "flow", "phrasing"], children: [], }, main: { description: "Container for the dominant contents of the document", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, map: { description: "Image map", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["transparent", "area"], }, mark: { description: "Highlight", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, menu: { description: "Menu of commands", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["li", "script-supporting elements"], }, meta: { description: "Text metadata", - categories: ["metadata", "flow", "phrasing"], + categories: ["html-element", "metadata", "flow", "phrasing"], children: [], }, meter: { description: "Gauge", - categories: ["flow", "phrasing", "labelable", "palpable"], + categories: ["html-element", "flow", "phrasing", "labelable", "palpable"], children: ["phrasing"], }, nav: { description: "Section with navigational links", - categories: ["flow", "sectioning", "palpable"], + categories: ["html-element", "flow", "sectioning", "palpable"], children: ["flow"], }, noscript: { description: "Fallback content for script", - categories: ["metadata", "flow", "phrasing"], + categories: ["html-element", "metadata", "flow", "phrasing"], children: ["varies"], }, object: { description: "Image, child navigable, or plugin", categories: [ + "html-element", "flow", "phrasing", "embedded", @@ -392,22 +423,23 @@ export const elementsByTag: Record = { }, ol: { description: "Ordered list", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["li", "script-supporting elements"], }, optgroup: { description: "Group of options in a list box", - categories: ["none"], + categories: ["html-element", "none"], children: ["option", "script-supporting elements"], }, option: { description: "Option in a list box or combo box control", - categories: ["none"], + categories: ["html-element", "none"], children: ["text"], }, output: { description: "Calculated output value", categories: [ + "html-element", "flow", "phrasing", "listed", @@ -420,72 +452,79 @@ export const elementsByTag: Record = { }, p: { description: "Paragraph", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["phrasing"], }, picture: { description: "Image", - categories: ["flow", "phrasing", "embedded", "palpable"], + categories: ["html-element", "flow", "phrasing", "embedded", "palpable"], children: ["source", "one img", "script-supporting elements"], }, pre: { description: "Block of preformatted text", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["phrasing"], }, progress: { description: "Progress bar", - categories: ["flow", "phrasing", "labelable", "palpable"], + categories: ["html-element", "flow", "phrasing", "labelable", "palpable"], children: ["phrasing"], }, q: { description: "Quotation", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, rp: { description: "Parenthesis for ruby annotation text", - categories: ["none"], + categories: ["html-element", "none"], children: ["text"], }, rt: { description: "Ruby annotation text", - categories: ["none"], + categories: ["html-element", "none"], children: ["phrasing"], }, ruby: { description: "Ruby annotation(s)", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing", "rt", "rp"], }, s: { description: "Inaccurate text", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, samp: { description: "Computer output", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, script: { description: "Embedded script", - categories: ["metadata", "flow", "phrasing", "script-supporting"], + categories: [ + "html-element", + "metadata", + "flow", + "phrasing", + "script-supporting", + ], children: ["script, data, or script documentation"], }, search: { description: "Container for search controls", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["flow"], }, section: { description: "Generic document or application section", - categories: ["flow", "sectioning", "palpable"], + categories: ["html-element", "flow", "sectioning", "palpable"], children: ["flow"], }, select: { description: "List box control", categories: [ + "html-element", "flow", "phrasing", "interactive", @@ -500,52 +539,52 @@ export const elementsByTag: Record = { }, slot: { description: "Shadow tree slot", - categories: ["flow", "phrasing"], + categories: ["html-element", "flow", "phrasing"], children: ["transparent"], }, small: { description: "Side comment", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, source: { description: "Image source for img or media source for video or audio", - categories: ["none"], + categories: ["html-element", "none"], children: [], }, span: { description: "Generic phrasing container", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, strong: { description: "Importance", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, style: { description: "Embedded styling information", - categories: ["metadata"], + categories: ["html-element", "metadata"], children: ["text"], }, sub: { description: "Subscript", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, summary: { description: "Caption for details", - categories: ["none", "interactive"], + categories: ["html-element", "none", "interactive"], children: ["phrasing", "heading content"], }, sup: { description: "Superscript", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, table: { description: "Table", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: [ "caption", "colgroup", @@ -558,22 +597,29 @@ export const elementsByTag: Record = { }, tbody: { description: "Group of rows in a table", - categories: ["none"], + categories: ["html-element", "none"], children: ["tr", "script-supporting elements"], }, td: { description: "Table cell", - categories: ["none"], + categories: ["html-element", "none"], children: ["flow"], }, template: { description: "Template", - categories: ["metadata", "flow", "phrasing", "script-supporting"], + categories: [ + "html-element", + "metadata", + "flow", + "phrasing", + "script-supporting", + ], children: [], }, textarea: { description: "Multiline text controls", categories: [ + "html-element", "flow", "phrasing", "interactive", @@ -588,62 +634,1024 @@ export const elementsByTag: Record = { }, tfoot: { description: "Group of footer rows in a table", - categories: ["none"], + categories: ["html-element", "none"], children: ["tr", "script-supporting elements"], }, th: { description: "Table header cell", - categories: ["interactive"], + categories: ["html-element", "interactive"], children: ["flow"], }, thead: { description: "Group of heading rows in a table", - categories: ["none"], + categories: ["html-element", "none"], children: ["tr", "script-supporting elements"], }, time: { description: "Machine-readable equivalent of date- or time-related data", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, title: { description: "Document title", - categories: ["metadata"], + categories: ["html-element", "metadata"], children: ["text"], }, tr: { description: "Table row", - categories: ["none"], + categories: ["html-element", "none"], children: ["th", "td", "script-supporting elements"], }, track: { description: "Timed text track", - categories: ["none"], + categories: ["html-element", "none"], children: [], }, u: { description: "Unarticulated annotation", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, ul: { description: "List", - categories: ["flow", "palpable"], + categories: ["html-element", "flow", "palpable"], children: ["li", "script-supporting elements"], }, var: { description: "Variable", - categories: ["flow", "phrasing", "palpable"], + categories: ["html-element", "flow", "phrasing", "palpable"], children: ["phrasing"], }, video: { description: "Video player", - categories: ["flow", "phrasing", "embedded", "interactive", "palpable"], + categories: [ + "html-element", + "flow", + "phrasing", + "embedded", + "interactive", + "palpable", + ], children: ["source", "track", "transparent"], }, wbr: { description: "Line breaking opportunity", - categories: ["flow", "phrasing"], + categories: ["html-element", "flow", "phrasing"], + children: [], + }, + svg: { + description: "", + categories: ["svg-element", "flow", "phrasing"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + g: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + defs: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + desc: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + symbol: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + use: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + image: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + switch: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "a", + "foreignObject", + "g", + "image", + "svg", + "switch", + "text", + "use", + ], + }, + path: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + rect: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + circle: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + ellipse: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + line: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + polyline: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + polygon: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + ], + }, + text: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "altGlyph", + "textPath", + "tref", + "tspan", + "a", + ], + }, + tspan: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "a", + "altGlyph", + "animate", + "animateColor", + "set", + "tref", + "tspan", + ], + }, + tref: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title", "animate", "animateColor", "set"], + }, + textPath: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "a", + "altGlyph", + "animate", + "animateColor", + "set", + "tref", + "tspan", + ], + }, + altGlyph: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + altGlyphDef: { + description: "", + categories: ["svg-element", "none"], + children: ["glyphRef", "altGlyphItem"], + }, + altGlyphItem: { + description: "", + categories: ["svg-element", "none"], + children: ["glyphRef"], + }, + glyphRef: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + marker: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + "color-profile": { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + linearGradient: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "animate", + "animateTransform", + "set", + "stop", + ], + }, + radialGradient: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "animate", + "animateTransform", + "set", + "stop", + ], + }, + stop: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "animateColor", "set"], + }, + pattern: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + clipPath: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "text", + "use", + ], + }, + mask: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + filter: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "feBlend", + "feColorMatrix", + "feComponentTransfer", + "feComposite", + "feConvolveMatrix", + "feDiffuseLighting", + "feDisplacementMap", + "feFlood", + "feGaussianBlur", + "feImage", + "feMerge", + "feMorphology", + "feOffset", + "feSpecularLighting", + "feTile", + "feTurbulence", + "animate", + "set", + ], + }, + feDistantLight: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + fePointLight: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feSpotLight: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feBlend: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feColorMatrix: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feComponentTransfer: { + description: "", + categories: ["svg-element", "none"], + children: ["feFuncA", "feFuncB", "feFuncG", "feFuncR"], + }, + feFuncR: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feFuncG: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feFuncB: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feFuncA: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feComposite: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feConvolveMatrix: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feDiffuseLighting: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + feDisplacementMap: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feFlood: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "animateColor", "set"], + }, + feGaussianBlur: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feImage: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "animateTransform", "set"], + }, + feMerge: { + description: "", + categories: ["svg-element", "none"], + children: ["feMergeNode"], + }, + feMergeNode: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feMorphology: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feOffset: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feSpecularLighting: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + feTile: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + feTurbulence: { + description: "", + categories: ["svg-element", "none"], + children: ["animate", "set"], + }, + cursor: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + view: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + animate: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + set: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + animateMotion: { + description: "", + categories: ["svg-element", "none"], + children: ["mpath"], + }, + mpath: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + animateColor: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + animateTransform: { + description: "", + categories: ["svg-element", "none"], + children: ["desc", "metadata", "title"], + }, + font: { + description: "", + categories: ["svg-element", "none"], + children: [ + "desc", + "metadata", + "title", + "font-face", + "glyph", + "hkern", + "missing-glyph", + "vkern", + ], + }, + glyph: { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + "missing-glyph": { + description: "", + categories: ["svg-element", "none"], + children: [ + "animate", + "animateColor", + "animateMotion", + "animateTransform", + "set", + "desc", + "metadata", + "title", + "circle", + "ellipse", + "line", + "path", + "polygon", + "polyline", + "rect", + "defs", + "g", + "svg", + "symbol", + "use", + "linearGradient", + "radialGradient", + "a", + "altGlyphDef", + "clipPath", + "color-profile", + "cursor", + "filter", + "font", + "font-face", + "foreignObject", + "image", + "marker", + "mask", + "pattern", + "script", + "style", + "switch", + "text", + "view", + ], + }, + hkern: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + vkern: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + "font-face": { + description: "", + categories: ["svg-element", "none"], + children: ["font-face-src"], + }, + "font-face-src": { + description: "", + categories: ["svg-element", "none"], + children: ["font-face-name", "font-face-uri"], + }, + "font-face-uri": { + description: "", + categories: ["svg-element", "none"], + children: ["font-face-format"], + }, + "font-face-format": { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + "font-face-name": { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + metadata: { + description: "", + categories: ["svg-element", "none"], + children: [], + }, + foreignObject: { + description: "", + categories: ["svg-element", "none"], children: [], }, }; diff --git a/packages/sdk/src/__generated__/tags.ts b/packages/sdk/src/__generated__/tags.ts index 9a23397251dd..fa8d14ea9856 100644 --- a/packages/sdk/src/__generated__/tags.ts +++ b/packages/sdk/src/__generated__/tags.ts @@ -103,4 +103,80 @@ export const tags: string[] = [ "var", "video", "wbr", + "svg", + "g", + "defs", + "desc", + "symbol", + "use", + "image", + "switch", + "path", + "rect", + "circle", + "ellipse", + "line", + "polyline", + "polygon", + "text", + "tspan", + "tref", + "textPath", + "altGlyph", + "altGlyphDef", + "altGlyphItem", + "glyphRef", + "marker", + "color-profile", + "linearGradient", + "radialGradient", + "stop", + "pattern", + "clipPath", + "mask", + "filter", + "feDistantLight", + "fePointLight", + "feSpotLight", + "feBlend", + "feColorMatrix", + "feComponentTransfer", + "feFuncR", + "feFuncG", + "feFuncB", + "feFuncA", + "feComposite", + "feConvolveMatrix", + "feDiffuseLighting", + "feDisplacementMap", + "feFlood", + "feGaussianBlur", + "feImage", + "feMerge", + "feMergeNode", + "feMorphology", + "feOffset", + "feSpecularLighting", + "feTile", + "feTurbulence", + "cursor", + "view", + "animate", + "set", + "animateMotion", + "mpath", + "animateColor", + "animateTransform", + "font", + "glyph", + "missing-glyph", + "hkern", + "vkern", + "font-face", + "font-face-src", + "font-face-uri", + "font-face-format", + "font-face-name", + "metadata", + "foreignObject", ];