Skip to content

Instantly share code, notes, and snippets.

@unnamedd
Last active March 15, 2024 06:17
Show Gist options
  • Save unnamedd/6e8c3fbc806b8deb60fa65d6b9affab0 to your computer and use it in GitHub Desktop.
Save unnamedd/6e8c3fbc806b8deb60fa65d6b9affab0 to your computer and use it in GitHub Desktop.
[SwiftUI] MacEditorTextView - A simple and small NSTextView wrapped by SwiftUI.
/**
* MacEditorTextView
* Copyright (c) Thiago Holanda 2020-2021
* https://twitter.com/tholanda
*
* MIT license
*/
import Combine
import SwiftUI
struct MacEditorTextView: NSViewRepresentable {
@Binding var text: String
var isEditable: Bool = true
var font: NSFont? = .systemFont(ofSize: 14, weight: .regular)
var onEditingChanged: () -> Void = {}
var onCommit : () -> Void = {}
var onTextChange : (String) -> Void = { _ in }
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
func makeNSView(context: Context) -> CustomTextView {
let textView = CustomTextView(
text: text,
isEditable: isEditable,
font: font
)
textView.delegate = context.coordinator
return textView
}
func updateNSView(_ view: CustomTextView, context: Context) {
view.text = text
view.selectedRanges = context.coordinator.selectedRanges
}
}
// MARK: - Preview
#if DEBUG
struct MacEditorTextView_Previews: PreviewProvider {
static var previews: some View {
Group {
MacEditorTextView(
text: .constant("{ \n planets { \n name \n }\n}"),
isEditable: true,
font: .userFixedPitchFont(ofSize: 14)
)
.environment(\.colorScheme, .dark)
.previewDisplayName("Dark Mode")
MacEditorTextView(
text: .constant("{ \n planets { \n name \n }\n}"),
isEditable: false
)
.environment(\.colorScheme, .light)
.previewDisplayName("Light Mode")
}
}
}
#endif
// MARK: - Coordinator
extension MacEditorTextView {
class Coordinator: NSObject, NSTextViewDelegate {
var parent: MacEditorTextView
var selectedRanges: [NSValue] = []
init(_ parent: MacEditorTextView) {
self.parent = parent
}
func textDidBeginEditing(_ notification: Notification) {
guard let textView = notification.object as? NSTextView else {
return
}
self.parent.text = textView.string
self.parent.onEditingChanged()
}
func textDidChange(_ notification: Notification) {
guard let textView = notification.object as? NSTextView else {
return
}
self.parent.text = textView.string
self.selectedRanges = textView.selectedRanges
}
func textDidEndEditing(_ notification: Notification) {
guard let textView = notification.object as? NSTextView else {
return
}
self.parent.text = textView.string
self.parent.onCommit()
}
}
}
// MARK: - CustomTextView
final class CustomTextView: NSView {
private var isEditable: Bool
private var font: NSFont?
weak var delegate: NSTextViewDelegate?
var text: String {
didSet {
textView.string = text
}
}
var selectedRanges: [NSValue] = [] {
didSet {
guard selectedRanges.count > 0 else {
return
}
textView.selectedRanges = selectedRanges
}
}
private lazy var scrollView: NSScrollView = {
let scrollView = NSScrollView()
scrollView.drawsBackground = true
scrollView.borderType = .noBorder
scrollView.hasVerticalScroller = true
scrollView.hasHorizontalRuler = false
scrollView.autoresizingMask = [.width, .height]
scrollView.translatesAutoresizingMaskIntoConstraints = false
return scrollView
}()
private lazy var textView: NSTextView = {
let contentSize = scrollView.contentSize
let textStorage = NSTextStorage()
let layoutManager = NSLayoutManager()
textStorage.addLayoutManager(layoutManager)
let textContainer = NSTextContainer(containerSize: scrollView.frame.size)
textContainer.widthTracksTextView = true
textContainer.containerSize = NSSize(
width: contentSize.width,
height: CGFloat.greatestFiniteMagnitude
)
layoutManager.addTextContainer(textContainer)
let textView = NSTextView(frame: .zero, textContainer: textContainer)
textView.autoresizingMask = .width
textView.backgroundColor = NSColor.textBackgroundColor
textView.delegate = self.delegate
textView.drawsBackground = true
textView.font = self.font
textView.isEditable = self.isEditable
textView.isHorizontallyResizable = false
textView.isVerticallyResizable = true
textView.maxSize = NSSize(width: CGFloat.greatestFiniteMagnitude, height: CGFloat.greatestFiniteMagnitude)
textView.minSize = NSSize(width: 0, height: contentSize.height)
textView.textColor = NSColor.labelColor
textView.allowsUndo = true
return textView
}()
// MARK: - Init
init(text: String, isEditable: Bool, font: NSFont?) {
self.font = font
self.isEditable = isEditable
self.text = text
super.init(frame: .zero)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - Life cycle
override func viewWillDraw() {
super.viewWillDraw()
setupScrollViewConstraints()
setupTextView()
}
func setupScrollViewConstraints() {
scrollView.translatesAutoresizingMaskIntoConstraints = false
addSubview(scrollView)
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: topAnchor),
scrollView.trailingAnchor.constraint(equalTo: trailingAnchor),
scrollView.bottomAnchor.constraint(equalTo: bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: leadingAnchor)
])
}
func setupTextView() {
scrollView.documentView = textView
}
}
/**
* MacEditorTextView
* Copyright (c) Thiago Holanda 2020-2021
* https://twitter.com/tholanda
*
* MIT license
*/
import SwiftUI
import Combine
struct ContentQueryView: View {
@State private var queryText = "{ \n planets { \n name \n }\n}"
@State private var responseJSONText = "{ \"name\": \"Earth\"}"
var body: some View {
let queryTextView = MacEditorTextView(
text: $queryText,
isEditable: false,
font: .systemFont(ofSize: 14, weight: .regular)
)
.frame(minWidth: 300,
maxWidth: .infinity,
minHeight: 300,
maxHeight: .infinity)
let responseTextView = MacEditorTextView(
text: $responseJSONText,
isEditable: false,
font: .userFixedPitchFont(ofSize: 14)
)
.frame(minWidth: 300,
maxWidth: .infinity,
minHeight: 300,
maxHeight: .infinity)
return HSplitView {
queryTextView
responseTextView
}
}
}
@unnamedd
Copy link
Author

