@gcforms/editor 1.0.20 → 1.0.21

package/CHANGELOG.md

@@ -5,9 +5,13 @@ 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
 
-- Updste collapsible / details extension styles
+- Update collapsible / details extension styles
 
 ## [1.0.19] - 2026-08-17
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "1.0.20",
+  "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": "Details component",
+  "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": "Composant détails",
+  "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/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 () => {