Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-11 05:58:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): extract html adapter to shared (#9319)

Browse Source
This commit is contained in:
Saul-Mirone
2024-12-26 04:05:10 +00:00
parent 37e44e0341
commit fad0237d94
24 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/blocks/src/__tests__/adapters/html.unit.spec.ts
+1 -1
View File
@@ -2,6 +2,7 @@ import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
import { Container } from '@blocksuite/global/di';
import type {
BlockSnapshot,
@@ -14,7 +15,6 @@ import { describe, expect, test } from 'vitest';
import { defaultBlockHtmlAdapterMatchers } from '../../_common/adapters/html/block-matcher.js';
import { htmlInlineToDeltaMatchers } from '../../_common/adapters/html/delta-converter/html-inline.js';
import { inlineDeltaToHtmlAdapterMatchers } from '../../_common/adapters/html/delta-converter/inline-delta.js';
import { HtmlAdapter } from '../../_common/adapters/html/html.js';
import { nanoidReplacement } from '../../_common/test-utils/test-utils.js';
import { embedSyncedDocMiddleware } from '../../_common/transformers/middlewares.js';
import { createJob } from '../utils/create-job.js';
blocksuite/blocks/src/_common/adapters/attachment.ts
+1 -2
View File
@@ -1,3 +1,4 @@
import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
import { sha } from '@blocksuite/global/utils';
@@ -19,8 +20,6 @@ import {
type ToDocSnapshotPayload,
} from '@blocksuite/store';
import { AdapterFactoryIdentifier } from './type.js';
export type Attachment = File[];
type AttachmentToSliceSnapshotPayload = {
blocksuite/blocks/src/_common/adapters/extension.ts
+1 -1
View File
@@ -1,9 +1,9 @@
import { HtmlAdapterFactoryExtension } from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import { AttachmentAdapterFactoryExtension } from './attachment.js';
import { htmlInlineToDeltaMatchers } from './html/delta-converter/html-inline.js';
import { inlineDeltaToHtmlAdapterMatchers } from './html/delta-converter/inline-delta.js';
import { HtmlAdapterFactoryExtension } from './html/html.js';
import { ImageAdapterFactoryExtension } from './image.js';
import { MarkdownAdapterFactoryExtension } from './markdown/markdown.js';
import { MixTextAdapterFactoryExtension } from './mix-text.js';
blocksuite/blocks/src/_common/adapters/html/html.ts
-388
View File
@@ -1,388 +0,0 @@
import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import {
type AdapterContext,
type BlockHtmlAdapterMatcher,
BlockHtmlAdapterMatcherIdentifier,
HastUtils,
type HtmlAST,
HtmlASTToDeltaMatcherIdentifier,
HtmlDeltaConverter,
InlineDeltaToHtmlAdapterMatcherIdentifier,
} from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import type { ServiceProvider } from '@blocksuite/global/di';
import {
type AssetsManager,
ASTWalker,
BaseAdapter,
type BlockSnapshot,
BlockSnapshotSchema,
type DocSnapshot,
type FromBlockSnapshotPayload,
type FromBlockSnapshotResult,
type FromDocSnapshotPayload,
type FromDocSnapshotResult,
type FromSliceSnapshotPayload,
type FromSliceSnapshotResult,
type Job,
nanoid,
type SliceSnapshot,
type ToBlockSnapshotPayload,
type ToDocSnapshotPayload,
} from '@blocksuite/store';
import type { Root } from 'hast';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import { unified } from 'unified';
import { AdapterFactoryIdentifier } from '../type.js';
export type Html = string;
type HtmlToSliceSnapshotPayload = {
file: Html;
assets?: AssetsManager;
blockVersions: Record<string, number>;
workspaceId: string;
pageId: string;
};
export class HtmlAdapter extends BaseAdapter<Html> {
private readonly _astToHtml = (ast: Root) => {
return unified().use(rehypeStringify).stringify(ast);
};
private readonly _traverseHtml = async (
html: HtmlAST,
snapshot: BlockSnapshot,
assets?: AssetsManager
) => {
const walker = new ASTWalker<HtmlAST, BlockSnapshot>();
walker.setONodeTypeGuard(
(node): node is HtmlAST =>
'type' in (node as object) && (node as HtmlAST).type !== undefined
);
walker.setEnter(async (o, context) => {
for (const matcher of this.blockMatchers) {
if (matcher.toMatch(o)) {
const adapterContext: AdapterContext<
HtmlAST,
BlockSnapshot,
HtmlDeltaConverter
> = {
walker,
walkerContext: context,
configs: this.configs,
job: this.job,
deltaConverter: this.deltaConverter,
textBuffer: { content: '' },
assets,
};
await matcher.toBlockSnapshot.enter?.(o, adapterContext);
}
}
});
walker.setLeave(async (o, context) => {
for (const matcher of this.blockMatchers) {
if (matcher.toMatch(o)) {
const adapterContext: AdapterContext<
HtmlAST,
BlockSnapshot,
HtmlDeltaConverter
> = {
walker,
walkerContext: context,
configs: this.configs,
job: this.job,
deltaConverter: this.deltaConverter,
textBuffer: { content: '' },
assets,
};
await matcher.toBlockSnapshot.leave?.(o, adapterContext);
}
}
});
return walker.walk(html, snapshot);
};
private readonly _traverseSnapshot = async (
snapshot: BlockSnapshot,
html: HtmlAST,
assets?: AssetsManager
) => {
const assetsIds: string[] = [];
const walker = new ASTWalker<BlockSnapshot, HtmlAST>();
walker.setONodeTypeGuard(
(node): node is BlockSnapshot =>
BlockSnapshotSchema.safeParse(node).success
);
walker.setEnter(async (o, context) => {
for (const matcher of this.blockMatchers) {
if (matcher.fromMatch(o)) {
const adapterContext: AdapterContext<
BlockSnapshot,
HtmlAST,
HtmlDeltaConverter
> = {
walker,
walkerContext: context,
configs: this.configs,
job: this.job,
deltaConverter: this.deltaConverter,
textBuffer: { content: '' },
assets,
updateAssetIds: (assetsId: string) => {
assetsIds.push(assetsId);
},
};
await matcher.fromBlockSnapshot.enter?.(o, adapterContext);
}
}
});
walker.setLeave(async (o, context) => {
for (const matcher of this.blockMatchers) {
if (matcher.fromMatch(o)) {
const adapterContext: AdapterContext<
BlockSnapshot,
HtmlAST,
HtmlDeltaConverter
> = {
walker,
walkerContext: context,
configs: this.configs,
job: this.job,
deltaConverter: this.deltaConverter,
textBuffer: { content: '' },
assets,
};
await matcher.fromBlockSnapshot.leave?.(o, adapterContext);
}
}
});
return {
ast: (await walker.walk(snapshot, html)) as Root,
assetsIds,
};
};
deltaConverter: HtmlDeltaConverter;
readonly blockMatchers: BlockHtmlAdapterMatcher[];
constructor(job: Job, provider: ServiceProvider) {
super(job);
const blockMatchers = Array.from(
provider.getAll(BlockHtmlAdapterMatcherIdentifier).values()
);
const inlineDeltaToHtmlAdapterMatchers = Array.from(
provider.getAll(InlineDeltaToHtmlAdapterMatcherIdentifier).values()
);
const htmlInlineToDeltaMatchers = Array.from(
provider.getAll(HtmlASTToDeltaMatcherIdentifier).values()
);
this.blockMatchers = blockMatchers;
this.deltaConverter = new HtmlDeltaConverter(
job.adapterConfigs,
inlineDeltaToHtmlAdapterMatchers,
htmlInlineToDeltaMatchers
);
}
private _htmlToAst(html: Html) {
return unified().use(rehypeParse).parse(html);
}
override async fromBlockSnapshot(
payload: FromBlockSnapshotPayload
): Promise<FromBlockSnapshotResult<string>> {
const root: Root = {
type: 'root',
children: [
{
type: 'doctype',
},
],
};
const { ast, assetsIds } = await this._traverseSnapshot(
payload.snapshot,
root,
payload.assets
);
return {
file: this._astToHtml(ast),
assetsIds,
};
}
override async fromDocSnapshot(
payload: FromDocSnapshotPayload
): Promise<FromDocSnapshotResult<string>> {
const { file, assetsIds } = await this.fromBlockSnapshot({
snapshot: payload.snapshot.blocks,
assets: payload.assets,
});
return {
file: file.replace(
'<!--BlockSuiteDocTitlePlaceholder-->',
`<h1>${payload.snapshot.meta.title}</h1>`
),
assetsIds,
};
}
override async fromSliceSnapshot(
payload: FromSliceSnapshotPayload
): Promise<FromSliceSnapshotResult<string>> {
let buffer = '';
const sliceAssetsIds: string[] = [];
for (const contentSlice of payload.snapshot.content) {
const root: Root = {
type: 'root',
children: [],
};
const { ast, assetsIds } = await this._traverseSnapshot(
contentSlice,
root,
payload.assets
);
sliceAssetsIds.push(...assetsIds);
buffer += this._astToHtml(ast);
}
const html = buffer;
return {
file: html,
assetsIds: sliceAssetsIds,
};
}
override toBlockSnapshot(
payload: ToBlockSnapshotPayload<string>
): Promise<BlockSnapshot> {
const htmlAst = this._htmlToAst(payload.file);
const blockSnapshotRoot = {
type: 'block',
id: nanoid(),
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
},
children: [],
};
return this._traverseHtml(
htmlAst,
blockSnapshotRoot as BlockSnapshot,
payload.assets
);
}
override async toDocSnapshot(
payload: ToDocSnapshotPayload<string>
): Promise<DocSnapshot> {
const htmlAst = this._htmlToAst(payload.file);
const titleAst = HastUtils.querySelector(htmlAst, 'title');
const blockSnapshotRoot = {
type: 'block',
id: nanoid(),
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
},
children: [],
};
return {
type: 'page',
meta: {
id: nanoid(),
title: HastUtils.getTextContent(titleAst, 'Untitled'),
createDate: Date.now(),
tags: [],
},
blocks: {
type: 'block',
id: nanoid(),
flavour: 'affine:page',
props: {
title: {
'$blocksuite:internal:text$': true,
delta: this.deltaConverter.astToDelta(
titleAst ?? {
type: 'text',
value: 'Untitled',
}
),
},
},
children: [
{
type: 'block',
id: nanoid(),
flavour: 'affine:surface',
props: {
elements: {},
},
children: [],
},
await this._traverseHtml(
htmlAst,
blockSnapshotRoot as BlockSnapshot,
payload.assets
),
],
},
};
}
override async toSliceSnapshot(
payload: HtmlToSliceSnapshotPayload
): Promise<SliceSnapshot | null> {
const htmlAst = this._htmlToAst(payload.file);
const blockSnapshotRoot = {
type: 'block',
id: nanoid(),
flavour: 'affine:note',
props: {
xywh: '[0,0,800,95]',
background: DEFAULT_NOTE_BACKGROUND_COLOR,
index: 'a0',
hidden: false,
displayMode: NoteDisplayMode.DocAndEdgeless,
},
children: [],
};
const contentSlice = (await this._traverseHtml(
htmlAst,
blockSnapshotRoot as BlockSnapshot,
payload.assets
)) as BlockSnapshot;
if (contentSlice.children.length === 0) {
return null;
}
return {
type: 'slice',
content: [contentSlice],
workspaceId: payload.workspaceId,
pageId: payload.pageId,
};
}
}
export const HtmlAdapterFactoryIdentifier = AdapterFactoryIdentifier('Html');
export const HtmlAdapterFactoryExtension: ExtensionType = {
setup: di => {
di.addImpl(HtmlAdapterFactoryIdentifier, provider => ({
get: job => new HtmlAdapter(job, provider),
}));
},
};
blocksuite/blocks/src/_common/adapters/html/index.ts
-5
View File
@@ -1,6 +1 @@
export { defaultBlockHtmlAdapterMatchers } from './block-matcher.js';
export {
HtmlAdapter,
HtmlAdapterFactoryExtension,
HtmlAdapterFactoryIdentifier,
} from './html.js';
blocksuite/blocks/src/_common/adapters/image.ts
+1 -2
View File
@@ -1,3 +1,4 @@
import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
import { sha } from '@blocksuite/global/utils';
@@ -19,8 +20,6 @@ import {
type ToDocSnapshotPayload,
} from '@blocksuite/store';
import { AdapterFactoryIdentifier } from './type.js';
export type Image = File[];
type ImageToSliceSnapshotPayload = {
blocksuite/blocks/src/_common/adapters/index.ts
-1
View File
@@ -1,6 +1,5 @@
export * from './attachment.js';
export * from './extension.js';
export * from './html/html.js';
export * from './image.js';
export * from './markdown/index.js';
export * from './mix-text.js';
blocksuite/blocks/src/_common/adapters/markdown/markdown.ts
+1 -1
View File
@@ -4,6 +4,7 @@ import {
} from '@blocksuite/affine-model';
import {
type AdapterContext,
AdapterFactoryIdentifier,
type BlockMarkdownAdapterMatcher,
BlockMarkdownAdapterMatcherIdentifier,
type Markdown,
@@ -36,7 +37,6 @@ import remarkParse from 'remark-parse';
import remarkStringify from 'remark-stringify';
import { unified } from 'unified';
import { AdapterFactoryIdentifier } from '../type.js';
import { defaultBlockMarkdownAdapterMatchers } from './block-matcher.js';
import { inlineDeltaToMarkdownAdapterMatchers } from './delta-converter/inline-delta.js';
import { markdownInlineToDeltaMatchers } from './delta-converter/markdown-inline.js';
blocksuite/blocks/src/_common/adapters/mix-text.ts
+1 -1
View File
@@ -2,6 +2,7 @@ import {
DEFAULT_NOTE_BACKGROUND_COLOR,
NoteDisplayMode,
} from '@blocksuite/affine-model';
import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
import type { ExtensionType } from '@blocksuite/block-std';
import type { DeltaInsert } from '@blocksuite/inline';
import {
@@ -25,7 +26,6 @@ import {
} from '@blocksuite/store';
import { MarkdownAdapter } from './markdown/index.js';
import { AdapterFactoryIdentifier } from './type.js';
export type MixText = string;
blocksuite/blocks/src/_common/adapters/notion-html/notion-html.ts
+1 -2
View File
@@ -4,6 +4,7 @@ import {
} from '@blocksuite/affine-model';
import {
type AdapterContext,
AdapterFactoryIdentifier,
type BlockNotionHtmlAdapterMatcher,
BlockNotionHtmlAdapterMatcherIdentifier,
HastUtils,
@@ -34,8 +35,6 @@ import {
import rehypeParse from 'rehype-parse';
import { unified } from 'unified';
import { AdapterFactoryIdentifier } from '../type.js';
type NotionHtmlToSliceSnapshotPayload = {
file: NotionHtml;
assets?: AssetsManager;
blocksuite/blocks/src/_common/adapters/notion-text.ts
+1 -2
View File
@@ -1,4 +1,5 @@
import { DEFAULT_NOTE_BACKGROUND_COLOR } from '@blocksuite/affine-model';
import { AdapterFactoryIdentifier } from '@blocksuite/affine-shared/adapters';
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
import type { ExtensionType } from '@blocksuite/block-std';
import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -16,8 +17,6 @@ import {
type SliceSnapshot,
} from '@blocksuite/store';
import { AdapterFactoryIdentifier } from './type.js';
type NotionEditingStyle = {
0: string;
};
blocksuite/blocks/src/_common/adapters/plain-text/plain-text.ts
+1 -1
View File
@@ -4,6 +4,7 @@ import {
} from '@blocksuite/affine-model';
import {
type AdapterContext,
AdapterFactoryIdentifier,
type BlockPlainTextAdapterMatcher,
BlockPlainTextAdapterMatcherIdentifier,
type PlainText,
@@ -31,7 +32,6 @@ import {
type ToDocSnapshotPayload,
} from '@blocksuite/store';
import { AdapterFactoryIdentifier } from '../type.js';
import { defaultBlockPlainTextAdapterMatchers } from './block-matcher.js';
import { inlineDeltaToPlainTextAdapterMatchers } from './delta-converter/inline-delta.js';
blocksuite/blocks/src/_common/adapters/type.ts
-10
View File
@@ -1,10 +0,0 @@
import { createIdentifier } from '@blocksuite/global/di';
import type { BaseAdapter, Job } from '@blocksuite/store';
export type AdapterFactory = {
// TODO(@chen): Make it return the specific adapter type
get: (job: Job) => BaseAdapter;
};
export const AdapterFactoryIdentifier =
createIdentifier<AdapterFactory>('AdapterFactory');
blocksuite/blocks/src/_common/components/embed-card/modal/embed-card-create-modal.ts
+16 -11
View File
@@ -7,12 +7,8 @@ import {
import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
import type { EditorHost } from '@blocksuite/block-std';
import { ShadowlessElement } from '@blocksuite/block-std';
import {
assertExists,
Bound,
Vec,
WithDisposable,
} from '@blocksuite/global/utils';
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
import { Bound, Vec, WithDisposable } from '@blocksuite/global/utils';
import type { BlockModel } from '@blocksuite/store';
import { html } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -70,10 +66,19 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
const edgelessRoot = getRootByEditorHost(
this.host
) as EdgelessRootBlockComponent | null;
assertExists(edgelessRoot);
if (!edgelessRoot) {
return;
}
const surface = edgelessRoot.surface;
const center = Vec.toVec(surface.renderer.viewport.center);
const gfx = this.host.std.get(GfxControllerIdentifier);
const viewport = gfx.viewport;
const surfaceModel = gfx.surface;
if (!surfaceModel) {
return;
}
const center = Vec.toVec(viewport.center);
edgelessRoot.service.addBlock(
flavour,
{
@@ -85,10 +90,10 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
).serialize(),
style: targetStyle,
},
surface.model
surfaceModel
);
edgelessRoot.gfx.tool.setTool('default');
gfx.tool.setTool('default');
}
this.onConfirm();
this.remove();
blocksuite/blocks/src/_common/transformers/html.ts
+1 -1
View File
@@ -1,3 +1,4 @@
import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
import { Container } from '@blocksuite/global/di';
import { sha } from '@blocksuite/global/utils';
import type { Doc, DocCollection } from '@blocksuite/store';
@@ -6,7 +7,6 @@ import { extMimeMap, Job } from '@blocksuite/store';
import { defaultBlockHtmlAdapterMatchers } from '../adapters/html/block-matcher.js';
import { htmlInlineToDeltaMatchers } from '../adapters/html/delta-converter/html-inline.js';
import { inlineDeltaToHtmlAdapterMatchers } from '../adapters/html/delta-converter/inline-delta.js';
import { HtmlAdapter } from '../adapters/html/html.js';
import {
defaultImageProxyMiddleware,
docLinkBaseURLMiddleware,
blocksuite/blocks/src/code-block/clipboard/index.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
import {
type BlockComponent,
Clipboard,
@@ -5,7 +6,7 @@ import {
} from '@blocksuite/block-std';
import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
import { HtmlAdapter, PlainTextAdapter } from '../../_common/adapters/index.js';
import { PlainTextAdapter } from '../../_common/adapters/index.js';
import { pasteMiddleware } from '../../root-block/clipboard/middlewares/index.js';
export class CodeClipboardController {
blocksuite/blocks/src/index.ts
+5
View File
@@ -99,6 +99,11 @@ export {
Tooltip,
} from '@blocksuite/affine-components/toolbar';
export * from '@blocksuite/affine-model';
export {
HtmlAdapter,
HtmlAdapterFactoryExtension,
HtmlAdapterFactoryIdentifier,
} from '@blocksuite/affine-shared/adapters';
export * from '@blocksuite/affine-shared/services';
export { scrollbarStyle } from '@blocksuite/affine-shared/styles';
export {
blocksuite/blocks/src/root-block/clipboard/index.ts
+1 -1
View File
@@ -1,10 +1,10 @@
import { HtmlAdapter } from '@blocksuite/affine-shared/adapters';
import type { BlockComponent, UIEventHandler } from '@blocksuite/block-std';
import { DisposableGroup } from '@blocksuite/global/utils';
import type { BlockSnapshot, Doc } from '@blocksuite/store';
import {
AttachmentAdapter,
HtmlAdapter,
ImageAdapter,
MixTextAdapter,
NotionTextAdapter,