Merge branch 'main' into bugfix/collapsed_selection_on_link_insertion

facebook · Sep 19, 2024 · 4fb3b34 · 4fb3b34
2 parents c072e0a + deb5894
commit 4fb3b34
Show file tree

Hide file tree

Showing 47 changed files with 2,018 additions and 731 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lexical-code/src/CodeHighlighterPrism.ts b/packages/lexical-code/src/CodeHighlighterPrism.ts
@@ -24,9 +24,14 @@ import 'prismjs/components/prism-swift';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-cpp';
+import {CAN_USE_DOM} from 'shared/canUseDOM';
 
 declare global {
   interface Window {
     Prism: typeof import('prismjs');
   }
 }
+
+export const Prism: typeof import('prismjs') = CAN_USE_DOM
+  ? window.Prism
+  : (global as unknown as {Prism: typeof import('prismjs')}).Prism;
diff --git a/packages/lexical-code/src/CodeNode.ts b/packages/lexical-code/src/CodeNode.ts
@@ -22,8 +22,6 @@ import type {
   TabNode,
 } from 'lexical';
 
-import './CodeHighlighterPrism';
-
 import {addClassNamesToElement, isHTMLElement} from '@lexical/utils';
 import {
   $applyNodeReplacement,
@@ -35,6 +33,7 @@ import {
   ElementNode,
 } from 'lexical';
 
+import {Prism} from './CodeHighlighterPrism';
 import {
   $createCodeHighlightNode,
   $isCodeHighlightNode,
@@ -53,7 +52,7 @@ const isLanguageSupportedByPrism = (
 ): boolean => {
   try {
     // eslint-disable-next-line no-prototype-builtins
-    return language ? window.Prism.languages.hasOwnProperty(language) : false;
+    return language ? Prism.languages.hasOwnProperty(language) : false;
   } catch {
     return false;
   }

diff --git a/packages/lexical-html/src/__tests__/unit/LexicalHtml.test.ts b/packages/lexical-html/src/__tests__/unit/LexicalHtml.test.ts
@@ -6,9 +6,6 @@
  *
  */
 
-//@ts-ignore-next-line
-import type {RangeSelection} from 'lexical';
-
 import {CodeNode} from '@lexical/code';
 import {createHeadlessEditor} from '@lexical/headless';
 import {$generateHtmlFromNodes, $generateNodesFromDOM} from '@lexical/html';
@@ -20,6 +17,8 @@ import {
   $createRangeSelection,
   $createTextNode,
   $getRoot,
+  ParagraphNode,
+  RangeSelection,
 } from 'lexical';
 
 describe('HTML', () => {
@@ -212,4 +211,54 @@ describe('HTML', () => {
       '<p style="text-align: center;"><span style="white-space: pre-wrap;">Hello world!</span></p>',
     );
   });
+
+  test('It should output correctly nodes whose export is DocumentFragment', () => {
+    const editor = createHeadlessEditor({
+      html: {
+        export: new Map([
+          [
+            ParagraphNode,
+            () => {
+              const element = document.createDocumentFragment();
+              return {
+                element,
+              };
+            },
+          ],
+        ]),
+      },
+      nodes: [],
+    });
+
+    editor.update(
+      () => {
+        const root = $getRoot();
+        const p1 = $createParagraphNode();
+        const text1 = $createTextNode('Hello');
+        p1.append(text1);
+        const p2 = $createParagraphNode();
+        const text2 = $createTextNode('World');
+        p2.append(text2);
+        root.append(p1).append(p2);
+        // Root
+        // - ParagraphNode
+        // -- TextNode "Hello"
+        // - ParagraphNode
+        // -- TextNode "World"
+      },
+      {
+        discrete: true,
+      },
+    );
+
+    let html = '';
+
+    editor.update(() => {
+      html = $generateHtmlFromNodes(editor);
+    });
+
+    expect(html).toBe(
+      '<span style="white-space: pre-wrap;">Hello</span><span style="white-space: pre-wrap;">World</span>',
+    );
+  });
 });
diff --git a/packages/lexical-html/src/index.ts b/packages/lexical-html/src/index.ts
@@ -29,6 +29,7 @@ import {
   $isTextNode,
   ArtificialNode__DO_NOT_USE,
   ElementNode,
+  isDocumentFragment,
   isInlineDomNode,
 } from 'lexical';
 
@@ -147,15 +148,19 @@ function $appendNodesToHTML(
   }
 
   if (shouldInclude && !shouldExclude) {
-    if (isHTMLElement(element)) {
+    if (isHTMLElement(element) || isDocumentFragment(element)) {
       element.append(fragment);
     }
     parentElement.append(element);
 
     if (after) {
       const newElement = after.call(target, element);
       if (newElement) {
-        element.replaceWith(newElement);
+        if (isDocumentFragment(element)) {
+          element.replaceChildren(newElement);
+        } else {
+          element.replaceWith(newElement);
+        }
       }
     }
   } else {

diff --git a/packages/lexical-markdown/flow/LexicalMarkdown.js.flow b/packages/lexical-markdown/flow/LexicalMarkdown.js.flow
@@ -17,6 +17,7 @@ import type {
 
 export type Transformer =
   | ElementTransformer
+  | MultilineElementTransformer
   | TextFormatTransformer
   | TextMatchTransformer;
 
@@ -32,10 +33,34 @@ export type ElementTransformer = {
     children: Array<LexicalNode>,
     match: Array<string>,
     isImport: boolean,
-  ) => void,
+  ) => boolean | void,
   type: 'element',
 };
 
+export type MultilineElementTransformer = {
+  dependencies: Array<Class<LexicalNode>>;
+  export?: (
+    node: LexicalNode,
+    traverseChildren: (node: ElementNode) => string,
+  ) => string | null;
+  regExpStart: RegExp;
+  regExpEnd?:
+    | RegExp
+    | {
+        optional?: true;
+        regExp: RegExp;
+      };
+  replace: (
+    rootNode: ElementNode,
+    children: Array<LexicalNode> | null,
+    startMatch: Array<string>,
+    endMatch: Array<string> | null,
+    linesInBetween: Array<string> | null,
+    isImport: boolean,
+  ) => boolean | void;
+  type: 'multiline-element';
+};
+
 export type TextFormatTransformer = $ReadOnly<{
   format: $ReadOnlyArray<TextFormatType>,
   tag: string,
@@ -90,7 +115,7 @@ declare export var ITALIC_UNDERSCORE: TextFormatTransformer;
 declare export var STRIKETHROUGH: TextFormatTransformer;
 
 declare export var UNORDERED_LIST: ElementTransformer;
-declare export var CODE: ElementTransformer;
+declare export var CODE: MultilineElementTransformer;
 declare export var HEADING: ElementTransformer;
 declare export var ORDERED_LIST: ElementTransformer;
 declare export var QUOTE: ElementTransformer;

diff --git a/packages/lexical-markdown/src/MarkdownShortcuts.ts b/packages/lexical-markdown/src/MarkdownShortcuts.ts
@@ -403,7 +403,7 @@ export function registerMarkdownShortcuts(
     if (
       type === 'element' ||
       type === 'text-match' ||
-      type === 'multilineElement'
+      type === 'multiline-element'
     ) {
       const dependencies = transformer.dependencies;
       for (const node of dependencies) {