Orqestria Download
← Back to Internal system builders

Skill · Version 1.0.0

Editor selection, focus and input

Preserves cursor meaning and keyboard behavior through editing operations, toolbar use and international text composition.

selection-focus-input-handling

Team members using this skill

See how it helps

When is it useful?

Use when a visual editor loses selection or breaks accented and composed input.

What does it help you do?

  • Maps selection through inserts, splits, merges and formatting changes.
  • Restores predictable focus after block deletion or toolbar interactions.
  • Defers structural shortcuts during active IME composition.

Try asking this

Fix our block editor so formatting preserves selection, deleting a block places focus sensibly and composed text is not interrupted. Format selected text, delete its block and enter composed characters. The cursor must move predictably, and structural shortcuts must not split an unfinished composition.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Selection, Focus & Input Handling

Use this skill when implementing cursor management, text/block selection, focus restoration, IME input composition, or keyboard navigation in visual editors.

Predictable Selection & Focus Lifecycle

  1. Preserve Selection Across Renders and Edits:
    • Never reset the caret to the start or end of a block on re-render by binding contenteditable directly to reactive state without selection mapping.
    • Use the editor library's position mapping (Selection, ResolvedPos, node key + offset) so insertions, splits, merges, and formatting changes keep the caret in the exact expected logical position.
  2. Deterministic Focus After Structural Operations:
    • Split (Enter): Move focus and caret to the start of the newly created block.
    • Merge / Backspace at Block Start: Join with the preceding text block and place the caret at the join boundary, or select an preceding atomic block (NodeSelection).
    • Delete Block: Move focus predictably to the adjacent previous or next block; if the last block is deleted, insert an empty default block and focus it.
    • Inspector / Toolbar Interaction: Modifying block attributes from a floating toolbar or side panel must either preserve the editor selection or restore focus cleanly when the user returns to typing.

IME Composition & International Input Safety

  • Never Interrupt Active IME Sessions (isComposing):
    • Users typing CJK characters, dead-key accents, or mobile predictive text rely on compositionstart $\to$ compositionupdate $\to$ compositionend.
    • Never trigger slash menus, Markdown auto-format rules (inputRules), block splits on Enter, or state-resetting re-renders while event.isComposing or view.composing is true; defer structural transforms until compositionend.

Keyboard Shortcuts & Navigation Boundaries

  • Respect Platform & Browser Shortcuts:
    • Only call event.preventDefault() when the editor actively handles the shortcut in the current context. Never swallow system shortcuts (tab switching, browser zoom, screen-reader navigation, OS clipboard/window commands).
  • Isolating Boundaries:
    • Handle arrow-key and Tab navigation cleanly across nested blocks, tables, code blocks, and embedded widgets so focus never gets trapped or jumps unexpectedly.

Checklist

  • Does the caret remain in the exact logical position across re-renders, splits, merges, and toolbar formatting?
  • Is focus placed deterministically after block creation, deletion, reordering, and modal/popover closure?
  • Are isComposing / IME composition events respected without premature shortcut or input-rule interception?
  • Are native browser and OS keyboard shortcuts preserved whenever the editor does not explicitly handle them?

Included files 1

  • SKILL.md