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.

Disabled

Achte bei der Verwendung von Disabled darauf, dass aus dem Kontext klar wird, warum der User gerade nicht mit dem CodeEditor interagieren kann. Muss der User den Code weiterhin lesen und per Tastatur scrollen können, nutze stattdessen isReadOnly.

Kombiniere mit ...

React Hook Form

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

Properties

Property	Type	Description
`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
`isDisabled`	booleandefault: false	Whether the editor is disabled. The code can neither be edited, focused nor copied.
`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 \| p \| b \| html \| map \| q \| s \| svg \| m \| markdown \| d \| in \| r \| apl \| asc \| asn \| asn1 \| bash \| bf \| BUILD \| bzl \| c \| c++ \| cc \| cfg \| cjs \| cl \| clj \| cljc \| cljs \| cljx \| cmake \| cmake.in \| cob \| coffee \| cpp \| cpy \| cql \| cr \| cs \| css \| cts \| cxx \| cyp \| cypher \| dart \| diff \| dtd \| dyalog \| dyl \| dylan \| e \| ecl \| edn \| el \| elm \| erl \| f \| f77 \| f90 \| f95 \| factor \| feature \| for \| forth \| fs \| fth \| fun \| gradle \| groovy \| gss \| h \| h++ \| handlebars \| hbs \| hh \| hpp \| hs \| htm \| hx \| hxml \| hxx \| ini \| ino \| intr \| j2 \| jade \| java \| jinja \| jinja2 \| jl \| js \| json \| jsonld \| jsx \| ksh \| kt \| kts \| less \| liquid \| lisp \| ls \| ltx \| lua \| mbox \| md \| mjs \| mkd \| ml \| mli \| mll \| mly \| mm \| mo \| mps \| mrc \| msc \| mscgen \| mscin \| msgenny \| mts \| nb \| nix \| nq \| nsh \| nsi \| nt \| nut \| oz \| pas \| patch \| pgp \| php \| php3 \| php4 \| php5 \| php7 \| phtml \| pig \| pl \| pls \| pm \| pp \| pro \| properties \| proto \| ps1 \| psd1 \| psm1 \| pug \| pxd \| pxi \| py \| pyw \| pyx \| R \| rb \| rq \| rs \| sas \| sass \| scala \| scm \| scss \| sh \| sieve \| sig \| siv \| smackspec \| sml \| solidity \| sparql \| spec \| sql \| ss \| st \| styl \| sv \| svelte \| svh \| swift \| tcl \| tex \| textile \| toml \| ts \| tsx \| ttcn \| ttcn3 \| ttcnpp \| ttl \| v \| vb \| vbs \| vhd \| vhdl \| vtl \| vue \| wast \| wat \| webidl \| wl \| wls \| xml \| xq \| xqm \| xquery \| xqy \| xsd \| xsl \| xu \| xy \| yaml \| yml \| ys \| z80 \| dotEnv	The language the code is highlighted as.
`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

Property	Type	Description
`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

Property	Type	Description
`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.

Components

Integrations