[lexical-playground] Feature: Add PagesExtension

.gitignore

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

packages/lexical-playground/src/App.tsx

@@ -60,6 +60,7 @@ import {EmojisExtension} from './plugins/EmojisExtension';
 import {ImagesExtension} from './plugins/ImagesExtension';
 import {PlaygroundMarkdownShortcutsExtension} from './plugins/MarkdownShortcutsExtension';
 import {MaxLengthExtension} from './plugins/MaxLengthPlugin';
+import {PagesExtension} from './plugins/PagesExtension';
 import PasteLogPlugin from './plugins/PasteLogPlugin';
 import TestRecorderPlugin from './plugins/TestRecorderPlugin';
 import TypingPerfPlugin from './plugins/TypingPerfPlugin';
@@ -174,6 +175,7 @@ const AppExtension = defineExtension({
     HashtagExtension,
     DateTimeExtension,
     MaxLengthExtension,
+    PagesExtension,
     DragDropPasteExtension,
     EmojisExtension,
     configExtension(LinkExtension, {validateUrl}),

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/nodes/PageNode/PageContentNode.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 type {LexicalNode, SerializedElementNode} from 'lexical';
+
+import {ElementNode} from 'lexical';
+
+import {$isPageNode, PageNode} from './PageNode';
+
+export type SerializedPageContentNode = SerializedElementNode;
+
+export class PageContentNode extends ElementNode {
+  $config() {
+    return this.config('page-content', {
+      extends: ElementNode,
+    });
+  }
+
+  createDOM(): HTMLElement {
+    const dom = document.createElement('div');
+    dom.className = 'PlaygroundEditorTheme__pageContent';
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  getPageNode(): PageNode {
+    const parent = this.getParent();
+    if (!$isPageNode(parent))
+      throw new Error('PageContentNode: Parent is not a PageNode');
+    return parent;
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  excludeFromCopy(): boolean {
+    return true;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedPageContentNode {
+    return {
+      ...super.exportJSON(),
+      type: 'page-content',
+      version: 1,
+    };
+  }
+
+  canBeEmpty(): boolean {
+    return false;
+  }
+}
+
+export function $createPageContentNode(): PageContentNode {
+  return new PageContentNode();
+}
+
+export function $isPageContentNode(
+  node: LexicalNode | null | undefined,
+): node is PageContentNode {
+  return node instanceof PageContentNode;
+}