luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: latex editor max-height (#12520)

Browse Source 
Closes: BS-3538

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Improved click handling for LaTeX blocks, making interactions more consistent and maintainable.
  - Updated LaTeX editor menu layout to enhance vertical scrolling, ensuring better usability with large content.

- **Style**
  - Added a maximum height and vertical scrolling to the LaTeX editor for improved user experience with lengthy formulas.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Saul-Mirone
2025-05-26 06:14:17 +00:00
parent 7aacfee789
commit 8ba4584b88
2 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
blocksuite/affine/blocks/latex/src/latex-block.ts
View File

@@ -74,19 +74,16 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
} }
}) })
); );
}
this.disposables.addFromEvent(this, 'click', () => { private _handleClick() {
// should not open editor or select block in readonly mode if (this.store.readonly) return;
if (this.store.readonly) {
return;
}
if (this.isBlockSelected) { if (this.isBlockSelected) {
this.toggleEditor(); this.toggleEditor();
} else { } else {
this.selectBlock(); this.selectBlock();
} }
});
} }
removeEditor(portal: HTMLDivElement) { removeEditor(portal: HTMLDivElement) {
@@ -95,7 +92,11 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
override renderBlock() { override renderBlock() {
return html` return html`
<div contenteditable="false" class="latex-block-container"> <div
contenteditable="false"
class="latex-block-container"
@click=${this._handleClick}
>
<div class="katex"></div> <div class="katex"></div>
</div> </div>
`; `;

20
blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts
View File

@@ -57,6 +57,9 @@ export class LatexEditorMenu extends SignalWatcher(
font-family: ${unsafeCSSVar('fontCodeFamily')}; font-family: ${unsafeCSSVar('fontCodeFamily')};
border: 1px solid transparent; border: 1px solid transparent;
max-height: 400px;
overflow-y: auto;
} }
.latex-editor:focus-within { .latex-editor:focus-within {
border: 1px solid ${unsafeCSSVar('blue700')}; border: 1px solid ${unsafeCSSVar('blue700')};
@@ -97,6 +100,10 @@ export class LatexEditorMenu extends SignalWatcher(
return this.querySelector<RichText>('rich-text'); return this.querySelector<RichText>('rich-text');
} }
private readonly _getVerticalScrollContainer = () => {
return this.querySelector('.latex-editor');
};
private _updateHighlightTokens(text: string) { private _updateHighlightTokens(text: string) {
const editorTheme = this.std.get(ThemeProvider).theme; const editorTheme = this.std.get(ThemeProvider).theme;
const theme = editorTheme === ColorScheme.Dark ? 'dark-plus' : 'light-plus'; const theme = editorTheme === ColorScheme.Dark ? 'dark-plus' : 'light-plus';
@@ -171,11 +178,14 @@ export class LatexEditorMenu extends SignalWatcher(
override render() { override render() {
return html`<div class="latex-editor-container"> return html`<div class="latex-editor-container">
<div class="latex-editor"> <div class="latex-editor">
<rich-text <div class="latex-editor-content">
.yText=${this.yText} <rich-text
.attributesSchema=${this.inlineManager.getSchema()} .yText=${this.yText}
.attributeRenderer=${this.inlineManager.getRenderer()} .attributesSchema=${this.inlineManager.getSchema()}
></rich-text> .attributeRenderer=${this.inlineManager.getRenderer()}
.verticalScrollContainerGetter=${this._getVerticalScrollContainer}
></rich-text>
</div>
</div> </div>
<div class="latex-editor-confirm"> <div class="latex-editor-confirm">
<span @click=${() => this.abortController.abort()} <span @click=${() => this.abortController.abort()}