Merge pull request #15 from malerba118/solution-walkthrough

Solution Explanations

components/ComplexInput.tsx

@@ -0,0 +1,91 @@
+import React, { FC, HTMLProps, useEffect, useState } from "react";
+
+interface ComplexInputProps<T>
+  extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
+  stringify: (val: T) => string;
+  parse: (val: string) => T;
+  value: T;
+  onChange: (value: T) => void;
+}
+
+function ComplexInput<T>({
+  stringify,
+  parse,
+  value,
+  onChange,
+  ...otherProps
+}: ComplexInputProps<T>) {
+  const [draft, setDraft] = useState<string>(stringify(value));
+
+  useEffect(() => {
+    setDraft(stringify(value));
+  }, [value]);
+
+  const process = () => {
+    let shouldNotify = false;
+    let parsed;
+    try {
+      parsed = parse(draft);
+      shouldNotify = true;
+    } catch (err) {
+      setDraft(stringify(value));
+    }
+    if (shouldNotify) {
+      onChange(parsed);
+    }
+  };
+
+  return (
+    <input
+      {...otherProps}
+      onBlur={() => process()}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          e.currentTarget.blur();
+        }
+        otherProps.onKeyDown?.(e);
+      }}
+      value={draft}
+      onChange={(e) => {
+        setDraft(e.target.value);
+      }}
+    />
+  );
+}
+
+const stringify = (value: number[]) => {
+  return JSON.stringify(value);
+};
+
+const parse = (value: string) => {
+  const parsed = JSON.parse(value);
+  if (!Array.isArray(parsed)) {
+    throw new Error("Should be array");
+  }
+  if (parsed.some((x) => typeof x !== "number")) {
+    throw new Error("Should contain only numbers");
+  }
+  return parsed;
+};
+
+interface NumberArrayInputProps
+  extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
+  value: number[];
+  onChange: (value: number[]) => void;
+}
+
+export const NumberArrayInput: FC<NumberArrayInputProps> = ({
+  value,
+  onChange,
+  ...otherProps
+}) => {
+  return (
+    <ComplexInput
+      {...otherProps}
+      stringify={stringify}
+      parse={parse}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};

components/ContentWidget.tsx

@@ -0,0 +1,86 @@
+import {
+  useLayoutEffect,
+  useRef,
+  FC,
+  ReactNode,
+  useEffect,
+  Children,
+} from "react";
+import { useMonaco } from "@monaco-editor/react";
+import { useEditor } from "./Editor";
+import ReactDOM from "react-dom";
+import useForceUpdate from "../hooks/useForceUpdate";
+
+interface ContentWidgetProps {
+  children: any;
+  line: number;
+  widgetId: string;
+}
+
+/**
+ * This component pins its children to a specific line in the editor.
+ * It's good for adding annotations to the editor.
+ * @param param0
+ * @returns
+ */
+const ContentWidget: FC<ContentWidgetProps> = ({
+  widgetId,
+  line,
+  children,
+}) => {
+  const monaco = useMonaco();
+  const editor = useEditor();
+  const ref = useRef(null);
+
+  useLayoutEffect(() => {
+    if (editor) {
+      // Add a content widget (scrolls inline with text)
+      var contentWidget = {
+        domNode: null,
+        allowEditorOverflow: true,
+        getId: function () {
+          return widgetId;
+        },
+        getDomNode: function () {
+          if (!ref.current) {
+            ref.current = document.createElement("div");
+            ref.current.style.position = "relative";
+            ref.current.style.width = 0;
+            ref.current.classList.add("content-widget-portal");
+          }
+          return ref.current;
+        },
+        afterRender: function () {
+          ReactDOM.render(
+            <div
+              onMouseOver={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              {children}
+            </div>,
+            ref.current
+          );
+        },
+        getPosition: function () {
+          return {
+            position: {
+              lineNumber: line,
+              column: 0,
+            },
+            preference: [monaco.editor.ContentWidgetPositionPreference.EXACT],
+          };
+        },
+      };
+      editor.addContentWidget(contentWidget);
+      return () => {
+        editor.removeContentWidget(contentWidget);
+      };
+    }
+  }, [editor, children]);
+
+  return null;
+};
+
+export default ContentWidget;