SwiftUI Text highlights and menu • Law

SwiftUI’s Text() view does not support custom colored highlights and custom menus. Here’s how I did it. The solution may not be up to everyone’s programming standards but it worked.

CustomUITextView

Create a new file called CustomUITextView which will inherit UITextView. The initial code should look like

import UIKit

class CustomTextView: UITextView {

}

TextSelectable

Now, let’s create another file called TextSelectable which will inherit UIViewRepresentable.

import SwiftUI

struct TextSelectable: UIViewRepresentable {

    var text: NSAttributedString

    init(text: NSAttributedString) {
        self.text = text
    }

    func makeUIView(context: Context) -> CustomTextView {
        let customTextView = CustomTextView()
        customTextView.delegate = context.coordinator
        return customTextView
    }

    func updateUIView(_ uiView: CustomTextView, context: Context) {
        uiView.attributedText = text
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(text)
    }

    class Coordinator: NSObject, UITextViewDelegate {

        var text: NSAttributedString

        init(_ text: NSAttributedString) {
            self.text = text
        }

        func textViewDidChange(_ textView: UITextView) {
            self.text = textView.attributedText
        }
    }
}

Let’s create a highlighText() function inside our CustomUITextView(). And we will override the canPerformAction function. This is where we will capture our highlighted text. The new CustomUITextView should be like the one below.

import UIKit

class CustomTextView: UITextView {

    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        if action == #selector(highlightText) {
            return true
        }
        return false
    }

    @objc func highlightText() {
        if let range = self.selectedTextRange, let selectedText = self.text(in: range) {
            print("Selected text is \(selectedText)")
        }
    }
}

Custom UIMenu

Next, we will create our own UIMenu when a user long presses or clicks on a highlighted text. We will override the editMenu function.

import UIKit

class CustomTextView: UITextView {

    override func editMenu(for textRange: UITextRange, suggestedActions: [UIMenuElement]) -> UIMenu? {
        let highlightTextAction = UIAction(title: "Highlight Passage") { action in
            self.highlightText()
        }
        let addNotesAction = UIAction(title: "Add Notes") { action in

        }
        var actions = suggestedActions
        actions.insert(highlightTextAction, at: 0)
        actions.insert(addNotesAction, at: 1)
        return UIMenu(children: actions)
    }

    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        if action == #selector(highlightText) {
            return true
        }
        return false
    }

    @objc func highlightText() {

    }
}

SwiftUI View

Time to implement it in our SwiftUI View. Create a new file, I called mine DetailsView. Let’s use a verse from Kendrick Lamar as an example text passed to our TextSelectable.

import SwiftUI

struct DetailsView: View {

    @State private var attributedText = NSAttributedString(string: """
           This feelin' is brought to you by adrenaline and good rap
           Black Pendleton ball cap (West, west, west)
           We don't share the same synonym, fall back (West, west, west)
           Been in it before Internet had new acts
           Mimicking radio's nemesis made me wack
           My innocence limited, the experience lacked
           Ten of us with no tentative tactic that cracked
           The mind of a literate writer, but I did it, in fact
           You admitted it once I submitted it, wrapped in plastic
           Remember scribblin', scratchin' diligent sentences backwards
           Visiting freestyle cyphers for your reaction
           Now, I can live in a stadium, pack it the fastest
           Gamblin' Benjamin benefits, sinnin' in traffic
           Spinnin' women in cartwheels, linen fabric on fashion
           Winnin' in every decision, Kendrick is master that mastered it
           Isn't it lovely how menaces turned attraction?
           Pivotin' rappers, finish your fraction while writing blue magic
           Thank God for rap
           I would say it got me a plaque, but what's better than that?
           The fact it brought me back home
           """)

    var body: some View {
        VStack {
            TextSelectable(text: NSAttributedString(string: attributedText))
        }
        .padding()
    }
}

Now try to run it in your emulator. And drag a portion of the text and click on our Highlight Passage menu.

We should be able to capture the highlighted text.

Colored highlights

Now that we can capture the highlighted texts, we want to add colors to it. Let’s create a file called Highlight.

import SwiftUI

struct Highlight {

    let text: String
    let location: Int
    let length: Int
    let color: Color
}

Now, inside our highlightText() function, let’s create that Highlight object. And we will pass this object to our NotificationCenter, where our DetailsView will listen and capture our object.

import UIKit

class CustomTextView: UITextView {

