Merge pull request #7515 from weseek/fix/support-drawio-21.1.0

fix: Support draw.io v21.1.0 (support both of compressed/uncompressed data)

packages/app/src/components/PageEditor/DrawioCommunicationHelper.ts

@@ -1,5 +1,3 @@
-import { extractCodeFromMxfile } from '@growi/remark-drawio';
-
 import loggerFactory from '~/utils/logger';
 
 
@@ -63,16 +61,7 @@ export class DrawioCommunicationHelper {
 
     // restore diagram data
     if (event.data === 'ready') {
-      let code = drawioMxFile;
-      try {
-        code = extractCodeFromMxfile(drawioMxFile);
-      }
-      // catch error if drawioMxFile is not XML
-      catch (err) {
-        // do nothing because drawioMxFile might be base64 code
-      }
-
-      event.source?.postMessage(code, { targetOrigin: '*' });
+      event.source?.postMessage(drawioMxFile, { targetOrigin: '*' });
       return;
     }
 

packages/app/src/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -4,7 +4,7 @@ import EventEmitter from 'events';
 
 import {
   DrawioEditByViewerProps,
-  DrawioViewer, DrawioViewerProps, extractCodeFromMxfile,
+  DrawioViewer, DrawioViewerProps,
 } from '@growi/remark-drawio';
 import { useTranslation } from 'next-i18next';
 
@@ -33,7 +33,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
 
   const editButtonClickHandler = useCallback(() => {
     const data: DrawioEditByViewerProps = {
-      bol, eol, drawioMxFile: extractCodeFromMxfile(mxfile),
+      bol, eol, drawioMxFile: mxfile,
     };
     globalEmitter.emit('launchDrawioModal', data);
   }, [bol, eol, mxfile]);

packages/app/src/components/Script/DrawioViewerScript.tsx

@@ -3,12 +3,16 @@ import { useCallback } from 'react';
 import type { IGraphViewerGlobal } from '@growi/remark-drawio';
 import Script from 'next/script';
 
+import { useDrawioUri } from '~/stores/context';
+
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
   var GraphViewer: IGraphViewerGlobal;
 }
 
 export const DrawioViewerScript = (): JSX.Element => {
+  const { data: drawioUri } = useDrawioUri();
+
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState
     //   for preventing resize event by viewer.min.js
@@ -31,7 +35,7 @@ export const DrawioViewerScript = (): JSX.Element => {
   return (
     <Script
       type="text/javascript"
-      src="https://www.draw.io/js/viewer.min.js"
+      src={(new URL('/js/viewer.min.js', drawioUri)).hash.toString()}
       onLoad={loadedHandler}
     />
   );

packages/remark-drawio/src/utils/embed.ts

@@ -2,21 +2,13 @@
 import pako from 'pako';
 import xmldoc from 'xmldoc';
 
-export const extractCodeFromMxfile = (input: string): string => {
-  const doc = new xmldoc.XmlDocument(input);
-  return doc.valueWithPath('diagram');
+const validateUncompressedData = (input: string): boolean => {
+  return new RegExp('/<mxGraphModel/').test(input);
 };
 
-const validateInputData = (input: string): boolean => {
+const validateCompressedData = (input: string): boolean => {
   let data = input;
 
-  try {
-    data = extractCodeFromMxfile(data);
-  }
-  catch (e) {
-    // ignore
-  }
-
   try {
     data = Buffer.from(data, 'base64').toString('binary');
   }
@@ -65,27 +57,20 @@ export const generateMxgraphData = (code: string): string => {
     return '';
   }
 
-  validateInputData(trimedCode);
-
-  let xml;
-  try {
-    // may be XML Format <mxfile><diagram> ... </diagram></mxfile>
-    const doc = new xmldoc.XmlDocument(trimedCode);
-    const diagram = doc.valueWithPath('diagram');
-    if (diagram) {
-      xml = trimedCode;
-    }
-  }
-  catch (e) {
-    // may be NOT XML Format
-    xml = `
-<mxfile version="6.8.9" editor="www.draw.io" type="atlas">
-  <mxAtlasLibraries/>
-  <diagram>${trimedCode}</diagram>
-</mxfile>
-`;
+  // Evaluate the code is whether uncompressed data that are generated by v21.1.0 or above
+  // see: https://github.com/jgraph/drawio/issues/3106#issuecomment-1479352026
+  const isUncompressedData = validateUncompressedData(trimedCode);
+  if (isUncompressedData) {
+    validateCompressedData(trimedCode);
   }
 
+  const xml = `
+    <mxfile version="6.8.9" editor="www.draw.io" type="atlas">
+      <mxAtlasLibraries/>
+      <diagram>${isUncompressedData ? xmldoc.XmlDocument(trimedCode) : trimedCode}</diagram>
+    </mxfile>
+  `;
+
   // see options: https://drawio.freshdesk.com/support/solutions/articles/16000042542-embed-html
   const mxGraphData = {
     editable: false,