chore: merge blocksuite source code (#9213)

blocksuite/playground/apps/_common/components/custom-outline-panel.ts

@@ -0,0 +1,54 @@
+import { WithDisposable } from '@blocksuite/global/utils';
+import type { AffineEditorContainer } from '@blocksuite/presets';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('custom-outline-panel')
+export class CustomOutlinePanel extends WithDisposable(LitElement) {
+  static override styles = css`
+    .custom-outline-container {
+      position: absolute;
+      top: 0;
+      right: 16px;
+      border: 1px solid var(--affine-border-color, #e3e2e4);
+      background: var(--affine-background-overlay-panel-color);
+      height: 100vh;
+      width: 320px;
+      box-sizing: border-box;
+      z-index: 1;
+    }
+  `;
+
+  private _renderPanel() {
+    return html`<affine-outline-panel
+      .editor=${this.editor}
+      .fitPadding=${[50, 360, 50, 50]}
+    ></affine-outline-panel>`;
+  }
+
+  override render() {
+    return html`
+      ${this._show
+        ? html`
+            <div class="custom-outline-container">${this._renderPanel()}</div>
+          `
+        : nothing}
+    `;
+  }
+
+  toggleDisplay() {
+    this._show = !this._show;
+  }
+
+  @state()
+  private accessor _show = false;
+
+  @property({ attribute: false })
+  accessor editor!: AffineEditorContainer;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'custom-outline-panel': CustomOutlinePanel;
+  }
+}