[Dmitriy Antipov (THEb0nny)]

Description

This PR follows up on #10725 by adding support for placeholder, maxLength, and filter for pxtJsonOptions of type "input" in pxt.json.

This enables targets (such as pxt-ev3 for project folder names) to restrict input values, enforce character limits, and provide meaningful placeholder hints.

Changes:

• localtypings/pxtarget.d.ts:

  • Converted PxtJsonOption into a discriminated union (PxtJsonCheckboxOption | PxtJsonInputOption), ensuring strict typing and autocomplete for option properties based on type.
  • Added optional placeholder?: string, maxLength?: number, and filter?: string to PxtJsonInputOption.

• webapp/src/pxtjson.tsx:

  • Forwarded placeholder (localized with pxt.Util.rlf), maxLength, and filter to the <Input /> component.

• cli/cli.ts:

  • Registered {id:setting}${option.placeholder} into targetStrings during saveThemeJson for Crowdin localization extraction.

• react-common/components/controls/Input.tsx:

  • Filtering & Limits:
    • Added maxLength?: number prop support.
    • Updated filter to match globally (/g).
    • Added safe code-point boundary truncation (truncateToCodePointBoundary) to prevent splitting UTF-16 surrogate pairs (emoji) at maxLength.
  • Caret & Input Types:
    • Preserved caret position when invalid characters are filtered out during typing.
    • Added safe selection handling (getSelection / setCaret) guarding against DOMException on inputs that do not support selection offsets (e.g. type="number" / type="email").
  • Paste Handling:
    • Stripped line breaks (\r/\n) from pasted text in single-line inputs.
    • Sanitized the full prospective value (prefix + paste + suffix) and derived retained insertion and caret position.
    • Preserved browser native Undo history (Ctrl+Z): allowed native paste when the full prospective text is already valid, and utilized document.execCommand("insertText") for sanitized pastes.
    • Left non-text clipboard contents (images, files) to native handling.
  • IME & State:
    • Handled IME composition events (compositionstart / compositionend) to avoid interrupting multi-step character entry (e.g. CJK), while keeping intermediate callbacks active for unconstrained inputs (SearchInput, etc.).
    • Synchronized lastCommittedValueRef across change, blur, and Enter validation to prevent suppressing legitimate edits and spurious consumer state resets.
    • Ensured safe fallback when filter is undefined.

• teachertool/src/components/CriteriaInstanceDisplay.tsx:

  • Updated to use filter="[0-9]" alongside maxLength={numeric && !paramOptions ? 2 : undefined} to align with global filter regex matching.

Testing:

• Builds & Linting:
  • npx gulp cli (passed)
  • npx gulp reactCommon (passed)
  • npx gulp webapp (passed)
  • npx gulp lint (passed, 0 errors across codebase)
• Local Target Testing (pxt-ev3):
  • Tested on uploadProjectFolder with placeholder: "BrkProg_SAVE", maxLength: 20, and filter: "[a-zA-Z0-9_-]":
    • Placeholder displays correctly.
    • Typing invalid characters is blocked in real-time without resetting the cursor.
    • Pasting (valid, invalid, multi-line, or oversized strings) sanitizes properly, respects maxLength, preserves existing suffixes, and supports Ctrl+Z undo.

Example target configuration (pxtarget.json)

"pxtJsonOptions": [
    {
        "property": "uploadProjectFolder",
        "label": "Custom folder for Bluetooth upload",
        "type": "input",
        "placeholder": "BrkProg_SAVE",
        "maxLength": 32,
        "filter": "[a-zA-Z0-9_]"
    }
]

[Dmitriy Antipov (THEb0nny)]

Richard Knoll (@riknoll) please take a look

[Copilot]

🟡 Changes recommended

Unresolved input-handling regressions remove digit limits, discard valid pasted characters, and can disrupt Chinese IME composition, while new placeholders lack translation registration.

4 open issues

• Limit numeric input to two digits · New
• Filter pasted text before enforcing maxLength · New
• Register input placeholders for translation · New
• Preserve input method composition until it completes · New

What changed in this PR

This follow-up to #10725 extends target-defined pxtJsonOptions text inputs with placeholder hints, length limits, and character filtering in the project settings editor.

Changes:

• Split option typings into checkbox and input variants, with optional input-specific properties.
• Add maxLength support and global regex matching to the shared Input component.
• Forward placeholder localization lookups, length limits, and filters from project settings.

