Restructure / Refactor Playground UI

- Add HighlightJS dark styling
- Change the way Codemirror is dynamically loaded
- Add ~fixed option to Navigation
- Use hljs output field instead of CodeMirror instance

Author: ryyppy

common/HighlightJs.re

@@ -4,3 +4,47 @@ type highlightResult = {value: string};
 [@bs.module "highlight.js/lib/highlight"]
 external highlight: (~lang: string, ~value: string) => highlightResult =
   "highlight";
+
+let renderHLJS =
+    (
+      ~highlightedLines=[||],
+      ~darkmode=false,
+      ~code: string,
+      ~lang: string,
+      (),
+    ) => {
+  // If the language couldn't be parsed, we will fall back to text
+  let (lang, highlighted) =
+    try((lang, highlight(~lang, ~value=code)->valueGet)) {
+    | Js.Exn.Error(_) => ("text", code)
+    };
+
+  // Add line highlighting as well
+  let highlighted =
+    if (Belt.Array.length(highlightedLines) > 0) {
+      Js.String2.split(highlighted, "\n")
+      ->Belt.Array.mapWithIndex((i, line) =>
+          if (Js.Array2.find(highlightedLines, lnum => lnum === i + 1) !== None) {
+            "<span class=\"hljs-line-highlight\">" ++ line ++ "</span>";
+          } else {
+            line;
+          }
+        )
+      ->Js.Array2.joinWith("\n");
+    } else {
+      highlighted;
+    };
+
+  let dark = darkmode ? "dark" : "";
+  ReactDOMRe.createElementVariadic(
+    "code",
+    ~props=
+      ReactDOMRe.objToDOMProps({
+        "className": "wrap hljs lang-" ++ lang ++ " " ++ dark,
+        "dangerouslySetInnerHTML": {
+          "__html": highlighted,
+        },
+      }),
+    [||],
+  );
+};

components/CodeExample.re

@@ -1,41 +1,5 @@
 open Util.ReactStuff;
 
