@gcforms/editor 0.0.1 → 1.0.1

package/src/plugins/ShortcutsPlugin/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 { TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { HeadingTagType } from "@lexical/rich-text";
+import { COMMAND_PRIORITY_NORMAL, KEY_MODIFIER_COMMAND } from "lexical";
+import { Dispatch, useEffect } from "react";
+
+import { useToolbarState } from "../../context/ToolbarContext";
+import {
+  formatBulletList,
+  formatHeading,
+  formatNumberedList,
+  formatParagraph,
+} from "../ToolbarPlugin/utils";
+import {
+  isFormatBulletList,
+  isFormatHeading,
+  isFormatNumberedList,
+  isFormatParagraph,
+  isInsertLink,
+} from "./shortcuts";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+
+export default function ShortcutsPlugin({
+  setIsLinkEditMode,
+}: {
+  setIsLinkEditMode: Dispatch<boolean>;
+}): null {
+  const [editor] = useLexicalComposerContext();
+  const { toolbarState } = useToolbarState();
+
+  useEffect(() => {
+    const keyboardShortcutsHandler = (payload: KeyboardEvent) => {
+      const event: KeyboardEvent = payload;
+
+      if (isFormatParagraph(event)) {
+        event.preventDefault();
+        formatParagraph(editor);
+      } else if (isFormatHeading(event)) {
+        event.preventDefault();
+        if (!["2", "3"].includes(event.code[event.code.length - 1])) {
+          return false;
+        }
+        const { code } = event;
+        const headingSize = `h${code[code.length - 1]}` as HeadingTagType;
+        formatHeading(editor, toolbarState.blockType, headingSize);
+      } else if (isFormatBulletList(event)) {
+        event.preventDefault();
+        formatBulletList(editor, toolbarState.blockType);
+      } else if (isFormatNumberedList(event)) {
+        event.preventDefault();
+        formatNumberedList(editor, toolbarState.blockType);
+      } else if (isInsertLink(event)) {
+        event.preventDefault();
+        const url = toolbarState.isLink ? null : "";
+        setIsLinkEditMode(!toolbarState.isLink);
+
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+      }
+
+      return false;
+    };
+
+    return editor.registerCommand(
+      KEY_MODIFIER_COMMAND,
+      keyboardShortcutsHandler,
+      COMMAND_PRIORITY_NORMAL
+    );
+  }, [editor, toolbarState.isLink, toolbarState.blockType, setIsLinkEditMode]);
+
+  return null;
+}

package/src/plugins/ShortcutsPlugin/shortcuts.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 { 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",
+
+  // (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",
+});
+
+export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean {
+  return IS_APPLE ? metaKey : ctrlKey;
+}
+
+export function isFormatParagraph(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+
+  return (
+    (code === "Numpad0" || code === "Digit0") &&
+    !shiftKey &&
+    altKey &&
+    controlOrMeta(metaKey, ctrlKey)
+  );
+}
+
+export function isFormatHeading(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  const keyNumber = code[code.length - 1];
+
+  return (
+    ["1", "2", "3"].includes(keyNumber) && !shiftKey && altKey && controlOrMeta(metaKey, ctrlKey)
+  );
+}
+
+export function isFormatBulletList(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  return (
+    (code === "Numpad4" || code === "Digit4") &&
+    !shiftKey &&
+    altKey &&
+    controlOrMeta(metaKey, ctrlKey)
+  );
+}
+
+export function isFormatNumberedList(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  return (
+    (code === "Numpad5" || code === "Digit5") &&
+    !shiftKey &&
+    altKey &&
+    controlOrMeta(metaKey, ctrlKey)
+  );
+}
+
+export function isInsertLink(event: KeyboardEvent): boolean {
+  const { code, shiftKey, altKey, metaKey, ctrlKey } = event;
+  return code === "KeyK" && !shiftKey && !altKey && controlOrMeta(metaKey, ctrlKey);
+}

package/src/plugins/ToolbarPlugin/index.tsx

@@ -1,35 +1,26 @@
 "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 { $isHeadingNode } from "@lexical/rich-text";
+import { mergeRegister, $getNearestNodeOfType, $findMatchingParent } 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 { $isListNode, ListNode } from "@lexical/list";
 
 import {
   FORMAT_TEXT_COMMAND,
   $getSelection,
   $isRangeSelection,
   SELECTION_CHANGE_COMMAND,
-  $createParagraphNode,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_CRITICAL,
+  CAN_UNDO_COMMAND,
+  CAN_REDO_COMMAND,
 } 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 { ToolTip } from "../../ui/ToolTip";
 import { H2Icon } from "../../icons/H2Icon";
 import { H3Icon } from "../../icons/H3Icon";
 import { BoldIcon } from "../../icons/BoldIcon";
