WIP: impl DrawioViewerWithEditButton

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+
+import { DrawioViewer, DrawioViewerProps } from '@growi/remark-drawio-plugin';
+import { useTranslation } from 'next-i18next';
+
+import { useIsGuestUser, useIsSharedUser } from '~/stores/context';
+
+import NotAvailableForGuest from '../NotAvailableForGuest';
+
+
+export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { data: isGuestUser } = useIsGuestUser();
+  const { data: isSharedUser } = useIsSharedUser();
+
+  const editButtonClickHandler = useCallback(() => {
+
+  }, []);
+
+  const renderingUpdatedHandler = useCallback(() => {
+
+  }, []);
+
+  const showEditButton = !isGuestUser && !isSharedUser;
+
+  return (
+    <div>
+      { showEditButton && (
+        <NotAvailableForGuest>
+          <button type="button" className="drawio-iframe-trigger position-absolute btn btn-outline-secondary" onClick={editButtonClickHandler}>
+            <i className="icon-note mr-1"></i>{t('Edit')}
+          </button>
+        </NotAvailableForGuest>
+      ) }
+      <DrawioViewer {...props} onRenderingUpdated={renderingUpdatedHandler} />
+    </div>
+  );
+});
+DrawioViewerWithEditButton.displayName = 'DrawioViewerWithEditButton';

packages/app/src/services/renderer/renderer.tsx

@@ -23,6 +23,7 @@ import { PluggableList, Pluggable, PluginTuple } from 'unified';
 
 
 import { CodeBlock } from '~/components/ReactMarkdownComponents/CodeBlock';
+import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
 import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
 import { RendererConfig } from '~/interfaces/services/renderer';
@@ -351,7 +352,7 @@ export const generateViewOptions = (
     components.h2 = Header;
     components.h3 = Header;
     components.lsx = props => <Lsx {...props} forceToFetchData />;
-    components.drawio = drawioPlugin.DrawioViewer;
+    components.drawio = DrawioViewerWithEditButton;
   }
 
   // // Add configurers for viewer

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

@@ -18,14 +18,15 @@ declare global {
 }
 
 
-type Props = {
+export type DrawioViewerProps = {
   diagramIndex: number,
   bol?: number,
   eol?: number,
   children?: ReactNode,
+  onRenderingUpdated?: (hasError: boolean) => void,
 }
 
-export const DrawioViewer = React.memo((props: Props): JSX.Element => {
+export const DrawioViewer = React.memo((props: DrawioViewerProps): JSX.Element => {
   const {
     diagramIndex, bol, eol, children,
   } = props;