Bug: [lexical-y] Undoing a collaborator's format steps around text you typed can spread or drop a format, in rare cases the #9671 and #9599 rules introduced #9690

// @vitest-environment node

// Three short sequences in which a format ends up on text nobody formatted.
// Each passes on cfcd3c40 (main before #9679) and fails on main, gc on and off.
// B makes its steps (each its own undo step), A types a plain character, B
// undoes everything. Expected: every original letter keeps exactly its
// original formats, A's character is plain, B's "Z" is gone.

import {
  buildEditorFromExtensions,
  getExtensionDependencyFromEditor,
} from '@lexical/extension';
import {RichTextExtension} from '@lexical/rich-text';
import * as Y from '@y/y';
import {
  $createParagraphNode,
  $createRangeSelection,
  $createTextNode,
  $getRoot,
  $isElementNode,
  $isTextNode,
  $setSelection,
  configExtension,
  defineExtension,
  type TextFormatType,
  type TextNode,
  UNDO_COMMAND,
} from 'lexical';
import {expect, test} from 'vitest';

import {createYDoc, YCollabExtension} from '../..';
import {seedYState} from '../../headless';

const CONFIG = {extensions: [RichTextExtension], schemaVersion: 1};
type F = 'b' | 'i' | 's';
const FMT: Record<F, TextFormatType> = {b: 'bold', i: 'italic', s: 'strikethrough'};
type Op =
  | {k: 'fmt'; i: number; j: number; key: F; v: boolean}
  | {k: 'Z'; i: number}
  | {k: 'A'; i: number; ch: string}
  | {k: 'sync'}
  | {k: 'undo'};

function $texts(): TextNode[] {
  const p = $getRoot().getFirstChildOrThrow();
  return $isElementNode(p) ? p.getChildren().filter($isTextNode) : [];
}
function $at(i: number): [TextNode, number] {
  let acc = 0;
  const ts = $texts();
  for (const t of ts) {
    if (i <= acc + t.getTextContentSize()) return [t, i - acc];
    acc += t.getTextContentSize();
  }
  const last = ts[ts.length - 1];
  return [last, last.getTextContentSize()];
}
function $select(i: number, j: number) {
  const s = $createRangeSelection();
  const [a, ao] = $at(i);
  const [b, bo] = $at(j);
  s.anchor.set(a.getKey(), ao, 'text');
  s.focus.set(b.getKey(), bo, 'text');
  $setSelection(s);
  return s;
}
function $typePlain(i: number, text: string) {
  const s = $select(i, i);
  s.format = 0;
  s.insertText(text);
  $setSelection(null);
}
function $setRange(i: number, j: number, key: F, v: boolean) {
  for (const n of $select(i, j).extract()) {
    if ($isTextNode(n) && n.hasFormat(FMT[key]) !== v) n.toggleFormat(FMT[key]);
  }
  $setSelection(null);
}
const $chars = () =>
  $texts().flatMap(t => [...t.getTextContent()].map(c => c + (['b', 'i', 's'] as F[]).filter(k => t.hasFormat(FMT[k])).join('')));

function run(words: [string, F[]][], ids: [number, number], gc: boolean, ops: Op[]) {
  const seeded = seedYState(CONFIG, () => {
    const p = $createParagraphNode();
    for (const [w, fs] of words) {
      const t = $createTextNode(w);
      for (const f of fs) t.toggleFormat(FMT[f]);
      p.append(t);
    }
    $getRoot().clear().append(p);
  });
  const [A, B] = ids.map(id => {
    const doc = createYDoc(seeded, {gc});
    doc.clientID = id;
    const editor = buildEditorFromExtensions(
      defineExtension({
        dependencies: [RichTextExtension, configExtension(YCollabExtension, {captureTimeout: 2 ** 30, doc, schemaVersion: 1, synced: true})],
        name: `repro/${id}`,
      }),
    );
    const {binding} = getExtensionDependencyFromEditor(editor, YCollabExtension).output;
    return {binding, doc, editor};
  });
  const sync = () => {
    Y.applyUpdate(B.doc, Y.encodeStateAsUpdate(A.doc, Y.encodeStateVector(B.doc)));
    Y.applyUpdate(A.doc, Y.encodeStateAsUpdate(B.doc, Y.encodeStateVector(A.doc)));
  };
  for (const op of ops) {
    if (op.k === 'sync') sync();
    else if (op.k === 'undo') B.editor.dispatchCommand(UNDO_COMMAND, undefined);
    else if (op.k === 'A') A.editor.update(() => $typePlain(op.i, op.ch), {discrete: true});
    else {
      B.editor.update(() => (op.k === 'Z' ? $typePlain(op.i, 'Z') : $setRange(op.i, op.j, op.key, op.v)), {discrete: true});
      B.binding.undoManager?.stopCapturing();
    }
  }
  sync();
  const a = A.editor.getEditorState().read($chars);
  expect(B.editor.getEditorState().read($chars)).toEqual(a);
  return a.filter(c => !/^[0-9]/.test(c)).join(' ');
}

