Converted Talking Book Tool to React (BL-16410)

[josiahwall]

Devin review

---

This change is 

[greptile-apps]

Greptile Summary

This PR converts the Talking Book Tool from a pug/jQuery/DOM-class-based implementation to a React component (TalkingBookToolControls). The engine (audioRecording.ts) is refactored to drive UI via an observer pattern (registerStateListener / notifyStateChanged) instead of direct DOM mutations and delegated jQuery handlers.

• Engine decoupled from DOM: setStatus now writes to uiState.buttons and calls notifyStateChanged() rather than toggling CSS classes on #audio-* elements; the #player element is created lazily when needed instead of requiring it in the HTML.
• React UI layer added: TalkingBookToolControls.tsx renders buttons, the recording meter/device menu, and the advanced section from a single TalkingBookUiState snapshot; the canvas reference is passed to the engine via useMountEffect.
• Legacy infrastructure removed: talkingBookToolboxTool.pug, audioRecording.less, SetupTalkingBookUIElements test helper, delegated jQuery handlers, and the ToolboxRoot legacy-HTML loading path are all deleted.

Important Files Changed

Filename	Overview
src/BloomBrowserUI/bookEdit/toolbox/talkingBook/TalkingBookToolControls.tsx	New React component rendering the full talking book UI; correctly uses useMountEffect for canvas setup; TalkingBookButton destructures props in violation of the repo style guide.
src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecording.ts	Core engine refactored from DOM-manipulation to a uiState/observer pattern; delegated handlers removed in favor of public methods called directly by React; setStatus now mutates uiState and calls notifyStateChanged; getOrCreateAudioRecorder added for lazy initialization.
src/BloomBrowserUI/bookEdit/toolbox/talkingBook/talkingBookTool.tsx	New React adaptor replacing the old talkingBook.ts; delegates lifecycle events to the audioRecording engine cleanly; makeRootElement wires TalkingBookToolControls with getOrCreateAudioRecorder.
src/BloomBrowserUI/bookEdit/js/talkingBookChecksum.ts	Extracted checksum helper; the replace call only strips the first '
src/BloomBrowserUI/bookEdit/toolbox/toolbox.ts	Removed the old pug-based HTML fetch path from beginAddTool; code is correct, but a stray //} comment left over from the refactoring remains.
src/BloomBrowserUI/bookEdit/toolbox/talkingBook/audioRecordingSpec.ts	Tests updated to check uiState directly instead of DOM classes; DOM button setup removed since player is now created lazily; setupForListen call added to force player element creation before tests that need it.

_{Reviews (10): Last reviewed commit: "Converted Talking Book Tool to React (BL..." | Re-trigger Greptile}

[greptile-apps]

Only the first | is stripped. String.prototype.replace with a plain string argument stops after the first match, so a sentence like "Hello | World | test" produces checksum "Hello World | test" — the second pipe is retained. After the user deletes all delimiter characters the actual text becomes "Hello World test", so the checksums never agree and the audio markup is unnecessarily regenerated every session. Use a global regex to remove all occurrences.

Suggested change

	const adjustedMessage = message.replace("|", "");
	const adjustedMessage = message.replace(/\|/g, "");

[greptile-apps]

Device menu anchor lost on tool remount

shouldShowDeviceMenu is never reset to false in handleToolHiding() or setupForRecordingAsync(). If the user opens the device menu and then hides/reshows the tool, the React component remounts with menuAnchor reset to undefined (local useState), but uiState.shouldShowDeviceMenu is still true from the engine. The MUI Menu then renders with open={true} and anchorEl={undefined}, which causes it to appear at the wrong position (body top-left corner) rather than below the device icon.

Adding this.uiState.shouldShowDeviceMenu = false; inside handleToolHiding() would prevent the stale-open state from being carried over to the next mount.