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

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

@@ -0,0 +1,162 @@
+import {
+  type BaseSelection,
+  type LexicalEditor,
+  $isRangeSelection,
+  $getRoot,
+  $getSelection,
+  type RangeSelection,
+  $isTextNode,
+  $getNodeByKey,
+  $isElementNode,
+  type LexicalNode,
+} from "lexical";
+import { $createOffsetView } from "./offset";
+import { FormattingBoundaries, type FormattingBoundary } from "@hccm/web-tcl";
+
+export function convertToCustomControlSelectionSafe(lexicalSelection: BaseSelection | null, editor: LexicalEditor) {
+  if ($isRangeSelection(lexicalSelection)) {
+    return convertToCustomControlSelection(lexicalSelection, editor);
+  }
+
+  const textContentSize = $getRoot().getTextContentSize(); // TODO most probably we need to change this as we de custom text serialization now...
+  return { start: textContentSize, end: textContentSize };
+}
+
+export function isSelectionSame(
+  selection: { start: number; end: number },
+  lexicalSelection: RangeSelection,
+  editor: LexicalEditor,
+) {
+  const lexicalSelectionConverted = convertToCustomControlSelection(lexicalSelection, editor);
+  return selection.start === lexicalSelectionConverted.start && selection.end === lexicalSelectionConverted.end;
+}
+
+function convertToCustomControlSelection(lexicalSelection: RangeSelection, editor: LexicalEditor) {
+  const offsetView = $createOffsetView(editor);
+  let [start, end] = offsetView.getOffsetsFromSelection(lexicalSelection);
+  if (start === -1) start = 0;
+  if (end === -1) end = 0;
+  return { start: Math.min(start, end), end: Math.max(start, end) };
+}
+
+// TODO Although the underlying data structure for the offsetView has the offsets properly, somehow it gets mapped to invalid selection values
+// in multiple empty line cases. We need to have  custom mapping logic, we can base on what's in the @lexical/offset package
+export function createSelection(
+  start: number,
+  end: number,
+  editor: LexicalEditor,
+  matchFormattingAtThe?: FormattingBoundary,
+): RangeSelection | null {
+  const endOffset = getValidEndOffset(end); // Should we use this here or just go for the error if end is out of bounds?
+  const offsetView = $createOffsetView(editor);
+  const selection = offsetView.createSelectionFromOffsets(start, endOffset);
+
+  if (selection === null) {
+    return null; // Invalid selection
+  }
+
+  selection.format = getFormattingForSelection(selection, matchFormattingAtThe);
+
+  return selection;
+}
+
+// To avoid invalid offset error
+export function getValidEndOffset(desiredEndOffset: number) {
+  if (desiredEndOffset < 0) {
+    return 0;
+  }
+
+  return Math.min(desiredEndOffset, $getRoot().getTextContentSize());
+}
+
+export function serializeSelection(selection: RangeSelection): string {
+  return `{ anchor: { key: ${selection.anchor.key}, offset: ${selection.anchor.offset} }, focus: { key: ${selection.focus.key}, offset: ${selection.focus.offset} }, format: ${selection.format} }`;
+}
+
+/**
+ * Get formatting for a text node at a specific offset, considering edge cases
+ * @param selection The range selection containing anchor and focus points
+ * @param matchFormattingAtThe Parameter indicating whether to match formatting at the start or end of selection nodes (anchor node or focus node)
+ * @returns The format number for the selection
+ */
+export function getFormattingForSelection(
+  selection: RangeSelection,
+  matchFormattingAtThe?: FormattingBoundary,
+): number {
+  const currentSelectionInEditor = $getSelection();
+  if (matchFormattingAtThe !== FormattingBoundaries.End && $isRangeSelection(currentSelectionInEditor)) {
+    if (
+      currentSelectionInEditor.anchor.offset === selection.anchor.offset &&
+      currentSelectionInEditor.anchor.key === selection.anchor.key
+    ) {
+      return currentSelectionInEditor.format;
+    } else if (matchFormattingAtThe === FormattingBoundaries.Start) {
+      const anchorNodeOfCurrentSelection = currentSelectionInEditor.anchor.getNode();
+      const isStartingAtEdgeOfNodes =
+        anchorNodeOfCurrentSelection.getTextContentSize() === currentSelectionInEditor.anchor.offset &&
+        selection.anchor.offset === 0;
+      if (isStartingAtEdgeOfNodes) {
+        const nextSibling = anchorNodeOfCurrentSelection.getNextSibling();
+        const isNextSiblingTheTargetedNode = nextSibling && nextSibling.getKey() === selection.anchor.key;
+        if (isNextSiblingTheTargetedNode) {
+          return currentSelectionInEditor.format;
+        }
+      }
+    }
+  }
+
+  if (!matchFormattingAtThe) {
+    return getFormatOfFirstNode(selection);
+  }
+
+  if (matchFormattingAtThe === FormattingBoundaries.End) {
+    const key = selection.isBackward() ? selection.anchor.key : selection.focus.key;
+    const node = $getNodeByKey(key);
+
+    if (node) {
+      return getNodeFormat(node);
+    }
+  } else {
+    const point = selection.isBackward() ? selection.focus : selection.anchor;
+    const node = $getNodeByKey(point.key);
+
+    if (point.offset > 0 && node) {
+      return getNodeFormat(node);
+    }
+
+    const selectionContent = selection.getTextContent().trim();
+
+    if (selectionContent !== "" && node) {
+      return getNodeFormat(node);
+    }
+
+    const prevNode = node?.getPreviousSibling();
+    if (prevNode) {
+      return getNodeFormat(prevNode);
+    }
+  }
+
+  return 0;
+}
+
+function getFormatOfFirstNode(selection: RangeSelection): number {
+  const noFormat = 0;
+  const selectedNodes = selection.getNodes();
+  const firstNode = selectedNodes.at(0);
+
+  if (!firstNode) {
+    return noFormat;
+  }
+
+  return getNodeFormat(firstNode);
+}
+
+function getNodeFormat(node: LexicalNode): number {
+  const noFormat = 0;
+  if ($isTextNode(node)) {
+    return node.getFormat();
+  } else if ($isElementNode(node)) {
+    return node.getTextFormat();
+  }
+  return noFormat;
+}

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

