feat(Selection, Cursor)!: rewrite code for fake-paragraph behaviour (#65)

I rewrote the code that for the behavior with the fake paragraph. This fixed some bugs and improved the behavior in general.

1. Don't create fake paragraph near with textblocks.
2. Fixed error, that's occurred with node-selection and `after`-direction
3. Add _waterfall_ fake-paragraphs behaviour. For example, cursor in `doc -> blockquote -> yfm_cut -> yfm_note -> blockquote`. On first `down` press fake paragraph will be created in `yfm_note`, then in `yfm_cut`, then in `blockquote`, and then in `doc`

Author: d3m1d0v

package-lock.json

@@ -16,6 +16,7 @@
     "lint:prettier": "prettier --check \"{src,demo}/**/*.{js,jsx,ts,tsx,css,scss}\"",
     "test": "jest",
     "test:cov": "jest --coverage",
+    "test:watch": "jest --watchAll",
     "prepublishOnly": "npm run lint && npm run build"
   },
   "repository": {
@@ -57,7 +58,7 @@
     "prosemirror-state": "1.4.1",
     "prosemirror-transform": "1.6.0",
     "prosemirror-utils": "1.0.0-0",
-    "prosemirror-view": "1.26.2",
+    "prosemirror-view": "1.30.0",
     "react-use": "^17.3.2",
     "tslib": "^2.3.1"
   },

package.json

