a828c74f87
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 -->
62 lines
1.6 KiB
TypeScript
62 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;
|
|
}
|
|
}
|