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 ( - +