feat: editor updates

.eslintrc.js

@@ -48,5 +48,6 @@ module.exports = {
         '@typescript-eslint/no-parameter-properties': 1,
         '@typescript-eslint/type-annotation-spacing': 1,
         '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
+        '@typescript-eslint/no-non-null-assertion': 0,
     },
 };

.gitignore

@@ -11,11 +11,9 @@
 # Generated Example and Tutorial Markdowns
 /docs/tutorials/*
 !/docs/tutorials/index.md
-/docs/examples/*
 !/docs/examples/index.md
 /versioned_docs/version-*/tutorials/*
 !/versioned_docs/version-*/tutorials/index.md
-/versioned_docs/version-*/examples/*
 !/versioned_docs/version-*/examples/index.md
 
 # Misc

blog/2024-11-29-pixi-v8.6.0.md

@@ -7,8 +7,12 @@ tags: [PixiJS, Updates, Improvements]
 hide_table_of_contents: true
 keywords: ['PixiJS', 'Updates', 'Improvements', 'QoL']
 ---
-import Example from '@site/src/components/Example/index';
-import version from '@site/docs/pixi-version.json';
+import { EmbeddedEditor } from "@site/src/components/Editor/EmbeddedEditor";
+import CacheAsTextureFile from '!!raw-loader!../docs/examples/basic/cache-as-texture';
+import PixelLineFile from '!!raw-loader!../docs/examples/graphics/pixel-line';
+import ParticleContainerFile from '!!raw-loader!../docs/examples/basic/particle-container';
+import InverseMaskFile from '!!raw-loader!../docs/examples/masks/inverse-mask';
+import PerspectiveMeshFile from '!!raw-loader!../docs/examples/mesh-and-shaders/perspective-mesh';
 
 
 Thank you to everyone who participated in our survey! One thing came through loud and clear: **better documentation is a top priority for the PixiJS community**. We’ve taken your feedback to heart, and work is already underway to make significant improvements.
@@ -55,13 +59,13 @@ We will be bringing out more detailed guides/examples on all of these features a
   :::info[Guide]
   We have a full guide on this feature [here](/8.x/guides/advanced/cache-as-texture).
   :::
-  <Example id="basic.cacheAsTexture" pixiVersion={version} mode={"embedded"}/>
+  <EmbeddedEditor files={{"index.js": CacheAsTextureFile}}/>
 - **pixelLine**: The `pixelLine` property is a neat feature of the PixiJS Graphics API that allows you to create lines that remain 1 pixel thick, regardless of scaling or zoom level. This feature is especially useful for achieving crisp, pixel-perfect visuals, particularly in retro-style or grid-based games, technical drawing, or UI rendering.
 
   :::info[Guide]
   We have a full guide on this feature [here](/8.x/guides/components/graphics-pixel-line).
   :::
-  <Example id="graphics.pixelLine" pixiVersion={version} mode={"embedded"}/>
+  <EmbeddedEditor files={{"index.js": PixelLineFile}}/>
 
 - **New Global Methods**: We have added three new functions to Container to make it easier to work with global transforms / tints / alphas.
 
@@ -99,12 +103,12 @@ We will be bringing out more detailed guides/examples on all of these features a
   :::info[Blog]
   We have a blog post on this feature [here](/blog/particlecontainer-v8).
   :::
-  <Example id="basic.particleContainer" pixiVersion={version} mode={"embedded"}/>
+  <EmbeddedEditor files={{"index.js": ParticleContainerFile}}/>
 
 
 - **Inverse Masking**:
   You can now use `element.setMask({ mask, inverse: true })` to create an inverse mask effect. This is great for creating cut-out effects or other creative visuals.
-  <Example id="masks.inverseMask" pixiVersion={version} mode={"embedded"}/>
+  <EmbeddedEditor files={{"index.js": InverseMaskFile}}/>
 
 ### v8.4.0
  - **Multiview**: Support for renderering the same context to multiple canvases. Eliminating the need for multiple PixiJS instances and duplicating resources.
@@ -116,7 +120,7 @@ We will be bringing out more detailed guides/examples on all of these features a
 
 ### v8.3.0
   - **PerspectiveMesh**: A new mesh type that allows you to create 3D perspective effect
-  <Example id="meshAndShaders.perspectiveMesh" pixiVersion={version} mode={"embedded"}/>
+  <EmbeddedEditor files={{"index.js": PerspectiveMeshFile}}/>
 
 ### v8.2.0
  - **Container Reparenting**: You can now reparent a container to another container without it looking visually different with two new methods `reparentChild(child)` and `reparentChildAt(child, 1)`.

