feat: expand text selection across table

[ocavue]

No description provided.

[github-actions]

🚀 Deployed on https://ocavue-table-select-end--prosemirror-tables.netlify.app

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	64.25%	1778 / 2767
🔵	Statements	64.25%	1778 / 2767
🔵	Functions	60.29%	82 / 136
🔵	Branches	86.29%	510 / 591

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/cellselection.ts	64.69%	86.56%	47.82%	64.69%	71-72, 129-130, 150-153, 182-198, 201-202, 262-264, 310-311, 321-322, 328-333, 336-337, 348-349, 361-363, 366-367, 370-381, 385-473, 497-502
Unchanged Files
demo/demo.ts	0%	0%	0%	0%	1-115
src/columnresizing.ts	6.99%	50%	6.66%	6.99%	58-112, 119-121, 125-139, 142-387, 399-432
src/commands.ts	85.13%	85.56%	84%	85.13%	189, 192-193, 353, 356-357, 442-443, 514-515, 621, 713, 732, 743, 787-819, 828-842, 850-865, 873-893
src/copypaste.ts	98.71%	90.36%	100%	98.71%	330-331, 342-343
src/fixtables.ts	78.94%	88.57%	75%	78.94%	24-47
src/index.ts	90.56%	50%	80%	90.56%	113, 126-129
src/input.ts	33.33%	60.71%	44.44%	33.33%	71-76, 91-93, 101-119, 123-128, 134-175, 178-248, 261, 269-291
src/schema.ts	65.25%	61.53%	45.45%	65.25%	13-37, 120-132, 164-165, 196-197
src/tablemap.ts	93.07%	95.16%	87.5%	93.07%	61-74, 140, 150, 355-356
src/tableview.ts	7.59%	100%	0%	7.59%	15-28, 31-40, 43-47, 54-101
src/util.ts	74.57%	88.37%	71.42%	74.57%	36-37, 45-46, 78-79, 85-102, 115-116, 133-134, 140-141

Generated in workflow #17 for commit 09b064e by the Vitest Coverage Report Action

[shiz-ceo]

At the moment, this PR solves the top-down selection issue, but it creates a flickering problem.

Screen.Recording.2025-08-11.102618.mp4

For selection from bottom to top, the previous bug + flickering remains

Screen.Recording.2025-08-11.102648.mp4

[shiz-ceo]

I think the problem happens when we start moving the cursor. After all, according to the new logic added to expandTextSelectionAcrossTable, when we first enter the table, we immediately set the selection to the entire table. But the cursor itself remains "roughly speaking" in place. Because of this, when we start moving the cursor again, the old selection is restored for a second, and then the full selection of the table is restored.

[ocavue]

This PR may not be the ideal solution for #291.

1. There is a selection flashing issue on Safari and Firefox, although it works fine on Chrome.

CleanShot.2025-08-11.at.18.25.19.mp4

2. It still doesn't resolve the empty cell issue, particularly when the table node is the first node in the document. In this case, the first valid from point for a TextSelection is inside the first table cell, meaning the TextSelection cannot fully wrap the table.

CleanShot.2025-08-11.at.18.28.53.mp4

I'll think more about it...

[shiz-ceo]

1. I have some idea for flashing issue, but I don't really understand prosemirror-tabes. The idea is to track mousemove. This logic should probably be expanded. If we have the cursor in a table, the initial selection is behind the table, and it's already selected, then when we move, we should simply prevent the browser from making a selection, but as soon as we move the cursor out of the table, we can allow it again.

2. About empty cell issue. We can check (recursive) if after cut (f.e.) we have an empty table on the top. But we need to check for the next table (for nested tables). If the next table have content -> clear child table, either do the same thing, with "next" table.

[shiz-ceo]

I noticed another strange behavior, which is probably related to our problem. When we select and drag the table, the empty cell remains in the same position.

Screen.Recording.2025-08-11.124105.mp4

[shiz-ceo]

About empty cell issue. We can check (recursive) if after cut (f.e.) we have an empty table on the top. But we need to check for the next table (for nested tables). If the next table have content -> clear child table, either do the same thing, with "next" table.

I have solution for this case. It need's some changed in expandTextSelectionAcrossTable:

  return $anchor.pos < $head.pos
    ? TextSelection.between($anchor, doc.resolve(headTableEnd), 1)
    : TextSelection.between($anchor, doc.resolve(Math.max(headTableStart - 2, 0)), -1);

This Math.max(headTableStart - 2, 0) will set selection to the previous block at the end. But, we need to check for negative numbers (in doc start, we can get -1 or -2)

Screen.Recording.2025-08-11.133538.mp4

But if table at the start of the document, only this fix won't work.

Screen.Recording.2025-08-11.133837.mp4

For that keys, I also have solution. In appendTransaction in fixTables we need to check if doc is empty and we a in the table.

const check = (node: Node, pos: number) => {
    if (node.type.spec.tableRole == 'table') {
      if (isNodeEmpty(state.doc) && node.content.content.length === 1) {
        tr = (tr || state.tr).replaceRangeWith(0, state.doc.content.size, state.schema.node("paragraph"))
      } else {
        tr = fixTable(state, node, pos, tr);
      }
    }
  };

/**
 * Returns true if the given prosemirror node is empty.
 */
export function isNodeEmpty(
  node: Node,
  {
    checkChildren = true,
    ignoreWhitespace = false,
  }: {
    /**
     * When true (default), it will also check if all children are empty.
     */
    checkChildren?: boolean
    /**
     * When true, it will ignore whitespace when checking for emptiness.
     */
    ignoreWhitespace?: boolean
  } = {},
): boolean {
  if (ignoreWhitespace) {
    // Hard breaks are considered empty
    if (node.type.name === 'hardBreak') return true
    if (node.isText) return /^\s*$/m.test(node.text ?? '')
  }

  if (node.isText) return !node.text
  if (node.isAtom || node.isLeaf) return false
  if (node.content.childCount === 0) return true

  if (checkChildren) {
    let isContentEmpty = true

    node.content.forEach(childNode => {
      // Exit early for perf
      if (isContentEmpty === false) return

      if (!isNodeEmpty(childNode, { ignoreWhitespace, checkChildren })) isContentEmpty = false
    })

    return isContentEmpty
  }

  return false
}

Screen.Recording.2025-08-11.134402.mp4

Also, in this method, we need to check, if table contains only one row, otherwise, this method will be delete the whole table, but it shouldn't.

Screen.Recording.2025-08-11.143628.mp4

[shiz-ceo]

I noticed another strange behavior, which is probably related to our problem. When we select and drag the table, the empty cell remains in the same position.
https://github.com/user-attachments/assets/3c7ca7d8-6be2-48cb-b095-d4b3343547b8

This bug was solved, after this fix: Math.max(headTableStart - 2, 0), but there is new one :)

Magically, the empty table disappears, but an empty line appears before the insertion.

Screen.Recording.2025-08-11.150245.mp4

EDITED: I think it's happening because of the pre-capture previous block

[shiz-ceo]

I noticed another strange behavior, which is probably related to our problem. When we select and drag the table, the empty cell remains in the same position.
https://github.com/user-attachments/assets/3c7ca7d8-6be2-48cb-b095-d4b3343547b8

This bug was solved, after this fix: Math.max(headTableStart - 2, 0), but there is new one :)

Magically, the empty table disappears, but an empty line appears before the insertion.
Screen.Recording.2025-08-11.150245.mp4

EDITED: I think it's happening because of the pre-capture previous block

FIXED

With this changes, this bug is fixed:

