CodeArea UI Component
npm i @synerise/ds-code-area
or
yarn add @synerise/ds-code-area
To have syntax validation you need to follow the integration instructions here: https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md
import CodeArea from '@synerise/ds-code-area'
type SupportedSyntaxes = 'json' | 'javascript';
const syntaxOptions = [
{
language: 'json',
label: 'JSON'
},
{
language: 'javascript',
label: 'Javascript'
}
];
<CodeArea<SupportedSyntaxes>
syntaxOptions={syntaxOptions}
onSyntaxChange={ /* current syntax handler */ }
onChange={ /* current value handler */ }
/>
Property | Description | Type | Default |
---|---|---|---|
label | label above editor | ReactNode |
- |
description | description below editor | ReactNode |
- |
counter | limit character count | { limit: number; placement?: 'bottom' | 'top'; } |
- |
errorText | error message to show below editor (also adds "error styles") | ReactNode |
- |
syntaxOptions | array of available syntaxes | CodeAreaSyntaxOption[] |
- |
currentSyntax | current syntax of editor value | CodeAreaSyntax |
- |
allowFullscreen | renders fullscreen mode button | boolean |
- |
tooltip | tooltip text displayed next to label | ReactNode |
- |
tooltipProps | tooltip properties (see @synerise/ds-tooltip) | TooltipExtendedProps & TooltipProps |
- |
style | custom style added to outermost div | CSSProperties |
- |
className | class name to add to outermost div | string |
- |
renderFooterContent | renders custom content in footer bar | (CodeAreaStateProps) => ReactNode |
- |
renderAdditionalDescription | renders custom content above description | (CodeAreaStateProps) => ReactNode |
- |
onFullscreenChange | triggered when fullscreen is toggled on/off | (isFullscreen: boolean) => void |
- |
onSyntaxChange | triggered when user switches syntax | (newSyntax: SyntaxName) => void |
- |
texts | customise displayed texts | CodeAreaTexts |
- |
Customisable user-facing labels
Property | Description | Type | Default |
---|---|---|---|
fullscreen | fullscreen button label | ReactNode |
- |
closeFullscreen | close fullscreen button label | ReactNode |
- |
fullscreenTitle | used in fullscreen mode if no label prop provided |
ReactNode |
- |
At least one syntax option must be provided.
Property | Description | Type | Default |
---|---|---|---|
language | language of editor value
|
CodeAreaSyntax |
- |
label | optional user-friendly display name | string |
- |
See list of languages supported by monaco here: https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages.
CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;
Props passed to renderAdditionalDescription()
and renderFooterContent()
.
Property | Description | Type | Default |
---|---|---|---|
isFullscreen | is fullscreen mode on or off | boolean |
- |
count | current character count | number |
- |
isValid | is editor value valid | boolean |
- |