Skip to content

Enhance code editor typing experience (bracket matching, auto-close, resize) #8266

@enkr1

Description

@enkr1

Problem

The code editor in programming assessments lacks basic IDE typing features and has a fixed, non-resizable height.

Changes

IDE typing features (EditorField.tsx)

  • Auto-close brackets/quotes (behavioursEnabled)
  • Wrap selection with brackets/quotes (wrapBehavioursEnabled)
  • Multi-cursor via Cmd+D / Ctrl+D (enableMultiselect)
  • Active line + selected word highlighting
  • Remove print margin line

Autocomplete explicitly OFF — exam fairness preserved.

Resizable editor (Editor.jsx)

  • Replace fixed 25-line height with CSS resize: vertical drag handle
  • ResizeObserver keeps Ace in sync with container size
  • Default 400px, min 200px

Tests

  • Verify IDE options enabled
  • Verify autocomplete options are false

Not in scope

  • Autocomplete (exam integrity)
  • Editor library swap (future — CodeMirror 6 or Monaco)

Related: #6400, #307

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions