From 8aa604637e532ed3b1d1a01bc6cf89b142d653f4 Mon Sep 17 00:00:00 2001
From: fuscodev <stefano.fusco88@gmail.com>
Date: Fri, 4 Apr 2025 14:01:39 +0200
Subject: [PATCH] feat: nested toggle block (#671)

* feat: nested toggle block

* fix: md export

* fix detailsButton icon alignment

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
---
 .../components/slash-menu/menu-items.ts       |  2 +-
 .../src/features/editor/styles/details.css    | 36 +++++++++----------
 .../src/integrations/export/turndown-utils.ts |  8 +++--
 .../editor-ext/src/lib/details/details.ts     |  3 ++
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/features/editor/components/slash-menu/menu-items.ts b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
index 9c5296eb..fbc3a8a4 100644
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@@ -247,7 +247,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["collapsible", "block", "toggle", "details", "expand"],
       icon: IconCaretRightFilled,
       command: ({ editor, range }: CommandProps) =>
-        editor.chain().focus().deleteRange(range).toggleDetails().run(),
+        editor.chain().focus().deleteRange(range).setDetails().run(),
     },
     {
       title: "Callout",
diff --git a/apps/client/src/features/editor/styles/details.css b/apps/client/src/features/editor/styles/details.css
index 244c44f6..567118b8 100644
--- a/apps/client/src/features/editor/styles/details.css
+++ b/apps/client/src/features/editor/styles/details.css
@@ -53,24 +53,22 @@
       padding: 4px;
       word-break: break-word;
       overflow-wrap: break-word;
-
-      [data-type="detailsContent"] {
-        display: none;
-      }
-    }
-
-    &[open] {
-      [data-type="detailsButton"] {
-        .ProseMirror-icon {
-          transform: rotateZ(90deg);
-        }
-      }
-
-      [data-type="detailsContainer"] {
-        [data-type="detailsContent"] {
-          display: block;
-        }
-      }
     }
   }
-}
+
+  [data-type="details"] > [data-type="detailsContainer"] > [data-type="detailsContent"]{
+    display: none;
+  }
+
+  [data-type="details"][open] > [data-type="detailsContainer"] > [data-type="detailsContent"]{
+    display: block;
+  }
+
+  [data-type="details"][open] > [data-type="detailsButton"] {
+    align-items: start;
+  }
+
+  [data-type="details"][open] > [data-type="detailsButton"] .ProseMirror-icon{
+    transform: rotateZ(90deg);
+  }
+}
\ No newline at end of file
diff --git a/apps/server/src/integrations/export/turndown-utils.ts b/apps/server/src/integrations/export/turndown-utils.ts
index c48ba364..ce55c659 100644
--- a/apps/server/src/integrations/export/turndown-utils.ts
+++ b/apps/server/src/integrations/export/turndown-utils.ts
@@ -79,16 +79,18 @@ function preserveDetail(turndownService: TurndownService) {
       return node.nodeName === 'DETAILS';
     },
     replacement: function (content: any, node: HTMLInputElement) {
-      // TODO: preserve summary of nested details
       const summary = node.querySelector(':scope > summary');
       let detailSummary = '';
 
       if (summary) {
         detailSummary = `<summary>${turndownService.turndown(summary.innerHTML)}</summary>`;
-        summary.remove();
       }
 
-      const detailsContent = turndownService.turndown(node.innerHTML);
+      const detailsContent = Array.from(node.childNodes)
+        .filter(child => child.nodeName !== 'SUMMARY')
+        .map(child => (child.nodeType === 1 ? turndownService.turndown((child as HTMLElement).outerHTML) : child.textContent))
+        .join('');
+
       return `\n<details>\n${detailSummary}\n\n${detailsContent}\n\n</details>\n`;
     },
   });
diff --git a/packages/editor-ext/src/lib/details/details.ts b/packages/editor-ext/src/lib/details/details.ts
index 4842fbac..8a05f21c 100644
--- a/packages/editor-ext/src/lib/details/details.ts
+++ b/packages/editor-ext/src/lib/details/details.ts
@@ -132,6 +132,9 @@ export const Details = Node.create<DetailsOptions>({
           }
 
           const slice = state.doc.slice(range.start, range.end);
+          
+          if(slice.content.firstChild.type.name === "detailsSummary") return false;
+          
           if (
             !state.schema.nodes.detailsContent.contentMatch.matchFragment(
               slice.content,