@gcforms/editor 1.0.18 → 1.0.19

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.19] - 2026-08-17
+
+- Add collapsible extension
+
 ## [1.0.18] - 2026-08-17
 
 - Update Lexical to version 0.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {
@@ -9,6 +9,7 @@
   "packageManager": "yarn@4.10.3",
   "dependencies": {
     "@lexical/code": "^0.49.0",
+    "@lexical/html": "^0.49.0",
     "@lexical/link": "^0.49.0",
     "@lexical/list": "^0.49.0",
     "@lexical/markdown": "^0.49.0",

package/src/Editor.tsx

@@ -1,11 +1,7 @@
 "use client";
 import React, { useId, useState } from "react";
-import {
-  $convertFromMarkdownString,
-  $convertToMarkdownString,
-  TRANSFORMERS,
-} from "@lexical/markdown";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -18,8 +14,8 @@ import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import TreeViewPlugin from "./plugins/TreeViewPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
-import { editorConfig } from "./config";
-import { LINE_BREAK_FIX } from "./transformers";
+import { createEditorExtension } from "./config";
+import { COLLAPSIBLE, LINE_BREAK_FIX } from "./transformers";
 import { Language } from "./i18n";
 import { LocaleContext } from "./context/LocaleContext";
 
@@ -40,6 +36,7 @@ interface EditorProps {
   className?: string;
   maxLength?: number;
   enableDraggableBlocks?: boolean;
+  enableCollapsibleBlocks?: boolean;
 
   onChange?(...args: unknown[]): unknown;
 }
@@ -56,6 +53,7 @@ export const Editor = ({
   className,
   maxLength,
   enableDraggableBlocks = false,
+  enableCollapsibleBlocks = false,
 }: EditorProps) => {
   contentLocale = contentLocale || locale;
 
@@ -64,6 +62,8 @@ export const Editor = ({
 
   const randomId = useId();
   const editorId = id || `editor-${randomId}`;
+  // LexicalExtensionComposer recreates the editor when its extension changes.
+  const [editorExtension] = useState(() => createEditorExtension(content));
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
     if (_floatingAnchorElem !== null) {
@@ -74,16 +74,13 @@ export const Editor = ({
   return (
     <LocaleContext initialLocale={locale as Language}>
       <ToolbarContext>
-        <LexicalComposer
-          initialConfig={{
-            ...editorConfig,
-            editorState: () => {
-              $convertFromMarkdownString(content, [...TRANSFORMERS]);
-            },
-          }}
-        >
+        <LexicalExtensionComposer extension={editorExtension} contentEditable={null}>
           <div className="gc-editor-container">
-            <ToolbarPlugin editorId={editorId} setIsLinkEditMode={setIsLinkEditMode} />
+            <ToolbarPlugin
+              editorId={editorId}
+              setIsLinkEditMode={setIsLinkEditMode}
+              enableCollapsibleBlocks={enableCollapsibleBlocks}
+            />
             <ShortcutsPlugin setIsLinkEditMode={setIsLinkEditMode} />
             <RichTextPlugin
               contentEditable={
@@ -108,7 +105,11 @@ export const Editor = ({
             <OnChangePlugin
               onChange={(editorState) => {
                 editorState.read(() => {
-                  const markdown = $convertToMarkdownString([...TRANSFORMERS, LINE_BREAK_FIX]);
+                  const markdown = $convertToMarkdownString([
+                    ...TRANSFORMERS,
+                    COLLAPSIBLE,
+                    LINE_BREAK_FIX,
+                  ]);
                   onChange && onChange(markdown);
                 });
               }}
@@ -133,7 +134,7 @@ export const Editor = ({
               </>
             )}
           </div>
-        </LexicalComposer>
+        </LexicalExtensionComposer>
       </ToolbarContext>
     </LocaleContext>
   );

package/src/config.ts

@@ -1,6 +1,10 @@
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { LinkNode } from "@lexical/link";
 import { ListItemNode, ListNode } from "@lexical/list";
+import { $convertFromMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import { defineExtension } from "lexical";
+import { CollapsibleExtension } from "./plugins/CollapsibleExtension";
+import { COLLAPSIBLE } from "./transformers";
 
 export const editorConfig = {
   namespace: "FormBuilder",
@@ -17,3 +21,18 @@ export const editorConfig = {
   // Any custom nodes go here
   nodes: [HeadingNode, QuoteNode, LinkNode, ListItemNode, ListNode],
 };
+
+export const createEditorExtension = (content: string) =>
+  defineExtension({
+    name: editorConfig.namespace,
+    namespace: editorConfig.namespace,
+    nodes: () => editorConfig.nodes,
+    theme: editorConfig.theme,
+    onError: editorConfig.onError,
+    dependencies: [CollapsibleExtension],
+    $initialEditorState: (editor) => {
+      editor.update(() => {
+        $convertFromMarkdownString(content, [...TRANSFORMERS, COLLAPSIBLE]);
+      });
+    },
+  });

package/src/i18n/en.json

@@ -22,5 +22,7 @@
   "tooltipIndent": "Indent",
   "tooltipOutdent": "Outdent",
   "indent": "Indent",
-  "outdent": "Outdent"
+  "outdent": "Outdent",
+  "tooltipInsertCollapsible": "Insert collapsible container",
+  "insertCollapsible": "Insert collapsible container"
 }

package/src/i18n/fr.json

@@ -22,5 +22,7 @@
   "tooltipIndent": "Indentation",
   "tooltipOutdent": "Suppression d'indentation",
   "indent": "Indentation",
-  "outdent": "Suppression d'indentation"
+  "outdent": "Suppression d'indentation",
+  "tooltipInsertCollapsible": "Insérer un conteneur réductible",
+  "insertCollapsible": "Insérer un conteneur réductible"
 }

package/src/icons/CollapsibleIcon.tsx

@@ -0,0 +1,11 @@
+export const CollapsibleIcon = () => (
+  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="m5 7 5 5 5-5"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/plugins/CollapsibleExtension/Collapsible.css

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Collapsible__container {
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  margin-bottom: 8px;
+}
+
+.Collapsible__title {
+  cursor: pointer;
+  padding: 5px 5px 5px 20px;
+  position: relative;
+  font-weight: bold;
+  list-style: none;
+  outline: none;
+}
+
+/* Lexical titles contain a paragraph. Remove its browser margin so the
+   disclosure marker aligns with the title text rather than the whole block. */
+.Collapsible__title > * {
+  margin-block: 0;
+}
+
+.Collapsible__title p {
+  margin: 0;
+}
+
+.Collapsible__content > p:last-child {
+  margin-bottom: 0;
+}
+
+.Collapsible__title::marker,
+.Collapsible__title::-webkit-details-marker {
+  display: none;
+}
+
+.Collapsible__title:before {
+  border-style: solid;
+  border-color: transparent;
+  border-width: 4px 6px 4px 6px;
+  border-left-color: #000;
+  display: block;
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 50%;
+  transform-origin: 2px 50%;
+  transform: translateY(-50%);
+  transition: transform 0.3s ease;
+}
+
+.Collapsible__container[open] > .Collapsible__title:before {
+  transform: translateY(-50%) rotate(90deg);
+}
+
+.Collapsible__content {
+  padding: 10px 5px 5px 20px;
+  box-sizing: border-box;
+  interpolate-size: allow-keywords;
+  overflow: hidden;
+  transition:
+    height 0.3s ease-out,
+    opacity 0.3s ease-out,
+    visibility 0.3s ease-out allow-discrete;
+}
+
+/* Chrome uses div with hidden attribute — override display to allow animation */
+.Collapsible__content[hidden] {
+  content-visibility: visible;
+  display: block;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    height 0.3s ease-in,
+    opacity 0.3s ease-in,
+    visibility 0.3s ease-in allow-discrete;
+}
+
+/* Non-Chrome uses <details> — animate via ::details-content */
+details.Collapsible__container::details-content {
+  interpolate-size: allow-keywords;
+  overflow: hidden;
+  transition:
+    height 0.3s ease-out,
+    opacity 0.3s ease-out,
+    content-visibility 0.3s ease-out allow-discrete;
+}
+
+details.Collapsible__container:not([open])::details-content {
+  height: 0;
+  opacity: 0;
+  content-visibility: hidden;
+  transition:
+    height 0.3s ease-in,
+    opacity 0.3s ease-in,
+    content-visibility 0.3s ease-in allow-discrete;
+}

package/src/plugins/CollapsibleExtension/CollapsibleContainerNode.ts

@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $getDocument,
+  $getSiblingCaret,
+  $isElementNode,
+  $rewindSiblingCaret,
+  type DOMExportOutput,
+  type EditorConfig,
+  ElementNode,
+  IS_CHROME,
+  IS_FIREFOX,
+  isHTMLElement,
+  type LexicalEditor,
+  type LexicalNode,
+  type NodeKey,
+  type RangeSelection,
+  type SerializedElementNode,
+  type Spread,
+} from "lexical";
+
+import { setDomHiddenUntilFound } from "./CollapsibleUtils";
+
+type SerializedCollapsibleContainerNode = Spread<
+  {
+    open: boolean;
+  },
+  SerializedElementNode
+>;
+
+export class CollapsibleContainerNode extends ElementNode {
+  __open: boolean;
+
+  constructor(open: boolean, key?: NodeKey) {
+    super(key);
+    this.__open = open;
+  }
+
+  $config() {
+    return this.config("collapsible-container", { extends: ElementNode });
+  }
+
+  static clone(node: CollapsibleContainerNode): CollapsibleContainerNode {
+    return new CollapsibleContainerNode(node.__open, node.__key);
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  collapseAtStart(selection: RangeSelection): boolean {
+    // Unwrap the CollapsibleContainerNode by replacing it with the children
+    // of its children (CollapsibleTitleNode, CollapsibleContentNode)
+    const nodesToInsert: LexicalNode[] = [];
+    for (const child of this.getChildren()) {
+      if ($isElementNode(child)) {
+        nodesToInsert.push(...child.getChildren());
+      }
+    }
+    const caret = $rewindSiblingCaret($getSiblingCaret(this, "previous"));
+    caret.splice(1, nodesToInsert);
+    // Merge the first child of the CollapsibleTitleNode with the
+    // previous sibling of the CollapsibleContainerNode
+    const [firstChild] = nodesToInsert;
+    if (firstChild) {
+      firstChild.selectStart().deleteCharacter(true);
+    }
+    return true;
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    // details is not well supported in Chrome #5582 and Firefox #8348
+    let dom: HTMLElement;
+    if (IS_CHROME || IS_FIREFOX) {
+      dom = $getDocument().createElement("div");
+      dom.setAttribute("open", "");
+    } else {
+      const detailsDom = $getDocument().createElement("details");
+      detailsDom.open = this.__open;
+      detailsDom.addEventListener("toggle", () => {
+        const open = editor.read("latest", () => this.getOpen());
+        if (open !== detailsDom.open) {
+          editor.update(() => this.toggleOpen());
+        }
+      });
+      dom = detailsDom;
+    }
+    dom.classList.add("Collapsible__container");
+
+    return dom;
+  }
+
+  updateDOM(prevNode: this, dom: HTMLDetailsElement): boolean {
+    const currentOpen = this.__open;
+    if (prevNode.__open !== currentOpen) {
+      // details is not well supported in Chrome #5582 and Firefox #8348
+      if (IS_CHROME || IS_FIREFOX) {
+        // Look up the content element by class rather than positional index.
+        // The shape `Title + Content` is invariant per the structure-enforcing
+        // transformer; if a slot-aware extension prepends a leading
+        // decoration (via `slot.after`) the content child would no longer sit
+        // at `children[1]`. Scoped `:scope >` avoids matching content of a
+        // nested CollapsibleContainer.
+        const contentDom = dom.querySelector(":scope > .Collapsible__content");
+        if (!isHTMLElement(contentDom)) {
+          throw new Error("Expected contentDom to be an HTMLElement");
+        }
+        if (currentOpen) {
+          dom.setAttribute("open", "");
+          contentDom.hidden = false;
+        } else {
+          dom.removeAttribute("open");
+          setDomHiddenUntilFound(contentDom);
+        }
+      } else {
+        dom.open = this.__open;
+      }
+    }
+
+    return false;
+  }
+
+  static importJSON(serializedNode: SerializedCollapsibleContainerNode): CollapsibleContainerNode {
+    return $createCollapsibleContainerNode(serializedNode.open).updateFromJSON(serializedNode);
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = $getDocument().createElement("details");
+    element.classList.add("Collapsible__container");
+    // `open` is an HTML boolean attribute — its presence is what makes the
+    // <details> open, whatever its value. Writing `open="false"` on a closed
+    // container reads back (and renders) as open, so omit it instead. This
+    // matches createDOM/updateDOM, which already set '' / removeAttribute.
+    if (this.__open) {
+      element.setAttribute("open", "");
+    }
+    return { element };
+  }
+
+  exportJSON(): SerializedCollapsibleContainerNode {
+    return {
+      ...super.exportJSON(),
+      open: this.__open,
+    };
+  }
+
+  setOpen(open: boolean): this {
+    const writable = this.getWritable();
+    writable.__open = open;
+    return writable;
+  }
+
+  getOpen(): boolean {
+    return this.getLatest().__open;
+  }
+
+  toggleOpen(): this {
+    return this.setOpen(!this.getOpen());
+  }
+}
+
+export function $createCollapsibleContainerNode(isOpen: boolean): CollapsibleContainerNode {
+  return new CollapsibleContainerNode(isOpen);
+}
+
+export function $isCollapsibleContainerNode(
+  node: LexicalNode | null | undefined
+): node is CollapsibleContainerNode {
+  return node instanceof CollapsibleContainerNode;
+}

package/src/plugins/CollapsibleExtension/CollapsibleContentNode.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $getDocument,
+  type DOMExportOutput,
+  type EditorConfig,
+  ElementNode,
+  IS_CHROME,
+  IS_FIREFOX,
+  type LexicalEditor,
+  type LexicalNode,
+} from "lexical";
+
+import { $isCollapsibleContainerNode } from "./CollapsibleContainerNode";
+import { domOnBeforeMatch, setDomHiddenUntilFound } from "./CollapsibleUtils";
+
+export class CollapsibleContentNode extends ElementNode {
+  $config() {
+    return this.config("collapsible-content", { extends: ElementNode });
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    const dom = $getDocument().createElement("div");
+    dom.classList.add("Collapsible__content");
+    if (IS_CHROME || IS_FIREFOX) {
+      editor.read("latest", () => {
+        const containerNode = this.getParentOrThrow();
+        if (!$isCollapsibleContainerNode(containerNode)) {
+          throw new Error("Expected parent node to be a CollapsibleContainerNode");
+        }
+        if (!containerNode.getOpen()) {
+          setDomHiddenUntilFound(dom);
+        }
+      });
+      domOnBeforeMatch(dom, () => {
+        editor.update(() => {
+          const containerNode = this.getParentOrThrow().getLatest();
+          if (!$isCollapsibleContainerNode(containerNode)) {
+            throw new Error("Expected parent node to be a CollapsibleContainerNode");
+          }
+          if (!containerNode.getOpen()) {
+            containerNode.toggleOpen();
+          }
+        });
+      });
+    }
+    return dom;
+  }
+
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
+    return false;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = $getDocument().createElement("div");
+    element.classList.add("Collapsible__content");
+    element.setAttribute("data-lexical-collapsible-content", "true");
+    return { element };
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+}
+
+export function $createCollapsibleContentNode(): CollapsibleContentNode {
+  return new CollapsibleContentNode();
+}
+
+export function $isCollapsibleContentNode(
+  node: LexicalNode | null | undefined
+): node is CollapsibleContentNode {
+  return node instanceof CollapsibleContentNode;
+}

package/src/plugins/CollapsibleExtension/CollapsibleTitleNode.ts

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $createParagraphNode,
+  $getDocument,
+  $isElementNode,
+  type EditorConfig,
+  ElementNode,
+  IS_CHROME,
+  IS_FIREFOX,
+  type LexicalEditor,
+  type LexicalNode,
+  type RangeSelection,
+} from "lexical";
+
+import { $isCollapsibleContainerNode } from "./CollapsibleContainerNode";
+import { $isCollapsibleContentNode } from "./CollapsibleContentNode";
+
+/** @noInheritDoc */
+export class CollapsibleTitleNode extends ElementNode {
+  /** @internal */
+  $config() {
+    return this.config("collapsible-title", {
+      $transform(node: CollapsibleTitleNode) {
+        if (node.isEmpty()) {
+          node.remove();
+        }
+      },
+      extends: ElementNode,
+    });
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    const dom = $getDocument().createElement("summary");
+    dom.classList.add("Collapsible__title");
+    if (IS_CHROME || IS_FIREFOX) {
+      dom.addEventListener("click", () => {
+        editor.update(() => {
+          const collapsibleContainer = this.getLatest().getParentOrThrow();
+          if (!$isCollapsibleContainerNode(collapsibleContainer)) {
+            throw new Error("Expected parent node to be a CollapsibleContainerNode");
+          }
+          collapsibleContainer.toggleOpen();
+        });
+      });
+    }
+    return dom;
+  }
+
+  updateDOM(prevNode: this, dom: HTMLElement): boolean {
+    return false;
+  }
+
+  insertNewAfter(_: RangeSelection, restoreSelection = true): ElementNode {
+    const containerNode = this.getParentOrThrow();
+
+    if (!$isCollapsibleContainerNode(containerNode)) {
+      throw new Error("CollapsibleTitleNode expects to be child of CollapsibleContainerNode");
+    }
+
+    if (containerNode.getOpen()) {
+      const contentNode = this.getNextSibling();
+      if (!$isCollapsibleContentNode(contentNode)) {
+        throw new Error("CollapsibleTitleNode expects to have CollapsibleContentNode sibling");
+      }
+
+      const firstChild = contentNode.getFirstChild();
+      if ($isElementNode(firstChild)) {
+        return firstChild;
+      } else {
+        const paragraph = $createParagraphNode();
+        contentNode.append(paragraph);
+        return paragraph;
+      }
+    } else {
+      const paragraph = $createParagraphNode();
+      containerNode.insertAfter(paragraph, restoreSelection);
+      return paragraph;
+    }
+  }
+}
+
+export function $createCollapsibleTitleNode(): CollapsibleTitleNode {
+  return new CollapsibleTitleNode();
+}
+
+export function $isCollapsibleTitleNode(
+  node: LexicalNode | null | undefined
+): node is CollapsibleTitleNode {
+  return node instanceof CollapsibleTitleNode;
+}

package/src/plugins/CollapsibleExtension/CollapsibleUtils.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export function setDomHiddenUntilFound(dom: HTMLElement): void {
+  dom.hidden = "until-found";
+}
+
+export function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void {
+  dom.onbeforematch = callback;
+}

package/src/plugins/CollapsibleExtension/index.ts

@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "./Collapsible.css";
+
+import { BlockSchema, defineImportRule, DOMImportExtension, sel } from "@lexical/html";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $findMatchingParent,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  configExtension,
+  createCommand,
+  defineExtension,
+  INSERT_PARAGRAPH_COMMAND,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  type LexicalEditor,
+  type LexicalNode,
+  mergeRegister,
+} from "lexical";
+
+import {
+  $createCollapsibleContainerNode,
+  $isCollapsibleContainerNode,
+  CollapsibleContainerNode,
+} from "./CollapsibleContainerNode";
+import {
+  $createCollapsibleContentNode,
+  $isCollapsibleContentNode,
+  CollapsibleContentNode,
+} from "./CollapsibleContentNode";
+import {
+  $createCollapsibleTitleNode,
+  $isCollapsibleTitleNode,
+  CollapsibleTitleNode,
+} from "./CollapsibleTitleNode";
+
+export {
+  $createCollapsibleContainerNode,
+  $isCollapsibleContainerNode,
+  CollapsibleContainerNode,
+  $createCollapsibleContentNode,
+  $isCollapsibleContentNode,
+  CollapsibleContentNode,
+  $createCollapsibleTitleNode,
+  $isCollapsibleTitleNode,
+  CollapsibleTitleNode,
+};
+
+const SummaryRule = /* @__PURE__ */ defineImportRule({
+  $import: (ctx, el) => [$createCollapsibleTitleNode().splice(0, 0, ctx.$importChildren(el))],
+  match: sel.tag("summary"),
+  name: "@lexical/playground/summary",
+});
+
+const CollapsibleContentRule = /* @__PURE__ */ defineImportRule({
+  $import: (ctx, el) => [
+    $createCollapsibleContentNode().splice(0, 0, ctx.$importChildren(el, { schema: BlockSchema })),
+  ],
+  match: sel.tag("div").attr("data-lexical-collapsible-content", true),
+  name: "@lexical/playground/collapsible-content",
+});
+
+const DetailsRule = /* @__PURE__ */ defineImportRule({
+  $import: (ctx, el) => {
+    let titleNode: CollapsibleTitleNode | null = null;
+    // BlockSchema wraps inline runs in paragraphs, and `$onChild` siphons
+    // the synthesized CollapsibleTitleNode out before it ever reaches the
+    // ContentNode below. CollapsibleContentNode is itself block-level so
+    // BlockSchema leaves it intact in `bodyNodes`.
+    const bodyNodes = ctx.$importChildren(el, {
+      $onChild: (child) => {
+        if (titleNode === null && $isCollapsibleTitleNode(child)) {
+          titleNode = child;
+          return null;
+        }
+        return child;
+      },
+      schema: BlockSchema,
+    });
+    let contentNode: CollapsibleContentNode | null = null;
+    const restBody: LexicalNode[] = [];
+    for (const child of bodyNodes) {
+      if ($isCollapsibleContentNode(child)) {
+        if (contentNode === null) {
+          contentNode = child;
+        } else {
+          // Multiple content nodes (rare): fold the extras into restBody so
+          // they get appended to the canonical one below.
+          for (const grand of child.getChildren()) {
+            restBody.push(grand);
+          }
+        }
+      } else {
+        restBody.push(child);
+      }
+    }
+    if (titleNode === null) {
+      titleNode = $createCollapsibleTitleNode();
+    }
+    if (contentNode === null) {
+      contentNode = $createCollapsibleContentNode();
+    }
+    for (const node of restBody) {
+      contentNode.append(node);
+    }
+    return [$createCollapsibleContainerNode(el.open).append(titleNode, contentNode)];
+  },
+  match: sel.tag("details"),
+  name: "@lexical/playground/details",
+});
+
+export const INSERT_COLLAPSIBLE_COMMAND = /* @__PURE__ */ createCommand<void>(
+  "INSERT_COLLAPSIBLE_COMMAND"
+);
+
+export const COLLAPSIBLE_NODES = [
+  CollapsibleContainerNode,
+  CollapsibleTitleNode,
+  CollapsibleContentNode,
+] as const;
+
+const $onEscapeUp = () => {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection) && selection.isCollapsed() && selection.anchor.offset === 0) {
+    const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
+
+    if ($isCollapsibleContainerNode(container)) {
+      const parent = container.getParent();
+      if (
+        parent !== null &&
+        parent.getFirstChild() === container &&
+        selection.anchor.key === container.getFirstDescendant()?.getKey()
+      ) {
+        container.insertBefore($createParagraphNode());
+      }
+    }
+  }
+
+  return false;
+};
+
+const $onEscapeDown = () => {
+  const selection = $getSelection();
+  if ($isRangeSelection(selection) && selection.isCollapsed()) {
+    const container = $findMatchingParent(selection.anchor.getNode(), $isCollapsibleContainerNode);
+
+    if ($isCollapsibleContainerNode(container)) {
+      const parent = container.getParent();
+      if (parent !== null && parent.getLastChild() === container) {
+        const titleParagraph = container.getFirstDescendant();
+        const contentParagraph = container.getLastDescendant();
+
+        if (
+          (contentParagraph !== null &&
+            selection.anchor.key === contentParagraph.getKey() &&
+            selection.anchor.offset === contentParagraph.getTextContentSize()) ||
+          (titleParagraph !== null &&
+            selection.anchor.key === titleParagraph.getKey() &&
+            selection.anchor.offset === titleParagraph.getTextContentSize() &&
+            !container.getOpen())
+        ) {
+          container.insertAfter($createParagraphNode());
+        }
+      }
+    }
+  }
+
+  return false;
+};
+
+export const registerCollapsibleExtension = (editor: LexicalEditor) =>
+  mergeRegister(
+    // Structure enforcing transformers for each node type. In case nesting structure is not
+    // "Container > Title + Content" it'll unwrap nodes and convert it back
+    // to regular content.
+    editor.registerNodeTransform(CollapsibleContentNode, (node) => {
+      const parent = node.getParent();
+      if (!$isCollapsibleContainerNode(parent)) {
+        const children = node.getChildren();
+        for (const child of children) {
+          node.insertBefore(child);
+        }
+        node.remove();
+      } else if (node.isEmpty()) {
+        node.append($createParagraphNode());
+      }
+    }),
+
+    editor.registerNodeTransform(CollapsibleTitleNode, (node) => {
+      const parent = node.getParent();
+      if (!$isCollapsibleContainerNode(parent)) {
+        node.replace($createParagraphNode().append(...node.getChildren()));
+      }
+    }),
+
+    editor.registerNodeTransform(CollapsibleContainerNode, (node) => {
+      const children = node.getChildren();
+      if (
+        children.length !== 2 ||
+        !$isCollapsibleTitleNode(children[0]) ||
+        !$isCollapsibleContentNode(children[1])
+      ) {
+        for (const child of children) {
+          node.insertBefore(child);
+        }
+        node.remove();
+      }
+    }),
+
+    // When collapsible is the last child pressing down/right arrow will insert paragraph
+    // below it to allow adding more content. It's similar what $insertBlockNode
+    // (mainly for decorators), except it'll always be possible to continue adding
+    // new content even if trailing paragraph is accidentally deleted
+    editor.registerCommand(KEY_ARROW_DOWN_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW),
+
+    editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW),
+
+    // When collapsible is the first child pressing up/left arrow will insert paragraph
+    // above it to allow adding more content. It's similar what $insertBlockNode
+    // (mainly for decorators), except it'll always be possible to continue adding
+    // new content even if leading paragraph is accidentally deleted
+    editor.registerCommand(KEY_ARROW_UP_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW),
+
+    editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW),
+
+    // Enter goes from Title to Content rather than a new line inside Title
+    editor.registerCommand(
+      INSERT_PARAGRAPH_COMMAND,
+      () => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) =>
+            $isCollapsibleTitleNode(node)
+          );
+
+          if ($isCollapsibleTitleNode(titleNode)) {
+            const container = titleNode.getParent();
+            if (container && $isCollapsibleContainerNode(container)) {
+              if (!container.getOpen()) {
+                container.toggleOpen();
+              }
+              titleNode.getNextSibling()?.selectEnd();
+              return true;
+            }
+          }
+        }
+
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    ),
+    editor.registerCommand(
+      INSERT_COLLAPSIBLE_COMMAND,
+      () => {
+        editor.update(() => {
+          const title = $createCollapsibleTitleNode();
+          const paragraph = $createParagraphNode();
+          $insertNodeToNearestRoot(
+            $createCollapsibleContainerNode(true).append(
+              title.append(paragraph),
+              $createCollapsibleContentNode().append($createParagraphNode())
+            )
+          );
+          paragraph.select();
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    )
+  );
+
+export const CollapsibleExtension = /* @__PURE__ */ defineExtension({
+  dependencies: [
+    /* @__PURE__ */ configExtension(DOMImportExtension, {
+      rules: [DetailsRule, SummaryRule, CollapsibleContentRule],
+    }),
+  ],
+  name: "@lexical/playground/Collapsible",
+  nodes: COLLAPSIBLE_NODES,
+  register: registerCollapsibleExtension,
+});

package/src/plugins/ToolbarPlugin/index.tsx

@@ -35,6 +35,7 @@ import {
   formatIndent,
   formatNumberedList,
   formatOutdent,
+  insertCollapsible,
 } from "./utils";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import "./styles.css";
@@ -42,13 +43,16 @@ import { SHORTCUTS } from "../ShortcutsPlugin/shortcuts";
 import { blockTypeToBlockName, useToolbarState } from "../../context/ToolbarContext";
 import { IndentIcon } from "../../icons/IndentIcon";
 import { OutdentIcon } from "../../icons/OutdentIcon";
+import { CollapsibleIcon } from "../../icons/CollapsibleIcon";
 
 export default function ToolbarPlugin({
   editorId,
   setIsLinkEditMode,
+  enableCollapsibleBlocks,
 }: {
   editorId: string;
   setIsLinkEditMode: (isLinkEditMode: boolean) => void;
+  enableCollapsibleBlocks: boolean;
 }) {
   const [editor] = useLexicalComposerContext();
 
@@ -69,17 +73,7 @@ export default function ToolbarPlugin({
     }
   }, [activeEditor, setIsLinkEditMode, toolbarState.isLink]);
 
-  const [items] = useState([
-    { id: 1, txt: "heading2" },
-    { id: 2, txt: "heading3" },
-    { id: 3, txt: "bold" },
-    { id: 4, txt: "italic" },
-    { id: 5, txt: "bulletedList" },
-    { id: 6, txt: "numberedList" },
-    { id: 7, txt: "link" },
-    { id: 8, txt: "indent" },
-    { id: 9, txt: "outdent" },
-  ]);
+  const toolbarItemCount = enableCollapsibleBlocks ? 10 : 9;
 
   const itemsRef = useRef<[HTMLButtonElement] | []>([]);
   const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
@@ -107,10 +101,10 @@ export default function ToolbarPlugin({
         setCurrentFocusIndex((index) => Math.max(0, index - 1));
       } else if (key === "ArrowRight") {
         evt.preventDefault();
-        setCurrentFocusIndex((index) => Math.min(items.length - 1, index + 1));
+        setCurrentFocusIndex((index) => Math.min(toolbarItemCount - 1, index + 1));
       }
     },
-    [items, setCurrentFocusIndex, setToolbarInit, toolbarInit]
+    [setCurrentFocusIndex, setToolbarInit, toolbarInit, toolbarItemCount]
   );
 
   const $updateToolbar = useCallback(() => {
@@ -419,6 +413,25 @@ export default function ToolbarPlugin({
             <OutdentIcon />
           </button>
         </ToolTip>
+
+        {enableCollapsibleBlocks && (
+          <ToolTip text={t("tooltipInsertCollapsible")}>
+            <button
+              tabIndex={currentFocusIndex == 9 ? 0 : -1}
+              ref={(el) => {
+                const index = "button-9" as unknown as number;
+                if (el && itemsRef.current) itemsRef.current[index] = el;
+              }}
+              disabled={!isEditable}
+              onClick={() => insertCollapsible(editor)}
+              className="toolbar-item"
+              aria-label={t("insertCollapsible")}
+              data-testid="collapsible-button"
+            >
+              <CollapsibleIcon />
+            </button>
+          </ToolTip>
+        )}
       </div>
     </>
   );

package/src/plugins/ToolbarPlugin/utils.ts

@@ -30,6 +30,7 @@ import {
   LexicalEditor,
 } from "lexical";
 import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
+import { INSERT_COLLAPSIBLE_COMMAND } from "../CollapsibleExtension";
 
 export const formatParagraph = (editor: LexicalEditor) => {
   editor.update(() => {
@@ -179,3 +180,7 @@ export const formatIndent = (editor: LexicalEditor) => {
 export const formatOutdent = (editor: LexicalEditor) => {
   editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
 };
+
+export const insertCollapsible = (editor: LexicalEditor) => {
+  editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined);
+};

package/src/tests/Editor.test.jsx

@@ -18,7 +18,12 @@ describe("Lexical Editor", () => {
   it("Renders the Lexical Editor", async () => {
     //
     const rendered = render(
-      <Editor ariaLabel="AriaLabel" ariaDescribedBy="AriaDescribedBy" id="editor-test" content="Here is some test content" />
+      <Editor
+        ariaLabel="AriaLabel"
+        ariaDescribedBy="AriaDescribedBy"
+        id="editor-test"
+        content="Here is some test content"
+      />
     );
 
     await act(async () => {
@@ -45,8 +50,9 @@ describe("Lexical Editor", () => {
     // Toolbar has aria-controls attribute
     expect(toolbar).toHaveAttribute("aria-controls", contentArea.id);
 
-    // Toolbar contains 9 formatting buttons
+    // Collapsible content is disabled by default.
     expect(toolbarButtons).toHaveLength(9);
+    expect(within(toolbar).queryByTestId("collapsible-button")).not.toBeInTheDocument();
 
     // Content area has default content and attributes
     expect(contentArea).toHaveAttribute("aria-label", "AriaLabel");
@@ -57,9 +63,60 @@ describe("Lexical Editor", () => {
     expect(contentArea).toHaveAttribute("data-lexical-editor", "true");
   });
 
+  it("can insert collapsible content from the toolbar", async () => {
+    const onChange = vi.fn();
+    const rendered = render(
+      <Editor
+        id="editor-test"
+        content="Here is some content"
+        onChange={onChange}
+        enableCollapsibleBlocks
+      />
+    );
+
+    await act(async () => {
+      await promise;
+    });
+
+    await userEvent.click(screen.getByTestId("collapsible-button"));
+
+    expect(rendered.container.querySelector(".Collapsible__container")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".Collapsible__title")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".Collapsible__content")).toBeInTheDocument();
+    expect(onChange).toHaveBeenLastCalledWith(expect.stringContaining(":::collapsible"));
+  });
+
+  it("renders collapsible Markdown blocks", async () => {
+    const rendered = render(
+      <Editor
+        content={":::collapsible summary test\nDetails body\n:::"}
+        ariaLabel="AriaLabel"
+        enableCollapsibleBlocks
+      />
+    );
+
+    await act(async () => {
+      await promise;
+    });
+
+    expect(rendered.container.querySelector(".Collapsible__container")).toBeInTheDocument();
+    expect(rendered.container.querySelector(".Collapsible__title")).toHaveTextContent(
+      "summary test"
+    );
+    expect(rendered.container.querySelector(".Collapsible__content")).toHaveTextContent(
+      "Details body"
+    );
+  });
+
   it("can keyboard navigate the RichTextEditor", async () => {
     render(
-        <div><Editor ariaLabel="AriaLabel" ariaDescribedBy="AriaDescribedBy" content="Here is some test content" /></div>
+      <div>
+        <Editor
+          ariaLabel="AriaLabel"
+          ariaDescribedBy="AriaDescribedBy"
+          content="Here is some test content"
+        />
+      </div>
     );
 
     await act(async () => {

package/src/transformers/collapsible.ts

@@ -0,0 +1,54 @@
+import {
+  $convertFromMarkdownString,
+  MultilineElementTransformer,
+  TRANSFORMERS,
+} from "@lexical/markdown";
+import { $createParagraphNode, $createTextNode } from "lexical";
+import {
+  $createCollapsibleContainerNode,
+  $createCollapsibleContentNode,
+  $createCollapsibleTitleNode,
+  $isCollapsibleContainerNode,
+  $isCollapsibleContentNode,
+  $isCollapsibleTitleNode,
+  CollapsibleContentNode,
+} from "../plugins/CollapsibleExtension";
+
+const collapsibleTransformers = () => [...TRANSFORMERS, COLLAPSIBLE];
+
+export const COLLAPSIBLE: MultilineElementTransformer = {
+  dependencies: [CollapsibleContentNode],
+  type: "multiline-element",
+  regExpStart: /^:::collapsible(?:\s+(.*))?$/,
+  regExpEnd: /^:::\s*$/,
+  export: (node, traverseChildren) => {
+    if (!$isCollapsibleContainerNode(node)) return null;
+
+    const [title, content] = node.getChildren();
+    if (!$isCollapsibleTitleNode(title) || !$isCollapsibleContentNode(content)) return null;
+
+    const titleText = title.getTextContent().trim();
+    return `:::collapsible${titleText ? ` ${titleText}` : ""}\n${traverseChildren(content)}\n:::`;
+  },
+  handleImportAfterStartMatch: ({ rootNode, startMatch, lines, startLineIndex }) => {
+    const content: string[] = [];
+    let endLineIndex = startLineIndex + 1;
+
+    while (endLineIndex < lines.length && !/^:::\s*$/.test(lines[endLineIndex])) {
+      content.push(lines[endLineIndex]);
+      endLineIndex++;
+    }
+
+    const container = $createCollapsibleContainerNode(true);
+    const title = $createCollapsibleTitleNode();
+    title.append($createParagraphNode().append($createTextNode(startMatch[1] || "Details")));
+
+    const body = $createCollapsibleContentNode();
+    $convertFromMarkdownString(content.join("\n"), collapsibleTransformers(), body);
+    if (body.getChildrenSize() === 0) body.append($createParagraphNode());
+
+    rootNode.append(container.append(title, body));
+    return [true, Math.min(endLineIndex, lines.length - 1)];
+  },
+  replace: () => false,
+};

package/src/transformers/index.ts

@@ -1,5 +1,6 @@
 import { TextMatchTransformer } from "@lexical/markdown";
 import { $createTextNode, $isLineBreakNode, LineBreakNode } from "lexical";
+export { COLLAPSIBLE } from "./collapsible";
 
 export const LINE_BREAK_FIX: TextMatchTransformer = {
   dependencies: [LineBreakNode],