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