Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-27 02:42:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): reactive heading icon (#9729)

Browse Source 
Close [BS-2407](https://linear.app/affine-design/issue/BS-2407/[bug]-edgeless-里选中-title-后更改，hint-没有改变)
This commit is contained in:
L-Sun
2025-01-16 08:32:15 +00:00
parent 509cdfd7bf
commit 969ac30874
5 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
blocksuite/affine/block-paragraph/src/heading-icon.ts
View File

@@ -8,7 +8,7 @@ import {
} from '@blocksuite/affine-components/icons';
import type { ParagraphBlockModel } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std';
import { WithDisposable } from '@blocksuite/global/utils';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
import { cssVarV2 } from '@toeverything/theme/v2';
import { css, html, nothing, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
@@ -32,7 +32,9 @@ function HeadingIcon(i: number) {
}
}
export class ParagraphHeadingIcon extends WithDisposable(ShadowlessElement) {
export class ParagraphHeadingIcon extends SignalWatcher(
WithDisposable(ShadowlessElement)
) {
static override styles = css`
affine-paragraph-heading-icon .heading-icon {
display: flex;
@@ -65,12 +67,14 @@ export class ParagraphHeadingIcon extends WithDisposable(ShadowlessElement) {
`;
override render() {
const type = this.model.type;
const type = this.model.type$.value;
if (!type.startsWith('h')) return nothing;
const i = parseInt(type.slice(1));
return html`<div class="heading-icon">${HeadingIcon(i)}</div>`;
return html`<div class="heading-icon" data-testid="heading-icon-${i}">
${HeadingIcon(i)}
</div>`;
}
@property({ attribute: false })

9
blocksuite/affine/block-paragraph/src/paragraph-block.ts
View File

@@ -157,7 +157,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
this._readonlyCollapsed = collapsed;
// reset text selection when selected block is collapsed
if (this.model.type.startsWith('h') && collapsed) {
if (this.model.type$.value.startsWith('h') && collapsed) {
const collapsedSiblings = this.collapsedSiblings;
const textSelection = this.host.selection.find(TextSelection);
@@ -177,7 +177,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
// # 456
//
// we need to update collapsed state of 123 when 456 converted to text
let beforeType = this.model.type;
let beforeType = this.model.type$.peek();
this.disposables.add(
effect(() => {
const type = this.model.type$.value;
@@ -211,7 +211,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
const collapsedSiblings = this.collapsedSiblings;
let style = html``;
if (this.model.type.startsWith('h') && collapsed) {
if (this.model.type$.value.startsWith('h') && collapsed) {
style = html`
<style>
${collapsedSiblings.map(sibling =>
@@ -245,7 +245,8 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<
[TOGGLE_BUTTON_PARENT_CLASS]: true,
})}
>
${this.model.type.startsWith('h') && collapsedSiblings.length > 0
${this.model.type$.value.startsWith('h') &&
collapsedSiblings.length > 0
? html`
<affine-paragraph-heading-icon
.model=${this.model}