Merge pull request #10165 from weseek/fix/160680-code-tag-make-inline-block

fix: Tag <code> result in inline code blocks

apps/app/package.json

@@ -338,6 +338,8 @@
     "simplebar-react": "^2.3.6",
     "socket.io-client": "^4.7.5",
     "source-map-loader": "^4.0.1",
-    "swagger2openapi": "^7.0.8"
+    "swagger2openapi": "^7.0.8",
+    "unist-util-is": "^6.0.0",
+    "unist-util-visit-parents": "^6.0.0"
   }
 }

apps/app/src/services/renderer/rehype-plugins/add-inline-code-property.ts

@@ -0,0 +1,33 @@
+import type { Element, Root } from 'hast';
+import type { Plugin } from 'unified';
+import { is } from 'unist-util-is';
+import { visitParents } from 'unist-util-visit-parents';
+
+const isInlineCodeTag = (node: Element, parent: Element | Root | null): boolean => {
+  if (node.tagName !== 'code') {
+    return false;
+  }
+
+  if (parent && is(parent, { type: 'element', tagName: 'pre' })) {
+    return false;
+  }
+
+  return true;
+};
+
+export const rehypePlugin: Plugin = () => {
+  return (tree) => {
+    visitParents(tree, 'element', (node: Element, ancestors) => {
+      // The immediate parent is the last item in the ancestors array
+      const parent = ancestors[ancestors.length - 1] || null;
+
+      // Check if the current element is an inline <code> tag
+      if (isInlineCodeTag(node, parent)) {
+        node.properties = {
+          ...node.properties,
+          inline: true,
+        };
+      }
+    });
+  };
+};

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

@@ -12,7 +12,6 @@ import math from 'remark-math';
 import deepmerge from 'ts-deepmerge';
 import type { Pluggable, PluginTuple } from 'unified';
 
-
 import { CodeBlock } from '~/components/ReactMarkdownComponents/CodeBlock';
 import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
 import type { RendererOptions } from '~/interfaces/renderer-options';
@@ -22,6 +21,7 @@ import loggerFactory from '~/utils/logger';
 
 import { tagNames as recommendedTagNames, attributes as recommendedAttributes } from './recommended-whitelist';
 import * as addClass from './rehype-plugins/add-class';
+import * as addInlineProperty from './rehype-plugins/add-inline-code-property';
 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';
@@ -115,6 +115,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       [addClass.rehypePlugin, {
         table: 'table table-bordered',
       }],
+      addInlineProperty.rehypePlugin,
     ],
     components: {
       a: NextLink,

pnpm-lock.yaml

@@ -1004,6 +1004,12 @@ importers:
       swagger2openapi:
         specifier: ^7.0.8
         version: 7.0.8(encoding@0.1.13)
+      unist-util-is:
+        specifier: ^6.0.0
+        version: 6.0.0
+      unist-util-visit-parents:
+        specifier: ^6.0.0
+        version: 6.0.1
 
   apps/pdf-converter:
     dependencies: