feat: add cmHighlightActiveLine decorator.

Author: jaywcjlove

Example/Example/ContentView.swift

@@ -18,6 +18,7 @@ struct ContentView: View {
     @State var value: String = jsonString
     @State var lineWrapping = false
     @State var lineNumber = true
+    @State var highlightActiveLine = true
     @State var foldGutter = false
     @State var readOnly = false
     @State var language: Language = .html
@@ -43,6 +44,7 @@ struct ContentView: View {
                 .cmReadOnly($readOnly)
                 .cmLanguage($language)
                 .cmEnabledSearch($enabledSearch)
+                .cmHighlightActiveLine($highlightActiveLine)
                 .cmTheme($theme)
                 .onLoadSuccess() {
                     print("Hello!")
@@ -68,6 +70,8 @@ struct ContentView: View {
                                 .toggleStyle(.checkbox)
                             Toggle(isOn: $enabledSearch, label: { Text("Enabled Search") })
                                 .toggleStyle(.checkbox)
+                            Toggle(isOn: $highlightActiveLine, label: { Text("Highlight Active Line") })
+                                .toggleStyle(.checkbox)
                         } label: {
                             Image(systemName: "gearshape.fill")
                                 .font(.system(size: 18))

README.md

@@ -149,11 +149,19 @@ struct ContentView: View {
     @State var value: String = ""
     var body: some View {
         CodeMirror(value: $value)
-            .cmEnabledSearch($enabledSearch)
+            .cmEnabledSearch(.constant(false))
     }
 }
 ```
 
+
+**Set enabled search**
+
+```swift
+CodeMirror(value: $value)
+    .cmHighlightActiveLine(.constant(false))
+```
+
 **Set Programming Language**
 
 ```swift

Sources/CodeMirror/CodeMirror.swift

@@ -25,6 +25,11 @@ public struct CodeMirror: View {
             }
     }
     /// Set Line Wrapping
+    public func cmHighlightActiveLine(_ value: Binding<Bool>) -> CodeMirror {
+        vm.highlightActiveLine = value.wrappedValue
+        return self as CodeMirror
+    }
+    /// Set Line Wrapping
     public func cmLineWrapping(_ value: Binding<Bool>) -> CodeMirror {
         vm.lineWrapping = value.wrappedValue
         return self as CodeMirror

Sources/CodeMirror/CodeMirrorVM.swift

@@ -17,6 +17,7 @@ import UIKit    // iOS / iPadOS
 public class CodeMirrorVM: ObservableObject {
     @Published public var lineWrapping = false
     @Published public var lineNumber = true
+    @Published public var highlightActiveLine = true
     @Published public var foldGutter = false
     @Published public var readOnly = false
     @Published public var enabledSearch = false
@@ -35,6 +36,7 @@ public class CodeMirrorVM: ObservableObject {
     public init(
         lineWrapping: Bool = false,
         lineNumber: Bool = true,
+        highlightActiveLine: Bool = true,
         foldGutter: Bool = false,
         readOnly: Bool = false,
         enabledSearch: Bool = false,
@@ -44,6 +46,7 @@ public class CodeMirrorVM: ObservableObject {
     ) {
         self.lineWrapping = lineWrapping
         self.lineNumber = lineNumber
+        self.highlightActiveLine = highlightActiveLine
         self.foldGutter = foldGutter
         self.readOnly = readOnly
         self.enabledSearch = enabledSearch

Sources/CodeMirror/CodeMirrorView.swift

@@ -99,6 +99,12 @@ public struct CodeMirrorView: NativeView {
                 args: ["value": vm.readOnly]
             )
         )
+        context.coordinator.queueJavascriptFunction(
+            JavascriptFunction(
+                functionString: "CodeMirror.setHighlightActiveLine(value)",
+                args: ["value": vm.highlightActiveLine]
+            )
+        )
         context.coordinator.queueJavascriptFunction(
             JavascriptFunction(
                 functionString: "CodeMirror.setEnabledSearch(value)",

Sources/CodeMirror/web.bundle/codemirror.bundle.js

@@ -141,6 +141,7 @@ const lineNumber = new Compartment();
 const foldGutterComp = new Compartment();
 const searchKeymapComp = new Compartment();
 const placeholderComp = new Compartment();
+const highlightActiveLineComp = new Compartment();
 
 const editorView = new CodeMirror.EditorView({
   doc: "",
@@ -157,7 +158,6 @@ const editorView = new CodeMirror.EditorView({
     autocompletion(),
     rectangularSelection(),
     crosshairCursor(),
-    highlightActiveLine(),
     highlightSelectionMatches(),
     keymap.of([
       ...closeBracketsKeymap,
@@ -167,6 +167,7 @@ const editorView = new CodeMirror.EditorView({
       ...completionKeymap,
       indentWithTab,
     ]),
+    highlightActiveLineComp.of([]),
     placeholderComp.of([]),
     searchKeymapComp.of([]),
     foldGutterComp.of([]),
@@ -259,6 +260,12 @@ function setEnabledSearch(enabled) {
   });
 }
 
+function setHighlightActiveLine(enabled) {
+  editorView.dispatch({
+    effects: highlightActiveLineComp.reconfigure(enabled ? [highlightActiveLine()] : []),
+  });
+}
+
 function setFoldGutter(enabled) {
   editorView.dispatch({
     effects: foldGutterComp.reconfigure(enabled ? foldGutter() : []),
@@ -284,6 +291,7 @@ export {
   setTheme,
   setLineWrapping,
   setLineNumber,
+  setHighlightActiveLine,
   setFoldGutter,
   setEnabledSearch,
   setFocus,