chore: merge blocksuite source code (#9213)

blocksuite/affine/components/src/toggle-button/index.ts

@@ -0,0 +1,7 @@
+import { TOGGLE_BUTTON_PARENT_CLASS, ToggleButton } from './toggle-button.js';
+
+export function effects() {
+  customElements.define('blocksuite-toggle-button', ToggleButton);
+}
+
+export { TOGGLE_BUTTON_PARENT_CLASS, ToggleButton };

blocksuite/affine/components/src/toggle-button/toggle-button.ts

@@ -0,0 +1,81 @@
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/global/utils';
+import { css, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit-html';
+
+import { toggleDown, toggleRight } from '../icons/list.js';
+
+export const TOGGLE_BUTTON_PARENT_CLASS = 'blocksuite-toggle-button-parent';
+
+export class ToggleButton extends WithDisposable(ShadowlessElement) {
+  static override styles = css`
+    .toggle-icon {
+      display: flex;
+      align-items: start;
+      margin-top: 0.45em;
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      border-radius: 4px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+    .toggle-icon:hover {
+      background: var(--affine-hover-color);
+    }
+
+    .toggle-icon[data-collapsed='true'] {
+      opacity: 1;
+    }
+
+    .${unsafeCSS(TOGGLE_BUTTON_PARENT_CLASS)}:hover .toggle-icon {
+      opacity: 1;
+    }
+
+    .with-drag-handle .toggle-icon {
+      opacity: 1;
+    }
+    .with-drag-handle .affine-block-children-container .toggle-icon {
+      opacity: 0;
+    }
+  `;
+
+  override render() {
+    const toggleDownTemplate = html`
+      <div
+        contenteditable="false"
+        class="toggle-icon"
+        @click=${() => this.updateCollapsed(!this.collapsed)}
+      >
+        ${toggleDown}
+      </div>
+    `;
+
+    const toggleRightTemplate = html`
+      <div
+        contenteditable="false"
+        class="toggle-icon"
+        data-collapsed=${this.collapsed}
+        @click=${() => this.updateCollapsed(!this.collapsed)}
+      >
+        ${toggleRight}
+      </div>
+    `;
+
+    return this.collapsed ? toggleRightTemplate : toggleDownTemplate;
+  }
+
+  @property({ attribute: false })
+  accessor collapsed!: boolean;
+
+  @property({ attribute: false })
+  accessor updateCollapsed!: (collapsed: boolean) => void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'blocksuite-toggle-button': ToggleButton;
+  }
+}