    override func editMenu(for textRange: UITextRange, suggestedActions: [UIMenuElement]) -> UIMenu? {
        let highlightTextAction = UIAction(title: "Highlight Passage") { action in
            self.highlightText()
        }
        let addNotesAction = UIAction(title: "Add Notes") { action in

        }
        var actions = suggestedActions
        actions.insert(highlightTextAction, at: 0)
        actions.insert(addNotesAction, at: 1)
        return UIMenu(children: actions)
    }

    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        if action == #selector(highlightText) {
            return true
        }
        return false
    }

    @objc func highlightText() {
        if let range = self.selectedTextRange, let selectedText = self.text(in: range) {
            print("Selected text is \(selectedText)")
            let highlight = Highlight(text: selectedText, location: selectedRange.location, length: selectedRange.length, color: .purple)
            let highlightDict = [
                "data": highlight
            ]
            NotificationCenter.default.post(name: Notification.Name("highlightAdded"), object: nil, userInfo: highlightDict)
        }
    }
}

I am not sure if this is the best way, please let me know if you have any better solutions.

And now in our DetailsView, let’s capture it using onReceive modifier.

import SwiftUI

struct DetailsView: View {

    @State private var attributedText = NSAttributedString(string: """
           This feelin' is brought to you by adrenaline and good rap
           Black Pendleton ball cap (West, west, west)
           We don't share the same synonym, fall back (West, west, west)
           Been in it before Internet had new acts
           Mimicking radio's nemesis made me wack
           My innocence limited, the experience lacked
           Ten of us with no tentative tactic that cracked
           The mind of a literate writer, but I did it, in fact
           You admitted it once I submitted it, wrapped in plastic
           Remember scribblin', scratchin' diligent sentences backwards
           Visiting freestyle cyphers for your reaction
           Now, I can live in a stadium, pack it the fastest
           Gamblin' Benjamin benefits, sinnin' in traffic
           Spinnin' women in cartwheels, linen fabric on fashion
           Winnin' in every decision, Kendrick is master that mastered it
           Isn't it lovely how menaces turned attraction?
           Pivotin' rappers, finish your fraction while writing blue magic
           Thank God for rap
           I would say it got me a plaque, but what's better than that?
           The fact it brought me back home
           """)

    var body: some View {
        VStack {
            TextSelectable(text: NSAttributedString(string: attributedText))
        }
        .onReceive(NotificationCenter.default.publisher(for: Notification.Name("highlightAdded"))) { output in
            if let highlight = output.userInfo!["data"] as? Highlight {
                let mutableString = NSMutableAttributedString.init(string: attributedText.string)
                let highlightAttributes: [NSAttributedString.Key: Any] = [
                    .backgroundColor: highlight.color,
                ]
                mutableString.addAttributes(highlightAttributes, range: NSRange(location: highlight.location, length: highlight.length))
                attributedText = mutableString
            }
        }
        .padding()
    }
}

Run the app and it will throw an error.

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__SwiftValue set]: unrecognized selector sent to instance 0x600000c6c360'
*** First throw call stack:
(
  0   CoreFoundation                      0x00000001804ae0f8 __exceptionPreprocess + 172

This is because of our color variable in our Highlight. Let’s update our Highlights class to use uiColor instead.

import SwiftUI

struct Highlight {

    let text: String
    let location: Int
    let length: Int
    var uiColor: UIColor
    var color: Color {
        get {
            .init(uiColor: uiColor)
        }
        set {
            uiColor = .init(newValue)
        }
    }
}

In our highlighText() function, use uiColor instead of color.

  @objc func highlightText() {
        if let range = self.selectedTextRange, let selectedText = self.text(in: range) {
            print("Selected text is \(selectedText)")
            let highlight = Highlight(text: selectedText, location: selectedRange.location, length: selectedRange.length, uiColor: .purple)
            let highlightDict = [
                "data": highlight
            ]
            NotificationCenter.default.post(name: Notification.Name("highlightAdded"), object: nil, userInfo: highlightDict)
        }
    }
Also, update our onReceive highlight object.

            if let highlight = output.userInfo!["data"] as? Highlight {
                let mutableString = NSMutableAttributedString.init(string: attributedText.string)
                let highlightAttributes: [NSAttributedString.Key: Any] = [
                    .backgroundColor: highlight.uiColor,
                ]
                mutableString.addAttributes(highlightAttributes, range: NSRange(location: highlight.location, length: highlight.length))
                attributedText = mutableString
            }
        }

Everything should work now.

You can find the code at https://github.com/lawgimenez/customtext.