fix(settings): preserve key format cursor position

[eweren]

What changed

• delegate completion insertion and selection mapping to CodeMirror
• scope click-to-open handling to the editor content
• stop restarting completion for every key press
• add a Cypress regression for separators between placeholders

Why

Fixes #104.

The key-format editor restarted explicit completion before each typed character
and used a custom insertion transaction outside CodeMirror's completion
lifecycle. This kept stale completion ranges active and made the cursor jump
while composing formats such as artboard.component.

Validation

• bunx cypress run --spec cypress/e2e/keyFormatEditor.cy.ts
• bun run tsc
• bun run build
• bunx eslint src/ui/views/Settings/StringsEditor.tsx
• bunx prettier --check src/ui/views/Settings/StringsEditor.tsx cypress/e2e/keyFormatEditor.cy.ts docs/superpowers/plans/2026-07-10-key-format-cursor.md docs/superpowers/specs/2026-07-10-key-format-cursor-design.md

Summary by CodeRabbit

• Bug Fixes
  • Fixed key-format placeholder insertion so separators and caret position stay correct when combining multiple placeholders.
  • Improved placeholder autocomplete behavior so the completion menu reliably closes and updates after selection.
  • Adjusted caret rendering around placeholder badges for more consistent logical placement.
• Enhancements
  • Improved placeholder display in the key-format editor, rendering placeholder values more consistently as inline badges.
• Tests
  • Added Cypress regression coverage for placeholder autocomplete and multi-placeholder key formats.
• Chores
  • Updated local workspace ignore rules.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

The key-format editor now delegates completion insertion and click handling to CodeMirror, preserves cursor placement and completion metadata, renders placeholder badges locally, and adds a skipped Cypress regression scenario. Repository ignore rules also include .worktrees.

Changes

Key format cursor completion

Layer / File(s)	Summary
CodeMirror completion integration src/ui/views/Settings/StringsEditor.tsx	Completion insertion now sets explicit cursor selection, records the picked completion, uses CodeMirror-managed click handling, removes React-level completion handlers, and renders placeholder badges with local editor state.
Regression coverage and design cypress/e2e/keyFormatEditor.cy.ts, docs/superpowers/...	A skipped Cypress scenario checks placeholder insertion and separator preservation; accompanying plan and design documents describe completion lifecycle and caret behavior.

Worktree ignore configuration

Layer / File(s)	Summary
Worktree ignore rule .gitignore	Adds .worktrees to ignored paths.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant StringsEditor
  participant CodeMirror
  User->>StringsEditor: Click key-format editor
  StringsEditor->>CodeMirror: Start completion
  User->>CodeMirror: Select placeholder
  CodeMirror->>StringsEditor: Apply text and cursor selection
  StringsEditor->>CodeMirror: Render placeholder badge

Loading

Suggested reviewers: stepan662

Poem

I’m a rabbit, hopping through the code,
Placeholders follow a smoother road.
The cursor stays light, the dots remain,
CodeMirror guides each little train.
Hop, hop—clean keys bloom again!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The .gitignore update to ignore .worktrees is unrelated to the key format cursor fix and appears outside the stated scope.	Move the .worktrees ignore change to a separate PR unless it is required for this fix.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: fixing cursor position in the settings key format editor.
Linked Issues check	✅ Passed	The changes address issue #104 by fixing completion insertion/cursor behavior and adding a regression test for the separator case.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/ui/views/Settings/StringsEditor.tsx`:
- Around line 65-69: Remove the unused catch parameter in the try/catch around
getPlaceholders within the StringsEditor component, changing it to an optional
catch binding while preserving the existing fallback of assigning an empty array
to placeholders.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cc05d099-50f4-477c-a4ab-685d1abf784b

📥 Commits

Reviewing files that changed from the base of the PR and between 4ee86eb and c6aeba8.

📒 Files selected for processing (2)

• cypress/e2e/keyFormatEditor.cy.ts
• src/ui/views/Settings/StringsEditor.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• cypress/e2e/keyFormatEditor.cy.ts

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 555c1047f0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".