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"
);
...

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

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

// 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={sketchCode}
  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.)