export function fixTables(
  transactions: readonly Transaction[],
  state: EditorState,
  oldState?: EditorState,
): Transaction | undefined {
  if (!state) return;
  let tr: Transaction | undefined;

  if (Array.isArray(transactions)) {
    const drop = transactions.filter(t =>  t.getMeta("uiEvent") === "drop")
    if (drop.length > 0) {
      const maybeEmptyParagraph = state.selection.$anchor.parent
      const maybeTable = state.doc.resolve(Math.min(state.selection.anchor + 2, state.doc.content.size)).parent

      if (
        (maybeEmptyParagraph && isNodeEmpty(maybeEmptyParagraph)) && (maybeTable && maybeTable.type.name === "table")
      ) {
        tr = (tr || state.tr).delete(state.selection.anchor - 1, state.selection.anchor + 2)
      }
    }
  }
  
  // Other code..
}

appendTransaction(transactions, oldState, state) {
      return normalizeSelection(
        state,
        fixTables(transactions, state, oldState),
        allowTableNodeSelection,
      );
    }

Screen.Recording.2025-08-11.152329.mp4

[shiz-ceo]

@ocavue Please check my solutions for these problems. Hot to fix selection flashing issue I don't know. In Google Docs always fine, because they use canvas for editor.

In Chrome this doesn't work at all :)

Screen.Recording.2025-08-11.155603.mp4

[shiz-ceo]

I suggest to use Notion behavior. In this case, it's the most easiest way to deal with selection without flashing issues (i try to debug prosemirror-view for the selection and in my opinion, it's unreal to create much better then Notion).

Screen.Recording.2025-08-12.002303.mp4

[ocavue]

I like how Notion. I'm not quite sure how to implement it just yet, but I'll revisit this when I have more free time.

[shiz-ceo]

I like how Notion. I'm not quite sure how to implement it just yet, but I'll revisit this when I have more free time.

@ocavue

I try to get the same behavior and get it but with little bug (I have no ideas why this happens).

mouseup: (view) => {
          if (!isInTable(view.state)) return false;
          let headTableStart = -1;
          let headTableEnd = -1;

          for (let i = view.state.selection.$head.depth; i > 0; i--) {
            const node = view.state.selection.$head.node(i);
            if (node.type.spec.tableRole === 'table') {
              headTableStart = view.state.selection.$head.start(i);
              headTableEnd = view.state.selection.$head.end(i);
              break;
            }
          }

          // head is not in a table
          if (headTableStart === headTableEnd) return;
          // anchor is inside this table
          if (headTableStart <= view.state.selection.$anchor.pos && view.state.selection.$anchor.pos <= headTableEnd) return;

          const selection = view.state.selection.$anchor.pos < view.state.selection.$head.pos
            ? TextSelection.between(view.state.selection.$anchor, view.state.doc.resolve(headTableStart), 1)
            : TextSelection.between(view.state.doc.resolve(headTableEnd), view.state.selection.$anchor, -1)

          console.log(selection);

          view.dispatch(view.state.tr.setSelection(selection))

          return false;
        }

And we need to remove these part:

// else if (sel instanceof TextSelection) {
//   normalize ||= expandTextSelectionAcrossTable(sel);
// }

Screen.Recording.2025-08-12.171057.mp4

[shiz-ceo]

I'm tried several places for this logic (also in normalizeSelection) and the upper selection isn't set. Selection is correct but it don't set.

[shiz-ceo]

It;s a mystic with upper selection. I create method to deal with this in normalizeSelection but this bug appeared again.

And, It's crazy.. If i change selection.$anchor to a static number - It's work!.. I don't know why.
Change this

TextSelection.between(selection.$anchor, state.doc.resolve(headTableStart), 1)

to 22 (it's table word position)

TextSelection.between(state.doc.resolve(22), state.doc.resolve(headTableStart), 1)

But, on new appendTransaction it's changed, if use selection.$anchor P.S. (I have console.log in this part of code and It's not called)

Screen.Recording.2025-08-12.192124.mp4

[shiz-ceo]

It's a bug works only on Firefox. Blue selection stays on table, but the actual selection stands on text and it;s correct (if press backspace, only the desired content before the table will be removed). If a new transaction occurs, the blue selection return to its correct place.

Screen.Recording.2025-08-12.194817.mp4

I tested Google Chrome and its work correct.

Screen.Recording.2025-08-12.194843.mp4