feat(docs): add Code node documentation (#1023)

packages/examples/src/code.meta

@@ -0,0 +1,34 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 60,
+    "resolutionScale": 2,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@motion-canvas/core/image-sequence",
+      "options": {
+        "fileType": "image/png",
+        "quality": 100,
+        "groupByScene": false
+      }
+    },
+    "fileType": "image/png",
+    "quality": 1
+  }
+}

packages/examples/src/code.ts

@@ -0,0 +1,11 @@
+import {makeProject} from '@motion-canvas/core';
+import scene from './scenes/code?scene';
+
+import {parser} from '@lezer/javascript';
+import {Code, LezerHighlighter} from '@motion-canvas/2d';
+
+Code.defaultHighlighter = new LezerHighlighter(parser);
+
+export default makeProject({
+  scenes: [scene],
+});

packages/examples/src/scenes/code.meta

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "timeEvents": [],
+  "seed": 3853578122
+}

packages/examples/src/scenes/code.tsx

@@ -0,0 +1,58 @@
+import {CODE, Code, lines, makeScene2D, word} from '@motion-canvas/2d';
+import {
+  DEFAULT,
+  SimpleSignal,
+  createRef,
+  createSignal,
+  easeOutCubic,
+  waitFor,
+} from '@motion-canvas/core';
+
+export default makeScene2D(function* (view) {
+  const codeRef = createRef<Code>();
+
+  const radius = createSignal(1);
+  const r2 = createSignal(() => radius() * radius());
+  const area = createSignal(() => Math.PI * r2());
+
+  const functionName = Code.createSignal('calculateArea');
+
+  const displayFloat = (signal: SimpleSignal<number, void>) => {
+    return () => signal().toFixed(2).toString();
+  };
+
+  view.add(
+    <Code
+      fontSize={42}
+      ref={codeRef}
+      code={CODE`\
+const radius = ${displayFloat(radius)};
+area = ${functionName}(radius); // ${displayFloat(area)}
+
+const ${functionName} = () => {
+  const r2 = radius * radius; // ${displayFloat(radius)} * ${displayFloat(
+    radius,
+  )} = ${displayFloat(r2)}
+  return Math.PI * r2;
+};
+    `}
+    />,
+  );
+
+  yield* waitFor(2);
+  yield* codeRef().selection(codeRef().findAllRanges(/radius/gi), 0.8);
+  yield* waitFor(1);
+  yield* codeRef().selection(DEFAULT, 0.8);
+  yield* functionName('getAreaFromRadius', 1);
+  yield* waitFor(2);
+  yield* radius(10, 3, easeOutCubic);
+  yield* waitFor(2);
+  yield* codeRef().code.replace(
+    lines(4, 5),
+    CODE`  return Math.PI * radius * radius;\n`,
+    1,
+  );
+  yield* waitFor(1);
+  yield* codeRef().code.remove(word(4, 1, 7), 1);
+  yield* waitFor(2);
+});

packages/examples/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
         './src/tweening-visualiser.ts',
         './src/node-signal.ts',
         './src/code-block.ts',
+        './src/code.ts',
         './src/random.ts',
         './src/layout.ts',
         './src/layout-group.ts',