fix(editor): inline editor should not change event source editable (#11331)

Close [BS-2988: database block会把顶层content editable设成false](https://linear.app/affine-design/issue/BS-2988/database-block会把顶层content-editable设成false)
This commit is contained in:
Flrande
2025-04-01 05:24:27 +00:00
parent cbe372c6ec
commit 6ed9c33c33
12 changed files with 41 additions and 22 deletions
@@ -2,7 +2,7 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
import { createLitPortal } from '@blocksuite/affine-components/portal';
import { DefaultInlineManagerExtension } from '@blocksuite/affine-inline-preset';
import { type CalloutBlockModel } from '@blocksuite/affine-model';
import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
import {
DocModeProvider,
ThemeProvider,
@@ -95,7 +95,9 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -1,7 +1,10 @@
import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
import type { CodeBlockModel } from '@blocksuite/affine-model';
import { focusTextModel, type RichText } from '@blocksuite/affine-rich-text';
import { BRACKET_PAIRS, NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
import {
BRACKET_PAIRS,
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
} from '@blocksuite/affine-shared/consts';
import {
DocModeProvider,
NotificationProvider,
@@ -79,7 +82,9 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -12,7 +12,7 @@ import {
import { CopyIcon, DeleteIcon } from '@blocksuite/affine-components/icons';
import { PeekViewProvider } from '@blocksuite/affine-components/peek';
import { toast } from '@blocksuite/affine-components/toast';
import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
import {
DocModeProvider,
NotificationProvider,
@@ -225,7 +225,9 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -8,7 +8,7 @@ import { DropIndicator } from '@blocksuite/affine-components/drop-indicator';
import { PeekViewProvider } from '@blocksuite/affine-components/peek';
import { toast } from '@blocksuite/affine-components/toast';
import type { DatabaseBlockModel } from '@blocksuite/affine-model';
import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
import {
DocModeProvider,
NotificationProvider,
@@ -354,7 +354,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -339,6 +339,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
minWidth: !hasMaxWidth ? '220px' : undefined,
};
this.contentEditable = String(editing && !this.doc.readonly$.value);
return html`
<div
class="edgeless-text-block-container"
@@ -350,7 +352,6 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
pointerEvents: editing ? 'auto' : 'none',
userSelect: editing ? 'auto' : 'none',
})}
contenteditable=${editing}
>
${this.renderPageContent()}
</div>
@@ -8,7 +8,7 @@ import type { ListBlockModel } from '@blocksuite/affine-model';
import type { RichText } from '@blocksuite/affine-rich-text';
import {
BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
NOTE_SELECTOR,
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
} from '@blocksuite/affine-shared/consts';
import { DocModeProvider } from '@blocksuite/affine-shared/services';
import { getViewportElement } from '@blocksuite/affine-shared/utils';
@@ -84,7 +84,9 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -268,7 +268,10 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
<edgeless-page-block-title
.note=${this.model}
></edgeless-page-block-title>
<div class="edgeless-note-page-content">
<div
contenteditable=${String(!this.doc.readonly$.value)}
class="edgeless-note-page-content"
>
${this.renderPageContent()}
</div>
</div>
@@ -5,7 +5,7 @@ import type { ParagraphBlockModel } from '@blocksuite/affine-model';
import type { RichText } from '@blocksuite/affine-rich-text';
import {
BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
NOTE_SELECTOR,
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
} from '@blocksuite/affine-shared/consts';
import { DocModeProvider } from '@blocksuite/affine-shared/services';
import {
@@ -96,7 +96,9 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
@@ -415,6 +415,8 @@ export class PageRootBlockComponent extends BlockComponent<
return !(isNote && displayOnEdgeless);
});
this.contentEditable = String(!this.doc.readonly$.value);
return html`
<div class="affine-page-root-block-container">${children} ${widgets}</div>
`;
@@ -1,6 +1,6 @@
import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
import type { TableBlockModel } from '@blocksuite/affine-model';
import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
import { DocModeProvider } from '@blocksuite/affine-shared/services';
import { VirtualPaddingController } from '@blocksuite/affine-shared/utils';
import { IS_MOBILE } from '@blocksuite/global/env';
@@ -42,7 +42,9 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(NOTE_SELECTOR);
return this.closest<BlockComponent>(
EDGELESS_TOP_CONTENTEDITABLE_SELECTOR
);
}
return this.rootComponent;
}
+2 -2
View File
@@ -1,2 +1,2 @@
export const NOTE_SELECTOR =
'affine-note, affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';
export const EDGELESS_TOP_CONTENTEDITABLE_SELECTOR =
'affine-edgeless-note .edgeless-note-page-content, affine-edgeless-text';
@@ -275,10 +275,6 @@ export class InlineEditor<
this.rootElement.contentEditable = value;
}
if (this.eventSource && this.eventSource.contentEditable !== value) {
this.eventSource.contentEditable = value;
}
this._isReadonly = isReadonly;
}