@lexical/react 0.3.9 → 0.4.0

package/DEPRECATED_useLexical.dev.js

@@ -39,7 +39,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
   return currentCanShowPlaceholder;
 }
 
@@ -54,7 +54,7 @@ function useCanShowPlaceholder(editor) {
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
-    }), editor.registerReadOnlyListener(() => {
+    }), editor.registerEditableListener(() => {
       resetCanShowPlaceholder();
     }));
   }, [editor]);

package/DEPRECATED_useLexical.prod.js

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var c=require("lexical"),f=require("react"),g=require("@lexical/text"),h=require("@lexical/utils"),k="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;function l(a){return a.getEditorState().read(g.$canShowPlaceholderCurry(a.isComposing(),a.isReadOnly()))}
-function m(a){let [b,d]=f.useState(()=>l(a));k(()=>{function e(){let n=l(a);d(n)}e();return h.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerReadOnlyListener(()=>{e()}))},[a]);return b}function p(a){let b=m(a);return[f.useCallback(d=>{a.setRootElement(d)},[a]),b]}exports.useLexical=function(a){let b=f.useMemo(()=>c.createEditor(a),[]),[d,e]=p(b);return[b,d,e]}
+'use strict';var c=require("lexical"),f=require("react"),g=require("@lexical/text"),h=require("@lexical/utils"),k="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?f.useLayoutEffect:f.useEffect;function l(a){return a.getEditorState().read(g.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+function m(a){let [b,d]=f.useState(()=>l(a));k(()=>{function e(){let n=l(a);d(n)}e();return h.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return b}function p(a){let b=m(a);return[f.useCallback(d=>{a.setRootElement(d)},[a]),b]}exports.useLexical=function(a){let b=f.useMemo(()=>c.createEditor(a),[]),[d,e]=p(b);return[b,d,e]}

package/DEPRECATED_useLexicalCanShowPlaceholder.dev.js

@@ -38,7 +38,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
   return currentCanShowPlaceholder;
 }
 
@@ -53,7 +53,7 @@ function useCanShowPlaceholder(editor) {
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
-    }), editor.registerReadOnlyListener(() => {
+    }), editor.registerEditableListener(() => {
       resetCanShowPlaceholder();
     }));
   }, [editor]);

package/DEPRECATED_useLexicalCanShowPlaceholder.prod.js

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var b=require("@lexical/text"),d=require("@lexical/utils"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;function g(a){return a.getEditorState().read(b.$canShowPlaceholderCurry(a.isComposing(),a.isReadOnly()))}
-function h(a){let [k,l]=e.useState(()=>g(a));f(()=>{function c(){let m=g(a);l(m)}c();return d.mergeRegister(a.registerUpdateListener(()=>{c()}),a.registerReadOnlyListener(()=>{c()}))},[a]);return k}exports.useLexicalCanShowPlaceholder=function(a){return h(a)}
+'use strict';var b=require("@lexical/text"),d=require("@lexical/utils"),e=require("react"),f="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?e.useLayoutEffect:e.useEffect;function g(a){return a.getEditorState().read(b.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+function h(a){let [k,l]=e.useState(()=>g(a));f(()=>{function c(){let m=g(a);l(m)}c();return d.mergeRegister(a.registerUpdateListener(()=>{c()}),a.registerEditableListener(()=>{c()}))},[a]);return k}exports.useLexicalCanShowPlaceholder=function(a){return h(a)}

package/DEPRECATED_useLexicalEditor.dev.js

@@ -38,7 +38,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  */
 
 function canShowPlaceholderFromCurrentEditorState(editor) {
-  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isReadOnly()));
+  const currentCanShowPlaceholder = editor.getEditorState().read(text.$canShowPlaceholderCurry(editor.isComposing(), editor.isEditable()));
   return currentCanShowPlaceholder;
 }
 
@@ -53,7 +53,7 @@ function useCanShowPlaceholder(editor) {
     resetCanShowPlaceholder();
     return utils.mergeRegister(editor.registerUpdateListener(() => {
       resetCanShowPlaceholder();
-    }), editor.registerReadOnlyListener(() => {
+    }), editor.registerEditableListener(() => {
       resetCanShowPlaceholder();
     }));
   }, [editor]);

package/DEPRECATED_useLexicalEditor.prod.js

