refs 120355: complete RefImg

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

@@ -14,7 +14,6 @@ type Props = {
   isLoading: boolean
   error?: Error
   attachments: IAttachmentHasId[]
-  isExtractImg?: boolean
 };
 
 export const AttachmentList = ({
@@ -22,7 +21,6 @@ export const AttachmentList = ({
   isLoading,
   error,
   attachments,
-  isExtractImg = false,
 }: Props): JSX.Element => {
   const renderNoAttachmentsMessage = () => {
     let message;
@@ -67,7 +65,7 @@ export const AttachmentList = ({
       return renderNoAttachmentsMessage();
     }
 
-    return (isExtractImg)
+    return (refsContext.isExtractImage)
       ? <ExtractedAttachments attachments={attachments} refsContext={refsContext} />
       : attachments.map((attachment) => {
         return <AttachmentLink key={attachment._id} attachment={attachment} inUse={false} />;

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

@@ -38,8 +38,8 @@ export const ExtractedAttachments = React.memo(({
 
     const width = options?.width;
     const height = options?.height;
-    const maxWidth = options?.['max-width'];
-    const maxHeight = options?.['max-height'];
+    const maxWidth = options?.maxWidth;
+    const maxHeight = options?.maxHeight;
     const display = options?.display || 'block';
 
     const containerStyles = {
@@ -61,8 +61,8 @@ export const ExtractedAttachments = React.memo(({
   const getClassesAndStylesForGrid = useCallback(() => {
     const { options } = refsContext;
 
-    const maxWidth = options?.['max-width'];
-    const maxHeight = options?.['max-height'];
+    const maxWidth = options?.maxWidth;
+    const maxHeight = options?.maxHeight;
 
     const containerStyles = {
       width: refsContext.getOptGridWidth(),
@@ -110,7 +110,7 @@ export const ExtractedAttachments = React.memo(({
 
     // carousel settings
     let onClick;
-    if (options?.['no-carousel'] == null) {
+    if (options?.noCarousel == null) {
       // pointer cursor
       Object.assign(containerStyles, { cursor: 'pointer' });
       // set click handler
@@ -128,7 +128,7 @@ export const ExtractedAttachments = React.memo(({
 
   const renderCarousel = useCallback(() => {
     const { options } = refsContext;
-    const withCarousel = options?.['no-carousel'] == null;
+    const withCarousel = options?.noCarousel == null;
 
     const images = getAttachmentsFilteredByFormat()
       .map((attachment) => {
@@ -159,7 +159,7 @@ export const ExtractedAttachments = React.memo(({
 
   const { options } = refsContext;
   const grid = options?.grid;
-  const gridGap = options?.['grid-gap'];
+  const gridGap = options?.gridGap;
 
   const styles = {};
 

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

@@ -7,22 +7,33 @@ import { RefsContext } from './util/refs-context';
 
 
 type Props = {
-  fileNameOrId: string,
-  pagePath: string,
-  isImmutable?: boolean,
+  fileNameOrId: string
+  pagePath: string
+  width?: string
+  height?: string
+  maxWidth?: string
+  maxHeight?: string
+  alt?: string
+
+  isImmutable?: boolean
 };
 
 const RefImgSubstance = React.memo(({
   fileNameOrId,
   pagePath,
+  width,
+  height,
+  maxWidth,
+  maxHeight,
+  alt,
   isImmutable,
 }: Props): JSX.Element => {
   const refsContext = useMemo(() => {
     const options = {
-      fileNameOrId, pagePath,
+      fileNameOrId, pagePath, width, height, maxWidth, maxHeight, alt,
     };
     return new RefsContext('refimg', options);
-  }, [fileNameOrId, pagePath]);
+  }, [fileNameOrId, pagePath, width, height, maxWidth, maxHeight, alt]);
 
   const { data, error, isLoading } = useSWRxRef(pagePath, fileNameOrId, isImmutable);
   const attachments = data != null ? [data] : [];
@@ -32,7 +43,6 @@ const RefImgSubstance = React.memo(({
     isLoading={isLoading}
     error={error}
     attachments={attachments}
-    isExtractImg
   />;
 });
 

packages/remark-attachment-refs/src/client/components/util/refs-context.ts

@@ -57,6 +57,10 @@ export class RefsContext {
     return this.tag === 'ref' || this.tag === 'refimg';
   }
 
+  get isExtractImage(): boolean {
+    return this.tag === 'refimg' || this.tag === 'refsimg';
+  }
+
   getOptGrid(): string | undefined {
     return GRID_AVAILABLE_OPTIONS_LIST.find(item => item === this.options?.grid);
   }

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

@@ -8,11 +8,11 @@ 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', 'fileNameOrId', 'pagePath'];
-const REFS_SUPPORTED_ATTRIBUTES = ['page', 'prefix', 'depth', 'regexp', 'pagePath'];
+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'];
 const REFS_IMG_SUPPORTED_ATTRIBUTES = [
-  'page', 'prefix', 'depth', 'regexp', 'width', 'height', 'max-width', 'max-height', 'display', 'grid', 'grid-gap', 'no-carousel', 'pagePath',
+  'pagePath', 'prefix', 'depth', 'regexp', 'width', 'height', 'maxWidth', 'maxHeight', 'display', 'grid', 'gridGap', 'noCarousel',
 ];
 
 const { hasHeadingSlash } = pathUtils;
@@ -62,6 +62,11 @@ export const remarkPlugin: Plugin = function() {
           return;
         }
 
+        attributes.maxWidth = attributes['max-width'];
+        attributes.maxHeight = attributes['max-height'];
+        attributes.gridGap = attributes['grid-gap'];
+        attributes.noCarousel = attributes['no-carousel'];
+
         data.hName = node.name;
         data.hProperties = attributes;
       }