Backport PR #15296: Fix rulers position with gutter width (#15311)

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>
jupyterlab · Oct 26, 2023 · 0019648 · 0019648
1 parent b0fc364
commit 0019648
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/galata/test/jupyterlab/codemirror.test.ts b/galata/test/jupyterlab/codemirror.test.ts
@@ -0,0 +1,43 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { expect, galata, test } from '@jupyterlab/galata';
+
+const DEFAULT_NAME = 'untitled.txt';
+
+const RULERS_CONTENT = `0123456789
+          0123456789
+                    0123456789
+                              0123456789
+                                        0123456789
+                                                  0123456789
+0123456789
+          0123456789
+                    0123456789
+                              0123456789
+                                        0123456789
+                                                  0123456789`;
+
+test.describe('CodeMirror extensions', () => {
+  test.use({
+    mockSettings: {
+      ...galata.DEFAULT_SETTINGS,
+      '@jupyterlab/codemirror-extension:plugin': {
+        defaultConfig: {
+          rulers: [10, 20, 30, 40, 50, 60]
+        }
+      }
+    }
+  });
+
+  test('Should display rulers', async ({ page }) => {
+    await page.menu.clickMenuItem('File>New>Text File');
+
+    await page.getByRole('tab', { name: DEFAULT_NAME }).waitFor();
+
+    const editor = page.getByRole('region', { name: 'notebook content' });
+    await editor.getByRole('textbox').fill(RULERS_CONTENT);
+
+    expect(await editor.screenshot()).toMatchSnapshot('codemirror-rulers.png');
+  });
+});
diff --git a/.../jupyterlab/codemirror.test.ts-snapshots/codemirror-rulers-jupyterlab-linux.png b/.../jupyterlab/codemirror.test.ts-snapshots/codemirror-rulers-jupyterlab-linux.png
diff --git a/packages/codemirror/src/extensions/rulers.ts b/packages/codemirror/src/extensions/rulers.ts
@@ -57,14 +57,16 @@ const plugin = ViewPlugin.fromClass(
 
       const defaultCharacterWidth = view.defaultCharacterWidth;
       const widths = view.state.facet(rulerConfig);
+      const guttersWidths =
+        view.scrollDOM.querySelector('.cm-gutters')?.clientWidth ?? 0;
       this.rulers = widths.map(width => {
         const ruler = this.rulersContainer.appendChild(
           document.createElement('div')
         );
         ruler.classList.add(RULERS_CLASSNAME);
         ruler.style.cssText = `
                 position: absolute;
-                left: ${width * defaultCharacterWidth}px;
+                left: ${guttersWidths + width * defaultCharacterWidth}px;
                 height: 100%;
             `;
         // FIXME: This should be equal to the amount of padding on a line.
@@ -80,11 +82,16 @@ const plugin = ViewPlugin.fromClass(
 
       if (
         update.viewportChanged ||
+        update.geometryChanged ||
         !JSONExt.deepEqual(widths, update.startState.facet(rulerConfig))
       ) {
+        const guttersWidth =
+          update.view.scrollDOM.querySelector('.cm-gutters')?.clientWidth ?? 0;
         const defaultCharacterWidth = update.view.defaultCharacterWidth;
         this.rulers.forEach((ruler, rulerIdx) => {
-          ruler.style.left = `${widths[rulerIdx] * defaultCharacterWidth}px`;
+          ruler.style.left = `${
+            guttersWidth + widths[rulerIdx] * defaultCharacterWidth
+          }px`;
         });
       }
     }