RichTextEditor with a .clear backgroundColor

[daveguerin]

Here's the requested GitHub issue from yesterday on Mastodon:

I'm integrating a RichTextEditor into one of my Objective-C apps using a UIHostingController. it's iOS/iPadOS 17.4 and up.

Using this stripped back code:

var body: some View {
	VStack(alignment: .center) {

		RichTextEditor(
		text: $text,
		context: context1,
		viewConfiguration: {
				if let textView = $0 as? UITextView {
					textView.backgroundColor = .clear
				}
			}
		)

		Spacer()

		RichTextEditor(
			text: $text,
			context: context2
		)
		.background(Color.clear)

		Spacer()

		RichTextEditor(
			text: $text,
			context: context3
		)
		.richTextEditorStyle(RichTextEditorStyle(backgroundColor: ColorRepresentable(.clear)))

	} 
	.background(Color.red)
}

If the RichTextEditor has no text, then all context have a .clear background as expected.

If the RichTextEditor has some text, any text, then:

context1 has the expected .clear background.

context2 has a .systemBackground background.

context3 also has a .systemBackground background.

It could be something I'm doing, Swift/SwiftUI is still quite new to me, a rather different headspace to Objective-C!

Am I setting the background correctly in context2 and context3? Or is something else happening?

Cheers,

Dave

[danielsaidi]

Thank you for the bug report. I'm very busy atm and am not actively working on the project, but anyone are more than welcome to take a look at this.

[DominikBucher12]

Hello @daveguerin ,

as a workaround, you can pass custom closure to viewConfiguration which uses "introspection" on the UITextView.

Try this code:

VStack(alignment: .center) {
            
            RichTextEditor(
                text: $document.text,
                context: context,
                viewConfiguration: {
                    if let textView = $0 as? UITextView {
                        textView.backgroundColor = .yellow
                    }
                }
            )
            .richTextEditorStyle(RichTextEditorStyle(backgroundColor: .blue))
            
            Spacer()
            
            RichTextEditor(
                text: $document.text,
                context: context2,
                viewConfiguration: {
                    if let textView = $0 as? UITextView {
                        textView.backgroundColor = .blue
                    }
                }
            )
            .background(Color.green)
            
            Spacer()
            
            RichTextEditor(
                text: $document.text,
                context: context3,
                viewConfiguration: {
                    if let textView = $0 as? UITextView {
                        textView.backgroundColor = .green
                    }
                }
            )
            .richTextEditorStyle(RichTextEditorStyle(backgroundColor: .green))
            
        }
        .background(Color.red)

However the issue is in more lines of code than just one single place:

1. guard richText.string.isEmpty else { return } inside func setup(_ theme: RichTextView.Theme)
2. textView.theme = style is called before viewConfiguration(textView) inside RichTextEditor.swift file on line 116/117 (128/129 for macOS)

I am currently busy with other projects as well, however this should give you a great heads up how to fix this. Feel free to create PR, for this, I am happy to review/guide you if you have any issues. Thank you for the report!

[DominikBucher12]

To futher Clarify, context should have nothing to do with color of the UI/NSTextView itself. We planned with @danielsaidi to delete viewConfigurationClosure, which should probably be proper fix, right now, because it is set on 2 places, it creates this unexpected behaviour.

I really can't wait to get to this project and fix all those issues 😅

[daveguerin]

Hi @danielsaidi and @DominikBucher12 ,

I've got it working using the viewConfiguration: closure, thanks!

However the issue is in more lines of code than just one single place:

guard richText.string.isEmpty else { return } inside func setup(_ theme: RichTextView.Theme)
textView.theme = style is called before viewConfiguration(textView) inside RichTextEditor.swift file on line 116/117 (128/129 for macOS)

I don't know enough Swift to fully understand exactly how all the parts of RichTextKit fit together. Now, if it was Objective-C.... 🙃

I'm busy with a bug in another of my apps this week, I'll get back to the app that uses RichTextKit next week and see if I can work it out.

Cheers,

Dave