Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Editable Code Block

Version 2.1.0GithubStorybook

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

Installation

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

Usage

Usage page anchor
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

Props page anchor

EditableCodeBlockWrapper

EditableCodeBlockWrapper page anchor

element

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

Type
string
Default
'EDITABLE_CODE_BLOCK_WRAPPER'

EditableCodeBlockHeader

EditableCodeBlockHeader page anchor

as

Replaces the underlying HTML tag, same as Heading

Type
AsTags
Default
'h3'

element

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

Type
string
Default
'EDITABLE_CODE_BLOCK_HEADER'

EditableCodeBlock

EditableCodeBlock page anchor

element

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

Type
string
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
IMarkdownString | IMarkdownString[]

inlineErrorIsWholeLine

Whether the error is a whole line or not.

Type
boolean
Default
'false'

inlineErrorRange

Range of the error in the editor

Type
IRange

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'