feat: add cmFoldGutter decorator.

Author: jaywcjlove

Example/Example/ContentView.swift

@@ -37,6 +37,7 @@ struct ContentView: View {
     @State var value: String = jsonString
     @State var lineWrapping = false
     @State var lineNumber = true
+    @State var foldGutter = false
     @State var readOnly = false
     @State var language: Language = .json
     @State var theme: Themes = .vscodedark
@@ -50,6 +51,7 @@ struct ContentView: View {
             CodeMirror(value: $value)
                 .cmLineNumber($lineNumber)
                 .cmLineWrapping($lineWrapping)
+                .cmFoldGutter($foldGutter)
                 .cmReadOnly($readOnly)
                 .cmLanguage($language)
                 .cmTheme($theme)
@@ -65,18 +67,28 @@ struct ContentView: View {
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
                 .safeAreaInset(edge: .bottom, spacing: 0) {
                     HStack {
-                        Toggle(isOn: $lineNumber, label: { Text("Line Number") })
-                            .toggleStyle(.checkbox)
-                        Toggle(isOn: $lineWrapping, label: { Text("Line Wrapping") })
-                            .toggleStyle(.checkbox)
+                        Menu {
+                            Toggle(isOn: $lineNumber, label: { Text("Line Number") })
+                                .toggleStyle(.checkbox)
+                            Toggle(isOn: $lineWrapping, label: { Text("Line Wrapping") })
+                                .toggleStyle(.checkbox)
+                            Toggle(isOn: $foldGutter, label: { Text("Fold Gutter") })
+                                .toggleStyle(.checkbox)
+                            Toggle(isOn: $readOnly, label: { Text("Read Only") })
+                                .toggleStyle(.checkbox)
+                        } label: {
+                            Image(systemName: "gearshape.fill")
+                                .font(.system(size: 18))
+                                .foregroundColor(.secondary)
+                        }
+                        .menuIndicator(.hidden)
+                        .buttonStyle(.plain)
                         Button {
                             count += 1
                             value = "Hello World! \(count)"
                         } label: {
                             Text("SET")
                         }
-                        Toggle(isOn: $readOnly, label: { Text("Read Only") })
-                            .toggleStyle(.checkbox)
                         Spacer()
                         Picker("Lang", selection: $language) {
                             ForEach(Language.allCases, id: \.rawValue) {

README.md

@@ -114,6 +114,19 @@ struct ContentView: View {
 }
 ```
 
+**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

Sources/CodeMirror/CodeMirror.swift

@@ -36,6 +36,11 @@ public struct CodeMirror: View {
         vm.language = value.wrappedValue
         return self as CodeMirror
     }
+    /// Set Programming Language
+    public func cmFoldGutter(_ value: Binding<Bool>) -> CodeMirror {
+        vm.foldGutter = value.wrappedValue
+        return self as CodeMirror
+    }
     /// Set Theme
     public func cmTheme(_ value: Binding<Themes>) -> CodeMirror {
         vm.theme = value.wrappedValue

Sources/CodeMirror/CodeMirrorVM.swift

@@ -86,6 +86,7 @@ public enum Themes: String, CaseIterable, Hashable {
 public class CodeMirrorVM: ObservableObject {
     @Published public var lineWrapping = false
     @Published public var lineNumber = true
+    @Published public var foldGutter = false
     @Published public var readOnly = false
     @Published public var language: Language = .json
     @Published public var theme: Themes = .vscodelight
@@ -99,11 +100,13 @@ public class CodeMirrorVM: ObservableObject {
     public init(
         lineWrapping: Bool = false,
         lineNumber: Bool = false,
+        foldGutter: Bool = false,
         language: Language = .json,
         theme: Themes = .vscodedark
     ) {
         self.lineWrapping = lineWrapping
         self.lineNumber = lineNumber
+        self.foldGutter = foldGutter
         self.readOnly = readOnly
         self.language = language
         self.theme = theme

Sources/CodeMirror/CodeMirrorView.swift

@@ -85,10 +85,16 @@ public struct CodeMirrorView: NativeView {
         )
         context.coordinator.queueJavascriptFunction(
             JavascriptFunction(
-                functionString: "CodeMirror.setlineNumber(value)",
+                functionString: "CodeMirror.setLineNumber(value)",
                 args: ["value": vm.lineNumber]
             )
         )
+        context.coordinator.queueJavascriptFunction(
+            JavascriptFunction(
+                functionString: "CodeMirror.setFoldGutter(value)",
+                args: ["value": vm.foldGutter]
+            )
+        )
         context.coordinator.queueJavascriptFunction(
             JavascriptFunction(
                 functionString: "CodeMirror.setReadOnly(value)",

Sources/CodeMirror/html/codemirror.js

@@ -97,6 +97,8 @@ const listener = new Compartment();
 const readOnly = new Compartment();
 const lineWrapping = new Compartment();
 const lineNumber = new Compartment();
+const foldGutterComp = new Compartment();
+
 const SUPPORTED_LANGUAGES_MAP = {
   javascript,
   jsx: () => javascript({ jsx: true }),
@@ -187,7 +189,6 @@ const editorView = new CodeMirror.EditorView({
     highlightActiveLineGutter(),
     highlightSpecialChars(),
     history(),
-    foldGutter(),
     drawSelection(),
     dropCursor(),
     indentOnInput(),
@@ -208,6 +209,7 @@ const editorView = new CodeMirror.EditorView({
       ...completionKeymap,
       indentWithTab,
     ]),
+    foldGutterComp.of([]),
     readOnly.of([]),
     lineWrapping.of([]),
     lineNumber.of([]),
@@ -275,12 +277,18 @@ function setLineWrapping(enabled) {
   });
 }
 
-function setlineNumber(enabled) {
+function setLineNumber(enabled) {
   editorView.dispatch({
     effects: lineNumber.reconfigure(enabled ? lineNumbers() : []),
   });
 }
 
+function setFoldGutter(enabled) {
+  editorView.dispatch({
+    effects: foldGutterComp.reconfigure(enabled ? foldGutter() : []),
+  });
+}
+
 export {
   setLanguage,
   getSupportedLanguages,
@@ -290,6 +298,7 @@ export {
   setReadOnly,
   setTheme,
   setLineWrapping,
-  setlineNumber,
+  setLineNumber,
+  setFoldGutter,
   editorView,
 };