Code Editor

A library to display and make changes to large blocks of code.

About

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.

Installation

yarn add @twilio-paste/code-editor-library - or - yarn add @twilio-paste/core

Examples

Basic JavaScript editor

Open in Storybook

<CodeEditor
  height="90vh"
  defaultLanguage="javascript"
  defaultValue={JavascriptExample}
/>

Code Editor with PasteTheme

Open in Storybook


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.