Merge pull request #7333 from weseek/imprv/112948-disable-lsx-in-shared-page

imprv: Disable lsx in shared page

packages/app/src/interfaces/services/renderer.ts

@@ -1,6 +1,7 @@
 import { XssOptionConfig } from '~/services/xss/xssOption';
 
 export type RendererConfig = {
+  isSharedPage?: boolean
   isEnabledLinebreaks: boolean,
   isEnabledLinebreaksInComments: boolean,
   adminPreferredIndentSize: number,

packages/app/src/pages/share/[[...path]].page.tsx

@@ -221,6 +221,7 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   props.drawioUri = configManager.getConfig('crowi', 'app:drawioUri');
 
   props.rendererConfig = {
+    isSharedPage: true,
     isEnabledLinebreaks: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks'),
     isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
     adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),

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

@@ -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 }],
@@ -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,
@@ -324,7 +324,7 @@ export const generateSSRViewOptions = (
 
   // add rehype plugins
   rehypePlugins.push(
-    [lsxGrowiPlugin.rehypePlugin, { pagePath }],
+    [lsxGrowiPlugin.rehypePlugin, { pagePath, isSharedPage: config.isSharedPage }],
     rehypeSanitizePlugin,
     katex,
   );
@@ -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,

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

@@ -8,7 +8,6 @@ import { LsxContext } from './lsx-context';
 
 import styles from './Lsx.module.scss';
 
-
 type Props = {
   children: React.ReactNode,
   className?: string,
@@ -22,9 +21,10 @@ type Props = {
   except?: string,
 
   isImmutable?: boolean,
+  isSharedPage?: boolean,
 };
 
-export const Lsx = React.memo(({
+const LsxSubstance = React.memo(({
   prefix,
   num, depth, sort, reverse, filter, except,
   isImmutable,
@@ -90,6 +90,25 @@ export const Lsx = React.memo(({
     </div>
   );
 });
+LsxSubstance.displayName = 'LsxSubstance';
+
+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>
+  );
+});
+LsxDisabled.displayName = 'LsxDisabled';
+
+export const Lsx = React.memo((props: Props): JSX.Element => {
+  if (props.isSharedPage) {
+    return <LsxDisabled />;
+  }
+
+  return <LsxSubstance {...props} />;
+});
 Lsx.displayName = 'Lsx';
 
 export const LsxImmutable = React.memo((props: Omit<Props, 'isImmutable'>): JSX.Element => {

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