Add EditorViewer to doenetml-prototype

package.json

@@ -43,34 +43,24 @@
         "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@microsoft/fast-web-utilities": "^6.0.0",
         "@qualified/lsp-connection": "^0.3.0",
         "@qualified/vscode-jsonrpc-ww": "^0.3.0",
+        "@reduxjs/toolkit": "^2.2.6",
         "@rollup/pluginutils": "^5.1.0",
         "@types/esprima": "^4.0.6",
+        "@types/file-saver": "^2.0.7",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@uiw/react-codemirror": "^4.22.2",
+        "@types/react-reconciler": "^0.28.8",
+        "@uiw/react-codemirror": "^4.23.0",
         "@vitejs/plugin-react": "^4.3.1",
         "@vitest/browser": "^1.6.0",
         "@vitest/web-worker": "^1.6.0",
-        "@vscode/test-web": "^0.0.54",
+        "@vscode/test-web": "^0.0.56",
         "autoprefixer": "^10.4.19",
+        "bootstrap": "^5.3.3",
         "chalk": "^5.3.0",
-        "compress-json": "^2.1.2",
-        "jsdom": "^22.1.0",
-        "postcss": "^8.4.32",
-        "rollup-plugin-visualizer": "^5.9.2",
-        "ts-morph": "^21.0.1",
-        "typescript": "^5.2.2",
-        "vite-node": "^0.34.6",
-        "wasm-pack": "^0.12.1",
-        "yargs": "^17.7.2"
-    },
-    "dependencies": {
-        "@ariakit/react": "^0.3.10",
-        "@reduxjs/toolkit": "^2.0.1",
-        "@uiw/react-codemirror": "^4.21.21",
-        "autoprefixer": "^10.4.16",
         "classnames": "^2.5.1",
         "comlink": "^4.4.1",
         "compress-json": "^3.0.5",
@@ -80,31 +70,38 @@
         "cypress-plugin-tab": "^1.0.5",
         "cypress-wait-until": "^1.7.2",
         "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.7",
         "esprima": "^4.0.1",
-        "glob": "^10.4.1",
+        "file-saver": "^2.0.5",
+        "glob": "^10.4.3",
         "jsdom": "^24.1.0",
         "json-stringify-deterministic": "1.0.12",
         "jsxgraph": "^1.6.2",
-        "katex": "^0.16.10",
+        "jszip": "^3.10.1",
+        "katex": "^0.16.11",
         "math-expressions": "^2.0.0-alpha66",
         "micromark": "^4.0.0",
         "nextra": "^3.0.0-alpha.24",
         "nextra-theme-docs": "^3.0.0-alpha.24",
         "node-stdlib-browser": "^1.2.0",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "prettier": "^3.3.2",
-        "react-icons": "^4.12.0",
-        "react-redux": "^9.0.4",
+        "react-bootstrap": "^2.10.4",
+        "react-icons": "^5.2.1",
+        "react-reconciler": "^0.29.2",
+        "react-redux": "^9.1.2",
+        "react-resizable-panels": "^2.0.20",
         "react-router": "^6.24.1",
         "react-router-dom": "^6.24.1",
+        "react18-json-view": "^0.2.8",
         "rollup-plugin-polyfill-node": "^0.13.0",
         "rollup-plugin-visualizer": "^5.12.0",
+        "source-map-generator": "^0.8.0",
         "tailwindcss": "^3.4.4",
-        "ts-morph": "^22.0.0",
-        "typescript": "^5.4.5",
+        "ts-morph": "^23.0.0",
+        "typescript": "^5.5.3",
         "vite": "^5.3.3",
         "vite-node": "^1.6.0",
         "vite-plugin-compile-time": "^0.2.1",
@@ -114,7 +111,12 @@
         "vscode-jsonrpc": "8.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-protocol": "^3.17.5",
-        "wireit": "^0.14.4"
+        "wasm-pack": "^0.12.1",
+        "webdriverio": "^8.39.1",
+        "wireit": "^0.14.4",
+        "xast-util-to-xml": "^4.0.0",
+        "xastscript": "^4.0.0",
+        "yargs": "^17.7.2"
     },
     "overrides": {
         "@qualified/lsp-connection": {

packages/codemirror/package.json

@@ -44,12 +44,11 @@
         }
     },
     "dependencies": {
-        "codemirror": "6.0.1",
         "@codemirror/commands": "^6.6.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/language": "^6.10.2",
         "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.28.1",
+        "@codemirror/view": "^6.28.4",
         "@lezer/common": "^1.2.1",
         "@lezer/highlight": "^1.2.0",
         "@lezer/lr": "^1.4.1",

packages/doenetml-prototype/dev/main.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { DoenetML } from "../src/index";
+import { DoenetML, EditorViewer } from "../src/index";
 
 // @ts-ignore
 import doenetMLstring from "./testCode.doenet?raw";
+import { ResizablePanelPair } from "../src/editor/components/resizable-panel-pair";
 
 const root = createRoot(document.getElementById("root")!);
-root.render(<DoenetML doenetML={doenetMLstring} />);
+root.render(<App />);
+
+function App() {
+    return <EditorViewer doenetML={doenetMLstring} />;
+}

packages/doenetml-prototype/index.html

@@ -4,7 +4,19 @@
         <meta charset="UTF-8" />
         <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>DoenetML Viewer</title>
+        <title>DoenetML Prototype Viewer</title>
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                height: 100%;
+            }
+            #root {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
     </head>
     <body>
         <div id="root"></div>