Thanks for your attention, but I figured out that it's a system-wide bug in NSTextView, at least in macOS 10.15.4. Filed bug report, so Apple fix that. I see this behaviour even in Apple Pages.

I see, nice to know and thanks to share here with us!

@saket
Copy link

saket commented May 7, 2020

I haven't been able to figure out why, but textDidEndEditing() never gets called so onCommit() never gets called either.

@CineDev
Copy link

CineDev commented May 7, 2020

I haven't been able to figure out why, but textDidEndEditing() never gets called so onCommit() never gets called either.

It called when NSTextView looses focus. So, in case of full-fledged text editor onCommit() is basically useless.

@CineDev
Copy link

CineDev commented May 8, 2020

If you need more precise change notifications, check my implementation of NSTextStorage. Maybe it'll be more handy for your task: https://github.com/CineDev/ParagraphTextKit

@Hoyiki
Copy link

Hoyiki commented May 9, 2020

omg this is amazing!!! Thank you!!!!!

@CineDev
Copy link

CineDev commented May 9, 2020

omg this is amazing!!! Thank you!!!!!

Thanks )))

@ChidiNweze
Copy link

Any tips on how to implement this without scrolling? I.e. having the text box grow as the user writes? Any help would be greatly appreciated.

@unnamedd
Copy link
Author

Any tips on how to implement this without scrolling? I.e. having the text box grow as the user writes? Any help would be greatly appreciated.

Hi @ChidiNweze, you will need:
1: Define constraints for the height of your textView
2: Get the contentSize.height of the textView
3: Set the contentSize.height to the textView's height constraint.

This is the way you can solve on iOS. I'm not sure if it helps you in the AppKit, but this is the way I'd do! ;)

@ChidiNweze
Copy link

1: Define constraints for the height of your textView
2: Get the contentSize.height of the textView
3: Set the contentSize.height to the textView's height constraint.

Hi again. I'm still having trouble with this. Perhaps I am not defining the height constraints properly. Right now, I believe this is being done by "textView.maxSize" and "textView.minSize". I have set textView.minSize = NSSize(width: 0, height: contentSize.height). Currently, I have the textView in a list view, where the cell will not expand but will become scrollable instead. Could there be a problem in the list view?

@w-i-n-s
Copy link

w-i-n-s commented Jun 12, 2020

@unnamedd Great work, thank you!

@wingovers
Copy link

@ChidiNweze did you sort this?

@wingovers
Copy link

wingovers commented Jul 29, 2020

@ChidiNweze Here is an updated auto-height-scaling example, albeit with a slight bug on appearance that I'll need to sort and update. https://github.com/wingovers/HeightExpandingNSTextViewforSwiftUI

@ChidiNweze
Copy link

Hi, I sorted this out by using a different wrapper entirely (which implemented a similar, but sketchier, dynamicHeight function). I may swap it for your solution. Looks great!

@wingovers
Copy link

Yeah, I benefitted from Asperi's UIKit post on StackOverflow, converted it to AppKit after playing with the ways available to get data, and deleted some parts. Playing again this morning, the initial jiggle disappears by setting dynamicHeight by a multiplier of the font pointSize, updated on git, but that's a magic number that just worked for me and thus not a good solution. Please let me know if you solve that.. :)

@manngo
Copy link

manngo commented Sep 6, 2020

I have tried to use this, but I get an error: Use of unresolved identifier 'MacEditorTextView'. Obviously, there’s a step I’m missing.

