sq ace

Author: purfectliterature

client/app/lib/components/core/fields/EditorField.tsx

@@ -37,34 +37,47 @@ const DEFAULT_FONT_FAMILY = [
   'monospace',
 ].join(',');
 
-const EditorField = forwardRef(
-  (props: EditorProps, ref: ForwardedRef<AceEditor>): JSX.Element => {
-    const { language, value, disabled, onChange, cursorStart, ...otherProps } =
-      props;
+/**
+ * Loads Ace's mode scripts on demand for `language` and returns `true` if the mode
+ * has been loaded.
+ *
+ * Remember to update the regex in the `webpackInclude` comment below to bundle any
+ * new languages we support in the future.
+ */
+const useLazyMode = (language: LanguageMode): boolean => {
+  const [loading, setLoading] = useState(true);
 
-    const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setLoading(true);
 
-    useEffect(() => {
-      setLoading(true);
+    let ignore = false;
 
-      let ignore = false;
+    (async (): Promise<void> => {
+      await import(
+        /* webpackInclude: /ace-builds\/src-noconflict\/mode-(c_cpp|python|r|java|javascript)\./ */
+        /* webpackChunkName: "ace-[request]" */
+        `ace-builds/src-noconflict/mode-${language}`
+      );
 
-      (async (): Promise<void> => {
-        await import(
-          /* webpackInclude: /ace-builds\/src-noconflict\/mode-(c_cpp|python|r|java)./ */
-          /* webpackChunkName: "ace-builds" */
-          `ace-builds/src-noconflict/mode-${language}`
-        );
+      if (ignore) return;
 
-        if (ignore) return;
+      setLoading(false);
+    })();
 
-        setLoading(false);
-      })();
+    return () => {
+      ignore = true;
+    };
+  }, [language]);
+
+  return loading;
+};
+
+const EditorField = forwardRef(
+  (props: EditorProps, ref: ForwardedRef<AceEditor>): JSX.Element => {
+    const { language, value, disabled, onChange, cursorStart, ...otherProps } =
+      props;
 
-      return () => {
-        ignore = true;
-      };
-    }, [language]);
+    const loading = useLazyMode(language);
 
     return (
       <AceEditor
@@ -73,8 +86,8 @@ const EditorField = forwardRef(
          * This "mode" parameter should match one of the file names in this git directory:
          * https://github.com/thlorenz/brace/tree/master/mode
          *
-         * Short-circuit this because during build time, `mode` can be `undefined` and
-         * AceEditor will request for `/webpack/mode-mode.js`, which doesn't exist.
+         * Python is always available. For other modes, we lazy-load them, and when it is
+         * loaded, the editor will simply "snap" to the new mode's syntax highlighting.
          *
          * TODO: This parameter is called by many names in various places in the codebase,
          * such as "language", "editorMode", "languageMode", or "ace_mode".