Add auto indentation to the current code editor by CX330Blake · Pull Request #59 · sysprog21/codetrial

CX330Blake · 2026-09-17T10:59:43Z

Summary

Reduce manual formatting during interviews by preserving the current
line indentation and adding one level after opening delimiters and
Python block statements.

Keep delimiter pairs readable by moving matching closing delimiters onto
a separate line when appropriate. Avoid treating comment-only lines as
block openers so comments do not introduce unexpected indentation.

Add regression tests to cover indentation behavior, comments, and C++
preprocessor directives.

Known Limitations

Trailing comments are not parsed syntax-aware, so block openers before
a trailing comment like int func() { // may not trigger the expected
indentation.
Continuation lines inside multi-line block comments are not detected
as comment-only lines.

These cases are intentionally left for a follow-up to keep this change
lightweight.

jserv

Read https://chris.beams.io/git-commit carefully and enforce the rules.

ColtenOuO

Overall, I think this is heading in the right direction, just left a few small suggestions and minor issues to address.

ColtenOuO · 2026-09-17T15:09:01Z

+  const lineStart = start === 0 ? 0 : value.lastIndexOf("\n", start - 1) + 1;
+  const before = value.slice(lineStart, start);
+  const indentation = before.match(/^[ \t]*/)[0];
+  const opener = before.trimEnd().slice(-1);


This is fine to handle as a follow-up, but I'd suggest mentioning it in the PR description for future reference.

ColtenOuO · 2026-09-17T15:15:43Z

+    );
+  }
+});
+


I'd suggest adding some tests for the newly added comment handling.

ex.

[" # Steps:", "python"] [" // setup {", "javascript"] ["if ready: # explain", "python"] ["run(); // setup {", "javascript"]

ColtenOuO

By the way, some of the intermediate review commits can be squashed together.

ColtenOuO

Would it be worth adding a browser integration test (actually interact with the textarea via Playwright)? Right now, we can only verify whether individual methods work correctly, but we can't validate if the full end-to-end user behavior in the browser matches our expectations.

It might be worth adding because the entire flow actually involves multiple steps. Testing just one part of those steps might not give us comprehensive coverage.

Reduce manual formatting during interviews by preserving the current line indentation and adding one level after opening delimiters and Python block statements. Keep delimiter pairs readable by moving matching closing delimiters onto a separate line when appropriate. Avoid treating comment-only lines as block openers so comments do not introduce unexpected indentation. Add regression tests to cover indentation behavior, comments, and C++ preprocessor directives.

CX330Blake · 2026-09-18T13:23:05Z

Would it be worth adding a browser integration test (actually interact with the textarea via Playwright)? Right now, we can only verify whether individual methods work correctly, but we can't validate if the full end-to-end user behavior in the browser matches our expectations.

It might be worth adding because the entire flow actually involves multiple steps. Testing just one part of those steps might not give us comprehensive coverage.

Added Playwright integration tests that interact with the actual editor textarea, press Enter, and verify indentation and caret position across nine cases. They also check syntax highlighting, line numbers, undo/redo, and code retention when switching languages.

ColtenOuO

I think we are almost there.

ColtenOuO · 2026-09-18T15:35:22Z

+  if (language === "python") {
+    return /^[ \t]*#/.test(line);
+  }
+  return /^[ \t]*(\/\/|\/\*)/.test(line);


