Merge remote-tracking branch 'origin/main' into react-19-unit-tests

.github/workflows/after-approval.yml

@@ -0,0 +1,32 @@
+name: After Approval
+
+on:
+  pull_request_review:
+    types: [submitted]
+  pull_request_target:
+    types: [review_requested, opened, reopened, synchronize]
+    branches:
+      - 'main'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  label-pr:
+    if: github.event.review.state == 'approved' && !contains(github.event.pull_request.labels.*.name, 'extended-tests')
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Add label for extended tests
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          echo "Adding label 'extended-tests' to PR $NUMBER"
+          gh pr edit "$NUMBER" --add-label "extended-tests" || (echo "Failed to add label" && exit 1)
+  e2e-tests:
+    needs: label-pr
+    uses: ./.github/workflows/call-e2e-all-tests.yml

.github/workflows/call-e2e-all-tests.yml

@@ -10,7 +10,7 @@ jobs:
         node-version: [18.18.0]
         browser: ['chromium', 'firefox', 'webkit']
         editor-mode: ['rich-text', 'plain-text']
-        events-mode: ['legacy-events', 'modern-events']
+        events-mode: ['modern-events']
     uses: ./.github/workflows/call-e2e-test.yml
     with:
       os: 'macos-latest'
@@ -25,7 +25,7 @@ jobs:
         node-version: [18.18.0]
         browser: ['chromium', 'firefox']
         editor-mode: ['rich-text', 'plain-text']
-        events-mode: ['legacy-events', 'modern-events']
+        events-mode: ['modern-events']
     uses: ./.github/workflows/call-e2e-test.yml
     with:
       os: 'ubuntu-latest'
@@ -41,6 +41,9 @@ jobs:
         browser: ['chromium', 'firefox']
         editor-mode: ['rich-text', 'plain-text']
         events-mode: ['legacy-events', 'modern-events']
+        exclude:
+          - events-mode: 'legacy-events'
+            browser: 'firefox'
     uses: ./.github/workflows/call-e2e-test.yml
     with:
       os: 'windows-latest'

.github/workflows/size-limit.yml

@@ -1,6 +1,7 @@
 name: 'Bundles'
 on:
   pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:

packages/lexical-list/src/LexicalListItemNode.ts

@@ -369,10 +369,12 @@ export class ListItemNode extends ElementNode {
     return this;
   }
 
+  /** @deprecated @internal */
   canInsertAfter(node: LexicalNode): boolean {
     return $isListItemNode(node);
   }
 
+  /** @deprecated @internal */
   canReplaceWith(replacement: LexicalNode): boolean {
     return $isListItemNode(replacement);
   }

packages/lexical-playground/src/nodes/ImageComponent.tsx

@@ -48,6 +48,7 @@ import {Suspense, useCallback, useEffect, useRef, useState} from 'react';
 import {createWebsocketProvider} from '../collaboration';
 import {useSettings} from '../context/SettingsContext';
 import {useSharedHistoryContext} from '../context/SharedHistoryContext';
+import brokenImage from '../images/image-broken.svg';
 import EmojisPlugin from '../plugins/EmojisPlugin';
 import KeywordsPlugin from '../plugins/KeywordsPlugin';
 import LinkPlugin from '../plugins/LinkPlugin';
@@ -72,6 +73,9 @@ function useSuspenseImage(src: string) {
         imageCache.add(src);
         resolve(null);
       };
+      img.onerror = () => {
+        imageCache.add(src);
+      };
     });
   }
 }
