Move virtual keyboard outside iframe

packages/doenetml-iframe/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml-iframe",
     "type": "module",
     "description": "A renderer for DoenetML contained in an iframe",
-    "version": "0.7.0-alpha14",
+    "version": "0.7.0-alpha17",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,
@@ -13,6 +13,9 @@
     "exports": {
         ".": {
             "import": "./dist/component/index.js"
+        },
+        "./*": {
+            "import": "./dist/component/*"
         }
     },
     "scripts": {

packages/doenetml-iframe/src/iframe-editor-index.ts

@@ -21,6 +21,7 @@ document.addEventListener("DOMContentLoaded", () => {
         undefined,
         {
             ...doenetEditorProps,
+            externalVirtualKeyboardProvided: true,
             // Callbacks have to be explicitly overridden here so that they
             // can message the parent React component (outside the iframe).
             doenetmlChangeCallback: (args: unknown) => {

packages/doenetml-iframe/src/iframe-viewer-index.ts

@@ -21,6 +21,7 @@ document.addEventListener("DOMContentLoaded", () => {
         undefined,
         {
             ...doenetViewerProps,
+            externalVirtualKeyboardProvided: true,
             // Callbacks have to be explicitly overridden here so that they
             // can message the parent React component (outside the iframe).
             updateCreditAchievedCallback: (args: unknown) => {

packages/doenetml-iframe/src/index.tsx

@@ -20,6 +20,9 @@ const latestDoenetmlVersion: string = version;
 export { mathjaxConfig } from "@doenet/utils";
 export type { ErrorDescription, WarningDescription };
 
+import { ExternalVirtualKeyboard } from "@doenet/virtual-keyboard";
+import "@doenet/virtual-keyboard/style.css";
+
 /**
  * A message that is sent from an iframe to the parent window.
  */
@@ -52,11 +55,6 @@ export type DoenetViewerIframeProps = DoenetViewerProps & {
      * overwriting any doenetmlVersion or urls provided
      */
     autodetectVersion?: boolean;
-    /**
-     * Added to remove the scrollableContainer attribute from DoenetViewerProps
-     * that will be stringified (as it has circular structure)
-     */
-    scrollableContainer?: any;
 };
 
 export type DoenetEditorIframeProps = DoenetEditorProps & {
@@ -107,7 +105,6 @@ export function DoenetViewer({
     cssUrl: specifiedCssUrl,
     doenetmlVersion: specifiedDoenetmlVersion,
     autodetectVersion = true,
-    scrollableContainer: _scrollableContainer,
     ...doenetViewerProps
 }: DoenetViewerIframeProps) {
     const [id, _] = React.useState(() => Math.random().toString(36).slice(2));
@@ -244,24 +241,27 @@ export function DoenetViewer({
     }
 
     return (
-        <iframe
-            ref={ref}
-            srcDoc={createHtmlForDoenetViewer(
-                id,
-                doenetML,
-                doenetViewerProps,
-                standaloneUrl,
-                cssUrl,
-            )}
-            style={{
-                width: "100%",
-                boxSizing: "border-box",
-                overflow: "hidden",
-                border: "none",
-                minHeight: 200,
-            }}
-            height={height}
-        />
+        <React.Fragment>
+            <ExternalVirtualKeyboard />
+            <iframe
+                ref={ref}
+                srcDoc={createHtmlForDoenetViewer(
+                    id,
+                    doenetML,
+                    doenetViewerProps,
+                    standaloneUrl,
+                    cssUrl,
+                )}
+                style={{
+                    width: "100%",
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    border: "none",
+                    minHeight: 200,
+                }}
+                height={height}
+            />
+        </React.Fragment>
     );
 }
 
@@ -410,23 +410,26 @@ export function DoenetEditor({
     }
 
     return (
-        <iframe
-            ref={ref}
-            srcDoc={createHtmlForDoenetEditor(
-                id,
-                doenetML,
-                width,
-                augmentedDoenetEditorProps,
-                standaloneUrl,
-                cssUrl,
-            )}
-            style={{
-                width,
-                boxSizing: "content-box",
-                overflow: "hidden",
-                border: "none",
-                height,
-            }}
-        />
+        <React.Fragment>
+            <ExternalVirtualKeyboard />
+            <iframe
+                ref={ref}
+                srcDoc={createHtmlForDoenetEditor(
+                    id,
+                    doenetML,
+                    width,
+                    augmentedDoenetEditorProps,
+                    standaloneUrl,
+                    cssUrl,
+                )}
+                style={{
+                    width,
+                    boxSizing: "content-box",
+                    overflow: "hidden",
+                    border: "none",
+                    height,
+                }}
+            />
+        </React.Fragment>
     );
 }

packages/doenetml-iframe/src/test-main.tsx

@@ -31,57 +31,32 @@ function App() {
 
     return (
         <React.Fragment>
-            <h4>DoenetML {DOENET_LEGACY_VERSION}:</h4>
-
-            <DoenetViewer
-                doenetML={`<p>Use this to test DoenetML</p>
-                <graph showNavigation="false">
-
-                  <line through="(-8,8) (9,6)" />
-                  <line through="(0,4)" slope="1/2" styleNumber="2" />
-
-                  <line equation="y=2x-8" styleNumber="3" />
-                  <line equation="x=-6" styleNumber="4" />
-
-                </graph>`}
-                doenetmlVersion={DOENET_LEGACY_VERSION}
-            />
             <h4>DoenetML {STANDALONE_VERSION} (locally-built copy):</h4>
             <DoenetViewer
-                doenetML={`<p>Use this to test DoenetML</p>
-                <graph showNavigation="false">
-
-                  <line through="(-8,8) (9,6)" />
-                  <line through="(0,4)" slope="1/2" styleNumber="2" />
-
-                  <line equation="y=2x-8" styleNumber="3" />
-                  <line equation="x=-6" styleNumber="4" />
-
-                </graph>`}
+                doenetML={`<mathInput /><p><mathInput />Use this to test DoenetML<mathInput /></p>
+                <graph />
+                <graph />
+                <graph />
+               <mathInput />`}
                 generatedVariantCallback={(variant: any) =>
                     console.log("found variant", variant)
                 }
-                flags={{ readOnly: true }}
                 standaloneUrl={STANDALONE_BLOB_URL}
                 cssUrl={STANDALONE_CSS_BLOB_URL}
             />
-            <h4>DoenetML {STANDALONE_VERSION} (locally-built copy) editor:</h4>
-            <DoenetEditor
-                doenetML={`<p>Use this to test DoenetML</p>
-                <graph showNavigation="false">
 
-                  <line through="(-8,8) (9,6)" />
-                  <line through="(0,4)" slope="1/2" styleNumber="2" />
-
-                  <line equation="y=2x-8" styleNumber="3" />
-                  <line equation="x=-6" styleNumber="4" />
-
-                </graph>`}
+            <h4>DoenetML {STANDALONE_VERSION} (locally-built copy):</h4>
+            <DoenetViewer
+                doenetML={`<mathInput /><p><mathInput />Use this to test DoenetML<mathInput /></p>
+                <graph />
+                <graph />
+                <graph />
+               <mathInput />`}
+                generatedVariantCallback={(variant: any) =>
+                    console.log("found variant", variant)
+                }
                 standaloneUrl={STANDALONE_BLOB_URL}
                 cssUrl={STANDALONE_CSS_BLOB_URL}
-                doenetmlChangeCallback={(doenetml: any) =>
-                    console.log("new doenetml", doenetml)
-                }
             />
         </React.Fragment>
     );

packages/doenetml-iframe/src/utils.ts

@@ -10,11 +10,11 @@ import { parseAndCompile } from "@doenet/parser";
 
 export type DoenetViewerProps = Omit<
     React.ComponentProps<typeof DoenetViewerOrig>,
-    "doenetML" | "scrollableContainer"
+    "doenetML" | "scrollableContainer" | "externalVirtualKeyboardProvided"
 >;
 export type DoenetEditorProps = Omit<
     React.ComponentProps<typeof DoenetEditorOrig>,
-    "doenetML" | "width" | "height"
+    "doenetML" | "width" | "height" | "externalVirtualKeyboardProvided"
 >;
 
 /**

packages/doenetml-iframe/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 import { createPackageJsonTransformer } from "../../scripts/transform-package-json";
+import { version } from "./package.json";
 
 // These are the dependencies that will not be bundled into the library.
 const EXTERNAL_DEPS = ["react", "react-dom"];
@@ -46,6 +47,6 @@ export default defineConfig({
     },
     define: {
         "process.env.NODE_ENV": '"production"',
-        IFRAME_VERSION: JSON.stringify(process.env.npm_package_version),
+        IFRAME_VERSION: JSON.stringify(version),
     },
 });

packages/doenetml/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml",
     "type": "module",
     "description": "Semantic markup for building interactive web activities",
-    "version": "0.7.0-alpha14",
+    "version": "0.7.0-alpha17",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,

packages/doenetml/src/Viewer/ActivityViewer.tsx

@@ -749,7 +749,7 @@ export function ActivityViewer({
         // we need to check if the page has a doneetML attribute,
         // and load the doenetML if needed
 
-        let newOrder = [];
+        let newOrder: any[] = [];
 
         for (let page of order) {
             if (page.doenetML === undefined) {
@@ -1177,7 +1177,7 @@ export function ActivityViewer({
     async function submitAllAndFinishAssessment() {
         setProcessingSubmitAll(true);
 
-        let submitAndSavePromises = [];
+        let submitAndSavePromises: Promise<unknown>[] = [];
 
         for (let [
             pageInd,
@@ -1260,7 +1260,7 @@ export function ActivityViewer({
     }
 
     async function terminateAllCores() {
-        let terminatePromises = [];
+        let terminatePromises: Promise<unknown>[] = [];
 
         for (let [
             pageInd,
@@ -1322,7 +1322,7 @@ export function ActivityViewer({
     function collateErrorsAndWarnings() {
         let allErrors = [...errorsActivitySpecific.current];
 
-        let allWarnings = [];
+        let allWarnings: WarningDescription[] = [];
 
         for (let errWarn of errorsAndWarningsByPage.current) {
             if (errWarn) {
@@ -1497,7 +1497,7 @@ export function ActivityViewer({
 
     let title = <h1>{activityDefinition.title}</h1>;
 
-    let pages = [];
+    let pages: React.JSX.Element[] = [];
 
     if (order && variantsByPage) {
         for (let [ind, page] of order.entries()) {
@@ -1603,8 +1603,8 @@ export function ActivityViewer({
         }
     }
 
-    let pageControlsTop = null;
-    let pageControlsBottom = null;
+    let pageControlsTop: React.JSX.Element | null = null;
+    let pageControlsBottom: React.JSX.Element | null = null;
     if (paginate && nPages > 1) {
         pageControlsTop = (
             <div
@@ -1661,7 +1661,7 @@ export function ActivityViewer({
         }
     }
 
-    let finishAssessmentPrompt = null;
+    let finishAssessmentPrompt: React.JSX.Element | null = null;
 
     if (showFinishButton) {
         if (finishAssessmentMessageOpen) {
@@ -1749,19 +1749,19 @@ export function ActivityViewer({
         paddingStyle.paddingBottom = "50vh";
     }
 
-    let activityErrors = null;
+    let activityErrors: React.JSX.Element[] | null = null;
     if (errorsActivitySpecific.current.length > 0) {
         const errorsToDisplay = errorsActivitySpecific.current.filter(
             (x) => x.displayInActivity,
         );
         let errorStyle = {
             backgroundColor: "#ff9999",
-            textAlign: "center",
+            textAlign: "center" as const,
             borderWidth: 3,
             borderStyle: "solid",
         };
         activityErrors = errorsToDisplay.map((err, i) => {
-            let rangeMessage = null;
+            let rangeMessage: React.JSX.Element | null = null;
             if (err.doenetMLrange?.lineBegin !== undefined) {
                 rangeMessage = (
                     <>

packages/doenetml/src/Viewer/renderers/graph.jsx

@@ -3,6 +3,7 @@ import { sizeToCSS } from "./utils/css";
 import useDoenetRenderer from "../useDoenetRenderer";
 import me from "math-expressions";
 import VisibilitySensor from "react-visibility-sensor-v2";
+//@ts-ignore
 import JXG from "./jsxgraph-distrib/jsxgraphcore.mjs";
 // import JXG from './jsxgraph';
 import { cesc } from "@doenet/utils";