jupyterlab_edit_markdown_at_content_extension 0.4.3 → 0.6.7

package/README.md

@@ -12,9 +12,9 @@ Jump straight from a rendered markdown file into the editor at the exact line yo
 
 ## Features
 
-- **Edit at content location** - open the editor scrolled to the line matching the rendered content you are viewing
-- **No-scroll workflow** - skips the manual hunt for the right line after switching from preview to editor
-- **Server-side support** - a Python `jupyter_server` extension backs the frontend with the routes it needs
+- **Show Markdown Editor** - right-click rendered content and pick "Show Markdown Editor"; the editor opens split-right with the cursor on the line that produced what you clicked. This replaces JupyterLab core's identically named command, which always opened at line 0
+- **Reveal in Markdown Preview** - right-click in the editor and pick "Reveal in Markdown Preview" to scroll the rendered preview to the block at the cursor
+- **Synced scrolling** - once the editor is opened from the preview, the two panes track each other: the pane you are scrolling drives, the other follows to the matching location. Toggle with the `trackEditor` setting (on by default) under Settings → Edit Markdown at Content
 
 ## Requirements
 

package/lib/index.js

@@ -1,6 +1,8 @@
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { IEditorTracker } from '@jupyterlab/fileeditor';
 import { IMarkdownViewerTracker } from '@jupyterlab/markdownviewer';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { EditorView } from '@codemirror/view';
 import { buildBlockMap, blockToLine, lineToBlock, headingSlug } from './mapping';
 const PLUGIN_ID = 'jupyterlab_edit_markdown_at_content_extension:plugin';
 const CMD_EDIT_AT = 'editmarkdownatcontent:edit-at-location';
@@ -10,6 +12,38 @@ const EDITOR_SELECTOR = '.jp-FileEditor';
 const EDITOR_FACTORY = 'Editor';
 const PREVIEW_FACTORY = 'Markdown Preview';
 const LOG = '[edit-markdown-at-content]';