@@ -84,6 +88,7 @@ function LazyImage({
   width,
   height,
   maxWidth,
+  onError,
 }: {
   altText: string;
   className: string | null;
@@ -92,6 +97,7 @@ function LazyImage({
   maxWidth: number;
   src: string;
   width: 'inherit' | number;
+  onError: () => void;
 }): JSX.Element {
   useSuspenseImage(src);
   return (
@@ -105,6 +111,21 @@ function LazyImage({
         maxWidth,
         width,
       }}
+      onError={onError}
+      draggable="false"
+    />
+  );
+}
+
+function BrokenImage(): JSX.Element {
+  return (
+    <img
+      src={brokenImage}
+      style={{
+        height: 200,
+        opacity: 0.2,
+        width: 200,
+      }}
       draggable="false"
     />
   );
@@ -142,6 +163,7 @@ export default function ImageComponent({
   const [editor] = useLexicalComposerContext();
   const [selection, setSelection] = useState<BaseSelection | null>(null);
   const activeEditorRef = useRef<LexicalEditor | null>(null);
+  const [isLoadError, setIsLoadError] = useState<boolean>(false);
 
   const $onDelete = useCallback(
     (payload: KeyboardEvent) => {
@@ -371,20 +393,26 @@ export default function ImageComponent({
     <Suspense fallback={null}>
       <>
         <div draggable={draggable}>
-          <LazyImage
-            className={
-              isFocused
-                ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
-                : null
-            }
-            src={src}
-            altText={altText}
-            imageRef={imageRef}
-            width={width}
-            height={height}
-            maxWidth={maxWidth}
-          />
+          {isLoadError ? (
+            <BrokenImage />
+          ) : (
+            <LazyImage
+              className={
+                isFocused
+                  ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}`
+                  : null
+              }
+              src={src}
+              altText={altText}
+              imageRef={imageRef}
+              width={width}
+              height={height}
+              maxWidth={maxWidth}
+              onError={() => setIsLoadError(true)}
+            />
+          )}
         </div>
+
         {showCaption && (
           <div className="image-caption-container">
             <LexicalNestedComposer initialEditor={caption}>
@@ -428,7 +456,7 @@ export default function ImageComponent({
             maxWidth={maxWidth}
             onResizeStart={onResizeStart}
             onResizeEnd={onResizeEnd}
-            captionsEnabled={captionsEnabled}
+            captionsEnabled={!isLoadError && captionsEnabled}
           />
         )}
       </>

packages/lexical-react/src/LexicalErrorBoundary.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import * as React from 'react';
 import {ErrorBoundary as ReactErrorBoundary} from 'react-error-boundary';
 
 export type LexicalErrorBoundaryProps = {

packages/lexical-table/src/LexicalTableSelectionHelpers.ts

@@ -32,6 +32,7 @@ import {
   $getNearestNodeFromDOMNode,
   $getPreviousSelection,
   $getSelection,
+  $isDecoratorNode,
   $isElementNode,
   $isRangeSelection,
   $isTextNode,
@@ -1359,6 +1360,11 @@ function $handleArrowKey(
         return false;
       }
 
+      const selectedNodes = selection.getNodes();
+      if (selectedNodes.length === 1 && $isDecoratorNode(selectedNodes[0])) {
+        return false;
+      }
+
       if (
         isExitingTableAnchor(anchorType, anchorOffset, anchorNode, direction)
       ) {

packages/lexical/src/LexicalEvents.ts

@@ -1005,6 +1005,10 @@ function onKeyDown(event: KeyboardEvent, editor: LexicalEditor): void {
     return;
   }
 
+  if (key == null) {
+    return;
+  }
+
   if (isMoveForward(key, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
   } else if (isMoveToEnd(key, ctrlKey, shiftKey, altKey, metaKey)) {

packages/lexical/src/nodes/LexicalElementNode.ts

@@ -525,9 +525,11 @@ export class ElementNode extends LexicalNode {
   excludeFromCopy(destination?: 'clone' | 'html'): boolean {
     return false;
   }
+  /** @deprecated @internal */
   canReplaceWith(replacement: LexicalNode): boolean {
     return true;
   }
+  /** @deprecated @internal */
   canInsertAfter(node: LexicalNode): boolean {
     return true;
   }
@@ -550,6 +552,7 @@ export class ElementNode extends LexicalNode {
   isShadowRoot(): boolean {
     return false;
   }
+  /** @deprecated @internal */
   canMergeWith(node: ElementNode): boolean {
     return false;
   }

scripts/build.js

@@ -192,7 +192,7 @@ async function build(name, inputFile, outputPath, outputFile, isProd, format) {
               tsconfig: path.resolve('./tsconfig.build.json'),
             },
           ],
-          ['@babel/preset-react', {runtime: 'automatic'}],
+          ['@babel/preset-react', {runtime: isWWW ? 'classic' : 'automatic'}],
         ],
       }),
       {