@@ -0,0 +1,298 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { getTextContent, insert } from "./text-helpers";
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTabNode,
+  $createTextNode,
+  $getRoot,
+  $isElementNode,
+  $isParagraphNode,
+  type ElementNode,
+  type LexicalNode,
+  type LineBreakNode,
+  type ParagraphNode,
+  type RangeSelection,
+  type RootNode,
+  type TabNode,
+  type TextNode,
+} from "lexical";
+
+vi.mock("lexical", async () => {
+  const actual = await vi.importActual("lexical");
+  return {
+    ...actual,
+    $createLineBreakNode: vi.fn(),
+    $createParagraphNode: vi.fn(),
+    $createTabNode: vi.fn(),
+    $createTextNode: vi.fn(),
+    $getRoot: vi.fn(),
+    $isElementNode: vi.fn(),
+    $isParagraphNode: vi.fn(),
+  };
+});
+
+describe("insert", () => {
+  let selection: RangeSelection;
+
+  beforeEach(() => {
+    selection = arrangeSelection(1); // e.g., bold
+    vi.clearAllMocks();
+  });
+
+  it("should insert a single text node for plain text", () => {
+    const textNode = arrangeCreateTextNodeOnce();
+    const text = "hello";
+
+    insert(text, selection);
+
+    expect($createTextNode).toHaveBeenCalledWith(text);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(selection.insertNodes).toHaveBeenCalledWith([textNode]);
+  });
+
+  it("should insert a paragraph node for text with form feed", () => {
+    const textNode1 = arrangeCreateTextNodeOnce();
+    const paragraphNode = arrangeCreateParagraphNodeOnce();
+    arrangeCreateTextNodeOnce();
+    const text = "foo\fbar";
+
+    insert(text, selection);
+
+    expect($createParagraphNode).toHaveBeenCalledOnce();
+    expect($createTextNode).toHaveBeenNthCalledWith(1, "foo");
+    expect($createTextNode).toHaveBeenNthCalledWith(2, "bar");
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(selection.insertNodes).toHaveBeenCalledWith([textNode1, paragraphNode]);
+  });
+
+  it("should append text after form feed character to the paragraph node created for it", () => {
+    arrangeCreateTextNodeOnce();
+    const paragraphNode = arrangeCreateParagraphNodeOnce();
+    const appendables = [
+      arrangeCreateTextNodeOnce(),
+      arrangeCreateTabNode(),
+      arrangeCreateTextNodeOnce(),
+      arrangeCreateLineBreakNode(),
+      arrangeCreateTextNodeOnce(),
+    ];
+    const text = "foo\fbar\tbaz\nqux";
+
+    insert(text, selection);
+
+    appendables.forEach((n) => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      expect(paragraphNode.append).toHaveBeenCalledWith(n);
+    });
+  });
+
+  it("should apply selection format to paragraph node", () => {
+    arrangeCreateTextNodeOnce();
+    const paragraphNode = arrangeCreateParagraphNodeOnce();
+    arrangeCreateTextNodeOnce();
+    const text = "foo\fbar";
+
+    insert(text, selection);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(paragraphNode.setTextFormat).toHaveBeenCalledWith(selection.format);
+  });
+
+  it.each(["foo\nbar", "foo\r\nbar"])("should insert text and line break nodes for text with newlines", (text) => {
+    const textNode1 = arrangeCreateTextNodeOnce();
+    const lineBreakNode = arrangeCreateLineBreakNode();
+    const textNode2 = arrangeCreateTextNodeOnce();
+
+    insert(text, selection);
+
+    expect($createTextNode).toHaveBeenCalledWith("foo");
+    expect($createLineBreakNode).toHaveBeenCalledOnce();
+    expect($createTextNode).toHaveBeenCalledWith("bar");
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(selection.insertNodes).toHaveBeenCalledWith([textNode1, lineBreakNode, textNode2]);
+  });
+
+  it("should insert tab nodes for text with tabs", () => {
+    const textNode1 = arrangeCreateTextNodeOnce();
+    const tabNode = arrangeCreateTabNode();
+    const textNode2 = arrangeCreateTextNodeOnce();
+
+    insert("foo\tbar", selection);
+
+    expect($createTextNode).toHaveBeenCalledWith("foo");
+    expect($createTabNode).toHaveBeenCalledOnce();
+    expect($createTextNode).toHaveBeenCalledWith("bar");
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(selection.insertNodes).toHaveBeenCalledWith([textNode1, tabNode, textNode2]);
+  });
+
+  it("should apply selection format to text and tab nodes", () => {
+    const textNode1 = arrangeCreateTextNodeOnce();
+    const tabNode = arrangeCreateTabNode();
+    const textNode2 = arrangeCreateTextNodeOnce();
+    arrangeCreateLineBreakNode();
+    const textNode3 = arrangeCreateTextNodeOnce();
+
+    insert("foo\tbar\nbaz", selection);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(textNode1.setFormat).toHaveBeenCalledWith(selection.format);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(tabNode.setFormat).toHaveBeenCalledWith(selection.format);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(textNode2.setFormat).toHaveBeenCalledWith(selection.format);
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(textNode3.setFormat).toHaveBeenCalledWith(selection.format);
+  });
+
+  it("should handle empty string", () => {
+    const textNode = arrangeCreateTextNodeOnce();
+
+    insert("", selection);
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    expect(selection.insertNodes).toHaveBeenCalledWith([textNode]);
+  });
+});
+
+describe("getTextContent", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    paragraphNodes = [];
+    elementNodes = [];
+  });
+
+  it("should return only the text content for a starting paragraph node", () => {
+    const textOfParagraph = "Paragraph1";
+    const paragraphNode = arrangeParagraphNode(textOfParagraph);
+    arrangeRootWithChildren([paragraphNode]);
+
+    const textContent = getTextContent();
+
+    expect(textContent).toBe(textOfParagraph);
+  });
+
+  it("should return text content only for a starting non-paragraph, element node", () => {
+    const textOfElement = "Element1";
+    const elementNode = arrangeParagraphNode(textOfElement);
+    arrangeRootWithChildren([elementNode]);
+
+    const textContent = getTextContent();
+
+    expect(textContent).toBe(textOfElement);
+  });
+
+  it("should return text contents of a non-starting paragraph node prepanded with a form feed character", () => {
+    const textOfParagraph1 = "Paragraph1";
+    const textOfParagraph2 = "Paragraph2";
+    const paragraphNode1 = arrangeParagraphNode(textOfParagraph1);
+    const paragraphNode2 = arrangeParagraphNode(textOfParagraph2);
+    arrangeRootWithChildren([paragraphNode1, paragraphNode2]);
+
+    const textContent = getTextContent();
+
+    expect(textContent).toBe(`${textOfParagraph1}\f${textOfParagraph2}`);
+  });
+
+  it("should return text content of a non-starting element node prepanded with two new line characters", () => {
+    const textOfElement1 = "Element1";
+    const textOfElement2 = "Element2";
+    const elementNode1 = arrangeOtherElementNode(textOfElement1);
+    const elementNode2 = arrangeOtherElementNode(textOfElement2);
+    arrangeRootWithChildren([elementNode1, elementNode2]);
+
+    const textContent = getTextContent();
+
+    expect(textContent).toBe(`${textOfElement1}\n\n${textOfElement2}`);
+  });
+});
+
+function arrangeCreateParagraphNodeOnce() {
+  const paragraphNode = {
+    setTextFormat: vi.fn(),
+    append: vi.fn(),
+  } as unknown as ParagraphNode;
+  vi.mocked($createParagraphNode).mockReturnValueOnce(paragraphNode);
+
+  return paragraphNode;
+}
+
+function arrangeCreateTextNodeOnce() {
+  const textNode = {
+    setFormat: vi.fn(),
+  } as unknown as TextNode;
+  vi.mocked($createTextNode).mockReturnValueOnce(textNode);
+
+  return textNode;
+}
+
+function arrangeCreateLineBreakNode() {
+  const lineBreakNode = {} as unknown as LineBreakNode;
+  vi.mocked($createLineBreakNode).mockReturnValue(lineBreakNode);
+  return lineBreakNode;
+}
+
+function arrangeCreateTabNode() {
+  const tabNode = {
+    setFormat: vi.fn(),
+  } as unknown as TabNode;
+  vi.mocked($createTabNode).mockReturnValueOnce(tabNode);
+  return tabNode;
+}
+
+function arrangeSelection(format = 0) {
+  return {
+    format,
+    insertNodes: vi.fn(),
+  } as unknown as RangeSelection;
+}
+
+function arrangeRootWithChildren(children: LexicalNode[]) {
+  const rootNode = {
+    getChildren: () => children,
+  } as unknown as RootNode;
+
+  vi.mocked($getRoot).mockReturnValue(rootNode);
+}
+
+let paragraphNodes: ParagraphNode[] = [];
+const isParagraphNode = function (node: LexicalNode | null | undefined): node is ParagraphNode {
+  if (node === null || node === undefined) {
+    return false;
+  }
+  return paragraphNodes.includes(node as ParagraphNode);
+};
+
+let elementNodes: ElementNode[] = [];
+const isElementNode = function (node: LexicalNode | null | undefined): node is ElementNode {
+  if (node === null || node === undefined) {
+    return false;
+  }
+  return elementNodes.includes(node as ElementNode);
+};
+
+function arrangeParagraphNode(textContent: string) {
+  const paragraph = {
+    getTextContent: () => textContent,
+  } as unknown as ParagraphNode;
+
+  paragraphNodes.push(paragraph);
+  elementNodes.push(paragraph); // A paragraph node is also an element node...
+
+  vi.mocked($isParagraphNode).mockImplementation(isParagraphNode);
+  vi.mocked($isElementNode).mockImplementation(isElementNode);
+
+  return paragraph;
+}
+
+function arrangeOtherElementNode(textContent: string) {
+  const element = {
+    getTextContent: () => textContent,
+  } as unknown as ElementNode;
+
+  elementNodes.push(element);
+
+  vi.mocked($isElementNode).mockImplementation(isElementNode);
+
+  return element;
+}

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

