Added .vsdx example

Author: Marc Veens

public/mydrawio.vsdx

@@ -65,6 +65,23 @@ export const WithRemotePng: Story = {
   args: {}
 };
 
+export const WithRemoteVsdx: Story = {
+  decorators: [
+    (Story) => {
+      const { inputXml, urlToBase64 } = useRemoteFile();
+
+      useEffect(() => {
+        urlToBase64('/mydrawio.vsdx', {
+          isVisio: true
+        });
+      }, []);
+
+      return <Story args={{ xml: inputXml }} />;
+    }
+  ],
+  args: {}
+};
+
 export const WithConfigurations: Story = {
   args: {
     xml: '<mxfile host="embed.diagrams.net" modified="2023-08-27T13:33:23.800Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36" version="21.6.9" etag="xthbfrarG6SmZwCYJPbt" type="embed"><diagram id="kaqXdMjmixOsNJA9w4jU" name="Page-1"><mxGraphModel dx="314" dy="361" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"><root><mxCell id="0" /><mxCell id="1" parent="0" /><mxCell id="2" value="" style="shape=cube;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;darkOpacity=0.05;darkOpacity2=0.1;fillColor=#99FFFF;strokeColor=#0066CC;" vertex="1" parent="1"><mxGeometry x="110" y="150" width="120" height="80" as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>',

stories/DiagramsEmbed.stories.tsx

@@ -1,22 +1,28 @@
 import { useState } from 'react';
 
+type UrlToBase64Options = {
+  isVisio?: boolean;
+};
+
 export const useRemoteFile = () => {
   const [inputXml, setInputXml] = useState<string>('');
 
-  const urlToBase64 = async (url: string) => {
+  const urlToBase64 = async (url: string, options?: UrlToBase64Options) => {
     const data = await fetch(url);
 
-    console.log(data);
-
     if (data) {
       const blob = await data.blob();
 
       const reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onloadend = () => {
-        const base64data = reader.result;
+        let base64data = (reader.result || '') as string;
+
+        if (options?.isVisio) {
+          base64data = base64data.replace('data:application/octet-stream;base64', 'data:application/vnd.visio;base64');
+        }
 
-        setInputXml(base64data as string);
+        setInputXml(base64data);
       };
     }
   };