‍

Components

Integrations

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

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 | 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.

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