Collapsible as div

facebook · May 27, 2024 · d75b874 · d75b874
1 parent 8a57b66
commit d75b874
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts
@@ -12,12 +12,14 @@ import {
   DOMExportOutput,
   EditorConfig,
   ElementNode,
+  isHTMLElement,
   LexicalEditor,
   LexicalNode,
   NodeKey,
   SerializedElementNode,
   Spread,
 } from 'lexical';
+import invariant from 'shared/invariant';
 
 type SerializedCollapsibleContainerNode = Spread<
   {
@@ -53,24 +55,24 @@ export class CollapsibleContainerNode extends ElementNode {
   }
 
   createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
-    const dom = document.createElement('details');
+    const dom = document.createElement('div');
     dom.classList.add('Collapsible__container');
-    dom.open = this.__open;
-    dom.addEventListener('toggle', () => {
-      const open = editor.getEditorState().read(() => this.getOpen());
-      if (open !== dom.open) {
-        editor.update(() => this.toggleOpen());
-      }
-    });
     return dom;
   }
 
   updateDOM(
     prevNode: CollapsibleContainerNode,
     dom: HTMLDetailsElement,
   ): boolean {
-    if (prevNode.__open !== this.__open) {
-      dom.open = this.__open;
+    const currentOpen = this.__open;
+    if (prevNode.__open !== currentOpen) {
+      const contentDom = dom.children[1];
+      invariant(isHTMLElement(contentDom), 'something');
+      if (currentOpen) {
+        contentDom.style.removeProperty('display');
+      } else {
+        contentDom.style.display = 'none';
+      }
     }
 
     return false;
@@ -95,7 +97,7 @@ export class CollapsibleContainerNode extends ElementNode {
   }
 
   exportDOM(): DOMExportOutput {
-    const element = document.createElement('details');
+    const element = document.createElement('div');
     element.classList.add('Collapsible__container');
     element.setAttribute('open', this.__open.toString());
     return {element};

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContentNode.ts
@@ -12,10 +12,13 @@ import {
   DOMExportOutput,
   EditorConfig,
   ElementNode,
+  LexicalEditor,
   LexicalNode,
   SerializedElementNode,
 } from 'lexical';
 
+import {CollapsibleContainerNode} from './CollapsibleContainerNode';
+
 type SerializedCollapsibleContentNode = SerializedElementNode;
 
 export function $convertCollapsibleContentElement(
@@ -36,9 +39,15 @@ export class CollapsibleContentNode extends ElementNode {
     return new CollapsibleContentNode(node.__key);
   }
 
-  createDOM(config: EditorConfig): HTMLElement {
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
     const dom = document.createElement('div');
     dom.classList.add('Collapsible__content');
+    editor.getEditorState().read(() => {
+      const containerNode = this.getParentOrThrow<CollapsibleContainerNode>();
+      if (!containerNode.__open) {
+        dom.style.display = 'none';
+      }
+    });
     return dom;
   }
 

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts
@@ -18,6 +18,7 @@ import {
   RangeSelection,
   SerializedElementNode,
 } from 'lexical';
+import invariant from 'shared/invariant';
 
 import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
 import {$isCollapsibleContentNode} from './CollapsibleContentNode';
@@ -45,6 +46,16 @@ export class CollapsibleTitleNode extends ElementNode {
   createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
     const dom = document.createElement('summary');
     dom.classList.add('Collapsible__title');
+    dom.addEventListener('click', () => {
+      editor.update(() => {
+        const collapsibleContainer = this.getLatest().getParentOrThrow();
+        invariant(
+          $isCollapsibleContainerNode(collapsibleContainer),
+          'something',
+        );
+        collapsibleContainer.toggleOpen();
+      });
+    });
     return dom;
   }