@gcforms/editor 0.0.1

package/src/plugins/ToolbarPlugin/index.tsx

@@ -0,0 +1,395 @@
+"use client";
+import React, { useState, useCallback, useEffect, useRef, KeyboardEvent } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
+import { mergeRegister, $getNearestNodeOfType } from "@lexical/utils";
+
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+
+// @TODO: pass in this dependency or otherwise incorporate into package
+import { useTranslation } from "@i18n/client";
+
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  ListNode,
+} from "@lexical/list";
+
+import {
+  FORMAT_TEXT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  SELECTION_CHANGE_COMMAND,
+  $createParagraphNode,
+} from "lexical";
+
+import { $wrapNodes } from "@lexical/selection";
+import { sanitizeUrl } from "../../utils/url";
+import { useEditorFocus } from "../../hooks/useEditorFocus";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { ToolTip } from "../../ToolTip";
+import { H2Icon } from "../../icons/H2Icon";
+import { H3Icon } from "../../icons/H3Icon";
+import { BoldIcon } from "../../icons/BoldIcon";
+import { ItalicIcon } from "../../icons/ItalicIcon";
+import { BulletListIcon } from "../../icons/BulletListIcon";
+import { NumberedListIcon } from "../../icons/NumberedListIcon";
+import { LinkIcon } from "../../icons/LinkIcon";
+import "./styles.css";
+
+const blockTypeToBlockName = {
+  bullet: "Bulleted List",
+  check: "Check List",
+  code: "Code Block",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+  number: "Numbered List",
+  paragraph: "Normal",
+  quote: "Quote",
+};
+
+const LowPriority = 1;
+type HeadingTagType = "h2" | "h3" | "h4" | "h5";
+
+export default function ToolbarPlugin({ editorId }: { editorId: string }) {
+  const [editor] = useLexicalComposerContext();
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [, setSelectedElementKey] = useState("");
+  const [blockType, setBlockType] = useState("paragraph");
+
+  const [isEditable] = useState(() => editor.isEditable());
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, 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" },
+  ]);
+
+  const itemsRef = useRef<[HTMLButtonElement] | []>([]);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
+  const [toolbarInit, setToolbarInit] = useState(false);
+
+  useEffect(() => {
+    const index = `button-${currentFocusIndex}` as unknown as number;
+    const el = itemsRef.current[index];
+    if (el && toolbarInit) {
+      el.focus();
+    }
+  }, [currentFocusIndex, toolbarInit]);
+
+  const handleNav = useCallback(
+    (evt: KeyboardEvent<HTMLInputElement>) => {
+      const { key } = evt;
+
+      if (!toolbarInit) {
+        setCurrentFocusIndex(0);
+        setToolbarInit(true);
+      }
+
+      if (key === "ArrowLeft") {
+        evt.preventDefault();
+        setCurrentFocusIndex((index) => Math.max(0, index - 1));
+      } else if (key === "ArrowRight") {
+        evt.preventDefault();
+        setCurrentFocusIndex((index) => Math.min(items.length - 1, index + 1));
+      }
+    },
+    [items, setCurrentFocusIndex, setToolbarInit, toolbarInit]
+  );
+
+  const formatHeading = (level: HeadingTagType) => {
+    if (blockType === level) {
+      formatParagraph();
+    }
+
+    if (blockType !== level) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode(level));
+        }
+      });
+    }
+  };
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+  };
+
+  const formatBulletList = (evt: React.MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+    if (blockType !== "bullet") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      return;
+    }
+    editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+  };
+
+  const formatNumberedList = (evt: React.MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+    if (blockType !== "number") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      return;
+    }
+    editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+  };
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+
+        const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+        setBlockType(type);
+      }
+
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+
+      // Get current node and parent
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+
+      // Update links
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
+          const type = parentList ? parentList.getListType() : element.getListType();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          if (type in blockTypeToBlockName) {
+            setBlockType(type as keyof typeof blockTypeToBlockName);
+          }
+        }
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const { t } = useTranslation("form-builder");
+  const editorHasFocus = useEditorFocus();
+
+  return (
+    <>
+      <div
+        className="gc-toolbar-container"
+        role="toolbar"
+        aria-label={t("textFormatting")}
+        aria-controls={editorId}
+        onKeyDown={handleNav}
+        data-testid="toolbar"
+      >
+        <ToolTip text={t("tooltipFormatH2")}>
+          <button
+            tabIndex={currentFocusIndex == 0 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-0" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => {
+              formatHeading("h2");
+            }}
+            className={
+              "toolbar-item spaced " + (blockType === "h2" && editorHasFocus ? "active" : "")
+            }
+            aria-label={t("formatH2")}
+            aria-pressed={blockType === "h2"}
+            data-testid={`h2-button`}
+          >
+            <H2Icon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipFormatH3")}>
+          <button
+            tabIndex={currentFocusIndex == 1 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-1" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => {
+              formatHeading("h3");
+            }}
+            className={
+              "peer toolbar-item spaced " + (blockType === "h3" && editorHasFocus ? "active" : "")
+            }
+            aria-label={t("formatH3")}
+            aria-pressed={blockType === "h3"}
+            data-testid={`h3-button`}
+          >
+            <H3Icon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipFormatBold")}>
+          <button
+            tabIndex={currentFocusIndex == 2 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-2" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+            }}
+            className={"peer toolbar-item " + (isBold && editorHasFocus ? "active" : "")}
+            aria-label={t("formatBold")}
+            aria-pressed={isBold}
+            data-testid={`bold-button`}
+          >
+            <BoldIcon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipFormatItalic")}>
+          <button
+            tabIndex={currentFocusIndex == 3 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-3" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+            }}
+            className={"peer toolbar-item " + (isItalic && editorHasFocus ? "active" : "")}
+            aria-label={t("formatItalic")}
+            aria-pressed={isItalic}
+            data-testid={`italic-button`}
+          >
+            <ItalicIcon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipFormatBulletList")}>
+          <button
+            tabIndex={currentFocusIndex == 4 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-4" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={formatBulletList}
+            className={
+              "peer toolbar-item " + (blockType === "bullet" && editorHasFocus ? "active" : "")
+            }
+            aria-label={t("formatBulletList")}
+            aria-pressed={blockType === "bullet"}
+            data-testid={`bullet-list-button`}
+          >
+            <BulletListIcon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipFormatNumberedList")}>
+          <button
+            tabIndex={currentFocusIndex == 5 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-5" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            onClick={formatNumberedList}
+            className={
+              "peer toolbar-item " + (blockType === "number" && editorHasFocus ? "active" : "")
+            }
+            aria-label={t("formatNumberedList")}
+            aria-pressed={blockType === "number"}
+            data-testid={`numbered-list-button`}
+          >
+            <NumberedListIcon />
+          </button>
+        </ToolTip>
+
+        <ToolTip text={t("tooltipInsertLink")}>
+          <button
+            tabIndex={currentFocusIndex == 6 ? 0 : -1}
+            ref={(el) => {
+              const index = "button-6" as unknown as number;
+              if (el && itemsRef.current) {
+                itemsRef.current[index] = el;
+              }
+            }}
+            disabled={!isEditable}
+            onClick={insertLink}
+            className={"peer toolbar-item " + (isLink && editorHasFocus ? "active" : "")}
+            aria-label={t("insertLink")}
+            aria-pressed={isLink}
+            data-testid={`link-button`}
+          >
+            <LinkIcon />
+          </button>
+        </ToolTip>
+      </div>
+    </>
+  );
+}

package/src/plugins/ToolbarPlugin/styles.css

@@ -0,0 +1,24 @@
+.gc-toolbar-container {
+  padding: 10px;
+  border-radius: 2px 2px 0 0;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  border-bottom: 1px solid #e9ecef;
+
+  &:focus-within {
+    margin: -2px;
+    border: 2px solid #015ecc;
+  }
+
+  button {
+    padding: 4px;
+    border: 1.5px solid transparent;
+    border-radius: 4px;
+    margin-right: 5px;
+    svg {
+      display: block;
+    }
+    &.active {
+      border: 1.5px solid #015ecc;
+    }
+  }
+}

package/src/plugins/TreeViewPlugin/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { TreeView } from "@lexical/react/LexicalTreeView";
+import * as React from "react";
+
+import type { JSX } from "react";
+
+export default function TreeViewPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  return (
+    <TreeView
+      viewClassName="tree-view-output"
+      timeTravelPanelClassName="debug-timetravel-panel"
+      timeTravelButtonClassName="debug-timetravel-button"
+      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+      treeTypeButtonClassName=""
+      editor={editor}
+    />
+  );
+}

package/src/styles.css

@@ -0,0 +1,11 @@
+/*--------------------------------------------*
+  * Rich text editor
+  *--------------------------------------------*/
+
+.editor-list-ul li {
+  margin-bottom: 0.25rem;
+}
+
+.gc-editor-container {
+  position: relative;
+}

package/src/tests/Editor.cy.tsx

@@ -0,0 +1,84 @@
+"use client";
+import React from "react";
+import { Editor } from "../Editor";
+
+describe("<RichTextEditor />", () => {
+  it("Adds and styles text", () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(
+      <div className="form-builder">
+        <Editor content="" ariaLabel="AriaLabel" lang="en" />
+      </div>
+    );
+
+    // Add some strings to get formatted
+    cy.get('[id^="editor-"]').type(
+      `
+    H2 heading text
+    H3 heading text
+    Let's bold part of this sentence.
+    Let's italicize part of this sentence.
+    Part of his one will be a link    
+    `
+    );
+
+    // Add H2 heading
+    cy.get('[id^="editor-"]').setSelection("H2 heading text");
+    cy.get('[data-testid="h2-button"]').first().click();
+    cy.get('[id^="editor-"] h2').first().contains("H2 heading text");
+    cy.get('[data-testid="h2-button"]').first().should("have.attr", "aria-pressed", "true");
+
+    // Add H3 heading
+    cy.get('[id^="editor-"]').setSelection("H3 heading text");
+    cy.get('[data-testid="h3-button"]').first().click();
+    cy.get('[id^="editor-"] h3').first().contains("H3 heading text");
+    cy.get('[data-testid="h3-button"]').first().should("have.attr", "aria-pressed", "true");
+
+    // Bold part of the text
+    cy.get('[id^="editor-"]').setSelection("bold part of this");
+    cy.get('[data-testid="bold-button"]').first().click();
+    cy.get('[id^="editor-"] strong').first().contains("bold part of this");
+    cy.get('[data-testid="bold-button"]').first().should("have.attr", "aria-pressed", "true");
+
+    // Italicize part of the text
+    cy.get('[id^="editor-"]').setSelection("italicize part of this");
+    cy.get('[data-testid="italic-button"]').first().click();
+    cy.get('[id^="editor-"] em').first().contains("italicize part of this");
+    cy.get('[data-testid="italic-button"]').first().should("have.attr", "aria-pressed", "true");
+
+    // Add a bullet list
+    cy.get('[id^="editor-"]').type("{moveToEnd}This is a bullet list item");
+    cy.get('[data-testid="bullet-list-button"]').first().click();
+
+    cy.get('[id^="editor-"]')
+      .setCursorAfter("This is a bullet list item")
+      .type("{enter}This is another bullet list item");
+    cy.get('[data-testid="bullet-list-button"]')
+      .first()
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[id^="editor-"] ul li').first().contains("This is a bullet list item");
+    cy.get('[id^="editor-"] ul li').last().contains("This is another bullet list item");
+
+    // Add a numbered list - two {enter}s are needed to escape the previous list
+    cy.get('[id^="editor-"]').type("{moveToEnd}{enter}{enter}This is a numbered list item");
+    cy.get('[data-testid="numbered-list-button"]').first().click();
+    cy.get('[data-testid="numbered-list-button"]')
+      .first()
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[id^="editor-"]')
+      .setCursorAfter("This is a numbered list item")
+      .type("{enter}This is another numbered list item");
+    cy.get('[data-testid="numbered-list-button"]')
+      .first()
+      .should("have.attr", "aria-pressed", "true");
+    cy.get('[id^="editor-"] ol li').first().contains("This is a numbered list item");
+    cy.get('[id^="editor-"] ol li').last().contains("This is another numbered list item");
+
+    // Add a link
+    cy.get('[id^="editor-"]').setSelection("will be a link");
+    cy.get('[data-testid="link-button"]').first().click();
+    cy.get('[data-testid="link-editor"]').first().click();
+    cy.get('[data-testid="link-editor"]').type("example.com{enter}{esc}");
+    cy.get('[id^="editor-"] a').first().contains("will be a link");
+  });
+});

