feat(rte): add code mirror

Author: gjulivan

packages/pluggableWidgets/rich-text-web/package.json

@@ -43,10 +43,14 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@codemirror/lang-html": "^6.4.9",
         "@floating-ui/react": "^0.26.27",
         "@melloware/coloris": "^0.24.0",
+        "@uiw/codemirror-theme-github": "^4.21.25",
+        "@uiw/react-codemirror": "^4.21.25",
         "classnames": "^2.2.6",
         "dompurify": "^3.2.4",
+        "js-beautify": "^1.15.4",
         "katex": "^0.16.11",
         "linkifyjs": "^4.1.3",
         "lodash.merge": "^4.6.2",
@@ -68,6 +72,7 @@
         "@rollup/plugin-json": "^6.1.0",
         "@rollup/plugin-replace": "^6.0.2",
         "@types/dompurify": "^2.4.0",
+        "@types/js-beautify": "^1.14.3",
         "@types/katex": "^0.16.7",
         "@types/sanitize-html": "^1.27.2",
         "cross-env": "^7.0.3",

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/DialogContent.tsx

@@ -42,16 +42,16 @@ export function DialogBody(props: PropsWithChildrenWithClass): ReactElement {
 }
 
 export interface FormControlProps extends PropsWithChildrenWithClass {
-    label: string;
+    label?: string;
 }
 
 export function FormControl(props: FormControlProps): ReactElement {
     const { children, className, label } = props;
 
     return (
         <div className={classNames("form-group", className)}>
-            <label className="control-label col-sm-3">{label}</label>
-            <div className="col-sm-9"> {children}</div>
+            {label && <label className="control-label col-sm-3">{label}</label>}
+            <div className={`col-sm-${label ? "9" : "12"}`}> {children}</div>
         </div>
     );
 }

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ViewCodeDialog.tsx

@@ -1,34 +1,56 @@
-import { ChangeEvent, createElement, ReactElement, useState } from "react";
+import { createElement, ReactElement, useState, useCallback } from "react";
 import { type viewCodeConfigType } from "../../utils/formats";
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
+import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
+import { html } from "@codemirror/lang-html";
+import { githubLight } from "@uiw/codemirror-theme-github";
+import { EditorView } from "codemirror";
+import beautify from "js-beautify";
 
 export interface ViewCodeDialogProps {
     currentCode?: string;
     onSubmit(value: viewCodeConfigType): void;
     onClose(): void;
 }
 
+const BEAUTIFY_OPTIONS: js_beautify.HTMLBeautifyOptions = {
+    indent_size: 4,
+    indent_char: " ",
+    max_preserve_newlines: 5,
+    preserve_newlines: true,
+    indent_scripts: "normal",
+    end_with_newline: false,
+    wrap_line_length: 0,
+    indent_inner_html: false,
+    indent_empty_lines: false
+};
+
 export default function ViewCodeDialog(props: ViewCodeDialogProps): ReactElement {
     const { onSubmit, onClose, currentCode } = props;
     const [formState, setFormState] = useState({
-        src: currentCode || ""
+        src: beautify.html(currentCode ?? "", BEAUTIFY_OPTIONS) || ""
     });
-
-    const onInputChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
-        setFormState({ ...formState, [e.target.name]: e.target.value });
-    };
+    const onCodeChange = useCallback((value: string, _viewUpdate: ViewUpdate) => {
+        setFormState({ ...formState, src: value });
+    }, []);
 
     return (
         <DialogContent className="view-code-dialog">
             <DialogHeader onClose={onClose}>View/Edit Code</DialogHeader>
             <DialogBody>
-                <FormControl label="Source Code">
-                    <textarea
-                        name="src"
+                <div>
+                    <label>Source Code</label>
+                </div>
+                <FormControl>
+                    <CodeMirror
                         className="form-control mx-textarea-input mx-textarea-noresize code-input"
-                        onChange={onInputChange}
                         value={formState.src}
-                    ></textarea>
+                        extensions={[EditorView.lineWrapping, html()]}
+                        onChange={onCodeChange}
+                        basicSetup={true}
+                        theme={githubLight}
+                        maxHeight="70vh"
+                    />
                 </FormControl>
                 <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
             </DialogBody>