diff --git a/app/scenes/Document/components/EditableTitle.tsx b/app/scenes/Document/components/EditableTitle.tsx index 0fba68c11..3d51d411f 100644 --- a/app/scenes/Document/components/EditableTitle.tsx +++ b/app/scenes/Document/components/EditableTitle.tsx @@ -29,6 +29,8 @@ type Props = { onGoToNextInput: (insertParagraph?: boolean) => void; /** Callback called when the user expects to save (CMD+S) */ onSave?: (options: { publish?: boolean; done?: boolean }) => void; + /** Callback called when focus leaves the input */ + onBlur?: React.FocusEventHandler; }; const lineHeight = "1.25"; @@ -43,6 +45,7 @@ const EditableTitle = React.forwardRef( onChange, onSave, onGoToNextInput, + onBlur, starrable, placeholder, }: Props, @@ -123,6 +126,7 @@ const EditableTitle = React.forwardRef( onClick={handleClick} onChange={handleChange} onKeyDown={handleKeyDown} + onBlur={onBlur} placeholder={placeholder} value={normalizedTitle} $emojiWidth={emojiWidth} diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx index 350e5bdc3..6cf958dab 100644 --- a/app/scenes/Document/components/Editor.tsx +++ b/app/scenes/Document/components/Editor.tsx @@ -53,6 +53,10 @@ function DocumentEditor(props: Props, ref: React.RefObject) { } }, [ref]); + const handleBlur = React.useCallback(() => { + props.onSave({ autosave: true }); + }, [props]); + const handleGoToNextInput = React.useCallback( (insertParagraph: boolean) => { if (insertParagraph && ref.current) { @@ -88,6 +92,7 @@ function DocumentEditor(props: Props, ref: React.RefObject) { document={document} onGoToNextInput={handleGoToNextInput} onChange={onChangeTitle} + onBlur={handleBlur} starrable={!shareId} placeholder={t("Untitled")} />