refactor(theme-classic): move some logic of CodeBlock to theme-common (#5922)

packages/docusaurus-theme-classic/package.json

@@ -41,7 +41,6 @@
     "globby": "^11.0.2",
     "infima": "0.2.0-alpha.34",
     "lodash": "^4.17.20",
-    "parse-numeric-range": "^1.3.0",
     "postcss": "^8.3.7",
     "prism-react-renderer": "^1.2.1",
     "prismjs": "^1.23.0",

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -5,100 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState, useRef} from 'react';
+import React, {useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Highlight, {defaultProps, Language} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
-import rangeParser from 'parse-numeric-range';
+import Translate, {translate} from '@docusaurus/Translate';
+import {
+  useThemeConfig,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+} from '@docusaurus/theme-common';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
-import Translate, {translate} from '@docusaurus/Translate';
 
 import styles from './styles.module.css';
 
-import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
-
-const HighlightLinesRangeRegex = /{([\d,-]+)}/;
-
-const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'] as const;
-type HighlightLanguage = typeof HighlightLanguages[number];
-
-type HighlightLanguageConfig = {
-  start: string;
-  end: string;
-};
-
-// Supported types of highlight comments
-const HighlightComments: Record<HighlightLanguage, HighlightLanguageConfig> = {
-  js: {
-    start: '\\/\\/',
-    end: '',
-  },
-  jsBlock: {
-    start: '\\/\\*',
-    end: '\\*\\/',
-  },
-  jsx: {
-    start: '\\{\\s*\\/\\*',
-    end: '\\*\\/\\s*\\}',
-  },
-  python: {
-    start: '#',
-    end: '',
-  },
-  html: {
-    start: '<!--',
-    end: '-->',
-  },
-};
-
-// Supported highlight directives
-const HighlightDirectives = [
-  'highlight-next-line',
-  'highlight-start',
-  'highlight-end',
-];
-
-const getHighlightDirectiveRegex = (
-  languages: readonly HighlightLanguage[] = HighlightLanguages,
-) => {
-  // to be more reliable, the opening and closing comment must match
-  const commentPattern = languages
-    .map((lang) => {
-      const {start, end} = HighlightComments[lang];
-      return `(?:${start}\\s*(${HighlightDirectives.join('|')})\\s*${end})`;
-    })
-    .join('|');
-  // white space is allowed, but otherwise it should be on it's own line
-  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
-};
-
-// select comment styles based on language
-const highlightDirectiveRegex = (lang: string) => {
-  switch (lang) {
-    case 'js':
-    case 'javascript':
-    case 'ts':
-    case 'typescript':
-      return getHighlightDirectiveRegex(['js', 'jsBlock']);
-
-    case 'jsx':
-    case 'tsx':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'jsx']);
-
-    case 'html':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'html']);
-
-    case 'python':
-    case 'py':
-      return getHighlightDirectiveRegex(['python']);
-
-    default:
-      // all comment types
-      return getHighlightDirectiveRegex();
-  }
-};
-
 export default function CodeBlock({
   children,
   className: blockClassName,
@@ -124,10 +46,6 @@ export default function CodeBlock({
   // so we probably don't need to parse the metastring
   // (note: title="xyz" => title prop still has the quotes)
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-
-  const button = useRef(null);
-  let highlightLines: number[] = [];
-
   const prismTheme = usePrismTheme();
 
   // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
@@ -135,67 +53,9 @@ export default function CodeBlock({
     ? children.join('')
     : (children as string);
 
-  if (metastring && HighlightLinesRangeRegex.test(metastring)) {
+  const language =
-    // Tested above
+    parseLanguage(blockClassName) ?? (prism.defaultLanguage as Language);
-    const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)![1];
+  const {highlightLines, code} = parseLines(content, metastring, language);
-    highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
-  }
-
-  const languageClassName = blockClassName
-    ?.split(' ')
-    .find((str) => str.startsWith('language-'));
-  let language = languageClassName?.replace(/language-/, '') as Language;
-
-  if (!language && prism.defaultLanguage) {
-    language = prism.defaultLanguage as Language;
-  }
-
-  // only declaration OR directive highlight can be used for a block
-  let code = content.replace(/\n$/, '');
-  if (highlightLines.length === 0 && language !== undefined) {
-    let range = '';
-    const directiveRegex = highlightDirectiveRegex(language);
-    // go through line by line
-    const lines = content.replace(/\n$/, '').split('\n');
-    let blockStart: number;
-    // loop through lines
-    for (let index = 0; index < lines.length; ) {
-      const line = lines[index];
-      // adjust for 0-index
-      const lineNumber = index + 1;
-      const match = line.match(directiveRegex);
-      if (match !== null) {
-        const directive = match
-          .slice(1)
-          .reduce(
-            (final: string | undefined, item) => final || item,
-            undefined,
-          );
-        switch (directive) {
-          case 'highlight-next-line':
-            range += `${lineNumber},`;
-            break;
-
-          case 'highlight-start':
-            blockStart = lineNumber;
-            break;
-
-          case 'highlight-end':
-            range += `${blockStart!}-${lineNumber - 1},`;
-            break;
-
-          default:
-            break;
-        }
-        lines.splice(index, 1);
-      } else {
-        // lines without directives are unchanged
-        index += 1;
-      }
-    }
-    highlightLines = rangeParser(range);
-    code = lines.join('\n');
-  }
 
   const handleCopyCode = () => {
     copy(code);
@@ -212,11 +72,7 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div
+        <div className={clsx(styles.codeBlockContainer, blockClassName)}>
-          className={clsx(
-            styles.codeBlockContainer,
-            blockClassName?.replace(/language-[^ ]+/, ''),
-          )}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -236,7 +92,7 @@ export default function CodeBlock({
 
                   const lineProps = getLineProps({line, key: i});
 
-                  if (highlightLines.includes(i + 1)) {
+                  if (highlightLines.includes(i)) {
                     lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
@@ -253,7 +109,6 @@ export default function CodeBlock({
             </pre>
 
             <button
-              ref={button}
               type="button"
               aria-label={translate({
                 id: 'theme.CodeBlock.copyButtonAriaLabel',

packages/docusaurus-theme-common/package.json

@@ -25,6 +25,7 @@
     "@docusaurus/types": "2.0.0-beta.9",
     "clsx": "^1.1.1",
     "fs-extra": "^10.0.0",
+    "parse-numeric-range": "^1.3.0",
     "tslib": "^2.3.1",
     "utility-types": "^3.10.0"
   },

packages/docusaurus-theme-common/src/index.ts

@@ -22,7 +22,11 @@ export {createStorageSlot, listStorageKeys} from './utils/storageUtils';
 
 export {useAlternatePageUtils} from './utils/useAlternatePageUtils';
 
-export {parseCodeBlockTitle} from './utils/codeBlockUtils';
+export {
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+} from './utils/codeBlockUtils';
 
 export {docVersionSearchTag, DEFAULT_SEARCH_TAG} from './utils/searchUtils';
 

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -5,8 +5,159 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import rangeParser from 'parse-numeric-range';
+import type {Language} from 'prism-react-renderer';
+
 const codeBlockTitleRegex = /title=(["'])(.*?)\1/;
+const highlightLinesRangeRegex = /{([\d,-]+)}/;
+
+const commentTypes = ['js', 'jsBlock', 'jsx', 'python', 'html'] as const;
+type CommentType = typeof commentTypes[number];
+
+type CommentPattern = {
+  start: string;
+  end: string;
+};
+
+// Supported types of highlight comments
+const commentPatterns: Record<CommentType, CommentPattern> = {
+  js: {
+    start: '\\/\\/',
+    end: '',
+  },
+  jsBlock: {
+    start: '\\/\\*',
+    end: '\\*\\/',
+  },
+  jsx: {
+    start: '\\{\\s*\\/\\*',
+    end: '\\*\\/\\s*\\}',
+  },
+  python: {
+    start: '#',
+    end: '',
+  },
+  html: {
+    start: '<!--',
+    end: '-->',
+  },
+};
+
+const magicCommentDirectives = [
+  'highlight-next-line',
+  'highlight-start',
+  'highlight-end',
+];
+
+const getMagicCommentDirectiveRegex = (
+  languages: readonly CommentType[] = commentTypes,
+) => {
+  // to be more reliable, the opening and closing comment must match
+  const commentPattern = languages
+    .map((lang) => {
+      const {start, end} = commentPatterns[lang];
+      return `(?:${start}\\s*(${magicCommentDirectives.join('|')})\\s*${end})`;
+    })
+    .join('|');
+  // white space is allowed, but otherwise it should be on it's own line
+  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
+};
+
+// select comment styles based on language
+const magicCommentDirectiveRegex = (lang: string) => {
+  switch (lang) {
+    case 'js':
+    case 'javascript':
+    case 'ts':
+    case 'typescript':
+      return getMagicCommentDirectiveRegex(['js', 'jsBlock']);
+
+    case 'jsx':
+    case 'tsx':
+      return getMagicCommentDirectiveRegex(['js', 'jsBlock', 'jsx']);
+
+    case 'html':
+      return getMagicCommentDirectiveRegex(['js', 'jsBlock', 'html']);
+
+    case 'python':
+    case 'py':
+      return getMagicCommentDirectiveRegex(['python']);
+
+    default:
+      // all comment types
+      return getMagicCommentDirectiveRegex();
+  }
+};
 
 export function parseCodeBlockTitle(metastring?: string): string {
   return metastring?.match(codeBlockTitleRegex)?.[2] ?? '';
 }
+
+export function parseLanguage(className?: string): Language | undefined {
+  const languageClassName = className
+    ?.split(' ')
+    .find((str) => str.startsWith('language-'));
+  return languageClassName?.replace(/language-/, '') as Language | undefined;
+}
+
+/**
+ * @param metastring The highlight range declared here starts at 1
+ * @returns Note: all line numbers start at 0, not 1
+ */
+export function parseLines(
+  content: string,
+  metastring?: string,
+  language?: Language,
+): {
+  highlightLines: number[];
+  code: string;
+} {
+  let code = content.replace(/\n$/, '');
+  // Highlighted lines specified in props: don't parse the content
+  if (metastring && highlightLinesRangeRegex.test(metastring)) {
+    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
+    const highlightLines = rangeParser(highlightLinesRange)
+      .filter((n) => n > 0)
+      .map((n) => n - 1);
+    return {highlightLines, code};
+  }
+  if (language === undefined) {
+    return {highlightLines: [], code};
+  }
+  const directiveRegex = magicCommentDirectiveRegex(language);
+  // go through line by line
+  const lines = code.split('\n');
+  let highlightBlockStart: number;
+  let highlightRange = '';
+  // loop through lines
+  for (let lineNumber = 0; lineNumber < lines.length; ) {
+    const line = lines[lineNumber];
+    const match = line.match(directiveRegex);
+    if (match !== null) {
+      const directive = match.slice(1).find((item) => item !== undefined);
+      switch (directive) {
+        case 'highlight-next-line':
+          highlightRange += `${lineNumber},`;
+          break;
+
+        case 'highlight-start':
+          highlightBlockStart = lineNumber;
+          break;
+
+        case 'highlight-end':
+          highlightRange += `${highlightBlockStart!}-${lineNumber - 1},`;
+          break;
+
+        default:
+          break;
+      }
+      lines.splice(lineNumber, 1);
+    } else {
+      // lines without directives are unchanged
+      lineNumber += 1;
+    }
+  }
+  const highlightLines = rangeParser(highlightRange);
+  code = lines.join('\n');
+  return {highlightLines, code};
+}