mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-15 01:02:35 +02:00
refactor(v2): add @theme-init alias to give access to initial components (#2464)
This commit is contained in:
Alexey Pyltsyn
GitHub
parent
d145f03ea8
commit
d910ff118e
7 changed files with 55 additions and 339 deletions
|
|
@ -10,11 +10,10 @@
|
|||
import React, {useEffect, useState, useRef} from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Highlight, {defaultProps} from 'prism-react-renderer';
|
||||
import defaultTheme from 'prism-react-renderer/themes/palenight';
|
||||
import Clipboard from 'clipboard';
|
||||
import rangeParser from 'parse-numeric-range';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
import usePrismTheme from '@theme/hooks/usePrismTheme';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
|
|
@ -113,10 +112,7 @@ export default ({children, className: languageClassName, metastring}) => {
|
|||
let highlightLines = [];
|
||||
let codeBlockTitle = '';
|
||||
|
||||
const {isDarkTheme} = useThemeContext();
|
||||
const lightModeTheme = prism.theme || defaultTheme;
|
||||
const darkModeTheme = prism.darkTheme || lightModeTheme;
|
||||
const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
|
||||
const prismTheme = usePrismTheme();
|
||||
|
||||
if (metastring && highlightLinesRangeRegex.test(metastring)) {
|
||||
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import defaultTheme from 'prism-react-renderer/themes/palenight';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
|
||||
const usePrismTheme = () => {
|
||||
const {
|
||||
siteConfig: {
|
||||
themeConfig: {prism = {}},
|
||||
},
|
||||
} = useDocusaurusContext();
|
||||
const {isDarkTheme} = useThemeContext();
|
||||
const lightModeTheme = prism.theme || defaultTheme;
|
||||
const darkModeTheme = prism.darkTheme || lightModeTheme;
|
||||
const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
|
||||
|
||||
return prismTheme;
|
||||
};
|
||||
|
||||
export default usePrismTheme;
|
||||
|
|
@ -5,281 +5,32 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
|
||||
|
||||
import React, {useEffect, useState, useRef} from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Highlight, {defaultProps} from 'prism-react-renderer';
|
||||
import defaultTheme from 'prism-react-renderer/themes/palenight';
|
||||
import Clipboard from 'clipboard';
|
||||
import rangeParser from 'parse-numeric-range';
|
||||
import React from 'react';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
import usePrismTheme from '@theme/hooks/usePrismTheme';
|
||||
import Playground from '@theme/Playground';
|
||||
import CodeBlock from '@theme-init/CodeBlock';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
const withLiveEditor = (Component) => {
|
||||
const WrappedComponent = (props) => {
|
||||
const {isClient} = useDocusaurusContext();
|
||||
const prismTheme = usePrismTheme();
|
||||
|
||||
const highlightLinesRangeRegex = /{([\d,-]+)}/;
|
||||
const getHighlightDirectiveRegex = (
|
||||
languages = ['js', 'jsBlock', 'jsx', 'python', 'html'],
|
||||
) => {
|
||||
// supported types of comments
|
||||
const comments = {
|
||||
js: {
|
||||
start: '\\/\\/',
|
||||
end: '',
|
||||
},
|
||||
jsBlock: {
|
||||
start: '\\/\\*',
|
||||
end: '\\*\\/',
|
||||
},
|
||||
jsx: {
|
||||
start: '\\{\\s*\\/\\*',
|
||||
end: '\\*\\/\\s*\\}',
|
||||
},
|
||||
python: {
|
||||
start: '#',
|
||||
end: '',
|
||||
},
|
||||
html: {
|
||||
start: '<!--',
|
||||
end: '-->',
|
||||
},
|
||||
};
|
||||
// supported directives
|
||||
const directives = [
|
||||
'highlight-next-line',
|
||||
'highlight-start',
|
||||
'highlight-end',
|
||||
].join('|');
|
||||
// to be more reliable, the opening and closing comment must match
|
||||
const commentPattern = languages
|
||||
.map(
|
||||
(lang) =>
|
||||
`(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].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();
|
||||
}
|
||||
};
|
||||
const codeBlockTitleRegex = /title=".*"/;
|
||||
|
||||
export default ({
|
||||
children,
|
||||
className: languageClassName,
|
||||
live,
|
||||
metastring,
|
||||
...props
|
||||
}) => {
|
||||
const {
|
||||
siteConfig: {
|
||||
themeConfig: {prism = {}},
|
||||
},
|
||||
} = useDocusaurusContext();
|
||||
|
||||
const [showCopied, setShowCopied] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
// The Prism theme on SSR is always the default theme but the site theme
|
||||
// can be in a different mode. React hydration doesn't update DOM styles
|
||||
// that come from SSR. Hence force a re-render after mounting to apply the
|
||||
// current relevant styles. There will be a flash seen of the original
|
||||
// styles seen using this current approach but that's probably ok. Fixing
|
||||
// the flash will require changing the theming approach and is not worth it
|
||||
// at this point.
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const target = useRef(null);
|
||||
const button = useRef(null);
|
||||
let highlightLines = [];
|
||||
let codeBlockTitle = '';
|
||||
|
||||
const {isDarkTheme} = useThemeContext();
|
||||
const lightModeTheme = prism.theme || defaultTheme;
|
||||
const darkModeTheme = prism.darkTheme || lightModeTheme;
|
||||
const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
|
||||
|
||||
if (metastring && highlightLinesRangeRegex.test(metastring)) {
|
||||
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
|
||||
highlightLines = rangeParser
|
||||
.parse(highlightLinesRange)
|
||||
.filter((n) => n > 0);
|
||||
}
|
||||
|
||||
if (metastring && codeBlockTitleRegex.test(metastring)) {
|
||||
codeBlockTitle = metastring
|
||||
.match(codeBlockTitleRegex)[0]
|
||||
.split('title=')[1]
|
||||
.replace(/"+/g, '');
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let clipboard;
|
||||
|
||||
if (button.current) {
|
||||
clipboard = new Clipboard(button.current, {
|
||||
target: () => target.current,
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (clipboard) {
|
||||
clipboard.destroy();
|
||||
}
|
||||
};
|
||||
}, [button.current, target.current]);
|
||||
|
||||
if (live) {
|
||||
if (props.live) {
|
||||
return (
|
||||
<Playground
|
||||
key={mounted}
|
||||
key={isClient}
|
||||
scope={{...React}}
|
||||
code={children.replace(/\n$/, '')}
|
||||
theme={prismTheme}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
let language =
|
||||
languageClassName && languageClassName.replace(/language-/, '');
|
||||
|
||||
if (!language && prism.defaultLanguage) {
|
||||
language = prism.defaultLanguage;
|
||||
}
|
||||
|
||||
// only declaration OR directive highlight can be used for a block
|
||||
let code = children.replace(/\n$/, '');
|
||||
if (highlightLines.length === 0 && language !== undefined) {
|
||||
let range = '';
|
||||
const directiveRegex = highlightDirectiveRegex(language);
|
||||
// go through line by line
|
||||
const lines = children.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.parse(range);
|
||||
code = lines.join('\n');
|
||||
}
|
||||
|
||||
const handleCopyCode = () => {
|
||||
window.getSelection().empty();
|
||||
setShowCopied(true);
|
||||
|
||||
setTimeout(() => setShowCopied(false), 2000);
|
||||
return <Component {...props} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
key={mounted}
|
||||
theme={prismTheme}
|
||||
code={code}
|
||||
language={language}>
|
||||
{({className, style, tokens, getLineProps, getTokenProps}) => (
|
||||
<>
|
||||
{codeBlockTitle && (
|
||||
<div style={style} className={styles.codeBlockTitle}>
|
||||
{codeBlockTitle}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.codeBlockContent}>
|
||||
<button
|
||||
ref={button}
|
||||
type="button"
|
||||
aria-label="Copy code to clipboard"
|
||||
className={classnames(styles.copyButton, {
|
||||
[styles.copyButtonWithTitle]: codeBlockTitle,
|
||||
})}
|
||||
onClick={handleCopyCode}>
|
||||
{showCopied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
<div
|
||||
tabIndex="0"
|
||||
className={classnames(className, styles.codeBlock, {
|
||||
[styles.codeBlockWithTitle]: codeBlockTitle,
|
||||
})}>
|
||||
<div ref={target} className={styles.codeBlockLines} style={style}>
|
||||
{tokens.map((line, i) => {
|
||||
if (line.length === 1 && line[0].content === '') {
|
||||
line[0].content = '\n'; // eslint-disable-line no-param-reassign
|
||||
}
|
||||
|
||||
const lineProps = getLineProps({line, key: i});
|
||||
|
||||
if (highlightLines.includes(i + 1)) {
|
||||
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={i} {...lineProps}>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({token, key})} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
return WrappedComponent;
|
||||
};
|
||||
|
||||
export default withLiveEditor(CodeBlock);
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.codeBlockContent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.codeBlockTitle {
|
||||
border-top-left-radius: var(--ifm-global-radius);
|
||||
border-top-right-radius: var(--ifm-global-radius);
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
font-weight: bold;
|
||||
padding: 0.75rem var(--ifm-pre-padding);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
overflow: auto;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
}
|
||||
|
||||
.codeBlockWithTitle {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.copyButton {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
border-radius: var(--ifm-global-radius);
|
||||
color: var(--ifm-color-white);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
padding: 0.4rem 0.5rem;
|
||||
position: absolute;
|
||||
right: calc(var(--ifm-pre-padding) / 2);
|
||||
top: calc(var(--ifm-pre-padding) / 2);
|
||||
visibility: hidden;
|
||||
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
|
||||
bottom 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.codeBlockTitle:hover + .codeBlockContent .copyButton,
|
||||
.codeBlockContent:hover > .copyButton {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.codeBlockLines {
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
font-size: inherit;
|
||||
line-height: var(--ifm-pre-line-height);
|
||||
white-space: pre;
|
||||
float: left;
|
||||
min-width: 100%;
|
||||
padding: var(--ifm-pre-padding);
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@ import styles from './styles.module.css';
|
|||
function Playground({children, theme, transformCode, ...props}) {
|
||||
return (
|
||||
<LiveProvider
|
||||
code={children}
|
||||
code={children.replace(/\n$/, '')}
|
||||
transformCode={transformCode || ((code) => `${code};`)}
|
||||
theme={theme}
|
||||
{...props}>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ describe('loadThemeAlias', () => {
|
|||
|
||||
const alias = loadThemeAlias([theme1Path, theme2Path]);
|
||||
expect(alias).toEqual({
|
||||
'@theme-init/Layout': path.join(theme1Path, 'Layout.js'), // TODO: Write separate test case for this?
|
||||
'@theme/Footer': path.join(theme1Path, 'Footer/index.js'),
|
||||
'@theme-original/Footer': path.join(theme1Path, 'Footer/index.js'),
|
||||
'@theme/Navbar': path.join(theme2Path, 'Navbar.js'),
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ export function loadThemeAlias(
|
|||
themePaths.forEach((themePath) => {
|
||||
const themeAliases = themeAlias(themePath);
|
||||
Object.keys(themeAliases).forEach((aliasKey) => {
|
||||
if (aliasKey in aliases) {
|
||||
const componentName = aliasKey.substring(aliasKey.indexOf('/') + 1);
|
||||
aliases[`@theme-init/${componentName}`] = aliases[aliasKey];
|
||||
}
|
||||
|
||||
aliases[aliasKey] = themeAliases[aliasKey];
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue