fix(bundle): scroll to current line after moving cursor in markup mode (#313)

Author: d3m1d0v

demo/Playground.scss

@@ -42,4 +42,18 @@
         top: 8px;
         left: 8px;
     }
+
+    &__actions {
+        display: flex;
+        gap: 8px;
+    }
+
+    &__move-to-line {
+        display: flex;
+        column-gap: 4px;
+    }
+
+    &__move-to-line-input {
+        width: 56px;
+    }
 }

demo/Playground.tsx

@@ -1,4 +1,4 @@
-import React, {CSSProperties, useCallback, useEffect} from 'react';
+import React, {CSSProperties, useCallback, useEffect, useState} from 'react';
 
 import sanitize from '@diplodoc/transform/lib/sanitize';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
@@ -8,6 +8,7 @@ import {
     MarkdownEditorMode,
     MarkdownEditorView,
     MarkupString,
+    NumberInput,
     RenderPreview,
     logger,
     markupToolbarConfigs,
@@ -220,64 +221,75 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
                 Markdown Editor Playground
                 <span className={b('version')}>{VERSION}</span>
             </div>
-            <DropdownMenu
-                size="s"
-                switcher={
-                    <Button size="s" view="flat">
-                        isEmpty: {String(mdEditor.isEmpty())}
-                    </Button>
-                }
-            >
-                <DropdownMenu.Item
-                    text="Clear"
-                    action={() => {
-                        mdEditor.clear();
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Append"
-                    action={() => {
-                        mdEditor.append('> append');
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Prepend"
-                    action={() => {
-                        mdEditor.prepend('> prepend');
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Replace"
-                    action={() => {
-                        mdEditor.replace('> replace');
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Move cursor to start"
-                    action={() => {
-                        mdEditor.moveCursor('start');
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Move cursor to end"
-                    action={() => {
-                        mdEditor.moveCursor('end');
-                        mdEditor.focus();
-                    }}
-                />
-                <DropdownMenu.Item
-                    text="Move to line"
-                    action={() => {
-                        mdEditor.moveCursor({line: 115});
-                        mdEditor.focus();
-                    }}
-                />
-            </DropdownMenu>
+            <div className={b('actions')}>
+                <DropdownMenu
+                    size="s"
+                    switcher={
+                        <Button size="s" view="flat">
+                            isEmpty: {String(mdEditor.isEmpty())}
+                        </Button>
+                    }
+                >
+                    <DropdownMenu.Item
+                        text="Clear"
+                        action={() => {
+                            mdEditor.clear();
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Append"
+                        action={() => {
+                            mdEditor.append('> append');
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Prepend"
+                        action={() => {
+                            mdEditor.prepend('> prepend');
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Replace"
+                        action={() => {
+                            mdEditor.replace('> replace');
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Move cursor to start"
+                        action={() => {
+                            mdEditor.moveCursor('start');
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Move cursor to end"
+                        action={() => {
+                            mdEditor.moveCursor('end');
+                            mdEditor.focus();
+                        }}
+                    />
+                    <DropdownMenu.Item
+                        text="Move to line"
+                        action={() => {
+                            mdEditor.moveCursor({line: 115});
+                            mdEditor.focus();
+                        }}
+                    />
+                </DropdownMenu>
+                {mdEditor.currentMode === 'markup' && (
+                    <MoveToLine
+                        onClick={(line) => {
+                            if (typeof line !== 'number' || Number.isNaN(line)) return;
+                            mdEditor.moveCursor({line});
+                            mdEditor.focus();
+                        }}
+                    />
+                )}
+            </div>
             <hr />
             <React.StrictMode>
                 <div className={b('editor')} style={{height: height ?? 'initial'}}>
@@ -306,3 +318,22 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
 });
 
 Playground.displayName = 'Playground';
+
+function MoveToLine({onClick}: {onClick: (value: number | undefined) => void}) {
+    const [line, setLine] = useState<number | undefined>(0);
+
+    return (
+        <div className={b('move-to-line')}>
+            <NumberInput
+                size="s"
+                value={line}
+                onUpdate={setLine}
+                min={0}
+                className={b('move-to-line-input')}
+            />
+            <Button size="s" onClick={() => onClick(line)}>
+                Move to line
+            </Button>
+        </div>
+    );
+}

src/bundle/Editor.ts

@@ -401,24 +401,37 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.currentEditor.append(markup);
     }
 
-    moveCursor(position: 'start' | 'end' | {line: number}): void {
+    moveCursor(
+        position:
+            | 'start'
+            | 'end'
+            | {
+                  /** 0-based line number */
+                  line: number;
+              },
+    ): void {
         if (typeof position === 'object') {
             return this.moveCursorToLine(position.line);
         }
 
         return this.currentEditor.moveCursor(position);
     }
 
-    private moveCursorToLine(line: number): void {
+    private moveCursorToLine(/** 0-based line number */ line: number): void {
         const mode = this.currentMode;
 
         switch (mode) {
             case 'markup': {
-                const lineNumber = line + 1;
                 const view = this.markupEditor.cm;
-                if (lineNumber > 0 && lineNumber <= view.state.doc.lines) {
-                    view.dispatch({selection: {anchor: view.state.doc.line(lineNumber).from}});
-                }
+
+                let cmLine = line + 1; // lines in codemirror is 1-based
+                cmLine = Math.max(cmLine, 1);
+                cmLine = Math.min(cmLine, view.state.doc.lines);
+
+                view.dispatch({
+                    scrollIntoView: true,
+                    selection: {anchor: view.state.doc.line(cmLine).from},
+                });
 
                 break;
             }