Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add optional automatic bracket pairing to the code editor

クローズ
  • 何か問題がありますか？
#85 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
48/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
javascript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
Rust
スター
160
フォーク
64
平均マージ
1日 9時間
マージ済み PR（30日）
114

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

sysprog21/codetrial のほかの issue

sysprog21/codetrial の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。