diff --git a/.changeset/option-always-inline-editor.md b/.changeset/option-always-inline-editor.md new file mode 100644 index 000000000..cf0304d86 --- /dev/null +++ b/.changeset/option-always-inline-editor.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add option to always keep the last line of the text editor "inline" with the UI buttons. diff --git a/src/app/components/editor/Editor.css.ts b/src/app/components/editor/Editor.css.ts index 077519d17..806cdce02 100644 --- a/src/app/components/editor/Editor.css.ts +++ b/src/app/components/editor/Editor.css.ts @@ -15,7 +15,7 @@ export const Editor = style([ export const EditorRow = style({ gridTemplateColumns: 'auto 1fr auto', - alignItems: 'center', + alignItems: 'end', }); export const EditorRowMultiline = style({ @@ -80,6 +80,10 @@ export const EditorTextarea = style([ }, ]); +export const EditorTextareaInline = style({ + paddingBottom: toRem(13), +}); + export const EditorResponsiveAfterMultiline = style([ EditorOptions, { diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx index ab6e7f3ff..f7c907b63 100644 --- a/src/app/components/editor/Editor.tsx +++ b/src/app/components/editor/Editor.tsx @@ -132,7 +132,8 @@ export const CustomEditor = forwardRef( const hasBefore = Boolean(before); const hasAfter = Boolean(after); const hasResponsiveAfter = Boolean(responsiveAfter); - const layoutIsMultiline = isMultiline || forceMultilineLayout; + const [alwaysInlineEditor] = useSetting(settingsAtom, 'alwaysInlineEditor'); + const layoutIsMultiline = !alwaysInlineEditor && (isMultiline || forceMultilineLayout); const showResponsiveAfterInFooter = hasResponsiveAfter && layoutIsMultiline; const showResponsiveAfterInline = hasResponsiveAfter && !showResponsiveAfterInFooter; @@ -449,7 +450,7 @@ export const CustomEditor = forwardRef( ) { const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline'); const [editorToolbar, setEditorToolbar] = useSetting(settingsAtom, 'editorToolbar'); + const [alwaysInlineEditor, setAlwaysInlineEditor] = useSetting( + settingsAtom, + 'alwaysInlineEditor' + ); const [editorOldAddFile, setEditorOldAddFile] = useSetting(settingsAtom, 'editorOldAddFile'); const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideReads, setHideReads] = useSetting(settingsAtom, 'hideReads'); @@ -454,6 +458,16 @@ function Editor({ isMobile }: Readonly<{ isMobile: boolean }>) { } /> + + + } + /> +