jaywcjlove/swiftui-codemirror

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

```swift
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**

```swift
struct ContentView: View {
    @State var lineWrapping = false
    @State var value: String = ""
    var body: some View {
        CodeMirror(value: $value)
            .cmLineWrapping($lineWrapping)
    }
}
```

**Show Line Numbers**

```swift
struct ContentView: View {
    @State var lineNumber = true
    @State var value: String = ""
    var body: some View {
        CodeMirror(value: $value)
            .cmLineNumber($lineNumber)
    }
}
```

**Show Fold Gutter**

```swift
struct ContentView: View {
    @State var foldGutter = false
    @State var value: String = ""
    var body: some View {
        CodeMirror(value: $value)
            .cmFoldGutter($foldGutter)
    }
}
```

**Set Editor Read-Only**

```swift
struct ContentView: View {
    @State var readOnly = false
    @State var value: String = ""
    var body: some View {
        CodeMirror(value: $value)
            .cmReadOnly($readOnly)
    }
}
```

**Set enabled search**

```swift
struct ContentView: View {
    @State var enabledSearch = false
    @State var value: String = ""
    var body: some View {
        CodeMirror(value: $value)
            .cmEnabledSearch(.constant(false))
    }
}
```

**Set Font Size**

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

**Set Highlight Active Line**

```swift
CodeMirror(value: $value)
    .cmHighlightActiveLine(.constant(false))
```

**Set Programming Language**

```swift
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**

```swift
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

```swift
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**

```swift
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**

```swift
Picker("Lang", selection: $vm.language) {
    ForEach(Language.allCases, id: \.rawValue) {
        Text($0.rawValue).tag($0)
    }
}
```

```swift
vm.language = .json
```

**Set Editor Content**

```swift
Button {
    vm.setContent("Hello World!")
} label: {
    Text("SET")
}
```

**Get Editor Text Content**

```swift
Button {
    Task {
        let content = try? await vm.getContent()
        print(content ?? "")
    }
} label: {
    Text("GET")
}
```

**Set Editor Read-Only**

```swift
Toggle(isOn: $vm.readOnly, label: { Text("Read Only") })
    .toggleStyle(.checkbox)
```

**Show Line Numbers**

```swift
ToolbarItem {
    Toggle(isOn: $vm.lineNumber, label: { Text("Line Number") })
        .toggleStyle(.checkbox)
}
```

**Set Line Wrapping**

```swift
ToolbarItem {
    Toggle(isOn: $vm.lineWrapping, label: { Text("Line Wrapping") })
        .toggleStyle(.checkbox)
}
```

**Event**

```swift
@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.

Package Metadata

Repository: jaywcjlove/swiftui-codemirror

Default branch: main

README: README.md