@@ -0,0 +1,73 @@
+import {
+  $createLineBreakNode,
+  $createParagraphNode,
+  $createTabNode,
+  $createTextNode,
+  $getRoot,
+  $isElementNode,
+  $isParagraphNode,
+  type LexicalNode,
+  type ParagraphNode,
+  type RangeSelection,
+} from "lexical";
+
+// Copied over from LexicalSelection.insertRawText (lexical package)
+// Small changes applied:
+//   - passing in selection
+//   - make nodes array typed
+//   - split by \f and createParagraphNode for it. Also, adding any other node comes after to the lastly created paragraph node
+//   - apply format of selection to the newly created tab and text nodes
+export function insert(text: string, at: RangeSelection): void {
+  // TODO or we can select the freshly inserted text afterwards and apply formatting over that
+  // TODO should we try to use insertText instead of insertRawText for texts not having line breaks or tabs?
+  const parts = text.split(/(\f|\r?\n|\t)/);
+  const nodes = Array<LexicalNode>();
+  let paragraphToAppendTo: ParagraphNode | null = null;
+  const add = (node: LexicalNode) => {
+    if (paragraphToAppendTo === null) {
+      nodes.push(node);
+    } else {
+      paragraphToAppendTo.append(node);
+    }
+  };
+  for (const part of parts) {
+    if (part === "\f") {
+      const paragraphNode = $createParagraphNode();
+      paragraphNode.setTextFormat(at.format);
+      paragraphToAppendTo = paragraphNode;
+      nodes.push(paragraphNode);
+    } else if (part === "\n" || part === "\r\n") {
+      const lineBreakNode = $createLineBreakNode();
+      add(lineBreakNode);
+    } else if (part === "\t") {
+      const tabNode = $createTabNode();
+      tabNode.setFormat(at.format);
+      add(tabNode);
+    } else {
+      const textNode = $createTextNode(part);
+      textNode.setFormat(at.format);
+      add(textNode);
+    }
+  }
+  at.insertNodes(nodes);
+}
+
+export function getTextContent(): string {
+  const root = $getRoot();
+  const children = root.getChildren();
+  const firstChild = children.at(0);
+
+  let textContent = "";
+  for (const child of children) {
+    if (child !== firstChild && $isElementNode(child)) {
+      if ($isParagraphNode(child)) {
+        textContent += "\f";
+      } else {
+        textContent += "\n\n";
+      }
+    }
+    textContent += child.getTextContent();
+  }
+
+  return textContent;
+}

