‍

Components

Integrations

CodeEditor

Der CodeEditor dient dem Bearbeiten von Code, mit Syntax-Highlighting.
<CodeEditor
  language="tsx"
  value={
    'import React, { FC } from "react";\n' +
    "\n" +
    "const ExampleCodeComponent: FC = () => {\n" +
    "  \n" +
    "  useEffect(() => {\n" +
    "    // some effect \n" +
    "  }, []);\n" +
    "  \n" +
    "  return <>Example JSX</>;\n" +
    "};"
  }
/>

Best Practices

  • Setze im language Property die Sprache passend zum Code-Inhalt. So wird das Syntax-Highlighting korrekt dargestellt.

Kombiniere mit ...

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form)‍.

Properties

PropertyTypeDescription
autoFocus
boolean
focus on the editor.
className
string
The elements class name.
copyable
booleandefault: true
Whether a button to copy the code to the clipboard is shown.
defaultValue
string
The initial code of an uncontrolled editor.
editable
booleandefault: true
This disables editing of the editor content by the user.
extensions
Extension[]
Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information. They can either be built-in extension-providing objects, such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of), or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
height
string
indentWithTab
booleandefault: true
Controls whether pressing the `Tab` key inserts a tab character and indents the text (`true`) or behaves according to the browser's default behavior (`false`).
initialState
{ json: any; fields?: Record<string, StateField<any>>; }
Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
isInvalid
booleandefault: false
Whether the editor is displayed as invalid.
isReadOnly
booleandefault: false
Whether the code can be read but not edited.
isRequired
booleandefault: false
Whether the field must be filled in. Only marks the editor as required for assistive technology — the editor does not validate itself.
language
text | go | (string & {}) | p | b | html | map | q | s | svg | m | markdown | d | in | r | apl | asc | asn | asn1 | bash | bf | BUILD | bzl | ... 196 more ...
The language the code is highlighted as. A language the editor does not know is shown as plain text.
maxHeight
string
maxWidth
string
minHeight
string
minWidth
string
placeholder
string | HTMLElement
Enables a placeholder—a piece of example content to show when the editor is empty.
root
ShadowRoot | Document
If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here. Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
selection
EditorSelection | { anchor: number; head?: number; }
The starting selection. Defaults to a cursor at the very start of the document.
showActiveLineMarker
booleandefault: true
Whether the line the cursor is on is highlighted.
showCodeFolding
booleandefault: true
Whether the gutter offers controls to fold and unfold code blocks.
showCodeIndentationMakers
booleandefault: true
Whether indentation levels are visualized with guide lines.
showLineNumbers
booleandefault: true
Whether line numbers are shown in the gutter.
showLinterMarkers
booleandefault: true
Whether linter results are shown in the gutter.
value
string
value of the auto created model in the editor.
width
string
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. `null` takes a wrapper a surrounding props context set back off, the way `tunnel: null` does for a tunnel.

Events

PropertyTypeDescription
onChange
((value: string, viewUpdate: ViewUpdate) => void)
Fired whenever a change occurs to the document.
onCreateEditor
((view: EditorView, state: EditorState) => void)
The first time the editor executes the event.
onStatistics
((data: Statistics) => void)
Some data on the statistics editor.
onUpdate
((viewUpdate: ViewUpdate) => void)
Fired whenever any state change occurs within the editor, including non-document changes like lint results.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite