Editor & Intellisense

SlangEditor

SlangEditor.tsx is a self-contained editor panel. It renders a scrollable code area, a gutter with line numbers, a syntax-highlight overlay, a resizable log panel, and a top toolbar — all built with plain DOM elements and inline styles (no external code-editor library). The editor keeps its text in sync with SlangStore so that external code changes (e.g. loading a script from the library) are reflected without re-mounting.

Props

State Variables

Layout Structure

Key Callbacks

Syntax Highlighting

The highlightLine(line) callback converts each source line into an array of React <span> elements with inline colour styles from the active colour palette. Three line patterns are handled:

tokeniseArgs()

The inner helper splits the raw args string by comma, then for each token applies:

SlangEditorHeader

A fully controlled, stateless toolbar component. All state lives in the parent SlangEditor.

useSlangIntellisense

useSlangIntellisense(editorRef, setCode) is a React hook that attaches keyboard and input event listeners to the textarea ref and computes suggestions in real time. It returns an IntellisenseState object that the editor passes to IntellisensePopup for rendering.

IntellisenseState

interface IntellisenseState {
  visible:          boolean;            // Is the popup currently visible?
  items:            SuggestionItem[];   // Filtered suggestions to display
  selectedIndex:    number;            // Keyboard-highlighted item index
  position:         { top: number; left: number }; // px position relative to editor
  prefix:           string;            // Partial text typed so far (for replacement)
  mode:             'command' | 'variable' | 'param' | null;
  activeCommand:    string | null;     // Command name when completing params
  activeParamIndex: number;            // 0-based param position inside ()
  activeTypedArgs:  string[];          // Already-typed args (for paramGroups resolution)
}

Suggestion Modes

Keyboard Navigation

IntellisensePopup Component

A pure presentation component that renders the suggestion list as a fixed-position overlay. Each item shows a kind badge, the label, and the detail string (function signature or param type). Clicking an item calls the onSelect callback.

useCommandHover & CommandHoverTooltip

Hovering the mouse over a command name in the editor shows a rich tooltip with the full function signature (inputs → parameters → outputs). The tooltip is positioned via clientX / clientY mouse coordinates and auto-flips below or above the cursor to stay inside the viewport.

SlangConfig — Colour Settings

SlangConfig.ts defines the colour palette and intellisense knobs for the editor. Settings are persisted to localStorage under the key traderoid_slang_editor_settings and broadcast via a CustomEvent so multiple components stay in sync.

SlangColors

SlangIntellisenseSettings

Config API