@@ -36,7 +36,6 @@ export const clipboard = ({
 }: ClipboardPluginOptions) => {
     return new Plugin({
         props: {
-            // @ts-expect-error handleDOMEvents has broken types
             handleDOMEvents: {
                 copy(view, e) {
                     if (!e.clipboardData) return false;

src/extensions/behavior/Clipboard/clipboard.ts

@@ -2,19 +2,42 @@ import {Selection} from 'prosemirror-state';
 import type {Node, ResolvedPos} from 'prosemirror-model';
 import type {Mapping} from 'prosemirror-transform';
 
+export function isGapCursorSelection<T>(selection: Selection): selection is GapCursorSelection<T> {
+    return selection instanceof GapCursorSelection;
+}
+
 // @ts-expect-error // TODO: implements toJSON
-export class GapCursorSelection extends Selection {
-    constructor(pos: ResolvedPos) {
-        super(pos, pos);
+export class GapCursorSelection<T = any> extends Selection {
+    #_$pos: ResolvedPos;
+
+    readonly meta?: T;
+
+    readonly selectionName = 'GapCursorSelection';
+
+    get $pos(): ResolvedPos {
+        return this.#_$pos;
+    }
+
+    get pos(): number {
+        return this.#_$pos.pos;
+    }
+
+    constructor($pos: ResolvedPos, params?: {meta?: T}) {
+        super($pos, $pos);
+        this.#_$pos = $pos;
+        this.meta = params?.meta;
     }
 
     eq(other: Selection): boolean {
-        return other instanceof GapCursorSelection && other.head === this.head;
+        return (
+            isGapCursorSelection(other) &&
+            this.pos === other.pos &&
+            this.$pos.doc.eq(other.$pos.doc)
+        );
     }
 
     map(doc: Node, mapping: Mapping): Selection {
         const $pos = doc.resolve(mapping.map(this.head));
-
         return Selection.near($pos);
     }
 }

src/extensions/behavior/Cursor/GapCursorSelection.ts

@@ -1,10 +1,11 @@
 import {DOMSerializer} from 'prosemirror-model';
 import {Decoration, DecorationSet, EditorView} from 'prosemirror-view';
-import {EditorState, NodeSelection, Plugin, PluginKey} from 'prosemirror-state';
+import {EditorState, Plugin, PluginKey} from 'prosemirror-state';
 
+import {isNodeSelection} from '../../../utils/selection';
 import {pType} from '../../base/BaseSchema';
 import {createPlaceholder} from '../../behavior/Placeholder';
-import {GapCursorSelection} from './GapCursorSelection';
+import {isGapCursorSelection} from './GapCursorSelection';
 
 import './gapcursor.scss';
 
@@ -16,10 +17,8 @@ export const gapCursor = () =>
         state: {
             init: () => false,
             apply: (_tr, _pluginState, _oldState, newState) => {
-                return (
-                    newState.selection instanceof GapCursorSelection ||
-                    newState.selection instanceof NodeSelection
-                );
+                const sel = newState.selection;
+                return isGapCursorSelection(sel) || isNodeSelection(sel);
             },
         },
         view() {
@@ -33,7 +32,7 @@ export const gapCursor = () =>
         },
         props: {
             decorations: ({doc, selection}: EditorState) => {
-                if (selection instanceof GapCursorSelection) {
+                if (isGapCursorSelection(selection)) {
                     const position = selection.head;
 
                     return DecorationSet.create(doc, [

src/extensions/behavior/Cursor/gapcursor.ts

@@ -0,0 +1,243 @@
+import type {Node} from 'prosemirror-model';
+import {TextSelection} from 'prosemirror-state';
+import {builders} from 'prosemirror-test-builder';
+
+import {ExtensionsManager} from '../../../core';
+import {BaseNode, BaseSchema} from '../../base/BaseSchema';
+import {Blockquote, blockquote} from '../../markdown/Blockquote';
+import {CodeBlock, codeBlockNodeName} from '../../markdown/CodeBlock';
+import {YfmTable, YfmTableNode} from '../../yfm/YfmTable';
+import {GapCursorSelection} from '../Cursor/GapCursorSelection';
+
+import {
+    Direction,
+    findFakeParaPosForTextSelection,
+    findNextFakeParaPosForGapCursorSelection,
+} from './commands';
+
+const {schema} = new ExtensionsManager({
+    extensions: (builder) =>
+        builder
+            .use(BaseSchema, {})
+            .use(Blockquote, {})
+            .use(CodeBlock, {})
+            .use(YfmTable, {})
+            .addNode('testnode', () => ({
+                spec: {content: `block*`, group: 'block', gapcursor: false},
+                fromYfm: {tokenSpec: {name: 'testnode', type: 'block', ignore: true}},
+                toYfm: () => {},
+            })),
+}).buildDeps();
+
+const {doc, p, bq, codeBlock, table, tbody, tr, td, testnode} = builders(schema, {
+    doc: {nodeType: BaseNode.Doc},
+    p: {nodeType: BaseNode.Paragraph},
+    bq: {nodeType: blockquote},
+    codeBlock: {nodeType: codeBlockNodeName},
+    table: {nodeType: YfmTableNode.Table},
+    tbody: {nodeType: YfmTableNode.Body},
+    tr: {nodeType: YfmTableNode.Row},
+    td: {nodeType: YfmTableNode.Cell},
+}) as PMTestBuilderResult<
+    'doc' | 'p' | 'bq' | 'codeBlock' | 'table' | 'tbody' | 'tr' | 'td' | 'testnode'
+>;
+
+function shouldFindPos(doc: Node, dir: Direction, selPos: number, fakePos: number) {
+    const sel = TextSelection.create(doc, selPos);
+    const $pos = findFakeParaPosForTextSelection(sel, dir);
+
+    expect($pos).toBeTruthy();
+    expect($pos!.pos).toBe(fakePos);
+}
+
+function shouldReturnNull(doc: Node, dir: Direction, selPos: number) {
+    const sel = TextSelection.create(doc, selPos);
+    const $pos = findFakeParaPosForTextSelection(sel, dir);
+
+    expect($pos).toBeNull();
+}
+
+function shouldFindNextPos(doc: Node, dir: Direction, selPos: number, fakePos: number) {
+    const sel = new GapCursorSelection(doc.resolve(selPos));
+    const $pos = findNextFakeParaPosForGapCursorSelection(sel, dir);
+
+    expect($pos).toBeTruthy();
+    expect($pos!.pos).toBe(fakePos);
+}
+
+function shouldNotFindNextPos(doc: Node, dir: Direction, selPos: number) {
+    const sel = new GapCursorSelection(doc.resolve(selPos));
+    const $pos = findNextFakeParaPosForGapCursorSelection(sel, dir);
+
+    expect($pos).toBeNull();
+}
+
+describe('Selection arrow commands: findFakeParaPosForTextSelection', () => {
+    it.each(['before', 'after'] as const)(
+        'should not find fake paragraph position %s empty paragraph in doc',
+        (dir) => {
+            shouldReturnNull(doc(p()), dir, 1);
+        },
+    );
+
+    it.each(['before', 'after'] as const)(
+        'should not find fake paragraph position %s empty paragraph [2]',
+        (dir) => {
+            shouldReturnNull(doc(p(), p(), p()), dir, 3); // cursor in second paragraph
+        },
+    );
+
+    describe('codeblock', () => {
+        it.each([
+            ['before', 0],
+            ['after', 2],
+        ] as const)('should find fake paragraph position %s codeblock', (dir, fakePos) => {
+            shouldFindPos(doc(codeBlock()), dir, 1, fakePos);
+        });
+
+        it.each(['before', 'after'] as const)(
+            'should not find fake paragraph position %s codeblock ',
+            (dir) => {
+                shouldReturnNull(doc(p(), codeBlock(), p()), dir, 3); // cursor in codeblock
+            },
+        );
+
+        it.each([
+            ['before', 3, 2],
+            ['after', 1, 2],
+        ] as const)(
+            'should find fake paragraph position between code blocks [%s]',
+            (dir, selPos, fakePos) => {
+                shouldFindPos(doc(codeBlock(), codeBlock()), dir, selPos, fakePos);
+            },
+        );
+    });
+
+    it.each([
+        ['before', 0],
+        ['after', 4],
+    ] as const)('should find fake paragraph position %s block (blockquote)', (dir, fakePos) => {
+        shouldFindPos(doc(bq(p())), dir, 2, fakePos); // cursor in para in blockquote
+    });
+
+    it.each([
+        ['before', 6, 4],
+        ['after', 2, 4],
+    ] as const)(
+        'should find fake paragraph position between blocks (blockquotes) [%s]',
+        (dir, selPos, fakePos) => {
+            shouldFindPos(doc(bq(p()), bq(p())), dir, selPos, fakePos);
+        },
+    );
+
+    it.each([
+        ['before', 4], // cursor in second para
+        ['after', 2], // cursor in first para
+    ] as const)(
+        'should not find fake paragraph position beetween paragraphs in block (in blockquote) [%s]',
+        (dir, selPos) => {
+            shouldReturnNull(doc(bq(p(), p())), dir, selPos);
+        },
+    );
+
+    it.each([
+        ['before', 9, 4],
+        ['after', 31, 36],
+    ] as const)(
+        'should find fake paragraph position on edge of complex block (yfm-table) [%s]',
+        (dir, selPos, fakePos) => {
+            shouldFindPos(
+                doc(
+                    bq(p()),
+                    table(tbody(tr(td(p()), td(p()), td(p())), tr(td(p()), td(p()), td(p())))),
+                    bq(p()),
+                ),
+                dir,
+                selPos,
+                fakePos,
+            );
+        },
+    );
+
+    it.each([
+        ['before', 19],
+        ['after', 5],
+    ] as const)(
+        'should not find fake paragraph position inside of complex block (yfm-table) [%s]',
+        (dir, selPos) => {
+            shouldReturnNull(
+                doc(table(tbody(tr(td(p()), td(p()), td(p())), tr(td(p()), td(p()), td(p()))))),
+                dir,
+                selPos,
+            );
+        },
+    );
+
+    it.each([
+        ['before', 7],
+        ['after', 29],
+    ] as const)(
+        'should not find fake paragraph position on edge of complex block (yfm-table) with textblock [%s]',
+        (dir, selPos) => {
+            shouldReturnNull(
+                doc(
+                    p(),
+                    table(tbody(tr(td(p()), td(p()), td(p())), tr(td(p()), td(p()), td(p())))),
+                    p(),
+                ),
+                dir,
+                selPos,
+            );
+        },
+    );
+
+    it.each([
+        ['before', 3, 0],
+        ['after', 3, 6],
+    ] as const)('should skip nodes with `gapcursor: false` flag [%s]', (dir, selPos, fakePos) => {
+        shouldFindPos(doc(testnode(bq(p()))), dir, selPos, fakePos);
+    });
+
+    describe('pyramid of quotes', () => {
+        const initDoc = doc(bq(p('1'), bq(p('3')), p('2')));
+
+        it.each([
+            ['before', 6], // before '3'
+            ['after', 6], // before '3'
+        ] as const)('should ignore – top level', (dir, selPos) => {
+            shouldReturnNull(initDoc, dir, selPos);
+        });
+
+        it.each([
+            ['before', 2, 0], // after '1'
+            ['after', 10, 13], // after '2'
+        ] as const)('should find a position %s the base of the pyramid', (dir, selPos, fakePos) => {
+            shouldFindPos(initDoc, dir, selPos, fakePos);
+        });
+    });
+
+    describe('stack of quotes', () => {
+        const initDoc = doc(bq(bq(p('1'))));
+
+        it.each([
+            ['before', 1], // before nested quote
+            ['after', 6], // after nested quote
+        ] as const)('should find a position %s nested quote', (dir, fakePos) => {
+            shouldFindPos(initDoc, dir, 3, fakePos);
+        });
+
+        it.each([
+            ['before', 1, 0],
+            ['after', 6, 7],
+        ] as const)('should find next fake para position %s root quote', (dir, selPos, fakePos) => {
+            shouldFindNextPos(initDoc, dir, selPos, fakePos);
+        });
+    });
+
+    it.each(['before', 'after'] as const)(
+        'should not find next fake para pos if current fake pos located between two blocks [%s]',
+        (dir) => {
+            shouldNotFindNextPos(doc(bq(bq(p()), bq(p()))), dir, 5);
+        },
+    );
+});