Add optional automatic bracket pairing to the code editor

Start by reading web/editor.js for indentNewline and indentSelection, then web/interview.js for event handling and applyIndent. Define the setting, edit behavior, and pair tracking boundaries before implementation, including selection wrapping, delimiter skipping, paired deletion, persistence, IME and paste handling, and conservative comment or string behavior. Done means the requested bracket features preserve indentation and normal undo/redo behavior.

Problem

While writing C++ code in CodeTrial, typing an opening delimiter such as (, {, or [ does not insert its matching closing delimiter. I need to type both sides manually.

During an interview, this adds repetitive typing and can interrupt the flow of explaining my solution while coding.

Current behavior

Typing ( produces:

(|

Here, | represents the cursor.

Expected behavior

With automatic bracket pairing enabled, typing ( should produce:

(|)

The same behavior should apply to {} and [].

This proposal concerns basic editing assistance, not code generation or solution suggestions.

Existing implementation

The current editor already supports indentation:

• web/editor.js provides indentNewline and indentSelection.
• web/interview.js connects these helpers to editor events.
• indentNewline recognizes matching delimiters when arranging a newline between an existing pair, but does not insert a missing closing delimiter.

This feature could build on those editing helpers while remaining separate from automatic indentation.

Proposed behavior

1. Add an “Auto-close brackets” setting.
2. When enabled, insert the matching closing delimiter and leave the cursor between the pair.
3. When text is selected, wrap the selection with the chosen pair.
4. When the cursor is immediately before an automatically inserted closing delimiter, typing that delimiter should move past it instead of inserting a duplicate.
5. Pressing Backspace between an untouched, automatically inserted empty pair should remove both characters.
6. Preserve the existing newline indentation behavior.

The setting should be remembered across page reloads. My preference is to enable it by default while allowing users to disable it for plain-editor practice.

Suggested implementation

Editing helpers

Add pure functions to web/editor.js that compute the updated text and selection without directly changing the DOM.

For example, a helper could receive the current text, selection range, and opening delimiter, then return:

• Updated text.
• Updated selection start and end.
• Information about the automatically inserted pair, if applicable.

The delimiter mapping would be:

const BRACKET_PAIRS = {
  "(": ")",
  "[": "]",
  "{": "}",
};

Event handling

In web/interview.js, handle direct delimiter input through beforeinput, alongside the existing newline handling.

The handler should:

• Respect the user setting.
• Ignore IME composition.
• Avoid transforming paste operations.
• Only intercept supported, cancelable input events.
• Apply edits through an undo-preserving editing path.

The existing applyIndent helper could be generalized to apply editor edits, rather than adding a separate implementation that directly replaces the textarea value.

Pair tracking

Track automatically inserted pairs so that closing-delimiter skipping and paired deletion do not accidentally affect unrelated, manually entered characters.

Update or invalidate tracked pairs after edits. Clear stale tracking when the editor content is replaced or the programming language changes.

Language context

Avoid inserting unwanted pairs inside comments or string literals.

The existing indentation helper does not maintain full multiline lexical state, so it should not be treated as a complete parser for this purpose. A conservative first implementation could limit pairing to contexts it can confidently identify.

Requested features

I would like the editor to support the following features:

• Automatically insert the matching closing bracket when typing (, [, or {, with the cursor placed between the pair.
• Wrap selected text in a bracket pair without replacing the selected content.
• Allow typing past an automatically inserted closing bracket without creating a duplicate.
• Remove both brackets when pressing Backspace inside an automatically inserted empty pair.
• Keep the existing automatic indentation when pressing Enter between braces.
• Provide a setting to enable or disable automatic bracket pairing.

It would also be helpful to preserve normal undo/redo behavior and avoid interfering with IME input, pasted text, comments, or strings.

Related work

Issue #61 discusses syntax-aware automatic indentation:
https://github.com/sysprog21/codetrial/issues/61

This proposal addresses inserting matching delimiters while typing, which is separate from indentation after pressing Enter.