[lexical-playground] Feature: Add PagesExtension

.gitignore

@@ -37,3 +37,5 @@ npm-debug.log*
 .idea/**/shelf
 
 .idea
+
+.claude

.pnpmrc

@@ -2,3 +2,4 @@
 # This is needed because test files use ESM (.mjs) which has issues
 # with pnpm's default symlinked structure
 node-linker=hoisted
+onnxruntime-node-install=skip

packages/lexical-devtools-core/src/generateContent.ts

@@ -107,49 +107,55 @@ export function generateContent(
 
   if (exportDOM) {
     let htmlString = '';
-    editorState.read(() => {
-      htmlString = printPrettyHTML($generateHtmlFromNodes(editor));
-    });
+    editorState.read(
+      () => {
+        htmlString = printPrettyHTML($generateHtmlFromNodes(editor));
+      },
+      {editor},
+    );
     return htmlString;
   }
 
   let res = ' root\n';
 
-  const selectionString = editorState.read(() => {
-    const selection = $getSelection();
-
-    visitTree($getRoot(), (node: LexicalNode, indent: Array<string>) => {
-      const nodeKey = node.getKey();
-      const nodeKeyDisplay = `(${nodeKey})`;
-      const typeDisplay = node.getType() || '';
-      const isSelected = node.isSelected();
-
-      res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(
-        ' ',
-      )} ${nodeKeyDisplay} ${typeDisplay} ${printNode(
-        node,
-        customPrintNode,
-        obfuscateText,
-      )}\n`;
-
-      res += $printSelectedCharsLine({
-        indent,
-        isSelected,
-        node,
-        nodeKeyDisplay,
-        selection,
-        typeDisplay,
+  const selectionString = editorState.read(
+    () => {
+      const selection = $getSelection();
+
+      visitTree($getRoot(), (node: LexicalNode, indent: Array<string>) => {
+        const nodeKey = node.getKey();
+        const nodeKeyDisplay = `(${nodeKey})`;
+        const typeDisplay = node.getType() || '';
+        const isSelected = node.isSelected();
+
+        res += `${isSelected ? SYMBOLS.selectedLine : ' '} ${indent.join(
+          ' ',
+        )} ${nodeKeyDisplay} ${typeDisplay} ${printNode(
+          node,
+          customPrintNode,
+          obfuscateText,
+        )}\n`;
+
+        res += $printSelectedCharsLine({
+          indent,
+          isSelected,
+          node,
+          nodeKeyDisplay,
+          selection,
+          typeDisplay,
+        });
       });
-    });
-
-    return selection === null
-      ? ': null'
-      : $isRangeSelection(selection)
-        ? printRangeSelection(selection)
-        : $isTableSelection(selection)
-          ? printTableSelection(selection)
-          : printNodeSelection(selection);
-  });
+
+      return selection === null
+        ? ': null'
+        : $isRangeSelection(selection)
+          ? printRangeSelection(selection)
+          : $isTableSelection(selection)
+            ? printTableSelection(selection)
+            : printNodeSelection(selection);
+    },
+    {editor},
+  );
 
   res += '\n selection' + selectionString;
 

packages/lexical-playground/src/App.tsx

@@ -60,6 +60,8 @@ import {EmojisExtension} from './plugins/EmojisExtension';
 import {ImagesExtension} from './plugins/ImagesExtension';
 import {PlaygroundMarkdownShortcutsExtension} from './plugins/MarkdownShortcutsExtension';
 import {MaxLengthExtension} from './plugins/MaxLengthPlugin';
+import {PageBreakExtension} from './plugins/PageBreakExtension';
+import {PagesReactExtension} from './plugins/PagesReactExtension';
 import PasteLogPlugin from './plugins/PasteLogPlugin';
 import TestRecorderPlugin from './plugins/TestRecorderPlugin';
 import TypingPerfPlugin from './plugins/TypingPerfPlugin';
@@ -160,6 +162,8 @@ const PlaygroundRichTextExtension = defineExtension({
     configExtension(ListExtension, {shouldPreserveNumbering: false}),
     CheckListExtension,
     PlaygroundMarkdownShortcutsExtension,
+    PageBreakExtension,
+    PagesReactExtension,
   ],
   name: '@lexical/playground/RichText',
 });

packages/lexical-playground/src/Editor.tsx

@@ -58,7 +58,6 @@ import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbar
 import {LayoutPlugin} from './plugins/LayoutPlugin/LayoutPlugin';
 import {MaxLengthExtension} from './plugins/MaxLengthPlugin';
 import MentionsPlugin from './plugins/MentionsPlugin';
-import PageBreakPlugin from './plugins/PageBreakPlugin';
 import PollPlugin from './plugins/PollPlugin';
 import ShortcutsPlugin from './plugins/ShortcutsPlugin';
 import SpecialTextPlugin from './plugins/SpecialTextPlugin';
@@ -263,7 +262,6 @@ export default function Editor(): JSX.Element {
             <TabFocusPlugin />
             <TabIndentationPlugin maxIndent={7} />
             <CollapsiblePlugin />
-            <PageBreakPlugin />
             <LayoutPlugin />
             {floatingAnchorElem && (
               <>

packages/lexical-playground/src/index.css

@@ -52,7 +52,7 @@ header h1 {
 .editor-shell {
   margin: 20px auto;
   border-radius: 2px;
-  max-width: 1100px;
+  max-width: 1128px;
   color: #000;
   position: relative;
   line-height: 1.7;
@@ -95,6 +95,52 @@ header h1 {
   z-index: -1;
 }
 
+@media print {
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  *,
+  *:before,
+  *:after {
+    filter: unset !important;
+    color-scheme: light !important;
+  }
+
+  body {
+    padding: 0 !important;
+    margin: 0 !important;
+    background: none !important;
+  }
+
+  body
+    *:not(
+      [data-lexical-editor],
+      [data-lexical-editor] *,
+      :has([data-lexical-editor])
+    ) {
+    display: none !important;
+  }
+
+  .editor-shell {
+    margin: 0 !important;
+    border-radius: 0 !important;
+    max-width: none !important;
+  }
+
+  [data-lexical-editor] {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    max-width: none !important;
+    width: 100% !important;
+    height: auto !important;
+    zoom: 1 !important;
+  }
+}
+
 .test-recorder-output {
   margin: 20px auto 20px auto;
   width: 100%;
@@ -609,6 +655,11 @@ i.page-break,
   background-image: url(images/icons/scissors.svg);
 }
 
+i.page-setup,
+.icon.page-setup {
+  background-image: url(images/icons/file-earmark-text.svg);
+}
+
 .link-editor .button.active,
 .toolbar .button.active {
   background-color: rgb(223, 232, 250);
@@ -829,6 +880,21 @@ i.page-break,
   min-width: 150px;
 }
 
+.dropdown .item.dropdown-submenu-trigger .dropdown-submenu-chevron {
+  flex-shrink: 0;
+  margin-left: 8px;
+  transform: rotate(0deg);
+  transition: transform 0.15s ease;
+}
+
+.dropdown .item.dropdown-submenu-trigger.expanded .dropdown-submenu-chevron {
+  transform: rotate(180deg);
+}
+
+.dropdown .item.dropdown-submenu-item {
+  padding-left: 24px;
+}
+
 .dropdown .item .icon {
   display: flex;
   width: 20px;

packages/lexical-playground/src/nodes/PageBreakNode/index.css

@@ -62,3 +62,9 @@
 .selected[type='page-break']::before {
   opacity: 1;
 }
+
+@media print {
+  [type='page-break'] {
+    visibility: hidden;
+  }
+}

packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx

@@ -44,7 +44,7 @@ import {InsertEquationDialog} from '../EquationsPlugin';
 import {INSERT_EXCALIDRAW_COMMAND} from '../ExcalidrawPlugin';
 import {INSERT_IMAGE_COMMAND, InsertImageDialog} from '../ImagesExtension';
 import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog';
-import {INSERT_PAGE_BREAK} from '../PageBreakPlugin';
+import {INSERT_PAGE_BREAK} from '../PageBreakExtension';
 import {InsertPollDialog} from '../PollPlugin';
 import {InsertTableDialog} from '../TablePlugin';
 

packages/lexical-playground/src/plugins/PageBreakExtension/index.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {ReactExtension} from '@lexical/react/ReactExtension';
+import {$insertNodeToNearestRoot} from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  defineExtension,
+  LexicalCommand,
+} from 'lexical';
+
+import {$createPageBreakNode, PageBreakNode} from '../../nodes/PageBreakNode';
+
+export const INSERT_PAGE_BREAK: LexicalCommand<undefined> = createCommand();
+
+export const PageBreakExtension = defineExtension({
+  dependencies: [ReactExtension],
+  name: '@lexical/playground/PageBreak',
+  nodes: () => [PageBreakNode],
+  register: (editor) =>
+    editor.registerCommand(
+      INSERT_PAGE_BREAK,
+      () => {
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection)) {
+          return false;
+        }
+
+        const pgBreak = $createPageBreakNode();
+        $insertNodeToNearestRoot(pgBreak);
+
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    ),
+});