Add column layout plugin example

packages/lexical-playground/src/Editor.tsx

@@ -52,6 +52,7 @@ import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbar
 import ImagesPlugin from './plugins/ImagesPlugin';
 import InlineImagePlugin from './plugins/InlineImagePlugin';
 import KeywordsPlugin from './plugins/KeywordsPlugin';
+import {LayoutPlugin} from './plugins/LayoutPlugin/LayoutPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
 import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
 import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
@@ -225,6 +226,7 @@ export default function Editor(): JSX.Element {
             <TabIndentationPlugin />
             <CollapsiblePlugin />
             <PageBreakPlugin />
+            <LayoutPlugin />
             {floatingAnchorElem && !isSmallWidthViewport && (
               <>
                 <DraggableBlockPlugin anchorElem={floatingAnchorElem} />

packages/lexical-playground/src/index.css

@@ -468,6 +468,10 @@ i.poll {
   background-image: url(images/icons/card-checklist.svg);
 }
 
+i.columns {
+  background-image: url(images/icons/3-columns.svg);
+}
+
 i.tweet {
   background-image: url(images/icons/tweet.svg);
 }
@@ -714,7 +718,7 @@ i.page-break,
 }
 
 .dropdown {
-  z-index: 10;
+  z-index: 100;
   display: block;
   position: fixed;
   box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
@@ -1437,7 +1441,7 @@ button.action-button:disabled {
   z-index: 2;
 }
 
-.toolbar button.toolbar-item {
+button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
@@ -1450,15 +1454,15 @@ button.action-button:disabled {
   justify-content: space-between;
 }
 
-.toolbar button.toolbar-item:disabled {
+button.toolbar-item:disabled {
   cursor: not-allowed;
 }
 
-.toolbar button.toolbar-item.spaced {
+button.toolbar-item.spaced {
   margin-right: 2px;
 }
 
-.toolbar button.toolbar-item i.format {
+button.toolbar-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -1468,26 +1472,26 @@ button.action-button:disabled {
   opacity: 0.6;
 }
 
-.toolbar button.toolbar-item:disabled .icon,
-.toolbar button.toolbar-item:disabled .text,
-.toolbar button.toolbar-item:disabled i.format,
-.toolbar button.toolbar-item:disabled .chevron-down {
+button.toolbar-item:disabled .icon,
+button.toolbar-item:disabled .text,
+button.toolbar-item:disabled i.format,
+button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
-.toolbar button.toolbar-item.active {
+button.toolbar-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-.toolbar button.toolbar-item.active i {
+button.toolbar-item.active i {
   opacity: 1;
 }
 
-.toolbar .toolbar-item:hover:not([disabled]) {
+.toolbar-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.toolbar .toolbar-item.font-family .text {
+.toolbar-item.font-family .text {
   display: block;
   max-width: 40px;
 }
@@ -1519,7 +1523,8 @@ button.action-button:disabled {
   background-size: contain;
 }
 
-.toolbar i.chevron-down {
+.toolbar i.chevron-down,
+.toolbar-item i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -1770,3 +1775,9 @@ hr.selected {
     visibility: hidden;
   }
 }
+
+.dialog-dropdown {
+  background-color: #eee !important;
+  margin-bottom: 10px;
+  width: 100%;
+}

packages/lexical-playground/src/nodes/KeywordNode.ts

@@ -62,8 +62,6 @@ export function $createKeywordNode(keyword: string): KeywordNode {
   return new KeywordNode(keyword);
 }
 
-export function $isKeywordNode(
-  node: LexicalNode | null | undefined | undefined,
-): boolean {
+export function $isKeywordNode(node: LexicalNode | null | undefined): boolean {
   return node instanceof KeywordNode;
 }

packages/lexical-playground/src/nodes/LayoutContainerNode.ts

@@ -0,0 +1,100 @@
+/**
+ * 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 {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {ElementNode} from 'lexical';
+
+export type SerializedLayoutContainerNode = Spread<
+  {
+    templateColumns: string;
+  },
+  SerializedElementNode
+>;
+
+export class LayoutContainerNode extends ElementNode {
+  __templateColumns: string;
+
+  constructor(templateColumns: string, key?: NodeKey) {
+    super(key);
+    this.__templateColumns = templateColumns;
+  }
+
+  static getType(): string {
+    return 'layout-container';
+  }
+
+  static clone(node: LayoutContainerNode): LayoutContainerNode {
+    return new LayoutContainerNode(node.__templateColumns, node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    dom.style.gridTemplateColumns = this.__templateColumns;
+    if (typeof config.theme.layoutContainer === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutContainer);
+    }
+    return dom;
+  }
+
+  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+    if (prevNode.__templateColumns !== this.__templateColumns) {
+      dom.style.gridTemplateColumns = this.__templateColumns;
+    }
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {};
+  }
+
+  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
+    return $createLayoutContainerNode(json.templateColumns);
+  }
+
+  canBeEmpty(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedLayoutContainerNode {
+    return {
+      ...super.exportJSON(),
+      templateColumns: this.__templateColumns,
+      type: 'layout-container',
+      version: 1,
+    };
+  }
+
+  getTemplateColumns(): string {
+    return this.getLatest().__templateColumns;
+  }
+
+  setTemplateColumns(templateColumns: string) {
+    this.getWritable().__templateColumns = templateColumns;
+  }
+}
+
+export function $createLayoutContainerNode(
+  templateColumns: string,
+): LayoutContainerNode {
+  return new LayoutContainerNode(templateColumns);
+}
+
+export function $isLayoutContainerNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutContainerNode {
+  return node instanceof LayoutContainerNode;
+}

packages/lexical-playground/src/nodes/LayoutItemNode.ts

@@ -0,0 +1,71 @@
+/**
+ * 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 {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  SerializedElementNode,
+} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {ElementNode} from 'lexical';
+
+export type SerializedLayoutItemNode = SerializedElementNode;
+
+export class LayoutItemNode extends ElementNode {
+  static getType(): string {
+    return 'layout-item';
+  }
+
+  static clone(node: LayoutItemNode): LayoutItemNode {
+    return new LayoutItemNode(node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    if (typeof config.theme.layoutItem === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutItem);
+    }
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {};
+  }
+
+  static importJSON(): LayoutItemNode {
+    return $createLayoutItemNode();
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  exportJSON(): SerializedLayoutItemNode {
+    return {
+      ...super.exportJSON(),
+      type: 'layout-item',
+      version: 1,
+    };
+  }
+}
+
+export function $createLayoutItemNode(): LayoutItemNode {
+  return new LayoutItemNode();
+}
+
+export function $isLayoutItemNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutItemNode {
+  return node instanceof LayoutItemNode;
+}

packages/lexical-playground/src/nodes/PlaygroundNodes.ts

@@ -29,6 +29,8 @@ import {FigmaNode} from './FigmaNode';
 import {ImageNode} from './ImageNode';
 import {InlineImageNode} from './InlineImageNode';
 import {KeywordNode} from './KeywordNode';
+import {LayoutContainerNode} from './LayoutContainerNode';
+import {LayoutItemNode} from './LayoutItemNode';
 import {MentionNode} from './MentionNode';
 import {PageBreakNode} from './PageBreakNode';
 import {PollNode} from './PollNode';
@@ -71,6 +73,8 @@ const PlaygroundNodes: Array<Klass<LexicalNode>> = [
   CollapsibleContentNode,
   CollapsibleTitleNode,
   PageBreakNode,
+  LayoutContainerNode,
+  LayoutItemNode,
 ];
 
 export default PlaygroundNodes;

packages/lexical-playground/src/plugins/LayoutPlugin/InsertLayoutDialog.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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 {LexicalEditor} from 'lexical';
+import * as React from 'react';
+import {useState} from 'react';
+
+import Button from '../../ui/Button';
+import DropDown, {DropDownItem} from '../../ui/DropDown';
+import {INSERT_LAYOUT_COMMAND} from './LayoutPlugin';
+
+const LAYOUTS = [
+  {label: '2 columns (equal width)', value: '1fr 1fr'},
+  {label: '2 columns (25% - 75%)', value: '1fr 3fr'},
+  {label: '3 columns (equal width)', value: '1fr 1fr 1fr'},
+  {label: '3 columns (25% - 50% - 25%)', value: '1fr 2fr 1fr'},
+  {label: '4 columns (equal width)', value: '1fr 1fr 1fr 1fr'},
+];
+
+export default function InsertLayoutDialog({
+  activeEditor,
+  onClose,
+}: {
+  activeEditor: LexicalEditor;
+  onClose: () => void;
+}): JSX.Element {
+  const [layout, setLayout] = useState(LAYOUTS[0].value);
+  const buttonLabel = LAYOUTS.find((item) => item.value === layout)?.label;
+
+  const onClick = () => {
+    activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, layout);
+    onClose();
+  };
+
+  return (
+    <>
+      <DropDown
+        buttonClassName="toolbar-item dialog-dropdown"
+        buttonLabel={buttonLabel}>
+        {LAYOUTS.map(({label, value}) => (
+          <DropDownItem
+            key={value}
+            className="item"
+            onClick={() => setLayout(value)}>
+            <span className="text">{label}</span>
+          </DropDownItem>
+        ))}
+      </DropDown>
+      <Button onClick={onClick}>Insert</Button>
+    </>
+  );
+}