Files
AFFiNE-Mirror/blocksuite/playground/apps/_common/components/custom-adapter-panel.ts
T
DarkSky 0c7b20dc18 chore: migrate oxlint & oxfmt (#15464)
#### PR Dependency Tree


* **PR #15464** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

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

## Summary by CodeRabbit

* **Chores**
* Replaced the project’s formatting and linting workflow with Oxfmt and
Oxlint.
* Added shared formatting and linting configuration, editor integration,
and updated automated checks.
* Updated generated files, scripts, and lint guidance to use the new
tooling.

* **Style**
* Reformatted templates, source code, examples, and configuration files
for consistent readability.
  * No user-facing functionality or rendering behavior changed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-10 23:51:28 +08:00

64 lines
1.6 KiB
TypeScript

import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
import { ShadowlessElement } from '@blocksuite/affine/std';
import type { TransformerMiddleware } from '@blocksuite/affine/store';
import type { TestAffineEditorContainer } from '@blocksuite/integration-test';
import { css, html, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
@customElement('custom-adapter-panel')
export class CustomAdapterPanel extends SignalWatcher(
WithDisposable(ShadowlessElement)
) {
static override styles = css`
.custom-adapter-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: 30vw;
box-sizing: border-box;
z-index: 1;
}
`;
private _renderPanel() {
return html`<affine-adapter-panel
.store=${this.editor.doc}
.transformerMiddlewares=${this.transformerMiddlewares}
></affine-adapter-panel>`;
}
override render() {
return html`
${
this._show
? html`
<div class="custom-adapter-container">${this._renderPanel()}</div>
`
: nothing
}
`;
}
toggleDisplay() {
this._show = !this._show;
}
@state()
private accessor _show = false;
@property({ attribute: false })
accessor editor!: TestAffineEditorContainer;
@property({ attribute: false })
accessor transformerMiddlewares: TransformerMiddleware[] = [];
}
declare global {
interface HTMLElementTagNameMap {
'custom-adapter-panel': CustomAdapterPanel;
}
}