@lexical/dragon 0.44.1-nightly.20260519.0 → 0.45.0

package/package.json

@@ -9,35 +9,49 @@
     "accessibility"
   ],
   "license": "MIT",
-  "version": "0.44.1-nightly.20260519.0",
-  "main": "LexicalDragon.js",
-  "types": "index.d.ts",
+  "version": "0.45.0",
+  "main": "./dist/LexicalDragon.js",
+  "types": "./dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/facebook/lexical.git",
     "directory": "packages/lexical-dragon"
   },
-  "module": "LexicalDragon.mjs",
+  "module": "./dist/LexicalDragon.mjs",
   "sideEffects": false,
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": {
-        "types": "./index.d.ts",
-        "development": "./LexicalDragon.dev.mjs",
-        "production": "./LexicalDragon.prod.mjs",
-        "node": "./LexicalDragon.node.mjs",
-        "default": "./LexicalDragon.mjs"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalDragon.dev.mjs",
+        "production": "./dist/LexicalDragon.prod.mjs",
+        "node": "./dist/LexicalDragon.node.mjs",
+        "default": "./dist/LexicalDragon.mjs"
       },
       "require": {
-        "types": "./index.d.ts",
-        "development": "./LexicalDragon.dev.js",
-        "production": "./LexicalDragon.prod.js",
-        "default": "./LexicalDragon.js"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalDragon.dev.js",
+        "production": "./dist/LexicalDragon.prod.js",
+        "default": "./dist/LexicalDragon.js"
       }
     }
   },
   "dependencies": {
-    "@lexical/extension": "0.44.1-nightly.20260519.0",
-    "lexical": "0.44.1-nightly.20260519.0"
-  }
+    "@lexical/extension": "0.45.0",
+    "lexical": "0.45.0"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__bench__",
+    "!src/__mocks__",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.bench.ts",
+    "!src/**/*.bench.tsx",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/src/index.ts

@@ -0,0 +1,148 @@
+/**
+ * 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.
+ *
+ */
+
+import {effect, namedSignals} from '@lexical/extension';
+import {
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  defineExtension,
+  LexicalEditor,
+  safeCast,
+} from 'lexical';
+
+export function registerDragonSupport(editor: LexicalEditor): () => void {
+  const origin = window.location.origin;
+  const handler = (event: MessageEvent) => {
+    if (event.origin !== origin) {
+      return;
+    }
+    const rootElement = editor.getRootElement();
+
+    if (document.activeElement !== rootElement) {
+      return;
+    }
+
+    const data = event.data;
+
+    if (typeof data === 'string') {
+      let parsedData;
+
+      try {
+        parsedData = JSON.parse(data);
+      } catch (_e) {
+        return;
+      }
+
+      if (
+        parsedData &&
+        parsedData.protocol === 'nuanria_messaging' &&
+        parsedData.type === 'request'
+      ) {
+        const payload = parsedData.payload;
+
+        if (payload && payload.functionId === 'makeChanges') {
+          const args = payload.args;
+
+          if (args) {
+            const [
+              elementStart,
+              elementLength,
+              text,
+              selStart,
+              selLength,
+              _formatCommand,
+            ] = args;
+            // TODO: we should probably handle formatCommand somehow?
+            // formatCommand;
+            editor.update(() => {
+              const selection = $getSelection();
+
+              if ($isRangeSelection(selection)) {
+                const anchor = selection.anchor;
+                let anchorNode = anchor.getNode();
+                let setSelStart = 0;
+                let setSelEnd = 0;
+
+                if ($isTextNode(anchorNode)) {
+                  // set initial selection
+                  if (elementStart >= 0 && elementLength >= 0) {
+                    setSelStart = elementStart;
+                    setSelEnd = elementStart + elementLength;
+                    // If the offset is more than the end, make it the end
+                    selection.setTextNodeRange(
+                      anchorNode,
+                      setSelStart,
+                      anchorNode,
+                      setSelEnd,
+                    );
+                  }
+                }
+
+                if (setSelStart !== setSelEnd || text !== '') {
+                  selection.insertRawText(text);
+                  anchorNode = anchor.getNode();
+                }
+
+                if ($isTextNode(anchorNode)) {
+                  // set final selection
+                  setSelStart = selStart;
+                  setSelEnd = selStart + selLength;
+                  const anchorNodeTextLength = anchorNode.getTextContentSize();
+                  // If the offset is more than the end, make it the end
+                  setSelStart =
+                    setSelStart > anchorNodeTextLength
+                      ? anchorNodeTextLength
+                      : setSelStart;
+                  setSelEnd =
+                    setSelEnd > anchorNodeTextLength
+                      ? anchorNodeTextLength
+                      : setSelEnd;
+                  selection.setTextNodeRange(
+                    anchorNode,
+                    setSelStart,
+                    anchorNode,
+                    setSelEnd,
+                  );
+                }
+
+                // block the chrome extension from handling this event
+                event.stopImmediatePropagation();
+              }
+            });
+          }
+        }
+      }
+    }
+  };
+
+  window.addEventListener('message', handler, true);
+  return () => {
+    window.removeEventListener('message', handler, true);
+  };
+}
+
+export interface DragonConfig {
+  disabled: boolean;
+}
+
+/**
+ * Add Dragon speech to text input support to the editor, via the
+ * \@lexical/dragon module.
+ */
+export const DragonExtension = defineExtension({
+  build: (editor, config, state) => namedSignals(config),
+  config: safeCast<DragonConfig>({disabled: typeof window === 'undefined'}),
+  name: '@lexical/dragon',
+  register: (editor, config, state) =>
+    effect(() =>
+      state.getOutput().disabled.value
+        ? undefined
+        : registerDragonSupport(editor),
+    ),
+});