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 -->
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
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';
|
|
import { DocsPanel } from '../../_common/components/docs-panel';
|
|
import { LeftSidePanel } from '../../_common/components/left-side-panel';
|
|
import { StarterDebugMenu } from '../../_common/components/starter-debug-menu';
|
|
import { CommentPanel } from '../../comment/comment-panel';
|
|
import { createTestEditor } from './extensions';
|
|
|
|
export async function createTestApp(doc: Store, collection: Workspace) {
|
|
const app = document.querySelector('#app');
|
|
if (!app) {
|
|
throw new Error('Cannot find app root element(#app).');
|
|
}
|
|
const editor = createTestEditor(doc, collection);
|
|
|
|
app.append(editor);
|
|
await editor.updateComplete;
|
|
|
|
const debugMenu = new StarterDebugMenu();
|
|
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();
|
|
const attachmentViewerPanel = new AttachmentViewerPanel();
|
|
|
|
docsPanel.editor = editor;
|
|
framePanel.editor = editor;
|
|
outlinePanel.editor = editor;
|
|
outlineViewer.editor = editor;
|
|
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;
|
|
debugMenu.outlinePanel = outlinePanel;
|
|
debugMenu.outlineViewer = outlineViewer;
|
|
debugMenu.framePanel = framePanel;
|
|
debugMenu.leftSidePanel = leftSidePanel;
|
|
debugMenu.docsPanel = docsPanel;
|
|
debugMenu.adapterPanel = adapterPanel;
|
|
|
|
debugMenu.commentPanel = commentPanel;
|
|
|
|
commentPanel.editor = editor;
|
|
|
|
document.body.append(attachmentViewerPanel);
|
|
document.body.append(outlinePanel);
|
|
document.body.append(outlineViewer);
|
|
document.body.append(framePanel);
|
|
document.body.append(leftSidePanel);
|
|
document.body.append(debugMenu);
|
|
document.body.append(adapterPanel);
|
|
|
|
window.editor = editor;
|
|
window.doc = doc;
|
|
Object.defineProperty(globalThis, 'host', {
|
|
get() {
|
|
return document.querySelector('editor-host');
|
|
},
|
|
});
|
|
Object.defineProperty(globalThis, 'std', {
|
|
get() {
|
|
return document.querySelector('editor-host')?.std;
|
|
},
|
|
});
|
|
|
|
return editor;
|
|
}
|