refs 120355: Refs

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.refs = refsGrowiPlugin.Refs;
     components.refimg = refsGrowiPlugin.RefImg;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
@@ -195,6 +196,7 @@ export const generateSimpleViewOptions = (
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.ref = refsGrowiPlugin.RefImmutable;
+    components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
@@ -263,6 +265,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
     components.ref = refsGrowiPlugin.RefImmutable;
+    components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }

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

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+
+import { useSWRxRefs } from '../stores/refs';
+
+import { AttachmentList } from './AttachmentList';
+import { RefsContext } from './util/refs-context';
+
+
+type Props = {
+  prefix: string,
+  pagePath: string,
+  depth: string,
+  regexp: string,
+  isImmutable?: boolean,
+};
+
+const RefsSubstance = React.memo(({
+  prefix,
+  pagePath,
+  depth,
+  regexp,
+
+  isImmutable,
+}: Props): JSX.Element => {
+  const refsContext = useMemo(() => {
+    const options = {
+      prefix, pagePath, depth, regexp,
+    };
+    return new RefsContext('refs', options);
+  }, [prefix, pagePath, depth, regexp]);
+
+  const { data, error, isLoading } = useSWRxRefs(prefix, pagePath, { depth, regexp }, isImmutable);
+  const attachments = data != null ? data : [];
+
+  return <AttachmentList
+    refsContext={refsContext}
+    isLoading={isLoading}
+    error={error}
+    attachments={attachments}
+  />;
+});
+
+export const Refs = React.memo((props: Props): JSX.Element => {
+  return <RefsSubstance {...props} />;
+});
+
+export const RefsImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {
+  return <RefsSubstance {...props} isImmutable />;
+});
+
+Refs.displayName = 'Refs';

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

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

packages/remark-attachment-refs/src/client/stores/refs.tsx

@@ -26,7 +26,7 @@ export const useSWRxRef = (
 
 export const useSWRxRefs = (
     prefix: string, pagePath: string, options?: Record<string, string | undefined>, isImmutable?: boolean,
-): SWRResponse<IAttachmentHasId, Error> => {
+): SWRResponse<IAttachmentHasId[], Error> => {
   return useSWR(
     ['/_api/attachment-refs/refs', prefix, pagePath, options, isImmutable],
     ([endpoint, prefix, pagePath, options]) => {