feat(editor): add experimental feature adapter panel to AFFiNE canary (#12489)

Closes: [BS-2539](https://linear.app/affine-design/issue/BS-2539/为-affine-添加-ef，并且支持在-affine-预览对应的功能)

> [!warning]
> This feature is only available in the canary build and is intended for debugging purposes.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced an "Adapter Panel" feature with a new sidebar tab for previewing document content in multiple formats (Markdown, PlainText, HTML, Snapshot), controllable via a feature flag.
  - Added a fully integrated adapter panel component with reactive UI elements for selecting adapters, toggling HTML preview modes, and updating content.
  - Provided a customizable adapter panel for both main app and playground environments, supporting content transformation pipelines and export previews.
  - Enabled seamless toggling and live updating of adapter panel content through intuitive menus and controls.

- **Localization**
  - Added English translations and descriptive settings for the Adapter Panel feature.

- **Chores**
  - Added new package and workspace dependencies along with TypeScript project references to support the Adapter Panel modules and components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/playground/apps/starter/utils/app.ts

@@ -1,6 +1,13 @@
 import type { Store, Workspace } from '@blocksuite/affine/store';
+import {
+  defaultImageProxyMiddleware,
+  docLinkBaseURLMiddlewareBuilder,
+  embedSyncedDocMiddleware,
+  titleMiddleware,
+} from '@blocksuite/affine-shared/adapters';
 
 import { AttachmentViewerPanel } from '../../_common/components/attachment-viewer-panel';
+import { CustomAdapterPanel } from '../../_common/components/custom-adapter-panel';
 import { CustomFramePanel } from '../../_common/components/custom-frame-panel';
 import { CustomOutlinePanel } from '../../_common/components/custom-outline-panel';
 import { CustomOutlineViewer } from '../../_common/components/custom-outline-viewer';
@@ -24,6 +31,7 @@ export async function createTestApp(doc: Store, collection: Workspace) {
   const docsPanel = new DocsPanel();
   const framePanel = new CustomFramePanel();
   const outlinePanel = new CustomOutlinePanel();
+  const adapterPanel = new CustomAdapterPanel();
   const outlineViewer = new CustomOutlineViewer();
   const leftSidePanel = new LeftSidePanel();
   const commentPanel = new CommentPanel();
@@ -36,6 +44,16 @@ export async function createTestApp(doc: Store, collection: Workspace) {
   outlineViewer.toggleOutlinePanel = () => {
     outlinePanel.toggleDisplay();
   };
+  adapterPanel.editor = editor;
+  adapterPanel.transformerMiddlewares = [
+    docLinkBaseURLMiddlewareBuilder(
+      'https://example.com',
+      editor.doc.workspace.id
+    ).get(),
+    titleMiddleware(editor.doc.workspace.meta.docMetas),
+    embedSyncedDocMiddleware('content'),
+    defaultImageProxyMiddleware,
+  ];
 
   debugMenu.collection = collection;
   debugMenu.editor = editor;
@@ -44,6 +62,7 @@ export async function createTestApp(doc: Store, collection: Workspace) {
   debugMenu.framePanel = framePanel;
   debugMenu.leftSidePanel = leftSidePanel;
   debugMenu.docsPanel = docsPanel;
+  debugMenu.adapterPanel = adapterPanel;
 
   debugMenu.commentPanel = commentPanel;
 
@@ -55,6 +74,7 @@ export async function createTestApp(doc: Store, collection: Workspace) {
   document.body.append(framePanel);
   document.body.append(leftSidePanel);
   document.body.append(debugMenu);
+  document.body.append(adapterPanel);
 
   window.editor = editor;
   window.doc = doc;