@@ -4,5 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var b=require("react"),f=require("@lexical/text"),g=require("@lexical/utils"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?b.useLayoutEffect:b.useEffect;function k(a){return a.getEditorState().read(f.$canShowPlaceholderCurry(a.isComposing(),a.isReadOnly()))}
-function l(a){let [c,d]=b.useState(()=>k(a));h(()=>{function e(){let m=k(a);d(m)}e();return g.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerReadOnlyListener(()=>{e()}))},[a]);return c}exports.useLexicalEditor=function(a){let c=l(a);return[b.useCallback(d=>{a.setRootElement(d)},[a]),c]}
+'use strict';var b=require("react"),f=require("@lexical/text"),g=require("@lexical/utils"),h="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?b.useLayoutEffect:b.useEffect;function k(a){return a.getEditorState().read(f.$canShowPlaceholderCurry(a.isComposing(),a.isEditable()))}
+function l(a){let [c,d]=b.useState(()=>k(a));h(()=>{function e(){let m=k(a);d(m)}e();return g.mergeRegister(a.registerUpdateListener(()=>{e()}),a.registerEditableListener(()=>{e()}))},[a]);return c}exports.useLexicalEditor=function(a){let c=l(a);return[b.useCallback(d=>{a.setRootElement(d)},[a]),c]}

