Embedding images inline with text in SwiftUI: Is it possible?

Other Questions Notion
1

Hey folks! I’m working on an app and I’m trying to figure out how to add images right in the middle of text, kind of like how OneNote or Notion does it. I’ve been messing around with TextEditor, but I heard it might not work for this. So I switched to UITextView, but now I’m stuck on how to actually paste the image in there.

I’m also wondering how I’ll save all this stuff in CoreData later. But right now, I just really need help with getting images into either TextEditor or UITextView. Anyone have any ideas?

Here’s a bit of my code to give you an idea of what I’m working with:

struct NoteView: View {
    @State private var noteText = ""
    @State private var titleText = ""
    
    var body: some View {
        VStack {
            TextField("Title", text: $titleText)
                .font(.title)
                .padding()
            
            TextView(text: $noteText)
                .padding()
            
            Button(action: saveNote) {
                Text("Save Note")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
    
    func saveNote() {
        // TODO: Save note with text and images
    }
}

struct TextView: UIViewRepresentable {
    @Binding var text: String
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.delegate = context.coordinator
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        uiView.text = text
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        var parent: TextView
        
        init(_ parent: TextView) {
            self.parent = parent
        }
        
        func textViewDidChange(_ textView: UITextView) {
            parent.text = textView.text
        }
    }
}

Any help would be awesome. Thanks!

2

Embedding images inline with text in SwiftUI is indeed challenging. While UITextView can handle it, it requires significant custom work. Consider using a custom solution like a vertical stack of text and image views, controlled by a view model. This approach offers more flexibility and easier CoreData integration.

For saving, you could store text and image references separately in CoreData, then reconstruct the layout when loading. This method simplifies data management and allows for more efficient querying and updates.

If you’re set on a rich text approach, look into libraries like DTCoreText or YYText. They provide more robust solutions for complex text layouts including inline images. Remember, custom solutions often require more work upfront but can be tailored precisely to your needs.

3

I’ve tackled this problem before, and it’s a bit of a pain. UITextView can handle images, but it’s not straightforward. You’ll need to dive into NSAttributedString and NSTextAttachment to make it work. It’s doable, but prepare for some hair-pulling moments.

For saving to CoreData, I’d suggest storing the text and image data separately. You could save the text as a string and the images as binary data, along with position markers. When you load the note, you’d reconstruct the layout.

Have you considered a different approach? Maybe a custom view that combines Text and Image views in a ScrollView? It might be easier to manage and save. You’d lose some of the native text editing features, but you’d gain more control over the layout and data structure.

Whatever route you choose, it’s going to take some work. But hey, that’s half the fun of development, right? Keep at it!

4

hey ryan, i’ve been there! UITextView can handle images, but it’s tricky. you’ll need to work with NSAttributedString and attachments. for saving, consider converting to HTML or custom format.

check out this lib: https://github.com/lavenhoo/EmojiPicker

it might give u some ideas. good luck with ur project!