Fix build

Author: jeffdyer

src/components/HelpPanel.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect} from 'react';
+import useSWR from 'swr';
+//import { getData } from '../utils/swr/fetchers';
+//import { Form } from "@graffiticode/l0002";
+import { TextEditor } from "./TextEditor";
+
+const isNullOrEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;
+
+export const HelpPanel = ({
+  id,
+  user,
+}) => {
+  console.log(
+    "HelpPanel",
+    "id=" + JSON.stringify(id, null, 2)
+  );
+  const [ data, setData ] = useState({});
+  // const [ doGetData, setDoGetData ] = useState(false);
+
+  // useEffect(() => {
+  //   setDoGetData(true);
+  // }, [id]);
+
+  // const getDataResp = useSWR(
+  //   doGetData && { user, id } || null,
+  //   getData
+  // );
+
+  // if (getDataResp.data) {
+  //   const data = getDataResp.data;
+  //   setData(data);
+  //   setDoGetData(false);
+  // }
+
+  return (
+    <TextEditor
+      state={{
+        apply: () => {},
+        data
+      }}
+    />
+  );
+}

src/components/TextEditor.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useRef } from 'react'; React;
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { schema } from 'prosemirror-schema-basic';
+import { baseKeymap } from "prosemirror-commands"
+import { undo, redo, history } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+
+import { Plugin } from 'prosemirror-state';
+import ReactDOM from 'react-dom';
+import { MenuView } from './MenuView';
+import { debounce } from "lodash";
+
+// const menuPlugin = new Plugin({
+//   view(editorView) {
+//     let menuDiv = document.createElement('div');
+//     editorView.dom.parentNode.insertBefore(menuDiv, editorView.dom);
+//     const update = () => {
+//       ReactDOM.render(
+//         <MenuView className="" editorView={editorView} />,
+//         menuDiv
+//       );
+//     };
+//     update();
+//     return {
+//       update,
+//       destroy() {
+//         ReactDOM.unmountComponentAtNode(menuDiv);
+//         menuDiv.remove();
+//       }
+//     };
+//   }
+// });
+
+const debouncedStateUpdate = debounce(({ state, editorState }) => {
+  state.apply({
+    type: "update",
+    args: {editorState},
+  });
+}, 1000);
+
+export const TextEditor = ({ state }) => {
+  console.log(
+    "TextEditor",
+    "state=" + JSON.stringify(state, null, 2)
+  );
+  const [ editorView, setEditorView ] = useState(null);
+  const editorRef = useRef(null);
+  const plugins = [
+    history(),
+    keymap({"Mod-z": undo, "Mod-y": redo}),
+    keymap(baseKeymap),
+  ];
+  useEffect(() => {
+    if (!editorRef.current) {
+      return;
+    }
+    const editorView = new EditorView(editorRef.current, {
+      state: EditorState.create({
+        schema,
+        plugins,
+      }),
+      dispatchTransaction(transaction) {
+        const editorState = editorView.state.apply(transaction);
+        editorView.updateState(editorState);
+        debouncedStateUpdate({
+          state,
+          editorState: editorState.toJSON()
+        });
+      }
+    });
+    setEditorView(editorView);
+    editorView.focus();
+    return () => {
+      if (editorView) {
+        editorView.destroy();
+      }
+    };
+  }, []);
+  const { editorState } = state.data;
+  useEffect(() => {
+    if (editorState) {
+      const newEditorState = EditorState.fromJSON({
+        schema,
+        plugins,
+      }, editorState);
+      editorView.updateState(newEditorState);
+    }
+  }, [editorState]);
+  return (
+    <div
+      ref={editorRef}
+      className="border border-gray-300 p-2 bg-white text-sm font-sans"
+    >
+      <p>
+        <i>This is where you will ask for help from a Graffiticode language
+        assistant. This feature is currently under construction.</i>
+      </p>
+    </div>
+  );
+};