SwiftUI wrapper for CodeMirror 6.
- Minimal and fast
- Handles large documents with ease
- 40+ themes available
- macOS & iOS support
- Built with SwiftUI
Add CodeMirror to your project using Xcode:
- In Xcode, go to
File→Add Package Dependencies... - Enter the repository URL:
https://github.com/jaywcjlove/swiftui-codemirror.git - Click
Add Package
Or add it to your Package.swift file:
dependencies: [
.package(url: "https://github.com/jaywcjlove/swiftui-codemirror.git", from: "1.0.0")
]import SwiftUI
import CodeMirror
struct ContentView: View {
@State var value: String = ""
var body: some View {
CodeMirror(value: $value, prompt: String(localized: "Please enter text"))
CodeMirror(value: $value)
.onLoadSuccess() {
print("Hello!")
}
.onLoadFailed { error in
print("@@@2 \(#function) \(error)")
}
.onContentChange { value in
print("@@@3 Content Did Change")
}
}
}Set Line Wrapping
struct ContentView: View {
@State var lineWrapping = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLineWrapping($lineWrapping)
}
}Show Line Numbers
struct ContentView: View {
@State var lineNumber = true
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLineNumber($lineNumber)
}
}Show Fold Gutter
struct ContentView: View {
@State var foldGutter = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmFoldGutter($foldGutter)
}
}Set Editor Read-Only
struct ContentView: View {
@State var readOnly = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmReadOnly($readOnly)
}
}Set enabled search
struct ContentView: View {
@State var enabledSearch = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmEnabledSearch(.constant(false))
}
}Set Highlight Active Line
CodeMirror(value: $value)
.cmHighlightActiveLine(.constant(false))Set Programming Language
struct ContentView: View {
@State var language: Language = .json
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLanguage($language)
}
}Support: C, C++, CQL, CSS, Go, HTML, Java, JavaScript, JSON, JSX, LESS, Liquid, MariaDB SQL, Markdown, MS SQL, MySQL, PHP, PLSQL, PostgreSQL, Python, Rust, Sass, SCSS, SQL, SQLite, TSX, TypeScript, WebAssembly, XML, YAML, APL, PGP, ASN.1, Asterisk, Brainfuck, Cobol, C#, Clojure, ClojureScript, Closure Stylesheets (GSS), CMake, CoffeeScript, Common Lisp, Cypher, Cython, Crystal, D, Dart, diff, Dockerfile, DTD, Dylan, EBNF, ECL, edn, Eiffel, Elm, Erlang, Esper, Factor, FCL, Forth, Fortran, F#, Gas, Gherkin, Groovy, Haskell, Haxe, HXML, HTTP, IDL, JSON-LD, Jinja2, Julia, Kotlin, LiveScript, Lua, mIRC, Mathematica, Modelica, MUMPS, Mbox, Nginx, NSIS, NTriples, Objective-C, Objective-C++, OCaml, Octave, Oz, Pascal, Perl, Pig, PowerShell, Properties files, ProtoBuf, Pug, Puppet, Q, R, RPM Changes, RPM Spec, Ruby, SAS, Scala, Scheme, Shell, Sieve, Smalltalk, Solr, SML, SPARQL, Spreadsheet, Squirrel, Stylus, Swift, sTeX, LaTeX, SystemVerilog, Tcl, Textile, TiddlyWiki, Tiki wiki, TOML, Troff, TTCN, TTCN_CFG, Turtle, Web IDL, VB.NET, VBScript, Velocity, Verilog, VHDL, XQuery, Yacas, Z80, MscGen, Xù, MsGenny, Vue, Angular Template,
Set Theme
struct ContentView: View {
@Environment(\.colorScheme) var colorScheme
@State var theme: Themes = .vscodelight
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmTheme($theme)
.cmTheme(
colorScheme == .dark ? .constant(.vscodedark) : .constant(.vscodelight)
)
}
}import SwiftUI
import CodeMirror
struct ContentView: View {
@ObservedObject var vm: CodeMirrorVM = .init()
@State var value: String = ""
var body: some View {
CodeMirrorView(vm, value: $value)
.onAppear {
vm.setContent(jsonString)
}
}
}Set Theme
import SwiftUI
import CodeMirror
struct ContentView: View {
@ObservedObject var vm: CodeMirrorVM = .init()
@State var value: String = ""
var body: some View {
VStack {
CodeMirrorView(vm, value: $value)
.onAppear {
vm.setContent(jsonString)
}
Picker("Theme", selection: $vm.theme) {
ForEach(Themes.allCases, id: \.rawValue) {
Text($0.rawValue).tag($0)
}
}
}
}
}Set Programming Language
Picker("Lang", selection: $vm.language) {
ForEach(Language.allCases, id: \.rawValue) {
Text($0.rawValue).tag($0)
}
}vm.language = .jsonSet Editor Content
Button {
vm.setContent("Hello World!")
} label: {
Text("SET")
}Get Editor Text Content
Button {
Task {
let content = try? await vm.getContent()
print(content ?? "")
}
} label: {
Text("GET")
}Set Editor Read-Only
Toggle(isOn: $vm.readOnly, label: { Text("Read Only") })
.toggleStyle(.checkbox)Show Line Numbers
ToolbarItem {
Toggle(isOn: $vm.lineNumber, label: { Text("Line Number") })
.toggleStyle(.checkbox)
}Set Line Wrapping
ToolbarItem {
Toggle(isOn: $vm.lineWrapping, label: { Text("Line Wrapping") })
.toggleStyle(.checkbox)
}Event
@ObservedObject var vm: CodeMirrorVM = .init(
onLoadSuccess: {
print("@@@1 \(#function)")
},
onLoadFailed: { error in
print("@@@2 \(#function) \(error)")
},
onContentChange: { value in
print("@@@3 Content Did Change")
}
)Thanks to these projects:
- https://codemirror.net
- https://github.com/khoi/codemirror-swift
- https://github.com/ProxymanApp/CodeMirror-Swift
Licensed under the MIT License.