Editable Code Block

An Editable Code Block is a text field that allows users to enter formatted code.

Installation

yarn add @twilio-paste/editable-code-block - or - yarn add @twilio-paste/core

Usage

import {
  EditableCodeBlockHeader,
  EditableCodeBlockWrapper,
  EditableCodeBlock,
} from '@twilio-paste/core/editable-code-block';

const Component = () => {
  return (
    <EditableCodeBlockWrapper>
      <EditableCodeBlockHeader>My cool example</EditableCodeBlockHeader>
      <EditableCodeBlock height="45vh" defaultLanguage="typescript" defaultValue={TypeScriptExample} />
    </EditableCodeBlockWrapper>
  );
};

Props

EditableCodeBlockWrapper

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'EDITABLE_CODE_BLOCK_WRAPPER'

Inherited props

EditableCodeBlockHeader

as

Replaces the underlying HTML tag, same as Heading

Type: any
Default: 'h3'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'EDITABLE_CODE_BLOCK_HEADER'

Inherited props

EditableCodeBlock

element

Overrides the default element name to apply unique styles with the Customization Provider

Type: any
Default: 'EDITABLE_CODE_BLOCK'

folding

Enable code folding

Type: boolean
Default: 'true'

i18nLoadingLabel

Loading label for the editor.

Type: string
Default: 'Loading code...'

indentationGuide

Show indentation guides

Type: boolean
Default: 'true'

inlineErrorHoverMessage

Hover message for the error in the editor. If null, the hover message will be cleared.

Type: any

inlineErrorIsWholeLine

Whether the error is a whole line or not.

Type: boolean
Default: 'false'

inlineErrorRange

Range of the error in the editor

Type: any

lineNumbers

Show line numbers in the gutter

Type: "on" | "off"
Default: 'on'

readOnly

Disable editing

Type: boolean
Default: 'false'

scrollBeyondLastLine

Allow scrolling beyond the last line

Type: boolean
Default: 'false'

showMinimap

Show minimap

Type: boolean
Default: 'false'