mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
19 changed files with 1131 additions and 208 deletions
@ -1,100 +0,0 @@ |
|||
import React, { useContext } from 'react'; |
|||
import { LiveProvider, LiveContext, LivePreview } from 'react-live'; |
|||
import { |
|||
Flex, |
|||
Button, |
|||
Box, |
|||
CodeBlock as BaseCodeBlock, |
|||
space, |
|||
useClipboard, |
|||
BoxProps, |
|||
} from '@blockstack/ui'; |
|||
import { CodeEditor } from '@components/code-editor'; |
|||
import { Text } from '@components/typography'; |
|||
import { border } from '@common/utils'; |
|||
|
|||
const Error = () => { |
|||
const { error } = useContext(LiveContext); |
|||
|
|||
return error ? <BaseCodeBlock mt={space('base')} code={error} /> : null; |
|||
}; |
|||
|
|||
export const liveEditorStyle = { |
|||
fontSize: 14, |
|||
marginBottom: 24, |
|||
marginTop: 24, |
|||
overflowX: 'auto', |
|||
fontFamily: 'Menlo,monospace', |
|||
borderRadius: 10, |
|||
}; |
|||
|
|||
export const liveErrorStyle = { |
|||
fontFamily: 'Fira Mono, monospace', |
|||
fontSize: 14, |
|||
padding: '1em', |
|||
overflowX: 'auto', |
|||
color: 'white', |
|||
marginTop: '16px', |
|||
border: '1px solid var(--colors-border)', |
|||
backgroundColor: 'var(--colors-bg-light)', |
|||
}; |
|||
|
|||
export const LiveCodePreview = (props: any) => ( |
|||
<Box fontFamily="body"> |
|||
<Box |
|||
as={LivePreview} |
|||
boxShadow="mid" |
|||
border={border()} |
|||
borderRadius="6px" |
|||
p={space('base')} |
|||
mb={space('base')} |
|||
{...props} |
|||
/> |
|||
</Box> |
|||
); |
|||
|
|||
const Label = (props: BoxProps) => ( |
|||
<Text fontWeight={500} fontFamily="body" fontSize="12px" {...props} /> |
|||
); |
|||
|
|||
export const JsxEditor = ({ liveProviderProps, editorCode, handleCodeChange, language }) => { |
|||
const { hasCopied, onCopy } = useClipboard(editorCode); |
|||
return ( |
|||
<LiveProvider {...liveProviderProps}> |
|||
<Box mb={space('extra-tight')}> |
|||
<Label>Preview</Label> |
|||
</Box> |
|||
<LiveCodePreview /> |
|||
|
|||
<Flex justify="space-between" fontFamily="'Inter'" align="flex-end" mb={space('tight')}> |
|||
<Label>Editable example</Label> |
|||
<Button onClick={onCopy} size="sm" mode="secondary"> |
|||
{hasCopied ? 'Copied!' : 'Copy example code'} |
|||
</Button> |
|||
</Flex> |
|||
<CodeEditor value={editorCode} onChange={handleCodeChange} language={language} /> |
|||
<Error /> |
|||
</LiveProvider> |
|||
); |
|||
}; |
|||
|
|||
export const Preview = ({ liveProviderProps }) => ( |
|||
<Box> |
|||
<LiveProvider {...liveProviderProps}> |
|||
<LiveCodePreview /> |
|||
</LiveProvider> |
|||
</Box> |
|||
); |
|||
|
|||
export const SimpleCodeBlock = ({ editorCode, language, ...rest }) => ( |
|||
<BaseCodeBlock |
|||
borderTop={'1px solid rgb(39, 41, 46)'} |
|||
borderBottom={'1px solid rgb(39, 41, 46)'} |
|||
borderLeft={['none', '1px solid rgb(39, 41, 46)', '1px solid rgb(39, 41, 46)']} |
|||
borderRight={['none', '1px solid rgb(39, 41, 46)', '1px solid rgb(39, 41, 46)']} |
|||
borderRadius={['unset', 'unset', '12px', '12px']} |
|||
code={editorCode} |
|||
language={language} |
|||
{...rest} |
|||
/> |
|||
); |
|||
@ -0,0 +1,230 @@ |
|||
import React from 'react'; |
|||
import Highlight from 'prism-react-renderer'; |
|||
import { Box, Flex, space, useTheme } from '@blockstack/ui'; |
|||
import { GrammaticalToken, GetGrammaticalTokenProps, RenderProps, Language } from './types'; |
|||
import Prism from 'prism-react-renderer/prism'; |
|||
import { theme } from '@components/highlighter/prism-theme'; |
|||
import './language-definition'; |
|||
import { css } from '@styled-system/css'; |
|||
|
|||
const startPad = (n: number, z = 2, s = '0') => |
|||
(n + '').length <= z ? ['', '-'][+(n < 0)] + (s.repeat(z) + Math.abs(n)).slice(-1 * z) : n + ''; |
|||
|
|||
const LINE_NUMBER_WIDTH = 50; |
|||
const getLineNumber = (n: number, length: number) => startPad(n + 1, length.toString().length); |
|||
|
|||
const Tokens = ({ |
|||
tokens, |
|||
getTokenProps, |
|||
showLineNumbers, |
|||
...rest |
|||
}: { |
|||
tokens: GrammaticalToken[]; |
|||
getTokenProps: GetGrammaticalTokenProps; |
|||
showLineNumbers?: boolean; |
|||
}) => { |
|||
const bsTheme = useTheme(); |
|||
const pl = showLineNumbers |
|||
? [`calc(${LINE_NUMBER_WIDTH}px + ${(bsTheme as any).sizes['base']})`] |
|||
: ['unset', 'unset', 'base', 'base']; |
|||
|
|||
return ( |
|||
<Box pl={pl} pr="base" position="relative" zIndex={2} {...rest}> |
|||
{tokens.map( |
|||
(token, key) => |
|||
token.content !== '// highlight' && ( |
|||
<Box py="2px" display="inline-block" {...getTokenProps({ token, key })} /> |
|||
) |
|||
)} |
|||
</Box> |
|||
); |
|||
}; |
|||
const LineNumber = ({ number, length, ...rest }: { number: number; length: number }) => ( |
|||
<Flex |
|||
textAlign="right" |
|||
pr={space('tight')} |
|||
pl={space('tight')} |
|||
width={LINE_NUMBER_WIDTH} |
|||
borderRight="1px solid" |
|||
borderRightColor="inherit" |
|||
color="ink.400" |
|||
flexShrink={0} |
|||
style={{ userSelect: 'none' }} |
|||
position="absolute" |
|||
left={0} |
|||
height="100%" |
|||
align="baseline" |
|||
justify="center" |
|||
zIndex={1} |
|||
css={css({ |
|||
color: 'rgba(255,255,255,0.6)', |
|||
whiteSpace: 'pre', |
|||
fontFamily: 'Fira Code, Consolata, monospace', |
|||
fontSize: '14.556040756914118px', |
|||
lineHeight: '24px', |
|||
padding: '2px 0', |
|||
'::before': { |
|||
content: "''", |
|||
marginTop: '-0.47483499999999995em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
'::after': { |
|||
content: "''", |
|||
marginBottom: '-0.493835em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
})} |
|||
{...rest} |
|||
> |
|||
{getLineNumber(number, length)} |
|||
</Flex> |
|||
); |
|||
|
|||
const Line = ({ |
|||
tokens, |
|||
getTokenProps, |
|||
index, |
|||
length, |
|||
showLineNumbers, |
|||
hideLineHover, |
|||
highlighted, |
|||
...rest |
|||
}: { |
|||
tokens: GrammaticalToken[]; |
|||
index: number; |
|||
length: number; |
|||
getTokenProps: GetGrammaticalTokenProps; |
|||
showLineNumbers?: boolean; |
|||
hideLineHover?: boolean; |
|||
highlighted?: boolean; |
|||
}) => { |
|||
const highlightedStyle = { |
|||
bg: ['unset', 'unset', 'ink.900'], |
|||
borderColor: ['ink.900', 'ink.900', 'ink.600'], |
|||
}; |
|||
const hasHighlightComment = !!tokens.find(token => token.content === '// highlight'); |
|||
const isHighlighted = highlighted || hasHighlightComment; |
|||
const highlighedProps = isHighlighted ? highlightedStyle : {}; |
|||
|
|||
return ( |
|||
<Flex |
|||
height="loose" |
|||
align="baseline" |
|||
borderColor="ink.900" |
|||
_hover={hideLineHover ? undefined : highlightedStyle} |
|||
position="relative" |
|||
{...highlighedProps} |
|||
{...rest} |
|||
> |
|||
{showLineNumbers ? <LineNumber number={index} length={length} /> : null} |
|||
<Tokens showLineNumbers={showLineNumbers} getTokenProps={getTokenProps} tokens={tokens} /> |
|||
</Flex> |
|||
); |
|||
}; |
|||
|
|||
const Spacer = ({ showLineNumbers }: { showLineNumbers?: boolean }) => ( |
|||
<Flex height="base-loose" bg="ink" width="100%"> |
|||
{showLineNumbers && ( |
|||
<Box |
|||
height="base-loose" |
|||
borderRight="1px solid" |
|||
borderRightColor="ink.900" |
|||
width={`${LINE_NUMBER_WIDTH}px`} |
|||
/> |
|||
)} |
|||
</Flex> |
|||
); |
|||
const Lines = ({ |
|||
tokens: lines, |
|||
getLineProps, |
|||
getTokenProps, |
|||
className, |
|||
showLineNumbers, |
|||
hideLineHover, |
|||
highlightedLines, |
|||
}: { |
|||
showLineNumbers?: boolean; |
|||
hideLineHover?: boolean; |
|||
highlightedLines?: number[]; |
|||
} & RenderProps) => { |
|||
return ( |
|||
<Box display="block" className={className}> |
|||
<Box display="block" style={{ fontFamily: 'Fira Code' }}> |
|||
<Spacer showLineNumbers={showLineNumbers} /> |
|||
{lines.map((tokens, i) => ( |
|||
<Box |
|||
css={css({ |
|||
'& > *': { |
|||
fontFamily: 'Fira Code, Consolata, monospace', |
|||
fontSize: '14.556040756914118px', |
|||
lineHeight: '24px', |
|||
padding: '0.05px 0', |
|||
'::before': { |
|||
content: "''", |
|||
marginTop: '-0.47483499999999995em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
'::after': { |
|||
content: "''", |
|||
marginBottom: '-0.493835em', |
|||
display: 'block', |
|||
height: 0, |
|||
}, |
|||
}, |
|||
})} |
|||
> |
|||
<Line |
|||
index={i} |
|||
tokens={tokens} |
|||
getTokenProps={getTokenProps} |
|||
length={lines.length + 1} |
|||
showLineNumbers={showLineNumbers} |
|||
highlighted={ |
|||
highlightedLines?.length && !!highlightedLines.find(lineNumber => lineNumber === i) |
|||
} |
|||
hideLineHover={hideLineHover || lines.length < 3} |
|||
{...getLineProps({ line: tokens, key: i })} |
|||
/> |
|||
</Box> |
|||
))} |
|||
<Spacer showLineNumbers={showLineNumbers} /> |
|||
</Box> |
|||
</Box> |
|||
); |
|||
}; |
|||
|
|||
export interface HighlighterProps { |
|||
code: string; |
|||
language?: Language; |
|||
showLineNumbers?: boolean; |
|||
hideLineHover?: boolean; |
|||
highlightedLines?: number[]; |
|||
} |
|||
|
|||
export const Highlighter = React.memo( |
|||
({ |
|||
code, |
|||
language = 'clarity', |
|||
showLineNumbers, |
|||
hideLineHover, |
|||
highlightedLines, |
|||
}: HighlighterProps) => { |
|||
return ( |
|||
<Highlight Prism={Prism} theme={theme} code={code} language={language as any}> |
|||
{props => ( |
|||
<Lines |
|||
showLineNumbers={showLineNumbers} |
|||
highlightedLines={highlightedLines} |
|||
hideLineHover={hideLineHover} |
|||
{...props} |
|||
/> |
|||
)} |
|||
</Highlight> |
|||
); |
|||
} |
|||
); |
|||
|
|||
Highlighter.displayName = 'Highlighter'; |
|||
@ -0,0 +1,117 @@ |
|||
// @ts-nocheck
|
|||
import Prism from 'prism-react-renderer/prism'; |
|||
|
|||
(function (Prism) { |
|||
// Functions to construct regular expressions
|
|||
// simple form
|
|||
// e.g. (interactive ... or (interactive)
|
|||
function simple_form(name) { |
|||
return RegExp('(\\()' + name + '(?=[\\s\\)])'); |
|||
} |
|||
// booleans and numbers
|
|||
function primitive(pattern) { |
|||
return RegExp('([\\s([])' + pattern + '(?=[\\s)])'); |
|||
} |
|||
|
|||
// Patterns in regular expressions
|
|||
|
|||
// Open parenthesis for look-behind
|
|||
const par = '(\\()'; |
|||
const endpar = '(?=\\))'; |
|||
// End the pattern with look-ahead space
|
|||
const space = '(?=\\s)'; |
|||
|
|||
const language = { |
|||
// Three or four semicolons are considered a heading.
|
|||
heading: { |
|||
pattern: /;;;.*/, |
|||
alias: ['comment', 'title'], |
|||
}, |
|||
comment: /;;.*/, |
|||
string: [ |
|||
{ |
|||
pattern: /"(?:[^"\\]|\\.)*"/, |
|||
greedy: true, |
|||
}, |
|||
{ |
|||
pattern: /0x[0-9a-fA-F]*/, |
|||
greedy: true, |
|||
}, |
|||
], |
|||
symbol: { |
|||
pattern: /'[^()#'\s]+/, |
|||
greedy: true, |
|||
}, |
|||
keyword: [ |
|||
{ |
|||
pattern: RegExp( |
|||
par + |
|||
'(?:or|and|xor|not|begin|let|if|ok|err|unwrap\\!|unwrap-err\\!|unwrap-panic|unwrap-err-panic|match|try\\!|asserts\\!|\ |
|||
map-get\\?|var-get|contract-map-get\\?|get|tuple|\ |
|||
define-public|define-private|define-constant|define-map|define-data-var|\ |
|||
define-fungible-token|define-non-fungible-token|\ |
|||
define-read-only)' + |
|||
space |
|||
), |
|||
lookbehind: true, |
|||
}, |
|||
{ |
|||
pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-er)' + space), |
|||
lookbehind: true, |
|||
}, |
|||
{ |
|||
pattern: RegExp( |
|||
par + |
|||
'(?:var-set|map-set|map-delete|map-insert|\ |
|||
ft-transfer\\?|nft-transfer\\?|nft-mint\\?|ft-mint\\?|nft-get-owner\\?|ft-get-balance\\?|\ |
|||
contract-call\\?)' + |
|||
space |
|||
), |
|||
lookbehind: true, |
|||
}, |
|||
{ |
|||
pattern: RegExp( |
|||
par + |
|||
'(?:list|map|filter|fold|len|concat|append|as-max-len\\?|to-int|to-uint|\ |
|||
buff|hash160|sha256|sha512|sha512/256|keccak256|true|false|none)' + |
|||
space |
|||
), |
|||
lookbehind: true, |
|||
}, |
|||
{ |
|||
pattern: RegExp( |
|||
par + |
|||
'(?:as-contract|contract-caller|tx-sender|block-height|at-block|get-block-info\\?)' + |
|||
space |
|||
), |
|||
lookbehind: true, |
|||
}, |
|||
{ |
|||
pattern: RegExp(par + '(?:is-eq|is-some|is-none|is-ok|is-err)' + space), |
|||
lookbehind: true, |
|||
}, |
|||
], |
|||
boolean: /(?:false|true|none)/, |
|||
number: { |
|||
pattern: primitive('[-]?u?\\d+'), |
|||
lookbehind: true, |
|||
}, |
|||
address: { |
|||
pattern: /([\s()])(?:\'[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{28,41})(?=[()\s]|$)/, |
|||
lookbehind: true, |
|||
}, |
|||
operator: { |
|||
pattern: /(\()(?:[-+*\/]|[<>]=?|=>?)(?=[()\s]|$)/, |
|||
lookbehind: true, |
|||
}, |
|||
function: { |
|||
pattern: /(\()[^()'\s]+(?=[()\s]|$)/, |
|||
lookbehind: true, |
|||
}, |
|||
punctuation: /[()']/, |
|||
}; |
|||
|
|||
if (Prism && Prism.languages) { |
|||
Prism.languages.clarity = language; |
|||
} |
|||
})(Prism); |
|||
@ -0,0 +1,205 @@ |
|||
code[class*="language-"], |
|||
pre[class*="language-"] { |
|||
text-align: left; |
|||
white-space: pre; |
|||
word-spacing: normal; |
|||
word-break: normal; |
|||
word-wrap: normal; |
|||
color: #eee; |
|||
background: #2f2f2f; |
|||
font-family: Roboto Mono, monospace; |
|||
font-size: 1em; |
|||
line-height: 1.5em; |
|||
|
|||
-moz-tab-size: 4; |
|||
-o-tab-size: 4; |
|||
tab-size: 4; |
|||
|
|||
-webkit-hyphens: none; |
|||
-moz-hyphens: none; |
|||
-ms-hyphens: none; |
|||
hyphens: none; |
|||
} |
|||
|
|||
code[class*="language-"]::-moz-selection, |
|||
pre[class*="language-"]::-moz-selection, |
|||
code[class*="language-"] ::-moz-selection, |
|||
pre[class*="language-"] ::-moz-selection { |
|||
background: #363636; |
|||
} |
|||
|
|||
code[class*="language-"]::selection, |
|||
pre[class*="language-"]::selection, |
|||
code[class*="language-"] ::selection, |
|||
pre[class*="language-"] ::selection { |
|||
background: #363636; |
|||
} |
|||
|
|||
:not(pre) > code[class*="language-"] { |
|||
white-space: normal; |
|||
border-radius: 0.2em; |
|||
padding: 0.1em; |
|||
} |
|||
|
|||
pre[class*="language-"] { |
|||
overflow: auto; |
|||
position: relative; |
|||
margin: 0.5em 0; |
|||
padding: 1.25em 1em; |
|||
} |
|||
|
|||
.language-css > code, |
|||
.language-sass > code, |
|||
.language-scss > code { |
|||
color: #fd9170; |
|||
} |
|||
|
|||
[class*="language-"] .namespace { |
|||
opacity: 0.7; |
|||
} |
|||
|
|||
.token.atrule { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.attr-name { |
|||
color: #ffcb6b; |
|||
} |
|||
|
|||
.token.attr-value { |
|||
color: #a5e844; |
|||
} |
|||
|
|||
.token.attribute { |
|||
color: #a5e844; |
|||
} |
|||
|
|||
.token.boolean { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.builtin { |
|||
color: #ffcb6b; |
|||
} |
|||
|
|||
.token.cdata { |
|||
color: #80cbc4; |
|||
} |
|||
|
|||
.token.char { |
|||
color: #80cbc4; |
|||
} |
|||
|
|||
.token.class { |
|||
color: #ffcb6b; |
|||
} |
|||
|
|||
.token.class-name { |
|||
color: #f2ff00; |
|||
} |
|||
|
|||
.token.comment { |
|||
color: #616161; |
|||
} |
|||
|
|||
.token.constant { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.deleted { |
|||
color: #ff6666; |
|||
} |
|||
|
|||
.token.doctype { |
|||
color: #616161; |
|||
} |
|||
|
|||
.token.entity { |
|||
color: #ff6666; |
|||
} |
|||
|
|||
.token.function { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.hexcode { |
|||
color: #f2ff00; |
|||
} |
|||
|
|||
.token.id { |
|||
color: #c792ea; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.token.important { |
|||
color: #c792ea; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.token.inserted { |
|||
color: #80cbc4; |
|||
} |
|||
|
|||
.token.keyword { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.number { |
|||
color: #fd9170; |
|||
} |
|||
|
|||
.token.operator { |
|||
color: #89ddff; |
|||
} |
|||
|
|||
.token.prolog { |
|||
color: #616161; |
|||
} |
|||
|
|||
.token.property { |
|||
color: #80cbc4; |
|||
} |
|||
|
|||
.token.pseudo-class { |
|||
color: #a5e844; |
|||
} |
|||
|
|||
.token.pseudo-element { |
|||
color: #a5e844; |
|||
} |
|||
|
|||
.token.punctuation { |
|||
color: #89ddff; |
|||
} |
|||
|
|||
.token.regex { |
|||
color: #f2ff00; |
|||
} |
|||
|
|||
.token.selector { |
|||
color: #ff6666; |
|||
} |
|||
|
|||
.token.string { |
|||
color: #a5e844; |
|||
} |
|||
|
|||
.token.symbol { |
|||
color: #c792ea; |
|||
} |
|||
|
|||
.token.tag { |
|||
color: #ff6666; |
|||
} |
|||
|
|||
.token.unit { |
|||
color: #fd9170; |
|||
} |
|||
|
|||
.token.url { |
|||
color: #ff6666; |
|||
} |
|||
|
|||
.token.variable { |
|||
color: #ff6666; |
|||
} |
|||
@ -0,0 +1,140 @@ |
|||
import { PrismTheme } from 'prism-react-renderer'; |
|||
|
|||
export const theme: PrismTheme = { |
|||
plain: { |
|||
color: 'rgba(255,255,255,1)', |
|||
backgroundColor: '#0f111a', |
|||
}, |
|||
styles: [ |
|||
{ |
|||
types: ['string'], |
|||
style: { |
|||
color: 'rgb(195, 232, 141)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['boolean'], |
|||
style: { |
|||
color: 'rgb(255, 156, 172)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['number', 'keyword', 'operator'], |
|||
style: { |
|||
color: 'rgb(247, 140, 108)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['comment'], |
|||
style: { |
|||
color: 'rgba(255,255,255,0.6)', |
|||
fontStyle: 'italic', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['punctuation', 'builtin'], |
|||
style: { |
|||
color: 'rgb(137, 221, 255)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['tag'], |
|||
style: { |
|||
color: 'rgb(240, 113, 120)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['attr-name'], |
|||
style: { |
|||
color: 'rgb(255, 203, 107)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['function'], |
|||
style: { |
|||
color: 'rgb(130, 170, 255)', |
|||
}, |
|||
}, |
|||
{ |
|||
types: ['constant'], |
|||
style: { |
|||
color: 'rgb(137, 221, 255)', |
|||
fontStyle: 'italic', |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
// export const theme: PrismTheme = {
|
|||
// plain: {
|
|||
// color: '#fff',
|
|||
// backgroundColor: 'transparent',
|
|||
// },
|
|||
// styles: [
|
|||
// {
|
|||
// types: ['prolog'],
|
|||
// style: {
|
|||
// color: 'rgb(0, 0, 128)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['comment', 'punctuation'],
|
|||
// style: {
|
|||
// color: 'rgb(106, 153, 85)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['builtin', 'tag', 'changed', 'function', 'keyword'],
|
|||
// style: {
|
|||
// color: 'rgb(86, 156, 214)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['number', 'variable', 'inserted'],
|
|||
// style: {
|
|||
// color: '#A58FFF',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['operator'],
|
|||
// style: {
|
|||
// color: 'rgb(212, 212, 212)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['constant'],
|
|||
// style: {
|
|||
// color: 'rgb(100, 102, 149)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['attr-name'],
|
|||
// style: {
|
|||
// color: 'rgb(156, 220, 254)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['car'],
|
|||
// style: {
|
|||
// color: 'rgb(156, 220, 254)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['deleted', 'string'],
|
|||
// style: {
|
|||
// color: '#FF7B48',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['class-name'],
|
|||
// style: {
|
|||
// color: 'rgb(78, 201, 176)',
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// types: ['char'],
|
|||
// style: {
|
|||
// color: '#FF7B48',
|
|||
// },
|
|||
// },
|
|||
// ],
|
|||
// };
|
|||
@ -0,0 +1,90 @@ |
|||
import * as React from 'react'; |
|||
|
|||
export interface GrammaticalToken { |
|||
types: string[]; |
|||
content: string; |
|||
empty?: boolean; |
|||
} |
|||
|
|||
export interface StyleObj { |
|||
[key: string]: string | number | null; |
|||
} |
|||
|
|||
export interface GrammaticalTokenOutputProps { |
|||
key?: React.Key; |
|||
style?: StyleObj; |
|||
className: string; |
|||
children: string; |
|||
[otherProp: string]: any; |
|||
} |
|||
|
|||
export interface GrammaticalTokenInputProps { |
|||
key?: React.Key; |
|||
style?: StyleObj; |
|||
className?: string; |
|||
token: GrammaticalToken; |
|||
[otherProp: string]: any; |
|||
} |
|||
|
|||
export interface LineInputProps { |
|||
key?: React.Key; |
|||
style?: StyleObj; |
|||
className?: string; |
|||
line: GrammaticalToken[]; |
|||
[otherProp: string]: any; |
|||
} |
|||
|
|||
export interface LineOutputProps { |
|||
key?: React.Key; |
|||
style?: StyleObj; |
|||
className: string; |
|||
[otherProps: string]: any; |
|||
} |
|||
|
|||
export interface RenderProps { |
|||
tokens: GrammaticalToken[][]; |
|||
className: string; |
|||
style: StyleObj; |
|||
getLineProps: (input: LineInputProps) => LineOutputProps; |
|||
getTokenProps: (input: GrammaticalTokenInputProps) => GrammaticalTokenOutputProps; |
|||
} |
|||
|
|||
export type GetGrammaticalTokenProps = ( |
|||
input: GrammaticalTokenInputProps |
|||
) => GrammaticalTokenOutputProps; |
|||
|
|||
export type Language = |
|||
| 'markup' |
|||
| 'bash' |
|||
| 'clarity' |
|||
| 'clike' |
|||
| 'c' |
|||
| 'cpp' |
|||
| 'css' |
|||
| 'javascript' |
|||
| 'jsx' |
|||
| 'coffeescript' |
|||
| 'actionscript' |
|||
| 'css-extr' |
|||
| 'diff' |
|||
| 'git' |
|||
| 'go' |
|||
| 'graphql' |
|||
| 'handlebars' |
|||
| 'json' |
|||
| 'less' |
|||
| 'lisp' |
|||
| 'makefile' |
|||
| 'markdown' |
|||
| 'objectivec' |
|||
| 'ocaml' |
|||
| 'python' |
|||
| 'reason' |
|||
| 'sass' |
|||
| 'scss' |
|||
| 'sql' |
|||
| 'stylus' |
|||
| 'tsx' |
|||
| 'typescript' |
|||
| 'wasm' |
|||
| 'yaml'; |
|||
Loading…
Reference in new issue