CodeEditor - A SwiftUI TextEditor with syntax highlighting using Highlight.js

This PR addresses #2.

The selected text range can be observed and modified via another Binding now:

 struct ContentView: View {
    static private let initialSource = "let a = 42\n"

    @State private var source = Self.initialSource
    @State private var selection = Self.initialSource.endIndex..<Self.initialSource.endIndex

    var body: some View {
        CodeEditor(source: $source,
                   selection: $selection,
                   language: .swift,
                   theme: .ocean,
                   autoscroll: false)
        Button("Select All") {
            selection = source.startIndex..<source.endIndex
        }
    }
}

When autoscroll is true, the editor automatically scrolls to the respective cursor position when selection is modfied from the outside, i.e. programatically.

When CodeEditor and ColorPicker are used at the same time, the color of CodeEditor changes

import SwiftUI
import CodeEditor

struct ContentView: View {
    @State private var source = """
struct ContentView: View {
    @State private var source = "let a = 42\n"
    @State var color: Color = Color.white
    var body: some View {
        HStack {
            ColorPicker("Color Picker", selection: $color)
            CodeEditor(source: $source, language: .swift, theme: .ocean)
        }
    }
}
"""
    @State var color: Color = Color.white
    var body: some View {
        HStack {
            ColorPicker("Color Picker", selection: $color)
            CodeEditor(source: $source, language: .swift, theme: .ocean)
        }
    }
}

https://user-images.githubusercontent.com/84154073/164365639-cad35ec1-ac9e-4ce4-82b8-66e1c7b589e7.mov

If using lua, then double dash aka -- is comment character. iOS has the feature to merge -- into a longer single dash..... Any idea, how to turn this off in CodeEditor ? I could not find any solution

Hello, Thanks for this great library!

A beginner's question: what's the easiest way to add keyboard shortcuts? I'd like to execute a closure upon receiving a specific keyboard combination, ex. Cmd-R.

Thanks!

I switched from SwiftUI's TextEditor to this CodeEditor. it really amazed me. However, I found I cannot specify the font and font size as I did in the TextEditor. The code is as follow,

CodeEditor(source: $formulaInput, language: .python, theme: .default,
                       autoPairs: ["(" : ")", "{" : "}", "[" : "]"])
                .font(.custom("SF Mono Bold", size: fontSize))

Can you teach me how to use a customized font? Thank you so much

I want to insert some text in the code editor. Markdown example: Select some text, press Cmd-B for Bold, and have two asterisks inserted before and after the selection. But to do this, I need to get the code editor's selection range. How do I get the selection range?

I noticed that the README was wrong, so I fixed it.

Picker("Theme", selection: $theme) { theme in
  ForEach(CodeEditor.availableThemes) {
    Text("\(theme.rawValue.capitalized)")
      .tag(theme)
  }
}

↓ Change ↓

Picker("Theme", selection: $theme) {
  ForEach(CodeEditor.availableThemes) { theme in
    Text("\(theme.rawValue.capitalized)")
      .tag(theme)
  }
}

Summary

This PR adds missing UITextViewDelegate's function, which fixes #6.

What was done

• [x] Implement textViewDidChange(_ textView: UITextView) function in UXCodeTextViewRepresentable.Coordinator class.

Description

When a user enters text into CodeEditor, the binding is not called. This happens only on iOS. When using CodeEditor in a macOS app, there are no issues.

Environment

• Xcode v13.2.1
• iOS 15.2 Simulator

Steps to reproduce

1. Embed CodeEditor in SwiftUI iOS application

   struct ContentView: View {
     @State var text = "TEST"
   
     var body: some View {
       VStack {
         CodeEditor(source: $text)
           .frame(height: 100)
   
         Divider()
   
         Text(text)
           .frame(maxWidth: .infinity, alignment: .leading)
           .multilineTextAlignment(.leading)
   
         Spacer()
       }
     }
   }
   

2. Run the app in iOS Simulator

3. Enter some text into CodeEditor

4. Notice that the text property is not updated.

When trying to use a CodeEditor view in my SP4 app, the editor always shows a clear background with a black letter font, no matter what theme I chose.

Hello and first of all thank you for this great library :)

I'm trying to replicate something similar to Xcode tabs, with some kind of top "tab bar" selecting each code file I want to edit.

Since SwiftUI's TabView doesn't (currently) allow for tab bar customization, I've created my own using buttons in a HStack. When I click a button, the "main view" (containing the CodeEditor for selected file) changes and shows me file contents.

The bug I've found is very strange, after changing one of two tabs the global "state" starts to mixup, showing up either wrong file content (the previous one) or resetting contents after window loses focus or when my tab changes.

System's TextEditor seems to work fine.

I have a strong suspect this is somehow related to SwiftUI.

I hope attached video is "self explaining" (window always has focus, but something strange also happens when you focus any other application).

you can find it here https://github.com/stefanomondino/CodeEditor in the Demo folder.

