^{Using my app is also a way to support me:}

---

CodeMirror

SwiftUI wrapper for CodeMirror 6.

Features

• Minimal and fast
• Handles large documents with ease
• 40+ themes available
• macOS & iOS support
• Built with SwiftUI

Installation

Swift Package Manager

Add CodeMirror to your project using Xcode:

1. In Xcode, go to File → Add Package Dependencies...
2. Enter the repository URL: https://github.com/jaywcjlove/swiftui-codemirror.git
3. 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")
]

Usage

CodeMirror

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 Font Size

CodeMirror(value: $value)
    .cmFontSize(.constant(14))

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)
            )
    }
}

CodeMirrorView

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 = .json

Set 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")
    }
)

Acknowledgments

Thanks to these projects:

• https://codemirror.net
• https://github.com/khoi/codemirror-swift
• https://github.com/ProxymanApp/CodeMirror-Swift

License

Licensed under the MIT License.