Nextra codeblocks for displaying doenet code and rendered results #228
Conversation
| console.log("source for editor", JSON.stringify(source)); | ||
| return ( | ||
| <div className="doenet-editor-container"> | ||
| <DoenetEditorOrig doenetML={source} showFormatter={showFormatter} /> |
There was a problem hiding this comment.
I think the default view should be editor on top and rendered below, rather than side-by-side
There was a problem hiding this comment.
I'll check with Virginia, as I thought she wanted side-by-side. At least side-by-side does switch to top-to-bottom on mobile devices/narrow screens. We can make different versions or parametrized versions to allow the author to specify.
There was a problem hiding this comment.
I ended up making a doenet-editor that is vertical and a doenet-editor-horiz that is side-by-side.
| @@ -15,8 +15,7 @@ This tutorial covers a sample project in 5 parts; each part is about 5-10 minute | |||
|
|
|||
| # Part 1: Creating a Doenet Account & Starting an Activity | |||
|
|
|||
| <DoenetML> | |||
| {` | |||
| <DoenetViewer source={` | |||
There was a problem hiding this comment.
Is there a reason this isn't a triple blacktic?
There was a problem hiding this comment.
No, just being lazy as I think Virginia is going to delete this.
| console.log( | ||
| "value for wrapped editor", | ||
| JSON.stringify(node.value), | ||
| ); |
There was a problem hiding this comment.
This is going to make the logs look really ugly as hundreds of examples get integrated into the docs.
There was a problem hiding this comment.
Yes, this is only there until I figure out why the newlines are disappearing. They are still here with this console.log, but then they are gone in the console.log on line 21 of packages/docs-nextra/components/doenet.tsx. It's mysterious and basically makes triple backtick doenet-editor non-functional. I'm not sure where to look for this removal of whitespace and am hoping you have ideas!
| visit(tree, (node) => { | ||
| type MdxJsxFlowElement = typeof node & { | ||
| type: "mdxJsxFlowElement"; | ||
| }; |
There was a problem hiding this comment.
This type is used in several files. I think we can put it in a types.ts and import it (that file can also import "mdast-util-mdx-jsx"
There was a problem hiding this comment.
I reused the original type name MdxJsxFlowElement like the previous code did. Not sure if that is a good idea.
| @@ -259,7 +259,7 @@ export function DoenetViewer({ | |||
| boxSizing: "border-box", | |||
| overflow: "hidden", | |||
| border: "none", | |||
| minHeight: 200, | |||
| minHeight: 50, | |||
There was a problem hiding this comment.
Ah, I think the min-height was to accommodate the virtual keyboard at some point.
There was a problem hiding this comment.
This was making the short examples take a lot of space. The virtual keyboard is outside the iframe now, so the space shouldn't be needed for that.
|
Looks good. |
This PR adds the codeblocks for
doenet-viewer,doenet-editor, anddoenet-exampleto the Doenet documentation.The codeblocks are short hand for calling
<DoenetViewer>,<DoenetEditor>, and<DoenetExample>.