https://user-images.githubusercontent.com/1691903/168474027-aedb3b73-5bcb-4183-b755-d745c11941cc.mov

Also, it's worth nothing that also CodeEditorView (a very similar project) has the same issue.

Let me know if you have any idea, thanks!

I found a new issue regarding the relationship between ColorPicker and CodeEditor

(1) Start ColorPicker (2) Double-tap Text in CodeEditor

↓ Result ↓

The color of the Text is reflected in the ColorPicker

import SwiftUI
import CodeEditor

struct ContentView: View {
    @State var source: String = """
import SwiftUI
import CodeEditor

struct ContentView: View {
    @State var source: String = ""
    @State var color: Color = Color.white
    var body: some View {
        HStack {
            ColorPicker("", selection: $color)
            CodeEditor(source: $source)
        }
    }
}
"""
    @State var color: Color = Color.white
    var body: some View {
        ZStack {
            color
                .edgesIgnoringSafeArea(.all)
            HStack {
                ColorPicker("ColorPicker", selection: $color)
                CodeEditor(source: $source, language: .swift, theme: .pojoaque)
            }
        }
    }
}

https://user-images.githubusercontent.com/84154073/164490460-6978fbbb-2afc-4e30-973b-87aae9435ae5.mp4

I am using this to build an App for reading codes on iOS. This package works fine for building SwiftUI Views. However, when I am using it to build an Action Extension, this error below occurs. Can you help me with that? Thanks a lot!

Undefined symbols for architecture x86_64: "nominal type descriptor for CodeViewer.CodeViewer", referenced from: _symbolic ____y___________y_____y_____GGACy_____y__________y_____SgGGGQo 7SwiftUI4ViewPAAE18navigationBarItems7leading8trailingQrqd___qd_0_tAaBRd__AaBRd_0_r0_lFQO 10CodeViewerAGV AA6HStackV AA6ButtonV AA4TextV AA15ModifiedContentV AA5ImageV AA30_EnvironmentKeyWritingModifierV AA4FontV in EditorView.o _symbolic ____y_____y___________y_____y_____GGACy_____y__________y_____SgGGGQo_______Qo 7SwiftUI4ViewPAAE5sheet11isPresented9onDismiss7contentQrAA7BindingVySbG_yycSgqd__yctAaBRd__lFQO AcAE18navigationBarItems7leading8trailingQrqd___qd_0_tAaBRd__AaBRd_0_r0_lFQO 10CodeViewerAOV AA6HStackV AA6ButtonV AA4TextV AA15ModifiedContentV AA5ImageV AA30_EnvironmentKeyWritingModifierV AA4FontV 15ActionExtension05ThemeC0V in EditorView.o "nominal type descriptor for CodeViewer.CodeWebView.Theme", referenced from: _symbolic _____y_____G 7SwiftUI5StateV 10CodeViewer0D7WebViewC5ThemeO in EditorView.o "CodeViewer.CodeViewer.init(content: SwiftUI.Binding<Swift.String>, mode: CodeViewer.CodeWebView.Mode, darkTheme: CodeViewer.CodeWebView.Theme, lightTheme: CodeViewer.CodeWebView.Theme, isReadOnly: Swift.Bool, fontSize: Swift.Int, textDidChanged: ((Swift.String) -> ())?) -> CodeViewer.CodeViewer", referenced from: ActionExtension.EditorView.body.getter : some in EditorView.o "protocol conformance descriptor for CodeViewer.CodeViewer : SwiftUI.View in CodeViewer", referenced from: lazy protocol witness table accessor for type CodeViewer.CodeViewer and conformance CodeViewer.CodeViewer : SwiftUI.View in CodeViewer in EditorView.o "type metadata accessor for CodeViewer.CodeViewer", referenced from: ActionExtension.EditorView.body.getter : some in EditorView.o lazy protocol witness table accessor for type CodeViewer.CodeViewer and conformance CodeViewer.CodeViewer : SwiftUI.View in CodeViewer in EditorView.o outlined destroy of CodeViewer.CodeViewer in EditorView.o l_get_witness_table qd0__7SwiftUI4ViewHD3_AaBPAAE5sheet11isPresented9onDismiss7contentQrAA7BindingVySbG_yycSgqd__yctAaBRd__lFQOyAcAE18navigationBarItems7leading8trailingQrqd___qd_0_tAaBRd__AaBRd_0_r0_lFQOy10CodeViewerAOV_AA6HStackVyAA6ButtonVyAA4TextVGGATyAA15ModifiedContentVyAA5ImageVAA30_EnvironmentKeyWritingModifierVyAA4FontVSgGGGQo__15ActionExtension05ThemeC0VQo_HO in EditorView.o "type metadata for CodeViewer.CodeWebView.Theme", referenced from: property wrapper backing initializer of ActionExtension.EditorView.(theme in _1FD4E17BFA9D43C14FDD2767A1577070) : CodeViewer.CodeWebView.Theme in EditorView.o ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1 (use -v to see invocation)