@gcforms/editor 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.7] - 2025-08-25
+
+### Changed
+
+- Update indent and outdent to have buttons and new shortcuts
+
 ## [1.0.6] - 2025-07-21
 
 ### Changed

package/package.json

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

package/src/Editor.tsx

@@ -14,7 +14,6 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
 
 import ContentEditable from "./ui/ContentEditable";
-import TabControlPlugin from "./plugins/TabControlPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import TreeViewPlugin from "./plugins/TreeViewPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentPlugin";
@@ -116,7 +115,6 @@ export const Editor = ({
             />
             <ListPlugin />
             <LinkPlugin />
-            <TabControlPlugin />
             <ListMaxIndentLevelPlugin maxDepth={5} />
 
             {floatingAnchorElem && (

package/src/i18n/en.json

@@ -18,5 +18,9 @@
   "saveLink": "Save link",
   "editLink": "Edit link",
   "removeLink": "Remove link",
-  "pressEnterToEditLink": "Press Enter to edit link"
+  "pressEnterToEditLink": "Press Enter to edit link",
+  "tooltipIndent": "Indent",
+  "tooltipOutdent": "Outdent",
+  "indent": "Indent",
+  "outdent": "Outdent"
 }

package/src/i18n/fr.json

@@ -18,5 +18,9 @@
   "saveLink": "Enregistrer le lien",
   "editLink": "Modifier le lien",
   "removeLink": "Supprimer le lien",
-  "pressEnterToEditLink": "Appuyez sur Entrée pour modifier le lien"
+  "pressEnterToEditLink": "Appuyez sur Entrée pour modifier le lien",
+  "tooltipIndent": "Indentation",
+  "tooltipOutdent": "Suppression d'indentation",
+  "indent": "Indentation",
+  "outdent": "Suppression d'indentation"
 }

package/src/icons/IndentIcon.tsx

@@ -0,0 +1,21 @@
+export const IndentIcon = ({
+  className,
+  title = "Indent",
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 -960 960 960"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm0 440v-320l160 160-160 160Z" />
+  </svg>
+);

package/src/icons/OutdentIcon.tsx

@@ -0,0 +1,21 @@
+export const OutdentIcon = ({
+  className,
+  title = "Outdent",
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 -960 960 960"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M120-120v-80h720v80H120Zm320-160v-80h400v80H440Zm0-160v-80h400v80H440Zm0-160v-80h400v80H440ZM120-760v-80h720v80H120Zm160 440L120-480l160-160v320Z" />
+  </svg>
+);

package/src/plugins/ShortcutsPlugin/index.tsx

@@ -15,7 +15,9 @@ import { useToolbarState } from "../../context/ToolbarContext";
 import {
   formatBulletList,
   formatHeading,
+  formatIndent,
   formatNumberedList,
+  formatOutdent,
   formatParagraph,
 } from "../ToolbarPlugin/utils";
 import {
@@ -23,7 +25,9 @@ import {
   isFormatHeading,
   isFormatNumberedList,
   isFormatParagraph,
+  isIndent,
   isInsertLink,
+  isOutdent,
 } from "./shortcuts";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 
@@ -62,6 +66,12 @@ export default function ShortcutsPlugin({
         setIsLinkEditMode(!toolbarState.isLink);
 
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+      } else if (isIndent(event)) {
+        event.preventDefault();
+        formatIndent(editor);
+      } else if (isOutdent(event)) {
+        event.preventDefault();
+        formatOutdent(editor);
       }
 
       return false;

package/src/plugins/ShortcutsPlugin/shortcuts.ts

@@ -11,19 +11,32 @@ import { IS_APPLE } from "@lexical/utils";
 //disable eslint sorting rule for quick reference to shortcuts
 export const SHORTCUTS = Object.freeze({
   // (Ctrl|⌘) + (Alt|Option) + <key> shortcuts
-  NORMAL: IS_APPLE ? "⌘+Opt+0" : "Ctrl+Alt+0",
-  HEADING2: IS_APPLE ? "⌘+Opt+2" : "Ctrl+Alt+2",
-  HEADING3: IS_APPLE ? "⌘+Opt+3" : "Ctrl+Alt+3",
-  BULLET_LIST: IS_APPLE ? "⌘+Opt+4" : "Ctrl+Alt+4",
-  NUMBERED_LIST: IS_APPLE ? "⌘+Opt+5" : "Ctrl+Alt+5",
+  NORMAL: IS_APPLE ? "⌘ + Opt + 0" : "Ctrl + Alt + 0",
+  HEADING2: IS_APPLE ? "⌘ + Opt + 2" : "Ctrl + Alt + 2",
+  HEADING3: IS_APPLE ? "⌘ + Opt + 3" : "Ctrl + Alt + 3",
+  BULLET_LIST: IS_APPLE ? "⌘ + Opt + 4" : "Ctrl + Alt + 4",
+  NUMBERED_LIST: IS_APPLE ? "⌘ + Opt + 5" : "Ctrl + Alt + 5",
 
   // (Ctrl|⌘) + Shift + <key> shortcuts
   //
 
   // (Ctrl|⌘) + <key> shortcuts
-  BOLD: IS_APPLE ? "⌘+B" : "Ctrl+B",
-  ITALIC: IS_APPLE ? "⌘+I" : "Ctrl+I",
-  INSERT_LINK: IS_APPLE ? "⌘+K" : "Ctrl+K",
+  BOLD: IS_APPLE ? "⌘ + B" : "Ctrl + B",
+  ITALIC: IS_APPLE ? "⌘ + I" : "Ctrl + I",
+  INSERT_LINK: IS_APPLE ? "⌘ + K" : "Ctrl + K",
+
+  // Why the "⌘ + ]/[" was chosen:
+  // "⌘+Opt+]" prevents overriding the key "Opt+[" “curly quotes” on macOS
+  // "⌘+Opt+]" prevents overriding the key "⌘+[" to go back in browser history on macOS
+  // But "⌘+Opt+]" is cumbersome and not very discoverable. Making an expection
+  // to override the default browser history keys for better usability in the editor.
+  //
+  // Note: screenreaders will ignore special characeters like brackets so there is a
+  // version for for sited users and alt version for screenreader users.
+  INDENT: IS_APPLE ? "⌘ + ]" : "Ctrl + ]",
+  INDENT_ALT: IS_APPLE ? "⌘ + Right bracket" : "Ctrl + Right bracket",
+  OUTDENT: IS_APPLE ? "⌘ + [" : "Ctrl + [",
+  OUTDENT_ALT: IS_APPLE ? "⌘ + Left bracket" : "Ctrl + Left bracket",
 });
 
 export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean {
@@ -74,3 +87,15 @@ export function isInsertLink(event: KeyboardEvent): boolean {
   const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
   return code === "KeyK" && !shiftKey && !altKey && controlOrMeta(metaKey, ctrlKey);
 }
+
+export const isIndent = (event: KeyboardEvent) => {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  // ⌘ + ] (macOS) or Ctrl + ] (Win/Linux)
+  return code === "BracketRight" && !shiftKey && !altKey && controlOrMeta(metaKey, ctrlKey);
+};
+
+export function isOutdent(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  // ⌘ + [ (macOS) or Ctrl + [ (Win/Linux)
+  return code === "BracketLeft" && !shiftKey && !altKey && controlOrMeta(metaKey, ctrlKey);
+}

package/src/plugins/ToolbarPlugin/index.tsx

@@ -29,11 +29,19 @@ import { BulletListIcon } from "../../icons/BulletListIcon";
 import { NumberedListIcon } from "../../icons/NumberedListIcon";
 import { LinkIcon } from "../../icons/LinkIcon";
 import { useTranslation } from "../../hooks/useTranslation";
-import { formatBulletList, formatHeading, formatNumberedList } from "./utils";
+import {
+  formatBulletList,
+  formatHeading,
+  formatIndent,
+  formatNumberedList,
+  formatOutdent,
+} from "./utils";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import "./styles.css";
 import { SHORTCUTS } from "../ShortcutsPlugin/shortcuts";
 import { blockTypeToBlockName, useToolbarState } from "../../context/ToolbarContext";
+import { IndentIcon } from "../../icons/IndentIcon";
+import { OutdentIcon } from "../../icons/OutdentIcon";
 
 export default function ToolbarPlugin({
   editorId,
@@ -69,6 +77,8 @@ export default function ToolbarPlugin({
     { id: 5, txt: "bulletedList" },
     { id: 6, txt: "numberedList" },
     { id: 7, txt: "link" },
+    { id: 8, txt: "indent" },
+    { id: 9, txt: "outdent" },
   ]);
 
   const itemsRef = useRef<[HTMLButtonElement] | []>([]);
@@ -210,7 +220,7 @@ export default function ToolbarPlugin({
         onKeyDown={handleNav}
         data-testid="toolbar"
       >
-        <ToolTip text={t("tooltipFormatH2") + ` (${SHORTCUTS.HEADING2})`}>
+        <ToolTip text={t("tooltipFormatH2")} element={keyboardShortcut(SHORTCUTS.HEADING2)}>
           <button
             tabIndex={currentFocusIndex == 0 ? 0 : -1}
             ref={(el) => {
@@ -233,7 +243,7 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatH3") + ` (${SHORTCUTS.HEADING3})`}>
+        <ToolTip text={t("tooltipFormatH3")} element={keyboardShortcut(SHORTCUTS.HEADING3)}>
           <button
             tabIndex={currentFocusIndex == 1 ? 0 : -1}
             ref={(el) => {
@@ -256,7 +266,7 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatBold") + ` (${SHORTCUTS.BOLD})`}>
+        <ToolTip text={t("tooltipFormatBold")} element={keyboardShortcut(SHORTCUTS.BOLD)}>
           <button
             tabIndex={currentFocusIndex == 2 ? 0 : -1}
             ref={(el) => {
@@ -277,7 +287,7 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatItalic") + ` (${SHORTCUTS.ITALIC})`}>
+        <ToolTip text={t("tooltipFormatItalic")} element={keyboardShortcut(SHORTCUTS.ITALIC)}>
           <button
             tabIndex={currentFocusIndex == 3 ? 0 : -1}
             ref={(el) => {
@@ -298,7 +308,10 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatBulletList") + ` (${SHORTCUTS.BULLET_LIST})`}>
+        <ToolTip
+          text={t("tooltipFormatBulletList")}
+          element={keyboardShortcut(SHORTCUTS.BULLET_LIST)}
+        >
           <button
             tabIndex={currentFocusIndex == 4 ? 0 : -1}
             ref={(el) => {
@@ -320,7 +333,10 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatNumberedList") + ` (${SHORTCUTS.NUMBERED_LIST})`}>
+        <ToolTip
+          text={t("tooltipFormatNumberedList")}
+          element={keyboardShortcut(SHORTCUTS.NUMBERED_LIST)}
+        >
           <button
             tabIndex={currentFocusIndex == 5 ? 0 : -1}
             ref={(el) => {
@@ -342,7 +358,7 @@ export default function ToolbarPlugin({
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipInsertLink") + ` (${SHORTCUTS.INSERT_LINK})`}>
+        <ToolTip text={t("tooltipInsertLink")} element={keyboardShortcut(SHORTCUTS.INSERT_LINK)}>
           <button
             tabIndex={currentFocusIndex == 6 ? 0 : -1}
             ref={(el) => {
@@ -361,7 +377,57 @@ export default function ToolbarPlugin({
             <LinkIcon />
           </button>
         </ToolTip>
+
+        <ToolTip
+          text={t("tooltipIndent")}
+          element={keyboardShortcut(SHORTCUTS.INDENT, SHORTCUTS.INDENT_ALT)}
+        >
+          <button
+            tabIndex={currentFocusIndex == 7 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-7" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => formatIndent(editor)}
+            className={"toolbar-item"}
+            aria-label={t("indent")}
+            data-testid="indent-button"
+          >
+            <IndentIcon />
+          </button>
+        </ToolTip>
+
+        <ToolTip
+          text={t("tooltipOutdent")}
+          element={keyboardShortcut(SHORTCUTS.OUTDENT, SHORTCUTS.OUTDENT_ALT)}
+        >
+          <button
+            tabIndex={currentFocusIndex == 8 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-8" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => formatOutdent(editor)}
+            className={"toolbar-item"}
+            aria-label={t("outdent")}
+            data-testid="outdent-button"
+          >
+            <OutdentIcon />
+          </button>
+        </ToolTip>
       </div>
     </>
   );
 }
+
+const keyboardShortcut = (text: string, ariaLabel?: string) => {
+  return (
+    <div>
+      <kbd {...(ariaLabel && { "aria-label": ariaLabel })}>{text}</kbd>
+    </div>
+  );
+};

package/src/plugins/ToolbarPlugin/utils.ts

@@ -29,6 +29,7 @@ import {
   $isTextNode,
   LexicalEditor,
 } from "lexical";
+import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND } from "lexical";
 
 export const formatParagraph = (editor: LexicalEditor) => {
   editor.update(() => {
@@ -170,3 +171,11 @@ export const clearFormatting = (editor: LexicalEditor) => {
     }
   });
 };
+
+export const formatIndent = (editor: LexicalEditor) => {
+  editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+};
+
+export const formatOutdent = (editor: LexicalEditor) => {
+  editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+};

package/src/tests/Editor.cy.tsx

@@ -82,5 +82,23 @@ describe("<RichTextEditor />", () => {
     );
     cy.get('[id^="editor-"] a').first().contains("will be a link");
     cy.get('[id^="editor-"] a').first().should("have.attr", "href", "https://example.com");
+
+    // Add a new numbered list to test the indent and outdent buttons
+    cy.get('[id^="editor-"]').type(
+      "{moveToEnd}{enter}{enter}{enter}This is a numbered list item 2"
+    );
+    cy.get('[data-testid="numbered-list-button"]').first().click();
+    cy.get('[id^="editor-"]')
+      .setCursorAfter("This is a numbered list item 2")
+      .type("{enter}This is another numbered list item 2");
+    cy.get('[id^="editor-"] ol li').last().contains("This is another numbered list item 2");
+    // Indent the last list item
+    cy.get('[data-testid="indent-button"]').click();
+    cy.get('[id^="editor-"] ol li').eq(2).contains("This is a numbered list item 2");
+    cy.get('[id^="editor-"] ol li ol li').last().contains("This is another numbered list item 2");
+    // Outdent the last list item (revert)
+    cy.get('[data-testid="outdent-button"]').click();
+    cy.get('[id^="editor-"] ol li').eq(2).contains("This is a numbered list item 2");
+    cy.get('[id^="editor-"] ol li').last().contains("This is another numbered list item 2");
   });
 });

package/src/tests/Editor.test.js

@@ -27,7 +27,7 @@ describe("Lexical Editor", () => {
 
     const contentArea = rendered.container.querySelector('[id^="editor-"]');
     const toolbar = screen.getByTestId("toolbar");
-    const [h2, h3, bold, italic, bulletList, numberedList, link] =
+    const [h2, h3, bold, italic, bulletList, numberedList, link, indent, outdent] =
       within(toolbar).getAllByRole("button");
 
     const toolbarButtons = within(toolbar).getAllByRole("button");
@@ -39,12 +39,14 @@ describe("Lexical Editor", () => {
     expect(bulletList).toHaveAttribute("tabindex", "-1");
     expect(numberedList).toHaveAttribute("tabindex", "-1");
     expect(link).toHaveAttribute("tabindex", "-1");
+    expect(indent).toHaveAttribute("tabindex", "-1");
+    expect(outdent).toHaveAttribute("tabindex", "-1");
 
     // Toolbar has aria-controls attribute
     expect(toolbar).toHaveAttribute("aria-controls", contentArea.id);
 
-    // Toolbar contains 7 formatting buttons
-    expect(toolbarButtons).toHaveLength(7);
+    // Toolbar contains 9 formatting buttons
+    expect(toolbarButtons).toHaveLength(9);
 
     // Content area has default content and attributes
     expect(contentArea).toHaveAttribute("aria-label", "AriaLabel");

package/src/ui/ToolTip.tsx

@@ -2,7 +2,15 @@
 import React, { useId, Children } from "react";
 import "./ToolTip.css";
 
-export const ToolTip = ({ children, text }: { children: React.ReactElement; text: string }) => {
+export const ToolTip = ({
+  children,
+  text,
+  element = null,
+}: {
+  children: React.ReactElement;
+  text: string;
+  element?: React.JSX.Element | null;
+}) => {
   const id = `tooltip-${useId()}`;
 
   return (
@@ -18,6 +26,7 @@ export const ToolTip = ({ children, text }: { children: React.ReactElement; text
       })}
       <span id={id} className="gc-tooltip">
         {text}
+        {element}
       </span>
     </span>
   );

package/src/plugins/TabControlPlugin/index.tsx

@@ -1,28 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  COMMAND_PRIORITY_EDITOR,
-  INDENT_CONTENT_COMMAND,
-  KEY_TAB_COMMAND,
-  OUTDENT_CONTENT_COMMAND,
-} from "lexical";
-import { useEffect } from "react";
-
-export default function TabControlPlugin() {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return editor.registerCommand(
-      KEY_TAB_COMMAND,
-      (payload) => {
-        const event: KeyboardEvent = payload;
-        event.preventDefault();
-        return editor.dispatchCommand(
-          event.shiftKey ? OUTDENT_CONTENT_COMMAND : INDENT_CONTENT_COMMAND,
-          undefined
-        );
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  return null;
-}