refs 120355: RefsImg

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

@@ -100,6 +100,7 @@ export const generateViewOptions = (
     components.ref = refsGrowiPlugin.Ref;
     components.refs = refsGrowiPlugin.Refs;
     components.refimg = refsGrowiPlugin.RefImg;
+    components.refsimg = refsGrowiPlugin.RefsImg;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
   }
@@ -198,6 +199,7 @@ export const generateSimpleViewOptions = (
     components.ref = refsGrowiPlugin.RefImmutable;
     components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
+    components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 
@@ -267,6 +269,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.ref = refsGrowiPlugin.RefImmutable;
     components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
+    components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 

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

@@ -7,16 +7,17 @@ import { RefsContext } from './util/refs-context';
 
 
 type Props = {
-  prefix: string,
   pagePath: string,
-  depth: string,
-  regexp: string,
+  prefix?: string,
+  depth?: string,
+  regexp?: string,
+
   isImmutable?: boolean,
 };
 
 const RefsSubstance = React.memo(({
-  prefix,
   pagePath,
+  prefix,
   depth,
   regexp,
 
@@ -24,12 +25,12 @@ const RefsSubstance = React.memo(({
 }: Props): JSX.Element => {
   const refsContext = useMemo(() => {
     const options = {
-      prefix, pagePath, depth, regexp,
+      pagePath, prefix, depth, regexp,
     };
     return new RefsContext('refs', options);
-  }, [prefix, pagePath, depth, regexp]);
+  }, [pagePath, prefix, depth, regexp]);
 
-  const { data, error, isLoading } = useSWRxRefs(prefix, pagePath, { depth, regexp }, isImmutable);
+  const { data, error, isLoading } = useSWRxRefs(pagePath, prefix, { depth, regexp }, isImmutable);
   const attachments = data != null ? data : [];
 
   return <AttachmentList

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

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+
+import { useSWRxRefs } from '../stores/refs';
+
+import { AttachmentList } from './AttachmentList';
+import { RefsContext } from './util/refs-context';
+
+
+type Props = {
+  pagePath: string
+  prefix?: string
+  depth?: string
+  regexp?: string
+  width?: string
+  height?: string
+  maxWidth?: string
+  maxHeight?: string
+  display?: string
+  grid?: string
+  gridGap?: string
+  noCarousel?: string
+
+  isImmutable?: boolean,
+};
+
+const RefsImgSubstance = React.memo(({
+  prefix, pagePath, depth, regexp,
+  width, height, maxWidth, maxHeight,
+  display, grid, gridGap, noCarousel,
+
+  isImmutable,
+}: Props): JSX.Element => {
+  const refsContext = useMemo(() => {
+    const options = {
+      prefix,
+      pagePath,
+      depth,
+      regexp,
+      width,
+      height,
+      maxWidth,
+      maxHeight,
+      display,
+      grid,
+      gridGap,
+      noCarousel,
+    };
+    return new RefsContext('refsimg', options);
+  }, [prefix, pagePath, depth, regexp,
+      width, height, maxWidth, maxHeight,
+      display, grid, gridGap, noCarousel]);
+
+  const { data, error, isLoading } = useSWRxRefs(pagePath, prefix, {
+    depth,
+    regexp,
+    width,
+    height,
+    maxWidth,
+    maxHeight,
+    display,
+    grid,
+    gridGap,
+    noCarousel,
+  }, isImmutable);
+  const attachments = data != null ? data : [];
+
+  return <AttachmentList
+    refsContext={refsContext}
+    isLoading={isLoading}
+    error={error}
+    attachments={attachments}
+  />;
+});
+
+export const RefsImg = React.memo((props: Props): JSX.Element => {
+  return <RefsImgSubstance {...props} />;
+});
+
+export const RefsImgImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {
+  return <RefsImgSubstance {...props} isImmutable />;
+});
+
+RefsImg.displayName = 'RefsImg';

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

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

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

@@ -6,8 +6,9 @@ import isAbsolute from 'is-absolute-url';
 import { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-const REF_NAME_PATTERN = new RegExp(/refimg|ref/);
-const REFS_NAME_PATTERN = new RegExp(/refsimg|refs/);
+const REF_SINGLE_NAME_PATTERN = new RegExp(/refimg|ref/);
+const REF_MULTI_NAME_PATTERN = new RegExp(/refsimg|refs/);
+
 const REF_SUPPORTED_ATTRIBUTES = ['fileNameOrId', 'pagePath'];
 const REF_IMG_SUPPORTED_ATTRIBUTES = ['fileNameOrId', 'pagePath', 'width', 'height', 'maxWidth', 'maxHeight', 'alt'];
 const REFS_SUPPORTED_ATTRIBUTES = ['pagePath', 'prefix', 'depth', 'regexp'];
@@ -30,7 +31,7 @@ export const remarkPlugin: Plugin = function() {
         const attributes = node.attributes as DirectiveAttributes || {};
         const attrEntries = Object.entries(attributes);
 
-        if (REF_NAME_PATTERN.test(node.name)) {
+        if (REF_SINGLE_NAME_PATTERN.test(node.name)) {
           // determine fileNameOrId
           // order:
           //   1: ref(file=..., ...)
@@ -44,7 +45,7 @@ export const remarkPlugin: Plugin = function() {
           }
           attributes.fileNameOrId = fileNameOrId;
         }
-        else if (REFS_NAME_PATTERN.test(node.name)) {
+        else if (REF_MULTI_NAME_PATTERN.test(node.name)) {
           // set 'page' attribute if the first attribute is only value
           // e.g.
           //   case 1: refs(page=/path..., ...)    => page="/path"
@@ -62,6 +63,7 @@ export const remarkPlugin: Plugin = function() {
           return;
         }
 
+        // kebab case to camel case
         attributes.maxWidth = attributes['max-width'];
         attributes.maxHeight = attributes['max-height'];
         attributes.gridGap = attributes['grid-gap'];

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

@@ -25,15 +25,15 @@ export const useSWRxRef = (
 };
 
 export const useSWRxRefs = (
-    prefix: string, pagePath: string, options?: Record<string, string | undefined>, isImmutable?: boolean,
+    pagePath: string, prefix?: string, options?: Record<string, string | undefined>, isImmutable?: boolean,
 ): SWRResponse<IAttachmentHasId[], Error> => {
   return useSWR(
-    ['/_api/attachment-refs/refs', prefix, pagePath, options, isImmutable],
-    ([endpoint, prefix, pagePath, options]) => {
+    ['/_api/attachment-refs/refs', pagePath, prefix, options, isImmutable],
+    ([endpoint, pagePath, prefix, options]) => {
       return axios.get(endpoint, {
         params: {
-          prefix,
           pagePath,
+          prefix,
           options,
         },
       }).then(result => result.data.attachments);