refs 120355: Gallery

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

@@ -101,6 +101,7 @@ export const generateViewOptions = (
     components.refs = refsGrowiPlugin.Refs;
     components.refimg = refsGrowiPlugin.RefImg;
     components.refsimg = refsGrowiPlugin.RefsImg;
+    components.gallery = refsGrowiPlugin.Gallery;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
   }
@@ -200,6 +201,7 @@ export const generateSimpleViewOptions = (
     components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
+    components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 
@@ -270,6 +272,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.refs = refsGrowiPlugin.RefsImmutable;
     components.refimg = refsGrowiPlugin.RefImgImmutable;
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
+    components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { RefsImgSubstance, Props } from './RefsImg';
+
+export const Gallery = React.memo((props: Props): JSX.Element => {
+  return <RefsImgSubstance {...props} />;
+});
+
+export const GalleryImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {
+  const grid = props.grid || 'col4';
+  const gridGap = props.gridGap || '1px';
+  return <RefsImgSubstance grid={grid} gridGap={gridGap} {...props} isImmutable />;
+});
+
+Gallery.displayName = 'Gallery';

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

@@ -6,7 +6,7 @@ import { AttachmentList } from './AttachmentList';
 import { RefsContext } from './util/refs-context';
 
 
-type Props = {
+export type Props = {
   pagePath: string
   prefix?: string
   depth?: string
@@ -23,7 +23,7 @@ type Props = {
   isImmutable?: boolean,
 };
 
-const RefsImgSubstance = React.memo(({
+export const RefsImgSubstance = React.memo(({
   pagePath, prefix, depth, regexp,
   width, height, maxWidth, maxHeight,
   display, grid, gridGap, noCarousel,

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

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

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

@@ -7,7 +7,7 @@ import { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
 const REF_SINGLE_NAME_PATTERN = new RegExp(/refimg|ref/);
-const REF_MULTI_NAME_PATTERN = new RegExp(/refsimg|refs/);
+const REF_MULTI_NAME_PATTERN = new RegExp(/refsimg|refs|gallery/);
 
 const REF_SUPPORTED_ATTRIBUTES = ['fileNameOrId', 'pagePath'];
 const REF_IMG_SUPPORTED_ATTRIBUTES = ['fileNameOrId', 'pagePath', 'width', 'height', 'maxWidth', 'maxHeight', 'alt'];
@@ -106,7 +106,7 @@ export const rehypePlugin: Plugin<[RefRehypePluginParams]> = (options = {}) => {
     }
 
     const basePagePath = options.pagePath;
-    const elements = selectAll('ref, refimg, refs, refsimg', tree as HastNode);
+    const elements = selectAll('ref, refimg, refs, refsimg, gallery', tree as HastNode);
 
     elements.forEach((refElem) => {
       if (refElem.properties == null) {
@@ -140,11 +140,12 @@ export const rehypePlugin: Plugin<[RefRehypePluginParams]> = (options = {}) => {
 };
 
 export const sanitizeOption: SanitizeOption = {
-  tagNames: ['ref', 'refimg', 'refs', 'refsimg'],
+  tagNames: ['ref', 'refimg', 'refs', 'refsimg', 'gallery'],
   attributes: {
     ref: REF_SUPPORTED_ATTRIBUTES,
     refimg: REF_IMG_SUPPORTED_ATTRIBUTES,
     refs: REFS_SUPPORTED_ATTRIBUTES,
     refsimg: REFS_IMG_SUPPORTED_ATTRIBUTES,
+    gallery: REFS_IMG_SUPPORTED_ATTRIBUTES,
   },
 };