playground: Collapsible Section Fixes (facebook#5935)

ChronicLynx · Apr 23, 2024 · 95f43f4 · 95f43f4
1 parent 4a318ee
commit 95f43f4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 44 deletions.
diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts
@@ -96,6 +96,7 @@ export class CollapsibleContainerNode extends ElementNode {
 
   exportDOM(): DOMExportOutput {
     const element = document.createElement('details');
+    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
@@ -62,6 +62,7 @@ export class CollapsibleContentNode extends ElementNode {
 
   exportDOM(): DOMExportOutput {
     const element = document.createElement('div');
+    element.classList.add('Collapsible__content');
     element.setAttribute('data-lexical-collapsible-content', 'true');
     return {element};
   }

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts
@@ -11,7 +11,6 @@ import {
   $isElementNode,
   DOMConversionMap,
   DOMConversionOutput,
-  DOMExportOutput,
   EditorConfig,
   ElementNode,
   LexicalEditor,
@@ -70,11 +69,6 @@ export class CollapsibleTitleNode extends ElementNode {
     return $createCollapsibleTitleNode();
   }
 
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement('summary');
-    return {element};
-  }
-
   exportJSON(): SerializedCollapsibleTitleNode {
     return {
       ...super.exportJSON(),

diff --git a/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts b/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts
@@ -16,11 +16,8 @@ import {
 } from '@lexical/utils';
 import {
   $createParagraphNode,
-  $getPreviousSelection,
   $getSelection,
-  $isElementNode,
   $isRangeSelection,
-  $setSelection,
   COMMAND_PRIORITY_LOW,
   createCommand,
   DELETE_CHARACTER_COMMAND,
@@ -237,33 +234,25 @@ export default function CollapsiblePlugin(): null {
         COMMAND_PRIORITY_LOW,
       ),
 
-      // Handling CMD+Enter to toggle collapsible element collapsed state
+      // Enter goes from Title to Content rather than a new line inside Title
       editor.registerCommand(
         INSERT_PARAGRAPH_COMMAND,
         () => {
-          const windowEvent = editor._window?.event as
-            | KeyboardEvent
-            | undefined;
-
-          if (
-            windowEvent &&
-            (windowEvent.ctrlKey || windowEvent.metaKey) &&
-            windowEvent.key === 'Enter'
-          ) {
-            const selection = $getPreviousSelection();
-            if ($isRangeSelection(selection) && selection.isCollapsed()) {
-              const parent = $findMatchingParent(
-                selection.anchor.getNode(),
-                (node) => $isElementNode(node) && !node.isInline(),
-              );
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const titleNode = $findMatchingParent(
+              selection.anchor.getNode(),
+              (node) => $isCollapsibleTitleNode(node),
+            );
 
-              if ($isCollapsibleTitleNode(parent)) {
-                const container = parent.getParent<ElementNode>();
-                if ($isCollapsibleContainerNode(container)) {
+            if ($isCollapsibleTitleNode(titleNode)) {
+              const container = titleNode.getParent<ElementNode>();
+              if (container && $isCollapsibleContainerNode(container)) {
+                if (!container.getOpen()) {
                   container.toggleOpen();
-                  $setSelection(selection.clone());
-                  return true;
                 }
+                titleNode.getNextSibling()?.selectEnd();
+                return true;
               }
             }
           }

diff --git a/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx b/packages/lexical-react/src/LexicalClickableLinkPlugin.tsx
@@ -43,11 +43,6 @@ export default function LexicalClickableLinkPlugin({
 
   useEffect(() => {
     const onClick = (event: MouseEvent) => {
-      if (disabled) {
-        event.preventDefault();
-        return;
-      }
-
       const target = event.target;
       if (!(target instanceof Node)) {
         return;
@@ -67,14 +62,16 @@ export default function LexicalClickableLinkPlugin({
             clickedNode,
             $isElementNode,
           );
-          if ($isLinkNode(maybeLinkNode)) {
-            url = maybeLinkNode.sanitizeUrl(maybeLinkNode.getURL());
-            urlTarget = maybeLinkNode.getTarget();
-          } else {
-            const a = findMatchingDOM(target, isHTMLAnchorElement);
-            if (a !== null) {
-              url = a.href;
-              urlTarget = a.target;
+          if (!disabled) {
+            if ($isLinkNode(maybeLinkNode)) {
+              url = maybeLinkNode.sanitizeUrl(maybeLinkNode.getURL());
+              urlTarget = maybeLinkNode.getTarget();
+            } else {
+              const a = findMatchingDOM(target, isHTMLAnchorElement);
+              if (a !== null) {
+                url = a.href;
+                urlTarget = a.target;
+              }
             }
           }
         }
@@ -106,7 +103,7 @@ export default function LexicalClickableLinkPlugin({
     };
 
     const onMouseUp = (event: MouseEvent) => {
-      if (!disabled && event.button === 1) {
+      if (event.button === 1) {
         onClick(event);
       }
     };