EditorStatusBar

The bar under a code editor: caret position as a "go to line" button, selection, unsaved state, language, encoding and line endings.

EditorStatusBar

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

Dark theme, EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

High contrast theme, EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

UsageLink to the section Usage

tsx

import { EditorStatusBar } from '@skribly/ui/code'

tsx

<EditorStatusBar label={t('editor.status')} position={t('editor.position', cursor)}
  onPositionPress={goToLine} positionTip={t('editor.goToLine')} isDirty={tab.dirty}
  unsavedLabel={t('editor.unsaved')} facts={[{ id: 'lang', label: language }, { id: 'eol', label: 'LF' }]} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A named group rather than a footer landmark, so several editors add no landmarks.
The caret position is not live, as it changes with every key; the unsaved state is announced once through a polite region and shown with a warning glyph and its word.
Buttons show tips on hover and keyboard focus and clear 24px; items wrap on a narrow pane.

This demo runs through axe in all three themes on every test run. See what the tests check.