const CASES: {name: string; words: [string, F[]][]; ids: [number, number]; ops: Op[]}[] = [
  {
    // italic over "ef", Z typed inside, italic over "Z" and the rest; A types 1
    ids: [2, 1],
    name: 'restore of own earlier insert removed (#9671 rule, restore side)',
    ops: [{i: 4, j: 9, k: 'fmt', key: 'i', v: true}, {i: 7, k: 'Z'}, {i: 7, j: 11, k: 'fmt', key: 'i', v: true}, {k: 'sync'}, {ch: '1', i: 8, k: 'A'}, {k: 'undo'}, {k: 'undo'}, {k: 'undo'}],
    words: [['abc', ['i']], ['def', []], ['ghi', []]],
  },
  {
    // Z typed into the struck text, then strikethrough removed over it; A types 1
    ids: [2, 1],
    name: 'restore scan stops at another client\'s text (#9599 rule)',
    ops: [{i: 9, k: 'Z'}, {k: 'sync'}, {i: 9, j: 15, k: 'fmt', key: 's', v: false}, {ch: '1', i: 12, k: 'A'}, {k: 'undo'}, {k: 'undo'}],
    words: [['abc', ['s']], ['def', ['i', 's']], ['ghi', []], ['jkl', ['b', 's']], ['mno', ['s']]],
  },
];

for (const c of CASES) {
  for (const gc of [false, true]) {
    test(`${c.name} (gc ${gc ? 'on' : 'off'}, ids ${c.ids})`, () => {
      const orig = c.words.flatMap(([w, fs]) => [...w].map(ch => ch + (['b', 'i', 's'] as F[]).filter(k => fs.includes(k)).join(''))).join(' ');
      expect(run(c.words, c.ids, gc, c.ops)).toBe(orig);
    });
  }
}

// @vitest-environment node
import {$addMarkID, $getNodeMarkIDs, $removeMarkID} from '@lexical/mark';
import {$createParagraphNode, $createTextNode, $getRoot, type LexicalNode, type TextNode} from 'lexical';
import {expect, test} from 'vitest';

import {$block, $selectIn, expectConverged, setup} from '../utils/harness';
import {prepareMarkState as prepare} from '../utils/sizeOps';

void $removeMarkID;
const words = [["w0ab", "w1abc", "w2abcd", "w3a", "w4a", "w5ab", "w6abc"], ["w7ab", "w8abc", "w9ab", "w10abc"]];
const preFmt = [[0, 0, 0, 0, 8, 0, 0], [1, 2, 0, 0]];
function $plain(l: number, off: number, text: string) {
  for (const node of $block([l]).getAllTextNodes() as TextNode[]) {
    const size = node.getTextContentSize();
    if (off > 0 && off < size) {
      const [, tail] = node.splitText(off);
      tail.insertBefore($createTextNode(text));
      return;
    }
    if (off === size) {
      node.insertAfter($createTextNode(text));
      return;
    }
    off -= size;
  }
}

test("the sentinel line stays plain", async () => {
  const t = await setup(
    () => {
      words.forEach((ws, l) => {
        const p = $createParagraphNode();
        ws.forEach((w, i) => p.append($createTextNode(w + (i < ws.length - 1 ? ' ' : '')).setFormat(preFmt[l][i])));
        $getRoot().append(p);
      });
      $getRoot().append($createParagraphNode().append($createTextNode('tail sentinel line')));
    },
    {ids: [3, 1, 2], prepare},
  );
  for (const p of t.peers) p.binding.undoManager?.clear();
  t.offline();
  t.peers[1].update(() => $plain(1, 2, "xq17"));
  t.peers[0].update(() => void $selectIn([1], 0, 12).removeText());
  await t.sync();
  t.peers[1].update(() => void $selectIn([1], 0, 13).formatText("bold"));
  t.offline();
  t.peers[1].undo();
  t.peers[2].update(() => void $selectIn([1], 8).insertText("k18"));
  await t.sync();
  await expectConverged(t.peers);
  const sentinel = t.peers[0].read(() =>
    ($block([2]).getAllTextNodes() as TextNode[]).map(n => [n.getFormat(), $getNodeMarkIDs(n as LexicalNode).join(',')]),
  );
  expect(sentinel).toEqual([[0, '']]);
});