package/LexicalAutoEmbedPlugin.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { LexicalNode } from 'lexical';
-import { TypeaheadOption } from '@lexical/react/src/LexicalTypeaheadMenuPlugin';
+import { TypeaheadOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { LexicalCommand, LexicalEditor } from 'lexical';
 import * as React from 'react';
 export declare type EmbedMatchResult = {

package/LexicalAutoEmbedPlugin.dev.js

@@ -8,346 +8,12 @@
 
 var link = require('@lexical/link');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlugin');
 var utils = require('@lexical/utils');
 var lexical = require('lexical');
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-/**
- * 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.
- *
- */
-const CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-
-/**
- * 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.
- *
- */
-const useLayoutEffectImpl = CAN_USE_DOM ? React.useLayoutEffect : React.useEffect;
-var useLayoutEffect = useLayoutEffectImpl;
-
-/**
- * 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.
- *
- */
-class TypeaheadOption {
-  constructor(key) {
-    this.key = key;
-    this.ref = {
-      current: null
-    };
-    this.setRefElement = this.setRefElement.bind(this);
-  }
-
-  setRefElement(element) {
-    this.ref = {
-      current: element
-    };
-  }
-
-}
-
-const scrollIntoViewIfNeeded = target => {
-  const container = document.getElementById('typeahead-menu');
-
-  if (container) {
-    const containerRect = container.getBoundingClientRect();
-    const targetRect = target.getBoundingClientRect();
-
-    if (targetRect.bottom > containerRect.bottom) {
-      target.scrollIntoView(false);
-    } else if (targetRect.top < containerRect.top) {
-      target.scrollIntoView();
-    }
-  }
-};
-/**
- * Walk backwards along user input and forward through entity title to try
- * and replace more of the user's text with entity.
- */
-
-
-function getFullMatchOffset(documentText, entryText, offset) {
-  let triggerOffset = offset;
-
-  for (let i = triggerOffset; i <= entryText.length; i++) {
-    if (documentText.substr(-i) === entryText.substr(0, i)) {
-      triggerOffset = i;
-    }
-  }
-
-  return triggerOffset;
-}
-/**
- * Split Lexical TextNode and return a new TextNode only containing matched text.
- * Common use cases include: removing the node, replacing with a new node.
- */
-
-
-function splitNodeContainingQuery(editor, match) {
-  const selection = lexical.$getSelection();
-
-  if (!lexical.$isRangeSelection(selection) || !selection.isCollapsed()) {
-    return null;
-  }
-
-  const anchor = selection.anchor;
-
-  if (anchor.type !== 'text') {
-    return null;
-  }
-
-  const anchorNode = anchor.getNode();
-
-  if (!anchorNode.isSimpleText()) {
-    return null;
-  }
-
-  const selectionOffset = anchor.offset;
-  const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
-  const characterOffset = match.replaceableString.length;
-  const queryOffset = getFullMatchOffset(textContent, match.matchingString, characterOffset);
-  const startOffset = selectionOffset - queryOffset;
-
-  if (startOffset < 0) {
-    return null;
-  }
-
-  let newNode;
-
-  if (startOffset === 0) {
-    [newNode] = anchorNode.splitText(selectionOffset);
-  } else {
-    [, newNode] = anchorNode.splitText(startOffset, selectionOffset);
-  }
-
-  return newNode;
-}
-
-function startTransition(callback) {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
-}
-
-function LexicalPopoverMenu({
-  close,
-  editor,
-  anchorElement,
-  resolution,
-  options,
-  menuRenderFn,
-  onSelectOption
-}) {
-  const [selectedIndex, setHighlightedIndex] = React.useState(null);
-  React.useEffect(() => {
-    setHighlightedIndex(0);
-  }, [resolution.match.matchingString]);
-  const selectOptionAndCleanUp = React.useCallback(async selectedEntry => {
-    editor.update(() => {
-      const textNodeContainingQuery = splitNodeContainingQuery(editor, resolution.match);
-      onSelectOption(selectedEntry, textNodeContainingQuery, close, resolution.match.matchingString);
-    });
-  }, [close, editor, resolution.match, onSelectOption]);
-  const updateSelectedIndex = React.useCallback(index => {
-    const rootElem = editor.getRootElement();
-
-    if (rootElem !== null) {
-      rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
-      setHighlightedIndex(index);
-    }
-  }, [editor]);
-  React.useEffect(() => {
-    return () => {
-      const rootElem = editor.getRootElement();
-
-      if (rootElem !== null) {
-        rootElem.removeAttribute('aria-activedescendant');
-      }
-    };
-  }, [editor]);
-  useLayoutEffect(() => {
-    if (options === null) {
-      setHighlightedIndex(null);
-    } else if (selectedIndex === null) {
-      updateSelectedIndex(0);
-    }
-  }, [options, selectedIndex, updateSelectedIndex]);
-  React.useEffect(() => {
-    return utils.mergeRegister(editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => {
-      const event = payload;
-
-      if (options !== null && options.length && selectedIndex !== null) {
-        const newSelectedIndex = selectedIndex !== options.length - 1 ? selectedIndex + 1 : 0;
-        updateSelectedIndex(newSelectedIndex);
-        const option = options[newSelectedIndex];
-
-        if (option.ref != null && option.ref.current) {
-          scrollIntoViewIfNeeded(option.ref.current);
-        }
-
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-
-      return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => {
-      const event = payload;
-
-      if (options !== null && options.length && selectedIndex !== null) {
-        const newSelectedIndex = selectedIndex !== 0 ? selectedIndex - 1 : options.length - 1;
-        updateSelectedIndex(newSelectedIndex);
-        const option = options[newSelectedIndex];
-
-        if (option.ref != null && option.ref.current) {
-          scrollIntoViewIfNeeded(option.ref.current);
-        }
-
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-
-      return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, payload => {
-      const event = payload;
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      close();
-      return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_TAB_COMMAND, payload => {
-      const event = payload;
-
-      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
-        return false;
-      }
-
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      selectOptionAndCleanUp(options[selectedIndex]);
-      return true;
-    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ENTER_COMMAND, event => {
-      if (options === null || selectedIndex === null || options[selectedIndex] == null) {
-        return false;
-      }
-
-      if (event !== null) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-
-      selectOptionAndCleanUp(options[selectedIndex]);
-      return true;
-    }, lexical.COMMAND_PRIORITY_LOW));
-  }, [selectOptionAndCleanUp, close, editor, options, selectedIndex, updateSelectedIndex]);
-  const listItemProps = React.useMemo(() => ({
-    selectOptionAndCleanUp,
-    selectedIndex,
-    setHighlightedIndex
-  }), [selectOptionAndCleanUp, selectedIndex]);
-  return menuRenderFn(anchorElement, listItemProps, resolution.match.matchingString);
-}
-
-function useAnchorElementRef(resolution, options) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const anchorElementRef = React.useRef(document.createElement('div'));
-  React.useEffect(() => {
-    const rootElement = editor.getRootElement();
-
-    function positionMenu() {
-      const containerDiv = anchorElementRef.current;
-      containerDiv.setAttribute('aria-label', 'Typeahead menu');
-      containerDiv.setAttribute('id', 'typeahead-menu');
-      containerDiv.setAttribute('role', 'listbox');
-
-      if (rootElement !== null && resolution !== null) {
-        const {
-          left,
-          top,
-          height,
-          width
-        } = resolution.getRect();
-        containerDiv.style.top = `${top + height + window.pageYOffset}px`;
-        containerDiv.style.left = `${left + width + window.pageXOffset}px`;
-        containerDiv.style.display = 'block';
-        containerDiv.style.position = 'absolute';
-
-        if (!containerDiv.isConnected) {
-          document.body.append(containerDiv);
-        }
-
-        anchorElementRef.current = containerDiv;
-        rootElement.setAttribute('aria-controls', 'typeahead-menu');
-      }
-    }
-
-    if (resolution !== null) {
-      positionMenu();
-      window.addEventListener('resize', positionMenu);
-      return () => {
-        window.removeEventListener('resize', positionMenu);
-
-        if (rootElement !== null) {
-          rootElement.removeAttribute('aria-controls');
-        }
-      };
-    }
-  }, [editor, resolution, options]);
-  return anchorElementRef;
-}
-function LexicalNodeMenuPlugin({
-  options,
-  nodeKey,
-  onClose,
-  onSelectOption,
-  menuRenderFn
-}) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [resolution, setResolution] = React.useState(null);
-  const anchorElementRef = useAnchorElementRef(resolution, options);
-  React.useEffect(() => {
-    if (nodeKey && resolution == null) {
-      editor.update(() => {
-        const node = lexical.$getNodeByKey(nodeKey);
-        const domElement = editor.getElementByKey(nodeKey);
-
-        if (node != null && domElement != null) {
-          const text = node.getTextContent();
-          startTransition(() => setResolution({
-            getRect: () => domElement.getBoundingClientRect(),
-            match: {
-              leadOffset: text.length,
-              matchingString: text,
-              replaceableString: text
-            }
-          }));
-        }
-      });
-    } else if (nodeKey == null && resolution != null) {
-      setResolution(null);
-    }
-  }, [editor, nodeKey, resolution]);
-  return resolution === null || editor === null ? null : /*#__PURE__*/React.createElement(LexicalPopoverMenu, {
-    close: onClose,
-    resolution: resolution,
-    editor: editor,
-    anchorElement: anchorElementRef.current,
-    options: options,
-    menuRenderFn: menuRenderFn,
-    onSelectOption: onSelectOption
-  });
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -357,7 +23,7 @@ function LexicalNodeMenuPlugin({
  */
 const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 const INSERT_EMBED_COMMAND = lexical.createCommand();
-class AutoEmbedOption extends TypeaheadOption {
+class AutoEmbedOption extends LexicalTypeaheadMenuPlugin.TypeaheadOption {
   constructor(title, options) {
     super(title);
     this.title = title;
@@ -461,7 +127,7 @@ function LexicalAutoEmbedPlugin({
       closeMenu();
     });
   }, [editor]);
-  return nodeKey != null ? /*#__PURE__*/React.createElement(LexicalNodeMenuPlugin, {
+  return nodeKey != null ? /*#__PURE__*/React.createElement(LexicalTypeaheadMenuPlugin.LexicalNodeMenuPlugin, {
     nodeKey: nodeKey,
     onClose: reset,
     onSelectOption: onSelectOption,

package/LexicalAutoEmbedPlugin.js.flow

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {LexicalNode, MutationListener} from 'lexical';
+
+import {TypeaheadOption} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import type {LexicalCommand, LexicalEditor, NodeKey, TextNode} from 'lexical';
+import * as React from 'react';
+import {createCommand} from 'lexical';
+
+export type EmbedMatchResult = {
+  url: string,
+  id: string,
+};
+
+export interface EmbedConfig {
+  // Used to identify this config e.g. youtube, tweet, google-maps.
+  type: string;
+  // Determine if a given URL is a match and return url data.
+  parseUrl: (text: string) => EmbedMatchResult | null;
+  // Create the Lexical embed node from the url data.
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => void;
+}
+
+export const URL_MATCHER: RegExp =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+export const INSERT_EMBED_COMMAND: LexicalCommand<EmbedConfig['type']> =
+  createCommand();
+
+export type EmbedMenuProps = {
+  selectedItemIndex: number | null,
+  onOptionClick: (option: AutoEmbedOption, index: number) => void,
+  onOptionMouseEnter: (index: number) => void,
+  options: Array<AutoEmbedOption>,
+};
+
+export type EmbedMenuComponent = React.ComponentType<EmbedMenuProps>;
+
+type LexicalAutoEmbedPluginProps<TEmbedConfig> = {
+  embedConfigs: Array<TEmbedConfig>,
+  onOpenEmbedModalForConfig: (embedConfig: TEmbedConfig) => void,
+  menuComponent: EmbedMenuComponent,
+  getMenuOptions: (
+    activeEmbedConfig: TEmbedConfig,
+    embedFn: () => void,
+    dismissFn: () => void,
+  ) => Array<AutoEmbedOption>,
+};
+
+declare export class AutoEmbedOption extends TypeaheadOption {
+  title: string;
+  icon: React.MixedElement;
+  onSelect: (targetNode: LexicalNode | null) => void;
+  constructor(
+    title: string,
+    options: {
+      icon: React.MixedElement,
+      onSelect: (targetNode: LexicalNode | null) => void,
+    },
+  ): void;
+}
+
+declare export function LexicalAutoEmbedPlugin<TEmbedConfig>(
+  LexicalAutoEmbedPluginProps<TEmbedConfig>,
+): React.MixedElement | null;

package/LexicalAutoEmbedPlugin.prod.js

@@ -4,18 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var f=require("@lexical/link"),n=require("@lexical/react/LexicalComposerContext"),z=require("@lexical/utils"),A=require("lexical"),C=require("react"),D=require("react-dom"),E="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?C.useLayoutEffect:C.useEffect;class F{constructor(b){this.key=b;this.ref={current:null};this.setRefElement=this.setRefElement.bind(this)}setRefElement(b){this.ref={current:b}}}
-let G=b=>{var a=document.getElementById("typeahead-menu");if(a){a=a.getBoundingClientRect();const k=b.getBoundingClientRect();k.bottom>a.bottom?b.scrollIntoView(!1):k.top<a.top&&b.scrollIntoView()}};
-function H(b,a){b=A.$getSelection();if(!A.$isRangeSelection(b)||!b.isCollapsed())return null;var k=b.anchor;if("text"!==k.type)return null;b=k.getNode();if(!b.isSimpleText())return null;k=k.offset;let q=b.getTextContent().slice(0,k);var c=a.matchingString;a=a.replaceableString.length;for(let e=a;e<=c.length;e++)q.substr(-e)===c.substr(0,e)&&(a=e);a=k-a;if(0>a)return null;let g;0===a?[g]=b.splitText(k):[,g]=b.splitText(a,k);return g}function I(b){C.startTransition?C.startTransition(b):b()}
-function J({close:b,editor:a,anchorElement:k,resolution:q,options:c,menuRenderFn:g,onSelectOption:e}){let [d,v]=C.useState(null);C.useEffect(()=>{v(0)},[q.match.matchingString]);let p=C.useCallback(async h=>{a.update(()=>{const l=H(a,q.match);e(h,l,b,q.match.matchingString)})},[b,a,q.match,e]),t=C.useCallback(h=>{const l=a.getRootElement();null!==l&&(l.setAttribute("aria-activedescendant","typeahead-item-"+h),v(h))},[a]);C.useEffect(()=>()=>{let h=a.getRootElement();null!==h&&h.removeAttribute("aria-activedescendant")},
-[a]);E(()=>{null===c?v(null):null===d&&t(0)},[c,d,t]);C.useEffect(()=>z.mergeRegister(a.registerCommand(A.KEY_ARROW_DOWN_COMMAND,h=>{if(null!==c&&c.length&&null!==d){var l=d!==c.length-1?d+1:0;t(l);l=c[l];null!=l.ref&&l.ref.current&&G(l.ref.current);h.preventDefault();h.stopImmediatePropagation()}return!0},A.COMMAND_PRIORITY_LOW),a.registerCommand(A.KEY_ARROW_UP_COMMAND,h=>{if(null!==c&&c.length&&null!==d){var l=0!==d?d-1:c.length-1;t(l);l=c[l];null!=l.ref&&l.ref.current&&G(l.ref.current);h.preventDefault();
-h.stopImmediatePropagation()}return!0},A.COMMAND_PRIORITY_LOW),a.registerCommand(A.KEY_ESCAPE_COMMAND,h=>{h.preventDefault();h.stopImmediatePropagation();b();return!0},A.COMMAND_PRIORITY_LOW),a.registerCommand(A.KEY_TAB_COMMAND,h=>{if(null===c||null===d||null==c[d])return!1;h.preventDefault();h.stopImmediatePropagation();p(c[d]);return!0},A.COMMAND_PRIORITY_LOW),a.registerCommand(A.KEY_ENTER_COMMAND,h=>{if(null===c||null===d||null==c[d])return!1;null!==h&&(h.preventDefault(),h.stopImmediatePropagation());
-p(c[d]);return!0},A.COMMAND_PRIORITY_LOW)),[p,b,a,c,d,t]);let w=C.useMemo(()=>({selectOptionAndCleanUp:p,selectedIndex:d,setHighlightedIndex:v}),[p,d]);return g(k,w,q.match.matchingString)}
-function K(b,a){let [k]=n.useLexicalComposerContext(),q=C.useRef(document.createElement("div"));C.useEffect(()=>{function c(){let e=q.current;e.setAttribute("aria-label","Typeahead menu");e.setAttribute("id","typeahead-menu");e.setAttribute("role","listbox");if(null!==g&&null!==b){let {left:d,top:v,height:p,width:t}=b.getRect();e.style.top=`${v+p+window.pageYOffset}px`;e.style.left=`${d+t+window.pageXOffset}px`;e.style.display="block";e.style.position="absolute";e.isConnected||document.body.append(e);
-q.current=e;g.setAttribute("aria-controls","typeahead-menu")}}let g=k.getRootElement();if(null!==b)return c(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c);null!==g&&g.removeAttribute("aria-controls")}},[k,b,a]);return q}
-function L({options:b,nodeKey:a,onClose:k,onSelectOption:q,menuRenderFn:c}){let [g]=n.useLexicalComposerContext(),[e,d]=C.useState(null),v=K(e,b);C.useEffect(()=>{a&&null==e?g.update(()=>{let p=A.$getNodeByKey(a),t=g.getElementByKey(a);if(null!=p&&null!=t){let w=p.getTextContent();I(()=>d({getRect:()=>t.getBoundingClientRect(),match:{leadOffset:w.length,matchingString:w,replaceableString:w}}))}}):null==a&&null!=e&&d(null)},[g,a,e]);return null===e||null===g?null:C.createElement(J,{close:k,resolution:e,
-editor:g,anchorElement:v.current,options:b,menuRenderFn:c,onSelectOption:q})}let M=A.createCommand();class N extends F{constructor(b,a){super(b);this.title=b;this.icon=a.icon;this.onSelect=a.onSelect.bind(this)}}exports.AutoEmbedOption=N;exports.INSERT_EMBED_COMMAND=M;
-exports.LexicalAutoEmbedPlugin=function({embedConfigs:b,onOpenEmbedModalForConfig:a,getMenuOptions:k,menuComponent:q}){let [c]=n.useLexicalComposerContext(),[g,e]=C.useState(null),[d,v]=C.useState(null),p=C.useCallback(()=>{e(null);v(null)},[]),t=C.useCallback(r=>{c.getEditorState().read(()=>{const m=A.$getNodeByKey(r);if(f.$isLinkNode(m)){const u=b.find(x=>x.parseUrl(m.__url));null!=u&&(v(u),e(m.getKey()))}})},[c,b]);C.useEffect(()=>{let r=(m,{updateTags:u,dirtyLeaves:x})=>{for(const [y,B]of m)"created"===
-B&&u.has("paste")&&1===x.size?t(y):y===g&&p()};return z.mergeRegister(...[f.LinkNode,f.AutoLinkNode].map(m=>c.registerMutationListener(m,(...u)=>r(...u))))},[t,c,b,g,p]);C.useEffect(()=>c.registerCommand(M,r=>{let m=b.find(({type:u})=>u===r);return m?(a(m),!0):!1},A.COMMAND_PRIORITY_EDITOR),[c,b,a]);let w=C.useCallback(()=>{if(null!=d&&null!=g){const r=c.getEditorState().read(()=>{const m=A.$getNodeByKey(g);return f.$isLinkNode(m)?m:null});if(f.$isLinkNode(r)){const m=d.parseUrl(r.__url);null!=m&&
-(c.update(()=>{d.insertNode(c,m)}),r.isAttached()&&c.update(()=>{r.remove()}))}}},[d,c,g]),h=C.useMemo(()=>null!=d&&null!=g?k(d,w,p):[],[d,w,k,g,p]),l=C.useCallback((r,m,u)=>{c.update(()=>{r.onSelect(m);u()})},[c]);return null!=g?C.createElement(L,{nodeKey:g,onClose:p,onSelectOption:l,options:h,menuRenderFn:(r,{selectedIndex:m,selectOptionAndCleanUp:u,setHighlightedIndex:x})=>r&&null!=g?D.createPortal(C.createElement(q,{options:h,selectedItemIndex:m,onOptionClick:(y,B)=>{x(B);u(y)},onOptionMouseEnter:y=>
-{x(y)}}),r):null}):null};exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
+'use strict';var e=require("@lexical/link"),m=require("@lexical/react/LexicalComposerContext"),q=require("@lexical/react/LexicalTypeaheadMenuPlugin"),t=require("@lexical/utils"),u=require("lexical"),B=require("react"),C=require("react-dom");let D=u.createCommand();class E extends q.TypeaheadOption{constructor(g,n){super(g);this.title=g;this.icon=n.icon;this.onSelect=n.onSelect.bind(this)}}exports.AutoEmbedOption=E;exports.INSERT_EMBED_COMMAND=D;
+exports.LexicalAutoEmbedPlugin=function({embedConfigs:g,onOpenEmbedModalForConfig:n,getMenuOptions:v,menuComponent:F}){let [c]=m.useLexicalComposerContext(),[f,w]=B.useState(null),[h,x]=B.useState(null),p=B.useCallback(()=>{w(null);x(null)},[]),y=B.useCallback(b=>{c.getEditorState().read(()=>{const a=u.$getNodeByKey(b);if(e.$isLinkNode(a)){const d=g.find(k=>k.parseUrl(a.__url));null!=d&&(x(d),w(a.getKey()))}})},[c,g]);B.useEffect(()=>{let b=(a,{updateTags:d,dirtyLeaves:k})=>{for(const [l,r]of a)"created"===
+r&&d.has("paste")&&1===k.size?y(l):l===f&&p()};return t.mergeRegister(...[e.LinkNode,e.AutoLinkNode].map(a=>c.registerMutationListener(a,(...d)=>b(...d))))},[y,c,g,f,p]);B.useEffect(()=>c.registerCommand(D,b=>{let a=g.find(({type:d})=>d===b);return a?(n(a),!0):!1},u.COMMAND_PRIORITY_EDITOR),[c,g,n]);let z=B.useCallback(()=>{if(null!=h&&null!=f){const b=c.getEditorState().read(()=>{const a=u.$getNodeByKey(f);return e.$isLinkNode(a)?a:null});if(e.$isLinkNode(b)){const a=h.parseUrl(b.__url);null!=a&&
+(c.update(()=>{h.insertNode(c,a)}),b.isAttached()&&c.update(()=>{b.remove()}))}}},[h,c,f]),A=B.useMemo(()=>null!=h&&null!=f?v(h,z,p):[],[h,z,v,f,p]),G=B.useCallback((b,a,d)=>{c.update(()=>{b.onSelect(a);d()})},[c]);return null!=f?B.createElement(q.LexicalNodeMenuPlugin,{nodeKey:f,onClose:p,onSelectOption:G,options:A,menuRenderFn:(b,{selectedIndex:a,selectOptionAndCleanUp:d,setHighlightedIndex:k})=>b&&null!=f?C.createPortal(B.createElement(F,{options:A,selectedItemIndex:a,onOptionClick:(l,r)=>{k(r);
+d(l)},onOptionMouseEnter:l=>{k(l)}}),b):null}):null};exports.URL_MATCHER=/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/

package/LexicalCheckListPlugin.dev.js

@@ -46,7 +46,7 @@ function CheckListPlugin() {
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_SPACE_COMMAND, event => {
       const activeItem = getActiveCheckListItem();
 
-      if (activeItem != null && !editor.isReadOnly()) {
+      if (activeItem != null && editor.isEditable()) {
         editor.update(() => {
           const listItemNode = lexical.$getNearestNodeFromDOMNode(activeItem);
 
@@ -140,7 +140,7 @@ function handleClick(event) {
     const domNode = event.target;
     const editor = findEditor(domNode);
 
-    if (editor != null && !editor.isReadOnly()) {
+    if (editor != null && editor.isEditable()) {
       editor.update(() => {
         if (event.target) {
           const node = lexical.$getNearestNodeFromDOMNode(domNode);

package/LexicalCheckListPlugin.prod.js

@@ -6,9 +6,9 @@
  */
 'use strict';var e=require("@lexical/list"),g=require("@lexical/react/LexicalComposerContext"),k=require("@lexical/utils"),l=require("lexical"),m=require("react");let n=0;function p(){0===n++&&(document.addEventListener("click",q),document.addEventListener("pointerdown",r));return()=>{0===--n&&(document.removeEventListener("click",q),document.removeEventListener("pointerdown",r))}}
 function t(a,d){let b=a.target;if(b instanceof HTMLElement){var c=b.firstChild;null!=c&&c instanceof HTMLElement&&("UL"===c.tagName||"OL"===c.tagName)||(c=b.parentNode)&&"check"===c.__lexicalListType&&(a=a.pageX,c=b.getBoundingClientRect(),("rtl"===b.dir?a<c.right&&a>c.right-20:a>c.left&&a<c.left+20)&&d())}}
-function q(a){t(a,()=>{let d=a.target,b=u(d);null==b||b.isReadOnly()||b.update(()=>{if(a.target){let c=l.$getNearestNodeFromDOMNode(d);e.$isListItemNode(c)&&(d.focus(),c.toggleChecked())}})})}function r(a){t(a,()=>{a.preventDefault()})}function u(a){for(;a;){if(a.__lexicalEditor)return a.__lexicalEditor;a=a.parentNode}return null}function v(){let a=document.activeElement;return null!=a&&"LI"===a.tagName&&null!=a.parentNode&&"check"===a.parentNode.__lexicalListType?a:null}
+function q(a){t(a,()=>{let d=a.target,b=u(d);null!=b&&b.isEditable()&&b.update(()=>{if(a.target){let c=l.$getNearestNodeFromDOMNode(d);e.$isListItemNode(c)&&(d.focus(),c.toggleChecked())}})})}function r(a){t(a,()=>{a.preventDefault()})}function u(a){for(;a;){if(a.__lexicalEditor)return a.__lexicalEditor;a=a.parentNode}return null}function v(){let a=document.activeElement;return null!=a&&"LI"===a.tagName&&null!=a.parentNode&&"check"===a.parentNode.__lexicalListType?a:null}
 function w(a,d){let b=d?a.getPreviousSibling():a.getNextSibling();for(;null==b&&e.$isListItemNode(a);)a=a.getParentOrThrow().getParent(),null!=a&&(b=d?a.getPreviousSibling():a.getNextSibling());for(;e.$isListItemNode(b);){a=d?b.getLastChild():b.getFirstChild();if(!e.$isListNode(a))return b;b=d?a.getLastChild():a.getFirstChild()}return null}
 function x(a,d,b){let c=v();null!=c&&d.update(()=>{var f=l.$getNearestNodeFromDOMNode(c);if(e.$isListItemNode(f)&&(f=w(f,b),null!=f)){f.selectStart();let h=d.getElementByKey(f.__key);null!=h&&(a.preventDefault(),setTimeout(()=>{h.focus()},0))}});return!1}
 exports.CheckListPlugin=function(){let [a]=g.useLexicalComposerContext();m.useEffect(()=>k.mergeRegister(a.registerCommand(e.INSERT_CHECK_LIST_COMMAND,()=>{e.insertList(a,"check");return!0},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_DOWN_COMMAND,d=>x(d,a,!1),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_UP_COMMAND,d=>x(d,a,!0),l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ESCAPE_COMMAND,()=>{if(null!=v()){let d=a.getRootElement();null!=d&&d.focus();return!0}return!1},l.COMMAND_PRIORITY_LOW),
-a.registerCommand(l.KEY_SPACE_COMMAND,d=>{let b=v();return null==b||a.isReadOnly()?!1:(a.update(()=>{let c=l.$getNearestNodeFromDOMNode(b);e.$isListItemNode(c)&&(d.preventDefault(),c.toggleChecked())}),!0)},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_LEFT_COMMAND,d=>a.getEditorState().read(()=>{var b=l.$getSelection();if(l.$isRangeSelection(b)&&b.isCollapsed()){var {anchor:c}=b;if((b="element"===c.type)||0===c.offset){c=c.getNode();let f=k.$findMatchingParent(c,h=>l.$isElementNode(h)&&!h.isInline());
+a.registerCommand(l.KEY_SPACE_COMMAND,d=>{let b=v();return null!=b&&a.isEditable()?(a.update(()=>{let c=l.$getNearestNodeFromDOMNode(b);e.$isListItemNode(c)&&(d.preventDefault(),c.toggleChecked())}),!0):!1},l.COMMAND_PRIORITY_LOW),a.registerCommand(l.KEY_ARROW_LEFT_COMMAND,d=>a.getEditorState().read(()=>{var b=l.$getSelection();if(l.$isRangeSelection(b)&&b.isCollapsed()){var {anchor:c}=b;if((b="element"===c.type)||0===c.offset){c=c.getNode();let f=k.$findMatchingParent(c,h=>l.$isElementNode(h)&&!h.isInline());
 if(e.$isListItemNode(f)&&(b||f.getFirstDescendant()===c)&&(b=a.getElementByKey(f.__key),null!=b&&document.activeElement!==b))return b.focus(),d.preventDefault(),!0}}return!1}),l.COMMAND_PRIORITY_LOW),p()));return null}

package/LexicalCollaborationPlugin.dev.js

@@ -78,7 +78,8 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     provider.on('reload', onProviderDocReload);
     provider.on('status', onStatus);
     provider.on('sync', onSync);
-    awareness.on('update', onAwarenessUpdate);
+    awareness.on('update', onAwarenessUpdate); // This updates the local editor state when we recieve updates from other clients
+
     root.getSharedType().observeDeep(onYjsTreeChanges);
     const removeListener = editor.registerUpdateListener(({
       prevEditorState,

package/LexicalCollaborationPlugin.js.flow

@@ -7,24 +7,9 @@
  * @flow strict
  */
 
+import type {ProviderAwareness} from '@lexical/yjs';
 import type {Doc, RelativePosition} from 'yjs';
 
-export type UserState = {
-  anchorPos: null | RelativePosition,
-  focusPos: null | RelativePosition,
-  name: string,
-  color: string,
-  focusing: boolean,
-};
-
-export type ProviderAwareness = {
-  getLocalState: () => UserState | null,
-  setLocalState: (UserState) => void,
-  getStates: () => Map<number, UserState>,
-  on: (type: 'update', cb: () => void) => void,
-  off: (type: 'update', cb: () => void) => void,
-};
-
 export interface Provider {
   connect(): void | Promise<void>;
   disconnect(): void;

package/LexicalComposer.d.ts

@@ -15,7 +15,7 @@ declare type Props = {
         namespace: string;
         nodes?: ReadonlyArray<Klass<LexicalNode>>;
         onError: (error: Error, editor: LexicalEditor) => void;
-        readOnly?: boolean;
+        editable?: boolean;
         theme?: EditorThemeClasses;
         editorState?: InitialEditorStateType;
     }>;