|
1 |
| -// @flow |
2 |
| - |
3 |
| -import React, { Component, type Node } from "react"; |
4 |
| -import normalizeTokens from "../utils/normalizeTokens"; |
5 |
| -import themeToDict, { type ThemeDict } from "../utils/themeToDict"; |
6 |
| - |
7 |
| -import type { |
8 |
| - Language, |
9 |
| - Token, |
10 |
| - LineInputProps, |
11 |
| - LineOutputProps, |
12 |
| - TokenInputProps, |
13 |
| - TokenOutputProps, |
14 |
| - RenderProps, |
15 |
| - PrismLib, |
16 |
| - PrismTheme |
17 |
| -} from "../types"; |
18 |
| - |
19 |
| -type Props = { |
20 |
| - Prism: PrismLib, |
21 |
| - theme?: PrismTheme, |
22 |
| - language: Language, |
23 |
| - code: string, |
24 |
| - children: (props: RenderProps) => Node |
25 |
| -}; |
26 |
| - |
27 |
| -class Highlight extends Component<Props, *> { |
28 |
| - prevTheme: PrismTheme | void; |
29 |
| - prevLanguage: Language | void; |
30 |
| - themeDict: ThemeDict | void; |
31 |
| - |
32 |
| - getThemeDict = (props: Props) => { |
33 |
| - if ( |
34 |
| - this.themeDict !== undefined && |
35 |
| - props.theme === this.prevTheme && |
36 |
| - props.language === this.prevLanguage |
37 |
| - ) { |
38 |
| - return this.themeDict; |
39 |
| - } |
40 |
| - |
41 |
| - this.prevTheme = props.theme; |
42 |
| - this.prevLanguage = props.language; |
43 |
| - |
44 |
| - const themeDict = props.theme |
45 |
| - ? themeToDict(props.theme, props.language) |
46 |
| - : undefined; |
47 |
| - return (this.themeDict = themeDict); |
48 |
| - }; |
49 |
| - |
50 |
| - getLineProps = ({ |
51 |
| - key, |
52 |
| - className, |
53 |
| - style, |
54 |
| - line, |
55 |
| - ...rest |
56 |
| - }: LineInputProps): LineOutputProps => { |
57 |
| - const output: LineOutputProps = { |
58 |
| - ...rest, |
59 |
| - className: "token-line", |
60 |
| - style: undefined, |
61 |
| - key: undefined |
62 |
| - }; |
63 |
| - |
64 |
| - const themeDict = this.getThemeDict(this.props); |
65 |
| - if (themeDict !== undefined) { |
66 |
| - output.style = themeDict.plain; |
67 |
| - } |
68 |
| - |
69 |
| - if (style !== undefined) { |
70 |
| - output.style = |
71 |
| - output.style !== undefined ? { ...output.style, ...style } : style; |
72 |
| - } |
73 |
| - |
74 |
| - if (key !== undefined) output.key = key; |
75 |
| - if (className) output.className += ` ${className}`; |
76 |
| - |
77 |
| - return output; |
78 |
| - }; |
79 |
| - |
80 |
| - getStyleForToken = ({ types, empty }: Token) => { |
81 |
| - const typesSize = types.length; |
82 |
| - const themeDict = this.getThemeDict(this.props); |
83 |
| - |
84 |
| - if (themeDict === undefined) { |
85 |
| - return undefined; |
86 |
| - } else if (typesSize === 1 && types[0] === "plain") { |
87 |
| - return empty ? { display: "inline-block" } : undefined; |
88 |
| - } else if (typesSize === 1 && !empty) { |
89 |
| - return themeDict[types[0]]; |
90 |
| - } |
91 |
| - |
92 |
| - const baseStyle = empty ? { display: "inline-block" } : {}; |
93 |
| - // $FlowFixMe |
94 |
| - const typeStyles = types.map(type => themeDict[type]); |
95 |
| - return Object.assign(baseStyle, ...typeStyles); |
96 |
| - }; |
97 |
| - |
98 |
| - getTokenProps = ({ |
99 |
| - key, |
100 |
| - className, |
101 |
| - style, |
102 |
| - token, |
103 |
| - ...rest |
104 |
| - }: TokenInputProps): TokenOutputProps => { |
105 |
| - const output: TokenOutputProps = { |
106 |
| - ...rest, |
107 |
| - className: `token ${token.types.join(" ")}`, |
108 |
| - children: token.content, |
109 |
| - style: this.getStyleForToken(token), |
110 |
| - key: undefined |
111 |
| - }; |
112 |
| - |
113 |
| - if (style !== undefined) { |
114 |
| - output.style = |
115 |
| - output.style !== undefined ? { ...output.style, ...style } : style; |
116 |
| - } |
117 |
| - |
118 |
| - if (key !== undefined) output.key = key; |
119 |
| - if (className) output.className += ` ${className}`; |
120 |
| - |
121 |
| - return output; |
122 |
| - }; |
123 |
| - |
124 |
| - render() { |
125 |
| - const { Prism, language, code, children } = this.props; |
126 |
| - |
127 |
| - const themeDict = this.getThemeDict(this.props); |
128 |
| - |
129 |
| - const grammar = Prism.languages[language]; |
130 |
| - const mixedTokens = |
131 |
| - grammar !== undefined ? Prism.tokenize(code, grammar, language) : [code]; |
132 |
| - const tokens = normalizeTokens(mixedTokens); |
133 |
| - |
134 |
| - return children({ |
135 |
| - tokens, |
136 |
| - className: `prism-code language-${language}`, |
137 |
| - style: themeDict !== undefined ? themeDict.root : {}, |
138 |
| - getLineProps: this.getLineProps, |
139 |
| - getTokenProps: this.getTokenProps |
140 |
| - }); |
141 |
| - } |
142 |
| -} |
143 |
| - |
144 |
| -export default Highlight; |
| 1 | +// @flow |
| 2 | + |
| 3 | +import React, { Component, type Node } from "react"; |
| 4 | +import normalizeTokens from "../utils/normalizeTokens"; |
| 5 | +import themeToDict, { type ThemeDict } from "../utils/themeToDict"; |
| 6 | + |
| 7 | +import type { |
| 8 | + Language, |
| 9 | + Token, |
| 10 | + LineInputProps, |
| 11 | + LineOutputProps, |
| 12 | + TokenInputProps, |
| 13 | + TokenOutputProps, |
| 14 | + RenderProps, |
| 15 | + PrismLib, |
| 16 | + PrismTheme, |
| 17 | +} from "../types"; |
| 18 | + |
| 19 | +type Props = { |
| 20 | + Prism: PrismLib, |
| 21 | + theme?: PrismTheme, |
| 22 | + language: Language, |
| 23 | + code: string, |
| 24 | + children: (props: RenderProps) => Node, |
| 25 | +}; |
| 26 | + |
| 27 | +class Highlight extends Component<Props, *> { |
| 28 | + prevTheme: PrismTheme | void; |
| 29 | + prevLanguage: Language | void; |
| 30 | + themeDict: ThemeDict | void; |
| 31 | + |
| 32 | + getThemeDict = (props: Props) => { |
| 33 | + if ( |
| 34 | + this.themeDict !== undefined && |
| 35 | + props.theme === this.prevTheme && |
| 36 | + props.language === this.prevLanguage |
| 37 | + ) { |
| 38 | + return this.themeDict; |
| 39 | + } |
| 40 | + |
| 41 | + this.prevTheme = props.theme; |
| 42 | + this.prevLanguage = props.language; |
| 43 | + |
| 44 | + const themeDict = props.theme |
| 45 | + ? themeToDict(props.theme, props.language) |
| 46 | + : undefined; |
| 47 | + return (this.themeDict = themeDict); |
| 48 | + }; |
| 49 | + |
| 50 | + getLineProps = ({ |
| 51 | + key, |
| 52 | + className, |
| 53 | + style, |
| 54 | + line, |
| 55 | + ...rest |
| 56 | + }: LineInputProps): LineOutputProps => { |
| 57 | + const output: LineOutputProps = { |
| 58 | + ...rest, |
| 59 | + className: "token-line", |
| 60 | + style: undefined, |
| 61 | + key: undefined, |
| 62 | + }; |
| 63 | + |
| 64 | + const themeDict = this.getThemeDict(this.props); |
| 65 | + if (themeDict !== undefined) { |
| 66 | + output.style = themeDict.plain; |
| 67 | + } |
| 68 | + |
| 69 | + if (style !== undefined) { |
| 70 | + output.style = |
| 71 | + output.style !== undefined ? { ...output.style, ...style } : style; |
| 72 | + } |
| 73 | + |
| 74 | + if (key !== undefined) output.key = key; |
| 75 | + if (className) output.className += ` ${className}`; |
| 76 | + |
| 77 | + return output; |
| 78 | + }; |
| 79 | + |
| 80 | + getStyleForToken = ({ types, empty }: Token) => { |
| 81 | + const typesSize = types.length; |
| 82 | + const themeDict = this.getThemeDict(this.props); |
| 83 | + |
| 84 | + if (themeDict === undefined) { |
| 85 | + return undefined; |
| 86 | + } else if (typesSize === 1 && types[0] === "plain") { |
| 87 | + return empty ? { display: "inline-block" } : undefined; |
| 88 | + } else if (typesSize === 1 && !empty) { |
| 89 | + return themeDict[types[0]]; |
| 90 | + } |
| 91 | + |
| 92 | + const baseStyle = empty ? { display: "inline-block" } : {}; |
| 93 | + // $FlowFixMe |
| 94 | + const typeStyles = types.map((type) => themeDict[type]); |
| 95 | + return Object.assign(baseStyle, ...typeStyles); |
| 96 | + }; |
| 97 | + |
| 98 | + getTokenProps = ({ |
| 99 | + key, |
| 100 | + className, |
| 101 | + style, |
| 102 | + token, |
| 103 | + ...rest |
| 104 | + }: TokenInputProps): TokenOutputProps => { |
| 105 | + const output: TokenOutputProps = { |
| 106 | + ...rest, |
| 107 | + className: `token ${token.types.join(" ")}`, |
| 108 | + children: token.content, |
| 109 | + style: this.getStyleForToken(token), |
| 110 | + key: undefined, |
| 111 | + }; |
| 112 | + |
| 113 | + if (style !== undefined) { |
| 114 | + output.style = |
| 115 | + output.style !== undefined ? { ...output.style, ...style } : style; |
| 116 | + } |
| 117 | + |
| 118 | + if (key !== undefined) output.key = key; |
| 119 | + if (className) output.className += ` ${className}`; |
| 120 | + |
| 121 | + return output; |
| 122 | + }; |
| 123 | + |
| 124 | + render() { |
| 125 | + const { Prism, language, code, children } = this.props; |
| 126 | + |
| 127 | + const themeDict = this.getThemeDict(this.props); |
| 128 | + |
| 129 | + const grammar = Prism.languages[language]; |
| 130 | + const mixedTokens = |
| 131 | + grammar !== undefined ? Prism.tokenize(code, grammar, language) : [code]; |
| 132 | + const tokens = normalizeTokens(mixedTokens); |
| 133 | + |
| 134 | + return children({ |
| 135 | + tokens, |
| 136 | + className: `prism-code language-${language}`, |
| 137 | + style: themeDict !== undefined ? themeDict.root : {}, |
| 138 | + getLineProps: this.getLineProps, |
| 139 | + getTokenProps: this.getTokenProps, |
| 140 | + }); |
| 141 | + } |
| 142 | +} |
| 143 | + |
| 144 | +export default Highlight; |
0 commit comments