Code Editor
A library to display and make changes to large blocks of code.
The Code Editor library is the code editor that powers the stylized Editable Code Block component. It allows for full code-editing functionality on the web, including syntax highlighting and displaying line numbers.
This library is built on top of monaco-react, which wraps the
Monaco Editor. The library exposes a theme for use in Twilio products, aptly called the PasteTheme. This theme is based on the
Night Owl theme by Sarah Drasner.
(information)
Are you looking for stylized UI components?
For fully styled components, use the Editable Code Block. Or if you don't need editing functionality, use the Code Block.
yarn add @twilio-paste/code-editor-library - or - yarn add @twilio-paste/core
<CodeEditor
height="90vh"
defaultLanguage="javascript"
defaultValue={JavascriptExample}
/>
const handleEditorDidMount = (editor: Editor.IStandaloneCodeEditor, monaco: Monaco): void => {
monaco.editor.defineTheme('paste', CodeEditorPasteTheme);
monaco.editor.setTheme('paste');
};
const PasteThemeEditor = (): React.ReactNode => {
return (
<CodeEditor
onMount={handleEditorDidMount}
options={{
scrollBeyondLastLine: false,
readOnly: false,
wordWrap: 'wordWrapColumn',
wordWrapColumn: 120,
scrollbar: {
verticalScrollbarSize: 8,
horizontalScrollbarSize: 8,
},
}}
height="70vh"
defaultLanguage="typescript"
defaultValue={TypescriptExample}
/>
);
};See more examples on our Storybook.