writefreely-swiftui-multiplatform
writefreely-swiftui-multiplatform copied to clipboard
Title is fixed in place in post editor
As a post gets longer than one screen, the post title's TextEditor control remains fixed in its position on the screen rather than scrolling off the top.
This creates a very small editing window for the post body (and is made worse by #60):
Also look into how we can expand the title field vertically so that the text wraps, rather than it being elided with ellipses.
See also the effects of the vertically-expanding title field on this issue in this forum topic.
Investigating this issue in a test project, something straightforward like this using built-in SwiftUI components works:
struct ContentView: View {
@State private var title = ""
@State private var content = ""
var body: some View {
ScrollView(.vertical) {
TextEditor(text: $title)
.frame(minHeight: 30)
.border(Color.green, width: 1)
TextEditor(text: $content)
.frame(minHeight: 30)
.border(Color.blue, width: 1)
}
.border(Color.red, width: 1)
.padding()
}
}
The coloured borders are simply there to visualize each element and can be removed. The trick here is to give the TextEditor
a minimum height of a little bit more than the standard line height. Tested to work on iOS 15, need to check if this is backwards compatible with iOS 14 (and, of course, forward compatible with iOS 16).
https://user-images.githubusercontent.com/387655/188315548-f29362a6-1ed4-4401-a82f-5ca35b6f71cd.mp4
I think it would also be helpful to disable scrolling on the TextEditor itself, because that just creates more stuff to scroll than is intuitive.
Confirmed to work just fine on iOS 16:
https://user-images.githubusercontent.com/387655/190396816-44583967-7ab8-49ec-b660-1b8c083c68a8.mp4