Merge pull request #1566 from klembot/native-code-area-improvements

Small improvements to non-CodeMirror editor

src/components/container/dialog-card/dialog-editor.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import './dialog-editor.css';
 
-export const DialogEditor: React.FC = props => (
-	<div className="dialog-editor">{props.children}</div>
+export type DialogEditorProps = React.ComponentPropsWithoutRef<'div'>;
+
+export const DialogEditor = React.forwardRef<HTMLDivElement, DialogEditorProps>(
+	(props, ref) => (
+		<div className="dialog-editor" ref={ref}>
+			{props.children}
+		</div>
+	)
 );

src/dialogs/passage-edit/passage-edit-contents.css

@@ -6,4 +6,15 @@
 
 .passage-edit-contents .tags {
 	padding: var(--grid-size);
+}
+
+/* Needed when CodeMirror is disabled. */
+
+.passage-edit-contents .dialog-editor textarea {
+	border-radius: 0;
+}
+
+.passage-edit-contents .dialog-editor textarea:focus {
+	box-shadow: inset 0 0 0px 2px var(--blue);
+	outline: none;
 }

src/dialogs/passage-edit/passage-text.tsx

@@ -34,6 +34,7 @@ export const PassageText: React.FC<PassageTextProps> = props => {
 	const autocompletePassageNames = useCodeMirrorPassageHints(story);
 	const mode =
 		useFormatCodeMirrorMode(storyFormat.name, storyFormat.version) ?? 'text';
+	const codeAreaContainerRef = React.useRef<HTMLDivElement>(null);
 	const {t} = useTranslation();
 
 	// These are refs so that changing them doesn't trigger a rerender, and more
@@ -123,6 +124,21 @@ export const PassageText: React.FC<PassageTextProps> = props => {
 		[onEditorChange]
 	);
 
+	// Emulate the above behavior re: focus if we aren't using CodeMirror.
+
+	React.useEffect(() => {
+		if (!prefs.useCodeMirror && codeAreaContainerRef.current) {
+			const area = codeAreaContainerRef.current.querySelector('textarea');
+
+			if (!area) {
+				return;
+			}
+
+			area.focus();
+			area.setSelectionRange(area.value.length, area.value.length);
+		}
+	}, []);
+
 	const options = React.useMemo(
 		() => ({
 			...codeMirrorOptionsFromPrefs(prefs),
@@ -147,7 +163,7 @@ export const PassageText: React.FC<PassageTextProps> = props => {
 	);
 
 	return (
-		<DialogEditor>
+		<DialogEditor ref={codeAreaContainerRef}>
 			<CodeArea
 				editorDidMount={handleMount}
 				fontFamily={prefs.passageEditorFontFamily}