Monaco Editor and SwiftUI
Many of us have worked with Monaco Editor before. It’s being used in Visual Studio Code, StackBlitz and so much more. It’s a really fast and nice looking code editor and I personally and many other people absolutely love it. It’s open-source and is licensed under MIT License, so basically you can use it in any project you want and how you want.
So, there was a need to have a simple code editor for app written completely in SwiftUI (and interfacing with AppKit) for macOS.
Introduction
First of all, I’ve decided to do it completely natively and tried out available open source library written in Swift and it was really bad. Then I’ve decided to write something myself and it was just awful. I had felt really depressed at that moment. After some hours of consideration, I’ve decided to just use Monaco Editor and interface with it using WebKit APIs.
In the beginning, I’ve searched for similar solutions and have found one. It was the same idea: just a wrapper Monaco Editor written in Swift which interfaces with Monaco Editor through WebKit APIs. It is SwiftMonacoEditor. It’s relatively new (last commit at the moment was on August 24, 2020), but it was written for iOS/iPadOS and I’ve needed support for macOS specifically. Also, it doesn’t have syntax highlighting support (has, but it doesn’t work as I wanted), so I’ve decided to do something similar with all the features I need.
And I have done it in a day. I’ve called it SwiftyMonaco. It’s simple library (can be linked statically and dynamically, as you want) which lets you use Monaco Editor from SwiftUI.
The final product
Let’s go with some examples. First of all, you can use it just like a usual editor:
We just use SwiftyMonaco view and pass text binding to it. It’s similar to usual SwiftUI’s TextEditor view.
Syntax highlighting
Now let’s do something with syntax highlighting. There are examples showing off how to use syntax highlighting for Swift, C++ and Verilog/SystemVerilog:
As you see you simple pass SyntaxHighlight into syntaxHighlight modifier and you will get syntax highlighting in your SwiftyMonaco view.
Appearances
As you know, we all love dark mode, so SwiftyMonaco works perfectly fine with dark mode. Appearance is synchronized with system appearance, so when you change appearance on your system or use automatic change of appearance, then everything will work perfectly fine.
And, obviously, SwiftyMonaco work perfectly fine in the Light Mode too.
Conclusion
SwiftyMonaco is open source and is licensed under Apache License 2.0. I deeply want to thank you for reading this story and will appreciate if you want to help me with this project. You can do whatever you want: submit issues about bugs or request features, contribute your own code or support me on Patreon (I’m from Belarus, so basically it’s only way which somehow works in here). I’ll deeply appreciate any suggestions, because I understand that the code I wrote for this project is completely far from prefect, so leave your thoughts on it.
