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",
];