isCommentOnlyLine() treats any C-like line starting with /* as comment-only, even when the comment closes and code follows.

For example, pressing Enter after /* guard */ if (ready) { preserves the current indentation instead of adding one level.

Could we either handle text after */ or explicitly track this case in #61?

Since this is not a common case people are likely to encounter in normal coding, I think we can leave it as a follow-up. I've added this case to #61 for tracking. Thanks for reviewing!

ColtenOuO

LGTM, thanks for your contribution and patience!

jserv · 2026-09-18T23:28:58Z

@@ -1,5 +1,41 @@
 const INDENT = "    ";

+// TODO: The current implementation cannot handle cases like:


The repository carries no other TODO in first-party code, and this one records a limitation the pull request description already states, so once this merges it is a marker nothing tracks. Say what isCommentOnlyLine actually does instead: it classifies on the first token of a single line and carries no block comment state, which is why a continuation line inside /* ... */ reads as code.

jserv · 2026-09-18T23:29:05Z

+  if (language === "python") {
+    return /^[ \t]*#/.test(line);
+  }
+  return /^[ \t]*(\/\/|\/\*)/.test(line);


This matches any line whose first token opens a block comment, even when the comment closes and real code follows, so /* seed */ if (ready) { is classified as a comment and the next line loses its level. Requiring the comment to stay open on the line keeps the intended cases and drops this one.

Suggested change

return /^[ \t]*(\/\/|\/\*)/.test(line);

return /^[ \t]*(\/\/|\/\*(?!.*\*\/))/.test(line);

jserv · 2026-09-18T23:29:14Z

+  const lineStart = start === 0 ? 0 : value.lastIndexOf("\n", start - 1) + 1;
+  const before = value.slice(lineStart, start);
+  const indentation = before.match(/^[ \t]*/)[0];
+  const opener = before.trimEnd().slice(-1);


opener reads the raw line, so a trailing comment that ends in a delimiter or a colon adds a level the code never opened: work(); // { in JavaScript and value = 1 # note: in Python both indent the next line. The description covers the opposite direction (a real opener hidden before a trailing comment); this direction costs the candidate a deletion on every such line, so cutting the comment tail before reading the last token is worth doing here rather than in a follow-up.

CX330Blake marked this pull request as ready for review September 17, 2026 11:00

This comment was marked as resolved.

Sign in to view

CX330Blake force-pushed the c-branch-1 branch from 2fd3c0f to 34af192 Compare September 17, 2026 11:04

jserv requested a review from ColtenOuO September 17, 2026 12:25

jserv reviewed Sep 17, 2026

View reviewed changes

Comment thread web/editor.js Outdated

jserv reviewed Sep 17, 2026

View reviewed changes

Comment thread tests/browser/editor.test.js Outdated

This comment was marked as resolved.

Sign in to view

CX330Blake force-pushed the c-branch-1 branch from 76f3fc3 to 7ccb3eb Compare September 17, 2026 14:52

jserv requested changes Sep 17, 2026

View reviewed changes

ColtenOuO reviewed Sep 17, 2026

View reviewed changes

CX330Blake force-pushed the c-branch-1 branch from 7ccb3eb to 0164ead Compare September 17, 2026 17:44

ColtenOuO reviewed Sep 17, 2026

View reviewed changes

Comment thread web/editor.js

CX330Blake mentioned this pull request Sep 18, 2026

Improve syntax-aware auto indentation #61

Open

CX330Blake force-pushed the c-branch-1 branch from 0164ead to 7121790 Compare September 18, 2026 13:22

ColtenOuO reviewed Sep 18, 2026

View reviewed changes

ColtenOuO approved these changes Sep 18, 2026

View reviewed changes

ColtenOuO requested a review from jserv September 18, 2026 16:41

jserv reviewed Sep 18, 2026

View reviewed changes

		@@ -1,5 +1,41 @@
		const INDENT = " ";

		// TODO: The current implementation cannot handle cases like:

	return /^[ \t](\/\/\|\/\)/.test(line);
	return /^[ \t](\/\/\|\/\(?!.\\/))/.test(line);

Conversation

CX330Blake commented Sep 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Known Limitations

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

jserv left a comment

Choose a reason for hiding this comment

Uh oh!

ColtenOuO left a comment

Choose a reason for hiding this comment

Uh oh!

ColtenOuO Sep 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ColtenOuO Sep 17, 2026

Choose a reason for hiding this comment

Uh oh!

ColtenOuO left a comment

Choose a reason for hiding this comment

Uh oh!

ColtenOuO left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

CX330Blake commented Sep 18, 2026

Uh oh!

ColtenOuO left a comment

Choose a reason for hiding this comment

Uh oh!

ColtenOuO Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

CX330Blake Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

ColtenOuO left a comment

Choose a reason for hiding this comment

Uh oh!

jserv Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

jserv Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

jserv Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CX330Blake commented Sep 17, 2026 •

edited

Loading