PoC works. Some tests broken

facebook · Oct 26, 2022 · c5990ae · c5990ae
1 parent 505641f
commit c5990ae
Show file tree

Hide file tree

Showing 13 changed files with 514 additions and 222 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "@babel/preset-flow": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.22.1",
+    "@playwright/test": "^1.27.1",
     "@rollup/plugin-alias": "^3.1.4",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.1",

diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -8,12 +8,12 @@
 
 // eslint-disable-next-line simple-import-sort/imports
 import type {
+  BlockNode,
   DOMConversionMap,
   DOMConversionOutput,
   EditorConfig,
   LexicalNode,
   NodeKey,
-  ParagraphNode,
   RangeSelection,
   SerializedElementNode,
   Spread,
@@ -212,7 +212,7 @@ export class CodeNode extends ElementNode {
   // Mutation
   insertNewAfter(
     selection: RangeSelection,
-  ): null | ParagraphNode | CodeHighlightNode {
+  ): null | BlockNode | CodeHighlightNode {
     const children = this.getChildren();
     const childrenLength = children.length;
 

diff --git a/packages/lexical-list/src/formatList.ts b/packages/lexical-list/src/formatList.ts
@@ -15,12 +15,12 @@ import {
   $isParagraphNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
+  BlockNode,
   DEPRECATED_$isGridSelection,
   ElementNode,
   LexicalEditor,
   LexicalNode,
   NodeKey,
-  ParagraphNode,
 } from 'lexical';
 import invariant from 'shared/invariant';
 
@@ -235,7 +235,7 @@ export function removeList(editor: LexicalEditor): void {
       }
 
       for (const listNode of listNodes) {
-        let insertionPoint: ListNode | ParagraphNode = listNode;
+        let insertionPoint: ListNode | BlockNode = listNode;
 
         const listItems = $getAllListItems(listNode);
 

diff --git a/packages/lexical-playground/src/nodes/PlaygroundNodes.ts b/packages/lexical-playground/src/nodes/PlaygroundNodes.ts
@@ -6,8 +6,6 @@
  *
  */
 
-import type {Klass, LexicalNode} from 'lexical';
-
 import {CodeHighlightNode, CodeNode} from '@lexical/code';
 import {HashtagNode} from '@lexical/hashtag';
 import {AutoLinkNode, LinkNode} from '@lexical/link';
@@ -17,6 +15,7 @@ import {OverflowNode} from '@lexical/overflow';
 import {HorizontalRuleNode} from '@lexical/react/LexicalHorizontalRuleNode';
 import {HeadingNode, QuoteNode} from '@lexical/rich-text';
 import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
+import {BlockNode, Klass, LexicalNode} from 'lexical';
 
 import {CollapsibleContainerNode} from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
 import {CollapsibleContentNode} from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
@@ -37,6 +36,7 @@ import {YouTubeNode} from './YouTubeNode';
 
 const PlaygroundNodes: Array<Klass<LexicalNode>> = [
   HeadingNode,
+  BlockNode,
   ListNode,
   ListItemNode,
   QuoteNode,

diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
@@ -6,8 +6,6 @@
  *
  */
 
-import type {LexicalEditor, NodeKey} from 'lexical';
-
 import {
   $createCodeNode,
   $isCodeNode,
@@ -28,17 +26,13 @@ import {INSERT_EMBED_COMMAND} from '@lexical/react/LexicalAutoEmbedPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$isDecoratorBlockNode} from '@lexical/react/LexicalDecoratorBlockNode';
 import {INSERT_HORIZONTAL_RULE_COMMAND} from '@lexical/react/LexicalHorizontalRuleNode';
-import {
-  $createHeadingNode,
-  $createQuoteNode,
-  $isHeadingNode,
-  HeadingTagType,
-} from '@lexical/rich-text';
+import {$createQuoteNode, HeadingTagType} from '@lexical/rich-text';
 import {
   $getSelectionStyleValueForProperty,
   $isParentElementRTL,
   $patchStyleText,
   $selectAll,
+  $setBlocksType,
   $wrapNodes,
 } from '@lexical/selection';
 import {
@@ -48,10 +42,10 @@ import {
   mergeRegister,
 } from '@lexical/utils';
 import {
-  $createParagraphNode,
   $getNodeByKey,
   $getRoot,
   $getSelection,
+  $isBlockNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
   $isTextNode,
@@ -62,6 +56,8 @@ import {
   FORMAT_ELEMENT_COMMAND,
   FORMAT_TEXT_COMMAND,
   INDENT_CONTENT_COMMAND,
+  LexicalEditor,
+  NodeKey,
   OUTDENT_CONTENT_COMMAND,
   REDO_COMMAND,
   SELECTION_CHANGE_COMMAND,
@@ -165,7 +161,7 @@ function BlockFormatDropDown({
           $isRangeSelection(selection) ||
           DEPRECATED_$isGridSelection(selection)
         ) {
-          $wrapNodes(selection, () => $createParagraphNode());
+          $setBlocksType(selection, 'paragraph');
         }
       });
     }
@@ -180,7 +176,7 @@ function BlockFormatDropDown({
           $isRangeSelection(selection) ||
           DEPRECATED_$isGridSelection(selection)
         ) {
-          $wrapNodes(selection, () => $createHeadingNode(headingSize));
+          $setBlocksType(selection, headingSize);
         }
       });
     }
@@ -448,8 +444,8 @@ export default function ToolbarPlugin(): JSX.Element {
             : element.getListType();
           setBlockType(type);
         } else {
-          const type = $isHeadingNode(element)
-            ? element.getTag()
+          const type = $isBlockNode(element)
+            ? element.getType2()
             : element.getType();
           if (type in blockTypeToBlockName) {
             setBlockType(type as keyof typeof blockTypeToBlockName);

diff --git a/packages/lexical-react/src/LexicalTableOfContents__EXPERIMENTAL.tsx b/packages/lexical-react/src/LexicalTableOfContents__EXPERIMENTAL.tsx
@@ -128,7 +128,8 @@ export default function LexicalTableOfContentsPlugin({
               const newHeading = $getNodeByKey<HeadingNode>(nodeKey);
               if (newHeading !== null) {
                 let prevHeading = newHeading.getPreviousSibling();
-                while (prevHeading && !$isHeadingNode(prevHeading)) {
+                while (prevHeading && !(prevHeading instanceof HeadingNode)) {
+                  // !$isHeadingNode(prevHeading)) {
                   prevHeading = prevHeading.getPreviousSibling();
                 }
                 currentTableOfContents = $insertHeadingIntoTableOfContents(
@@ -160,7 +161,8 @@ export default function LexicalTableOfContentsPlugin({
               const currNode = $getNodeByKey(nodeKey);
               if (currNode !== null) {
                 const parentNode = currNode.getParentOrThrow();
-                if ($isHeadingNode(parentNode)) {
+                if (parentNode instanceof HeadingNode) {
+                  //$isHeadingNode(parentNode)) {
                   currentTableOfContents = $updateHeadingInTableOfContents(
                     parentNode,
                     currentTableOfContents,

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -16,7 +16,6 @@ import type {
   LexicalEditor,
   LexicalNode,
   NodeKey,
-  ParagraphNode,
   SerializedElementNode,
   Spread,
   TextFormatType,
@@ -36,6 +35,7 @@ import {
   mergeRegister,
 } from '@lexical/utils';
 import {
+  $createBlockNode,
   $createParagraphNode,
   $getNearestNodeFromDOMNode,
   $getSelection,
@@ -44,6 +44,7 @@ import {
   $isRangeSelection,
   $isRootNode,
   $isTextNode,
+  BlockNode,
   CLICK_COMMAND,
   COMMAND_PRIORITY_EDITOR,
   CONTROLLED_TEXT_INSERTION_COMMAND,
@@ -144,7 +145,7 @@ export class QuoteNode extends ElementNode {
 
   // Mutation
 
-  insertNewAfter(): ParagraphNode {
+  insertNewAfter(): BlockNode {
     const newBlock = $createParagraphNode();
     const direction = this.getDirection();
     newBlock.setDirection(direction);
@@ -267,13 +268,14 @@ export class HeadingNode extends ElementNode {
     };
   }
 
-  static importJSON(serializedNode: SerializedHeadingNode): HeadingNode {
-    const node = $createHeadingNode(serializedNode.tag);
-    node.setFormat(serializedNode.format);
-    node.setIndent(serializedNode.indent);
-    node.setDirection(serializedNode.direction);
-    return node;
-  }
+  // static importJSON(serializedNode: SerializedHeadingNode): HeadingNode {
+  //   constimport { BlockNode } from './LexicalBlockNode';
+  //   node = $createHeadingNode(serializedNode.tag);
+  //   node.setFormat(serializedNode.format);
+  //   node.setIndent(serializedNode.indent);
+  //   node.setDirection(serializedNode.direction);
+  //   return node;
+  // }
 
   exportJSON(): SerializedHeadingNode {
     return {
@@ -286,7 +288,7 @@ export class HeadingNode extends ElementNode {
 
   // Mutation
 
-  insertNewAfter(): ParagraphNode {
+  insertNewAfter(): BlockNode {
     const newElement = $createParagraphNode();
     const direction = this.getDirection();
     newElement.setDirection(direction);
@@ -335,14 +337,14 @@ function convertBlockquoteElement(): DOMConversionOutput {
   return {node};
 }
 
-export function $createHeadingNode(headingTag: HeadingTagType): HeadingNode {
-  return new HeadingNode(headingTag);
+export function $createHeadingNode(headingTag: HeadingTagType): BlockNode {
+  return $createBlockNode(headingTag);
 }
 
 export function $isHeadingNode(
   node: LexicalNode | null | undefined,
-): node is HeadingNode {
-  return node instanceof HeadingNode;
+): node is BlockNode {
+  return node instanceof BlockNode;
 }
 
 function onPasteForRichText(

diff --git a/packages/lexical-selection/src/index.ts b/packages/lexical-selection/src/index.ts
@@ -22,6 +22,7 @@ import {
   $moveCaretSelection,
   $moveCharacter,
   $selectAll,
+  $setBlocksType,
   $shouldOverrideDefaultCharacterSelection,
   $wrapNodes,
   $wrapNodesImpl,
@@ -48,6 +49,7 @@ export {
   $moveCaretSelection,
   $moveCharacter,
   $selectAll,
+  $setBlocksType,
   $shouldOverrideDefaultCharacterSelection,
   $wrapNodes,
   $wrapNodesImpl,

diff --git a/packages/lexical-selection/src/range-selection.ts b/packages/lexical-selection/src/range-selection.ts
@@ -7,20 +7,14 @@
  */
 
 import type {ICloneSelectionContent} from './lexical-node';
-import type {
-  ElementNode,
-  GridSelection,
-  LexicalNode,
-  NodeKey,
-  Point,
-  RangeSelection,
-  TextNode,
-} from 'lexical';
 
 import {
+  $createBlockNode,
   $getDecoratorNode,
   $getPreviousSelection,
+  $getRoot,
   $hasAncestor,
+  $isBlockNode,
   $isDecoratorNode,
   $isElementNode,
   $isLeafNode,
@@ -29,6 +23,14 @@ import {
   $isRootOrShadowRoot,
   $isTextNode,
   $setSelection,
+  BlockType2,
+  ElementNode,
+  GridSelection,
+  LexicalNode,
+  NodeKey,
+  Point,
+  RangeSelection,
+  TextNode,
 } from 'lexical';
 
 import {$cloneWithProperties} from './lexical-node';
@@ -63,6 +65,40 @@ function isPointAttached(point: Point): boolean {
  * @param wrappingElement
  * @returns
  */
+
+export function $setBlocksType(
+  selection: RangeSelection | GridSelection,
+
+  blockType: BlockType2,
+): void {
+  if (selection.anchor.key === 'root') {
+    const element = $createBlockNode(blockType);
+    const root = $getRoot();
+    const firstChild = root.getFirstChild();
+    if (firstChild) {
+      firstChild.replace(element);
+      firstChild.getChildren().forEach((child: LexicalNode) => {
+        element.append(child);
+      });
+    } else root.append(element);
+    return;
+  }
+
+  const nodes = selection.getNodes();
+  if (selection.anchor.type === 'text') {
+    let firstBlock = selection.anchor.getNode().getParent() as LexicalNode;
+    firstBlock = (
+      firstBlock.isInline() ? firstBlock.getParent() : firstBlock
+    ) as LexicalNode;
+    if (nodes.indexOf(firstBlock) === -1) nodes.push(firstBlock);
+  }
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (!$isBlockNode(node)) continue;
+    node.setType2(blockType);
+  }
+}
+
 export function $wrapNodes(
   selection: RangeSelection | GridSelection,
   createElement: () => ElementNode,

diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
@@ -45,6 +45,7 @@ export type {
   RangeSelection,
   TextPointType as TextPoint,
 } from './LexicalSelection';
+export type {BlockType2} from './nodes/LexicalBlockNode';
 export type {
   ElementFormatType,
   SerializedElementNode,
@@ -139,6 +140,11 @@ export {
   $setSelection,
 } from './LexicalUtils';
 export {VERSION} from './LexicalVersion';
+export {
+  $createBlockNode,
+  $isBlockNode,
+  BlockNode,
+} from './nodes/LexicalBlockNode';
 export {$isDecoratorNode, DecoratorNode} from './nodes/LexicalDecoratorNode';
 export {$isElementNode, ElementNode} from './nodes/LexicalElementNode';
 export {