Code Editor
A library to display and make changes to large blocks of code.
The Code Editor allows for a full code-editing experiences on the web, including syntax highlighting and displaying line numbers.
This library is built on top of monaco-react, which wraps the Monaco Editor.
Our 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.
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.