Skip to main content

CodeEditor

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/organisms/codeEditor/src/types/CodeEditor.types.ts (package @dtsl/naos-code-editor, exported as CodeEditor)

Built on CodeMirror (@codemirror/*, @uiw/react-codemirror).

Props (verbatim from source, partial — file continues beyond what's shown)​

export interface CodeEditorProps {
	/** Unique identifier for the editor */
	id?: string
	/** Current value of the editor */
	value?: string
	/** Callback when the editor value changes */
	onChange?: (value: string) => void
	/** Height of the editor (number in px or CSS string) */
	height?: number | string
	/** Width of the editor (number in px or CSS string) */
	width?: number | string
	/** Whether to show line numbers in the gutter */
	showLineNumbers?: boolean
	/** Whether the editor is read-only */
	readOnly?: boolean
	/** Whether the editor is disabled */
	disabled?: boolean
	/** Additional CodeMirror extensions */
	extensions?: Array<Extension | null | undefined>
	/** Additional CSS class name */
	className?: string
	// ...file continues; see source for full shape (chip annotations, error summary props, etc.)
}

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. plain Input/TextArea for non-code text entry).

Decision Logic​

TODO — needs UX/product input.

Accessibility​

TODO — needs UX/product input. Code editors typically have non-trivial keyboard-navigation/screen-reader implications — needs verification against the actual CodeMirror integration, not assumed here.

Common Mistakes​

TODO — needs UX/product input.