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

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

@@ -0,0 +1,287 @@
+import type { RangeSelection } from "lexical";
+import {
+  $getRoot,
+  $getSelection,
+  $setSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $addUpdateTag,
+  SKIP_DOM_SELECTION_TAG,
+  UNDO_COMMAND,
+  REDO_COMMAND,
+} from "lexical";
+import { debounceTime, delay, distinctUntilChanged, filter, fromEvent, Subject, tap, withLatestFrom } from "rxjs";
+import type { CustomControlInitializer } from "@hccm/web-tcl";
+import {
+  createSelection,
+  convertToCustomControlSelectionSafe,
+  getValidEndOffset,
+  isSelectionSame,
+  serializeSelection,
+} from "./selection-helpers";
+import { ElementAttributeNames } from "../element-attributes";
+import { editorStore } from "../editor-store";
+import { getTextContent, insert } from "./text-helpers";
+import { logError, logInfo, visualizeLexicalTree } from "./logging";
+// Replace with exported CustomControlState type from web-tcl
+type ControlState = Partial<{
+  text: string;
+  selection: {
+    start: number;
+    end: number;
+  };
+  focus: boolean;
+}>;
+
+export const lexicalControl: CustomControlInitializer = (element, control) => {
+  if (element.getAttribute(ElementAttributeNames.LEXICAL_EDITOR) !== "true") {
+    throw new Error("Element is not a lexical editor.");
+  }
+
+  const mappingId = element.getAttribute(ElementAttributeNames.EDITOR_MAPPING_ID);
+  if (mappingId === null) {
+    throw new Error(`Element must have '${ElementAttributeNames.EDITOR_MAPPING_ID}' attribute with a unique value.`);
+  }
+
+  const storeEntry = editorStore.get(mappingId);
+  if (!storeEntry?.editor) {
+    throw new Error("Editor is not found.");
+  }
+  const { editor, undoRedoCapable } = storeEntry;
+
+  // configure the custom control
+  // TODO Check these at a later iteration
+  control.newline = "\n";
+  control.paragraph = "\f";
+  control.isMultiline = true;
+  control.capabilities = {
+    undoRedo: undoRedoCapable,
+  };
+
+  const controlStateSubject = new Subject<ControlState>();
+  const controlStateSubscription = controlStateSubject
+    .pipe(
+      distinctUntilChanged(compareControlState),
+      tap((s) => {
+        logInfo(
+          `Updating custom control (mappingId '${mappingId}'). selection: ${JSON.stringify(s.selection)}, focus: ${s.focus}`,
+        );
+        control.update(s);
+      }),
+    )
+    .subscribe();
+  const lastSelectionSubject = new Subject<RangeSelection>();
+  const lastSelectionSubscription = lastSelectionSubject.subscribe();
+  let pendingSelection: RangeSelection | null = null;
+
+  const isActiveElement = () => element === element.ownerDocument.activeElement;
+  const isFocused = () => element.ownerDocument.hasFocus() && isActiveElement();
+
+  const updateCustomControl = () => {
+    editor.read(() => {
+      const text = getTextContent();
+      const lexicalSelection = pendingSelection ?? $getSelection();
+      pendingSelection = null;
+      const selection = convertToCustomControlSelectionSafe(lexicalSelection, editor);
+      const focus = isFocused();
+
+      controlStateSubject.next({ text, selection, focus });
+
+      if ($isRangeSelection(lexicalSelection)) {
+        const clone = lexicalSelection.clone();
+        logInfo(`last selection next: ${serializeSelection(clone)}`);
+        lastSelectionSubject.next(clone);
+      }
+    });
+  };
+
+  // initial state for web-tcl
+  updateCustomControl();
+
+  // handle events coming from web-tcl
+  control.handle("selection", ({ start, end }) => {
+    editor.update(() => {
+      logInfo(`selection - editor.update - start, values: start: ${start}, end: ${end} `);
+      const activeSelection = $getSelection();
+      if ($isRangeSelection(activeSelection) && isSelectionSame({ start, end }, activeSelection, editor)) {
+        lastSelectionSubject.next(activeSelection.clone());
+        logInfo("selection - editor.update - end, same selection");
+        return;
+      }
+
+      const selection = createSelection(start, end, editor);
+      if (selection === null) {
+        logError(`Cannot map selection ${start} - ${end} to a lexical selection.`);
+        logInfo("selection - editor.update - end, cannot map selection to lexical selection");
+        return;
+      }
+
+      // Any added update tag only gets removed from the editor if editor._dirtyType !== NO_DIRTY_NODES, otherwise tags will remain even after a successful update to the state.
+      // We need to avoid using SKIP_DOM_SELECTION_TAG here, as it would prevent actually setting the selection DOM-wise at later updates until after an update with dirty nodes.
+      if (isActiveElement()) {
+        $setSelection(selection);
+      } else {
+        pendingSelection = selection;
+      }
+      updateCustomControl();
+    });
+  });
+
+  control.handle("text", ({ value, start, length, additionalParameters }) => {
+    editor.update(() => {
+      logInfo(
+        `text - editor.update - start, values: start: ${start}, length: ${length} additionalParameters: ${JSON.stringify(additionalParameters)}`,
+      );
+      let lexicalSelection = $getSelection();
+      const root = $getRoot();
+
+      const avoidFocusing = !isActiveElement();
+      if (avoidFocusing) {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
+
+      if (root.isEmpty()) {
+        if (value === "") {
+          logInfo("text - editor.update - end, both editor and value are empty");
+          return;
+        }
+
+        logInfo("Editor is empty. Doing overwrite.");
+
+        root.clear();
+        const paragraph = $createParagraphNode();
+        root.append(paragraph);
+        lexicalSelection = createSelection(0, 0, editor);
+      }
+
+      const desiredEndOffset = start + length;
+      const endOffset = getValidEndOffset(desiredEndOffset);
+      if (lexicalSelection !== null) {
+        if (!$isRangeSelection(lexicalSelection)) {
+          logError(
+            "Doing nothing as selection is not a RangeSelection (it is either a TableSelection or a NodeSelection due to content, which is currently not being supported by us).",
+          );
+          logInfo("text - editor.update - end, selection is not a RangeSelection");
+          return;
+        }
+
+        const shouldReuseCurrentSelection =
+          root.getTextContentSize() === 0 ||
+          ($isRangeSelection(lexicalSelection) && isSelectionSame({ start, end: endOffset }, lexicalSelection, editor));
+        if (shouldReuseCurrentSelection) {
+          insert(value, lexicalSelection);
+          visualizeLexicalTree();
+          logInfo("text - editor.update - end, reuse of current selection");
+          return;
+        }
+      }
+
+      // Some spots are sensitive to the surrounding text.
+      // For example, if we dictate to the beginning of a sentence, the first character of the sentence being already in the control, gets converted to lowercase by DMS first.
+      // Adding the newly dictated text before, comes only after that change.
+      // Similar surrounding-sensitive behaviour is observed when you dictate certain special characters (e.g. colon -> :)
+      // In these cases, start sent by DMS is not the same as the start of the selection in the editor, so we create a new selection with the start sent by DMS.
+      visualizeLexicalTree();
+      const insertionRange = createSelection(start, endOffset, editor, additionalParameters?.matchFormattingAtThe);
+      if (insertionRange === null) {
+        logError(`Cannot map selection ${start} - ${endOffset} to a lexical selection.`);
+        logInfo("text - editor.update - end, cannot map selection to lexical selection");
+        return;
+      }
+      logInfo(`insertionRange: ${serializeSelection(insertionRange)}`);
+
+      if (value === "") {
+        insertionRange.removeText();
+        logInfo("Removing text by removeText");
+      } else {
+        $setSelection(insertionRange); // Due to a bug of insertRawText: it inserts to the current selection of the editor, which is not the selection instance here we call it on
+        insert(value, insertionRange);
+      }
+      visualizeLexicalTree();
+      logInfo("text - editor.update - end, new rangeselection");
+    });
+  });
+
+  control.handle("focus", (focus) => {
+    if (focus) {
+      element.focus();
+    } else {
+      element.blur();
+    }
+  });
+
+  control.handle("undo", () => {
+    logInfo("undo operation command received");
+    editor.dispatchCommand(UNDO_COMMAND, undefined);
+  });
+
+  control.handle("redo", () => {
+    logInfo("redo operation command received");
+    editor.dispatchCommand(REDO_COMMAND, undefined);
+  });
+
+  const eventsSubscription = fromEvent(element, "focusout")
+    .pipe(
+      tap(() => {
+        logInfo("focusout");
+        updateCustomControl();
+      }),
+    )
+    .subscribe();
+
+  const focusEventSubscription = fromEvent(element, "focusin")
+    .pipe(
+      delay(0), // required to get the new state from the editor
+      withLatestFrom(lastSelectionSubject),
+      tap(([_, lastSelection]) => {
+        logInfo("focusin");
+        editor.update(() => {
+          const selection = $getSelection();
+          const convSelection = convertToCustomControlSelectionSafe(selection, editor);
+          if (lastSelection && selection !== lastSelection && convSelection.start === 0 && convSelection.end === 0) {
+            logInfo(`last selection set: ${serializeSelection(lastSelection)}`);
+            $setSelection(lastSelection);
+          }
+        });
+        updateCustomControl();
+      }),
+    )
+    .subscribe();
+
+  // We use this instead of the input event of the element as selectionchange event is not fired when everything is selected in the control and we delete that via voice command
+  // (in case of 'select all' - 'delete that' - 'undo that')
+  const textContentListenerCleanup = editor.registerTextContentListener(() => {
+    logInfo("text-content-listener");
+    updateCustomControl();
+  });
+
+  const selectionChangeEventSubscription = fromEvent(document, "selectionchange")
+    .pipe(
+      filter(() => document.activeElement === element),
+      debounceTime(50), // that should be fine as no user is able to change a selection manually (keyboard, mouse, voice) within 50ms
+      tap(() => {
+        logInfo("selectionchange");
+        updateCustomControl();
+      }),
+    )
+    .subscribe();
+
+  return () => {
+    logInfo("Cleaning up.");
+    textContentListenerCleanup();
+    eventsSubscription.unsubscribe();
+    focusEventSubscription.unsubscribe();
+    controlStateSubscription.unsubscribe();
+    lastSelectionSubscription.unsubscribe();
+    selectionChangeEventSubscription.unsubscribe();
+  };
+};
+
+const compareControlState = (prev: ControlState, curr: ControlState): boolean => {
+  return (
+    prev.text === curr.text &&
+    prev.selection?.start === curr.selection?.start &&
+    prev.selection?.end === curr.selection?.end &&
+    prev.focus == curr.focus
+  );
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// invariant(condition, message) will refine types based on "condition", and
+// if "condition" is false will throw an error. This function is special-cased
+// in flow itself, so we can't name it anything else.
+export default function invariant(cond?: boolean, message?: string, ..._args: string[]): asserts cond {
+  if (cond) {
+    return;
+  }
+
+  throw new Error(
+    "Internal Lexical error: invariant() is meant to be replaced at compile " +
+      "time. There is no runtime version. Error: " +
+      message,
+  );
+}

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

@@ -0,0 +1,37 @@
+import { $getRoot, type LexicalNode } from "lexical";
+
+export function logInfo(message: string) {
+  console.log(`lexical-custom-control info: ${message}`);
+}
+
+export function logError(message: string) {
+  console.error(`lexical-custom-control error: ${message}`);
+}
+
+export function visualizeLexicalTree() {
+  const root = $getRoot();
+  logInfo("Lexical Node Tree:");
+  logNodeTree(root);
+}
+
+// Just for analysation purposes
+function logNodeTree(node: LexicalNode, _depth = 0) {
+  logInfo(
+    "! You need to set noImplicitAny to false in tsconfig.json and uncomment the code below the origin of this message to make it work !",
+  );
+  // const key = node.getKey();
+  // const type = node.getType();
+  // const textContentSize = node.getTextContentSize();
+  // const textFormat = $isTextNode(node) ? node.getFormat() : $isElementNode(node) ? node.getTextFormat() : 0;
+  // const textContent = node.getTextContent();
+  // const dontKnow = node as any;
+  // const children = typeof dontKnow.getChildren === "function" ? dontKnow.getChildren() : [];
+
+  // // Log the current node's details
+  // logInfo(
+  //   `${"  ".repeat(_depth)}- Node: { key: ${key}, type: ${type}, textContentSize: ${textContentSize}, textFormat: ${textFormat}, textContent: "${textContent}" }`,
+  // );
+
+  // // Recursively log children
+  // children.forEach((child) => logNodeTree(child as LexicalNode, _depth + 1));
+}