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

toeverything · May 15, 2024 · 92221a1 · 92221a1
1 parent f4aabfa
commit 92221a1
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 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;
 
@@ -176,9 +173,9 @@ export class CodeBlockComponent extends BlockElement<CodeBlockModel> {
         CodeOptionTemplate({
           anchor: this,
           model: this.model,
-          wrap: this._wrap,
-          onClickWrap: () => {
-            this._wrap = !this._wrap;
+          wrap: this.model.wrap,
+          toggleWrap: () => {
+            this.setWrap(!this.model.wrap);
             updatePortal();
           },
           abortController,
@@ -429,6 +426,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 +478,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 +494,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 +510,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}

diff --git a/tests/code.spec.ts b/tests/code.spec.ts
@@ -162,6 +162,7 @@ test('use markdown syntax can create code block', async ({ page }) => {
 >
   <affine:code
     prop:language="Plain Text"
+    prop:wrap={false}
   />
   <affine:paragraph
     prop:text="aaa"
@@ -277,6 +278,7 @@ test('change code language can work', async ({ page }) => {
     /*xml*/ `
 <affine:code
   prop:language="rust"
+  prop:wrap={false}
 />`,
     codeBlockId
   );
@@ -286,6 +288,7 @@ test('change code language can work', async ({ page }) => {
     /*xml*/ `
 <affine:code
   prop:language="Plain Text"
+  prop:wrap={false}
 />`,
     codeBlockId
   );
@@ -418,10 +421,12 @@ test.skip('use keyboard copy inside code block copy', async ({ page }) => {
     <affine:code
       prop:language="Plain Text"
       prop:text="use"
+      prop:wrap={false}
     />
     <affine:code
       prop:language="Plain Text"
       prop:text="use"
+      prop:wrap={false}
     />
   </affine:note>
 </affine:page>`
@@ -473,10 +478,12 @@ test.fixme(
     <affine:code
       prop:language="javascript"
       prop:text="use"
+      prop:wrap={false}
     />
     <affine:code
       prop:language="javascript"
       prop:text="use"
+      prop:wrap={false}
     />
   </affine:note>
 </affine:page>`

diff --git a/tests/format-bar.spec.ts b/tests/format-bar.spec.ts
@@ -1318,6 +1318,7 @@ test('should format quick bar show after convert to code block', async ({
   <affine:code
     prop:language="Plain Text"
     prop:text="123\n456\n789"
+    prop:wrap={false}
   />
 </affine:note>`,
     noteId