From 96e4c4ed06a7f66aa9a92d3e1a19ad4c81970b5d Mon Sep 17 00:00:00 2001
From: Chris Klimas <hello@chrisklimas.com>
Date: Tue, 5 Nov 2024 22:33:28 -0500
Subject: [PATCH] Add preference to disable CodeMirror

---
 public/locales/en-US.json                     |  3 +-
 .../control/code-area/__mocks__/code-area.tsx | 22 ++---
 .../code-area/__tests__/code-area.test.tsx    | 93 ++++++++++++++-----
 .../control/code-area/code-area.css           | 15 +--
 .../control/code-area/code-area.tsx           | 76 ++++++++++++---
 src/dialogs/__tests__/app-prefs.test.tsx      | 57 ++++++++++++
 .../__tests__/story-javascript.test.tsx       | 58 +++++++++++-
 src/dialogs/__tests__/story-search.test.tsx   | 16 ++++
 .../__tests__/story-stylesheet.test.tsx       | 58 +++++++++++-
 src/dialogs/app-prefs.tsx                     | 16 ++++
 .../__tests__/passage-edit-contents.test.tsx  | 42 +++++++--
 .../__tests__/passage-text.test.tsx           | 14 +++
 .../__tests__/passage-toolbar.test.tsx        | 30 +++++-
 .../passage-edit/passage-edit-contents.tsx    |  5 +-
 src/dialogs/passage-edit/passage-text.tsx     | 19 ++--
 src/dialogs/passage-edit/passage-toolbar.tsx  | 19 ++--
 src/dialogs/story-javascript.tsx              | 22 ++---
 src/dialogs/story-search.tsx                  | 22 ++---
 src/dialogs/story-stylesheet.tsx              | 22 ++---
 src/store/prefs/defaults.ts                   |  1 +
 src/store/prefs/prefs.types.ts                |  4 +
 src/test-util/fakes.ts                        |  3 +
 22 files changed, 492 insertions(+), 125 deletions(-)

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
index 438de350a..616317053 100644
--- a/public/locales/en-US.json
+++ b/public/locales/en-US.json
@@ -175,7 +175,8 @@
 			"themeDark": "Dark",
 			"themeSystem": "System",
 			"theme": "Theme",