package/node_modules/@dragon-speech-sdk/lexical-react/src/editor-store.ts

@@ -0,0 +1,8 @@
+import type { LexicalEditor } from "lexical";
+
+export type StoreEntry = {
+  editor: LexicalEditor;
+  undoRedoCapable: boolean;
+};
+
+export const editorStore = new Map<string, StoreEntry>();

package/node_modules/@dragon-speech-sdk/lexical-react/src/element-attributes.ts

@@ -0,0 +1,4 @@
+export const ElementAttributeNames = Object.freeze({
+  EDITOR_MAPPING_ID: "data-dragon-lexical-mapping-id",
+  LEXICAL_EDITOR: "data-lexical-editor",
+});

package/node_modules/@dragon-speech-sdk/lexical-react/src/main.ts

@@ -0,0 +1,2 @@
+export { lexicalControl } from "./custom-control/initializer";
+export { LexicalSpeechPlugin } from "./plugin/speech-plugin";

package/node_modules/@dragon-speech-sdk/lexical-react/src/package-info.ts

@@ -0,0 +1,2 @@
+export const name = "@dragon-speech-sdk/lexical-react";
+export const version = "1.0.0-official.4593501";

package/node_modules/@dragon-speech-sdk/lexical-react/src/plugin/speech-plugin.ts

