CodeEditor

Der CodeEditor dient dem Bearbeiten von Code, mit Syntax-Highlighting.

import { CodeEditor } from "@mittwald/flow-react-components";

<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

Property	Type	Default	Description
`autoFocus`	`boolean`	-	focus on the editor.
`className`	`string`	-	The elements class name.
`copyable`	`boolean`	true	Whether a button to copy the code to the clipboard is shown.
`defaultValue`	`string`	-	The initial code of an uncontrolled editor.
`editable`	`boolean`	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`	`boolean`	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`	`boolean`	false	Whether the editor is displayed as invalid.
`isReadOnly`	`boolean`	false	Whether the code can be read but not edited.
`isRequired`	`boolean`	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" \| ... 193 more ...`	-	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`	`boolean`	true	Whether the line the cursor is on is highlighted.
`showCodeFolding`	`boolean`	true	Whether the gutter offers controls to fold and unfold code blocks.
`showCodeIndentationMakers`	`boolean`	true	Whether indentation levels are visualized with guide lines.
`showLineNumbers`	`boolean`	true	Whether line numbers are shown in the gutter.
`showLinterMarkers`	`boolean`	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.

Events

Property	Type	Default	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	Default	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

CodeEditor

Best Practices

Kombiniere mit ...

React Hook Form

Properties

Events

Accessibility

Auf dieser Seite