@unnamedd
Copy link
Author

unnamedd commented Sep 6, 2020

I have tried to use this, but I get an error: Use of unresolved identifier 'MacEditorTextView'. Obviously, there’s a step I’m missing.

Hi @manngo,
is the MacEditorTextView file checked for the target you are working on? E.g:
image

@manngo
Copy link

manngo commented Sep 6, 2020

Ah, that was it. Thanks so much for your help. It worked beautifully.

@jfranknichols
Copy link

hello, Thank you for this, it appears to be exactly what I need while I wait for Apple to provide RTF text fields native in SwiftUI.

I am new to NSAttributedString and NSTextView and I am struggling with trying to figure out how to get the attributed text string in and out of the MacEditorTextView.

I have this working with plain text, but I can't figure out how to get Attributed strings in and out of it.

I assume I am missing something obvious?

@unnamedd
Copy link
Author

hello, Thank you for this, it appears to be exactly what I need while I wait for Apple to provide RTF text fields native in SwiftUI.

I am new to NSAttributedString and NSTextView and I am struggling with trying to figure out how to get the attributed text string in and out of the MacEditorTextView.

I have this working with plain text, but I can't figure out how to get Attributed strings in and out of it.

I assume I am missing something obvious?

Hi @jfranknichols,
Yes, for sure there are somethings I'm not doing here and NSAttributedString is one of them, but this isn't very complicated to give support, to set or to get. What you will need to do is to follow a bit the way I implemented to set/get the property text or maybe the font, to do the same with the NSAttributedString. I didn't give support to it because I didn't need, but if you decide to implement this support, I will appreciate a lot if you decide to send it to me to add here.

In any case, we can do this together and you can send me a message on Twitter, what do you think?

@AngeloStavrow
Copy link

@unnamedd To connect the NSTextView to the undo manager, you can add the following line to your CustomTextView class' textView var:

textView.allowsUndo = true

@unnamedd
Copy link
Author

Thanks a lot for the solution @AngeloStavrow! I will update the gist!

@urtti
Copy link

urtti commented Feb 2, 2021

This has been a lifesaver, using it in my app. Ran into an issue where I can't seem to get the smart quotes to automatically fix the text.
" should change to “

It can be done with the substitutions menu, but does seem to require a manual step from the user. Didn't have luck changing the related variables on NSTextView.

The new TextEditor from Apple seems to work, but that doesn't support Catalina...

@AngeloStavrow
Copy link

@unnamedd We were chatting about how to initialize the view with a given linespacing — check out this PR to see how it's being done in the WriteFreely for Mac app.

I do need to test it more thoroughly, but many thanks to @danielpunkass for finding the workaround!

@unnamedd
Copy link
Author

unnamedd commented Feb 2, 2021

Hi @urtti, I'm not aware how to fix that, I'm sure it isn't complicated but I never had to deal with that case.

@AngeloStavrow, did you face this problem in your app? Have an idea how to help here?
And also, send me the piece of code to update the Gist, I'm sure that are more people who will appreciate a lot your help.

@MarcMV
Copy link

MarcMV commented Oct 17, 2021

This is awesome! Only issue I've found is that it does not seem to be compatible with the .focused($focusedField, equals: .title) property. It simply ignores it, tried to follow this steps to enhance it without much luck -> https://serialcoder.dev/text-tutorials/macos-tutorials/macos-programming-implementing-a-focusable-text-field-in-swiftui/
Use Case: I have two swiftUi components, one being a TextField and the other this class, trying to move between them by using a focusField and the focused property.

@unnamedd
Copy link
Author

Hey @MarcMV,
I wrote the MacEditorTextView in the first SwiftUI release, back then we didn't have .focused yet, due to lack of time, I can't stop to add that support yet, even though, if you have any success adding it, would be very good if you post here the piece of code and I will update the gist with your addition, I'm pretty sure more people should enjoy the addition.

@MarcMV
Copy link

MarcMV commented Nov 8, 2021

Hi @unnamedd , after many attempts I created it from scratch looking at WWDC2021 videos. Here's an extremely simple implementation that supports .focused in case it make it easier for you to enhance this one.

@neodave
Copy link

neodave commented Nov 11, 2021

Hi @unnamedd , after many attempts I created it from scratch looking at WWDC2021 videos. Here's an extremely simple implementation that supports .focused in case it make it easier for you to enhance this one.

Thank you thank you thank you! :)

@antingle
Copy link

antingle commented Apr 30, 2022

Hi @unnamedd , after many attempts I created it from scratch looking at WWDC2021 videos. Here's an extremely simple implementation that supports .focused in case it make it easier for you to enhance this one.

Thank you for this! I loved the simplicity of yours!
I have combined your implementation with the MacEditorTextView for the extra functions, along with a couple of other changes. One of them being the ability to add a placeholder text to the scrollview, and another being a working onSubmit function.

It is found here in case anyone can find the alterations beneficial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment