@marimo-team/islands 0.17.3 → 0.17.5

package/dist/{vega-component-C58Jk3ub.js → vega-component-_Sq_uxzm.js}

@@ -25,7 +25,7 @@ import { t as useAsyncData } from "./useAsyncData-Dp2V69OV.js";
 import { n as formats } from "./vega-loader.browser-BK7-IO9k.js";
 import "./precisionRound-DMLkFNYv.js";
 import "./linear-CgANSWNu.js";
-import { t as j } from "./react-vega-B9eMrRW1.js";
+import { t as j } from "./react-vega-C3G6aCB7.js";
 import "./ordinal-pQYxWJYN.js";
 import "./time-U9NHhrDC.js";
 import "./range-sX2tw-Jz.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -168,7 +168,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.5",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "^6.4.1",
+    "vega-lite": "6.2.0",
     "vega-loader": "^5.1.0",
     "vega-parser": "^7.1.0",
     "vega-tooltip": "^1.1.0",

package/src/core/codemirror/language/__tests__/markdown.test.ts

@@ -27,8 +27,10 @@ describe("MarkdownLanguageAdapter", () => {
       const out = adapter.transformOut(innerCode, metadata);
       expect(out).toMatchInlineSnapshot(`
         [
-          "mo.md(r""" """)",
-          10,
+          "mo.md(r"""
+         
+        """)",
+          12,
         ]
       `);
     });
@@ -227,8 +229,10 @@ describe("MarkdownLanguageAdapter", () => {
     it("empty string", () => {
       const code = "";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md(""" """)`);
-      expect(offset).toBe(9);
+      expect(wrappedCode).toBe(`mo.md("""
+ 
+""")`);
+      expect(offset).toBe(11);
     });
 
     it("defaults to r-string when there is no last quote prefix", () => {
@@ -236,15 +240,19 @@ describe("MarkdownLanguageAdapter", () => {
       const code = "Hello world";
       metadata.quotePrefix = "r";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md(r"""Hello world""")`);
-      expect(offset).toBe(10);
+      expect(wrappedCode).toBe(`mo.md(r"""
+Hello world
+""")`);
+      expect(offset).toBe(12);
     });
 
     it("single line", () => {
       const code = "Hello world";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md("""Hello world""")`);
-      expect(offset).toBe(9);
+      expect(wrappedCode).toBe(`mo.md("""
+Hello world
+""")`);
+      expect(offset).toBe(11);
     });
 
     it("starts with quote", () => {
@@ -283,21 +291,36 @@ describe("MarkdownLanguageAdapter", () => {
     });
 
     it("should escape triple quotes in the Markdown code", () => {
-      const code = 'Markdown with an escaped """quote"""!!';
+      const code = 'Markdown with an escaped """quote""""!!';
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
       expect(wrappedCode).toBe(
-        `mo.md("""Markdown with an escaped \\"""quote\\"""!!""")`,
+        `mo.md("""
+Markdown with an escaped "\\""quote"\\""\\"!!
+""")`,
       );
-      expect(offset).toBe(9);
+      expect(offset).toBe(11);
+    });
+
+    it("should escape triple quotes in the Markdown code with backslash", () => {
+      const code = 'Markdown with an escaped \\"""quote\\""""!!';
+      const [wrappedCode, offset] = adapter.transformOut(code, metadata);
+      expect(wrappedCode).toBe(
+        `mo.md("""
+Markdown with an escaped \\"\\""quote\\"\\""\\"!!
+""")`,
+      );
+      expect(offset).toBe(11);
     });
 
     it("should preserve r strings", () => {
       const code = String.raw`$\nu = \mathllap{}\cdot\mathllap{\alpha}$`;
       metadata.quotePrefix = "r";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      const pythonCode = `mo.md(r"""$\\nu = \\mathllap{}\\cdot\\mathllap{\\alpha}$""")`;
+      const pythonCode = `mo.md(r"""
+$\\nu = \\mathllap{}\\cdot\\mathllap{\\alpha}$
+""")`;
       expect(wrappedCode).toBe(pythonCode);
-      expect(offset).toBe(10);
+      expect(offset).toBe(12);
     });
 
     it("should handle f-strings in transformOut", () => {

package/src/core/codemirror/language/__tests__/utils.test.ts

@@ -146,8 +146,12 @@ describe("splitEditor", () => {
       selection: { anchor: "Hello,".length },
     });
     const result = splitEditor(mockEditor);
-    expect(result.beforeCursorCode).toEqual('mo.md("""Hello,""")');
-    expect(result.afterCursorCode).toEqual('mo.md(""" World!""")');
+    expect(result.beforeCursorCode).toEqual(`mo.md("""
+Hello,
+""")`);
+    expect(result.afterCursorCode).toEqual(`mo.md("""
+ World!
+""")`);
   });
 
   // f-strings not currently supported

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-]*$/,
     },
   };

package/src/plugins/layout/TexPlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { type JSX, useLayoutEffect, useRef } from "react";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 
 import { z } from "zod";
 import { once } from "@/utils/once";
@@ -21,7 +21,10 @@ export class TexPlugin implements IStatelessPlugin<{}> {
 
   render(props: IStatelessPluginProps<{}>): JSX.Element {
     return (
-      <TexComponent tex={props.host.textContent || props.host.innerHTML} />
+      <TexComponent
+        host={props.host}
+        tex={props.host.textContent || props.host.innerHTML}
+      />
     );
   }
 }
@@ -67,8 +70,33 @@ async function renderLatex(mount: HTMLElement, tex: string): Promise<void> {
   }
 }
 
-const TexComponent = ({ tex }: { tex: string }): JSX.Element => {
+const TexComponent = ({
+  host,
+  tex,
+}: {
+  host: HTMLElement;
+  tex: string;
+}): JSX.Element => {
   const ref = useRef<HTMLSpanElement>(null);
+  const [currentTex, setCurrentTex] = useState(tex);
+
+  // Watch for changes to the host element's direct children
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(() => {
+      const newTex = host.textContent || host.innerHTML;
+      setCurrentTex(newTex);
+    });
+
+    observer.observe(host, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [host]);
 
   // The arithmatex markdown extension we use in Python produces nested
   // marimo-tex tags when $$...$$ math is used in a paragraph, with dummy
@@ -94,9 +122,9 @@ const TexComponent = ({ tex }: { tex: string }): JSX.Element => {
   // Re-render when the text content changes.
   useLayoutEffect(() => {
     if (ref.current) {
-      renderLatex(ref.current, tex);
+      renderLatex(ref.current, currentTex);
     }
-  }, [tex]);
+  }, [currentTex]);
 
   return <span ref={ref} />;
 };