File	Description
webapp/​src/​pxtjson.tsx	Passes the new input options to the settings controls.
react-common/​components/​controls/​Input.tsx	Adds native length limits and global filter matching.
localtypings/​pxtarget.d.ts	Defines separate option variants and the new input properties.

_{Review effort: Max}

[Copilot]

🟡 Changes recommended

Replacing the public PxtJsonOption interface with a union breaks target extensions and declaration merging, while unresolved filtered-input defects can delete existing characters or save invalid text.

8 open issues

• Enforce a zero maxLength when a filter is set · New
• Avoid splitting surrogate pairs at the maxLength boundary · New
• Limit inserted text without truncating the existing suffix · New
• Preserve the caret when sanitizing filtered input · New
• Skip onChange when composition ends without a committed change · New
• Preserve input method composition until it completes
• Register input placeholders for translation
• Limit numeric input to two digits

1 resolved since last review

• Filter pasted text before enforcing maxLength

_{Review effort: Max}

[Copilot]

🟡 Changes recommended

Unresolved paste, IME, and validation defects can corrupt text, break undo, bypass length limits, and leave consumer state out of sync with the displayed value.

12 open issues

• Enforce maxLength after IME composition · New
• Sync the committed-value ref after Enter validation · New
• Preserve intermediate callbacks for unconstrained IME input · New
• Allow native paste for non-text clipboard contents · New
• Strip line breaks from pasted text before filtering · New
• Filter the prospective full value on paste · New
• Truncate pasted text at code-point boundaries · New
• Preserve undo history for valid native pastes · New
• Avoid splitting surrogate pairs at the maxLength boundary
• Preserve input method composition until it completes
• Register input placeholders for translation
• Limit numeric input to two digits

4 resolved since last review

• Skip onChange when composition ends without a committed change
• Preserve the caret when sanitizing filtered input
• Limit inserted text without truncating the existing suffix
• Enforce a zero maxLength when a filter is set

_{Review effort: Max}

[Copilot]

🟡 Changes recommended

Filtering clipboard text in isolation rejects valid insertions, while unguarded selection handling can throw or mishandle pastes on number and email inputs.

5 open issues

• Guard selection handling for inputs without selection offsets · New
• Filter the prospective full value on paste
• Preserve input method composition until it completes
• Register input placeholders for translation
• Limit numeric input to two digits

8 resolved since last review

• Preserve undo history for valid native pastes
• Truncate pasted text at code-point boundaries
• Strip line breaks from pasted text before filtering
• Allow native paste for non-text clipboard contents
• Preserve intermediate callbacks for unconstrained IME input
• Sync the committed-value ref after Enter validation
• Enforce maxLength after IME composition
• Avoid splitting surrogate pairs at the maxLength boundary

_{Review effort: Max}

[Copilot]

🔵 Needs a closer look

Human review is needed to assess input-filtering edge cases affecting caret placement, paste consistency, composition preservation, and regex safety that were omitted from the published review.

1 open issue

• Filter the prospective full value on paste

4 resolved since last review

• Guard selection handling for inputs without selection offsets
• Preserve input method composition until it completes
• Register input placeholders for translation
• Limit numeric input to two digits

_{Review effort: Max}

[Copilot]

🟡 Changes recommended

Filtered paste can lose cross-boundary regex matches and clear or duplicate existing text, while regression tests for paste behavior and length clamping are missing.

2 open issues

• Add regression tests for filtered paste and length clamping · New
• Preserve regex matches across the paste insertion boundary · New

1 resolved since last review

• Filter the prospective full value on paste

_{Review effort: Max}

[Copilot]

🟡 Changes recommended

The paste handler bypasses native undo for sanitized text and can delete unselected text after the caret when enforcing maxLength.

2 open issues

• Paste length limit can delete text after the caret · New
• Add regression tests for filtered paste and length clamping

1 resolved since last review

• Preserve regex matches across the paste insertion boundary

_{Review effort: Max}

[Dmitriy Antipov (THEb0nny)]

Joey Wunderlich (@jwunderl)
This PR is ready for human review.
Along with the core feature and Crowdin localization registration (cli.ts), I've also addressed edge cases in the shared component (caret preservation during filtering, native undo preservation on paste, IME composition, and safe UTF-16 surrogate pair truncation).

Everything has been verified:
gulp lint and gulp webapp pass cleanly with 0 errors.
Tested locally in pxt-ev3 on project folder settings.