feat(editor): replace slot with rxjs subject (#10768)

This commit is contained in:
Mirone
2025-03-12 11:29:24 +09:00
committed by GitHub
parent 19f978d9aa
commit cd63e0ed8b
302 changed files with 1405 additions and 1251 deletions

View File

@@ -32,6 +32,7 @@
"lit": "^3.2.0",
"lodash-es": "^4.17.21",
"minimatch": "^10.0.1",
"rxjs": "^7.8.1",
"yjs": "^13.6.21",
"zod": "^3.23.8"
},

View File

@@ -341,7 +341,7 @@ export function notifyDocCreated(std: BlockStdScope, doc: Store) {
const clear = () => {
doc.history.off('stack-item-added', addHandler);
doc.history.off('stack-item-popped', popHandler);
disposable.dispose();
disposable.unsubscribe();
};
const closeNotify = () => {
abortController.abort();
@@ -353,7 +353,7 @@ export function notifyDocCreated(std: BlockStdScope, doc: Store) {
const popHandler = doc.history.on('stack-item-popped', closeNotify);
const disposable = std
.get(EditorLifeCycleExtension)
.slots.unmounted.on(closeNotify);
.slots.unmounted.subscribe(closeNotify);
notification.notify({
title: 'Linked doc created',

View File

@@ -54,14 +54,14 @@ export function toEdgelessEmbedBlock<
super.connectedCallback();
this._disposables.add(
this.edgelessSlots.elementResizeStart.on(() => {
this.edgelessSlots.elementResizeStart.subscribe(() => {
this._isResizing = true;
this._showOverlay = true;
})
);
this._disposables.add(
this.edgelessSlots.elementResizeEnd.on(() => {
this.edgelessSlots.elementResizeEnd.subscribe(() => {
this._isResizing = false;
this._showOverlay =
this._isResizing || this._isDragging || !this.selected$.peek();

View File

@@ -62,7 +62,7 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
}
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
if (key === 'url') {
this.refreshData();
}

View File

@@ -102,7 +102,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
});
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
if (key === 'url') {
this.refreshData();
}

View File

@@ -73,12 +73,17 @@ const linkedDocSlashMenuConfig: SlashMenuConfig = {
insertContent(std.host, model, triggerKey);
const inlineEditor = getInlineEditorByModel(std.host, model);
// Wait for range to be updated
inlineEditor?.slots.inlineRangeSync.once(() => {
// TODO(@L-Sun): make linked-doc-widget as extension
// @ts-expect-error same as above
linkedDocWidget.show({ addTriggerKey: true });
});
if (inlineEditor) {
// Wait for range to be updated
const subscription = inlineEditor.slots.inlineRangeSync.subscribe(
() => {
// TODO(@L-Sun): make linked-doc-widget as extension
subscription.unsubscribe();
// @ts-expect-error same as above
linkedDocWidget.show({ addTriggerKey: true });
}
);
}
},
},
],

View File

@@ -87,7 +87,8 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
if (!this.isError && !linkedDoc.root) {
await new Promise<void>(resolve => {
linkedDoc.slots.rootAdded.once(() => {
const subscription = linkedDoc.slots.rootAdded.subscribe(() => {
subscription.unsubscribe();
resolve();
});
});
@@ -203,7 +204,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
openMode?: OpenDocMode;
event?: MouseEvent;
} = {}) => {
this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit({
this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.next({
...this.referenceInfo$.peek(),
openMode,
event,
@@ -285,7 +286,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
const linkedDoc = this.linkedDoc;
if (linkedDoc) {
this.disposables.add(
linkedDoc.workspace.slots.docListUpdated.on(() => {
linkedDoc.workspace.slots.docListUpdated.subscribe(() => {
this._load().catch(e => {
console.error(e);
this.isError = true;
@@ -295,7 +296,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
// Should throttle the blockUpdated event to avoid too many re-renders
// Because the blockUpdated event is triggered too frequently at some cases
this.disposables.add(
linkedDoc.slots.blockUpdated.on(
linkedDoc.slots.blockUpdated.subscribe(
throttle(payload => {
if (
payload.type === 'update' &&
@@ -318,7 +319,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
this._setDocUpdatedAt();
this.disposables.add(
this.doc.workspace.slots.docListUpdated.on(() => {
this.doc.workspace.slots.docListUpdated.subscribe(() => {
this._setDocUpdatedAt();
})
);
@@ -337,7 +338,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
}
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
if (key === 'style') {
this._cardStyle = this.model.style;
}

View File

@@ -82,7 +82,7 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
}
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
this.requestUpdate();
if (key === 'url') {
this.refreshData();

View File

@@ -99,20 +99,21 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
if (syncedDoc.root) {
renderLinkedDocInCard(this);
} else {
syncedDoc.slots.rootAdded.once(() => {
const subscription = syncedDoc.slots.rootAdded.subscribe(() => {
subscription.unsubscribe();
renderLinkedDocInCard(this);
});
}
this.disposables.add(
syncedDoc.workspace.slots.docListUpdated.on(() => {
syncedDoc.workspace.slots.docListUpdated.subscribe(() => {
renderLinkedDocInCard(this);
})
);
// Should throttle the blockUpdated event to avoid too many re-renders
// Because the blockUpdated event is triggered too frequently at some cases
this.disposables.add(
syncedDoc.slots.blockUpdated.on(
syncedDoc.slots.blockUpdated.subscribe(
throttle(payload => {
if (this._dragging) {
return;

View File

@@ -129,7 +129,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
override mounted(): void {
const { view } = this.std;
view.viewUpdated.on(payload => {
view.viewUpdated.subscribe(payload => {
if (
payload.type !== 'block' ||
payload.view.model.flavour !== 'affine:embed-synced-doc'
@@ -355,7 +355,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
this.std
.getOptional(RefNodeSlotsProvider)
?.docLinkClicked.emit({ ...event, pageId, host: this.host });
?.docLinkClicked.next({ ...event, pageId, host: this.host });
};
refreshData = () => {
@@ -464,7 +464,10 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
if (!this._error && !syncedDoc.root) {
await new Promise<void>(resolve => {
syncedDoc.slots.rootAdded.once(() => resolve());
const subscription = syncedDoc.slots.rootAdded.subscribe(() => {
subscription.unsubscribe();
resolve();
});
});
}
@@ -504,7 +507,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
this.contentEditable = 'false';
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
if (key === 'pageId' || key === 'style') {
this._load().catch(e => {
console.error(e);
@@ -516,7 +519,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
this._setDocUpdatedAt();
this.disposables.add(
this.doc.workspace.slots.docListUpdated.on(() => {
this.doc.workspace.slots.docListUpdated.subscribe(() => {
this._setDocUpdatedAt();
})
);
@@ -535,7 +538,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
this.syncedDoc &&
this.disposables.add(
this.syncedDoc.slots.blockUpdated.on(() => {
this.syncedDoc.slots.blockUpdated.subscribe(() => {
this._isEmptySyncedDoc = isEmptyDoc(this.syncedDoc, this.editorMode);
})
);

View File

@@ -85,7 +85,7 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
}
this.disposables.add(
this.model.propsUpdated.on(({ key }) => {
this.model.propsUpdated.subscribe(({ key }) => {
this.requestUpdate();
if (key === 'url') {
this.refreshData();