@microsoft/dragon-copilot-sdk-lexical-react 0.2.6-beta.4636686

package/node_modules/@dragon-speech-sdk/lexical-react/src/custom-control/selection-helpers.spec.ts

@@ -0,0 +1,591 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import {
+  convertToCustomControlSelectionSafe,
+  createSelection,
+  getFormattingForSelection,
+  getValidEndOffset,
+  isSelectionSame,
+  serializeSelection,
+} from "./selection-helpers";
+import {
+  $getRoot,
+  $isRangeSelection,
+  $isTextNode,
+  $getNodeByKey,
+  $isLineBreakNode,
+  $getSelection,
+  type LexicalEditor,
+  type LexicalNode,
+  type RangeSelection,
+  type RootNode,
+  type LineBreakNode,
+} from "lexical";
+import { $createOffsetView, type OffsetView } from "./offset";
+import { FormattingBoundaries, type FormattingBoundary } from "@hccm/web-tcl";
+
+// Mock @hccm/web-tcl to avoid browser detection issues
+vi.mock("@hccm/web-tcl", () => ({
+  FormattingBoundaries: {
+    Start: "start",
+    End: "end",
+  },
+}));
+
+vi.mock("lexical", async () => {
+  const actual = await vi.importActual("lexical");
+  return {
+    ...actual,
+    $getRoot: vi.fn(),
+    $getSelection: vi.fn(),
+    $isRangeSelection: vi.fn(),
+    $isTextNode: vi.fn(),
+    $isLineBreakNode: vi.fn(),
+    $setSelection: vi.fn(),
+    $addUpdateTag: vi.fn(),
+    $getNodeByKey: vi.fn(),
+  };
+});
+
+vi.mock("./offset", () => ({
+  $createOffsetView: vi.fn(),
+}));
+
+let textNodes: LexicalNode[] = [];
+let lineBreakNodes: LexicalNode[] = [];
+
+describe("selectionHelpers", () => {
+  afterEach(() => {
+    textNodes = [];
+    lineBreakNodes = [];
+    vi.resetAllMocks();
+  });
+
+  describe("convertToCustomControlSelectionSafe", () => {
+    it("should convert a valid RangeSelection", () => {
+      const start = 5;
+      const end = 10;
+      const mockSelection = arrangeRangeSelection(start, end);
+      arrangeOffsetView(start, end, mockSelection);
+      const mockEditor = {} as LexicalEditor;
+
+      const result = convertToCustomControlSelectionSafe(mockSelection, mockEditor);
+
+      expect(result).toEqual({ start: start, end: end });
+    });
+
+    it("should return cursor at the end of field for non-RangeSelection", () => {
+      vi.mocked($isRangeSelection).mockReturnValue(false);
+      const endOfFieldOffset = 42;
+      arrangeTextContentSize(endOfFieldOffset);
+      const mockEditor = {} as LexicalEditor;
+
+      const result = convertToCustomControlSelectionSafe(null, mockEditor);
+
+      expect(result).toEqual({ start: endOfFieldOffset, end: endOfFieldOffset });
+    });
+
+    it("should make lower offset as start and higher offset as end when the lower offset is selection.focus", () => {
+      const anchorOffset = 10;
+      const focusOffset = 5;
+      const start = 5;
+      const end = 10;
+      const mockSelection = arrangeRangeSelection(anchorOffset, focusOffset);
+      arrangeOffsetView(anchorOffset, focusOffset, mockSelection);
+      const mockEditor = {} as LexicalEditor;
+
+      const result = convertToCustomControlSelectionSafe(mockSelection, mockEditor);
+
+      expect(result).toEqual({ start: start, end: end });
+    });
+
+    it("should return 0 value when offset by offsetView is -1", () => {
+      const start = -1;
+      const end = -1;
+      const mockSelection = arrangeRangeSelection(start, end);
+      arrangeOffsetView(start, end, mockSelection);
+      const mockEditor = {} as LexicalEditor;
+
+      const result = convertToCustomControlSelectionSafe(mockSelection, mockEditor);
+
+      expect(result).toEqual({ start: 0, end: 0 });
+    });
+  });
+
+  describe("isSelectionSame", () => {
+    it("should return true for same selection", () => {
+      const start = 5;
+      const end = 10;
+      const mockSelection = arrangeRangeSelection(start, end);
+      const mockEditor = {} as LexicalEditor;
+      const selection = { start: start, end: end };
+      arrangeOffsetView(start, end, mockSelection);
+
+      const result = isSelectionSame(selection, mockSelection, mockEditor);
+
+      expect(result).toBe(true);
+    });
+
+    it("should return false for a different selection", () => {
+      const anchorOffset = 4;
+      const focusOffset = 10;
+      const start = 5;
+      const end = 10;
+      const mockSelection = arrangeRangeSelection(anchorOffset, focusOffset);
+      const mockEditor = {} as LexicalEditor;
+      const selection = { start: start, end: end };
+      arrangeOffsetView(anchorOffset, focusOffset, mockSelection);
+
+      const result = isSelectionSame(selection, mockSelection, mockEditor);
+
+      expect(result).toBe(false);
+    });
+
+    it("should return true when range selection is a flipped version (focus has the lower offset) of selection", () => {
+      const anchorOffset = 10;
+      const focusOffset = 5;
+      const start = 5;
+      const end = 10;
+      const mockSelection = arrangeRangeSelection(anchorOffset, focusOffset);
+      const mockEditor = {} as LexicalEditor;
+      const selection = { start: start, end: end };
+      arrangeOffsetView(anchorOffset, focusOffset, mockSelection);
+
+      const result = isSelectionSame(selection, mockSelection, mockEditor);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("getValidEndOffset", () => {
+    it("should return the desired end offset when it is under text content size", () => {
+      const desiredEndOffset = 10;
+      arrangeTextContentSize(20);
+
+      const result = getValidEndOffset(desiredEndOffset);
+
+      expect(result).toEqual(desiredEndOffset);
+    });
+
+    it("should return the desired end offset when it is the same as text content size", () => {
+      const desiredEndOffset = 10;
+      arrangeTextContentSize(20);
+
+      const result = getValidEndOffset(desiredEndOffset);
+
+      expect(result).toEqual(desiredEndOffset);
+    });
+
+    it("should return the text content size when the desired end offset is greater than text content size", () => {
+      const desiredEndOffset = 30;
+      arrangeTextContentSize(20);
+
+      const result = getValidEndOffset(desiredEndOffset);
+
+      expect(result).toEqual(20);
+    });
+
+    it("should return 0 when the desired end offset is negative", () => {
+      const desiredEndOffset = -10;
+      arrangeTextContentSize(20);
+
+      const result = getValidEndOffset(desiredEndOffset);
+
+      expect(result).toEqual(0);
+    });
+  });
+
+  describe("createSelection", () => {
+    it("should return the value returned by offsetView.createSelectionFromOffsets", () => {
+      const start = 5;
+      const end = 10;
+      arrangeTextContentSize(10);
+      const mockSelection = arrangeRangeSelection(start, end);
+      const mockEditor = {} as LexicalEditor;
+      arrangeOffsetView(start, end, mockSelection);
+
+      const result = createSelection(start, end, mockEditor);
+
+      expect(result).toEqual(mockSelection);
+    });
+
+    it("should call $createOffsetView with the passed in editor", () => {
+      const start = 5;
+      const end = 10;
+      const mockEditor = {} as LexicalEditor;
+      arrangeTextContentSize(10);
+      arrangeOffsetView(start, end, null);
+
+      createSelection(start, end, mockEditor);
+
+      expect($createOffsetView).toHaveBeenCalledWith(mockEditor);
+    });
+
+    it("should call offsetView.createSelectionFromOffsets with text content size as end offset when the passed in end offset is greater than text content size", () => {
+      const start = 5;
+      const end = 11;
+      const textContentSize = 10;
+      arrangeTextContentSize(textContentSize);
+      const mockEditor = {} as LexicalEditor;
+      const offsetViewMock = arrangeOffsetView(start, end, null);
+
+      createSelection(start, end, mockEditor);
+
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      expect(offsetViewMock.createSelectionFromOffsets).toHaveBeenLastCalledWith(start, textContentSize);
+    });
+
+    it("should not adjust focus to the end of previous node when previous node is not text", () => {
+      const start = 5;
+      const end = 10;
+      arrangeTextContentSize(15);
+      const previousNodeKey = "keyPrevious";
+      const endOfPreviousNode = end;
+      const selectionNodes = arrangeNodesForSelection(previousNodeKey, endOfPreviousNode, false);
+      const mockSelection = arrangeRangeSelection(start, 0, false, selectionNodes);
+      const mockEditor = {} as LexicalEditor;
+      arrangeOffsetView(start, end, mockSelection);
+
+      createSelection(start, end, mockEditor);
+
+      expect(mockSelection.focus.set).not.toHaveBeenCalled();
+    });
+
+    it("should return the format end node of selection  when matchFormattingAtThe is 'end'", () => {
+      // Test text: "The quick brown.  Fox jumps"
+      // Where "The " is normal non formatted, "quick brown" is bold and "fox jumps" is italic text
+      // The space (2 whitespaces) between "quick brown" and "fox jumps" is also normal non formatted text
+      // Thus we have 4 text nodes
+
+      const mockEditor = {} as LexicalEditor;
+      const words = [
+        { key: "4", text: "The ", format: 0 },
+        { key: "5", text: "quick brown.", format: 1 }, // Bold
+        { key: "6", text: "  ", format: 0 },
+        { key: "7", text: "Fox jumps", format: 2 }, // Italic
+      ];
+
+      const textNodes = words.map(({ key, text, format }) => createTextNode(text, format, text.length, key));
+
+      arrangeTextContentSize(26);
+
+      const mockSelection = arrangeRangeSelection(1, 1, false, textNodes, "6", "7", 0);
+
+      vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+        return textNodes.find((node) => node.getKey() === key) ?? null;
+      });
+
+      // Selection is at ' F' i.e. simulate right context in text ' brown.  Fox'
+      const start = 18;
+      const end = 19;
+
+      arrangeOffsetView(start, end, mockSelection);
+
+      // Take formatting of the end for selection formatting use case, hence `matchFormattingAtThe` is set to 'end'
+      const matchFormattingAtThe: FormattingBoundary = FormattingBoundaries.End;
+      const result = createSelection(start, end, mockEditor, matchFormattingAtThe);
+
+      expect(result?.format).toEqual(2); // expect the format to be 2 (italic) i.e. focus node's format
+    });
+  });
+
+  describe("getFormattingForSelection", () => {
+    // Test text: "The quick brown.  Fox jumps"
+    // Where "The " is normal non formatted, "quick brown" is bold and "fox jumps" is italic text
+    // The space (2 whitespaces) between "quick brown" and "fox jumps" is also normal non formatted text
+    // Thus we have 4 text nodes
+
+    const words = [
+      { key: "4", text: "The ", format: 0 },
+      { key: "5", text: "quick brown.", format: 1 }, // Bold
+      { key: "6", text: "  ", format: 0 },
+      { key: "7", text: "Fox jumps", format: 2 }, // Italic
+    ];
+
+    it.for([
+      { nodeType: "TextNode", createNode: createTextNode, expectedResultFormat: 1 }, // Bold
+      { nodeType: "LineBreakNode", createNode: createLineBreakNode, expectedResultFormat: 0 },
+    ])(
+      "should return format of first node in selection with $nodeType when the matchFormattingAtThe is 'undefined'",
+      ({ createNode, expectedResultFormat }) => {
+        const textNodes = words.map(({ key, text, format }) => createNode(text, format, text.length, key));
+
+        const anchorKey = "5";
+        const focusKey = "7";
+        const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+        // Selection is at 'own.  Fox' from text 'brown.  Fox' i.e 3 nodes selection
+        const mockSelection = arrangeRangeSelection(8, 3, false, filteredNodes, anchorKey, focusKey, 0);
+
+        vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+          return textNodes.find((node) => node.getKey() === key) ?? null;
+        });
+
+        const result = getFormattingForSelection(mockSelection, undefined);
+
+        expect(result).toEqual(expectedResultFormat);
+      },
+    );
+
+    it.for([
+      { nodeType: "TextNode", createNode: createTextNode, expectedResultFormat: 2 }, // Italic
+      { nodeType: "LineBreakNode", createNode: createLineBreakNode, expectedResultFormat: 0 },
+    ])(
+      "should return format of end $nodeType when matchFormattingAtThe is 'end'",
+      ({ createNode, expectedResultFormat }) => {
+        const textNodes = words.map(({ key, text, format }) => createNode(text, format, text.length, key));
+
+        const anchorKey = "6";
+        const focusKey = "7";
+        const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+        // Selection is at ' F' i.e. simulate right context in text ' brown.  Fox'
+        const mockSelection = arrangeRangeSelection(1, 1, false, filteredNodes, anchorKey, focusKey, 0);
+
+        vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+          return textNodes.find((node) => node.getKey() === key) ?? null;
+        });
+
+        const matchFormattingAtThe: FormattingBoundary = FormattingBoundaries.End;
+        const result = getFormattingForSelection(mockSelection, matchFormattingAtThe);
+
+        expect(result).toEqual(expectedResultFormat);
+      },
+    );
+
+    it.for([
+      { nodeType: "TextNode", createNode: createTextNode, expectedResultFormat: 1 }, // Bold
+      { nodeType: "LineBreakNode", createNode: createLineBreakNode, expectedResultFormat: 0 },
+    ])(
+      "should return format of previous node with $nodeType when matchFormattingAtThe is 'start' and selection starts at edge of nodes",
+      ({ createNode, expectedResultFormat }) => {
+        const textNodes = words.map(({ key, text, format }) => createNode(text, format, text.length, key));
+        textNodes[2].getPreviousSibling = vi.fn().mockReturnValue(textNodes[1]);
+
+        const anchorKey = "6";
+        const focusKey = "6";
+        const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+        // Selection is at ' ' (single whitespace) after period in "brown.  Fox"
+        const mockSelection = arrangeRangeSelection(0, 1, false, filteredNodes, anchorKey, anchorKey, 0);
+        mockSelection.getTextContent = vi.fn().mockReturnValue(" ");
+
+        vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+          return textNodes.find((node) => node.getKey() === key) ?? null;
+        });
+
+        const matchFormattingAtThe: FormattingBoundary = FormattingBoundaries.Start;
+        const result = getFormattingForSelection(mockSelection, matchFormattingAtThe);
+
+        expect(result).toEqual(expectedResultFormat);
+      },
+    );
+
+    it.for([
+      { nodeType: "TextNode", createNode: createTextNode, expectedResultFormat: 1 }, // Bold
+      { nodeType: "LineBreakNode", createNode: createLineBreakNode, expectedResultFormat: 0 },
+    ])(
+      "should return format of current selection node with $nodeType when matchFormattingAtThe is 'start' and selection starts in the middle of node",
+      ({ createNode, expectedResultFormat }) => {
+        const textNodes = words.map(({ key, text, format }) => createNode(text, format, text.length, key));
+
+        const anchorKey = "5";
+        const focusKey = "7";
+        const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+
+        // Selection is at 'own.  Fox' from text 'brown.  Fox' i.e 3 nodes selection
+        const mockSelection = arrangeRangeSelection(8, 3, false, filteredNodes, anchorKey, focusKey, 0);
+
+        vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+          return textNodes.find((node) => node.getKey() === key) ?? null;
+        });
+
+        const matchFormattingAtThe: FormattingBoundary = FormattingBoundaries.Start;
+        const result = getFormattingForSelection(mockSelection, matchFormattingAtThe);
+
+        expect(result).toEqual(expectedResultFormat);
+      },
+    );
+
+    it("should return currentSelectionInEditor's format when anchor key differs from input selection's anchor key and selection offset is 0 and matchFormattingAtThe is 'start'", () => {
+      const nodesWithDifferentFormats = [
+        { key: "4", text: "This is a test.", format: 1 }, // Bold
+        { key: "5", text: "  ", format: 0 }, // Normal (2 spaces)
+        { key: "6", text: "Patient complains of headache.", format: 2 }, // Italic
+        { key: "7", text: "\n", format: 0, isLineBreakNode: true }, // LineBreak node (normal format)
+        { key: "8", text: "This is another test.", format: 8 }, // Underline
+      ];
+
+      const textNodes = nodesWithDifferentFormats.map(({ key, text, format, isLineBreakNode }) =>
+        isLineBreakNode
+          ? createLineBreakNode(text, format, text.length, key)
+          : createTextNode(text, format, text.length, key),
+      );
+
+      // Mock current editor selection at "This is a test.¦"  (¦ => represents cursor)
+      const currentSelectionInEditor = arrangeRangeSelection(15, 15, true, [textNodes[0]], "4", "4", 1); // Bold format
+      currentSelectionInEditor.anchor.getNode = vi.fn().mockReturnValue(textNodes[0]);
+      textNodes[0].getNextSibling = vi.fn().mockReturnValue(textNodes[1]);
+
+      vi.mocked($getSelection).mockReturnValue(currentSelectionInEditor);
+
+      const anchorKey = "5";
+      const focusKey = "5";
+      const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+      // Selection is at ' ' (single whitespace) after period in "test.  Patient"
+      const mockSelection = arrangeRangeSelection(0, 1, false, filteredNodes, anchorKey, anchorKey, 0);
+      mockSelection.getTextContent = vi.fn().mockReturnValue(" ");
+
+      vi.mocked($isRangeSelection).mockReturnValue(true);
+      vi.mocked($getNodeByKey).mockImplementation((key: string) => {
+        return textNodes.find((node) => node.getKey() === key) ?? null;
+      });
+
+      const result = getFormattingForSelection(mockSelection, FormattingBoundaries.Start);
+
+      expect(result).toBe(1); // Should return currentEditorSelection.format
+    });
+
+    it("should return currentSelectionInEditor's format when currentSelectionInEditor's anchor key and offset match selection's anchor key and offset", () => {
+      const nodesWithDifferentFormats = [
+        { key: "4", text: "This is a test.  Patient complains of headache.", format: 1 }, // Bold
+      ];
+
+      const textNodes = nodesWithDifferentFormats.map(({ key, text, format }) =>
+        createTextNode(text, format, text.length, key),
+      );
+
+      // Mock current editor selection at "This is a test.¦"  (¦ => represents cursor)
+      // Change the format of currentSelectionInEditor to a different format, let's say 8 (Underline)
+      const currentSelectionInEditor = arrangeRangeSelection(15, 15, true, [textNodes[0]], "4", "4", 8); // Underline format
+
+      vi.mocked($getSelection).mockReturnValue(currentSelectionInEditor);
+
+      const anchorKey = "4";
+      const focusKey = "4";
+      const filteredNodes = textNodes.filter((node) => node.getKey() === anchorKey || node.getKey() === focusKey);
+      // Selection is at 'test.¦' i.e after period in "test.  Patient"
+      const mockSelection = arrangeRangeSelection(15, 15, false, filteredNodes, anchorKey, anchorKey, 0);
+
+      vi.mocked($isRangeSelection).mockReturnValue(true);
+
+      const result = getFormattingForSelection(mockSelection, FormattingBoundaries.Start);
+
+      expect(result).toBe(8); // Should return currentEditorSelection.format
+    });
+  });
+
+  describe("serializeSelection", () => {
+    it("should serialize a RangeSelection", () => {
+      const mockSelection = arrangeRangeSelection(5, 10);
+
+      const result = serializeSelection(mockSelection);
+
+      expect(result).toEqual(
+        `{ anchor: { key: keyAnchor, offset: 5 }, focus: { key: keyFocus, offset: 10 }, format: 0 }`,
+      );
+    });
+  });
+});
+
+function createTextNode(text: string, format: number, textContentSize: number, nodeKey: string): LexicalNode {
+  const mockTextNode = {
+    getTextContent: () => text,
+    getTextContentSize: () => textContentSize,
+    getFormat: () => format,
+    getKey: () => nodeKey,
+  } as unknown as LexicalNode;
+
+  textNodes.push(mockTextNode);
+  vi.mocked($isTextNode).mockImplementation((node) => (node ? textNodes.includes(node) : false));
+
+  return mockTextNode;
+}
+
+function createLineBreakNode(
+  _text = "\n",
+  _format: number | undefined = undefined,
+  _textContentSize: number | undefined = undefined,
+  nodeKey: string,
+): LexicalNode {
+  const mockLineBreakNode = {
+    getTextContent: () => "\n",
+    getTextContentSize: () => 1,
+    getKey: () => nodeKey,
+  } as unknown as LineBreakNode;
+
+  lineBreakNodes.push(mockLineBreakNode);
+  vi.mocked($isLineBreakNode).mockImplementation((node) => (node ? lineBreakNodes.includes(node) : false));
+
+  return mockLineBreakNode;
+}
+
+function arrangeRangeSelection(
+  anchorOffset: number,
+  focusOffset: number,
+  isCollapsed = false,
+  nodes: LexicalNode[] = [],
+  anchorKey = "keyAnchor",
+  focusKey = "keyFocus",
+  format = 0,
+): RangeSelection {
+  const mockRangeSelection = {
+    anchor: {
+      key: anchorKey,
+      offset: anchorOffset,
+      set: vi.fn() as (key: string, offset: number, type: "text" | "element", onlyIfChanged?: boolean) => void,
+    },
+    focus: {
+      key: focusKey,
+      offset: focusOffset,
+      getNode: () => nodes.at(-1),
+      set: vi.fn() as (key: string, offset: number, type: "text" | "element", onlyIfChanged?: boolean) => void,
+    },
+    format: format,
+    isCollapsed: () => isCollapsed,
+    getNodes: () => nodes,
+  } as RangeSelection;
+
+  vi.mocked($isRangeSelection).mockImplementation((rs) => rs === mockRangeSelection);
+  mockRangeSelection.isBackward = vi.fn().mockReturnValue(false);
+
+  return mockRangeSelection;
+}
+
+/**
+ * Arranges nodes for mocking purposes of selection.getNodes()
+ * @param previousNodeKey key of the node before the last node of the selection
+ * @param endOfPreviousNode overall textual end offset of the node before the last node of the selection
+ * @returns An array of 3 nodes using the input parameters for the one in the middle
+ */
+function arrangeNodesForSelection(previousNodeKey: string, endOfPreviousNode: number, isText: boolean) {
+  const previousNode = {
+    getKey: () => previousNodeKey,
+    getTextContentSize: () => endOfPreviousNode,
+  } as LexicalNode;
+  vi.mocked($isTextNode).mockImplementation((n) => (isText ? n === previousNode : false));
+  const nodes = [
+    {
+      getKey: () => "startNode",
+    } as LexicalNode,
+    previousNode,
+    {
+      getKey: () => "lastNode",
+      getPreviousSibling: () => previousNode,
+    } as LexicalNode,
+  ];
+  return nodes;
+}
+
+function arrangeOffsetView(start: number, end: number, selection: RangeSelection | null): OffsetView {
+  const offsetViewMock = {
+    getOffsetsFromSelection: vi.fn().mockImplementation(() => [start, end]),
+    createSelectionFromOffsets: vi.fn().mockImplementation(() => selection),
+  } as unknown as OffsetView;
+  vi.mocked($createOffsetView).mockReturnValue(offsetViewMock);
+
+  return offsetViewMock;
+}
+
+function arrangeTextContentSize(size: number): void {
+  const root = {
+    getTextContentSize: () => size,
+  };
+  vi.mocked($getRoot).mockReturnValue(root as RootNode);
+}