@marimo-team/islands 0.17.3 → 0.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/css/md.css

@@ -78,8 +78,14 @@ a .markdown iconify-icon:first-child {
   margin-inline-end: 0.4em;
 }
 
+iconify-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
 /* align icons with buttons better */
 button .markdown .paragraph {
+  display: inline-flex;
   align-items: baseline;
   gap: 0.4em;
 

package/src/plugins/core/__test__/sanitize.test.ts

@@ -462,4 +462,31 @@ describe("sanitizeHtml", () => {
       `"<details><summary>Click me</summary><p>Hidden content</p></details>"`,
     );
   });
+
+  test("preserves iconify-icon custom element", () => {
+    const html = '<iconify-icon icon="lucide:leaf"></iconify-icon>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:leaf"></iconify-icon>"`,
+    );
+  });
+
+  test("preserves iconify-icon with all attributes", () => {
+    const html =
+      '<iconify-icon icon="lucide:rocket" width="24px" height="24px" inline="" flip="horizontal" rotate="90deg" style="color: blue;"></iconify-icon>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:rocket" width="24px" height="24px" inline="" flip="horizontal" rotate="90deg" style="color: blue;"></iconify-icon>"`,
+    );
+  });
+
+  test("preserves self-closing iconify-icon", () => {
+    const html = '<iconify-icon icon="lucide:star" />';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:star"></iconify-icon>"`,
+    );
+  });
+
+  test("still removes other non-marimo/non-iconify custom elements", () => {
+    const html = "<some-custom-element>Content</some-custom-element>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"Content"`);
+  });
 });

package/src/plugins/core/sanitize.ts

@@ -75,7 +75,7 @@ export function sanitizeHtml(html: string) {
     // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
     FORCE_BODY: true,
     CUSTOM_ELEMENT_HANDLING: {
-      tagNameCheck: /^marimo-[A-Za-z][\w-]*$/,
+      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
       attributeNameCheck: /^[A-Za-z][\w-]*$/,
     },
   };