Skip to content

usage.md

Latest commit

 

History

History
65 lines (52 loc) · 2.95 KB

usage.md

File metadata and controls

65 lines (52 loc) · 2.95 KB

Usage

Quick start

import { useRef } from 'react';
import SourceEditor, {
  type SourceEditorRef,
} from '@workspace-sh/react-native-source-editor';

export default function Editor() {
  const ref = useRef<SourceEditorRef>(null);

  return (
    <SourceEditor
      ref={ref}
      defaultValue="// hello"
      editable
      theme="auto"
      font={{ size: 14 }}
      onChangeText={(text) => console.log(text)}
      onSelectionChange={(sel) => console.log(sel)}
      style={{ flex: 1 }}
    />
  );
}

Props

Prop Type Default Notes
value string — Controlled mode. When set, the editor mirrors this value on every render.
defaultValue string '' Uncontrolled initial text. Ignored if value is provided.
editable boolean true Disables editing when false.
font { family?: string; size?: number } system mono @ 14 Falls back to monospaced system font if family is missing or unresolvable.
theme 'light' | 'dark' | 'auto' 'auto' auto follows system appearance.
language 'plaintext' | 'markdown' | 'json' | 'javascript' | 'typescript' | 'html' 'plaintext' Syntax highlighting. iOS / macOS use STTextView's attributed-text highlighter; Android uses Sora-Editor's TextMate registry with VS Code grammars (1.94.0). On iOS / macOS, html highlights nested CSS (in <style>) and JS (in <script>); on Android the TextMate HTML grammar covers tags + attributes but does not recurse into nested CSS / JS. Colours respect theme.
lineNumbers boolean false Toggles the line-number gutter. Runtime-settable on all platforms — flipping the prop adds/removes the gutter in place without remounting.
contentInsets { top?, bottom?, left?, right? } (numbers) 0 Padding inside the text container. Use to keep first/last lines clear of floating UI like translucent headers/footers. iOS / macOS use the platform's UIEdgeInsets semantics on the text container; Android maps to View.setPadding (dp → raw px via display-metrics).
onChangeText (text: string) => void — Fires on every text change.
onSelectionChange (selection: { start: number; end: number }) => void — Fires on selection updates.
style StyleProp<ViewStyle> — Standard RN style.

Imperative ref API

type SourceEditorRef = {
  focus: () => void;
  blur: () => void;
  getSelection: () => { start: number; end: number };
};

getSelection() returns the last selection seen via onSelectionChange — no extra native round-trip.

Lower-level surface

If you need raw native props/events without the controlled-mode wrapper, import SourceEditorView directly:

import { SourceEditorView } from '@workspace-sh/react-native-source-editor';

It accepts text (set-only), editable, font, theme, plus onChangeText / onSelectionChange callbacks that receive { nativeEvent: ... } objects.