Receive isSharedPage in props

packages/app/src/services/renderer/renderer.tsx

@@ -4,7 +4,7 @@ import { ComponentType } from 'react';
 import { isClient } from '@growi/core';
 import * as drawioPlugin from '@growi/remark-drawio';
 import growiDirective from '@growi/remark-growi-directive';
-import { Lsx, LsxImmutable, LsxDisable } from '@growi/remark-lsx/components';
+import { Lsx, LsxImmutable } from '@growi/remark-lsx/components';
 import * as lsxGrowiPlugin from '@growi/remark-lsx/services/renderer';
 import { Schema as SanitizeOption } from 'hast-util-sanitize';
 import { SpecialComponents } from 'react-markdown/lib/ast-to-react';
@@ -174,7 +174,7 @@ export const generateViewOptions = (
   // add rehype plugins
   rehypePlugins.push(
     slug,
-    [lsxGrowiPlugin.rehypePlugin, { pagePath }],
+    [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     rehypeSanitizePlugin,
     katex,
     [toc.rehypePluginStore, { storeTocNode }],
@@ -185,7 +185,7 @@ export const generateViewOptions = (
     components.h1 = Header;
     components.h2 = Header;
     components.h3 = Header;
-    components.lsx = config.isLsxDisabled ? LsxDisable : Lsx;
+    components.lsx = Lsx;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
   }
@@ -270,7 +270,7 @@ export const generateSimpleViewOptions = (
 
   // add rehype plugins
   rehypePlugins.push(
-    [lsxGrowiPlugin.rehypePlugin, { pagePath }],
+    [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     [keywordHighlighter.rehypePlugin, { keywords: highlightKeywords }],
     rehypeSanitizePlugin,
     katex,
@@ -278,7 +278,7 @@ export const generateSimpleViewOptions = (
 
   // add components
   if (components != null) {
-    components.lsx = config.isLsxDisabled ? LsxDisable : LsxImmutable;
+    components.lsx = LsxImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
     components.table = Table;
   }
@@ -324,14 +324,14 @@ export const generateSSRViewOptions = (
 
   // add rehype plugins
   rehypePlugins.push(
-    [lsxGrowiPlugin.rehypePlugin, { pagePath }],
+    [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     rehypeSanitizePlugin,
     katex,
   );
 
   // add components
   if (components != null) {
-    components.lsx = config.isLsxDisabled ? LsxDisable : LsxImmutable;
+    components.lsx = LsxImmutable;
     components.table = Table;
   }
 
@@ -374,7 +374,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
 
   // add rehype plugins
   rehypePlugins.push(
-    [lsxGrowiPlugin.rehypePlugin, { pagePath }],
+    [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     addLineNumberAttribute.rehypePlugin,
     rehypeSanitizePlugin,
     katex,
@@ -382,7 +382,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
 
   // add components
   if (components != null) {
-    components.lsx = config.isLsxDisabled ? LsxDisable : LsxImmutable;
+    components.lsx = LsxImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
     components.table = Table;
   }

packages/remark-lsx/src/components/Lsx.tsx

@@ -9,6 +9,15 @@ import { LsxContext } from './lsx-context';
 import styles from './Lsx.module.scss';
 
 
+const LsxDisabled = React.memo((): JSX.Element => {
+  return (
+    <div className="text-muted">
+      <i className="fa fa-fw fa-info-circle"></i>
+      <small>lsx is not available on the share link page</small>
+    </div>
+  );
+});
+
 type Props = {
   children: React.ReactNode,
   className?: string,
@@ -22,12 +31,13 @@ type Props = {
   except?: string,
 
   isImmutable?: boolean,
+  isSharedPage?: boolean,
 };
 
 export const Lsx = React.memo(({
   prefix,
   num, depth, sort, reverse, filter, except,
-  isImmutable,
+  isImmutable, isSharedPage,
 }: Props): JSX.Element => {
 
   const lsxContext = useMemo(() => {
@@ -37,7 +47,7 @@ export const Lsx = React.memo(({
     return new LsxContext(prefix, options);
   }, [depth, filter, num, prefix, reverse, sort, except]);
 
-  const { data, error } = useSWRxNodeTree(lsxContext, isImmutable);
+  const { data, error } = useSWRxNodeTree(!isSharedPage, lsxContext, isImmutable);
 
   const isLoading = data === undefined;
   const hasError = error != null;
@@ -82,6 +92,10 @@ export const Lsx = React.memo(({
     return <LsxListView nodeTree={data.nodeTree} lsxContext={lsxContext} basisViewersCount={data.toppageViewersCount} />;
   }, [data?.nodeTree, data?.toppageViewersCount, isLoading, lsxContext]);
 
+  if (isSharedPage) {
+    return <LsxDisabled />;
+  }
+
   return (
     <div className={`lsx ${styles.lsx}`}>
       <Error />
@@ -96,13 +110,3 @@ export const LsxImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.
   return <Lsx {...props} isImmutable />;
 });
 LsxImmutable.displayName = 'LsxImmutable';
-
-export const LsxDisable = React.memo((): JSX.Element => {
-  return (
-    <div className="text-muted">
-      <i className="fa fa-fw fa-info-circle"></i>
-      <small>lsx is not available on the share link page</small>
-    </div>
-  );
-});
-LsxDisable.displayName = 'LsxDisable';

packages/remark-lsx/src/services/renderer/lsx.ts

@@ -9,7 +9,7 @@ import { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
 const NODE_NAME_PATTERN = new RegExp(/ls|lsx/);
-const SUPPORTED_ATTRIBUTES = ['prefix', 'num', 'depth', 'sort', 'reverse', 'filter', 'except'];
+const SUPPORTED_ATTRIBUTES = ['prefix', 'num', 'depth', 'sort', 'reverse', 'filter', 'except', 'isSharedPage'];
 
 const { addHeadingSlash, hasHeadingSlash } = pathUtils;
 
@@ -65,6 +65,7 @@ export const remarkPlugin: Plugin = function() {
 
 export type LsxRehypePluginParams = {
   pagePath?: string,
+  isSharedPage?: boolean,
 }
 
 const pathResolver = (href: string, basePath: string): string => {
@@ -97,6 +98,11 @@ export const rehypePlugin: Plugin<[LsxRehypePluginParams]> = (options = {}) => {
         return;
       }
 
+      const isSharedPage = lsxElem.properties.isSharedPage;
+      if (isSharedPage == null || typeof isSharedPage !== 'boolean') {
+        lsxElem.properties.isSharedPage = options.isSharedPage;
+      }
+
       const prefix = lsxElem.properties.prefix;
 
       // set basePagePath when prefix is undefined or invalid