Backport PR #16261: Fix changing font size in text editor (#16285)

Co-authored-by: FoSuCloud <49218295+FoSuCloud@users.noreply.github.com>
jupyterlab · May 7, 2024 · 94e8eaf · 94e8eaf
1 parent c3c7a02
commit 94e8eaf
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/galata/test/jupyterlab/texteditor.test.ts b/galata/test/jupyterlab/texteditor.test.ts
@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { expect, test } from '@jupyterlab/galata';
+import { expect, IJupyterLabPageFixture, test } from '@jupyterlab/galata';
 
 const DEFAULT_NAME = 'untitled.txt';
 
@@ -103,4 +103,42 @@ ut elit.`
     const tabHandle = await page.activity.getPanel(DEFAULT_NAME);
     expect(await tabHandle.screenshot()).toMatchSnapshot(imageName);
   });
+
+  test.describe('Changing a text editor font-size', () => {
+    const getFontSize = async (page: IJupyterLabPageFixture) => {
+      const wrapperElement = page.locator(
+        '.jp-MainAreaWidget .jp-FileEditor .cm-content.cm-lineWrapping'
+      );
+      const computedStyle = await wrapperElement.evaluate(el =>
+        getComputedStyle(el)
+      );
+      return parseInt(computedStyle.fontSize);
+    };
+    const createNewTextEditor = async (page: IJupyterLabPageFixture) => {
+      await page.menu.clickMenuItem('File>New>Text File');
+
+      await page.locator(`[role="main"] >> text=${DEFAULT_NAME}`).waitFor();
+      await page.type('.cm-content', 'text editor');
+    };
+    const changeFontSize = async (page: IJupyterLabPageFixture, menuOption) => {
+      await page.click('text=Settings');
+      await page.click(`.lm-Menu ul[role="menu"] >> text="${menuOption}"`);
+    };
+
+    test('Should increase a text editor font-size', async ({ page }) => {
+      await createNewTextEditor(page);
+      let fontSize = await getFontSize(page);
+      await changeFontSize(page, 'Increase Text Editor Font Size');
+
+      expect(await getFontSize(page)).toEqual(fontSize + 1);
+    });
+
+    test('Should decrease a text editor font-size', async ({ page }) => {
+      await createNewTextEditor(page);
+      let fontSize = await getFontSize(page);
+      await changeFontSize(page, 'Decrease Text Editor Font Size');
+
+      expect(await getFontSize(page)).toEqual(fontSize - 1);
+    });
+  });
 });
diff --git a/packages/codemirror/src/editor.ts b/packages/codemirror/src/editor.ts
@@ -572,6 +572,11 @@ export class CodeMirrorEditor implements CodeEditor.IEditor {
     changes: Record<string, any>
   ): void {
     configurator.reconfigureExtensions(this._editor, changes);
+    // when customStyles change and the editor is not initialized
+    if (changes['customStyles'] && !changes['fontSize']) {
+      // update the state to change the gutter height
+      this.editor.setState(this.editor.state);
+    }
   }
 
   /**

diff --git a/packages/fileeditor-extension/src/commands.ts b/packages/fileeditor-extension/src/commands.ts
@@ -257,11 +257,14 @@ export namespace Commands {
           style.getPropertyValue('--jp-code-font-size'),
           10
         );
+        if (!config.customStyles) {
+          config.customStyles = {};
+        }
         const currentSize =
           (config['customStyles']['fontSize'] ??
             extensions.baseConfiguration['customStyles']['fontSize']) ||
           cssSize;
-        config.fontSize = currentSize + delta;
+        config.customStyles.fontSize = currentSize + delta;
         return settingRegistry
           .set(id, 'editorConfig', config)
           .catch((reason: Error) => {