MarkdownText: Support images

packages/visualizations-react/stories/Map/data.ts

@@ -22,8 +22,8 @@ export const dataReg: ChoroplethDataValue[] = [
 ];
 
 export const shapesTiles: ChoroplethShapeVectorTilesValue = {
-    url: 'https://static.opendatasoft.com/vector-tiles/fr_40_region_2021/{z}/{x}/{y}.pbf',
-    layer: 'fr_40_region_2021',
+    url: 'https://static.opendatasoft.com/vector-tiles/fr_40_region_2024/{z}/{x}/{y}.pbf',
+    layer: 'fr_40_region_2024',
     key: 'reg_code',
     label: 'reg_code',
 };

packages/visualizations-react/stories/MarkdownText.stories.tsx

@@ -59,3 +59,16 @@ Link.args = {
     },
     options: {},
 };
+
+export const Image = Template.bind({});
+Image.args = {
+    data: {
+        value: `
+        I'd like to show an image:
+        ![My image](https://hub.huwise.com/static/ods/imgv4/huwise-black.svg "Huwise logo")
+
+        Thanks!
+        `,
+    },
+    options: {},
+};

packages/visualizations-react/test/MarkdownText.test.tsx

@@ -10,19 +10,22 @@ describe('MarkdownText', () => {
     });
 
     it('renders markdown supported syntax', () => {
-        const { getByText, queryByText } = render(
-            <MarkdownText options={{}} data={{ value: '**Bold**' }} />
+        const { getByText, queryByText, getByRole } = render(
+            <MarkdownText options={{}} data={{ value: '**Bold**\n\n![alt text](image.jpg)' }} />
         );
 
+        // Bold
         getByText('Bold');
         expect(queryByText('**Bold**')).not.toBeInTheDocument();
+
+        // Image
+        getByRole('img', { name: 'alt text' });
+        expect(queryByText('[alt text]')).not.toBeInTheDocument();
     });
 
     it("doesn't transform unsupported syntax", () => {
-        const value =
-            'Hello <strong>bold</strong>\n\n```code```\n\n`inline`\n\n' +
-            '![alt text](image.jpg)\n\n~~strikethrough~~';
-        const { getByText, getByRole } = render(<MarkdownText options={{}} data={{ value }} />);
+        const value = 'Hello <strong>bold</strong>\n\n```code```\n\n`inline`\n\n~~strikethrough~~';
+        const { getByText } = render(<MarkdownText options={{}} data={{ value }} />);
 
         // HTML should be kept as-is (and encoded)
         getByText('Hello <strong>bold</strong>');
@@ -31,9 +34,6 @@ describe('MarkdownText', () => {
         getByText('```code```');
         getByText('`inline`');
 
-        // Image (should be parsed as a link, not as an image tag)
-        getByRole('link', { name: 'alt text' });
-
         // Strikethrough
         getByText('~~strikethrough~~');
     });

packages/visualizations/package.json

@@ -103,7 +103,7 @@
         "lodash": "^4.17.21",
         "luxon": "^2.5.0",
         "maplibre-gl": "^3.6.2",
-        "markdown-it": "^12.0.4",
+        "markdown-it": "14.1.0",
         "markdown-it-link-attributes": "^3.0.0",
         "markdown-it-mark": "^3.0.1",
         "sass": "^1.70.0",

packages/visualizations/src/components/MarkdownText/MarkdownText.svelte

@@ -43,6 +43,7 @@
         })
         .enable([
             'hr',
+            'image',
             'list',
             'heading',
             'emphasis', // bold & italic