docs/examples/advanced/_category_.yml

@@ -0,0 +1,2 @@
+label: Advanced
+position: 2

docs/examples/advanced/collision-detection.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Collision Detection
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./collision-detection';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/advanced/mouse-trail.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Mouse Trail
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./mouse-trail';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/advanced/scratch-card.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Scratch Card
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./scratch-card';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/advanced/screen-shot.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Screen Shot
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./screen-shot';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/advanced/slots.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Slots
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./slots';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/advanced/spinners.mdx

@@ -0,0 +1,26 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Spinners
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./spinners/index';
+import SpinnerGenerator1 from '!!raw-loader!./spinners/spinner1';
+import SpinnerGenerator2 from '!!raw-loader!./spinners/spinner2';
+import SpinnerGenerator3 from '!!raw-loader!./spinners/spinner3';
+import SpinnerGenerator4 from '!!raw-loader!./spinners/spinner4';
+import SpinnerGenerator5 from '!!raw-loader!./spinners/spinner5';
+import SpinnersIntersect from '!!raw-loader!./spinners/intersect';
+
+<ExampleEditor files={{
+    "index.js": IndexFile,
+    './spinner1.js': SpinnerGenerator1,
+    './spinner2.js': SpinnerGenerator2,
+    './spinner3.js': SpinnerGenerator3,
+    './spinner4.js': SpinnerGenerator4,
+    './spinner5.js': SpinnerGenerator5,
+    './intersect.js': SpinnersIntersect,
+}} />
+

src/examples/v8.0.0/advanced/spinners.js → docs/examples/advanced/spinners/index.js

@@ -43,7 +43,6 @@ import { Application, Assets, Container, Graphics, Point, Sprite } from 'pixi.js
 
         mask.position.set(size / 2, size / 2);
         base.mask = mask;
-        window.mask = mask;
 
         container.addChild(bottom);
         container.addChild(base);
@@ -181,7 +180,6 @@ import { Application, Assets, Container, Graphics, Point, Sprite } from 'pixi.js
 
         mask.position.set(size / 2, size / 2);
         base.mask = mask;
-        window.mask = mask;
 
         container.addChild(base);
         container.addChild(mask);

src/examples/v8.0.0/advanced/spinners/spinner1.js → docs/examples/advanced/spinners/spinner1.js

@@ -26,7 +26,6 @@ export function generateSpinner1(app, position)
 
     mask.position.set(size / 2, size / 2);
     base.mask = mask;
-    window.mask = mask;
 
     container.addChild(bottom);
     container.addChild(base);

src/examples/v8.0.0/advanced/spinners/spinner2.js → docs/examples/advanced/spinners/spinner2.js

@@ -1,4 +1,4 @@
-const { Container, Sprite } = require('pixi.js');
+import { Container, Sprite } from 'pixi.js';
 
 /* -----------------------
 Spinner 2. Scaling balls.

src/examples/v8.0.0/advanced/spinners/spinner3.js → docs/examples/advanced/spinners/spinner3.js

@@ -20,7 +20,6 @@ export function generateSpinner3(app, position)
 
     mask.position.set(size / 2, size / 2);
     base.mask = mask;
-    window.mask = mask;
 
     container.addChild(base);
     container.addChild(mask);

docs/examples/advanced/star-warp.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Star Warp
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./star-warp';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/assets/_category_.yml

@@ -0,0 +1,2 @@
+label: Assets
+position: 12

docs/examples/assets/async.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Async
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./async';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/assets/background.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Background
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./background';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/assets/bundle.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Bundle
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./bundle';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/assets/multiple.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Multiple
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./multiple';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/assets/promise.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Promise
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./promise';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/_category_.yml

@@ -0,0 +1,2 @@
+label: Basic
+position: 1

docs/examples/basic/blend-modes.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Blend Modes
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./blend-modes';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/cache-as-texture.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 7
+custom_edit_url: null
+title: Cache As Texture
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./cache-as-texture';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/container.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Container
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./container';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/mesh-plane.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Mesh Plane
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./mesh-plane';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/particle-container.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Particle Container
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./particle-container';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/render-group.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Render Group
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./render-group';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/tinting.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Tinting
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./tinting';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/basic/transparent-background.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Transparent Background
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./transparent-background';
+
+<ExampleEditor files={{"index.js": IndexFile}} />

docs/examples/events/_category_.yml

@@ -0,0 +1,2 @@
+label: Events
+position: 6

docs/examples/events/click.mdx

@@ -0,0 +1,11 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Click
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./click';
+
+<ExampleEditor files={{"index.js": IndexFile}} />