refs 120355: RefImg

apps/app/src/client/services/renderer/renderer.tsx

@@ -98,6 +98,7 @@ export const generateViewOptions = (
     components.h6 = Header;
     components.lsx = lsxGrowiPlugin.Lsx;
     components.ref = refsGrowiPlugin.Ref;
+    components.refimg = refsGrowiPlugin.RefImg;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
   }
@@ -194,6 +195,7 @@ export const generateSimpleViewOptions = (
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.ref = refsGrowiPlugin.RefImmutable;
+    components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 
@@ -261,6 +263,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.ref = refsGrowiPlugin.RefImmutable;
+    components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 

packages/remark-attachment-refs/src/client/components/RefImg.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+
+import { useSWRxRef } from '../stores/refs';
+
+import { AttachmentList } from './AttachmentList';
+import { RefsContext } from './util/refs-context';
+
+
+type Props = {
+  fileNameOrId: string,
+  pagePath: string,
+  isImmutable?: boolean,
+};
+
+const RefImgSubstance = React.memo(({
+  fileNameOrId,
+  pagePath,
+  isImmutable,
+}: Props): JSX.Element => {
+  const refsContext = useMemo(() => {
+    const options = {
+      fileNameOrId, pagePath,
+    };
+    return new RefsContext('refimg', options);
+  }, [fileNameOrId, pagePath]);
+
+  const { data, error, isLoading } = useSWRxRef(pagePath, fileNameOrId, isImmutable);
+  const attachments = data != null ? [data] : [];
+
+  return <AttachmentList
+    refsContext={refsContext}
+    isLoading={isLoading}
+    error={error}
+    attachments={attachments}
+    isExtractImg
+  />;
+});
+
+export const RefImg = React.memo((props: Props): JSX.Element => {
+  return <RefImgSubstance {...props} />;
+});
+
+export const RefImgImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {
+  return <RefImgSubstance {...props} isImmutable />;
+});
+
+RefImg.displayName = 'RefImg';

packages/remark-attachment-refs/src/client/components/index.ts

@@ -1 +1,2 @@
 export { Ref, RefImmutable } from './Ref';
+export { RefImg, RefImgImmutable } from './RefImg';

packages/remark-attachment-refs/src/client/services/renderer/refs.ts

@@ -9,7 +9,7 @@ import { visit } from 'unist-util-visit';
 const REF_NAME_PATTERN = new RegExp(/refimg|ref/);
 const REFS_NAME_PATTERN = new RegExp(/refsimg|refs/);
 const REF_SUPPORTED_ATTRIBUTES = ['file', 'id', 'page', 'fileNameOrId', 'pagePath'];
-const REF_IMG_SUPPORTED_ATTRIBUTES = ['file', 'id', 'page', 'width', 'height', 'max-width', 'max-height', 'alt', 'pagePath'];
+const REF_IMG_SUPPORTED_ATTRIBUTES = ['file', 'id', 'page', 'width', 'height', 'max-width', 'max-height', 'alt', 'fileNameOrId', 'pagePath'];
 const REFS_SUPPORTED_ATTRIBUTES = ['page', 'prefix', 'depth', 'regexp', 'pagePath'];
 const REFS_IMG_SUPPORTED_ATTRIBUTES = [
   'page', 'prefix', 'depth', 'regexp', 'width', 'height', 'max-width', 'max-height', 'display', 'grid', 'grid-gap', 'no-carousel', 'pagePath',