fix: add more insert edge cases

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

@@ -13,7 +13,7 @@ test("flow accepts flow", () => {
     isTreeSatisfyingContentModel({
       ...renderData(
         <$.Body ws:id="bodyId">
-          <$.Box ws:id="divId"></$.Box>
+          <$.Box ws:id="articleId" tag="article"></$.Box>
         </$.Body>
       ),
       metas: defaultMetas,
@@ -114,7 +114,7 @@ test("transparent category accepts flow", () => {
       ...renderData(
         <$.Body ws:id="bodyId">
           <$.Link ws:id="linkId">
-            <$.Box ws:id="divId"></$.Box>
+            <$.Box ws:id="articleId" tag="article"></$.Box>
           </$.Link>
         </$.Body>
       ),
@@ -162,7 +162,7 @@ test("transparent category should pass through phrasing category and forbid flow
         <$.Body ws:id="bodyId">
           <$.Box ws:id="spanId" tag="span">
             <$.Link ws:id="linkId">
-              <$.Box ws:id="divId"></$.Box>
+              <$.Box ws:id="articleId" tag="article"></$.Box>
             </$.Link>
           </$.Box>
         </$.Body>
@@ -213,7 +213,7 @@ test("transparent category should pass through category when check deep in the t
         <$.Body ws:id="bodyId">
           <$.Box ws:id="spanId" tag="span">
             <$.Link ws:id="linkId">
-              <$.Box ws:id="divId"></$.Box>
+              <$.Box ws:id="articleId" tag="article"></$.Box>
             </$.Link>
           </$.Box>
         </$.Body>
@@ -308,14 +308,14 @@ test("prevent nesting interactive instances when check deep in the tree", () =>
       ...renderData(
         <$.Body ws:id="bodyId">
           <$.Button ws:id="buttonId">
-            <$.Box ws:id="divId">
+            <$.Box ws:id="spanId" tag="span">
               <$.Link ws:id="linkId"></$.Link>
             </$.Box>
           </$.Button>
         </$.Body>
       ),
       metas: defaultMetas,
-      instanceSelector: ["linkId", "divId", "buttonId", "bodyId"],
+      instanceSelector: ["linkId", "spanId", "buttonId", "bodyId"],
     })
   ).toBeFalsy();
 });
@@ -385,3 +385,35 @@ test("edge case: allow wrapping input with label", () => {
     })
   ).toBeFalsy();
 });
+
+test("edge case: allow inserting div where phrasing is required", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <$.Body ws:id="bodyId">
+          <$.Button>
+            <$.Box></$.Box>
+          </$.Button>
+        </$.Body>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});
+
+test("edge case: support a > img", () => {
+  expect(
+    isTreeSatisfyingContentModel({
+      ...renderData(
+        <$.Body ws:id="bodyId">
+          <$.Link>
+            <$.Image />
+          </$.Link>
+        </$.Body>
+      ),
+      metas: defaultMetas,
+      instanceSelector: ["bodyId"],
+    })
+  ).toBeTruthy();
+});

apps/builder/app/shared/content-model.ts

@@ -34,6 +34,15 @@ const isIntersected = (arrayA: string[], arrayB: string[]) => {
   return arrayA.some((item) => arrayB.includes(item));
 };
 
+/**
+ * checks if tag has interactive category
+ * though img is an exception and historically its interactivity ignored
+ * so img can be put into links and buttons
+ */
+const isTagInteractive = (tag: string) => {
+  return tag !== "img" && categoriesByTag[tag].includes("interactive");
+};
+
 const isTagSatisfyingContentModel = ({
   tag,
   allowedCategories,
@@ -53,16 +62,19 @@ const isTagSatisfyingContentModel = ({
   if (allowedCategories.includes(tag)) {
     return true;
   }
+  // very big hack to support putting div into buttons or headings
+  // users put "Embed HTML" all over the place to embed icons
+  // radix templates do it as well
+  if (allowedCategories.includes("phrasing") && tag === "div") {
+    return true;
+  }
   // instance does not match parent constraints
   if (isIntersected(allowedCategories, categoriesByTag[tag]) === false) {
     return false;
   }
   // prevent nesting interactive elements
   // like button > button or a > input
-  if (
-    allowedCategories.includes("non-interactive") &&
-    categoriesByTag[tag].includes("interactive")
-  ) {
+  if (allowedCategories.includes("non-interactive") && isTagInteractive(tag)) {
     // interactive exception, label > input is not recommended but a popular case
     // to automatically focus input when click on label text without using id
     if (allowedCategories.includes("label-content") && tag === "input") {
@@ -96,8 +108,7 @@ const getTagChildrenCategories = (
   // like button > button or a > input
   if (
     tag &&
-    (categoriesByTag[tag].includes("interactive") ||
-      allowedCategories?.includes("non-interactive"))
+    (isTagInteractive(tag) || allowedCategories?.includes("non-interactive"))
   ) {
     childrenCategories = [...childrenCategories, "non-interactive"];
   }