lexical 0.14.3 → 0.14.4

package/Lexical.dev.js

@@ -1666,6 +1666,7 @@ function $garbageCollectDetachedNodes(prevEditorState, editorState, dirtyLeaves,
  */
 let subTreeTextContent = '';
 let subTreeDirectionedTextContent = '';
+let subTreeTextFormat = null;
 let editorTextContent = '';
 let activeEditorConfig;
 let activeEditor$1;
@@ -1836,6 +1837,10 @@ function createChildren(children, element, _startIndex, endIndex, dom, insertDOM
   let startIndex = _startIndex;
   for (; startIndex <= endIndex; ++startIndex) {
     createNode(children[startIndex], dom, insertDOM);
+    const node = activeNextNodeMap.get(children[startIndex]);
+    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
+      subTreeTextFormat = node.getFormat();
+    }
   }
   if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
     subTreeTextContent += DOUBLE_LINE_BREAK;
@@ -1871,6 +1876,11 @@ function reconcileElementTerminatingLineBreak(prevElement, nextElement, dom) {
     dom.appendChild(element);
   }
 }
+function reconcileParagraphFormat(element) {
+  if ($isParagraphNode(element) && subTreeTextFormat != null && subTreeTextFormat !== element.__textFormat) {
+    element.setTextFormat(subTreeTextFormat);
+  }
+}
 function reconcileBlockDirection(element, dom) {
   const previousSubTreeDirectionTextContent =
   // @ts-expect-error: internal field
@@ -1930,9 +1940,12 @@ function reconcileBlockDirection(element, dom) {
 function reconcileChildrenWithDirection(prevElement, nextElement, dom) {
   const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
+  subTreeTextFormat = null;
   reconcileChildren(prevElement, nextElement, dom);
   reconcileBlockDirection(nextElement, dom);
+  reconcileParagraphFormat(nextElement);
   subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
+  subTreeTextFormat = null;
 }
 function createChildrenArray(element, nodeMap) {
   const children = [];
@@ -1965,6 +1978,10 @@ function reconcileChildren(prevElement, nextElement, dom) {
       dom.replaceChild(replacementDOM, lastDOM);
       destroyNode(prevFirstChildKey, null);
     }
+    const nextChildNode = activeNextNodeMap.get(nextFrstChildKey);
+    if (subTreeTextFormat === null && $isTextNode(nextChildNode)) {
+      subTreeTextFormat = nextChildNode.getFormat();
+    }
   } else {
     const prevChildren = createChildrenArray(prevElement, activePrevNodeMap);
     const nextChildren = createChildrenArray(nextElement, activeNextNodeMap);
@@ -2168,6 +2185,10 @@ function reconcileNodeChildren(nextElement, prevChildren, nextChildren, prevChil
         nextIndex++;
       }
     }
+    const node = activeNextNodeMap.get(nextKey);
+    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
+      subTreeTextFormat = node.getFormat();
+    }
   }
   const appendNewChildren = prevIndex > prevEndIndex;
   const removeOldChildren = nextIndex > nextEndIndex;
@@ -2377,7 +2398,12 @@ function onSelectionChange(domSelection, editor, isActive) {
             selection.format = anchorNode.getFormat();
             selection.style = anchorNode.getStyle();
           } else if (anchor.type === 'element' && !isRootTextContentEmpty) {
-            selection.format = 0;
+            const lastNode = anchor.getNode();
+            if (lastNode instanceof ParagraphNode && lastNode.getChildrenSize() === 0) {
+              selection.format = lastNode.getTextFormat();
+            } else {
+              selection.format = 0;
+            }
             selection.style = '';
           }
         }
