fix: properly support details and summary elements (#5285)

This fixes headings inside of summary and interactive elements inside of
details content.

Author: TrySound

apps/builder/app/shared/content-model.test.tsx

@@ -521,6 +521,40 @@ test("support xml node with tags", () => {
   ).toBeTruthy();
 });
 
+test("support headings inside of summary", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <ws.element ws:tag="body" ws:id="bodyId">
+          <ws.element ws:tag="details">
+            <ws.element ws:tag="summary">
+              <ws.element ws:tag="h3"></ws.element>
+            </ws.element>
+          </ws.element>
+        </ws.element>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});
+
+test("support links inside of details", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <ws.element ws:tag="body" ws:id="bodyId">
+          <ws.element ws:tag="details">
+            <ws.element ws:tag="a"></ws.element>
+          </ws.element>
+        </ws.element>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});
+
 describe("component content model", () => {
   test("restrict children with specific component", () => {
     expect(

packages/html-data/bin/elements.ts

@@ -45,14 +45,30 @@ const elementsByTag: Record<string, Element> = {};
         return !tag.includes(" ");
       });
     const description = getTextContent(row.childNodes[1]);
-    const categories = parseList(getTextContent(row.childNodes[2]));
+    let categories = parseList(getTextContent(row.childNodes[2])).map(
+      (item) => {
+        if (item === "heading") {
+          // legend and summary refer to it as heading content
+          return "heading content";
+        }
+        return item;
+      }
+    );
     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
       // introduce fake value attribute to manage initial state similar to input
       if (tag === "textarea") {
         children = [];
       }
+      // move interactive category from details to summary
+      // so details content could accept other interactive elements
+      if (tag === "details") {
+        categories = categories.filter((item) => item !== "interactive");
+      }
+      if (tag === "summary") {
+        categories.push("interactive");
+      }
       elementsByTag[tag] = {
         description,
         categories,