@@ -37,43 +28,38 @@ import { ItalicIcon } from "../../icons/ItalicIcon";
 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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 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 }) {
+import { SHORTCUTS } from "../ShortcutsPlugin/shortcuts";
+import { blockTypeToBlockName, useToolbarState } from "../../context/ToolbarContext";
+
+export default function ToolbarPlugin({
+  editorId,
+  setIsLinkEditMode,
+}: {
+  editorId: string;
+  setIsLinkEditMode: (isLinkEditMode: boolean) => void;
+}) {
   const [editor] = useLexicalComposerContext();
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isLink, setIsLink] = useState(false);
+
+  const { toolbarState, updateToolbarState } = useToolbarState();
   const [, setSelectedElementKey] = useState("");
-  const [blockType, setBlockType] = useState("paragraph");
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const [activeEditor, setActiveEditor] = useState(editor);
 
-  const [isEditable] = useState(() => editor.isEditable());
+  const { t } = useTranslation();
 
   const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
+    if (!toolbarState.isLink) {
+      setIsLinkEditMode(true);
+      activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, "");
     } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      setIsLinkEditMode(false);
+      activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
     }
-  }, [editor, isLink]);
+  }, [activeEditor, setIsLinkEditMode, toolbarState.isLink]);
 
   const [items] = useState([
     { id: 1, txt: "heading2" },
@@ -117,117 +103,101 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
     [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 $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);
+      let element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : $findMatchingParent(anchorNode, (e) => {
+              const parent = e.getParent();
+              return parent !== null && $isRootOrShadowRoot(parent);
+            });
+
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
       }
 
-      // Update text format
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
 
-      // Get current node and parent
+      // Update links
       const node = getSelectedNode(selection);
       const parent = node.getParent();
-
-      // Update links
-      if ($isLinkNode(parent) || $isLinkNode(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
+      const isLink = $isLinkNode(parent) || $isLinkNode(node);
+      updateToolbarState("isLink", isLink);
 
       if (elementDOM !== null) {
         setSelectedElementKey(elementKey);
         if ($isListNode(element)) {
           const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
           const type = parentList ? parentList.getListType() : element.getListType();
-          setBlockType(type);
+
+          updateToolbarState("blockType", type);
         } else {
           const type = $isHeadingNode(element) ? element.getTag() : element.getType();
           if (type in blockTypeToBlockName) {
-            setBlockType(type as keyof typeof blockTypeToBlockName);
+            updateToolbarState("blockType", type as keyof typeof blockTypeToBlockName);
           }
         }
       }
     }
-  }, [editor]);
+    if ($isRangeSelection(selection)) {
+      // Update text format
+      updateToolbarState("isBold", selection.hasFormat("bold"));
+      updateToolbarState("isItalic", selection.hasFormat("italic"));
+    }
+  }, [editor, updateToolbarState]);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        setActiveEditor(newEditor);
+        $updateToolbar();
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, $updateToolbar, setActiveEditor]);
+
+  useEffect(() => {
+    activeEditor.getEditorState().read(() => {
+      $updateToolbar();
+    });
+  }, [activeEditor, $updateToolbar]);
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
+      editor.registerEditableListener((editable) => {
+        setIsEditable(editable);
+      }),
+      activeEditor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
-          updateToolbar();
+          $updateToolbar();
         });
       }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          updateToolbar();
+      activeEditor.registerCommand<boolean>(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          updateToolbarState("canUndo", payload);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      activeEditor.registerCommand<boolean>(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          updateToolbarState("canRedo", payload);
           return false;
         },
-        LowPriority
+        COMMAND_PRIORITY_CRITICAL
       )
     );
-  }, [editor, updateToolbar]);
+  }, [$updateToolbar, activeEditor, editor, updateToolbarState]);
 
-  const { t } = useTranslation("form-builder");
   const editorHasFocus = useEditorFocus();
 
   return (
@@ -240,7 +210,7 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
         onKeyDown={handleNav}
         data-testid="toolbar"
       >
-        <ToolTip text={t("tooltipFormatH2")}>
+        <ToolTip text={t("tooltipFormatH2") + ` (${SHORTCUTS.HEADING2})`}>
           <button
             tabIndex={currentFocusIndex == 0 ? 0 : -1}
             ref={(el) => {
@@ -250,20 +220,20 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
               }
             }}
             onClick={() => {
-              formatHeading("h2");
+              formatHeading(editor, toolbarState.blockType, "h2");
             }}
             className={
-              "toolbar-item spaced " + (blockType === "h2" && editorHasFocus ? "active" : "")
+              "toolbar-item " + (toolbarState.blockType === "h2" && editorHasFocus ? "active" : "")
             }
             aria-label={t("formatH2")}
-            aria-pressed={blockType === "h2"}
+            aria-pressed={toolbarState.blockType === "h2"}
             data-testid={`h2-button`}
           >
             <H2Icon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatH3")}>
