fix(editor): repeat trigger keys of at-menu was added (#11631)

Close [BS-2716](https://linear.app/affine-design/issue/BS-2716/移动端通过toolpanel唤起的at-menu,出现两个)
This commit is contained in:
L-Sun
2025-04-13 06:46:37 +00:00
parent 26d2ed8afb
commit 076c5ba044
6 changed files with 61 additions and 71 deletions

View File

@@ -1,8 +1,5 @@
import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
import {
getInlineEditorByModel,
insertContent,
} from '@blocksuite/affine-rich-text';
import { insertContent } from '@blocksuite/affine-rich-text';
import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
import { createDefaultDoc } from '@blocksuite/affine-shared/utils';
import {
@@ -68,22 +65,7 @@ const linkedDocSlashMenuConfig: SlashMenuConfig = {
if (!linkedDocWidget) return;
// TODO(@L-Sun): make linked-doc-widget as extension
// @ts-expect-error same as above
const triggerKey = linkedDocWidget.config.triggerKeys[0];
insertContent(std, model, triggerKey);
const inlineEditor = getInlineEditorByModel(std, model);
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 });
}
);
}
linkedDocWidget.show({ addTriggerKey: true });
},
},
],

View File

@@ -34,10 +34,7 @@ import {
toggleUnderline,
} from '@blocksuite/affine-inline-preset';
import type { FrameBlockModel } from '@blocksuite/affine-model';
import {
getInlineEditorByModel,
insertContent,
} from '@blocksuite/affine-rich-text';
import { insertContent } from '@blocksuite/affine-rich-text';
import {
copySelectedModelsCommand,
deleteSelectedModelsCommand,
@@ -348,35 +345,11 @@ const pageToolGroup: KeyboardToolPanelGroup = {
);
if (!linkedDocWidget) return;
assertType<AffineLinkedDocWidget>(linkedDocWidget);
const triggerKey = linkedDocWidget.config.triggerKeys[0];
std.command
.chain()
.pipe(getSelectedModelsCommand)
.pipe(ctx => {
const { selectedModels } = ctx;
if (!selectedModels?.length) return;
const currentModel = selectedModels[0];
insertContent(std, currentModel, triggerKey);
const inlineEditor = getInlineEditorByModel(std, currentModel);
// Wait for range to be updated
if (inlineEditor) {
const subscription = inlineEditor.slots.inlineRangeSync.subscribe(
() => {
subscription.unsubscribe();
linkedDocWidget.show({
mode: 'mobile',
addTriggerKey: true,
});
closeToolPanel();
}
);
}
})
.run();
linkedDocWidget.show({
mode: 'mobile',
addTriggerKey: true,
});
closeToolPanel();
},
},
],

View File

@@ -112,6 +112,7 @@ export type LinkedDocContext = {
std: BlockStdScope;
inlineEditor: AffineInlineEditor;
startRange: InlineRange;
startNativeRange: Range;
triggerKey: string;
config: LinkedWidgetConfig;
close: () => void;

View File

@@ -7,7 +7,6 @@ import {
import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
import {
createKeydownObserver,
getCurrentNativeRange,
getPopperPosition,
getViewportElement,
} from '@blocksuite/affine-shared/utils';
@@ -160,11 +159,15 @@ export class LinkedDocPopover extends SignalWatcher(
// init
this._updateLinkedDocGroup().catch(console.error);
this._disposables.addFromEvent(this, 'mousedown', e => {
this._disposables.addFromEvent(this, 'pointerdown', e => {
// Prevent input from losing focus
e.preventDefault();
});
this._disposables.addFromEvent(window, 'mousedown', e => {
this._disposables.addFromEvent(this, 'mousedown', e => {
// Prevent input from losing focus in electron
e.preventDefault();
});
this._disposables.addFromEvent(window, 'pointerdown', e => {
if (e.target === this) return;
// We don't clear the query when clicking outside the popover
this.context.close();
@@ -338,11 +341,8 @@ export class LinkedDocPopover extends SignalWatcher(
override willUpdate() {
if (!this.hasUpdated) {
const curRange = getCurrentNativeRange();
if (!curRange) return;
const updatePosition = throttle(() => {
this._position = getPopperPosition(this, curRange);
this._position = getPopperPosition(this, this.context.startNativeRange);
}, 10);
this.disposables.addFromEvent(window, 'resize', updatePosition);

View File

@@ -43,6 +43,19 @@ export class AffineLinkedDocWidget extends WidgetComponent<RootBlockModel> {
private readonly _mode$ = signal<'desktop' | 'mobile' | 'none'>('none');
private _addTriggerKey(inlineEditor: InlineEditor, triggerKey: string) {
const inlineRange = inlineEditor.getInlineRange();
if (!inlineRange) return;
inlineEditor.insertText(
{ index: inlineRange.index, length: 0 },
triggerKey
);
inlineEditor.setInlineRange({
index: inlineRange.index + triggerKey.length,
length: 0,
});
}
private _updateInputRects() {
if (!this._context) return;
const { inlineEditor, startRange, triggerKey } = this._context;
@@ -258,27 +271,30 @@ export class AffineLinkedDocWidget extends WidgetComponent<RootBlockModel> {
inlineEditor = props.inlineEditor;
}
const inlineRange = inlineEditor.getInlineRange();
if (!inlineRange) return;
if (addTriggerKey) {
inlineEditor.insertText(
{ index: inlineRange.index, length: 0 },
primaryTriggerKey
);
inlineEditor.setInlineRange({
index: inlineRange.index + primaryTriggerKey.length,
length: 0,
this._addTriggerKey(inlineEditor, primaryTriggerKey);
// we need to wait the range sync to get the correct startNativeRange
const subscription = inlineEditor.slots.inlineRangeSync.subscribe(() => {
this.show({ ...props, addTriggerKey: false });
subscription.unsubscribe();
});
return;
}
const startRange = inlineEditor.getInlineRange();
if (!startRange) return;
const startNativeRange = inlineEditor.getNativeRange();
if (!startNativeRange) return;
const disposable = inlineEditor.slots.renderComplete.subscribe(() => {
this._updateInputRects();
});
this._context = {
std: this.std,
inlineEditor,
startRange: inlineRange,
startRange,
startNativeRange,
triggerKey: primaryTriggerKey,
config: this.config,
close: () => {