use CM editor for the source of truth of code

allows formatting without losing cursor position

Author: tsnobip

src/Playground.res

@@ -1180,14 +1180,29 @@ module ControlPanel = {
     }
   }
 
+  let commandWithKeyboardShortcut = (commandName, ~key) => {
+    let userAgent = window.navigator.userAgent
+    if userAgent->String.includes("iPhone") || userAgent->String.includes("Android") {
+      commandName
+    } else if userAgent->String.includes("Mac") {
+      `${commandName} (⌘ + ${key})`
+    } else {
+      `${commandName} (Ctrl + ${key})`
+    }
+  }
+
   @react.component
   let make = (
     ~actionIndicatorKey: string,
     ~state: CompilerManagerHook.state,
     ~dispatch: CompilerManagerHook.action => unit,
-    ~editorCode: React.ref<string>,
+    ~editorRef: React.ref<option<CodeMirror.editorInstance>>,
     ~setCurrentTab: (tab => tab) => unit,
   ) => {
+    let format = () =>
+      editorRef.current->Option.forEach(editorInstance =>
+        dispatch(Format(CodeMirror.editorGetValue(editorInstance)))
+      )
     React.useEffect(() => {
       switch state {
       | Ready(_)
@@ -1202,6 +1217,9 @@ module ControlPanel = {
             event->ReactEvent.Keyboard.preventDefault
             setCurrentTab(_ => Output)
             dispatch(RunCode)
+          | (true, "s") =>
+            event->ReactEvent.Keyboard.preventDefault
+            format()
           | _ => ()
           }
         }
@@ -1220,7 +1238,7 @@ module ControlPanel = {
     | Ready(_) =>
       let onFormatClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
-        dispatch(Format(editorCode.current))
+        format()
       }
 
       let autoRun = switch state {
@@ -1230,18 +1248,6 @@ module ControlPanel = {
       | _ => false
       }
 
-      let runButtonText = {
-        let userAgent = window.navigator.userAgent
-        let run = "Run"
-        if userAgent->String.includes("iPhone") || userAgent->String.includes("Android") {
-          run
-        } else if userAgent->String.includes("Mac") {
-          `${run} (⌘ + E)`
-        } else {
-          `${run} (Ctrl + E)`
-        }
-      }
-
       <div className="flex flex-row gap-x-2" dataTestId="control-panel">
         <ToggleButton
           checked=autoRun
@@ -1261,9 +1267,11 @@ module ControlPanel = {
             dispatch(RunCode)
           }}
         >
-          {React.string(runButtonText)}
+          {React.string(commandWithKeyboardShortcut("Run", ~key="E"))}
+        </Button>
+        <Button onClick=onFormatClick>
+          {React.string(commandWithKeyboardShortcut("Format", ~key="S"))}
         </Button>
-        <Button onClick=onFormatClick> {React.string("Format")} </Button>
         <ShareButton actionIndicatorKey />
       </div>
     | _ => React.null
@@ -1513,6 +1521,8 @@ let initialReContent = `Js.log("Hello Reason 3.6!");`
 @react.component
 let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   let (searchParams, _) = ReactRouter.useSearchParams()
+  let containerRef = React.useRef(Nullable.null)
+  let editorRef: React.ref<option<CodeMirror.editorInstance>> = React.useRef(None)
 
   let versions =
     versions
@@ -1584,7 +1594,10 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   // We don't count to infinity. This value is only required to trigger
   // rerenders for specific components (ActivityIndicator)
   let (actionCount, setActionCount) = React.useState(_ => 0)
-  let onAction = _ => setActionCount(prev => prev > 1000000 ? 0 : prev + 1)
+  let onAction = React.useCallback(
+    _ => setActionCount(prev => prev > 1000000 ? 0 : prev + 1),
+    [setActionCount],
+  )
   let (compilerState, compilerDispatch) = useCompilerManager(
     ~bundleBaseUrl,
     ~initialVersion?,
@@ -1594,10 +1607,11 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     ~initialLang,
     ~onAction,
     ~versions,
-    (),
   )
 
   let (keyMap, setKeyMap) = React.useState(() => CodeMirror.KeyMap.Default)
+  let typingTimer = React.useRef(None)
+  let timeoutCompile = React.useRef(_ => ())
 
   React.useEffect(() => {
     setKeyMap(_ =>
@@ -1609,50 +1623,82 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     None
   }, [])
 
+  React.useEffect(() => {
+    switch containerRef.current {
+    | Value(parent) =>
+      let mode = switch compilerState {
+      | Ready({targetLang: Reason}) => "reason"
+      | Ready({targetLang: Res}) => "rescript"
+      | _ => "rescript"
+      }
+      let config: CodeMirror.editorConfig = {
+        parent,
+        initialValue: initialContent,
+        mode,
+        readOnly: false,
+        lineNumbers: true,
+        lineWrapping: false,
+        keyMap: CodeMirror.KeyMap.Default,
+        errors: [],
+        hoverHints: [],
+        onChange: {
+          value => {
+            switch typingTimer.current {
+            | None => ()
+            | Some(timer) => clearTimeout(timer)
+            }
+            let timer = setTimeout(~handler=() => {
+              timeoutCompile.current(value)
+              typingTimer.current = None
+            }, ~timeout=100)
+            typingTimer.current = Some(timer)
+          }
+        },
+      }
+      let editor = CodeMirror.createEditor(config)
+      editorRef.current = Some(editor)
+      Some(() => CodeMirror.editorDestroy(editor))
+    | Null | Undefined => None
+    }
+  }, [])
+
   React.useEffect(() => {
     Dom.Storage2.localStorage->Dom.Storage2.setItem("vimMode", CodeMirror.KeyMap.toString(keyMap))
+    editorRef.current->Option.forEach(CodeMirror.editorSetKeyMap(_, keyMap))
     None
   }, [keyMap])
 
   let editorCode = React.useRef(initialContent)
 
-  /* In case the compiler did some kind of syntax conversion / reformatting,
-   we take any success results and set the editor code to the new formatted code */
-  switch compilerState {
-  | Ready({result: FinalResult.Nothing} as ready) =>
-    try {
-      compilerDispatch(CompileCode(ready.targetLang, editorCode.current))
-    } catch {
-    | err => Console.error(err)
-    }
-  | Ready({result: FinalResult.Conv(Api.ConversionResult.Success({code}))}) =>
-    editorCode.current = code
-  | _ => ()
-  }
-
   /*
-     The codemirror state and the compilerState are not dependent on eachother,
+     The codemirror state and the compilerState are not dependent on each other,
      so we need to sync a timeoutCompiler function with our compilerState to be
      able to do compilation on code changes.
 
      The typingTimer is a debounce mechanism to prevent compilation during editing
      and will be manipulated by the codemirror onChange function.
  */
-  let typingTimer = React.useRef(None)
-  let timeoutCompile = React.useRef(() => ())
-
   React.useEffect(() => {
-    timeoutCompile.current = () =>
+    timeoutCompile.current = code =>
       switch compilerState {
-      | Ready(ready) =>
-        try {
-          compilerDispatch(CompileCode(ready.targetLang, editorCode.current))
-        } catch {
-        | err => Console.error(err)
-        }
+      | Ready({targetLang}) => compilerDispatch(CompileCode(targetLang, code))
       | _ => ()
       }
 
+    switch (compilerState, editorRef.current) {
+    | (Ready({result: FinalResult.Nothing, targetLang}), Some(editorInstance)) =>
+      try {
+        compilerDispatch(CompileCode(targetLang, CodeMirror.editorGetValue(editorInstance)))
+      } catch {
+      | err => Console.error(err)
+      }
+    | (
+        Ready({result: FinalResult.Conv(Api.ConversionResult.Success({code}))}),
+        Some(editorInstance),
+      ) =>
+      CodeMirror.editorSetValue(editorInstance, code)
+    | _ => ()
+    }
     None
   }, (compilerState, compilerDispatch))
 
@@ -1856,12 +1902,6 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   | _ => []
   }
 
-  let mode = switch compilerState {
-  | Ready({targetLang: Reason}) => "reason"
-  | Ready({targetLang: Res}) => "rescript"
-  | _ => "rescript"
-  }
-
   let (currentTab, setCurrentTab) = React.useState(_ => JavaScript)
 
   let disabled = false
@@ -1951,8 +1991,8 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
       dispatch=compilerDispatch
-      editorCode
       setCurrentTab
+      editorRef
     />
     <div
       className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
@@ -1965,26 +2005,9 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
             ? "w-full"
             : "w-[50%]"}`}
       >
-        <CodeMirror
+        <div
           className="bg-gray-100 h-full"
-          mode
-          hoverHints=cmHoverHints
-          errors=cmErrors
-          value={editorCode.current}
-          onChange={value => {
-            editorCode.current = value
-
-            switch typingTimer.current {
-            | None => ()
-            | Some(timer) => clearTimeout(timer)
-            }
-            let timer = setTimeout(~handler=() => {
-              timeoutCompile.current()
-              typingTimer.current = None
-            }, ~timeout=100)
-            typingTimer.current = Some(timer)
-          }}
-          keyMap
+          ref={ReactDOM.Ref.domRef((Obj.magic(containerRef): React.ref<Nullable.t<Dom.element>>))}
         />
       </div>
       // Separator

src/common/CompilerManagerHook.res

@@ -249,13 +249,12 @@ let useCompilerManager = (
   ~initialLang: Lang.t=Res,
   ~onAction: option<action => unit>=?,
   ~versions: array<Semver.t>,
-  (),
 ) => {
   let (state, setState) = React.useState(_ => Init)
   let {pathname} = ReactRouter.useLocation()
 
   // Dispatch method for the public interface
-  let dispatch = (action: action): unit => {
+  let dispatch = React.useCallback((action: action): unit => {
     Option.forEach(onAction, cb => cb(action))
     setState(state =>
       switch action {
@@ -295,47 +294,49 @@ let useCompilerManager = (
           let currentLang = ready.targetLang
 
           Array.find(availableTargetLangs, l => l === lang)
-          ->Option.map(lang => {
-            // Try to automatically transform code
-            let (result, targetLang) = switch ready.selected.apiVersion {
-            | V1 =>
-              let convResult = switch (currentLang, lang) {
-              | (Reason, Res) =>
-                instance->Compiler.convertSyntax(~fromLang=Reason, ~toLang=Res, ~code)->Some
-              | (Res, Reason) =>
-                instance->Compiler.convertSyntax(~fromLang=Res, ~toLang=Reason, ~code)->Some
-              | _ => None
-              }
+          ->Option.map(
+            lang => {
+              // Try to automatically transform code
+              let (result, targetLang) = switch ready.selected.apiVersion {
+              | V1 =>
+                let convResult = switch (currentLang, lang) {
+                | (Reason, Res) =>
+                  instance->Compiler.convertSyntax(~fromLang=Reason, ~toLang=Res, ~code)->Some
+                | (Res, Reason) =>
+                  instance->Compiler.convertSyntax(~fromLang=Res, ~toLang=Reason, ~code)->Some
+                | _ => None
+                }
 
-              /*
+                /*
                     Syntax convertion works the following way:
                     If currentLang -> otherLang is not valid, try to pretty print the code
                     with the otherLang, in case we e.g. want to copy paste or otherLang code
                     in the editor and quickly switch to it
  */
-              switch convResult {
-              | Some(result) =>
-                switch result {
-                | ConversionResult.Fail(_)
-                | Unknown(_, _)
-                | UnexpectedError(_) =>
-                  let secondTry =
-                    instance->Compiler.convertSyntax(~fromLang=lang, ~toLang=lang, ~code)
-                  switch secondTry {
+                switch convResult {
+                | Some(result) =>
+                  switch result {
                   | ConversionResult.Fail(_)
                   | Unknown(_, _)
-                  | UnexpectedError(_) => (FinalResult.Conv(secondTry), lang)
-                  | Success(_) => (Conv(secondTry), lang)
+                  | UnexpectedError(_) =>
+                    let secondTry =
+                      instance->Compiler.convertSyntax(~fromLang=lang, ~toLang=lang, ~code)
+                    switch secondTry {
+                    | ConversionResult.Fail(_)
+                    | Unknown(_, _)
+                    | UnexpectedError(_) => (FinalResult.Conv(secondTry), lang)
+                    | Success(_) => (Conv(secondTry), lang)
+                    }
+                  | ConversionResult.Success(_) => (Conv(result), lang)
                   }
-                | ConversionResult.Success(_) => (Conv(result), lang)
+                | None => (Nothing, lang)
                 }
-              | None => (Nothing, lang)
+              | _ => (Nothing, lang)
               }
-            | _ => (Nothing, lang)
-            }
 
-            Ready({...ready, result, errors: [], targetLang})
-          })
+              Ready({...ready, result, errors: [], targetLang})
+            },
+          )
           ->Option.getOr(state)
         | _ => state
         }
@@ -401,7 +402,7 @@ let useCompilerManager = (
         }
       }
     )
-  }
+  }, [onAction])
 
   let dispatchError = (err: error) =>
     setState(prev => {

src/common/CompilerManagerHook.resi

@@ -69,7 +69,6 @@ let useCompilerManager: (
   ~initialLang: Lang.t=?,
   ~onAction: action => unit=?,
   ~versions: array<Semver.t>,
-  unit,
 ) => (state, action => unit)
 
 let createUrl: (string, ready) => string