ImportDOM and ExportDOM for LayoutContainerNode (#5722)

facebook · Mar 18, 2024 · a3f7509 · a3f7509
1 parent 1475590
commit a3f7509
Showing 1 changed file with 34 additions and 1 deletion.
diff --git a/packages/lexical-playground/src/nodes/LayoutContainerNode.ts b/packages/lexical-playground/src/nodes/LayoutContainerNode.ts
@@ -8,6 +8,8 @@
 
 import type {
   DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
   EditorConfig,
   LexicalNode,
   NodeKey,
@@ -25,6 +27,20 @@ export type SerializedLayoutContainerNode = Spread<
   SerializedElementNode
 >;
 
+function convertLayoutContainerElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const styleAttributes = window.getComputedStyle(domNode);
+  const templateColumns = styleAttributes.getPropertyValue(
+    'grid-template-columns',
+  );
+  if (templateColumns) {
+    const node = $createLayoutContainerNode(templateColumns);
+    return {node};
+  }
+  return null;
+}
+
 export class LayoutContainerNode extends ElementNode {
   __templateColumns: string;
 
@@ -50,6 +66,13 @@ export class LayoutContainerNode extends ElementNode {
     return dom;
   }
 
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div');
+    element.style.gridTemplateColumns = this.__templateColumns;
+    element.setAttribute('data-lexical-layout-container', 'true');
+    return {element};
+  }
+
   updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
     if (prevNode.__templateColumns !== this.__templateColumns) {
       dom.style.gridTemplateColumns = this.__templateColumns;
@@ -58,7 +81,17 @@ export class LayoutContainerNode extends ElementNode {
   }
 
   static importDOM(): DOMConversionMap | null {
-    return {};
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-layout-container')) {
+          return null;
+        }
+        return {
+          conversion: convertLayoutContainerElement,
+          priority: 2,
+        };
+      },
+    };
   }
 
   static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {