Nextra codeblocks for displaying doenet code and rendered results

packages/docs-nextra/components/doenet-example.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DoenetViewer } from "./doenet";
+import { Tabs } from "nextra/components";
+
+/**
+ * Render DoenetML as an example in documentation.
+ */
+export function DoenetExample({
+    source,
+    children,
+}: React.PropsWithChildren<{ source: string }>) {
+    return (
+        <div className="doenet-example-container">
+            <Tabs items={["Example", "Source"]} defaultIndex={0}>
+                <Tabs.Tab>
+                    <div className="doenetml-example">
+                        <DoenetViewer source={source} />
+                    </div>
+                </Tabs.Tab>
+                <Tabs.Tab>{children}</Tabs.Tab>
+            </Tabs>
+        </div>
+    );
+}

packages/docs-nextra/components/doenet.tsx

@@ -1,6 +1,38 @@
 import React from "react";
-import dynamic from "next/dynamic";
+import {
+    DoenetViewer as DoenetViewerOrig,
+    DoenetEditor as DoenetEditorOrig,
+} from "@doenet/doenetml-iframe";
+import "@doenet/virtual-keyboard/style.css";
 
-export const DoenetML = dynamic(() => import("./doenetInternal"), {
-    ssr: false,
-});
+/**
+ * Render DoenetML in an iframe so that its styling/state is completely isolated from the page.
+ */
+export function DoenetViewer({
+    source,
+}: React.PropsWithChildren<{ source: string }>) {
+    return <DoenetViewerOrig doenetML={source} />;
+}
+
+export function DoenetEditor({
+    source,
+    showFormatter = false,
+    viewerLocation = "right",
+    height = "500px",
+}: React.PropsWithChildren<{
+    source: string;
+    showFormatter?: boolean;
+    viewerLocation?: "left" | "right" | "top" | "bottom";
+    height?: string;
+}>) {
+    return (
+        <div className="doenet-editor-container">
+            <DoenetEditorOrig
+                doenetML={source}
+                showFormatter={showFormatter}
+                viewerLocation={viewerLocation}
+                height={height}
+            />
+        </div>
+    );
+}

packages/docs-nextra/components/index.ts

@@ -1,2 +1,3 @@
-export * from "./doenetml-example";
+export * from "./doenet-example";
 export * from "./props-display";
+export * from "./doenet";

packages/docs-nextra/next.config.mjs

@@ -1,5 +1,11 @@
 import nextraConfig from "nextra";
-import { autoInsertAttrPropDescriptions } from "./dist/index.js";
+import {
+    autoInsertAttrPropDescriptions,
+    wrapDoenetExample,
+    wrapDoenetEditor,
+    wrapDoenetEditorHorizontal,
+    wrapDoenetViewer,
+} from "./dist/index.js";
 import { getHighlighter, bundledLanguages, bundledThemes } from "shiki";
 import fs from "node:fs";
 
@@ -58,7 +64,13 @@ const withNextra = nextraConfig({
                 return await highlighter;
             },
         },
