refs 120355: fix Ref

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

@@ -193,7 +193,7 @@ export const generateSimpleViewOptions = (
   // add components
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
-    components.ref = refsGrowiPlugin.Ref;
+    components.ref = refsGrowiPlugin.RefImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 
@@ -260,7 +260,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   // add components
   if (components != null) {
     components.lsx = lsxGrowiPlugin.LsxImmutable;
-    components.ref = refsGrowiPlugin.Ref;
+    components.ref = refsGrowiPlugin.RefImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
   }
 

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useSWRxRef } from '../stores/refs';
 
@@ -12,7 +12,7 @@ type Props = {
   isImmutable?: boolean,
 };
 
-export const Ref = ({
+const RefSubstance = React.memo(({
   fileNameOrId,
   pagePath,
   isImmutable,
@@ -33,4 +33,14 @@ export const Ref = ({
     error={error}
     attachments={attachments}
   />;
-};
+});
+
+export const Ref = React.memo((props: Props): JSX.Element => {
+  return <RefSubstance {...props} />;
+});
+
+export const RefImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {
+  return <RefSubstance {...props} isImmutable />;
+});
+
+Ref.displayName = 'Ref';

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

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

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'];
-const REF_IMG_SUPPORTED_ATTRIBUTES = ['file', 'id', 'page', 'width', 'height', 'max-width', 'max-height', 'alt'];
-const REFS_SUPPORTED_ATTRIBUTES = ['page', 'prefix', 'depth', 'regexp'];
+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 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',
+  'page', 'prefix', 'depth', 'regexp', 'width', 'height', 'max-width', 'max-height', 'display', 'grid', 'grid-gap', 'no-carousel', 'pagePath',
 ];
 
 const { hasHeadingSlash } = pathUtils;
@@ -36,18 +36,13 @@ export const remarkPlugin: Plugin = function() {
           //   1: ref(file=..., ...)
           //   2: ref(id=..., ...)
           //   3: refs(firstArgs, ...)
-          let fileNameOrId: string | undefined = attributes.file || attributes.id;
+          let fileNameOrId: string = attributes.file || attributes.id;
           if (fileNameOrId == null && attrEntries.length > 0) {
             const [firstAttrKey, firstAttrValue] = attrEntries[0];
             fileNameOrId = (firstAttrValue === '' && !REF_SUPPORTED_ATTRIBUTES.concat(REF_IMG_SUPPORTED_ATTRIBUTES).includes(firstAttrValue))
-              ? firstAttrKey : undefined;
-          }
-          if (fileNameOrId == null) {
-            throw new Error('\'file\' or \'id\' is not specified. Set first argument or specify \'file\' or \'id\' option');
-          }
-          else {
-            attributes.fileNameOrId = fileNameOrId;
+              ? firstAttrKey : '';
           }
+          attributes.fileNameOrId = fileNameOrId;
         }
         else if (REFS_NAME_PATTERN.test(node.name)) {
           // set 'page' attribute if the first attribute is only value
@@ -104,7 +99,7 @@ export const rehypePlugin: Plugin<[RefRehypePluginParams]> = (options = {}) => {
     }
 
     const basePagePath = options.pagePath;
-    const elements = selectAll('ref, refimg', tree as HastNode);
+    const elements = selectAll('ref, refimg, refs, refsimg', tree as HastNode);
 
     elements.forEach((refElem) => {
       if (refElem.properties == null) {
@@ -112,7 +107,7 @@ export const rehypePlugin: Plugin<[RefRehypePluginParams]> = (options = {}) => {
       }
 
       refElem.properties.pagePath = refElem.properties.page;
-      const pagePath = refElem.properties.pagePath;
+      const pagePath = refElem.properties.pag1ePath;
 
       // set basePagePath when pagePath is undefined or invalid
       if (pagePath == null || typeof pagePath !== 'string') {

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

@@ -1,27 +1,12 @@
-import * as url from 'url';
-
-import { IAttachmentHasId, pathUtils } from '@growi/core';
+import { IAttachmentHasId } from '@growi/core';
 import axios from 'axios';
 import useSWR, { SWRResponse } from 'swr';
 
-/**
-   * return absolute path for the specified path
-   *
-   * @param {string} relativePath relative path from fromPagePath`
-   */
-function getAbsolutePathFor(relativePath: string): string {
-  return decodeURIComponent(
-    pathUtils.normalizePath( // normalize like /foo/bar
-      url.resolve(pathUtils.addTrailingSlash(this.fromPagePath), relativePath),
-    ),
-  );
-}
-
 export const useSWRxRef = (
     pagePath: string, fileNameOrId: string, isImmutable?: boolean,
 ): SWRResponse<IAttachmentHasId, Error> => {
   return useSWR(
-    ['/_api/ref', pagePath, fileNameOrId, isImmutable],
+    ['/_api/attachment-refs/ref', pagePath, fileNameOrId, isImmutable],
     ([endpoint, pagePath, fileNameOrId]) => {
       return axios.get(endpoint, {
         params: {
@@ -43,7 +28,7 @@ export const useSWRxRefs = (
     prefix: string, pagePath: string, options?: Record<string, string | undefined>, isImmutable?: boolean,
 ): SWRResponse<IAttachmentHasId, Error> => {
   return useSWR(
-    ['/_api/refs', prefix, pagePath, options, isImmutable],
+    ['/_api/attachment-refs/refs', prefix, pagePath, options, isImmutable],
     ([endpoint, prefix, pagePath, options]) => {
       return axios.get(endpoint, {
         params: {

packages/remark-attachment-refs/src/server/index.ts

@@ -1,17 +1,10 @@
 import { routesFactory } from './routes/refs';
 
-const loginRequiredFallback = (req, res) => {
-  return res.status(403).send('login required');
-};
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
 const middleware = (crowi: any, app: any): void => {
   const refs = routesFactory(crowi);
 
-  const loginRequired = crowi.require('../middlewares/login-required')(crowi, true, loginRequiredFallback);
-  const accessTokenParser = crowi.require('../middlewares/access-token-parser')(crowi);
-
-  app.get('/_api', accessTokenParser, loginRequired, refs);
+  app.use('/_api/attachment-refs', refs);
 };
 
 export default middleware;

packages/remark-attachment-refs/src/server/routes/refs.ts

@@ -91,7 +91,7 @@ export const routesFactory = (crowi): any => {
       return;
     }
 
-    const page = await Page.findByPathAndViewer(pagePath, user);
+    const page = await Page.findByPathAndViewer(pagePath, user, undefined, true);
 
     // not found
     if (page == null) {