Code editor

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0); // the caller owns it
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0); // the caller owns it
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

6 lines · tsx

Usage

import { CodeEditor } from "@gpuixui/editor";

<CodeEditor
  value={value}
  onValueChange={setValue}
  language="tsx"
  lineNumbers
/>;

API

Prop	Type	Default	Notes
`value`	`string`	—	The controlled text. A stored value that is not text reads as an empty document.
`defaultValue`	`string`	`""`	The uncontrolled starting text. A stored value that is not text reads as an empty document.
`onValueChange`	`(value: string) => void`	—	Every edit, including Tab and Enter.
`language`	`string`	—	The tokenizer's language id. An unknown id, or one that is not text, paints plain text.
`lineNumbers`	`boolean`	`true`	Number the rows in a gutter.
`tabMode`	`"insert" \| "focus"`	`"insert"`	What Tab does. A stored name that is neither reads as the default `"insert"`.
`indent`	`string`	`" "`	The string Tab inserts. An empty string leaves Tab as the platform traversal, and a value that is not a string reads as the default.
`placeholder`	`string`	—	The editor's hint, painted in the theme's `placeholder` role and announced as the field's description; the host is handed none.
`readOnly`	`boolean`	`false`	View-only.
`disabled`	`boolean`	`false`	Not editable, out of the tab order, painted with the disabled chrome.
`minRows`	`number`	—	The least number of rows the editor paints. The highlight layer is what sizes the editor, so the floor is painted as empty rows.
`maxRows`	`number`	—	Passed to the field. The layer cannot follow a scroll (the runtime reports no offset), so it paints every line and the surface grows with the document.
`fullWidth`	`boolean`	`false`	Fill the available width.
`label`	`string`	`"Code editor"`	The accessible name. A blank or non-text name reads as the default.
`className`	`string`	—	A Tailwind class string, merged last.
`style`	`StateStyle<CodeEditorState>`	—	The surface, or a function of `{ disabled, focused }`.
`testId`	`string`	`"code-editor"`	The address an automation host locates the field by; the surface around it is `${testId}-surface`.

Keyboard

Tab: inserts the indent at the caret instead of leaving the field, when `tabMode` allows it

read from code-editor.tsx

Edit this page on GitHubpackages/editor/docs/code-editor.mdx

import { useState } from "react"; export const Counter = () => { const [count, setCount] = useState(0); // the caller owns it return <button onClick={() => setCount(count + 1)}>{count}</button>; };

API

Prop	Type	Default	Notes
`value`	`string`	—	The controlled text. A stored value that is not text reads as an empty document.
`defaultValue`	`string`	`""`	The uncontrolled starting text. A stored value that is not text reads as an empty document.
`onValueChange`	`(value: string) => void`	—	Every edit, including Tab and Enter.
`language`	`string`	—	The tokenizer's language id. An unknown id, or one that is not text, paints plain text.
`lineNumbers`	`boolean`	`true`	Number the rows in a gutter.
`tabMode`	`"insert" \| "focus"`	`"insert"`	What Tab does. A stored name that is neither reads as the default `"insert"`.
`indent`	`string`	`" "`	The string Tab inserts. An empty string leaves Tab as the platform traversal, and a value that is not a string reads as the default.
`placeholder`	`string`	—	The editor's hint, painted in the theme's `placeholder` role and announced as the field's description; the host is handed none.
`readOnly`	`boolean`	`false`	View-only.
`disabled`	`boolean`	`false`	Not editable, out of the tab order, painted with the disabled chrome.
`minRows`	`number`	—	The least number of rows the editor paints. The highlight layer is what sizes the editor, so the floor is painted as empty rows.
`maxRows`	`number`	—	Passed to the field. The layer cannot follow a scroll (the runtime reports no offset), so it paints every line and the surface grows with the document.
`fullWidth`	`boolean`	`false`	Fill the available width.
`label`	`string`	`"Code editor"`	The accessible name. A blank or non-text name reads as the default.
`className`	`string`	—	A Tailwind class string, merged last.
`style`	`StateStyle<CodeEditorState>`	—	The surface, or a function of `{ disabled, focused }`.
`testId`	`string`	`"code-editor"`	The address an automation host locates the field by; the surface around it is `${testId}-surface`.

Keyboard

Tab: inserts the indent at the caret instead of leaving the field, when `tabMode` allows it

read from code-editor.tsx

Edit this page on GitHubpackages/editor/docs/code-editor.mdx

Usage

API

On this page

Code editor

Usage

API

On this page

Code editor

UsageCopy Anchor Link

APICopy Anchor Link

On this page

Code editor

UsageCopy Anchor Link

APICopy Anchor Link

On this page

Component source — packages/editor/src/code-editor/code-editor.tsx

Usage

API

Usage

API