-        remarkPlugins: [autoInsertAttrPropDescriptions],
+        remarkPlugins: [
+            autoInsertAttrPropDescriptions,
+            wrapDoenetExample,
+            wrapDoenetEditor,
+            wrapDoenetEditorHorizontal,
+            wrapDoenetViewer,
+        ],
         rehypePlugins: [
             /**
              * Add any data in `extraSearchData` to `structurizedData` so that it shows up in the search box.

packages/docs-nextra/pages/reference/doenetML_components/abs.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
@@ -18,23 +18,23 @@ The `<abs>` component has no attibutes or properties.
 
 <a id="math-ex"></a>
 ### Example: Render the absolute value of a math expression
-```html
+```doenet
 <m>|5 - 8| = <abs>5 - 8</abs></m>
 ```
 The `<abs>` component is used to render the absolute value of a math expression. Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
 
 <a id="mathInput-ex"></a>
 ### Example: Absolute value of `<mathInput>`
-```html 
+```doenet 
 <p>Type any number: <mathInput name="userN"/></p>
 <p><m>|$userN| = <abs>$userN</abs></m></p>
 ```
 The `<abs>` component is used to render the absolute value of a named `<mathInput/>`. Test code [here](https://www.doenet.org/portfolioeditor/_J1J2N530LyIvVWx64xB8V/_AgzWwqGV6Yy9DfqMyGlFm).
 
 <a id="numProps-ex"></a>
 ### Example: Absolute value of numerical properties
-```html {5}
+```doenet {5}
     <p>Move the point in the third quadrant.</p>
     <graph size="small" name="g1" newNameSpace>
         <point name="p1" styleNumber="2">(-5,-5)</point>
@@ -47,7 +47,7 @@ Children of the `<abs>` component can include references to `<mathInput>` values
 
 <a id="function-ex"></a>
 ### Example: Absolute value of a function
-```html {4}
+```doenet {4}
     <graph size="small" name="g2" newNameSpace>
        <function name="f">(1/4)x^2 - 4</function>
        <function styleNumber="2">

packages/docs-nextra/pages/reference/doenetML_components/alert.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<alert>`
 
@@ -10,14 +10,11 @@ The `<alert>` component has no attributes or properties.
 
 
 ### Example: Basic use
-```html
+```doenet
 <p>Take the <alert>right</alert> turn.</p>
 ```
 
 ### Test Code
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
-</codeEditor>
-`}
-</DoenetML>
+```doenet-editor
+
+```

packages/docs-nextra/pages/reference/doenetML_components/and.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<and>`
 
@@ -15,7 +15,7 @@ The `<and>` component has no attributes or properties.
 
 <a id="boolean-ex"></a>
 ### Example: `<and>` in a `<boolean>`
-```html {10}
+```doenet {10}
 <p>Enter a number between 5 and 10, excluding 7:
   <mathInput name="n"/></p>
 
@@ -33,7 +33,7 @@ The `<and>` component functions as the boolean operator `and` or `&`, and checks
 
 <a id="award-ex"></a>
 ### Example: `<and>` in an `<award>`
-```html {18}
+```doenet {18}
 <p>Move the point to the intersection of the circle and the line in the 
 first quadrant. (Scroll down to check work.)</p>
 
@@ -69,7 +69,7 @@ An `<and>` component is used to construct a compound boolean from three referenc
 
 <a id="alternative-ex"></a>
 ### Example: An alternative to `<and>`
-```html {9}
+```doenet {9}
 <p>Enter a number between 5 and 10, excluding 7:
   <mathInput name="n"/></p>
 
@@ -85,9 +85,6 @@ The word `and` may be typed directly within any component that takes a boolean e
 
 <a id="test-code"></a>
 ### Test Code
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom" height="700">
-</codeEditor>
-`}
-</DoenetML>
+```doenet-editor
+
+```

packages/docs-nextra/pages/reference/doenetML_components/angle.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 import { AttrDisplay, PropDisplay } from "../../../components"
 
 # `<angle>{:dn}`

packages/docs-nextra/pages/reference/doenetML_components/animateFromSequence.mdx

@@ -1,7 +1,6 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
-<DoenetML>
-{`
+```doenet-viewer
 <section>
   <title><tage>animateFromSequence</tage></title>
 
@@ -344,5 +343,4 @@ n = <number name="n">0</number>
 
 </section>
 
-`}
-</DoenetML>
+```

packages/docs-nextra/pages/reference/doenetML_components/answer.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
@@ -8,13 +8,10 @@ import { DoenetML} from "../../../components/doenet"
 ## Basic usage examples
 
 ### Example: 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>stuff inside</p>
 </codeEditor>
-`}
-</DoenetML>
+```
 
 brief expo.
 

packages/docs-nextra/pages/reference/doenetML_components/aside.mdx

@@ -1,4 +1,4 @@
-import { DoenetML} from "../../../components/doenet"
+import { DoenetViewer, DoenetEditor, DoenetExample } from "../../../components"
 
 # `<abs>`
 
@@ -8,13 +8,11 @@ import { DoenetML} from "../../../components/doenet"
 ## Basic usage examples
 
 ### Example: 
-<DoenetML>
-{`
-<codeEditor showResults resultsLocation="bottom">
+```doenet-editor
     <p>stuff inside</p>
 </codeEditor>
-`}
-</DoenetML>
+```
+
 
 brief expo.