packages/doenetml-prototype/package.json

@@ -24,10 +24,40 @@
         "dev": "vite",
         "build": "wireit",
         "preview": "vite preview",
-        "test": "vitest",
+        "test:before": "npm run build:test2",
+        "build:test1": "wireit",
+        "build:test2": "wireit",
+        "test": "npm run build:test1 && vitest",
         "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0"
     },
     "wireit": {
+        "build:test1": {
+            "command": "cd test/utils && vite build -c vite.dast-to-flat-dast.config.ts",
+            "files": [
+                "test/utils/dast-to-flat-dast.ts",
+                "test/utils/vite.dast-to-flat-dast.config.ts"
+            ],
+            "output": [
+                "test/utils/dist/dast-to-flat-dast/**/*.js"
+            ],
+            "dependencies": [
+                "../doenetml-worker-rust:build",
+                "../parser:build"
+            ]
+        },
+        "build:test2": {
+            "command": "cd test/utils && vite build -c vite.run.config.ts",
+            "files": [
+                "test/utils/run.ts",
+                "test/utils/vite.run.config.ts"
+            ],
+            "output": [
+                "test/utils/dist/run/**/*.js"
+            ],
+            "dependencies": [
+                "build:test1"
+            ]
+        },
         "build": {
             "command": "vite build",
             "files": [
@@ -44,7 +74,8 @@
             ],
             "dependencies": [
                 "../doenetml-worker-rust:build",
-                "../parser:build"
+                "../parser:build",
+                "../codemirror:build"
             ]
         }
     },

packages/doenetml-prototype/src/DoenetML.tsx

@@ -3,8 +3,6 @@ import { MathJaxContext } from "better-react-mathjax";
 import { PageViewer } from "./viewer/page-viewer";
 import { Provider } from "react-redux";
 import { store } from "./state/store";
