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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions