Просмотр исходного кода

Merge pull request #8878 from weseek/imprv/drawio-basepath

imprv: DrawioViewerScript should respect the base path in DRAWIO_URI
Yuki Takei 1 год назад
Родитель
Сommit
e477cf544e

+ 3 - 7
apps/app/src/components/Script/DrawioViewerScript.tsx → apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import type { IGraphViewerGlobal } from '@growi/remark-drawio';
 import Head from 'next/head';
 
-import { useRendererConfig } from '~/stores/context';
+import { useViewerMinJsUrl } from './use-viewer-min-js-url';
 
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
@@ -11,7 +11,7 @@ declare global {
 }
 
 export const DrawioViewerScript = (): JSX.Element => {
-  const { data: rendererConfig } = useRendererConfig();
+  const viewerMinJsSrc = useViewerMinJsUrl();
 
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState
@@ -32,16 +32,12 @@ export const DrawioViewerScript = (): JSX.Element => {
     GraphViewer.processElements();
   }, []);
 
-  if (rendererConfig == null) {
-    return <></>;
-  }
-
   return (
     <Head>
       <script
         type="text/javascript"
         async
-        src={(new URL('/js/viewer.min.js', rendererConfig.drawioUri)).toString()}
+        src={viewerMinJsSrc}
         onLoad={loadedHandler}
       />
     </Head>

+ 1 - 0
apps/app/src/components/Script/DrawioViewerScript/index.ts

@@ -0,0 +1 @@
+export * from './DrawioViewerScript';

+ 46 - 0
apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.spec.ts

@@ -0,0 +1,46 @@
+import { useViewerMinJsUrl } from './use-viewer-min-js-url';
+
+const mocks = vi.hoisted(() => {
+  return {
+    useRendererConfigMock: vi.fn(),
+  };
+});
+
+vi.mock('~/stores/context', () => ({
+  useRendererConfig: mocks.useRendererConfigMock,
+}));
+
+describe('useViewerMinJsUrl', () => {
+  it('should return the URL when rendererConfig is undefined', () => {
+    // Arrange
+    mocks.useRendererConfigMock.mockImplementation(() => {
+      return { data: undefined };
+    });
+
+    // Act
+    const url = useViewerMinJsUrl();
+
+    // Assert
+    expect(url).toBe('http://localhost/js/viewer.min.js');
+  });
+
+  it.each`
+    drawioUri                                     | expected
+    ${undefined}                                  | ${'http://localhost/js/viewer.min.js'}
+    ${'http://localhost:8080'}                    | ${'http://localhost:8080/js/viewer.min.js'}
+    ${'http://example.com'}                       | ${'http://example.com/js/viewer.min.js'}
+    ${'http://example.com/drawio'}                | ${'http://example.com/drawio/js/viewer.min.js'}
+    ${'http://example.com/?offline=1&https=0'}    | ${'http://example.com/js/viewer.min.js?offline=1&https=0'}
+  `('should return the expected URL "$expected" when drawioUri is "$drawioUrk"', ({ drawioUri, expected }: {drawioUri: string|undefined, expected: string}) => {
+    // Arrange
+    mocks.useRendererConfigMock.mockImplementation(() => {
+      return { data: { drawioUri } };
+    });
+
+    // Act
+    const url = useViewerMinJsUrl();
+
+    // Assert
+    expect(url).toBe(expected);
+  });
+});

+ 15 - 0
apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.ts

@@ -0,0 +1,15 @@
+import urljoin from 'url-join';
+
+import { useRendererConfig } from '~/stores/context';
+
+export const useViewerMinJsUrl = (): string => {
+  const { data: rendererConfig } = useRendererConfig();
+
+  const { drawioUri: _drawioUriStr = 'http://localhost' } = rendererConfig ?? {};
+
+  // extract search from URL
+  const drawioUri = new URL(_drawioUriStr);
+  const pathname = urljoin(drawioUri.pathname, '/js/viewer.min.js');
+
+  return `${drawioUri.origin}${pathname}${drawioUri.search}`;
+};