diff --git a/resources/scripts/components/elements/Editor.tsx b/resources/scripts/components/elements/Editor.tsx index 2d844fa8c..93f4251a4 100644 --- a/resources/scripts/components/elements/Editor.tsx +++ b/resources/scripts/components/elements/Editor.tsx @@ -199,14 +199,16 @@ export interface Props { onContentSaved?: () => void; } -export default ({ className, style, overrides, initialContent, extensions, mode, filename, onModeChanged }: Props) => { +export default ({ className, style, overrides, initialContent, extensions, mode, filename, onModeChanged, fetchContent, onContentSaved }: Props) => { const [ languageConfig ] = useState(new Compartment()); + const [ keybinds ] = useState(new Compartment()); const [ state ] = useState(EditorState.create({ doc: initialContent, extensions: [ ...defaultExtensions, ...(extensions !== undefined ? extensions : []), languageConfig.of(mode !== undefined ? modeToExtension(mode) : findLanguageExtensionByMode(findModeByFilename(filename || ''))), + keybinds.of([]), ], })); const [ view, setView ] = useState(); @@ -278,6 +280,33 @@ export default ({ className, style, overrides, initialContent, extensions, mode, }); }, [ initialContent ]); + useEffect(() => { + if (fetchContent === undefined) { + return; + } + + if (!view) { + fetchContent(() => Promise.reject(new Error('no editor session has been configured'))); + return; + } + + if (onContentSaved !== undefined) { + view.dispatch({ + effects: keybinds.reconfigure(keymap.of([ + { + key: 'Mod-s', + run: () => { + onContentSaved(); + return true; + }, + }, + ])), + }); + } + + fetchContent(() => Promise.resolve(view.state.doc.toString())); + }, [ view, fetchContent, onContentSaved ]); + return ( );