ReactWebHIDHealthcare ITVoice Integration

Building a Dictation-Native Report Editor for Radiology

Rebuilt a custom contentEditable report editor to work seamlessly with Dragon Medical speech-to-text and hardware dictation microphones, enabling radiologists to navigate and dictate full reports without ever touching the keyboard.

Building a Dictation-Native Report Editor for Radiology

Company

Private Limited

Domain

Teleradiology / Medical Reporting

Service

Voice-Driven Clinical Editor

Technology

Technology Stack

React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
MongoDB
MongoDB
Node.js
Node.js
Docker
Docker
01The Challenge

Problem Statement

Two Systems, One Cursor — Dragon and the App Fought Over Text Insertion

Radian Reporting is a browser-based platform used by radiologists to produce structured diagnostic reports from medical imaging studies. Reports use bracketed placeholder fields that radiologists fill via dictation. The core problem: pressing 'next field' on a hardware dictation mic moved the browser's Selection to the next bracket, but Dragon Medical — running on a separate audio path — inserted text using its own internal position model that only re-syncs on focus changes, not programmatic Selection moves. The result was dictated text landing in the wrong field. Compounding this, three different hardware device families each reported button presses with different HID codes, and Dragon's closed engine exposed no hooks for the host page to inspect or steer its internal cursor.

Key challenges included:

  • Race condition between app's WebHID field-navigation and Dragon's internal plain-text position model caused text to land in wrong report fields.
  • PowerMic II, III, and 4 each reported button presses with different HID codes — clinics rarely had uniform hardware fleets.
  • Philips SpeechMike used an entirely separate vendor protocol requiring additional normalization.
  • Dragon SpeechKit exposed no navigation hooks — the host page could not inspect or steer Dragon's internal cursor model.
  • Dragon's browser integration required a native adapter installed on clinical workstations, creating deployment friction with hospital IT teams.
  • Three report viewer roles (MIS, MRT, TYP) each had divergent editor implementations with role-specific dictation workarounds.

The solution included:

  • Wired window.NUSA_onControlDeviceEventReceived to flip a flag on first control device detection — from that point, the app's own FORWARD/REWIND handlers become no-ops, letting Dragon's native 'fast-forward = next field' perform navigation and insertion atomically.
  • Set NUSA_contentEditableDefaultSelection = false to stop Dragon from fighting the app's own selection handling on load.
  • Built DictationWebHIDSDK to normalize PowerMic II, III, 4 and SpeechMike's differing HID input reports into a single unified event model — the rest of the dictation code never needs to know which device is attached.
  • Created an in-app installer modal (InstallerModal) for radiologists to download the Nuance PowerMic Web Adapter or SpeechMike drivers directly from the report viewer — turning support tickets into one-click downloads.
  • Unified the dictation-aware editor across MIS, MRT, and TYP report viewers, eliminating role-specific workarounds and duplicated logic.
  • Implemented graceful fallback — where template brackets aren't recognized as genuine Dragon fields, the editor falls back to selection-based navigation with post-insertion redirect.
02Our Approach

Solution

Inverting Control — Letting Dragon Own Navigation to Eliminate the Race Condition

Rather than trying to keep the app's field-navigation in sync with Dragon's internal model — a race JavaScript cannot win — the fix inverted who's in charge. The moment Dragon announces a recognized control device, the app stops moving the cursor itself and lets Dragon's native 'next field' command drive both navigation and insertion as one atomic action.

03Results

Impact & Benefits

3Hardware families supported (PowerMic II/III/4, SpeechMike)
1Unified editor across MRT, MIS & TYP report viewers
0Keyboard touches needed for a full field-to-field dictation pass

Key Benefits Delivered

  • Eliminated the misplaced-text defect — dictated findings no longer land in the wrong report field once Dragon owns navigation.
  • Truly hands-free reporting — radiologists move through entire templated reports without touching a mouse or keyboard, keeping eyes on images.
  • One unified editor across MIS, MRT, and TYP report viewers, cutting duplicated logic and divergent bugs.
  • Hardware-agnostic for clinics — sites can mix Nuance PowerMic generations and Philips SpeechMike devices without platform changes.
  • Self-service driver installers shortened the path from 'device doesn't work' to 'reporting normally' without IT support tickets.
  • Graceful degradation ensures dictation works even when template brackets aren't recognized as native Dragon fields.

Let's Get Your Project Started

Ready to discuss your project? Let's connect and explore how we can help you achieve your business goals.