feat: Add placeholder hint to the editor.

Author: jaywcjlove

Example/Example/ContentView.swift

@@ -50,11 +50,12 @@ struct ContentView: View {
     }
     var body: some View {
         VStack(spacing: 0) {
+            TextField("Placeholder", text: $textForTextField)
 //            ScrollView {
 //                Text(value)
 //            }
 //            .frame(height: 120)
-            CodeMirror(value: $value)
+            CodeMirror(value: $value, prompt: String(localized: "Please enter text"))
                 .cmLineNumber($lineNumber)
                 .cmLineWrapping($lineWrapping)
                 .cmFoldGutter($foldGutter)
@@ -99,26 +100,11 @@ struct ContentView: View {
                         } label: {
                             Text("SET")
                         }
-                        Button {
-                            self.input = .output
-                        } label: {
-                            Text("Focused1")
-                        }
                         Button {
                             self.input = .text
                         } label: {
                             Text("Focused text")
                         }
-                        Button {
-                            self.input = .test
-                        } label: {
-                            Text("Focused3")
-                        }
-                        Button {
-                            self.input = nil
-                        } label: {
-                            Text("Focused4")
-                        }
                         Spacer()
                         Picker("Lang", selection: $language) {
                             ForEach(Language.allCases, id: \.rawValue) {

README.md

@@ -74,6 +74,7 @@ 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!")

Sources/CodeMirror/CodeMirror.swift

@@ -11,8 +11,9 @@ public struct CodeMirror: View {
     @ObservedObject var vm: CodeMirrorVM = .init()
     @Binding var value: String
     @FocusState private var isFocused: Bool
-    public init(value: Binding<String>) {
+    public init(value: Binding<String>, prompt: String = "") {
         self._value = value
+        self.vm.placeholder = prompt
     }
     public var body: some View {
         CodeMirrorView(vm, value: $value)

Sources/CodeMirror/CodeMirrorVM.swift

@@ -90,6 +90,7 @@ public class CodeMirrorVM: ObservableObject {
     @Published public var enabledSearch = false
     @Published public var language: Language = .json
     @Published public var theme: Themes = .vscodelight
+    @Published public var placeholder: String = ""
 
     @Published public var focused = false
 
@@ -105,6 +106,7 @@ public class CodeMirrorVM: ObservableObject {
         foldGutter: Bool = false,
         readOnly: Bool = false,
         enabledSearch: Bool = false,
+        placeholder: String = "",
         language: Language = .json,
         theme: Themes = .vscodedark
     ) {
@@ -113,6 +115,7 @@ public class CodeMirrorVM: ObservableObject {
         self.foldGutter = foldGutter
         self.readOnly = readOnly
         self.enabledSearch = enabledSearch
+        self.placeholder = placeholder
         self.language = language
         self.theme = theme
     }

Sources/CodeMirror/CodeMirrorView.swift

@@ -113,6 +113,12 @@ public struct CodeMirrorView: NativeView {
                 args: ["value": vm.language.rawValue]
             )
         )
+        context.coordinator.queueJavascriptFunction(
+            JavascriptFunction(
+                functionString: "CodeMirror.setPlaceholder(value)",
+                args: ["value": vm.placeholder]
+            )
+        )
         context.coordinator.queueJavascriptFunction(
             JavascriptFunction(
                 functionString: vm.focused == true ? "CodeMirror.setFocus()" : "CodeMirror.setBlur()",

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

@@ -1,6 +1,6 @@
 import * as CodeMirror from "codemirror";
 import { Compartment, EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { EditorView, placeholder } from "@codemirror/view";
 import { indentWithTab } from "@codemirror/commands";
 import { StreamLanguage } from '@codemirror/language';
 import { javascript } from "@codemirror/lang-javascript";
@@ -183,6 +183,7 @@ const lineWrapping = new Compartment();
 const lineNumber = new Compartment();
 const foldGutterComp = new Compartment();
 const searchKeymapComp = new Compartment();
+const placeholderComp = new Compartment();
 
 const editorView = new CodeMirror.EditorView({
   doc: "",
@@ -209,6 +210,7 @@ const editorView = new CodeMirror.EditorView({
       ...completionKeymap,
       indentWithTab,
     ]),
+    placeholderComp.of([]),
     searchKeymapComp.of([]),
     foldGutterComp.of([]),
     readOnly.of([]),
@@ -266,6 +268,12 @@ function setListener(fn) {
   });
 }
 
+function setPlaceholder(value) {
+  editorView.dispatch({
+    effects: placeholderComp.reconfigure(value ? [placeholder(value)] : []),
+  });
+}
+
 function setReadOnly(value) {
   editorView.dispatch({
     effects: readOnly.reconfigure(value ? EditorState.readOnly.of(true) : []),
@@ -307,6 +315,7 @@ function setBlur() {
 export {
   setLanguage,
   getSupportedLanguages,
+  setPlaceholder,
   setContent,
   getContent,
   setListener,