lexical 0.1.10 → 0.1.11

package/AutoLinkNode.js.flow

@@ -0,0 +1,25 @@
+/**
+ * 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, RangeSelection} from 'lexical';
+
+import {LinkNode} from 'lexical/LinkNode';
+
+declare export class AutoLinkNode extends LinkNode {
+  static getType(): string;
+  // $FlowFixMe[incompatible-extend]
+  static clone(node: AutoLinkNode): AutoLinkNode;
+  insertNewAfter(selection: RangeSelection): null | LexicalNode;
+  // $FlowFixMe[incompatible-extend]
+  canInsertTextAfter(): true;
+}
+declare export function $createAutoLinkNode(url: string): AutoLinkNode;
+declare export function $isAutoLinkNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof AutoLinkNode);

package/CodeHighlightNode.js.flow

@@ -0,0 +1,43 @@
+/**
+ * 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 {
+  EditorConfig,
+  EditorThemeClasses,
+  LexicalNode,
+  NodeKey,
+} from 'lexical';
+
+import {TextNode} from 'lexical';
+
+declare export class CodeHighlightNode extends TextNode {
+  __highlightType: ?string;
+  constructor(text: string, highlightType?: string, key?: NodeKey): void;
+  static getType(): string;
+  static clone(node: CodeHighlightNode): CodeHighlightNode;
+  createDOM<EditorContext>(config: EditorConfig<EditorContext>): HTMLElement;
+  updateDOM<EditorContext>(
+    // $FlowFixMe
+    prevNode: CodeHighlightNode,
+    dom: HTMLElement,
+    config: EditorConfig<EditorContext>,
+  ): boolean;
+  setFormat(format: number): this;
+}
+declare function getHighlightThemeClass(
+  theme: EditorThemeClasses,
+  highlightType: ?string,
+): ?string;
+declare export function $createCodeHighlightNode(
+  text: string,
+  highlightType?: string,
+): CodeHighlightNode;
+declare export function $isCodeHighlightNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof CodeHighlightNode);

package/CodeNode.js.flow

@@ -0,0 +1,46 @@
+/**
+ * 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 {
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  ParagraphNode,
+  RangeSelection,
+} from 'lexical';
+import type {CodeHighlightNode} from 'lexical/CodeHighlightNode';
+
+import {ElementNode} from 'lexical';
+
+declare export class CodeNode extends ElementNode {
+  static getType(): string;
+  static clone(node: CodeNode): CodeNode;
+  constructor(key?: NodeKey): void;
+  createDOM<EditorContext>(config: EditorConfig<EditorContext>): HTMLElement;
+  updateDOM(prevNode: CodeNode, dom: HTMLElement): boolean;
+  insertNewAfter(
+    selection: RangeSelection,
+  ): null | ParagraphNode | CodeHighlightNode;
+  canInsertTab(): true;
+  collapseAtStart(): true;
+  setLanguage(language: string): void;
+  getLanguage(): string | void;
+}
+declare export function $createCodeNode(): CodeNode;
+declare export function $isCodeNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof CodeNode);
+
+declare export function getFirstCodeHighlightNodeOfLine(
+  anchor: LexicalNode,
+): ?CodeHighlightNode;
+
+declare export function getLastCodeHighlightNodeOfLine(
+  anchor: LexicalNode,
+): ?CodeHighlightNode;

package/HashtagNode.js.flow

@@ -0,0 +1,27 @@
+/**
+ * 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 {EditorConfig, LexicalNode, NodeKey} from 'lexical';
+
+import {TextNode} from 'lexical';
+
+declare export class HashtagNode extends TextNode {
+  static getType(): string;
+  static clone(node: HashtagNode): HashtagNode;
+  constructor(text: string, key?: NodeKey): void;
+  createDOM<EditorContext>(config: EditorConfig<EditorContext>): HTMLElement;
+  setTextContent(text: string): TextNode;
+  canInsertTextBefore(): boolean;
+  canInsertTextAfter(): boolean;
+}
+declare export function $toggleHashtag(node: TextNode): TextNode;
+declare export function $createHashtagNode(text?: string): TextNode;
+declare export function $isHashtagNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof HashtagNode);

package/HeadingNode.js.flow

@@ -0,0 +1,32 @@
+/**
+ * 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 {EditorConfig, LexicalNode, NodeKey, ParagraphNode} from 'lexical';
+
+import {ElementNode} from 'lexical';
+
+type HeadingTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+declare export class HeadingNode extends ElementNode {
+  __tag: HeadingTagType;
+  static getType(): string;
+  static clone(node: HeadingNode): HeadingNode;
+  constructor(tag: HeadingTagType, key?: NodeKey): void;
+  getTag(): HeadingTagType;
+  createDOM<EditorContext>(config: EditorConfig<EditorContext>): HTMLElement;
+  updateDOM(prevNode: HeadingNode, dom: HTMLElement): boolean;
+  insertNewAfter(): ParagraphNode;
+  collapseAtStart(): true;
+}
+declare export function $createHeadingNode(
+  headingTag: HeadingTagType,
+): HeadingNode;
+
+declare export function $isHeadingNode(
+  node: ?LexicalNode,
+): boolean %checks(node instanceof HeadingNode);

package/Lexical.dev.js

@@ -43,7 +43,7 @@ const IS_ALIGN_CENTER = 2;
 const IS_ALIGN_RIGHT = 3;
 const IS_ALIGN_JUSTIFY = 4; // Reconciliation
 
-const NO_BREAK_SPACE_CHAR = '\u00A0';
+const ZERO_WIDTH_CHAR = '\u200b';
 const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
 const LTR = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' + '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' + '\uFE00-\uFE6F\uFEFD-\uFFFF';
 const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']');
@@ -70,55 +70,6 @@ const TEXT_MODE_TO_TYPE = {
   token: IS_TOKEN
 };
 
-/**
- * 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.
- *
- * 
- */
-function resolveElement(element, isBackward, focusOffset) {
-  const parent = element.getParent();
-  let offset = focusOffset;
-  let block = element;
-
-  if (parent !== null) {
-    if (isBackward && focusOffset === 0) {
-      offset = block.getIndexWithinParent();
-      block = parent;
-    } else if (!isBackward && focusOffset === block.getChildrenSize()) {
-      offset = block.getIndexWithinParent() + 1;
-      block = parent;
-    }
-  }
-
-  return block.getChildAtIndex(isBackward ? offset - 1 : offset);
-}
-
-function getPossibleDecoratorNode(focus, isBackward) {
-  const focusOffset = focus.offset;
-
-  if (focus.type === 'element') {
-    const block = focus.getNode();
-    return resolveElement(block, isBackward, focusOffset);
-  } else {
-    const focusNode = focus.getNode();
-
-    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
-      const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
-
-      if (possibleNode === null) {
-        return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
-      }
-
-      return possibleNode;
-    }
-  }
-
-  return null;
-}
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -511,7 +462,7 @@ function $updateTextNodeFromDOMContent(textNode, textContent, anchorOffset, focu
     const isComposing = node.isComposing();
     let normalizedTextContent = textContent;
 
-    if ((isComposing || compositionEnd) && textContent[textContent.length - 1] === NO_BREAK_SPACE_CHAR) {
+    if ((isComposing || compositionEnd) && textContent[textContent.length - 1] === ZERO_WIDTH_CHAR) {
       normalizedTextContent = textContent.slice(0, -1);
     }
 
@@ -580,12 +531,17 @@ function $shouldPreventDefaultAndInsertText(selection, text, isBeforeInput) {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = anchor.getNode();
-  return anchor.key !== focus.key || // If we're working with a range that is not during composition.
+  const domSelection = window.getSelection();
+  const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
+  const anchorKey = anchor.key;
+  const backingAnchorElement = getActiveEditor().getElementByKey(anchorKey);
+  return anchorKey !== focus.key || // If we're working with a non-text node.
+  !$isTextNode(anchorNode) || // If we're working with a range that is not during composition.
   anchor.offset !== focus.offset && !anchorNode.isComposing() || // If the text length is more than a single character and we're either
   // dealing with this in "beforeinput" or where the node has already recently
   // been changed (thus is dirty).
-  (isBeforeInput || anchorNode.isDirty()) && text.length > 1 || // If we're working with a non-text node.
-  !$isTextNode(anchorNode) || // Check if we're changing from bold to italics, or some other format.
+  (isBeforeInput || anchorNode.isDirty()) && text.length > 1 || // If the DOM selection element is not the same as the backing node
+  backingAnchorElement !== null && !anchorNode.isComposing() && domAnchorNode !== getDOMTextNode(backingAnchorElement) || // Check if we're changing from bold to italics, or some other format.
   anchorNode.getFormat() !== selection.format || // One last set of heuristics to check against.
   $shouldInsertTextAfterOrBeforeTextNode(selection, anchorNode);
 }
@@ -765,6 +721,47 @@ function $nodesOfType(klass) {
   return nodesOfType;
 }
 
+function resolveElement(element, isBackward, focusOffset) {
+  const parent = element.getParent();
+  let offset = focusOffset;
+  let block = element;
+
+  if (parent !== null) {
+    if (isBackward && focusOffset === 0) {
+      offset = block.getIndexWithinParent();
+      block = parent;
+    } else if (!isBackward && focusOffset === block.getChildrenSize()) {
+      offset = block.getIndexWithinParent() + 1;
+      block = parent;
+    }
+  }
+
+  return block.getChildAtIndex(isBackward ? offset - 1 : offset);
+}
+
+function $getDecoratorNode(focus, isBackward) {
+  const focusOffset = focus.offset;
+
+  if (focus.type === 'element') {
+    const block = focus.getNode();
+    return resolveElement(block, isBackward, focusOffset);
+  } else {
+    const focusNode = focus.getNode();
+
+    if (isBackward && focusOffset === 0 || !isBackward && focusOffset === focusNode.getTextContentSize()) {
+      const possibleNode = isBackward ? focusNode.getPreviousSibling() : focusNode.getNextSibling();
+
+      if (possibleNode === null) {
+        return resolveElement(focusNode.getParentOrThrow(), isBackward, focusNode.getIndexWithinParent() + (isBackward ? 0 : 1));
+      }
+
+      return possibleNode;
+    }
+  }
+
+  return null;
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -5006,7 +5003,7 @@ class RangeSelection {
     const anchor = this.anchor;
     const collapse = alter === 'move'; // Handle the selection movement around decorators.
 
-    const possibleNode = getPossibleDecoratorNode(focus, isBackward);
+    const possibleNode = $getDecoratorNode(focus, isBackward);
 
     if ($isDecoratorNode(possibleNode) && !possibleNode.isIsolated()) {
       const sibling = isBackward ? possibleNode.getPreviousSibling() : possibleNode.getNextSibling();
@@ -6680,7 +6677,21 @@ function onCompositionStart(event, editor) {
 
 function onCompositionEndInternal(event, editor) {
   editor.update(() => {
-    $setCompositionKey(null);
+    const compositionKey = editor._compositionKey;
+    $setCompositionKey(null); // Handle termination of composition, as it can sometimes
+    // move to an adjacent DOM node when backspacing.
+
+    if (compositionKey !== null && event.data === '') {
+      const node = $getNodeByKey(compositionKey);
+      const textNode = getDOMTextNode(editor.getElementByKey(compositionKey));
+
+      if (textNode !== null && $isTextNode(node)) {
+        $updateTextNodeFromDOMContent(node, textNode.nodeValue, null, null, true);
+      }
+
+      return;
+    }
+
     $updateSelectedTextFromDOM(editor, true);
   });
 }
@@ -6780,11 +6791,6 @@ function onKeyDown(event, editor) {
   }
 }
 
-function isRootEditable(editor) {
-  const rootElement = editor.getRootElement();
-  return rootElement !== null && rootElement.contentEditable === 'true';
-}
-
 function getRootElementRemoveHandles(rootElement) {
   // $FlowFixMe: internal field
   let eventHandles = rootElement.__lexicalEventHandles;
@@ -6796,11 +6802,6 @@ function getRootElementRemoveHandles(rootElement) {
   }
 
   return eventHandles;
-}
-
-function clearRootElementRemoveHandles(rootElement) {
-  // $FlowFixMe: internal field
-  rootElement._lexicalEventHandles = [];
 } // Mapping root editors to their active nested editors, contains nested editors
 // mapping only, so if root editor is selected map will have no reference to free up memory
 
@@ -6861,11 +6862,11 @@ function addRootElementEvents(rootElement, editor) {
   for (let i = 0; i < rootElementEvents.length; i++) {
     const [eventName, onEvent] = rootElementEvents[i];
     const eventHandler = typeof onEvent === 'function' ? event => {
-      if (isRootEditable(editor)) {
+      if (!editor.isReadOnly()) {
         onEvent(event, editor);
       }
     } : event => {
-      if (isRootEditable(editor)) {
+      if (!editor.isReadOnly()) {
         editor.execCommand(eventName, event);
       }
     };
@@ -6876,30 +6877,37 @@ function addRootElementEvents(rootElement, editor) {
   }
 }
 function removeRootElementEvents(rootElement) {
-  rootElementsRegistered--; // We only want to have a single global selectionchange event handler, shared
-  // between all editor instances.
+  if (rootElementsRegistered !== 0) {
+    rootElementsRegistered--; // We only want to have a single global selectionchange event handler, shared
+    // between all editor instances.
 
-  if (rootElementsRegistered === 0) {
-    const doc = rootElement.ownerDocument;
-    doc.removeEventListener('selectionchange', onDocumentSelectionChange);
+    if (rootElementsRegistered === 0) {
+      const doc = rootElement.ownerDocument;
+      doc.removeEventListener('selectionchange', onDocumentSelectionChange);
+    }
   } // $FlowFixMe: internal field
 
 
-  cleanActiveNestedEditorsMap(rootElement.__lexicalEditor); // $FlowFixMe: internal field
+  const editor = rootElement.__lexicalEditor;
+
+  if (editor != null) {
+    cleanActiveNestedEditorsMap(editor); // $FlowFixMe: internal field
+
+    rootElement.__lexicalEditor = null;
+  }
 
-  rootElement.__lexicalEditor = null;
   const removeHandles = getRootElementRemoveHandles(rootElement);
 
   for (let i = 0; i < removeHandles.length; i++) {
     removeHandles[i]();
-  }
+  } // $FlowFixMe: internal field
 
-  clearRootElementRemoveHandles(rootElement);
+
+  rootElement.__lexicalEventHandles = [];
 }
 
 function cleanActiveNestedEditorsMap(editor) {
-  // $FlowFixMe: internal field
-  if (editor._parentEditor) {
+  if (editor._parentEditor !== null) {
     // For nested editor cleanup map if this editor was marked as active
     const editors = getEditorsToPropagate(editor);
     const rootEditor = editors[editors.length - 1];
@@ -7079,7 +7087,7 @@ function setTextContent(nextText, dom, node) {
   const firstChild = dom.firstChild;
   const isComposing = node.isComposing(); // Always add a suffix if we're composing a node
 
-  const suffix = isComposing ? NO_BREAK_SPACE_CHAR : '';
+  const suffix = isComposing ? ZERO_WIDTH_CHAR : '';
   const text = nextText + suffix;
 
   if (firstChild == null) {
@@ -7903,6 +7911,7 @@ class BaseLexicalEditor {
       command: [new Set(), new Set(), new Set(), new Set(), new Set()],
       decorator: new Set(),
       mutation: new Map(),
+      readonly: new Set(),
       root: new Set(),
       textcontent: new Set(),
       update: new Set()
@@ -7927,6 +7936,7 @@ class BaseLexicalEditor {
     this._key = generateRandomKey();
     this._onError = onError;
     this._htmlConversions = htmlConversions;
+    this._readOnly = false;
   }
 
   isComposing() {
@@ -8165,6 +8175,21 @@ class BaseLexicalEditor {
     if (rootElement !== null) {
       rootElement.blur();
     }
+
+    const domSelection = window.getSelection();
+
+    if (domSelection !== null) {
+      domSelection.removeAllRanges();
+    }
+  }
+
+  isReadOnly() {
+    return this._readOnly;
+  }
+
+  setReadOnly(isReadOnly) {
+    this._readOnly = isReadOnly;
+    triggerListeners('readonly', getSelf(this), true, isReadOnly);
   }
 
 } // We export this to make the addListener types work properly.
@@ -8179,7 +8204,7 @@ class BaseLexicalEditor {
  *
  * 
  */
-const VERSION = '0.1.10';
+const VERSION = '0.1.11';
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -8232,6 +8257,7 @@ exports.$createNodeSelection = $createEmptyObjectSelection;
 exports.$createParagraphNode = $createParagraphNode;
 exports.$createRangeSelection = $createEmptyRangeSelection;
 exports.$createTextNode = $createTextNode;
+exports.$getDecoratorNode = $getDecoratorNode;
 exports.$getNearestNodeFromDOMNode = $getNearestNodeFromDOMNode;
 exports.$getNodeByKey = $getNodeByKey;
 exports.$getPreviousSelection = $getPreviousSelection;