Răsfoiți Sursa

fix bug for drawioUri

Yuki Takei 8 luni în urmă
părinte
comite
847cdf29f9

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

@@ -3,7 +3,7 @@ import { useCallback, type JSX } from 'react';
 import type { IGraphViewerGlobal } from '@growi/remark-drawio';
 import type { IGraphViewerGlobal } from '@growi/remark-drawio';
 import Head from 'next/head';
 import Head from 'next/head';
 
 
-import { useViewerMinJsUrl } from './use-viewer-min-js-url';
+import { generateViewerMinJsUrl } from './use-viewer-min-js-url';
 
 
 declare global {
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
   // eslint-disable-next-line vars-on-top, no-var
@@ -15,8 +15,6 @@ type Props = {
 }
 }
 
 
 export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
 export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
-  const viewerMinJsSrc = useViewerMinJsUrl(drawioUri);
-
   const loadedHandler = useCallback(() => {
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState
     // disable useResizeSensor and checkVisibleState
     //   for preventing resize event by viewer-static.min.js
     //   for preventing resize event by viewer-static.min.js
@@ -36,6 +34,13 @@ export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
     GraphViewer.processElements();
     GraphViewer.processElements();
   }, []);
   }, []);
 
 
+  // Return empty element if drawioUri is not provided to avoid Invalid URL error
+  if (!drawioUri) {
+    return <></>;
+  }
+
+  const viewerMinJsSrc = generateViewerMinJsUrl(drawioUri);
+
   return (
   return (
     <Head>
     <Head>
       <script
       <script

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

@@ -1,6 +1,6 @@
 import urljoin from 'url-join';
 import urljoin from 'url-join';
 
 
-export const useViewerMinJsUrl = (drawioUri: string): string => {
+export const generateViewerMinJsUrl = (drawioUri: string): string => {
   // extract search from URL
   // extract search from URL
   const url = new URL(drawioUri);
   const url = new URL(drawioUri);
   const pathname = urljoin(url.pathname, '/js/viewer-static.min.js');
   const pathname = urljoin(url.pathname, '/js/viewer-static.min.js');

+ 6 - 5
apps/app/src/pages/[[...path]].page.tsx

@@ -238,16 +238,17 @@ const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
   return <BasicLayoutWithEditor>{children}</BasicLayoutWithEditor>;
   return <BasicLayoutWithEditor>{children}</BasicLayoutWithEditor>;
 };
 };
 
 
-let drawioUri = '';
 Page.getLayout = function getLayout(page: React.ReactElement<Props>) {
 Page.getLayout = function getLayout(page: React.ReactElement<Props>) {
-  if (isInitialProps(page.props)) {
-    drawioUri = page.props.rendererConfig.drawioUri;
-  }
+  // Get drawioUri from rendererConfig atom to ensure consistency across navigations
+  const DrawioViewerScriptWithAtom = (): JSX.Element => {
+    const [rendererConfig] = useRendererConfig();
+    return <DrawioViewerScript drawioUri={rendererConfig.drawioUri} />;
+  };
 
 
   return (
   return (
     <>
     <>
       <GrowiPluginsActivator />
       <GrowiPluginsActivator />
-      <DrawioViewerScript drawioUri={drawioUri} />
+      <DrawioViewerScriptWithAtom />
 
 
       <Layout {...page.props}>
       <Layout {...page.props}>
         {page}
         {page}