mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-31 18:07:00 +02:00
refactor(theme-classic): move some logic of CodeBlock to theme-common (#5922)
This commit is contained in:
Joshua Chen
GitHub
parent
7281844179
commit
334470b5d4
5 changed files with 170 additions and 160 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
// 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-/, '') 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 language =
|
||||
parseLanguage(blockClassName) ?? (prism.defaultLanguage as Language);
|
||||
const {highlightLines, code} = parseLines(content, metastring, language);
|
||||
|
||||
const handleCopyCode = () => {
|
||||
copy(code);
|
||||
|
|
@ -212,11 +72,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}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue