HighlightedTextEditor

main

A SwiftUI view for dynamically highlighting user input
kyle-n/HighlightedTextEditor

HighlightedTextEditor

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

Highlight what's important as your users type.

HighlightedTextEditor demo

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

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)

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.

Description

  • Swift Tools 5.3.0

Dependencies

  • None
Last updated: Fri Sep 25 2020 04:05:00 GMT-0500 (GMT-05:00)