Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: swap site codeblock for our code block (#3171)
* feat: swap site codeblock for our code block * feat(inline-code): match default to minimal styles and hide minimal * chore: remove last mention of minimal inline code * chore: inherit text color on inline code for linked code`
- Loading branch information
Showing
20 changed files
with
135 additions
and
226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@twilio-paste/inline-code': patch | ||
| '@twilio-paste/core': patch | ||
| --- | ||
|
|
||
| [Inline Code] Design upate to the default inline code to match the minimal styles with a view to deprecating "blue" inline code styles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 14 additions & 86 deletions
100
packages/paste-website/src/components/codeblock/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,90 +1,18 @@ | ||
| import * as React from 'react'; | ||
| import {styled, themeGet} from '@twilio-paste/styling-library'; | ||
| import Highlight, {defaultProps} from 'prism-react-renderer'; | ||
| import type {CodeBlockProps} from '@twilio-paste/code-block'; | ||
| import {CodeBlock} from '@twilio-paste/code-block'; | ||
|
|
||
| import {CodeblockTheme} from '../shortcodes/live-preview/theme'; | ||
|
|
||
| const StyledCode = styled.code((props) => ({ | ||
| display: 'block', | ||
| borderRadius: themeGet('radii.borderRadius20')(props), | ||
| height: '100%', | ||
| fontFamily: themeGet('fonts.fontFamilyCode')(props), | ||
| fontSize: 'inherit', | ||
| lineHeight: themeGet('lineHeights.lineHeight30')(props), | ||
| overflowX: 'auto', | ||
| padding: `${themeGet('space.space40')(props)} ${themeGet('space.space60')(props)}`, | ||
| whiteSpace: 'pre-wrap', | ||
| })); | ||
|
|
||
| export type Language = | ||
| | 'markup' | ||
| | 'bash' | ||
| | 'clike' | ||
| | 'c' | ||
| | 'cpp' | ||
| | 'css' | ||
| | 'javascript' | ||
| | 'jsx' | ||
| | 'coffeescript' | ||
| | 'actionscript' | ||
| | 'css-extr' | ||
| | 'diff' | ||
| | 'git' | ||
| | 'go' | ||
| | 'graphql' | ||
| | 'handlebars' | ||
| | 'json' | ||
| | 'less' | ||
| | 'makefile' | ||
| | 'markdown' | ||
| | 'objectivec' | ||
| | 'ocaml' | ||
| | 'python' | ||
| | 'reason' | ||
| | 'sass' | ||
| | 'scss' | ||
| | 'sql' | ||
| | 'stylus' | ||
| | 'typescript' | ||
| | 'wasm' | ||
| | 'yaml'; | ||
|
|
||
| export interface CodeblockProps extends React.ComponentProps<'code'> { | ||
| children: string; | ||
| className?: string; | ||
| live?: boolean; | ||
| } | ||
|
|
||
| const Codeblock: React.FC<React.PropsWithChildren<CodeblockProps>> = ({children, className = 'language-jsx'}) => { | ||
| const language = className.replace(/language-/, '') as Language; | ||
|
|
||
| return ( | ||
| <Highlight {...defaultProps} code={children} language={language} theme={CodeblockTheme}> | ||
| {({className: _className, style, tokens, getLineProps, getTokenProps}) => { | ||
| const lastLineIndex = tokens.length - 1; | ||
| return ( | ||
| <StyledCode className={_className} style={style}> | ||
| {tokens.map((line, i) => { | ||
| // Codeblocks keep adding an extra blank line, this checks for that and removes it | ||
| if (i === lastLineIndex && line.length === 1 && (line[0].content === '' || line[0].empty)) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <div key={`line-${i}`} {...getLineProps({line, key: i})}> | ||
| {line.map((token, key) => ( | ||
| // eslint-disable-next-line react/no-array-index-key | ||
| <span key={`token-${key}`} {...getTokenProps({token, key})} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| })} | ||
| </StyledCode> | ||
| ); | ||
| }} | ||
| </Highlight> | ||
| ); | ||
| export type CodeblockProps = CodeBlockProps & { | ||
| className: string; | ||
| }; | ||
|
|
||
| export {Codeblock}; | ||
| export const Codeblock: React.FC<React.PropsWithChildren<CodeblockProps>> = ({ | ||
| children, | ||
| className = 'language-jsx', | ||
| }) => { | ||
| if (children == null) { | ||
| return null; | ||
| } | ||
| const language = className.replace(/language-/, '') as CodeBlockProps['language']; | ||
| return <CodeBlock code={children} language={language} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.