-let renderHLJS = (~highlightedLines=[||], ~code: string, ~lang: string, ()) => {
-  // If the language couldn't be parsed, we will fall back to text
-  let (lang, highlighted) =
-    try((lang, HighlightJs.(highlight(~lang, ~value=code)->valueGet))) {
-    | Js.Exn.Error(_) => ("text", code)
-    };
-
-  // Add line highlighting as well
-  let highlighted =
-    if (Belt.Array.length(highlightedLines) > 0) {
-      Js.String2.split(highlighted, "\n")
-      ->Belt.Array.mapWithIndex((i, line) =>
-          if (Js.Array2.find(highlightedLines, lnum => lnum === i + 1) !== None) {
-            "<span class=\"hljs-line-highlight\">" ++ line ++ "</span>";
-          } else {
-            line;
-          }
-        )
-      ->Js.Array2.joinWith("\n");
-    } else {
-      highlighted;
-    };
-
-  ReactDOMRe.createElementVariadic(
-    "code",
-    ~props=
-      ReactDOMRe.objToDOMProps({
-        "className": "wrap hljs lang-" ++ lang,
-        "dangerouslySetInnerHTML": {
-          "__html": highlighted,
-        },
-      }),
-    [||],
-  );
-};
-
 let langShortname = (lang: string) => {
   switch (lang) {
   | "ocaml" => "ml"
@@ -49,7 +13,7 @@ let langShortname = (lang: string) => {
 
 [@react.component]
 let make = (~highlightedLines=[||], ~code: string, ~showLabel=true, ~lang="text") => {
-  let children = renderHLJS(~highlightedLines, ~code, ~lang, ());
+  let children = HighlightJs.renderHLJS(~highlightedLines, ~code, ~lang, ());
 
   let label = if(showLabel) {
     let label = langShortname(lang);
@@ -136,7 +100,7 @@ module Toggle = {
         Belt.Array.get(multiple, selected)
         ->Belt.Option.map(tab => {
             let lang = Belt.Option.getWithDefault(tab.lang, "text");
-            renderHLJS(
+            HighlightJs.renderHLJS(
               ~highlightedLines=?tab.highlightedLines,
               ~code=tab.code,
               ~lang,

components/CodeMirror.re

@@ -176,30 +176,6 @@ module Error = {
   };
 };
 
-module Props = {
-  [@bs.deriving {abstract: light}]
-  type t = {
-    [@bs.optional]
-    errors: array(Error.t),
-    [@bs.optional]
-    minHeight: string, // minHeight of the scroller element
-    [@bs.optional]
-    maxHeight: string, // maxHeight of the scroller element
-    [@bs.optional]
-    className: string,
-    [@bs.optional]
-    style: ReactDOMRe.Style.t,
-    value: string,
-    [@bs.optional]
-    onChange: string => unit,
-    [@bs.optional]
-    onMarkerFocus: ((int, int)) => unit, // (row, column)
-    [@bs.optional]
-    onMarkerFocusLeave: ((int, int)) => unit, // (row, column)
-    options: CM.Options.t,
-  };
-};
-
 module GutterMarker = {
   // Note: this is not a React component
   let make =
@@ -269,7 +245,7 @@ let updateErrors =
 
   Belt.Array.forEachWithIndex(
     errors,
-    (idx, e) => {
+    (_idx, e) => {
       open DomUtil;
       open Error;
 
@@ -359,42 +335,44 @@ let updateErrors =
            );
 };
 
-let default = (props: Props.t): React.element => {
+[@react.component]
+let make =
+    // props relevant for the react wrapper
+    (
+      ~errors: array(Error.t)=[||],
+      ~minHeight: option(string)=?,
+      ~maxHeight: option(string)=?,
+      ~className: option(string)=?,
+      ~style: option(ReactDOMRe.Style.t)=?,
+      ~onChange: option(string => unit)=?,
+      ~onMarkerFocus: option(((int, int)) => unit)=?, // (row, column)
+      ~onMarkerFocusLeave: option(((int, int)) => unit)=?, // (row, column)
+      ~value: string,
+      // props for codemirror options
+      ~mode,
+      ~readOnly=false,
+      ~lineNumbers=true,
+      ~scrollbarStyle="overlay",
+      ~lineWrapping=false,
+    )
+    : React.element => {
   let inputElement = React.useRef(Js.Nullable.null);
   let cmRef: React.Ref.t(option(CM.t)) = React.useRef(None);
   let cmStateRef = React.useRef({marked: [||]});
 
-  // Destruct all our props here
-  let minHeight = props->Props.minHeight;
-  let maxHeight = props->Props.maxHeight;
-  let onChange = props->Props.onChange;
-  let value = props->Props.value;
-  let errors = Belt.Option.getWithDefault(props->Props.errors, [||]);
-  let className = props->Props.className;
-  let style = props->Props.style;
-  let cmOptions = props->Props.options;
-
-  let onMarkerFocus = props->Props.onMarkerFocus;
-  let onMarkerFocusLeave = props->Props.onMarkerFocusLeave;
-
   React.useEffect0(() => {
     switch (inputElement->React.Ref.current->Js.Nullable.toOption) {
     | Some(input) =>
       let options =
         CM.Options.t(
           ~theme="material",
           ~gutters=[|CM.errorGutterId, "CodeMirror-linenumbers"|],
-          ~mode=cmOptions->CM.Options.mode,
-          ~lineWrapping=
-            Belt.Option.getWithDefault(
-              cmOptions->CM.Options.lineWrapping,
-              false,
-            ),
+          ~mode,
+          ~lineWrapping,
           ~fixedGutter=false,
-          ~readOnly=
-            Belt.Option.getWithDefault(cmOptions->CM.Options.readOnly, false),
-          ~lineNumbers=true,
-          ~scrollbarStyle="overlay",
+          ~readOnly,
+          ~lineNumbers,
+          ~scrollbarStyle,
           (),
         );
       let cm = CM.fromTextArea(input, options);
@@ -419,7 +397,7 @@ let default = (props: Props.t): React.element => {
       React.Ref.setCurrent(cmRef, Some(cm));
 
       let cleanup = () => {
-        /*Js.log2("cleanup", options->CM.Options.mode);*/
+        Js.log2("cleanup", options->CM.Options.mode);
 
         // This will destroy the CM instance
         cm->CM.toTextArea;
@@ -458,7 +436,7 @@ let default = (props: Props.t): React.element => {
           ~state,
           ~cm,
           errors,
-        );
+        )
       });
       cm->CM.setValue(value);
     }
@@ -493,7 +471,7 @@ let default = (props: Props.t): React.element => {
             ~state,
             ~cm,
             errors,
-          );
+          )
         })
       | None => ()
       };
@@ -502,6 +480,21 @@ let default = (props: Props.t): React.element => {
     [|errorsFingerprint|],
   );
 
+  /*
+      Needed in case the className visually hides / shows
+      a codemirror instance.
+   */
+  React.useEffect1(
+    () => {
+      switch (cmRef->React.Ref.current) {
+      | Some(cm) => cm->CM.refresh
+      | None => ()
+      };
+      None;
+    },
+    [|className|],
+  );
+
   <div ?className ?style>
     <textarea className="hidden" ref={ReactDOMRe.Ref.domRef(inputElement)} />
   </div>;

common/CodeMirrorBase.re renamed to components/CodeMirror2.re

@@ -293,7 +293,7 @@ module Code = {
   };
 
   let makeCodeElement = (~code, ~metastring, ~lang) => {
-    let baseClass = "md-code font-mono w-full block leading-tight mt-4 mb-10";
+    let baseClass = "md-code font-mono w-full block  mt-4 mb-10";
     let codeElement =
       switch (metastring) {
       | None => <CodeExample code lang />

components/Markdown.re

@@ -393,7 +393,7 @@ module MobileNav = {
 
 /* isOverlayOpen: if the mobile overlay is toggled open */
 [@react.component]
-let make = (~overlayState: (bool, (bool => bool) => unit)) => {
+let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
   let minWidth = "20rem";
   let router = Next.Router.useRouter();
 
@@ -471,11 +471,16 @@ let make = (~overlayState: (bool, (bool => bool) => unit)) => {
     [||],
   );
 
+  let fixedNav = fixed ? "fixed z-20 top-0" : "";
+
   <nav
     ref={ReactDOMRe.Ref.domRef(outerRef)}
     id="header"
     style={Style.make(~minWidth, ())}
-    className="fixed flex xs:justify-center z-20 top-0 w-full h-18 bg-night-dark shadow text-white-80 text-base">
+    className={
+      fixedNav
+      ++ " flex xs:justify-center w-full h-18 bg-night-dark shadow text-white-80 text-base"
+    }>
     <div
       className="flex justify-between mx-4 md:mx-8 items-center h-full w-full max-w-1280">
       <div className="h-8 w-8">
@@ -569,18 +574,6 @@ let make = (~overlayState: (bool, (bool => bool) => unit)) => {
         <div className="hidden sm:block ml-8"> <DocSearch /> </div>
       </div>
     </div>
-    /*<a*/
-    /*href="https://discord.gg/reasonml"*/
-    /*rel="noopener noreferrer"*/
-    /*target="_blank"*/
-    /*className=link*/
-    /*onMouseEnter=nonCollapsibleOnMouseEnter>*/
-    /*<Icon.Discord className="w-5 h-5" />*/
-    /*</a>*/
-    /*<button*/
-    /*className="hidden sm:flex sm:px-4 sm:items-center sm:justify-center sm:border-l sm:border-r sm:border-night sm:h-full">*/
-    /*<Icon.MagnifierGlass className="w-5 h-5 hover:text-white" />*/
-    /*</button>*/
     /* Burger Button */
     <button
       className="h-full px-4 xs:hidden flex items-center hover:text-white"

components/Navigation.re

@@ -1,2 +1,2 @@
 [@react.component]
-let make: (~overlayState: (bool, (bool => bool) => unit)) => React.element;
+let make: (~fixed: bool=?, ~overlayState: (bool, (bool => bool) => unit)) => React.element;