@@ -3048,7 +3074,7 @@ function addRootElementEvents(rootElement, editor) {
   // between all editor instances.
   const doc = rootElement.ownerDocument;
   const documentRootElementsCount = rootElementsRegistered.get(doc);
-  if (documentRootElementsCount === undefined) {
+  if (documentRootElementsCount === undefined || documentRootElementsCount < 1) {
     doc.addEventListener('selectionchange', onDocumentSelectionChange);
   }
   rootElementsRegistered.set(doc, documentRootElementsCount || 0 + 1);
@@ -3110,7 +3136,7 @@ function removeRootElementEvents(rootElement) {
   } // We only want to have a single global selectionchange event handler, shared
   // between all editor instances.
   rootElementsRegistered.set(doc, documentRootElementsCount - 1);
-  if (documentRootElementsCount === 1) {
+  if (rootElementsRegistered.get(doc) === 0) {
     doc.removeEventListener('selectionchange', onDocumentSelectionChange);
   }
 
@@ -3711,6 +3737,9 @@ class LexicalNode {
     mutableNode.__next = latestNode.__next;
     mutableNode.__prev = latestNode.__prev;
     if ($isElementNode(latestNode) && $isElementNode(mutableNode)) {
+      if ($isParagraphNode(latestNode) && $isParagraphNode(mutableNode)) {
+        mutableNode.__textFormat = latestNode.__textFormat;
+      }
       mutableNode.__first = latestNode.__first;
       mutableNode.__last = latestNode.__last;
       mutableNode.__size = latestNode.__size;
@@ -4716,7 +4745,7 @@ class TextNode extends LexicalNode {
    * Sets the node detail to the provided TextDetailType or 32-bit integer. Note that the TextDetailType
    * version of the argument can only specify one detail value and doing so will remove all other detail values that
    * may be applied to the node. For toggling behavior, consider using {@link TextNode.toggleDirectionless}
-   * or {@link TextNode.togglerUnmergeable}
+   * or {@link TextNode.toggleUnmergeable}
    *
    * @param detail - TextDetailType or 32-bit integer representing the node detail.
    *
@@ -5074,16 +5103,18 @@ class TextNode extends LexicalNode {
 function convertSpanElement(domNode) {
   // domNode is a <span> since we matched it by nodeName
   const span = domNode;
+  const style = span.style;
+  const fontWeight = style.fontWeight;
   // Google Docs uses span tags + font-weight for bold text
-  const hasBoldFontWeight = span.style.fontWeight === '700';
+  const hasBoldFontWeight = fontWeight === '700' || fontWeight === 'bold';
   // Google Docs uses span tags + text-decoration: line-through for strikethrough text
-  const hasLinethroughTextDecoration = span.style.textDecoration === 'line-through';
+  const hasLinethroughTextDecoration = style.textDecoration === 'line-through';
   // Google Docs uses span tags + font-style for italic text
-  const hasItalicFontStyle = span.style.fontStyle === 'italic';
+  const hasItalicFontStyle = style.fontStyle === 'italic';
   // Google Docs uses span tags + text-decoration: underline for underline text
-  const hasUnderlineTextDecoration = span.style.textDecoration === 'underline';
+  const hasUnderlineTextDecoration = style.textDecoration === 'underline';
   // Google Docs uses span tags + vertical-align to specify subscript and superscript
-  const verticalAlign = span.style.verticalAlign;
+  const verticalAlign = style.verticalAlign;
   return {
     forChild: lexicalNode => {
       if (!$isTextNode(lexicalNode)) {
@@ -8728,9 +8759,28 @@ class EditorState {
  */
 /** @noInheritDoc */
 class ParagraphNode extends ElementNode {
+  /** @internal */
+
+  constructor(key) {
+    super(key);
+    this.__textFormat = 0;
+  }
   static getType() {
     return 'paragraph';
   }
+  getTextFormat() {
+    const self = this.getLatest();
+    return self.__textFormat;
+  }
+  setTextFormat(type) {
+    const self = this.getWritable();
+    self.__textFormat = type;
+    return self;
+  }
+  hasTextFormat(type) {
+    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+    return (this.getTextFormat() & formatFlag) !== 0;
+  }
   static clone(node) {
     return new ParagraphNode(node.__key);
   }
@@ -8787,11 +8837,13 @@ class ParagraphNode extends ElementNode {
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
+    node.setTextFormat(serializedNode.textFormat);
     return node;
   }
   exportJSON() {
     return {
       ...super.exportJSON(),
+      textFormat: this.getTextFormat(),
       type: 'paragraph',
       version: 1
     };
@@ -8799,10 +8851,12 @@ class ParagraphNode extends ElementNode {
 
   // Mutation
 
-  insertNewAfter(_, restoreSelection) {
+  insertNewAfter(rangeSelection, restoreSelection) {
     const newElement = $createParagraphNode();
+    newElement.setTextFormat(rangeSelection.format);
     const direction = this.getDirection();
     newElement.setDirection(direction);
+    newElement.setFormat(this.getFormatType());
     this.insertAfter(newElement, restoreSelection);
     return newElement;
   }

package/Lexical.dev.mjs

@@ -1664,6 +1664,7 @@ function $garbageCollectDetachedNodes(prevEditorState, editorState, dirtyLeaves,
  */
 let subTreeTextContent = '';
 let subTreeDirectionedTextContent = '';
+let subTreeTextFormat = null;
 let editorTextContent = '';
 let activeEditorConfig;
 let activeEditor$1;
@@ -1834,6 +1835,10 @@ function createChildren(children, element, _startIndex, endIndex, dom, insertDOM
   let startIndex = _startIndex;
   for (; startIndex <= endIndex; ++startIndex) {
     createNode(children[startIndex], dom, insertDOM);
+    const node = activeNextNodeMap.get(children[startIndex]);
+    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
+      subTreeTextFormat = node.getFormat();
+    }
   }
   if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
     subTreeTextContent += DOUBLE_LINE_BREAK;
@@ -1869,6 +1874,11 @@ function reconcileElementTerminatingLineBreak(prevElement, nextElement, dom) {
     dom.appendChild(element);
   }
 }
+function reconcileParagraphFormat(element) {
+  if ($isParagraphNode(element) && subTreeTextFormat != null && subTreeTextFormat !== element.__textFormat) {
+    element.setTextFormat(subTreeTextFormat);
+  }
+}
 function reconcileBlockDirection(element, dom) {
   const previousSubTreeDirectionTextContent =
   // @ts-expect-error: internal field
@@ -1928,9 +1938,12 @@ function reconcileBlockDirection(element, dom) {
 function reconcileChildrenWithDirection(prevElement, nextElement, dom) {
   const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
+  subTreeTextFormat = null;
   reconcileChildren(prevElement, nextElement, dom);
   reconcileBlockDirection(nextElement, dom);
+  reconcileParagraphFormat(nextElement);
   subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
+  subTreeTextFormat = null;
 }
 function createChildrenArray(element, nodeMap) {
   const children = [];
@@ -1963,6 +1976,10 @@ function reconcileChildren(prevElement, nextElement, dom) {
       dom.replaceChild(replacementDOM, lastDOM);
       destroyNode(prevFirstChildKey, null);
     }
+    const nextChildNode = activeNextNodeMap.get(nextFrstChildKey);
+    if (subTreeTextFormat === null && $isTextNode(nextChildNode)) {
+      subTreeTextFormat = nextChildNode.getFormat();
+    }
   } else {
     const prevChildren = createChildrenArray(prevElement, activePrevNodeMap);
     const nextChildren = createChildrenArray(nextElement, activeNextNodeMap);
@@ -2166,6 +2183,10 @@ function reconcileNodeChildren(nextElement, prevChildren, nextChildren, prevChil
         nextIndex++;
       }
     }
+    const node = activeNextNodeMap.get(nextKey);
+    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
+      subTreeTextFormat = node.getFormat();
+    }
   }
   const appendNewChildren = prevIndex > prevEndIndex;
   const removeOldChildren = nextIndex > nextEndIndex;
@@ -2375,7 +2396,12 @@ function onSelectionChange(domSelection, editor, isActive) {
             selection.format = anchorNode.getFormat();
             selection.style = anchorNode.getStyle();
           } else if (anchor.type === 'element' && !isRootTextContentEmpty) {
-            selection.format = 0;
+            const lastNode = anchor.getNode();
+            if (lastNode instanceof ParagraphNode && lastNode.getChildrenSize() === 0) {
+              selection.format = lastNode.getTextFormat();
+            } else {
+              selection.format = 0;
+            }
             selection.style = '';
           }
         }
@@ -3046,7 +3072,7 @@ function addRootElementEvents(rootElement, editor) {
   // between all editor instances.
   const doc = rootElement.ownerDocument;
   const documentRootElementsCount = rootElementsRegistered.get(doc);
-  if (documentRootElementsCount === undefined) {
+  if (documentRootElementsCount === undefined || documentRootElementsCount < 1) {
     doc.addEventListener('selectionchange', onDocumentSelectionChange);
   }
   rootElementsRegistered.set(doc, documentRootElementsCount || 0 + 1);
@@ -3108,7 +3134,7 @@ function removeRootElementEvents(rootElement) {
   } // We only want to have a single global selectionchange event handler, shared
   // between all editor instances.
   rootElementsRegistered.set(doc, documentRootElementsCount - 1);
-  if (documentRootElementsCount === 1) {
+  if (rootElementsRegistered.get(doc) === 0) {
     doc.removeEventListener('selectionchange', onDocumentSelectionChange);
   }
 
@@ -3709,6 +3735,9 @@ class LexicalNode {
     mutableNode.__next = latestNode.__next;
     mutableNode.__prev = latestNode.__prev;
     if ($isElementNode(latestNode) && $isElementNode(mutableNode)) {
+      if ($isParagraphNode(latestNode) && $isParagraphNode(mutableNode)) {
+        mutableNode.__textFormat = latestNode.__textFormat;
+      }
       mutableNode.__first = latestNode.__first;
       mutableNode.__last = latestNode.__last;
       mutableNode.__size = latestNode.__size;
@@ -4714,7 +4743,7 @@ class TextNode extends LexicalNode {
    * Sets the node detail to the provided TextDetailType or 32-bit integer. Note that the TextDetailType
    * version of the argument can only specify one detail value and doing so will remove all other detail values that
    * may be applied to the node. For toggling behavior, consider using {@link TextNode.toggleDirectionless}
-   * or {@link TextNode.togglerUnmergeable}
+   * or {@link TextNode.toggleUnmergeable}
    *
    * @param detail - TextDetailType or 32-bit integer representing the node detail.
    *
@@ -5072,16 +5101,18 @@ class TextNode extends LexicalNode {
 function convertSpanElement(domNode) {
   // domNode is a <span> since we matched it by nodeName
   const span = domNode;
+  const style = span.style;
+  const fontWeight = style.fontWeight;
   // Google Docs uses span tags + font-weight for bold text
-  const hasBoldFontWeight = span.style.fontWeight === '700';
+  const hasBoldFontWeight = fontWeight === '700' || fontWeight === 'bold';
   // Google Docs uses span tags + text-decoration: line-through for strikethrough text
-  const hasLinethroughTextDecoration = span.style.textDecoration === 'line-through';
+  const hasLinethroughTextDecoration = style.textDecoration === 'line-through';
   // Google Docs uses span tags + font-style for italic text
-  const hasItalicFontStyle = span.style.fontStyle === 'italic';
+  const hasItalicFontStyle = style.fontStyle === 'italic';
   // Google Docs uses span tags + text-decoration: underline for underline text
-  const hasUnderlineTextDecoration = span.style.textDecoration === 'underline';
+  const hasUnderlineTextDecoration = style.textDecoration === 'underline';
   // Google Docs uses span tags + vertical-align to specify subscript and superscript
-  const verticalAlign = span.style.verticalAlign;
+  const verticalAlign = style.verticalAlign;
   return {
     forChild: lexicalNode => {
       if (!$isTextNode(lexicalNode)) {
@@ -8726,9 +8757,28 @@ class EditorState {
  */
 /** @noInheritDoc */
 class ParagraphNode extends ElementNode {
+  /** @internal */
+
+  constructor(key) {
+    super(key);
+    this.__textFormat = 0;
+  }
   static getType() {
     return 'paragraph';
   }
+  getTextFormat() {
+    const self = this.getLatest();
+    return self.__textFormat;
+  }
+  setTextFormat(type) {
+    const self = this.getWritable();
+    self.__textFormat = type;
+    return self;
+  }
+  hasTextFormat(type) {
+    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+    return (this.getTextFormat() & formatFlag) !== 0;
+  }
   static clone(node) {
     return new ParagraphNode(node.__key);
   }
@@ -8785,11 +8835,13 @@ class ParagraphNode extends ElementNode {
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
+    node.setTextFormat(serializedNode.textFormat);
     return node;
   }
   exportJSON() {
     return {
       ...super.exportJSON(),
+      textFormat: this.getTextFormat(),
       type: 'paragraph',
       version: 1
     };
@@ -8797,10 +8849,12 @@ class ParagraphNode extends ElementNode {
 
   // Mutation
 
-  insertNewAfter(_, restoreSelection) {
+  insertNewAfter(rangeSelection, restoreSelection) {
     const newElement = $createParagraphNode();
+    newElement.setTextFormat(rangeSelection.format);
     const direction = this.getDirection();
     newElement.setDirection(direction);
+    newElement.setFormat(this.getFormatType());
     this.insertAfter(newElement, restoreSelection);
     return newElement;
   }

package/Lexical.js.flow

@@ -782,7 +782,10 @@ declare export class ParagraphNode extends ElementNode {
   constructor(key?: NodeKey): void;
   createDOM(config: EditorConfig): HTMLElement;
   updateDOM(prevNode: ParagraphNode, dom: HTMLElement): boolean;
-  insertNewAfter(): ParagraphNode;
+  insertNewAfter(
+    selection: RangeSelection,
+    restoreSelection?: boolean,
+  ): ParagraphNode;
   collapseAtStart(): boolean;
   static importJSON(
     serializedParagraphNode: SerializedParagraphNode,