@gcforms/editor 1.0.19 → 1.0.21

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.21] - 2026-08-19
+
+- Enable collapsible / details extension
+
+## [1.0.20] - 2026-08-19
+
+- Update collapsible / details extension styles
+
 ## [1.0.19] - 2026-08-17
 
 - Add collapsible extension

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {

package/src/Editor.tsx

@@ -36,7 +36,6 @@ interface EditorProps {
   className?: string;
   maxLength?: number;
   enableDraggableBlocks?: boolean;
-  enableCollapsibleBlocks?: boolean;
 
   onChange?(...args: unknown[]): unknown;
 }
@@ -53,7 +52,6 @@ export const Editor = ({
   className,
   maxLength,
   enableDraggableBlocks = false,
-  enableCollapsibleBlocks = false,
 }: EditorProps) => {
   contentLocale = contentLocale || locale;
 
@@ -76,11 +74,7 @@ export const Editor = ({
       <ToolbarContext>
         <LexicalExtensionComposer extension={editorExtension} contentEditable={null}>
           <div className="gc-editor-container">
-            <ToolbarPlugin
-              editorId={editorId}
-              setIsLinkEditMode={setIsLinkEditMode}
-              enableCollapsibleBlocks={enableCollapsibleBlocks}
-            />
+            <ToolbarPlugin editorId={editorId} setIsLinkEditMode={setIsLinkEditMode} />
             <ShortcutsPlugin setIsLinkEditMode={setIsLinkEditMode} />
             <RichTextPlugin
               contentEditable={

package/src/i18n/en.json

@@ -23,6 +23,6 @@
   "tooltipOutdent": "Outdent",
   "indent": "Indent",
   "outdent": "Outdent",
-  "tooltipInsertCollapsible": "Insert collapsible container",
+  "tooltipInsertCollapsible": "Details",
   "insertCollapsible": "Insert collapsible container"
 }

package/src/i18n/fr.json

@@ -23,6 +23,6 @@
   "tooltipOutdent": "Suppression d'indentation",
   "indent": "Indentation",
   "outdent": "Suppression d'indentation",
-  "tooltipInsertCollapsible": "Insérer un conteneur réductible",
+  "tooltipInsertCollapsible": "Détails",
   "insertCollapsible": "Insérer un conteneur réductible"
 }

package/src/icons/CollapsibleIcon.tsx

@@ -1,11 +1,18 @@
 export const CollapsibleIcon = () => (
-  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 6.25L3 9.5V3L9 6.25Z" fill="black" />
+    <path d="M17.5 8L14 3L21 3L17.5 8Z" fill="black" />
     <path
-      d="m5 7 5 5 5-5"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M3 14.5H10M3 21H10M3 17.75H10"
+      stroke="#64748B"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <path
+      d="M14 14.5L21 14.5M14 21H21M14 17.75L21 17.75"
+      stroke="black"
+      stroke-width="2"
+      stroke-linecap="round"
     />
   </svg>
 );

package/src/plugins/CollapsibleExtension/Collapsible.css

@@ -8,19 +8,20 @@
  */
 
 .Collapsible__container {
-  background: #fcfcfc;
-  border: 1px solid #eee;
-  border-radius: 10px;
   margin-bottom: 8px;
 }
 
 .Collapsible__title {
   cursor: pointer;
-  padding: 5px 5px 5px 20px;
+  padding: 5px 5px 5px 40px;
   position: relative;
-  font-weight: bold;
   list-style: none;
   outline: none;
+  font: var(--gcds-details-font-desktop);
+  text-decoration: underline;
+  color: var(--gcds-details-default-text);
+  text-decoration-thickness: var(--gcds-details-default-decoration-thickness);
+  text-underline-offset: var(--gcds-details-summary-underline-offset);
 }
 
 /* Lexical titles contain a paragraph. Remove its browser margin so the
@@ -43,65 +44,42 @@
 }
 
 .Collapsible__title:before {
-  border-style: solid;
-  border-color: transparent;
-  border-width: 4px 6px 4px 6px;
-  border-left-color: #000;
+  /* CSS triangle */
+  width: 0;
+  height: 0;
+  border-block: var(--gcds-details-summary-arrow-border-top-bottom) solid transparent;
+  border-inline-start: var(--gcds-details-summary-arrow-border-left) solid
+    var(--gcds-details-default-text);
   display: block;
   content: "";
   position: absolute;
-  left: 7px;
+  left: var(--gcds-details-summary-arrow-left);
   top: 50%;
-  transform-origin: 2px 50%;
   transform: translateY(-50%);
   transition: transform 0.3s ease;
 }
 
 .Collapsible__container[open] > .Collapsible__title:before {
+  /* CSS triangle */
   transform: translateY(-50%) rotate(90deg);
 }
 
 .Collapsible__content {
+  color: var(--gcds-text-role-primary);
+  font: var(--gcds-text-size-body-desktop);
   padding: 10px 5px 5px 20px;
   box-sizing: border-box;
+  border-left: 5px solid var(--gcds-details-panel-border-color);
   interpolate-size: allow-keywords;
   overflow: hidden;
   transition:
     height 0.3s ease-out,
     opacity 0.3s ease-out,
     visibility 0.3s ease-out allow-discrete;
+  margin-left: 10px;
+  min-height: 40px;
 }
 
-/* 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;
+  border-left-color: transparent;
 }

package/src/plugins/ToolbarPlugin/index.tsx

@@ -48,11 +48,9 @@ import { CollapsibleIcon } from "../../icons/CollapsibleIcon";
 export default function ToolbarPlugin({
   editorId,
   setIsLinkEditMode,
-  enableCollapsibleBlocks,
 }: {
   editorId: string;
   setIsLinkEditMode: (isLinkEditMode: boolean) => void;
-  enableCollapsibleBlocks: boolean;
 }) {
   const [editor] = useLexicalComposerContext();
 
@@ -73,7 +71,7 @@ export default function ToolbarPlugin({
     }
   }, [activeEditor, setIsLinkEditMode, toolbarState.isLink]);
 
-  const toolbarItemCount = enableCollapsibleBlocks ? 10 : 9;
+  const toolbarItemCount = 10;
 
   const itemsRef = useRef<[HTMLButtonElement] | []>([]);
   const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
@@ -414,24 +412,22 @@ export default function ToolbarPlugin({
           </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>
-        )}
+        <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/tests/Editor.test.jsx

@@ -50,9 +50,9 @@ describe("Lexical Editor", () => {
     // Toolbar has aria-controls attribute
     expect(toolbar).toHaveAttribute("aria-controls", contentArea.id);
 
-    // Collapsible content is disabled by default.
-    expect(toolbarButtons).toHaveLength(9);
-    expect(within(toolbar).queryByTestId("collapsible-button")).not.toBeInTheDocument();
+    // Details component is enabled by default.
+    expect(toolbarButtons).toHaveLength(10);
+    expect(within(toolbar).getByTestId("collapsible-button")).toBeInTheDocument();
 
     // Content area has default content and attributes
     expect(contentArea).toHaveAttribute("aria-label", "AriaLabel");
@@ -66,12 +66,7 @@ describe("Lexical Editor", () => {
   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
-      />
+      <Editor id="editor-test" content="Here is some content" onChange={onChange} />
     );
 
     await act(async () => {