@docusaurus/theme-classic 0.0.0-4185 → 0.0.0-4193

package/lib-next/deps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module 'prism-react-renderer/prism' {
+  import type * as PrismNamespace from 'prismjs';
+
+  const Prism: typeof PrismNamespace;
+  export default Prism;
+}

package/lib-next/theme/CodeBlock/index.js

@@ -4,84 +4,19 @@
  * This source code is licensed under the MIT license found in the
  * 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} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
-import rangeParser from 'parse-numeric-range';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Translate, {translate} from '@docusaurus/Translate';
+import {
+  useThemeConfig,
+  parseCodeBlockTitle,
+  parseLanguage,
+  parseLines,
+} from '@docusaurus/theme-common';
+import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
-import {useThemeConfig, parseCodeBlockTitle} from '@docusaurus/theme-common';
-const HighlightLinesRangeRegex = /{([\d,-]+)}/;
-const HighlightLanguages = ['js', 'jsBlock', 'jsx', 'python', 'html'];
-// Supported types of highlight comments
-const HighlightComments = {
-  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 = 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) => {
-  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,
@@ -105,74 +40,11 @@ export default function CodeBlock({
   // (note: title="xyz" => title prop still has the quotes)
 
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-  const button = useRef(null);
-  let highlightLines = [];
   const prismTheme = usePrismTheme(); // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
 
   const content = Array.isArray(children) ? children.join('') : children;
-
-  if (metastring && HighlightLinesRangeRegex.test(metastring)) {
-    // Tested above
-    const highlightLinesRange = metastring.match(HighlightLinesRangeRegex)[1];
-    highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
-  }
-
-  const languageClassName = blockClassName
-    ?.split(' ')
-    .find((str) => str.startsWith('language-'));
-  let language = languageClassName?.replace(/language-/, '');
-
-  if (!language && prism.defaultLanguage) {
-    language = prism.defaultLanguage;
-  } // 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; // 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, 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 language = parseLanguage(blockClassName) ?? prism.defaultLanguage;
+  const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
     copy(code);
@@ -188,11 +60,7 @@ export default function CodeBlock({
       code={code}
       language={language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
-        <div
-          className={clsx(
-            styles.codeBlockContainer,
-            blockClassName?.replace(/language-[^ ]+/, ''),
-          )}>
+        <div className={clsx(styles.codeBlockContainer, blockClassName)}>
           {codeBlockTitle && (
             <div style={style} className={styles.codeBlockTitle}>
               {codeBlockTitle}
@@ -215,7 +83,7 @@ export default function CodeBlock({
                     key: i,
                   });
 
-                  if (highlightLines.includes(i + 1)) {
+                  if (highlightLines.includes(i)) {
                     lineProps.className += ' docusaurus-highlight-code-line';
                   }
 
@@ -238,7 +106,6 @@ export default function CodeBlock({
             </pre>
 
             <button
-              ref={button}
               type="button"
               aria-label={translate({
                 id: 'theme.CodeBlock.copyButtonAriaLabel',

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -9,8 +9,7 @@ import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
 import clsx from 'clsx';
 import {getInfimaActiveClassName} from './index';
-import {useDocsPreferredVersion} from '@docusaurus/theme-common';
-import {uniq} from '@docusaurus/utils-common';
+import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
 
 function getDocInVersions(versions, docId) {
   const allDocs = versions.flatMap((version) => version.docs);