switch show/hide button

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { DrawioViewer, DrawioViewerProps } from '@growi/remark-drawio-plugin';
 import { useTranslation } from 'next-i18next';
@@ -8,32 +8,44 @@ import { useIsGuestUser, useIsSharedUser } from '~/stores/context';
 import NotAvailableForGuest from '../NotAvailableForGuest';
 
 
+import styles from './DrawioViewerWithEditButton.module.scss';
+
+
 export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps): JSX.Element => {
   const { t } = useTranslation();
 
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isSharedUser } = useIsSharedUser();
 
-  const editButtonClickHandler = useCallback(() => {
+  const [isMounted, setMounted] = useState(false);
 
+  const editButtonClickHandler = useCallback(() => {
   }, []);
 
-  const renderingUpdatedHandler = useCallback(() => {
+  const renderingStartHandler = useCallback(() => {
+    setMounted(false);
+  }, []);
 
+  const renderingUpdatedHandler = useCallback((hasError: boolean) => {
+    setMounted(!hasError);
   }, []);
 
-  const showEditButton = !isGuestUser && !isSharedUser;
+  const showEditButton = isMounted && !isGuestUser && !isSharedUser;
 
   return (
-    <div>
+    <div className={`drawio-viewer-with-edit-button ${styles['drawio-viewer-with-edit-button']}`}>
       { showEditButton && (
         <NotAvailableForGuest>
-          <button type="button" className="drawio-iframe-trigger position-absolute btn btn-outline-secondary" onClick={editButtonClickHandler}>
+          <button
+            type="button"
+            className="btn btn-outline-secondary btn-edit-drawio"
+            onClick={editButtonClickHandler}
+          >
             <i className="icon-note mr-1"></i>{t('Edit')}
           </button>
         </NotAvailableForGuest>
       ) }
-      <DrawioViewer {...props} onRenderingUpdated={renderingUpdatedHandler} />
+      <DrawioViewer {...props} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />
     </div>
   );
 });

packages/remark-drawio-plugin/src/components/DrawioViewer.tsx

@@ -23,12 +23,14 @@ export type DrawioViewerProps = {
   bol?: number,
   eol?: number,
   children?: ReactNode,
+  onRenderingStart?: () => void,
   onRenderingUpdated?: (hasError: boolean) => void,
 }
 
 export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element => {
   const {
     diagramIndex, bol, eol, children,
+    onRenderingStart, onRenderingUpdated,
   } = props;
 
   const drawioContainerRef = useRef<HTMLDivElement>(null);
@@ -60,15 +62,17 @@ export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element =
         }
         catch (err) {
           setError(err);
+          onRenderingUpdated?.(true);
         }
       }
     }
-  }, [drawioContainerRef]);
+  }, [onRenderingUpdated]);
 
   const renderDrawioWithDebounce = useMemo(() => debounce(200, renderDrawio), [renderDrawio]);
 
   const mxgraphHtml = useMemo(() => {
     setError(undefined);
+    onRenderingStart?.();
 
     if (children == null) {
       return '';
@@ -81,13 +85,15 @@ export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element =
     let mxgraphData;
     try {
       mxgraphData = generateMxgraphData(code);
+      onRenderingUpdated?.(false);
     }
     catch (err) {
       setError(err);
+      onRenderingUpdated?.(true);
     }
 
     return `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
-  }, [children]);
+  }, [children, onRenderingStart, onRenderingUpdated]);
 
   useEffect(() => {
     if (mxgraphHtml.length > 0) {