feat(editor): unify block props api (#10888)

Closes: [BS-2707](https://linear.app/affine-design/issue/BS-2707/统一使用props获取和更新block-prop)
This commit is contained in:
Saul-Mirone
2025-03-16 05:48:34 +00:00
parent 8f9e5bf0aa
commit 26285f7dcb
193 changed files with 1019 additions and 891 deletions

View File

@@ -47,7 +47,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
highlightTokens$: Signal<ThemedToken[][]> = signal([]);
languageName$: Signal<string> = computed(() => {
const lang = this.model.language$.value;
const lang = this.model.props.language$.value;
if (lang === null) {
return 'Plain Text';
}
@@ -83,7 +83,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
}
private _updateHighlightTokens() {
const modelLang = this.model.language$.value;
const modelLang = this.model.props.language$.value;
if (modelLang === null) {
this.highlightTokens$.value = [];
return;
@@ -97,7 +97,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
);
if (matchedInfo) {
this.model.language$.value = matchedInfo.id;
this.model.props.language$.value = matchedInfo.id;
const langImport = matchedInfo.import;
const lang = matchedInfo.id;
@@ -108,8 +108,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
return;
}
noop(this.model.text.deltas$.value);
const code = this.model.text.toString();
noop(this.model.props.text.deltas$.value);
const code = this.model.props.text.toString();
const loadedLanguages = highlighter.getLoadedLanguages();
if (!loadedLanguages.includes(lang)) {
@@ -131,7 +131,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
} else {
this.highlightTokens$.value = [];
// clear language if not found
this.model.language$.value = null;
this.model.props.language$.value = null;
}
}
@@ -339,7 +339,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
const inlineEditor = this.inlineEditor;
const inlineRange = inlineEditor?.getInlineRange();
if (!inlineRange || !inlineEditor) return;
const isEnd = model.text.length === inlineRange.index;
const isEnd = model.props.text.length === inlineRange.index;
if (!isEnd) return;
const parent = this.doc.getParent(model);
if (!parent) return;
@@ -389,11 +389,11 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
class=${classMap({
'affine-code-block-container': true,
mobile: IS_MOBILE,
wrap: this.model.wrap,
wrap: this.model.props.wrap,
})}
>
<rich-text
.yText=${this.model.text.yText}
.yText=${this.model.props.text.yText}
.inlineEventSource=${this.topContenteditableElement ?? nothing}
.undoManager=${this.doc.history}
.attributesSchema=${this.inlineManager.getSchema()}
@@ -402,7 +402,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
.inlineRangeProvider=${this._inlineRangeProvider}
.enableClipboard=${false}
.enableUndoRedo=${false}
.wrapText=${this.model.wrap}
.wrapText=${this.model.props.wrap}
.verticalScrollContainerGetter=${() => getViewportElement(this.host)}
.vLineRenderer=${showLineNumbers
? (vLine: VLine) => {

View File

@@ -76,10 +76,10 @@ export class LanguageListButton extends WithDisposable(
sortedBundledLanguages.unshift(item);
}
this.blockComponent.doc.transact(() => {
this.blockComponent.model.language$.value = item.name;
this.blockComponent.model.props.language$.value = item.name;
});
},
active: item => item.name === this.blockComponent.model.language,
active: item => item.name === this.blockComponent.model.props.language,
items: this._sortedBundledLanguages,
};

View File

@@ -110,7 +110,7 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
{
type: 'wrap',
generate: ({ blockComponent, close }) => {
const wrapped = blockComponent.model.wrap;
const wrapped = blockComponent.model.props.wrap;
const label = wrapped ? 'Cancel wrap' : 'Wrap';
const icon = wrapped ? CancelWrapIcon : WrapIcon;

View File

@@ -1,14 +1,14 @@
import type { CodeBlockModel } from '@blocksuite/affine-model';
export const duplicateCodeBlock = (model: CodeBlockModel) => {
const keys = model.keys as (keyof typeof model)[];
const values = keys.map(key => model[key]);
const keys = model.keys as (keyof (typeof model)['props'])[];
const values = keys.map(key => model.props[key]);
const blockProps = Object.fromEntries(keys.map((key, i) => [key, values[i]]));
const { text: _text, ...duplicateProps } = blockProps;
const newProps = {
flavour: model.flavour,
text: model.text.clone(),
text: model.props.text.clone(),
...duplicateProps,
};