Add scrollable and loadable from file EditableSketches

[ksen0]

Currently the 2.0 switch is blocked by some .todo tutorials. These are blocked by incomplete migration, sometimes due to the presence of external links to sketches that cannot be updated to match 2.0. Currently they can't be copied directly into the body of the tutorial because they are very long. This PR introduces scrollable editable sketch support.

Addresses #1426 processing/p5.js#8870

WIP Docs

1. Put the .js/.css/.html into .../tutorials/sketches/TUTORIAL_NAME/SKETCH_NAME
2. use export at top of tutorial .mdx file to load the data

//at the top
import { readFile } from "fs/promises";

export const completeSketchCode = await readFile(
  "src/content/tutorials/sketches/TUTORIAL_NAME/SKETCH_NAME/sketch.js",
  "utf-8"
);
export const cssCode = await readFile(
  "src/content/tutorials/sketches/TUTORIAL_NAME/SKETCH_NAME/main.css",
  "utf-8"
);

// etc for bodyCode for index.html
...

// in the doc body - sketch with own CSS+HTML
<SketchEmbed
  height="800px"
  code={completeSketchCode}
  cssCode={cssCode}
  bodyCode={bodyCode}
/>

// alternatively - editable sketch
<EditableSketch code={completeSketchCode} />

// editable sketch with own CSS+HTML may have some unexpected ideas about width.
// however explicitly setting width will use "vertical" mode where the code floats on the right.
<SketchEmbed
  height="800px"
  scrollable={true}
  code={completeSketchCode}
  cssCode={cssCode}
  bodyCode={bodyCode}
/>

[davepagurek]

Do we want to make this optional/opt-in for long sketches?

[ksen0]

Ah yes thanks for the reminder! That's the intent. (For other testers/reviewers looking later: when I add missing tutorials they shouldn't have anything changed except some scrollable sketches where intended.)

[skyyash]

currently the height prop of EditableSketch component only resizes preview, we might need another prop to resize code height too...

[aashu2006]

hi @ksen0 , I tested locally with a long WEBGL sketch. The scrollable editor works well: code caps at 300px and scrolls, the page layout stays fine, edit and run works, and leaving out scrollable also changes nothing

also I feel there are two things to fix:

1. Fold gutter shows on every editor now (CodeEmbed/index.jsx:160). foldGutter: true is not gated on scrollable, so all tutorial and reference pages get the ▾ arrows

-            foldGutter: true,
+            foldGutter: isScrollable,

2. cssCode / bodyCode never reach the sketch (CodeEmbed/index.jsx:109-121). EditableSketch passes them to CodeEmbed, but CodeEmbed doesn't forward them to CodeFrame, so the CSS+HTML example loses both

             <CodeFrame
               jsCode={previewCodeString}
+              cssCode={props.cssCode}
+              htmlBodyCode={props.htmlBodyCode}

I tried both fixes locally, and untouched pages match main again after the gutter fix

[ksen0]

Thank you for catching that @aashu2006 , added.