refactor(editor): mount worker renderer in editor host (#10055)

This would allow for easier integration with current test runner, since the two column layout is removed.

The `ViewportTurboRender` canvas and its debug UI are only enabled if the extension is added, which won't affect the AFFiNE entry.

<img width="945" alt="image" src="https://github.com/user-attachments/assets/dc82daa4-cbed-4eb9-9660-28c3f7d35722" />

blocksuite/playground/examples/renderer/main.ts

@@ -1,59 +1,7 @@
-import { ViewportTurboRendererIdentifier } from '@blocksuite/affine-shared/viewport-renderer';
-import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
-import { nextTick } from '@blocksuite/global/utils';
 import { Text } from '@blocksuite/store';
-import { Pane } from 'tweakpane';
 
 import { doc, editor } from './editor.js';
 
-type DocMode = 'page' | 'edgeless';
-
-async function handleToCanvasClick() {
-  const renderer = editor.std.get(ViewportTurboRendererIdentifier);
-  await renderer.render();
-  const viewport = editor.std.get(GfxControllerIdentifier).viewport;
-  viewport.viewportUpdated.on(async () => {
-    await renderer.render();
-  });
-}
-
-async function handleModeChange(mode: DocMode) {
-  editor.mode = mode;
-  await nextTick();
-
-  const renderer = editor.std.get(ViewportTurboRendererIdentifier);
-  await renderer.render();
-}
-
-function initUI() {
-  const pane = new Pane({
-    container: document.querySelector('#tweakpane-container') as HTMLElement,
-  });
-
-  const params = {
-    mode: 'edgeless' as DocMode,
-  };
-
-  pane
-    .addButton({
-      title: 'To Canvas',
-    })
-    .on('click', () => {
-      handleToCanvasClick().catch(console.error);
-    });
-  pane
-    .addBinding(params, 'mode', {
-      label: 'Editor Mode',
-      options: {
-        Doc: 'page',
-        Edgeless: 'edgeless',
-      },
-    })
-    .on('change', ({ value }) => {
-      handleModeChange(value as DocMode).catch(console.error);
-    });
-}
-
 function addParagraph(content: string) {
   const note = doc.getBlocksByFlavour('affine:note')[0];
   const props = {
@@ -63,9 +11,7 @@ function addParagraph(content: string) {
 }
 
 function main() {
-  initUI();
-
-  document.querySelector('#left-column')?.append(editor);
+  document.querySelector('#container')?.append(editor);
   const firstParagraph = doc.getBlockByFlavour('affine:paragraph')[0];
   doc.updateBlock(firstParagraph, { text: new Text('Renderer') });