package/src/tests/Editor.test.js

@@ -0,0 +1,113 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from "react";
+import { cleanup, screen, render, act, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+// import { defaultStore as store, Providers } from "@lib/utils/form-builder/test-utils";
+// import { RichTextEditor } from "../RichTextEditor";
+import { Editor } from "../Editor";
+
+const promise = Promise.resolve();
+
+describe("Lexical Editor", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("Renders the Lexical Editor", async () => {
+    //
+    const rendered = render(
+      <Editor ariaLabel="AriaLabel" ariaDescribedBy="AriaDescribedBy" id="editor-test" content="Here is some test content" />
+    );
+
+    await act(async () => {
+      await promise;
+    });
+
+    const contentArea = rendered.container.querySelector('[id^="editor-"]');
+    const toolbar = screen.getByTestId("toolbar");
+    const [h2, h3, bold, italic, bulletList, numberedList, link] =
+      within(toolbar).getAllByRole("button");
+
+    const toolbarButtons = within(toolbar).getAllByRole("button");
+
+    expect(h2).toHaveAttribute("tabindex", "0");
+    expect(h3).toHaveAttribute("tabindex", "-1");
+    expect(bold).toHaveAttribute("tabindex", "-1");
+    expect(italic).toHaveAttribute("tabindex", "-1");
+    expect(bulletList).toHaveAttribute("tabindex", "-1");
+    expect(numberedList).toHaveAttribute("tabindex", "-1");
+    expect(link).toHaveAttribute("tabindex", "-1");
+
+    // Toolbar has aria-controls attribute
+    expect(toolbar).toHaveAttribute("aria-controls", contentArea.id);
+
+    // Toolbar contains 7 formatting buttons
+    expect(toolbarButtons).toHaveLength(7);
+
+    // Content area has default content and attributes
+    expect(contentArea).toHaveAttribute("aria-label", "AriaLabel");
+    expect(contentArea).toContainHTML("Here is some test content");
+    expect(contentArea).toHaveAttribute("contenteditable", "true");
+    expect(contentArea).toHaveAttribute("role", "textbox");
+    expect(contentArea).toHaveAttribute("spellcheck", "true");
+    expect(contentArea).toHaveAttribute("data-lexical-editor", "true");
+  });
+
+  it("can keyboard navigate the RichTextEditor", async () => {
+    render(
+        <div><Editor ariaLabel="AriaLabel" ariaDescribedBy="AriaDescribedBy" content="Here is some test content" /></div>
+    );
+
+    await act(async () => {
+      await promise;
+    });
+
+    const toolbar = screen.getByTestId("toolbar");
+
+    const [h2, h3, bold, italic, bulletList, numberedList, link] =
+      within(toolbar).getAllByRole("button");
+
+    // expect(document.body).toHaveFocus();
+
+    // tab into toolbar
+    await userEvent.tab();
+    expect(h2).toHaveFocus();
+
+    // tab back out of toolbar
+    await userEvent.tab({ shift: true });
+    expect(document.body).toHaveFocus();
+
+    // tab back into toolbar
+    await userEvent.tab();
+    await userEvent.keyboard("{arrowright}");
+    expect(h3).toHaveFocus();
+
+    await userEvent.keyboard("{arrowright}");
+    expect(bold).toHaveFocus();
+
+    await userEvent.keyboard("{arrowright}");
+    expect(italic).toHaveFocus();
+
+    await userEvent.keyboard("{arrowright}");
+    expect(bulletList).toHaveFocus();
+
+    await userEvent.keyboard("{arrowright}");
+    expect(numberedList).toHaveFocus();
+
+    await userEvent.keyboard("{arrowright}");
+    expect(link).toHaveFocus();
+
+    await userEvent.keyboard("{arrowleft}");
+    expect(numberedList).toHaveFocus();
+
+    // tab back out of toolbar
+    await userEvent.tab({ shift: true });
+    expect(document.body).toHaveFocus();
+
+    // tab back into toolbar
+    await userEvent.tab();
+    expect(numberedList).toHaveFocus();
+  });
+});