+        <ToolTip text={t("tooltipFormatH3") + ` (${SHORTCUTS.HEADING3})`}>
           <button
             tabIndex={currentFocusIndex == 1 ? 0 : -1}
             ref={(el) => {
@@ -273,20 +243,20 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
               }
             }}
             onClick={() => {
-              formatHeading("h3");
+              formatHeading(editor, toolbarState.blockType, "h3");
             }}
             className={
-              "peer toolbar-item spaced " + (blockType === "h3" && editorHasFocus ? "active" : "")
+              "toolbar-item " + (toolbarState.blockType === "h3" && editorHasFocus ? "active" : "")
             }
             aria-label={t("formatH3")}
-            aria-pressed={blockType === "h3"}
+            aria-pressed={toolbarState.blockType === "h3"}
             data-testid={`h3-button`}
           >
             <H3Icon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatBold")}>
+        <ToolTip text={t("tooltipFormatBold") + ` (${SHORTCUTS.BOLD})`}>
           <button
             tabIndex={currentFocusIndex == 2 ? 0 : -1}
             ref={(el) => {
@@ -298,16 +268,16 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
             }}
-            className={"peer toolbar-item " + (isBold && editorHasFocus ? "active" : "")}
+            className={"toolbar-item " + (toolbarState.isBold && editorHasFocus ? "active" : "")}
             aria-label={t("formatBold")}
-            aria-pressed={isBold}
+            aria-pressed={toolbarState.isBold}
             data-testid={`bold-button`}
           >
             <BoldIcon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatItalic")}>
+        <ToolTip text={t("tooltipFormatItalic") + ` (${SHORTCUTS.ITALIC})`}>
           <button
             tabIndex={currentFocusIndex == 3 ? 0 : -1}
             ref={(el) => {
@@ -319,16 +289,16 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
             onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
             }}
-            className={"peer toolbar-item " + (isItalic && editorHasFocus ? "active" : "")}
+            className={"toolbar-item " + (toolbarState.isItalic && editorHasFocus ? "active" : "")}
             aria-label={t("formatItalic")}
-            aria-pressed={isItalic}
+            aria-pressed={toolbarState.isItalic}
             data-testid={`italic-button`}
           >
             <ItalicIcon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatBulletList")}>
+        <ToolTip text={t("tooltipFormatBulletList") + ` (${SHORTCUTS.BULLET_LIST})`}>
           <button
             tabIndex={currentFocusIndex == 4 ? 0 : -1}
             ref={(el) => {
@@ -337,19 +307,20 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
                 itemsRef.current[index] = el;
               }
             }}
-            onClick={formatBulletList}
+            onClick={() => formatBulletList(editor, toolbarState.blockType)}
             className={
-              "peer toolbar-item " + (blockType === "bullet" && editorHasFocus ? "active" : "")
+              "toolbar-item " +
+              (toolbarState.blockType === "bullet" && editorHasFocus ? "active" : "")
             }
             aria-label={t("formatBulletList")}
-            aria-pressed={blockType === "bullet"}
+            aria-pressed={toolbarState.blockType === "bullet"}
             data-testid={`bullet-list-button`}
           >
             <BulletListIcon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipFormatNumberedList")}>
+        <ToolTip text={t("tooltipFormatNumberedList") + ` (${SHORTCUTS.NUMBERED_LIST})`}>
           <button
             tabIndex={currentFocusIndex == 5 ? 0 : -1}
             ref={(el) => {
@@ -358,19 +329,20 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
                 itemsRef.current[index] = el;
               }
             }}
-            onClick={formatNumberedList}
+            onClick={() => formatNumberedList(editor, toolbarState.blockType)}
             className={
-              "peer toolbar-item " + (blockType === "number" && editorHasFocus ? "active" : "")
+              "toolbar-item " +
+              (toolbarState.blockType === "number" && editorHasFocus ? "active" : "")
             }
             aria-label={t("formatNumberedList")}
-            aria-pressed={blockType === "number"}
+            aria-pressed={toolbarState.blockType === "number"}
             data-testid={`numbered-list-button`}
           >
             <NumberedListIcon />
           </button>
         </ToolTip>
 
-        <ToolTip text={t("tooltipInsertLink")}>
+        <ToolTip text={t("tooltipInsertLink") + ` (${SHORTCUTS.INSERT_LINK})`}>
           <button
             tabIndex={currentFocusIndex == 6 ? 0 : -1}
             ref={(el) => {
@@ -381,9 +353,9 @@ export default function ToolbarPlugin({ editorId }: { editorId: string }) {
             }}
             disabled={!isEditable}
             onClick={insertLink}
-            className={"peer toolbar-item " + (isLink && editorHasFocus ? "active" : "")}
+            className={"toolbar-item " + (toolbarState.isLink && editorHasFocus ? "active" : "")}
             aria-label={t("insertLink")}
-            aria-pressed={isLink}
+            aria-pressed={toolbarState.isLink}
             data-testid={`link-button`}
           >
             <LinkIcon />

package/src/plugins/ToolbarPlugin/styles.css

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