diff --git a/src/components/container/dialog-card/dialog-editor.tsx b/src/components/container/dialog-card/dialog-editor.tsx
index 47b72c2df..bbe472b0a 100644
--- a/src/components/container/dialog-card/dialog-editor.tsx
+++ b/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 => (
-
{props.children}
+export type DialogEditorProps = React.ComponentPropsWithoutRef<'div'>;
+
+export const DialogEditor = React.forwardRef(
+ (props, ref) => (
+
+ {props.children}
+
+ )
);
diff --git a/src/dialogs/passage-edit/passage-edit-contents.css b/src/dialogs/passage-edit/passage-edit-contents.css
index cc7fd20d1..baacf6064 100644
--- a/src/dialogs/passage-edit/passage-edit-contents.css
+++ b/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;
}
\ No newline at end of file
diff --git a/src/dialogs/passage-edit/passage-text.tsx b/src/dialogs/passage-edit/passage-text.tsx
index 95f8c8fe6..004b6b0f0 100644
--- a/src/dialogs/passage-edit/passage-text.tsx
+++ b/src/dialogs/passage-edit/passage-text.tsx
@@ -34,6 +34,7 @@ export const PassageText: React.FC = props => {
const autocompletePassageNames = useCodeMirrorPassageHints(story);
const mode =
useFormatCodeMirrorMode(storyFormat.name, storyFormat.version) ?? 'text';
+ const codeAreaContainerRef = React.useRef(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 = 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 = props => {
);
return (
-
+