+/**
+ * Scroll a rendered preview `host` so the block that produced source `line` is
+ * at the top. Tries ordinal alignment first; falls back to matching the
+ * nearest-preceding heading by its createHeaderId slug when the rendered child
+ * count diverges from the lexed block count (math, sanitizer, injected nodes).
+ */
+function revealLineInPreview(host, source, line) {
+    var _a;
+    const { ordinal, headingSlug: slug, headingNth } = lineToBlock(source, line);
+    const children = Array.from(host.children);
+    const expected = buildBlockMap(source).blocks.length;
+    if (children.length === expected && ordinal >= 0) {
+        children[ordinal].scrollIntoView({ block: 'start' });
+        return;
+    }
+    if (slug) {
+        const headings = Array.from(host.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+        let seen = 0;
+        for (const h of headings) {
+            const id = h.id ||
+                h.getAttribute('data-jupyter-id') ||
+                headingSlug((_a = h.textContent) !== null && _a !== void 0 ? _a : '');
+            if (id === slug) {
+                seen += 1;
+                if (seen === (headingNth !== null && headingNth !== void 0 ? headingNth : 1)) {
+                    h.scrollIntoView({ block: 'start' });
+                    return;
+                }
+            }
+        }
+    }
+}
 /**
  * Initialization data for the jupyterlab_edit_markdown_at_content_extension extension.
  */
@@ -18,8 +52,25 @@ const plugin = {
     description: 'Jupyterlab extension to save you the scrolling time from when you are at markdown file location and open editor and need to scroll to the exact place in the file where the content is. This extension opens the editor at the place where the content is',
     autoStart: true,
     requires: [IDocumentManager, IEditorTracker, IMarkdownViewerTracker],
-    activate: (app, docManager, editorTracker, markdownTracker) => {
+    optional: [ISettingRegistry],
+    activate: (app, docManager, editorTracker, markdownTracker, settingRegistry) => {
         console.log('JupyterLab extension jupyterlab_edit_markdown_at_content_extension is activated!');
+        // `trackEditor` (default true): keep the editor and preview scrolled
+        // together once the editor is opened via the command. Read from settings;
+        // defaults to enabled when no setting registry is available.
+        let trackEnabled = true;
+        if (settingRegistry) {
+            settingRegistry
+                .load(PLUGIN_ID)
+                .then(settings => {
+                const refresh = () => {
+                    trackEnabled = settings.get('trackEditor').composite !== false;
+                };
+                refresh();
+                settings.changed.connect(refresh);
+            })
+                .catch(err => console.warn(`${LOG} could not load settings`, err));
+        }
         // Lumino commands receive no DOM target, so a single capture-phase
         // listener stashes the right-clicked node for both directions.
         let lastPreviewTarget = null;
@@ -52,9 +103,132 @@ const plugin = {
         };
         /** The `.jp-RenderedMarkdown` host element inside a preview/editor widget. */
         const renderedHost = (widget) => { var _a, _b; return (_b = (_a = widget === null || widget === void 0 ? void 0 : widget.node) === null || _a === void 0 ? void 0 : _a.querySelector('.jp-RenderedMarkdown')) !== null && _b !== void 0 ? _b : null; };
+        /** 0-based index of the first preview block whose bottom is below the host top. */
+        const previewTopOrdinal = (host) => {
+            const top = host.getBoundingClientRect().top;
+            const kids = Array.from(host.children);
+            for (let i = 0; i < kids.length; i++) {
+                if (kids[i].getBoundingClientRect().bottom > top + 4) {
+                    return i;
+                }
+            }
+            return Math.max(0, kids.length - 1);
+        };
+        /** 0-based source line at the top of the editor viewport (CodeMirror view). */
+        const editorTopLine = (editor) => {
+            try {
+                const view = editor.editor; // CodeMirror EditorView
+                const info = view.lineBlockAtHeight(view.scrollDOM.scrollTop);
+                return view.state.doc.lineAt(info.from).number - 1;
+            }
+            catch (_a) {
+                return editor.getCursorPosition().line;
+            }
+        };
+        /**
+         * Scroll the editor so 0-based `line` sits at the top of the viewport.
+         * Uses CodeMirror's own scrollIntoView effect (y: 'start'), which scrolls
+         * on the measure cycle - correct even on a freshly opened editor whose line
+         * heights are not yet measured. Near the document end CodeMirror clamps, so
+         * the line sits as high as it can.
+         */
+        const scrollEditorToTop = (editor, line) => {
+            const clamped = Math.max(0, Math.min(line, editor.lineCount - 1));
+            try {
+                const view = editor.editor;
+                const pos = view.state.doc.line(clamped + 1).from;
+                view.dispatch({
+                    effects: EditorView.scrollIntoView(pos, { y: 'start' })
+                });
+            }
+            catch (_a) {
+                editor.revealPosition({ line: clamped, column: 0 });
+            }
+        };
+        /**
+         * Bidirectional scroll sync between a preview and its editor, established
+         * when the editor is opened via the command and `trackEditor` is on.
+         *
+         * The pane the user is interacting with (last pointer/wheel/focus) is the
+         * sole driver; the other pane only follows. This avoids the feedback loop
+         * where a follower's programmatic scroll would scroll the driver back, and
+         * guarantees the follower is resolved to the driver's exact line rather
+         * than nudged by a relative amount.
+         */
+        const establishSync = (previewWidget, editorWidget) => {
+            if (editorWidget.__emacSynced) {
+                return;
+            }
+            editorWidget.__emacSynced = true;
+            const editor = editorWidget.content.editor;
+            // The editor was just focused on open, so it drives first.
+            let driver = 'editor';
+            const claimEditor = () => {
+                driver = 'editor';
+            };
+            const claimPreview = () => {
+                driver = 'preview';
+            };
+            const onEditorScroll = () => {
+                if (driver !== 'editor') {
+                    return;
+                }
+                const host = renderedHost(previewWidget);
+                if (!host || previewWidget.isDisposed || editorWidget.isDisposed) {
+                    return;
+                }
+                const source = editorWidget.context.model.toString();
+                revealLineInPreview(host, source, editorTopLine(editor));
+            };
+            const onPreviewScroll = () => {
+                if (driver !== 'preview') {
+                    return;
+                }
+                const host = renderedHost(previewWidget);
+                if (!host || previewWidget.isDisposed || editorWidget.isDisposed) {
+                    return;
+                }
+                const source = editorWidget.context.model.toString();
+                const line = blockToLine(source, previewTopOrdinal(host));
+                if (line >= 0) {
+                    scrollEditorToTop(editor, line);
+                }
+            };
+            // Pointer/wheel/focus on a pane (capture phase, before its scroll fires)
+            // makes it the driver. Scroll events do not bubble but are seen in
+            // capture, so one listener per widget node catches its inner scroller.
+            const claimOpts = { capture: true, passive: true };
+            const ed = editorWidget.node;
+            const pv = previewWidget.node;
+            ed.addEventListener('pointerdown', claimEditor, claimOpts);
+            ed.addEventListener('wheel', claimEditor, claimOpts);
+            ed.addEventListener('focusin', claimEditor, claimOpts);
+            pv.addEventListener('pointerdown', claimPreview, claimOpts);
+            pv.addEventListener('wheel', claimPreview, claimOpts);
+            pv.addEventListener('focusin', claimPreview, claimOpts);
+            ed.addEventListener('scroll', onEditorScroll, claimOpts);
+            pv.addEventListener('scroll', onPreviewScroll, claimOpts);
+            const cleanup = () => {
+                ed.removeEventListener('pointerdown', claimEditor, claimOpts);
+                ed.removeEventListener('wheel', claimEditor, claimOpts);
+                ed.removeEventListener('focusin', claimEditor, claimOpts);
+                pv.removeEventListener('pointerdown', claimPreview, claimOpts);
+                pv.removeEventListener('wheel', claimPreview, claimOpts);
+                pv.removeEventListener('focusin', claimPreview, claimOpts);
+                ed.removeEventListener('scroll', onEditorScroll, claimOpts);
+                pv.removeEventListener('scroll', onPreviewScroll, claimOpts);
+                editorWidget.__emacSynced = false;
+            };
+            editorWidget.disposed.connect(cleanup);
+            previewWidget.disposed.connect(cleanup);
+        };
         // ---- Preview -> Editor -------------------------------------------------
+        // Labelled "Show Markdown Editor" to replace JupyterLab core's identically
+        // named command (`markdownviewer:edit`), which always opens the editor at
+        // line 0. The core context-menu item is disabled in `schema/plugin.json`,
+        // so this position-aware command is the only one shown.
         app.commands.addCommand(CMD_EDIT_AT, {
-            label: 'Edit at this location',
+            label: 'Show Markdown Editor',
             execute: async () => {
                 const target = lastPreviewTarget;
                 if (!target) {
@@ -87,7 +261,10 @@ const plugin = {
                     console.warn(`${LOG} block ordinal ${ordinal} is not mappable`);
                     return;
                 }
-                const editorWidget = docManager.openOrReveal(widget.context.path, EDITOR_FACTORY);
+                // Match core's `markdownviewer:edit`: open the editor split-right when
+                // it is not already open. When it is open (the side-by-side case), this
+                // just reveals the existing editor and we scroll it below.
+                const editorWidget = docManager.openOrReveal(widget.context.path, EDITOR_FACTORY, undefined, { mode: 'split-right' });
                 if (!editorWidget) {
                     return;
                 }
@@ -96,10 +273,15 @@ const plugin = {
                 const editor = editorWidget.content.editor;
                 const clamped = Math.min(line, editor.lineCount - 1);
                 editor.setCursorPosition({ line: clamped, column: 0 });
-                // Focus so the cursor is live (you asked to edit here) and the active
-                // line is rendered, then scroll it into view.
+                // Focus so the cursor is live (you asked to edit here), then scroll the
+                // line to the TOP of the viewport. Near the end of the document the
+                // browser clamps scrollTop, so the line sits as high as it can.
                 editor.focus();
-                editor.revealPosition({ line: clamped, column: 0 });
+                scrollEditorToTop(editor, clamped);
+                // Keep the two panes scrolled together from here on.
+                if (trackEnabled) {
+                    establishSync(widget, editorWidget);
+                }
             }
         });
         app.contextMenu.addItem({
@@ -111,7 +293,6 @@ const plugin = {
         app.commands.addCommand(CMD_REVEAL_IN, {
             label: 'Reveal in Markdown Preview',
             execute: async () => {
-                var _a;
                 const target = lastEditorTarget;
                 if (!target) {
                     console.warn(`${LOG} no editor target under the cursor`);
@@ -125,7 +306,6 @@ const plugin = {
                 const editor = widget.content.editor;
                 const line = editor.getCursorPosition().line;
                 const source = widget.context.model.toString();
-                const { ordinal, headingSlug: slug, headingNth } = lineToBlock(source, line);
                 const previewWidget = docManager.openOrReveal(widget.context.path, PREVIEW_FACTORY);
                 if (!previewWidget) {
                     return;
@@ -137,35 +317,7 @@ const plugin = {
                     console.warn(`${LOG} rendered preview host not found`);
                     return;
                 }
-                const children = Array.from(host.children);
-                const expected = buildBlockMap(source).blocks.length;
-                if (children.length === expected && ordinal >= 0) {
-                    children[ordinal].scrollIntoView({ block: 'start' });
-                    return;
-                }
-                // Fallback (AC #8): ordinal alignment is unreliable (math, sanitizer,
-                // injected nodes). Re-derive heading ids from the live headings and
-                // scroll to the headingNth-th match.
-                if (slug) {
-                    const headings = Array.from(host.querySelectorAll('h1, h2, h3, h4, h5, h6'));
-                    let seen = 0;
-                    for (const h of headings) {
-                        // rendermime stores createHeaderId in `id` (trusted) or
-                        // `data-jupyter-id` (untrusted); the live textContent also contains
-                        // the appended '¶' anchor, so prefer the stored attribute.
-                        const id = h.id ||
-                            h.getAttribute('data-jupyter-id') ||
-                            headingSlug((_a = h.textContent) !== null && _a !== void 0 ? _a : '');
-                        if (id === slug) {
-                            seen += 1;
-                            if (seen === (headingNth !== null && headingNth !== void 0 ? headingNth : 1)) {
-                                h.scrollIntoView({ block: 'start' });
-                                return;
-                            }
-                        }
-                    }
-                }
-                console.warn(`${LOG} could not align preview to line ${line}`);
+                revealLineInPreview(host, source, line);
             }
         });
         app.contextMenu.addItem({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterlab_edit_markdown_at_content_extension",
-    "version": "0.4.3",
+    "version": "0.6.7",
     "description": "Jupyterlab extension to save you the scrolling time from when you are at markdown file location and open editor and need to scroll to the exact place in the file where the content is. This extension opens the editor at the place where the content is",
     "keywords": [
         "jupyter",
@@ -19,7 +19,8 @@
     "files": [
         "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
         "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-        "src/**/*.{ts,tsx}"
+        "src/**/*.{ts,tsx}",
+        "schema/*.json"
     ],
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -56,12 +57,14 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
+        "@codemirror/view": "^6.26.0",
         "@jupyterlab/application": "^4.5.0",
         "@jupyterlab/codeeditor": "^4.5.0",
         "@jupyterlab/docmanager": "^4.5.0",
         "@jupyterlab/docregistry": "^4.5.0",
         "@jupyterlab/fileeditor": "^4.5.0",
         "@jupyterlab/markdownviewer": "^4.5.0",
+        "@jupyterlab/settingregistry": "^4.5.0",
         "marked": "^17.0.0"
     },
     "devDependencies": {
@@ -111,7 +114,8 @@
     },
     "jupyterlab": {
         "extension": true,
-        "outputDir": "jupyterlab_edit_markdown_at_content_extension/labextension"
+        "outputDir": "jupyterlab_edit_markdown_at_content_extension/labextension",
+        "schemaDir": "schema"
     },
     "eslintIgnore": [
         "node_modules",

package/schema/plugin.json

@@ -0,0 +1,23 @@
+{
+  "title": "Edit Markdown at Content",
+  "description": "Settings for the edit-markdown-at-content extension.",
+  "jupyter.lab.menus": {
+    "context": [
+      {
+        "command": "markdownviewer:edit",
+        "selector": ".jp-RenderedMarkdown",
+        "disabled": true
+      }
+    ]
+  },
+  "properties": {
+    "trackEditor": {
+      "title": "Track editor and preview together",
+      "description": "When the editor is opened from the preview via \"Show Markdown Editor\", keep the editor and the Markdown Preview scrolled to the same location: scrolling either pane scrolls the other.",
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

package/src/index.ts

@@ -9,6 +9,10 @@ import { IEditorTracker } from '@jupyterlab/fileeditor';
 
 import { IMarkdownViewerTracker } from '@jupyterlab/markdownviewer';
 
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
+import { EditorView } from '@codemirror/view';
+
 import {
   buildBlockMap,
   blockToLine,
@@ -27,6 +31,45 @@ const PREVIEW_FACTORY = 'Markdown Preview';
 
 const LOG = '[edit-markdown-at-content]';
 
+/**
+ * Scroll a rendered preview `host` so the block that produced source `line` is
+ * at the top. Tries ordinal alignment first; falls back to matching the
+ * nearest-preceding heading by its createHeaderId slug when the rendered child
+ * count diverges from the lexed block count (math, sanitizer, injected nodes).
+ */
+function revealLineInPreview(
+  host: HTMLElement,
+  source: string,
+  line: number
+): void {
+  const { ordinal, headingSlug: slug, headingNth } = lineToBlock(source, line);
+  const children = Array.from(host.children);
+  const expected = buildBlockMap(source).blocks.length;
+  if (children.length === expected && ordinal >= 0) {
+    children[ordinal].scrollIntoView({ block: 'start' });
+    return;
+  }
+  if (slug) {
+    const headings = Array.from(
+      host.querySelectorAll('h1, h2, h3, h4, h5, h6')
+    );
+    let seen = 0;
+    for (const h of headings) {
+      const id =
+        (h as HTMLElement).id ||
+        h.getAttribute('data-jupyter-id') ||
+        headingSlug(h.textContent ?? '');
+      if (id === slug) {
+        seen += 1;
+        if (seen === (headingNth ?? 1)) {
+          h.scrollIntoView({ block: 'start' });
+          return;
+        }
+      }
+    }
+  }
+}
+
 /**
  * Initialization data for the jupyterlab_edit_markdown_at_content_extension extension.
  */
@@ -36,16 +79,35 @@ const plugin: JupyterFrontEndPlugin<void> = {
     'Jupyterlab extension to save you the scrolling time from when you are at markdown file location and open editor and need to scroll to the exact place in the file where the content is. This extension opens the editor at the place where the content is',
   autoStart: true,
   requires: [IDocumentManager, IEditorTracker, IMarkdownViewerTracker],
+  optional: [ISettingRegistry],
   activate: (
     app: JupyterFrontEnd,
     docManager: IDocumentManager,
     editorTracker: IEditorTracker,
-    markdownTracker: IMarkdownViewerTracker
+    markdownTracker: IMarkdownViewerTracker,
+    settingRegistry: ISettingRegistry | null
   ) => {
     console.log(
       'JupyterLab extension jupyterlab_edit_markdown_at_content_extension is activated!'
     );
 
+    // `trackEditor` (default true): keep the editor and preview scrolled
+    // together once the editor is opened via the command. Read from settings;
+    // defaults to enabled when no setting registry is available.
+    let trackEnabled = true;
+    if (settingRegistry) {
+      settingRegistry
+        .load(PLUGIN_ID)
+        .then(settings => {
+          const refresh = () => {
+            trackEnabled = settings.get('trackEditor').composite !== false;
+          };
+          refresh();
+          settings.changed.connect(refresh);
+        })
+        .catch(err => console.warn(`${LOG} could not load settings`, err));
+    }
+
     // Lumino commands receive no DOM target, so a single capture-phase
     // listener stashes the right-clicked node for both directions.
     let lastPreviewTarget: Element | null = null;
@@ -87,9 +149,140 @@ const plugin: JupyterFrontEndPlugin<void> = {
     const renderedHost = (widget: any): HTMLElement | null =>
       widget?.node?.querySelector('.jp-RenderedMarkdown') ?? null;
 
+    /** 0-based index of the first preview block whose bottom is below the host top. */
+    const previewTopOrdinal = (host: HTMLElement): number => {
+      const top = host.getBoundingClientRect().top;
+      const kids = Array.from(host.children);
+      for (let i = 0; i < kids.length; i++) {
+        if (kids[i].getBoundingClientRect().bottom > top + 4) {
+          return i;
+        }
+      }
+      return Math.max(0, kids.length - 1);
+    };
+
+    /** 0-based source line at the top of the editor viewport (CodeMirror view). */
+    const editorTopLine = (editor: any): number => {
+      try {
+        const view = editor.editor; // CodeMirror EditorView
+        const info = view.lineBlockAtHeight(view.scrollDOM.scrollTop);
+        return view.state.doc.lineAt(info.from).number - 1;
+      } catch {
+        return editor.getCursorPosition().line;
+      }
+    };
+
+    /**
+     * Scroll the editor so 0-based `line` sits at the top of the viewport.
+     * Uses CodeMirror's own scrollIntoView effect (y: 'start'), which scrolls
+     * on the measure cycle - correct even on a freshly opened editor whose line
+     * heights are not yet measured. Near the document end CodeMirror clamps, so
+     * the line sits as high as it can.
+     */
+    const scrollEditorToTop = (editor: any, line: number): void => {
+      const clamped = Math.max(0, Math.min(line, editor.lineCount - 1));
+      try {
+        const view = editor.editor as EditorView;
+        const pos = view.state.doc.line(clamped + 1).from;
+        view.dispatch({
+          effects: EditorView.scrollIntoView(pos, { y: 'start' })
+        });
+      } catch {
+        editor.revealPosition({ line: clamped, column: 0 });
+      }
+    };
+
+    /**
+     * Bidirectional scroll sync between a preview and its editor, established
+     * when the editor is opened via the command and `trackEditor` is on.
+     *
+     * The pane the user is interacting with (last pointer/wheel/focus) is the
+     * sole driver; the other pane only follows. This avoids the feedback loop
+     * where a follower's programmatic scroll would scroll the driver back, and
+     * guarantees the follower is resolved to the driver's exact line rather
+     * than nudged by a relative amount.
+     */
+    const establishSync = (previewWidget: any, editorWidget: any): void => {
+      if (editorWidget.__emacSynced) {
+        return;
+      }
+      editorWidget.__emacSynced = true;
+
+      const editor = editorWidget.content.editor;
+      // The editor was just focused on open, so it drives first.
+      let driver: 'editor' | 'preview' = 'editor';
+
+      const claimEditor = () => {
+        driver = 'editor';
+      };
+      const claimPreview = () => {
+        driver = 'preview';
+      };
+
+      const onEditorScroll = () => {
+        if (driver !== 'editor') {
+          return;
+        }
+        const host = renderedHost(previewWidget);
+        if (!host || previewWidget.isDisposed || editorWidget.isDisposed) {
+          return;
+        }
+        const source = editorWidget.context.model.toString();
+        revealLineInPreview(host, source, editorTopLine(editor));
+      };
+
+      const onPreviewScroll = () => {
+        if (driver !== 'preview') {
+          return;
+        }
+        const host = renderedHost(previewWidget);
+        if (!host || previewWidget.isDisposed || editorWidget.isDisposed) {
+          return;
+        }
+        const source = editorWidget.context.model.toString();
+        const line = blockToLine(source, previewTopOrdinal(host));
+        if (line >= 0) {
+          scrollEditorToTop(editor, line);
+        }
+      };
+
+      // Pointer/wheel/focus on a pane (capture phase, before its scroll fires)
+      // makes it the driver. Scroll events do not bubble but are seen in
+      // capture, so one listener per widget node catches its inner scroller.
+      const claimOpts = { capture: true, passive: true } as const;
+      const ed = editorWidget.node;
+      const pv = previewWidget.node;
+      ed.addEventListener('pointerdown', claimEditor, claimOpts);
+      ed.addEventListener('wheel', claimEditor, claimOpts);
+      ed.addEventListener('focusin', claimEditor, claimOpts);
+      pv.addEventListener('pointerdown', claimPreview, claimOpts);
+      pv.addEventListener('wheel', claimPreview, claimOpts);
+      pv.addEventListener('focusin', claimPreview, claimOpts);
+      ed.addEventListener('scroll', onEditorScroll, claimOpts);
+      pv.addEventListener('scroll', onPreviewScroll, claimOpts);
+
+      const cleanup = () => {
+        ed.removeEventListener('pointerdown', claimEditor, claimOpts as any);
+        ed.removeEventListener('wheel', claimEditor, claimOpts as any);
+        ed.removeEventListener('focusin', claimEditor, claimOpts as any);
+        pv.removeEventListener('pointerdown', claimPreview, claimOpts as any);
+        pv.removeEventListener('wheel', claimPreview, claimOpts as any);
+        pv.removeEventListener('focusin', claimPreview, claimOpts as any);
+        ed.removeEventListener('scroll', onEditorScroll, claimOpts as any);
+        pv.removeEventListener('scroll', onPreviewScroll, claimOpts as any);
+        editorWidget.__emacSynced = false;
+      };
+      editorWidget.disposed.connect(cleanup);
+      previewWidget.disposed.connect(cleanup);
+    };
+
     // ---- Preview -> Editor -------------------------------------------------
+    // Labelled "Show Markdown Editor" to replace JupyterLab core's identically
+    // named command (`markdownviewer:edit`), which always opens the editor at
+    // line 0. The core context-menu item is disabled in `schema/plugin.json`,
+    // so this position-aware command is the only one shown.
     app.commands.addCommand(CMD_EDIT_AT, {
-      label: 'Edit at this location',
+      label: 'Show Markdown Editor',
       execute: async () => {
         const target = lastPreviewTarget;
         if (!target) {
@@ -124,9 +317,14 @@ const plugin: JupyterFrontEndPlugin<void> = {
           return;
         }
 
+        // Match core's `markdownviewer:edit`: open the editor split-right when
+        // it is not already open. When it is open (the side-by-side case), this
+        // just reveals the existing editor and we scroll it below.
         const editorWidget: any = docManager.openOrReveal(
           widget.context.path,
-          EDITOR_FACTORY
+          EDITOR_FACTORY,
+          undefined,
+          { mode: 'split-right' }
         );
         if (!editorWidget) {
           return;
@@ -136,10 +334,16 @@ const plugin: JupyterFrontEndPlugin<void> = {
         const editor = editorWidget.content.editor;
         const clamped = Math.min(line, editor.lineCount - 1);
         editor.setCursorPosition({ line: clamped, column: 0 });
-        // Focus so the cursor is live (you asked to edit here) and the active
-        // line is rendered, then scroll it into view.
+        // Focus so the cursor is live (you asked to edit here), then scroll the
+        // line to the TOP of the viewport. Near the end of the document the
+        // browser clamps scrollTop, so the line sits as high as it can.
         editor.focus();
-        editor.revealPosition({ line: clamped, column: 0 });
+        scrollEditorToTop(editor, clamped);
+
+        // Keep the two panes scrolled together from here on.
+        if (trackEnabled) {
+          establishSync(widget, editorWidget);
+        }
       }
     });
     app.contextMenu.addItem({
@@ -165,11 +369,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
         const editor = widget.content.editor;
         const line = editor.getCursorPosition().line;
         const source: string = widget.context.model.toString();
-        const {
-          ordinal,
-          headingSlug: slug,
-          headingNth
-        } = lineToBlock(source, line);
 
         const previewWidget: any = docManager.openOrReveal(
           widget.context.path,
@@ -185,40 +384,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
           console.warn(`${LOG} rendered preview host not found`);
           return;
         }
-
-        const children = Array.from(host.children);
-        const expected = buildBlockMap(source).blocks.length;
-        if (children.length === expected && ordinal >= 0) {
-          children[ordinal].scrollIntoView({ block: 'start' });
-          return;
-        }
-
-        // Fallback (AC #8): ordinal alignment is unreliable (math, sanitizer,
-        // injected nodes). Re-derive heading ids from the live headings and
-        // scroll to the headingNth-th match.
-        if (slug) {
-          const headings = Array.from(
-            host.querySelectorAll('h1, h2, h3, h4, h5, h6')
-          );
-          let seen = 0;
-          for (const h of headings) {
-            // rendermime stores createHeaderId in `id` (trusted) or
-            // `data-jupyter-id` (untrusted); the live textContent also contains
-            // the appended '¶' anchor, so prefer the stored attribute.
-            const id =
-              (h as HTMLElement).id ||
-              h.getAttribute('data-jupyter-id') ||
-              headingSlug(h.textContent ?? '');
-            if (id === slug) {
-              seen += 1;
-              if (seen === (headingNth ?? 1)) {
-                h.scrollIntoView({ block: 'start' });
-                return;
-              }
-            }
-          }
-        }
-        console.warn(`${LOG} could not align preview to line ${line}`);
+        revealLineInPreview(host, source, line);
       }
     });
     app.contextMenu.addItem({