CodeEditor

App

Engine-agnostic code editor primitive on a textarea engine (line-number gutter, active line, theme, readonly, placeholder). M2: Tab / Shift+Tab indent (Esc then Tab leaves), Ctrl/Cmd+/ comment toggle, auto-indent, bracket and quote pairs, a toolbar (find / replace, format, copy, full screen), format-on-save. M3: diagnostics (markers in the gutter, tinted lines, a list that jumps to the spot), completion (getSuggestions, a listbox) and hover (getHover). Later: Monaco lazy engine, multi-cursor, minimap, folding, vim/emacs keymap. EJS sibling at modules/ui/CodeEditor/CodeEditor.ejs (kui-ejs) at parity: the M2 editing aids and the M3 diagnostics, completion and hover; on the server the `format` / `getSuggestions` / `getHover` options name global functions, in the browser `KuiCodeEditor.attach(root, opts)` takes functions. Used by the RulesetEditor code fields (the automation script with completion, hover and checks).

Preview

script.js

Type msg. or press Ctrl+Space for suggestions; Ctrl+/ comments a line; Ctrl+F finds.

Code

<CodeEditor id="script" language="js" value={code} onChange={setCode} showToolbar
  markers={markers} format={tidy} getSuggestions={() => names} getHover={({ word }) => help(word)} />

Preview

example.js

// Fibonacci sequence
function fib(n) {
  if (n < 2) return n;
  return fib(n - 1) + fib(n - 2);
}

for (let i = 0; i < 10; i++) {
  console.log(fib(i));
}

Read-only JavaScript snippet with line numbers.

Code

<CodeEditor
  id="example"
  label="example.js"
  language="js"
  theme="light"
  value={source}
  readonly
  showLineNumbers
/>

Preview

README.md

Editable markdown. The hidden form input is synced to the value.

Code

const [src, setSrc] = useState('# Hello');
<CodeEditor
  id="readme"
  name="readme"
  label="README.md"
  language="markdown"
  theme="dark"
  value={src}
  onChange={setSrc}
  placeholder="Start typing markdown…"
/>

CodeEditor

Script with aids (M2 / M3)

JavaScript readonly

Markdown editable