Revert "add codeblock sanitize"

This reverts commit 2ba18f2696cbd67d994f934c09b23620fb8e14aa.

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

@@ -26,7 +26,6 @@ import * as addLineNumberAttribute from '~/services/renderer/rehype-plugins/add-
 import * as keywordHighlighter from '~/services/renderer/rehype-plugins/keyword-highlighter';
 import * as relocateToc from '~/services/renderer/rehype-plugins/relocate-toc';
 import * as attachment from '~/services/renderer/remark-plugins/attachment';
-import * as codeBlock from '~/services/renderer/remark-plugins/codeblock';
 import * as plantuml from '~/services/renderer/remark-plugins/plantuml';
 import * as xsvToTable from '~/services/renderer/remark-plugins/xsv-to-table';
 import {
@@ -81,7 +80,6 @@ export const generateViewOptions = (
       attachment.sanitizeOption,
       lsxGrowiDirective.sanitizeOption,
       refsGrowiDirective.sanitizeOption,
-      codeBlock.sanitizeOption,
     )]
     : () => {};
 
@@ -134,7 +132,6 @@ export const generateTocOptions = (config: RendererConfig, tocNode: HtmlElementN
   const rehypeSanitizePlugin: Pluggable | (() => void) = config.isEnabledXssPrevention
     ? [sanitize, deepmerge(
       getCommonSanitizeOption(config),
-      codeBlock.sanitizeOption,
     )]
     : () => {};
 
@@ -188,7 +185,6 @@ export const generateSimpleViewOptions = (
       attachment.sanitizeOption,
       lsxGrowiDirective.sanitizeOption,
       refsGrowiDirective.sanitizeOption,
-      codeBlock.sanitizeOption,
     )]
     : () => {};
 
@@ -278,7 +274,6 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
       lsxGrowiDirective.sanitizeOption,
       refsGrowiDirective.sanitizeOption,
       addLineNumberAttribute.sanitizeOption,
-      codeBlock.sanitizeOption,
     )]
     : () => {};
 

apps/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -65,18 +65,10 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
     </PrismAsyncLight>
   );
 }
-
-type CodeBlockProps = {
-  children: JSX.Element,
-  className?: string,
-  inline?: string, // "" or undefined
-}
-
-export const CodeBlock = (props: CodeBlockProps): JSX.Element => {
+export const CodeBlock = ({ className, children }: {className: string, children: JSX.Element}): JSX.Element => {
 
   // TODO: set border according to the value of 'customize:highlightJsStyleBorder'
-  const { className, children, inline } = props;
-  if (inline != null) {
+  if (className === 'inline') {
     return <code className={`code-inline ${className ?? ''}`}>{children}</code>;
   }
 

apps/app/src/services/renderer/remark-plugins/codeblock.ts

@@ -1,23 +1,31 @@
-import type { Schema as SanitizeOption } from 'hast-util-sanitize';
+
+import type { Root } from 'hast';
+import { selectAll } from 'hast-util-select';
 import type { InlineCode } from 'mdast';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-
-const SUPPORTED_CODE = ['inline'];
+import { addClassToProperties } from '../rehype-plugins/add-class';
 
 export const remarkPlugin: Plugin = () => {
   return (tree) => {
     visit(tree, 'inlineCode', (node: InlineCode) => {
       const data = node.data || (node.data = {});
+      // setting inline for rehypePlugin
       data.hProperties = { inline: true };
     });
   };
 };
 
-export const sanitizeOption: SanitizeOption = {
-  tagNames: ['code'],
-  attributes: {
-    code: SUPPORTED_CODE,
-  },
+export const rehypePlugin: Plugin = () => {
+  return (tree: Root) => {
+    const codeElements = selectAll('code', tree);
+    codeElements.forEach((element) => {
+      // if inlineCode, properties.inline exists.
+      if (element.properties?.inline != null) {
+        element.properties.inline = true;
+        addClassToProperties(element.properties, 'inline');
+      }
+    });
+  };
 };

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

@@ -25,7 +25,7 @@ import { tagNames as recommendedTagNames, attributes as recommendedAttributes }
 import * as addClass from './rehype-plugins/add-class';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
-import * as codeBlock from './remark-plugins/codeblock';
+import * as codeBlocks from './remark-plugins/codeblock';
 import { pukiwikiLikeLinker } from './remark-plugins/pukiwiki-like-linker';
 import * as xsvToTable from './remark-plugins/xsv-to-table';
 
@@ -97,7 +97,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       pukiwikiLikeLinker,
       growiDirective,
       remarkFrontmatter,
-      codeBlock.remarkPlugin,
+      codeBlocks.remarkPlugin,
     ],
     remarkRehypeOptions: {
       clobberPrefix: '', // remove clobber prefix
@@ -110,6 +110,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       [addClass.rehypePlugin, {
         table: 'table table-bordered',
       }],
+      codeBlocks.rehypePlugin,
     ],
     components: {
       a: NextLink,

apps/app/src/stores/renderer.tsx

@@ -5,10 +5,11 @@ import useSWR, { type SWRConfiguration, type SWRResponse } from 'swr';
 
 import { getGrowiFacade } from '~/features/growi-plugin/client/utils/growi-facade-utils';
 import type { RendererOptions } from '~/interfaces/renderer-options';
+
+
 import {
   useRendererConfig,
 } from '~/stores-universal/context';
-
 import { useCurrentPagePath } from './page';
 import { useCurrentPageTocNode } from './ui';