Metadata-Version: 2.4
Name: jupyterlab_markdown_switch_tab_scrolling_fix
Version: 1.0.4
Summary: Jupyterlab bugfix (disguised as extension) to help with the problem of Markdown files getting scrolled uncontrollably when images are gettng loaded into the view when switching tab back and forth
Project-URL: Homepage, https://github.com/stellarshenson/jupyterlab_markdown_switch_tab_scrolling_fix
Project-URL: Bug Tracker, https://github.com/stellarshenson/jupyterlab_markdown_switch_tab_scrolling_fix/issues
Project-URL: Repository, https://github.com/stellarshenson/jupyterlab_markdown_switch_tab_scrolling_fix.git
Author-email: Stellars Henson <konrad.jelen@gmail.com>
License: BSD 3-Clause License
        
        Copyright (c) 2025, Stellars Henson
        All rights reserved.
        
        Redistribution and use in source and binary forms, with or without
        modification, are permitted provided that the following conditions are met:
        
        1. Redistributions of source code must retain the above copyright notice, this
           list of conditions and the following disclaimer.
        
        2. Redistributions in binary form must reproduce the above copyright notice,
           this list of conditions and the following disclaimer in the documentation
           and/or other materials provided with the distribution.
        
        3. Neither the name of the copyright holder nor the names of its
           contributors may be used to endorse or promote products derived from
           this software without specific prior written permission.
        
        THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
        AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
        IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
        DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
        FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
        DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
        SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
        CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
        OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
        OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
License-File: LICENSE
Keywords: jupyter,jupyterlab,jupyterlab-extension
Classifier: Framework :: Jupyter
Classifier: Framework :: Jupyter :: JupyterLab
Classifier: Framework :: Jupyter :: JupyterLab :: 4
Classifier: Framework :: Jupyter :: JupyterLab :: Extensions
Classifier: Framework :: Jupyter :: JupyterLab :: Extensions :: Prebuilt
Classifier: License :: OSI Approved :: BSD License
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.9
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Requires-Python: >=3.9
Description-Content-Type: text/markdown

# jupyterlab_markdown_switch_tab_scrolling_fix

[![GitHub Actions](https://github.com/stellarshenson/jupyterlab_markdown_switch_tab_scrolling_fix/actions/workflows/build.yml/badge.svg)](https://github.com/stellarshenson/jupyterlab_markdown_switch_tab_scrolling_fix/actions/workflows/build.yml)
[![npm version](https://img.shields.io/npm/v/jupyterlab_markdown_switch_tab_scrolling_fix.svg)](https://www.npmjs.com/package/jupyterlab_markdown_switch_tab_scrolling_fix)
[![PyPI version](https://img.shields.io/pypi/v/jupyterlab-markdown-switch-tab-scrolling-fix.svg)](https://pypi.org/project/jupyterlab-markdown-switch-tab-scrolling-fix/)
[![Total PyPI downloads](https://static.pepy.tech/badge/jupyterlab-markdown-switch-tab-scrolling-fix)](https://pepy.tech/project/jupyterlab-markdown-switch-tab-scrolling-fix)
[![JupyterLab 4](https://img.shields.io/badge/JupyterLab-4-orange.svg)](https://jupyterlab.readthedocs.io/en/stable/)

JupyterLab extension that prevents markdown files from scrolling uncontrollably when switching tabs while images load.

## The Problem

When you switch back to a markdown tab in JupyterLab, images reload and cause the viewport to jump as they render. This creates disorienting scroll drift that moves you away from where you were reading.

**Key observations**:
- Issue only occurs with markdown files containing images
- Triggered by tab switching (deactivate then reactivate)
- Browser recalculates layout as each image loads, causing cumulative scroll displacement
- Native JupyterLab has no scroll position protection during image rendering

## The Fix

This extension locks scroll position when you switch to a markdown tab until all images finish loading.

**How it works**:
- Detects when markdown widgets become active via JupyterLab's shell signals
- Captures initial scroll position immediately on tab activation
- Monitors all image load events in the markdown
- Actively corrects any scroll drift (checks every 100ms)
- Releases lock after all images load and position stabilizes for 300ms
- User scroll (wheel or touch) immediately overrides the lock

**Implementation details**:
- Maximum lock duration: 3 seconds
- Handles cached images that load instantly
- Uses WeakMap to prevent multiple guards on same widget
- Passive event listeners for performance

## Technical Implementation

The extension hooks into JupyterLab's shell lifecycle using the `ILabShell.currentChanged` signal to detect tab switches. When a markdown widget activates, the handler searches for `.jp-RenderedMarkdown` containers and queries all image elements. It captures the initial scroll position (`scrollTop`/`scrollLeft`), then attaches load event listeners to track completion of image rendering.

A guard interval runs every 100ms, comparing current scroll position against the saved position. Any drift exceeding 1 pixel triggers immediate correction by resetting `scrollTop`/`scrollLeft`. The guard tracks stability (position unchanged for 300ms) and image load completion. Once all images finish loading and position remains stable, the guard releases. User scroll events (wheel or touchstart) immediately abort the guard to preserve manual navigation.

**Core components**:
- `ILabShell.currentChanged` signal handler detects widget activation
- DOM query selects `.jp-RenderedMarkdown img` elements for monitoring
- `addEventListener('load', handler, { once: true })` tracks image completion
- `window.setInterval()` guard runs drift correction every 100ms
- WeakMap associates guard interval IDs with widget instances
- Passive event listeners detect user scroll intent without blocking

## Requirements

- JupyterLab >= 4.0.0

## Install

To install the extension, execute:

```bash
pip install jupyterlab_markdown_switch_tab_scrolling_fix
```

## Uninstall

To remove the extension, execute:

```bash
pip uninstall jupyterlab_markdown_switch_tab_scrolling_fix
```

## Contributing

### Development install

Note: You will need NodeJS to build the extension package.

The `jlpm` command is JupyterLab's pinned version of
[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
`yarn` or `npm` in lieu of `jlpm` below.

```bash
# Clone the repo to your local environment
# Change directory to the jupyterlab_markdown_switch_tab_scrolling_fix directory

# Set up a virtual environment and install package in development mode
python -m venv .venv
source .venv/bin/activate
pip install --editable "."

# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite

# Rebuild extension Typescript source after making changes
# IMPORTANT: Unlike the steps above which are performed only once, do this step
# every time you make a change.
jlpm build
```

You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.

```bash
# Watch the source directory in one terminal, automatically rebuilding when needed
jlpm watch
# Run JupyterLab in another terminal
jupyter lab
```

With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).

By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:

```bash
jupyter lab build --minimize=False
```

### Development uninstall

```bash
pip uninstall jupyterlab_markdown_switch_tab_scrolling_fix
```

In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
folder is located. Then you can remove the symlink named `jupyterlab_markdown_switch_tab_scrolling_fix` within that folder.

### Testing the extension

#### Frontend tests

This extension is using [Jest](https://jestjs.io/) for JavaScript code testing.

To execute them, execute:

```sh
jlpm
jlpm test
```

#### Integration tests

This extension uses [Playwright](https://playwright.dev/docs/intro) for the integration tests (aka user level tests).
More precisely, the JupyterLab helper [Galata](https://github.com/jupyterlab/jupyterlab/tree/master/galata) is used to handle testing the extension in JupyterLab.

More information are provided within the [ui-tests](./ui-tests/README.md) README.

### Packaging the extension

See [RELEASE](RELEASE.md)