@@ -0,0 +1,34 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { editorStore } from "../editor-store";
+import { useEffect, useId } from "react";
+import { ElementAttributeNames } from "../element-attributes";
+import { webTCLAttributes } from "@hccm/web-tcl";
+
+export type LexicalSpeechPluginProps = {
+  historyPluginPresent?: boolean;
+};
+export function LexicalSpeechPlugin({ historyPluginPresent = true }: LexicalSpeechPluginProps) {
+  const [editor] = useLexicalComposerContext();
+  const lexicalMappingId = useId();
+
+  useEffect(() => {
+    const rootElement = editor.getRootElement();
+    if (!rootElement) {
+      console.warn("editor doesn't have a root element.");
+      return;
+    }
+
+    rootElement.setAttribute(ElementAttributeNames.EDITOR_MAPPING_ID, lexicalMappingId);
+    editorStore.set(lexicalMappingId, { editor, undoRedoCapable: historyPluginPresent });
+    webTCLAttributes.setValue(rootElement, "customControlType", "lexicalControl");
+
+    return () => {
+      // also ok if it was not set before, no error happens
+      rootElement.removeAttribute(ElementAttributeNames.EDITOR_MAPPING_ID);
+      webTCLAttributes.remove(rootElement, "customControlType");
+      editorStore.delete(lexicalMappingId);
+    };
+  }, [editor]);
+
+  return null;
+}