mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-04 19:15:33 +08:00
2ca4973167
Fixes #13555 https://github.com/user-attachments/assets/12e55c21-080c-4c69-9780-893ccad25b45 ## Summary - make the code block More popup reactive to `wrap` and `lineNumber` prop updates - read the latest toggle state at click time so same-menu double toggles do not reuse stale closures - add e2e coverage for wrap and line number toggling twice without closing the More menu ## Bug Reason - the code block More popup was rendered as a static portal, so it stayed open without re-rendering after the first toggle - the `Cancel line number` and `Wrap` menu actions captured render-time state in their click handlers - after the first click updated the model, a second click in the same open menu reused stale state and wrote the same value again, so nothing changed visually ## Testing - yarn workspace @affine-test/blocksuite test e2e/code/crud.spec.ts <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Menu toggles now read and update the current wrap and line-number states reliably. * **Refactor** * Replaced inline popup rendering with a dedicated more-menu component for the code toolbar. * **Style** * Prevented text selection on menu action elements for smoother interaction. * **Tests** * Added e2e tests for wrap and line-number toggle flows. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { CodeBlockComponent } from './code-block';
|
|
import {
|
|
AFFINE_CODE_TOOLBAR_WIDGET,
|
|
AffineCodeToolbarWidget,
|
|
} from './code-toolbar';
|
|
import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
|
|
import { LanguageListButton } from './code-toolbar/components/lang-button';
|
|
import { AffineCodeMoreMenu } from './code-toolbar/components/more-menu';
|
|
import { PreviewButton } from './code-toolbar/components/preview-button';
|
|
import { AffineCodeUnit } from './highlight/affine-code-unit';
|
|
|
|
export function effects() {
|
|
customElements.define('language-list-button', LanguageListButton);
|
|
customElements.define('affine-code-toolbar', AffineCodeToolbar);
|
|
customElements.define('affine-code-more-menu', AffineCodeMoreMenu);
|
|
customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
|
|
customElements.define('affine-code-unit', AffineCodeUnit);
|
|
customElements.define('affine-code', CodeBlockComponent);
|
|
customElements.define('preview-button', PreviewButton);
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'language-list-button': LanguageListButton;
|
|
'affine-code-toolbar': AffineCodeToolbar;
|
|
'affine-code-more-menu': AffineCodeMoreMenu;
|
|
'preview-button': PreviewButton;
|
|
[AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
|
|
}
|
|
}
|