-			"title": "Preferences"
+			"title": "Preferences",
+			"useEnhancedEditors": "Use Enhanced Editors"
 		},
 		"passageEdit": {
 			"editorCrashed": "Something went wrong with this editor. Try closing it and editing this passage again.",
diff --git a/src/components/control/code-area/__mocks__/code-area.tsx b/src/components/control/code-area/__mocks__/code-area.tsx
index 3aa229534..f289f0fd9 100644
--- a/src/components/control/code-area/__mocks__/code-area.tsx
+++ b/src/components/control/code-area/__mocks__/code-area.tsx
@@ -3,19 +3,14 @@ import {CodeAreaProps} from '../code-area';
 
 export const CodeArea: React.FC<CodeAreaProps> = props => {
 	function handleOnChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-		props.onBeforeChange(
-			{
-				historySize: () => ({
-					redo: 0,
-					undo: 0
-				}),
-				mockCodeMirrorEditor: true
-			} as any,
-			{
-				mockCodeMirrorChange: true
-			} as any,
-			e.target.value
-		);
+		props.onChangeEditor?.({
+			historySize: () => ({
+				redo: 0,
+				undo: 0
+			}),
+			mockCodeMirrorEditor: true
+		} as any);
+		props.onChangeText(e.target.value);
 	}
 
 	return (
@@ -24,6 +19,7 @@ export const CodeArea: React.FC<CodeAreaProps> = props => {
 			data-font-family={props.fontFamily}
 			data-font-scale={props.fontScale}
 			data-options={JSON.stringify(props.options)}
+			data-use-code-mirror={props.useCodeMirror}
 		>
 			<label>
 				{props.label} <textarea onChange={handleOnChange} value={props.value} />
diff --git a/src/components/control/code-area/__tests__/code-area.test.tsx b/src/components/control/code-area/__tests__/code-area.test.tsx
index 75cec4dce..f1c133680 100644
--- a/src/components/control/code-area/__tests__/code-area.test.tsx
+++ b/src/components/control/code-area/__tests__/code-area.test.tsx
@@ -1,4 +1,4 @@
-import {render, screen} from '@testing-library/react';
+import {fireEvent, render, screen} from '@testing-library/react';
 import {axe} from 'jest-axe';
 import * as React from 'react';
 import {CodeArea, CodeAreaProps} from '../code-area';
@@ -9,41 +9,90 @@ describe('<CodeArea>', () => {
 	function renderComponent(props?: Partial<CodeAreaProps>) {
 		return render(
 			<CodeArea
+				id="mock-id"
 				label="mock-label"
-				onBeforeChange={jest.fn()}
+				onChangeEditor={jest.fn()}
+				onChangeText={jest.fn()}
 				value="mock-value"
 				{...props}
 			/>
 		);
 	}
 
-	it('renders the label prop', () => {
-		renderComponent({label: 'test label'});
-		expect(screen.getByLabelText('test label')).toBeInTheDocument();
-	});
+	describe('When CodeMirror is enabled', () => {
+		it('renders the label prop', () => {
+			renderComponent({label: 'test label'});
+			expect(screen.getByLabelText('test label')).toBeInTheDocument();
+		});
 
-	it('renders the value prop', () => {
-		renderComponent({value: 'test value'});
-		expect(screen.getByLabelText('mock-label')).toHaveValue('test value');
-	});
+		it('renders the value prop', () => {
+			renderComponent({value: 'test value'});
+			expect(screen.getByLabelText('mock-label')).toHaveValue('test value');
+		});
 
-	it('sets a style on the container based on the fontFamily and fontScale props', () => {
-		renderComponent({fontFamily: 'my-custom-font', fontScale: 1.5});
+		it('sets a style on the container based on the fontFamily and fontScale props', () => {
+			renderComponent({fontFamily: 'my-custom-font', fontScale: 1.5});
 
-		const inputStyle = window.getComputedStyle(
-			// eslint-disable-next-line testing-library/no-node-access
-			document.querySelector('.code-area')!
-		);
+			const inputStyle = window.getComputedStyle(
+				// eslint-disable-next-line testing-library/no-node-access
+				document.querySelector('.code-area')!
+			);
+
+			expect(inputStyle.getPropertyValue('font-family')).toBe('my-custom-font');
+			expect(inputStyle.getPropertyValue('font-size')).toBe('150%');
+		});
+
+		// Changes are handled by props on react-codemirror2 and not tested here.
+
+		it('is accessible', async () => {
+			const {container} = renderComponent();
 
-		expect(inputStyle.getPropertyValue('font-family')).toBe('my-custom-font');
-		expect(inputStyle.getPropertyValue('font-size')).toBe('150%');
+			expect(await axe(container)).toHaveNoViolations();
+		});
 	});
 
-	// Changes are handled by props on react-codemirror2 and not tested here.
+	describe('When using a browser native textarea', () => {
+		it('renders the label prop', () => {
+			renderComponent({label: 'test label', useCodeMirror: false});
+			expect(screen.getByLabelText('test label')).toBeInTheDocument();
+		});
+
+		it('renders the value prop', () => {
+			renderComponent({value: 'test value', useCodeMirror: false});
+			expect(screen.getByLabelText('mock-label')).toHaveValue('test value');
+		});
+
+		it('sets a style on the container based on the fontFamily and fontScale props', () => {
+			renderComponent({
+				fontFamily: 'my-custom-font',
+				fontScale: 1.5,
+				useCodeMirror: false
+			});
+
+			const inputStyle = window.getComputedStyle(
+				// eslint-disable-next-line testing-library/no-node-access
+				document.querySelector('.code-area')!
+			);
+
+			expect(inputStyle.getPropertyValue('font-family')).toBe('my-custom-font');
+			expect(inputStyle.getPropertyValue('font-size')).toBe('150%');
+		});
+
+		it('calls the onChangeText prop when the textarea is changed', () => {
+			const onChangeText = jest.fn();
+
+			renderComponent({onChangeText, useCodeMirror: false});
+			expect(onChangeText).not.toHaveBeenCalled();
+			fireEvent.change(screen.getByLabelText('mock-label'), {
+				target: {value: 'change'}
+			});
+			expect(onChangeText.mock.calls).toEqual([['change']]);
+		});
 
-	it('is accessible', async () => {
-		const {container} = renderComponent();
+		it('is accessible', async () => {
+			const {container} = renderComponent({useCodeMirror: false});
 
-		expect(await axe(container)).toHaveNoViolations();
+			expect(await axe(container)).toHaveNoViolations();
+		});
 	});
 });
diff --git a/src/components/control/code-area/code-area.css b/src/components/control/code-area/code-area.css
index 6c9f72e75..c697bb6a1 100644
--- a/src/components/control/code-area/code-area.css
+++ b/src/components/control/code-area/code-area.css
@@ -9,12 +9,6 @@
 }
 
 .code-area > label {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-}
-
-.code-area > label > .label {
 	display: block;
 	margin-bottom: var(--control-inner-padding);
 }
@@ -24,7 +18,7 @@
 	position: relative;
 }
 
-.code-area .CodeMirror {
+.code-area .CodeMirror, .code-area textarea.visible {
 	background: var(--white-translucent);
 	border-radius: var(--corner-round);
 	border: 1px solid var(--faint-gray);
@@ -38,6 +32,13 @@
 	width: 100%;
 }
 
+.code-area textarea.visible {
+	padding: var(--grid-size);
+	/* Undo absolute positiong above. */
+	position: static;
+	resize: none;
+}
+
 /* See https://codemirror.net/doc/manual.html#styling */
 
 .code-area .CodeMirror-placeholder.CodeMirror-line-like {
diff --git a/src/components/control/code-area/code-area.tsx b/src/components/control/code-area/code-area.tsx
index 196ef7b1c..6b27fd6b6 100644
--- a/src/components/control/code-area/code-area.tsx
+++ b/src/components/control/code-area/code-area.tsx
@@ -20,16 +20,32 @@ import {initPrefixTriggerGlobally} from '../../../codemirror/prefix-trigger';
 
 initPrefixTriggerGlobally();
 
-export interface CodeAreaProps extends IControlledCodeMirror {
+export interface CodeAreaProps extends Omit<IControlledCodeMirror, 'onBeforeChange'> {
 	fontFamily?: string;
 	fontScale?: number;
+	// ID is required because nesting the input inside the label causes screen
+	// readers to announce the label on every input, which is very annoying.
+	id: string;
 	label: string;
 	labelHidden?: boolean;
+	onChangeEditor?: (value: CodeMirror.Editor) => void;
+	onChangeText: (value: string, data?: CodeMirror.EditorChange) => void;
+	useCodeMirror?: boolean;
 	value: string;
 }
 
 export const CodeArea: React.FC<CodeAreaProps> = props => {
-	const {fontFamily, fontScale, label, ...otherProps} = props;
+	const {
+		fontFamily,
+		fontScale,
+		id,
+		label,
+		onChangeEditor,
+		onChangeText,
+		useCodeMirror,
+		...otherProps
+	} = props;
+	const containerRef = React.useRef<HTMLDivElement>(null);
 	const style: React.CSSProperties = {};
 
 	if (fontFamily) {
@@ -42,18 +58,54 @@ export const CodeArea: React.FC<CodeAreaProps> = props => {
 		style.fontSize = `${fontScale * 100}%`;
 	}
 
+	function handleCodeMirrorBeforeChange(
+		editor: CodeMirror.Editor,
+		data: CodeMirror.EditorChange,
+		text: string
+	) {
+		onChangeEditor?.(editor);
+		onChangeText(text, data);
+	}
+
+	// We need to set the ID of the underlying <textarea> ourselves if we're using
+	// CodeMirror.
+
+	React.useEffect(() => {
+		if (useCodeMirror && containerRef.current) {
+			const textarea = containerRef.current.querySelector('textarea');
+
+			if (textarea) {
+				textarea.setAttribute('id', id);
+			}
+		}
+	}, [id, useCodeMirror]);
+
 	return (
-		<div className="code-area" style={style}>
-			<label>
-				<span
-					className={classnames('label', {
-						'screen-reader-only': props.labelHidden
-					})}
-				>
-					{label}
-				</span>
-				<CodeMirror {...otherProps} />
+		<div className="code-area" ref={containerRef} style={style}>
+			<label
+				htmlFor={id}
+				className={classnames('label', {
+					'screen-reader-only': props.labelHidden
+				})}
+			>
+				{label}
 			</label>
+			{useCodeMirror ? (
+				<CodeMirror
+					{...otherProps}
+					onBeforeChange={handleCodeMirrorBeforeChange}
+				/>
+			) : (
+				<textarea
+					className="visible"
+					id={id}
+					onChange={({target}) => onChangeText(target.value)}
+					placeholder={otherProps.options?.placeholder}
+					style={style}
+				>
+					{otherProps.value}
+				</textarea>
+			)}
 		</div>
 	);
 };
diff --git a/src/dialogs/__tests__/app-prefs.test.tsx b/src/dialogs/__tests__/app-prefs.test.tsx
index 7bd21171f..6060e15f0 100644
--- a/src/dialogs/__tests__/app-prefs.test.tsx
+++ b/src/dialogs/__tests__/app-prefs.test.tsx
@@ -27,6 +27,7 @@ describe('<AppPrefsDialog>', () => {
 				<PrefInspector name="locale" />
 				<PrefInspector name="passageEditorFontFamily" />
 				<PrefInspector name="passageEditorFontScale" />
+				<PrefInspector name="useCodeMirror" />
 			</FakeStateProvider>
 		);
 	}
@@ -198,6 +199,62 @@ describe('<AppPrefsDialog>', () => {
 		).toHaveTextContent('1.25');
 	});
 
+	it('displays the CodeMirror preference', () => {
+		renderComponent({useCodeMirror: true});
+
+		expect(
+			screen.getByRole('checkbox', {
+				name: 'dialogs.appPrefs.useEnhancedEditors'
+			})
+		).toBeChecked();
+		cleanup();
+		renderComponent({useCodeMirror: false});
+		expect(
+			screen.getByRole('checkbox', {
+				name: 'dialogs.appPrefs.useEnhancedEditors'
+			})
+		).not.toBeChecked();
+	});
+
+	it('changes the CodeMirror preference and not the cursor preference when enabled', () => {
+		renderComponent({editorCursorBlinks: false, useCodeMirror: false});
+		expect(
+			screen.getByTestId('pref-inspector-useCodeMirror')
+		).toHaveTextContent('false');
+		fireEvent.click(
+			screen.getByRole('checkbox', {
+				name: 'dialogs.appPrefs.useEnhancedEditors'
+			})
+		);
+		expect(
+			screen.getByTestId('pref-inspector-editorCursorBlinks')
+		).toHaveTextContent('false');
+		expect(
+			screen.getByTestId('pref-inspector-useCodeMirror')
+		).toHaveTextContent('true');
+	});
+
+	it('changes the CodeMirror preference and the cursor preference when disabled', () => {
+		renderComponent({editorCursorBlinks: false, useCodeMirror: true});
+		expect(
+			screen.getByTestId('pref-inspector-editorCursorBlinks')
+		).toHaveTextContent('false');
+		expect(
+			screen.getByTestId('pref-inspector-useCodeMirror')
+		).toHaveTextContent('true');
+		fireEvent.click(
+			screen.getByRole('checkbox', {
+				name: 'dialogs.appPrefs.useEnhancedEditors'
+			})
+		);
+		expect(
+			screen.getByTestId('pref-inspector-editorCursorBlinks')
+		).toHaveTextContent('true');
+		expect(
+			screen.getByTestId('pref-inspector-useCodeMirror')
+		).toHaveTextContent('false');
+	});
+
 	it('is accessible', async () => {
 		const {container} = renderComponent();
 
diff --git a/src/dialogs/__tests__/story-javascript.test.tsx b/src/dialogs/__tests__/story-javascript.test.tsx
index 31c8d8a5c..4ce675ac3 100644
--- a/src/dialogs/__tests__/story-javascript.test.tsx
+++ b/src/dialogs/__tests__/story-javascript.test.tsx
@@ -105,8 +105,62 @@ describe('<StoryJavaScriptDialog>', () => {
 		).toEqual(expect.objectContaining({cursorBlinkRate: 0}));
 	});
 
-	it.todo('indents code with its indent buttons');
-	it.todo('undos and redos changes with the undo/redo buttons');
+	describe('When CodeMirror is enabled', () => {
+		it('uses CodeMirror on its code area', () => {
+			renderComponent({prefs: {useCodeMirror: true}});
+			expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+				'true'
+			);
+		});
+
+		it('shows undo, redo, and indent buttons', () => {
+			renderComponent({prefs: {useCodeMirror: true}});
+			expect(
+				screen.getByRole('button', {name: 'common.undo'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {name: 'common.redo'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {name: 'components.indentButtons.indent'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {
+					name: 'components.indentButtons.unindent'
+				})
+			).toBeInTheDocument();
+		});
+
+		it.todo('indents code with its indent buttons');
+		it.todo('undos and redos changes with the undo/redo buttons');
+	});
+
+	describe('When CodeMirror is disabled', () => {
+		it("doesn't use CodeMirror on its code area", () => {
+			renderComponent({prefs: {useCodeMirror: false}});
+			expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+				'false'
+			);
+		});
+
+		it('hides undo, redo, and indent buttons', () => {
+			renderComponent({prefs: {useCodeMirror: false}});
+			expect(
+				screen.queryByRole('button', {name: 'common.undo'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {name: 'common.redo'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {name: 'components.indentButtons.indent'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {
+					name: 'components.indentButtons.unindent'
+				})
+			).not.toBeInTheDocument();
+		});
+	});
 
 	it('is accessible', async () => {
 		const {container} = renderComponent();
diff --git a/src/dialogs/__tests__/story-search.test.tsx b/src/dialogs/__tests__/story-search.test.tsx
index 8eaedc338..2f010812b 100644
--- a/src/dialogs/__tests__/story-search.test.tsx
+++ b/src/dialogs/__tests__/story-search.test.tsx
@@ -315,6 +315,22 @@ describe('<StorySearchDialog>', () => {
 		expect(screen.getByText('dialogs.storySearch.replaceAll')).toBeDisabled();
 	});
 
+	it('uses CodeMirror on its code areas when CodeMirror is enabled', () => {
+		renderComponent({}, {prefs: {useCodeMirror: true}});
+
+		for (const area of screen.getAllByTestId('mock-code-area')) {
+			expect(area.dataset.useCodeMirror).toBe('true');
+		}
+	});
+
+	it('disables CodeMirror on its code areas when CodeMirror is disabled', () => {
+		renderComponent({}, {prefs: {useCodeMirror: false}});
+
+		for (const area of screen.getAllByTestId('mock-code-area')) {
+			expect(area.dataset.useCodeMirror).toBe('false');
+		}
+	});
+
 	it('is accessible', async () => {
 		const {container} = renderComponent();
 
diff --git a/src/dialogs/__tests__/story-stylesheet.test.tsx b/src/dialogs/__tests__/story-stylesheet.test.tsx
index 1e00ca1c4..4cf7c80e6 100644
--- a/src/dialogs/__tests__/story-stylesheet.test.tsx
+++ b/src/dialogs/__tests__/story-stylesheet.test.tsx
@@ -103,8 +103,62 @@ describe('<StoryStylesheetDialog>', () => {
 		).toEqual(expect.objectContaining({cursorBlinkRate: 0}));
 	});
 
-	it.todo('indents code with its indent buttons');
-	it.todo('undos and redos changes with the undo/redo buttons');
+	describe('When CodeMirror is enabled', () => {
+		it('uses CodeMirror on its code area', () => {
+			renderComponent({prefs: {useCodeMirror: true}});
+			expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+				'true'
+			);
+		});
+
+		it('shows undo, redo, and indent buttons', () => {
+			renderComponent({prefs: {useCodeMirror: true}});
+			expect(
+				screen.getByRole('button', {name: 'common.undo'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {name: 'common.redo'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {name: 'components.indentButtons.indent'})
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', {
+					name: 'components.indentButtons.unindent'
+				})
+			).toBeInTheDocument();
+		});
+
+		it.todo('indents code with its indent buttons');
+		it.todo('undos and redos changes with the undo/redo buttons');
+	});
+
+	describe('When CodeMirror is disabled', () => {
+		it("doesn't use CodeMirror on its code area", () => {
+			renderComponent({prefs: {useCodeMirror: false}});
+			expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+				'false'
+			);
+		});
+
+		it('hides undo, redo, and indent buttons', () => {
+			renderComponent({prefs: {useCodeMirror: false}});
+			expect(
+				screen.queryByRole('button', {name: 'common.undo'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {name: 'common.redo'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {name: 'components.indentButtons.indent'})
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', {
+					name: 'components.indentButtons.unindent'
+				})
+			).not.toBeInTheDocument();
+		});
+	});
 
 	it('is accessible', async () => {
 		const {container} = renderComponent();
diff --git a/src/dialogs/app-prefs.tsx b/src/dialogs/app-prefs.tsx
index ecd1274ac..1abf2311e 100644
--- a/src/dialogs/app-prefs.tsx
+++ b/src/dialogs/app-prefs.tsx
@@ -15,6 +15,16 @@ export const AppPrefsDialog: React.FC<
 	const {dispatch, prefs} = usePrefsContext();
 	const {t} = useTranslation();
 
+	function handleUseCodeMirrorChange(value: boolean) {
+		dispatch(setPref('useCodeMirror', value));
+
+		// If we're disabling CodeMirror, force cursor blinking on because we no longer control it.
+
+		if (!value) {
+			dispatch(setPref('editorCursorBlinks', true));
+		}
+	}
+
 	return (
 		<DialogCard
 			{...props}
@@ -58,10 +68,16 @@ export const AppPrefsDialog: React.FC<
 					{t('dialogs.appPrefs.dialogWidth')}
 				</TextSelect>
 				<CheckboxButton
+					disabled={!prefs.useCodeMirror}
 					label={t('dialogs.appPrefs.editorCursorBlinks')}
 					onChange={value => dispatch(setPref('editorCursorBlinks', value))}
 					value={prefs.editorCursorBlinks}
 				/>
+				<CheckboxButton
+					label={t('dialogs.appPrefs.useEnhancedEditors')}
+					onChange={handleUseCodeMirrorChange}
+					value={prefs.useCodeMirror}
+				/>
 				<p className="font-explanation">
 					{t('dialogs.appPrefs.fontExplanation')}
 				</p>
diff --git a/src/dialogs/passage-edit/__tests__/passage-edit-contents.test.tsx b/src/dialogs/passage-edit/__tests__/passage-edit-contents.test.tsx
index f72fd31a1..8fd547671 100644
--- a/src/dialogs/passage-edit/__tests__/passage-edit-contents.test.tsx
+++ b/src/dialogs/passage-edit/__tests__/passage-edit-contents.test.tsx
@@ -82,7 +82,7 @@ describe('<PassageEditContents>', () => {
 				).toHaveTextContent('mock-changed-text');
 			});
 
-			it('displays the format toolbar', () => {
+			it('does not disable story format extensions', () => {
 				const story = fakeStory(1);
 				const format = fakeLoadedStoryFormat({
 					name: story.storyFormat,
@@ -91,8 +91,9 @@ describe('<PassageEditContents>', () => {
 
 				renderComponent({stories: [story], storyFormats: [format]});
 				expect(
-					screen.getByTestId(`mock-story-format-toolbar-${format.id}`)
-				).toBeInTheDocument();
+					screen.getByTestId(`mock-passage-text-${story.passages[0].id}`)
+						.dataset.storyFormatExtensionsDisabled
+				).toBe('false');
 			});
 
 			it('displays the tag toolbar', () => {
@@ -102,24 +103,47 @@ describe('<PassageEditContents>', () => {
 					version: story.storyFormatVersion
 				});
 
-				renderComponent({stories: [story], storyFormats: [format]});
+				renderComponent({
+					stories: [story],
+					storyFormats: [format]
+				});
 				expect(
 					screen.getByTestId(`mock-tag-toolbar-${story.passages[0].id}`)
 				).toBeInTheDocument();
 			});
 
-			it('does not disable story format extensions', () => {
+			it('displays the format toolbar when CodeMirror is enabled', () => {
 				const story = fakeStory(1);
 				const format = fakeLoadedStoryFormat({
 					name: story.storyFormat,
 					version: story.storyFormatVersion
 				});
 
-				renderComponent({stories: [story], storyFormats: [format]});
+				renderComponent({
+					prefs: {useCodeMirror: true},
+					stories: [story],
+					storyFormats: [format]
+				});
 				expect(
-					screen.getByTestId(`mock-passage-text-${story.passages[0].id}`)
-						.dataset.storyFormatExtensionsDisabled
-				).toBe('false');
+					screen.getByTestId(`mock-story-format-toolbar-${format.id}`)
+				).toBeInTheDocument();
+			});
+
+			it("doesn't display the format toolbar when CodeMirror is enabled", () => {
+				const story = fakeStory(1);
+				const format = fakeLoadedStoryFormat({
+					name: story.storyFormat,
+					version: story.storyFormatVersion
+				});
+
+				renderComponent({
+					prefs: {useCodeMirror: false},
+					stories: [story],
+					storyFormats: [format]
+				});
+				expect(
+					screen.queryByTestId(`mock-story-format-toolbar-${format.id}`)
+				).not.toBeInTheDocument();
 			});
 
 			it('is accessible', async () => {
diff --git a/src/dialogs/passage-edit/__tests__/passage-text.test.tsx b/src/dialogs/passage-edit/__tests__/passage-text.test.tsx
index a2ad39ff8..4b2f90b3e 100644
--- a/src/dialogs/passage-edit/__tests__/passage-text.test.tsx
+++ b/src/dialogs/passage-edit/__tests__/passage-text.test.tsx
@@ -237,6 +237,20 @@ describe('<PassageText>', () => {
 		expect(onChange.mock.calls).toEqual([['mock-change2']]);
 	});
 
+	it('uses CodeMirror in the code area if enabled in preferences', () => {
+		renderComponent({}, {prefs: {useCodeMirror: true}});
+		expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+			'true'
+		);
+	});
+
+	it("doesn't use CodeMirror in the code area if disabled in preferences", () => {
+		renderComponent({}, {prefs: {useCodeMirror: false}});
+		expect(screen.getByTestId('mock-code-area')!.dataset.useCodeMirror).toBe(
+			'false'
+		);
+	});
+
 	it('is accessible', async () => {
 		jest.useRealTimers();
 
diff --git a/src/dialogs/passage-edit/__tests__/passage-toolbar.test.tsx b/src/dialogs/passage-edit/__tests__/passage-toolbar.test.tsx
index a5e55b029..9305ae290 100644
--- a/src/dialogs/passage-edit/__tests__/passage-toolbar.test.tsx
+++ b/src/dialogs/passage-edit/__tests__/passage-toolbar.test.tsx
@@ -9,15 +9,23 @@ import {
 	StoryInspector
 } from '../../../test-util';
 import {PassageToolbar} from '../passage-toolbar';
+import {usePrefsContext} from '../../../store/prefs';
 
 jest.mock('../../../components/control/menu-button');
 jest.mock('../../../components/passage/rename-passage-button');
 jest.mock('../../../components/tag/add-tag-button');
 
 const TestPassageToolbar: React.FC = () => {
+	const {prefs} = usePrefsContext();
 	const {stories} = useStoriesContext();
 
-	return <PassageToolbar passage={stories[0].passages[0]} story={stories[0]} />;
+	return (
+		<PassageToolbar
+			passage={stories[0].passages[0]}
+			story={stories[0]}
+			useCodeMirror={prefs.useCodeMirror}
+		/>
+	);
 };
 
 describe('<PassageToolbar>', () => {
@@ -99,6 +107,26 @@ describe('<PassageToolbar>', () => {
 		}
 	);
 
+	it('shows undo and redo buttons if CodeMirror is enabled in preferences', () => {
+		renderComponent({prefs: {useCodeMirror: true}});
+		expect(
+			screen.getByRole('button', {name: 'common.undo'})
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', {name: 'common.redo'})
+		).toBeInTheDocument();
+	});
+
+	it('hides undo and redo buttons if CodeMirror is disabled in preferences', () => {
+		renderComponent({prefs: {useCodeMirror: false}});
+		expect(
+			screen.queryByRole('button', {name: 'common.undo'})
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', {name: 'common.redo'})
+		).not.toBeInTheDocument();
+	});
+
 	it('is accessible', async () => {
 		const {container} = await renderComponent();
 
diff --git a/src/dialogs/passage-edit/passage-edit-contents.tsx b/src/dialogs/passage-edit/passage-edit-contents.tsx
index fcdb70ae5..2b8cbd518 100644
--- a/src/dialogs/passage-edit/passage-edit-contents.tsx
+++ b/src/dialogs/passage-edit/passage-edit-contents.tsx
@@ -13,6 +13,7 @@ import {PassageToolbar} from './passage-toolbar';
 import {StoryFormatToolbar} from './story-format-toolbar';
 import {TagToolbar} from './tag-toolbar';
 import './passage-edit-contents.css';
+import {usePrefsContext} from '../../store/prefs';
 
 export interface PassageEditContentsProps {
 	disabled?: boolean;
@@ -29,6 +30,7 @@ export const PassageEditContents: React.FC<
 	const [editorCrashed, setEditorCrashed] = React.useState(false);
 	const [cmEditor, setCmEditor] = React.useState<CodeMirror.Editor>();
 	const {ErrorBoundary, error, reset: resetError} = useErrorBoundary();
+	const {prefs} = usePrefsContext();
 	const {dispatch, stories} = useUndoableStoriesContext();
 	const {formats} = useStoryFormatsContext();
 	const passage = passageWithId(stories, storyId, passageId);
@@ -95,8 +97,9 @@ export const PassageEditContents: React.FC<
 				editor={cmEditor}
 				passage={passage}
 				story={story}
+				useCodeMirror={prefs.useCodeMirror}
 			/>
-			{storyFormatExtensionsEnabled && (
+			{prefs.useCodeMirror && storyFormatExtensionsEnabled && (
 				<StoryFormatToolbar
 					disabled={disabled}
 					editor={cmEditor}
diff --git a/src/dialogs/passage-edit/passage-text.tsx b/src/dialogs/passage-edit/passage-text.tsx
index fcee36d48..95f8c8fe6 100644
--- a/src/dialogs/passage-edit/passage-text.tsx
+++ b/src/dialogs/passage-edit/passage-text.tsx
@@ -58,17 +58,8 @@ export const PassageText: React.FC<PassageTextProps> = props => {
 		}
 	}, [localText, passage.text]);
 
-	const handleLocalChange = React.useCallback(
-		(
-			editor: CodeMirror.Editor,
-			data: CodeMirror.EditorChange,
-			text: string
-		) => {
-			// A local change has been made, e.g. the user has typed or pasted into
-			// the field. It's safe to immediately trigger a CodeMirror editor update.
-
-			onEditorChange(editor);
-
+	const handleLocalChangeText = React.useCallback(
+		(text: string) => {
 			// Set local state because the CodeMirror instance is controlled, and
 			// updates there should be immediate.
 
@@ -161,11 +152,13 @@ export const PassageText: React.FC<PassageTextProps> = props => {
 				editorDidMount={handleMount}
 				fontFamily={prefs.passageEditorFontFamily}
 				fontScale={prefs.passageEditorFontScale}
+				id={`passage-dialog-passage-text-code-area-${passage.id}`}
 				label={t('dialogs.passageEdit.passageTextEditorLabel')}
 				labelHidden
-				onBeforeChange={handleLocalChange}
-				onChange={onEditorChange}
+				onChangeEditor={onEditorChange}
+				onChangeText={handleLocalChangeText}
 				options={options}
+				useCodeMirror={prefs.useCodeMirror}
 				value={localText}
 			/>
 		</DialogEditor>
diff --git a/src/dialogs/passage-edit/passage-toolbar.tsx b/src/dialogs/passage-edit/passage-toolbar.tsx
index e54b63475..f773d697a 100644
--- a/src/dialogs/passage-edit/passage-toolbar.tsx
+++ b/src/dialogs/passage-edit/passage-toolbar.tsx
@@ -7,14 +7,14 @@ import {ButtonBar} from '../../components/container/button-bar';
 import {MenuButton} from '../../components/control/menu-button';
 import {RenamePassageButton} from '../../components/passage/rename-passage-button';
 import {AddTagButton} from '../../components/tag';
-import { TestPassageButton } from '../../routes/story-edit/toolbar/passage/test-passage-button';
+import {TestPassageButton} from '../../routes/story-edit/toolbar/passage/test-passage-button';
 import {
 	addPassageTag,
 	Passage,
 	setTagColor,
 	Story,
 	storyPassageTags,
-	updatePassage,
+	updatePassage
 } from '../../store/stories';
 import {useUndoableStoriesContext} from '../../store/undoable-stories';
 import {Color} from '../../util/color';
@@ -24,10 +24,11 @@ export interface PassageToolbarProps {
 	editor?: Editor;
 	passage: Passage;
 	story: Story;
+	useCodeMirror: boolean;
 }
 
 export const PassageToolbar: React.FC<PassageToolbarProps> = props => {
-	const {disabled, editor, passage, story} = props;
+	const {disabled, editor, passage, story, useCodeMirror} = props;
 	const {dispatch} = useUndoableStoriesContext();
 	const {t} = useTranslation();
 
@@ -63,11 +64,13 @@ export const PassageToolbar: React.FC<PassageToolbarProps> = props => {
 
 	return (
 		<ButtonBar>
-			<UndoRedoButtons
-				disabled={disabled}
-				editor={editor}
-				watch={passage.text}
-			/>
+			{useCodeMirror && (
+				<UndoRedoButtons
+					disabled={disabled}
+					editor={editor}
+					watch={passage.text}
+				/>
+			)}
 			<AddTagButton
 				disabled={disabled}
 				assignedTags={passage.tags}
diff --git a/src/dialogs/story-javascript.tsx b/src/dialogs/story-javascript.tsx
index 93f56f8f9..b9d6c77dc 100644
--- a/src/dialogs/story-javascript.tsx
+++ b/src/dialogs/story-javascript.tsx
@@ -22,12 +22,7 @@ export const StoryJavaScriptDialog: React.FC<StoryJavaScriptDialogProps> = props
 	const story = storyWithId(stories, storyId);
 	const {t} = useTranslation();
 
-	const handleChange = (
-		editor: CodeMirror.Editor,
-		data: CodeMirror.EditorChange,
-		text: string
-	) => {
-		setCmEditor(editor);
+	const handleChangeText = (text: string) => {
 		dispatch(updateStory(stories, story, {script: text}));
 	};
 
@@ -38,18 +33,22 @@ export const StoryJavaScriptDialog: React.FC<StoryJavaScriptDialogProps> = props
 			headerLabel={t('dialogs.storyJavaScript.title')}
 			maximizable
 		>
-			<ButtonBar>
-				<UndoRedoButtons editor={cmEditor} watch={story.script} />
-				<IndentButtons editor={cmEditor} />
-			</ButtonBar>
+			{prefs.useCodeMirror && (
+				<ButtonBar>
+					<UndoRedoButtons editor={cmEditor} watch={story.script} />
+					<IndentButtons editor={cmEditor} />
+				</ButtonBar>
+			)}
 			<DialogEditor>
 				<CodeArea
 					editorDidMount={setCmEditor}
 					fontFamily={prefs.codeEditorFontFamily}
 					fontScale={prefs.codeEditorFontScale}
+					id="story-javascript-dialog-code-area"
 					label={t('dialogs.storyJavaScript.editorLabel')}
 					labelHidden
-					onBeforeChange={handleChange}
+					onChangeEditor={setCmEditor}
+					onChangeText={handleChangeText}
 					options={{
 						...codeMirrorOptionsFromPrefs(prefs),
 						autofocus: true,
@@ -57,6 +56,7 @@ export const StoryJavaScriptDialog: React.FC<StoryJavaScriptDialogProps> = props
 						mode: 'javascript',
 						placeholder: t('dialogs.storyJavaScript.explanation')
 					}}
+					useCodeMirror={prefs.useCodeMirror}
 					value={story.script}
 				/>
 			</DialogEditor>
diff --git a/src/dialogs/story-search.tsx b/src/dialogs/story-search.tsx
index 95350be6c..90cb80317 100644
--- a/src/dialogs/story-search.tsx
+++ b/src/dialogs/story-search.tsx
@@ -16,6 +16,7 @@ import {
 import {useUndoableStoriesContext} from '../store/undoable-stories';
 import {DialogComponentProps} from './dialogs.types';
 import './story-search.css';
+import {usePrefsContext} from '../store/prefs';
 
 // See https://github.com/codemirror/CodeMirror/issues/5444
 
@@ -38,6 +39,7 @@ export const StorySearchDialog: React.FC<StorySearchDialogProps> = props => {
 	const {find, flags, replace, storyId, onClose, onChangeProps, ...other} =
 		props;
 	const closingRef = React.useRef(false);
+	const {prefs} = usePrefsContext();
 	const {dispatch, stories} = useUndoableStoriesContext();
 	const {t} = useTranslation();
 	const story = storyWithId(stories, storyId);
@@ -82,19 +84,11 @@ export const StorySearchDialog: React.FC<StorySearchDialogProps> = props => {
 		onClose();
 	}
 
-	function handleReplaceWithChange(
-		editor: CodeMirror.Editor,
-		data: CodeMirror.EditorChange,
-		text: string
-	) {
+	function handleReplaceWithChange(text: string) {
 		patchProps({replace: text});
 	}
 
-	function handleSearchForChange(
-		editor: CodeMirror.Editor,
-		data: CodeMirror.EditorChange,
-		text: string
-	) {
+	function handleSearchForChange(text: string) {
 		patchProps({find: text});
 	}
 
@@ -119,18 +113,22 @@ export const StorySearchDialog: React.FC<StorySearchDialogProps> = props => {
 		>
 			<div className="search-fields">
 				<CodeArea
+					id="story-search-dialog-find"
 					label={t('dialogs.storySearch.find')}
-					onBeforeChange={handleSearchForChange}
+					onChangeText={handleSearchForChange}
 					options={{
 						extraKeys: ignoreTab,
 						mode: 'text'
 					}}
+					useCodeMirror={prefs.useCodeMirror}
 					value={find}
 				/>
 				<CodeArea
+					id="story-search-dialog-replace-with"
 					label={t('dialogs.storySearch.replaceWith')}
-					onBeforeChange={handleReplaceWithChange}
+					onChangeText={handleReplaceWithChange}
 					options={{extraKeys: ignoreTab, mode: 'text'}}
+					useCodeMirror={prefs.useCodeMirror}
 					value={replace}
 				/>
 			</div>
diff --git a/src/dialogs/story-stylesheet.tsx b/src/dialogs/story-stylesheet.tsx
index f9a4d0098..6b2d87144 100644
--- a/src/dialogs/story-stylesheet.tsx
+++ b/src/dialogs/story-stylesheet.tsx
@@ -22,12 +22,7 @@ export const StoryStylesheetDialog: React.FC<StoryStylesheetDialogProps> = props
 	const story = storyWithId(stories, storyId);
 	const {t} = useTranslation();
 
-	const handleChange = (
-		editor: CodeMirror.Editor,
-		data: CodeMirror.EditorChange,
-		text: string
-	) => {
-		setCmEditor(editor);
+	const handleChangeText = (text: string) => {
 		dispatch(updateStory(stories, story, {stylesheet: text}));
 	};
 
@@ -38,18 +33,22 @@ export const StoryStylesheetDialog: React.FC<StoryStylesheetDialogProps> = props
 			headerLabel={t('dialogs.storyStylesheet.title')}
 			maximizable
 		>
-			<ButtonBar>
-				<UndoRedoButtons editor={cmEditor} watch={story.script} />
-				<IndentButtons editor={cmEditor} />
-			</ButtonBar>
+			{prefs.useCodeMirror && (
+				<ButtonBar>
+					<UndoRedoButtons editor={cmEditor} watch={story.script} />
+					<IndentButtons editor={cmEditor} />
+				</ButtonBar>
+			)}
 			<DialogEditor>
 				<CodeArea
 					editorDidMount={setCmEditor}
 					fontFamily={prefs.codeEditorFontFamily}
 					fontScale={prefs.codeEditorFontScale}
+					id="story-stylesheet-dialog-code-area"
 					label={t('dialogs.storyStylesheet.editorLabel')}
 					labelHidden
-					onBeforeChange={handleChange}
+					onChangeEditor={setCmEditor}
+					onChangeText={handleChangeText}
 					options={{
 						...codeMirrorOptionsFromPrefs(prefs),
 						autofocus: true,
@@ -57,6 +56,7 @@ export const StoryStylesheetDialog: React.FC<StoryStylesheetDialogProps> = props
 						mode: 'css',
 						placeholder: t('dialogs.storyStylesheet.explanation')
 					}}
+					useCodeMirror={prefs.useCodeMirror}
 					value={story.stylesheet}
 				/>
 			</DialogEditor>
diff --git a/src/store/prefs/defaults.ts b/src/store/prefs/defaults.ts
index c4a7b4d62..2715ef0cf 100644
--- a/src/store/prefs/defaults.ts
+++ b/src/store/prefs/defaults.ts
@@ -31,5 +31,6 @@ export const defaults = (): PrefsState => ({
 	storyListSort: 'name',
 	storyListTagFilter: [],
 	storyTagColors: {},
+	useCodeMirror: true,
 	welcomeSeen: false
 });
diff --git a/src/store/prefs/prefs.types.ts b/src/store/prefs/prefs.types.ts
index 5260b1125..7f6644c95 100644
--- a/src/store/prefs/prefs.types.ts
+++ b/src/store/prefs/prefs.types.ts
@@ -106,6 +106,10 @@ export interface PrefsState {
 	 * Colors for story tags.
 	 */
 	storyTagColors: Record<string, Color>;
+	/**
+	 * Use CodeMirror for text editing?
+	 */
+	useCodeMirror: boolean;
 	/**
 	 * Has the user been shown the welcome route?
 	 */
diff --git a/src/test-util/fakes.ts b/src/test-util/fakes.ts
index 8615c124d..d18de88ea 100644
--- a/src/test-util/fakes.ts
+++ b/src/test-util/fakes.ts
@@ -139,6 +139,9 @@ export function fakePrefs(overrides?: Partial<PrefsState>): PrefsState {
 		storyListSort: faker.helpers.arrayElement(['date', 'name']),
 		storyListTagFilter: [],
 		storyTagColors: {[tags[0]]: 'red', [tags[1]]: 'green', [tags[2]]: 'blue'},
+		// Changing this preference should be explicit in a test because it affects
+		// editorCursorBlinks in some contexts.
+		useCodeMirror: true,
 		welcomeSeen: faker.datatype.boolean(),
 		...overrides
 	};