HighlightedTextEditor

A simple, powerful SwiftUI text editor for iOS and macOS with live syntax highlighting.

Highlight what's important as your users type.

Installation

Supports iOS 13.0+ and macOS 10.15+.

Swift Package Manager:

https://github.com/kyle-n/HighlightedTextEditor

Usage

HighlightedTextEditor applies styles to text matching regex patterns you provide. You can apply multiple styles to each regex pattern, as shown in the example below.

import HighlightedTextEditor

// highlights text between underscores
let boldItalics = try! NSRegularExpression(pattern: "_[^_]+_", options: [])

struct ContentView: View {
    @State private var text: String = "here is _bold emphasis text_"
    
    private let rules: [HighlightRule] = [
        HighlightRule(pattern: boldItalics, formattingRules: [
            TextFormattingRule(fontTraits: [.traitItalic, .traitBold]),
            TextFormattingRule(key: .foregroundColor, value: UIColor.red)
        ])
    ]
    
    var body: some View {
        VStack {
            Text("Text editing with highlights")
            HighlightedTextEditor(text: $text, highlightRules: rules)
        }
    }
}

Notice the NSRegularExpression is instantiated once. It should not be recreated every time the view is redrawn. This helps performance.

API

HighlightedTextEditor

Parameter	Type	Optional	Description
text	Binding	No	Text content of the field
highlightRules	[HighlightRule]	No	Patterns and formatting for those patterns
onEditingChanged	() -> Void	Yes	Called when the user begins editing
onCommit	() -> Void	Yes	Called when the user stops editing
onTextChange	(String) -> Void	Yes	Called whenever text changes

HighlightRule

Parameter	Type	Description
pattern	NSRegularExpression	The content you want to highlight. Should be instantiated once for performance.
formattingRule	TextFormattingRule	Style applying to all text matching the pattern
formattingRules	[TextFormattingRule]	Array of styles applying to all text matching the pattern

I've included a preset [HighlightRule] for Markdown syntax highlighting, accessed by the variable HighlightedTextEditor.markdown. If you have ideas for other useful presets, please feel free to open a pull request.

Example of using a preset:

HighlightedTextEditor(text: $text, highlightRules: HighlightRule.markdown)

TextFormattingRule

TextFormattingRule uses two different initializers that each set one style.

Parameter	Type	Description
key	NSAttributedString.Key	The style to set (e.x. .foregroundColor, .underlineStyle)
value	Any	The actual style applied to the key (e.x. for key = .foregroundColor, value is UIColor.red or NSColor.red)

value uses an older, untyped API so you'll have to check the documentation for what type can be passed in for a given key.

Parameter	Type	Description
fontTraits	UIFontDescriptor.SymbolicTraits or NSFontDescriptor.SymbolicTraits	Text formatting attributes (e.x. [.traitBold] in UIKit and .bold in AppKit)

If you are targeting iOS 14 / macOS 11, you can use a convenience initializer taking advantage of new SwiftUI APIs for converting Colors to UIColors or NSColors.

Parameter	Type	Description
foregroundColor	Color	Color of the text
fontTraits	UIFontDescriptor.SymbolicTraits or NSFontDescriptor.SymbolicTraits	Text formatting attributes (e.x. [.traitBold] in UIKit and .bold in AppKit)

Apple, in its wisdom, has not enabled these features for the XCode 12 GM. If you are using the XCode beta and want to enable this initializer, go to project_name -> Targets -> specified platform -> Build Settings -> Swift Compiler - Custom Flags and add flag -DBETA.

Credits

This code was originally created for Compose for Substack. If you are a Substack author and would like to use a high-quality, clean, native Markdown editor for writing newsletters, please give it a try.

AppKit text editor code based on MacEditorTextView by Thiago Holanda.

Created by Kyle Nazario.