docs/solutions/developer-experience/2026-05-14-slate-react-native-beforeinput-formatting-needs-semantic-command-handlers.md
Slate React formatting examples used raw onDOMBeforeInput parsing for normal
editor behavior. That made users handle browser event spellings directly and
encouraged callback memoization ceremony around a runtime-owned native listener.
hovering-toolbar switched on event.inputType values such as formatBold.useMemo(() => callback, [editor]).onDOMBeforeInput. It preserves native access, but
it teaches browser quirks as normal Slate API.useMemo or useCallback. That exports
runtime listener churn as app responsibility.bold, strong, or a custom schema.Keep onDOMBeforeInput as the raw native escape hatch, but route normal
formatting behavior through a semantic command handler:
<Editable
onCommand={(command, { editor }) => {
if (command.kind !== 'format') return
switch (command.format) {
case 'bold':
case 'italic':
case 'underline':
toggleMark(editor, command.format)
return true
}
}}
/>
Inside the runtime, classify native format* beforeinput and matching hotkeys
into command objects, then invoke the semantic handler before default fallback.
Keep native listeners attached to the root and read the latest app handlers from
stable runtime state.
The runtime owns native event normalization, command classification, and DOM repair. App code owns mark schema policy. Splitting those boundaries gives raw Slate native access without forcing common examples to parse DOM event strings or memoize callbacks for listener stability.
onDOMBeforeInput examples for advanced native event escape hatches.docs/solutions/test-failures/2026-04-29-slate-browser-command-rows-must-share-app-text-policy-with-native-input.mddocs/solutions/ui-bugs/2026-04-30-slate-react-beforeinput-delete-commands-must-refresh-synced-selection.mddocs/plans/2026-05-14-slate-v2-callback-memoization-dx-ralplan.md