[lexical-code-core][lexical-playground] Feature: Create paragraph around the code node when navigating with the arrow keys

packages/lexical-code-core/package.json

@@ -13,6 +13,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@lexical/extension": "workspace:*",
+    "@lexical/utils": "workspace:*",
     "@lexical/html": "workspace:*",
     "@lexical/internal": "workspace:*",
     "lexical": "workspace:*"

packages/lexical-code-core/src/CodeIndentation.ts

@@ -18,6 +18,7 @@ import type {
 
 import {effect, namedSignals} from '@lexical/extension';
 import invariant from '@lexical/internal/invariant';
+import {$onEscapeDown, $onEscapeUp} from '@lexical/utils';
 import {
   $createLineBreakNode,
   $createPoint,
@@ -38,6 +39,8 @@ import {
   INDENT_CONTENT_COMMAND,
   INSERT_TAB_COMMAND,
   KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
   KEY_ARROW_UP_COMMAND,
   KEY_TAB_COMMAND,
   mergeRegister,
@@ -328,7 +331,7 @@ function $handleShiftLines(
         if (codeNodeSibling === null) {
           codeNode.selectPrevious();
           event.preventDefault();
-          return true;
+          return false;
         }
       } else if (
         !arrowIsUp &&
@@ -339,7 +342,7 @@ function $handleShiftLines(
         if (codeNodeSibling === null) {
           codeNode.selectNext();
           event.preventDefault();
-          return true;
+          return false;
         }
       }
     }
@@ -502,8 +505,36 @@ function $handleMoveTo(
 export function registerCodeIndentation(
   editor: LexicalEditor,
   tabSize?: number,
+  escapeWithArrows?: boolean,
 ): () => void {
   return mergeRegister(
+    // When node is the last child pressing down/right or up/let arrow will insert paragraph
+    // below it to allow adding more content.
+    // These handlers must be executed before $handleShiftLines
+    ...(escapeWithArrows
+      ? [
+          editor.registerCommand(
+            KEY_ARROW_DOWN_COMMAND,
+            event => (event.altKey ? false : $onEscapeDown($isCodeNode)),
+            COMMAND_PRIORITY_LOW,
+          ),
+          editor.registerCommand(
+            KEY_ARROW_RIGHT_COMMAND,
+            () => $onEscapeDown($isCodeNode),
+            COMMAND_PRIORITY_LOW,
+          ),
+          editor.registerCommand(
+            KEY_ARROW_UP_COMMAND,
+            event => (event.altKey ? false : $onEscapeUp($isCodeNode)),
+            COMMAND_PRIORITY_LOW,
+          ),
+          editor.registerCommand(
+            KEY_ARROW_LEFT_COMMAND,
+            () => $onEscapeUp($isCodeNode),
+            COMMAND_PRIORITY_LOW,
+          ),
+        ]
+      : []),
     editor.registerCommand(
       KEY_TAB_COMMAND,
       event => {
@@ -552,11 +583,13 @@ export function registerCodeIndentation(
           return false;
         }
         // If at the start of a code block, prevent selection from moving out
+        const parent = anchorNode.getParent();
         if (
           selection.isCollapsed() &&
           anchor.offset === 0 &&
           anchorNode.getPreviousSibling() === null &&
-          $isCodeNode(anchorNode.getParentOrThrow())
+          $isCodeNode(parent) &&
+          parent.getPreviousSibling() === null
         ) {
           event.preventDefault();
           return true;
@@ -582,7 +615,8 @@ export function registerCodeIndentation(
           selection.isCollapsed() &&
           anchor.offset === anchorNode.getTextContentSize() &&
           anchorNode.getNextSibling() === null &&
-          $isCodeNode(anchorNode.getParentOrThrow())
+          $isCodeNode(anchorNode.getParentOrThrow()) &&
+          anchorNode.getParentOrThrow().getNextSibling() === null
         ) {
           event.preventDefault();
           return true;
@@ -621,6 +655,15 @@ export interface CodeIndentConfig {
    * this option.
    */
   tabSize: number | undefined;
+  /**
+   * When `true`, When set to true, this enables the ability to exit a code block
+   * that has no adjacent elements using the ArrowLeft/ArrowUp keys
+   * if the cursor is at the beginning, or the ArrowRight/ArrowDown keys
+   * if the cursor is at the end.
+   * When `false` (default), pressing the arrow keys will not move the cursor
+   * if there are no adjacent elements around the code block
+   */
+  escapeWithArrows: boolean;
 }
 
 /**
@@ -638,6 +681,7 @@ export const CodeIndentExtension = defineExtension({
   build: (editor, config) => namedSignals(config),
   config: safeCast<CodeIndentConfig>({
     disabled: false,
+    escapeWithArrows: false,
     tabSize: undefined,
   }),
   dependencies: [CodeExtension],
@@ -648,7 +692,11 @@ export const CodeIndentExtension = defineExtension({
       if (stores.disabled.value) {
         return;
       }
-      return registerCodeIndentation(editor, stores.tabSize.value);
+      return registerCodeIndentation(
+        editor,
+        stores.tabSize.value,
+        stores.escapeWithArrows.value,
+      );
     });
   },
 });