fix: the code block wrap state shoud be persisted in database

toeverything · May 15, 2024 · 4dd0dce · 4dd0dce
1 parent f4aabfa
commit 4dd0dce
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/blocks/src/code-block/code-block.ts b/packages/blocks/src/code-block/code-block.ts
@@ -48,9 +48,6 @@ import { getHighLighter } from './utils/high-lighter.js';
 export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
   static override styles = codeBlockStyles;
 
-  @state()
-  private _wrap = false;
-
   @query('.lang-button')
   private _langButton!: HTMLButtonElement;
 
@@ -172,14 +169,13 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
     }
 
     return {
-      template: ({ updatePortal }) =>
+      template: () =>
         CodeOptionTemplate({
           anchor: this,
           model: this.model,
-          wrap: this._wrap,
-          onClickWrap: () => {
-            this._wrap = !this._wrap;
-            updatePortal();
+          wrap: this.model.wrap,
+          toggleWrap: () => {
+            this.setWrap(!this.model.wrap);
           },
           abortController,
         }),
@@ -429,6 +425,10 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
     });
   }
 
+  setWrap(wrap: boolean) {
+    this.doc.updateBlock(this.model, { wrap });
+  }
+
   private _onClickLangBtn() {
     if (this.readonly) return;
     if (this._langListAbortController) return;
@@ -477,7 +477,9 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
       this.querySelector<HTMLElement>('#line-numbers');
     assertExists(lineNumbersContainer);
 
-    const next = this._wrap ? generateLineNumberRender() : lineNumberRender;
+    const next = this.model.wrap
+      ? generateLineNumberRender()
+      : lineNumberRender;
 
     render(
       repeat(Array.from(this.querySelectorAll('v-line')), next),
@@ -491,7 +493,7 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
         ${ref(this._whenHover.setReference)}
         class=${classMap({
           'affine-code-block-container': true,
-          wrap: this._wrap,
+          wrap: this.model.wrap,
         })}
       >
         ${this._curLanguageButtonTemplate()}
@@ -507,7 +509,7 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
             .inlineRangeProvider=${this._inlineRangeProvider}
             .enableClipboard=${false}
             .enableUndoRedo=${false}
-            .wrapText=${this._wrap}
+            .wrapText=${this.model.wrap}
             .verticalScrollContainer=${getViewportElement(this.host)}
           >
           </rich-text>

diff --git a/packages/blocks/src/code-block/code-model.ts b/packages/blocks/src/code-block/code-model.ts
@@ -8,6 +8,7 @@ export const CodeBlockSchema = defineBlockSchema({
   props: internal => ({
     text: internal.Text(),
     language: FALLBACK_LANG,
+    wrap: false,
   }),
   metadata: {
     version: 1,

diff --git a/packages/blocks/src/code-block/components/code-option.ts b/packages/blocks/src/code-block/components/code-option.ts
@@ -15,15 +15,15 @@ export function CodeOptionTemplate({
   ref: containerRef,
   model,
   wrap,
-  onClickWrap,
+  toggleWrap,
   anchor,
 }: {
   ref?: RefOrCallback;
   anchor: CodeBlockComponent;
   model: BlockModel;
   wrap: boolean;
   abortController: AbortController;
-  onClickWrap: () => void;
+  toggleWrap: () => void;
 }) {
   const page = model.doc;
   const readonly = page.readonly;
@@ -75,7 +75,7 @@ export function CodeOptionTemplate({
         size="32px"
         data-testid="wrap-button"
         ?active=${wrap}
-        @click=${onClickWrap}
+        @click=${toggleWrap}
       >
         ${wrap ? CancelWrapIcon : WrapIcon}
         <affine-tooltip tip-position="right" .offset=${12}