[lexical-playground] Feature: columns resizing in layouts plugin

packages/lexical-playground/src/Editor.tsx

@@ -22,7 +22,6 @@ import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {TabIndentationPlugin} from '@lexical/react/LexicalTabIndentationPlugin';
 import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
 import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
-import * as React from 'react';
 import {useEffect, useState} from 'react';
 import {CAN_USE_DOM} from 'shared/canUseDOM';
 
@@ -51,6 +50,8 @@ import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbar
 import ImagesPlugin from './plugins/ImagesPlugin';
 import InlineImagePlugin from './plugins/InlineImagePlugin';
 import KeywordsPlugin from './plugins/KeywordsPlugin';
+import LayoutColumnResizerPlugin from './plugins/LayoutColumnResizer';
+import LayoutColumnHoverActions from './plugins/LayoutHoverActionsPlugin';
 import {LayoutPlugin} from './plugins/LayoutPlugin/LayoutPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
 import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin';
@@ -200,6 +201,8 @@ export default function Editor(): JSX.Element {
             <CollapsiblePlugin />
             <PageBreakPlugin />
             <LayoutPlugin />
+            <LayoutColumnResizerPlugin />
+            <LayoutColumnHoverActions />
             {floatingAnchorElem && !isSmallWidthViewport && (
               <>
                 <DraggableBlockPlugin anchorElem={floatingAnchorElem} />

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

@@ -17,8 +17,11 @@ import type {
   Spread,
 } from 'lexical';
 
-import {addClassNamesToElement} from '@lexical/utils';
+import {$findMatchingParent, addClassNamesToElement} from '@lexical/utils';
 import {ElementNode} from 'lexical';
+import {times} from 'lodash-es';
+
+import {LayoutItemNode} from './LayoutItemNode';
 
 export type SerializedLayoutContainerNode = Spread<
   {
@@ -122,6 +125,13 @@ export class LayoutContainerNode extends ElementNode {
   setTemplateColumns(templateColumns: string) {
     this.getWritable().__templateColumns = templateColumns;
   }
+
+  updateTemplateColumnWithIndex(index: number, value: string) {
+    const currentGridTemplateColumns = this.getTemplateColumns();
+    const newGridTemplateColumns = currentGridTemplateColumns.split(' ');
+    newGridTemplateColumns[index] = value;
+    return this.setTemplateColumns(newGridTemplateColumns.join(' '));
+  }
 }
 
 export function $createLayoutContainerNode(
@@ -135,3 +145,32 @@ export function $isLayoutContainerNode(
 ): node is LayoutContainerNode {
   return node instanceof LayoutContainerNode;
 }
+
+export function $getLayoutContainerNodeIfLayoutItemNodeOrThrow(
+  layoutItemNode: LayoutItemNode,
+): LayoutContainerNode {
+  const node = $findMatchingParent(layoutItemNode, $isLayoutContainerNode);
+
+  if ($isLayoutContainerNode(node)) {
+    return node;
+  }
+
+  throw new Error(
+    'Expected LayoutItemNode to be inside of LayoutContainerNode.',
+  );
+}
+
+export function $findLayoutItemIndexGivenLayoutContainerNode(
+  layoutItemNode: LayoutItemNode,
+): number {
+  const layoutContainerNode =
+    $getLayoutContainerNodeIfLayoutItemNodeOrThrow(layoutItemNode);
+
+  return layoutContainerNode
+    .getChildren()
+    .findIndex((node) => node.is(layoutItemNode));
+}
+
+export function $getGridTemplateColumnsWithEqualWidth(count: number) {
+  return times(count, () => '1fr').join(' ');
+}

packages/lexical-playground/src/plugins/LayoutColumnResizer/index.css

@@ -0,0 +1,4 @@
+.PlaygroundEditorTheme__resizer {
+  z-index: 1302;
+  position: absolute;
+}