-import { useAppDispatch, useAppSelector } from "./state/hooks";
-import { dastActions, elementsArraySelector } from "./state/redux-slices/dast";
 
 export type DoenetMLFlags = {
     showCorrectness: boolean;
@@ -55,7 +53,6 @@ export function DoenetML({
 
     return (
         <Provider store={store}>
-            <UpdateSectionButton />
             <MathJaxContext>
                 <PageViewer
                     source={doenetML}
@@ -66,38 +63,3 @@ export function DoenetML({
         </Provider>
     );
 }
-
-function UpdateSectionButton() {
-    const dispatch = useAppDispatch();
-    const elements = useAppSelector(elementsArraySelector);
-    return (
-        <button
-            onClick={() => {
-                // Find the first math element and update it
-                const id = elements.findIndex(
-                    (e) => e.type === "element" && e.name === "m",
-                );
-                if (id === -1) {
-                    console.warn("No <section> element found", elements);
-                    return;
-                }
-                dispatch(
-                    dastActions.updateElements([
-                        [
-                            id,
-                            {
-                                type: "element",
-                                name: "m",
-                                attributes: {},
-                                children: [`\\frac{2}{${Math.random()}}`],
-                                data: { id },
-                            },
-                        ],
-                    ]),
-                );
-            }}
-        >
-            Update Math
-        </button>
-    );
-}

packages/doenetml-prototype/src/editor/components/download-inspector.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import Tab from "react-bootstrap/Tab";
+import Tabs from "react-bootstrap/Tabs";
+import { saveAs } from "file-saver";
+import JSZip from "jszip";
+
+/**
+ * A popup window that allows the user to inspect or download files in `fileList`.
+ * @param param0
+ */
+export function DownloadInspector({
+    fileList,
+    show,
+    setShow,
+}: {
+    fileList: Record<string, string>;
+    show: boolean;
+    setShow: (show: boolean) => void;
+}) {
+    const handleClose = () => setShow(false);
+    function download() {
+        if (Object.keys(fileList).length === 0) {
+            // Nothing to save
+            return;
+        }
+        if (Object.keys(fileList).length === 1) {
+            const [filename, content] = Object.entries(fileList)[0];
+            // Download the file directly without zipping it.
+            const blob = new Blob([content], {
+                type: "text/plain;charset=utf-8",
+            });
+            saveAs(blob, filename);
+            return;
+        }
+        const archive = new JSZip();
+        for (const [filename, content] of Object.entries(fileList)) {
+            archive.file(filename, content);
+        }
+        archive.generateAsync({ type: "blob" }).then((blob) => {
+            saveAs(blob, "exported.zip");
+        });
+    }
+
+    return (
+        <Modal
+            show={show}
+            onHide={handleClose}
+            size="xl"
+            dialogClassName="modal-full"
+        >
+            <Modal.Header closeButton>
+                <Modal.Title>Exported</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <Tabs>
+                    {Object.entries(fileList).map(([filename, content]) => (
+                        <Tab
+                            eventKey={filename}
+                            title={filename}
+                            key={filename}
+                        >
+                            <div className="file-preview">
+                                <pre>{content}</pre>
+                            </div>
+                        </Tab>
+                    ))}
+                </Tabs>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button variant="secondary" onClick={handleClose} size="sm">
+                    Close
+                </Button>
+                <Button
+                    variant="primary"
+                    onClick={() => {
+                        download();
+                        handleClose();
+                    }}
+                    size="sm"
+                    disabled={Object.keys(fileList).length === 0}
+                >
+                    Download{Object.keys(fileList).length > 1 ? " All" : ""}
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}

packages/doenetml-prototype/src/editor/components/download-markdown.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import DropdownItem from "react-bootstrap/DropdownItem";
+import { useAppSelector } from "../../state/hooks";
+import { doenetSourceSelector } from "../../state/redux-slices/dast";
+import { doenetToMarkdown } from "@doenet/lsp-tools";
+import { VscMarkdown } from "react-icons/vsc";
+
+export function DownloadMarkdownDropdownItem({
+    setFiles,
+}: {
+    setFiles: (files: Record<string, string>) => void;
+}) {
+    const source = useAppSelector(doenetSourceSelector);
+    return (
+        <DropdownItem
+            className="icon-button"
+            onClick={() => {
+                const fileList = {
+                    "main.md": doenetToMarkdown(source),
+                };
+                setFiles(fileList);
+            }}
+        >
+            <VscMarkdown /> Markdown
+        </DropdownItem>
+    );
+}