@gcforms/editor 0.0.1 → 1.0.1

package/src/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -9,24 +9,22 @@ import type { JSX } from "react";
 
 import "./index.css";
 
-import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import {
   $getSelection,
+  $isLineBreakNode,
+  $isNodeSelection,
   $isRangeSelection,
-  BLUR_COMMAND,
   BaseSelection,
+  CLICK_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_HIGH,
   COMMAND_PRIORITY_LOW,
-  COMMAND_PRIORITY_NORMAL,
   getDOMSelection,
   KEY_ESCAPE_COMMAND,
-  KEY_TAB_COMMAND,
   LexicalEditor,
-  NodeSelection,
-  RangeSelection,
   SELECTION_CHANGE_COMMAND,
 } from "lexical";
 import { Dispatch, useCallback, useEffect, useRef, useState } from "react";
@@ -34,11 +32,19 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 
 import { getSelectedNode } from "../../utils/getSelectedNode";
-
-import { sanitizeUrl } from "../../utils/url";
 import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
+import { isValidUrl, sanitizeUrl } from "../../utils/url";
+import { DeleteIcon } from "../../icons/DeleteIcon";
 import { EditIcon } from "../../icons/EditIcon";
-import { useTranslation } from "@i18n/client"; // @TODO: inject i18n
+import { CheckIcon } from "../../icons/CheckIcon";
+import { CancelIcon } from "../../icons/CancelIcon";
+import { useTranslation } from "../../hooks/useTranslation";
+
+function preventDefault(
+  event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
+): void {
+  event.preventDefault();
+}
 
 function FloatingLinkEditor({
   editor,
@@ -58,26 +64,44 @@ function FloatingLinkEditor({
   const editorRef = useRef<HTMLDivElement | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [linkUrl, setLinkUrl] = useState("");
-  const [lastSelection, setLastSelection] = useState<
-    RangeSelection | NodeSelection | BaseSelection | null
-  >(null);
-
+  const [editedLinkUrl, setEditedLinkUrl] = useState("");
+  const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);
   const { t } = useTranslation();
-  const popped = useRef(false);
 
-  const updateLinkEditor = useCallback(() => {
+  const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
       const node = getSelectedNode(selection);
-      const parent = node.getParent();
-      if ($isLinkNode(parent)) {
-        setLinkUrl(parent.getURL());
+      const linkParent = $findMatchingParent(node, $isLinkNode);
+
+      if (linkParent) {
+        setLinkUrl(linkParent.getURL());
       } else if ($isLinkNode(node)) {
         setLinkUrl(node.getURL());
       } else {
         setLinkUrl("");
       }
+      if (isLinkEditMode) {
+        setEditedLinkUrl(linkUrl);
+      }
+    } else if ($isNodeSelection(selection)) {
+      const nodes = selection.getNodes();
+      if (nodes.length > 0) {
+        const node = nodes[0];
+        const parent = node.getParent();
+        if ($isLinkNode(parent)) {
+          setLinkUrl(parent.getURL());
+        } else if ($isLinkNode(node)) {
+          setLinkUrl(node.getURL());
+        } else {
+          setLinkUrl("");
+        }
+        if (isLinkEditMode) {
+          setEditedLinkUrl(linkUrl);
+        }
+      }
     }
+
     const editorElem = editorRef.current;
     const nativeSelection = getDOMSelection(editor._window);
     const activeElement = document.activeElement;
@@ -88,22 +112,29 @@ function FloatingLinkEditor({
 
     const rootElement = editor.getRootElement();
 
-    if (
-      selection !== null &&
-      nativeSelection !== null &&
-      rootElement !== null &&
-      rootElement.contains(nativeSelection.anchorNode) &&
-      editor.isEditable()
-    ) {
-      const domRect: DOMRect | undefined =
-        nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+    if (selection !== null && rootElement !== null && editor.isEditable()) {
+      let domRect: DOMRect | undefined;
+
+      if ($isNodeSelection(selection)) {
+        const nodes = selection.getNodes();
+        if (nodes.length > 0) {
+          const element = editor.getElementByKey(nodes[0].getKey());
+          if (element) {
+            domRect = element.getBoundingClientRect();
+          }
+        }
+      } else if (nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
+        domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+      }
+
       if (domRect) {
-        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem, -30, -10);
+        domRect.y += 40;
+        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
       }
       setLastSelection(selection);
     } else if (!activeElement || activeElement.className !== "link-input") {
       if (rootElement !== null) {
-        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem, -30, -10);
+        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
       }
       setLastSelection(null);
       setIsLinkEditMode(false);
@@ -111,14 +142,14 @@ function FloatingLinkEditor({
     }
 
     return true;
-  }, [anchorElem, editor, setIsLinkEditMode]);
+  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
 
   useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
 
     const update = () => {
       editor.getEditorState().read(() => {
-        updateLinkEditor();
+        $updateLinkEditor();
       });
     };
 
@@ -135,25 +166,24 @@ function FloatingLinkEditor({
         scrollerElem.removeEventListener("scroll", update);
       }
     };
-  }, [anchorElem.parentElement, editor, updateLinkEditor]);
+  }, [anchorElem.parentElement, editor, $updateLinkEditor]);
 
   useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
-          updateLinkEditor();
+          $updateLinkEditor();
         });
       }),
 
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
-          updateLinkEditor();
+          $updateLinkEditor();
           return true;
         },
         COMMAND_PRIORITY_LOW
       ),
-      // Hide link editor by pressing escape
       editor.registerCommand(
         KEY_ESCAPE_COMMAND,
         () => {
@@ -164,97 +194,185 @@ function FloatingLinkEditor({
           return false;
         },
         COMMAND_PRIORITY_HIGH
-      ),
-      // Hide link editor when editor loses focus
-      editor.registerCommand(
-        BLUR_COMMAND,
-        () => {
-          if (isLink && !popped.current) {
-            setIsLink(false);
-            return true;
-          }
-          popped.current = false;
-          return false;
-        },
-        COMMAND_PRIORITY_NORMAL
-      ),
-      // Don't hide link editor when tabbing into it
-      editor.registerCommand(
-        KEY_TAB_COMMAND,
-        () => {
-          if (isLink) {
-            popped.current = true;
-            return true;
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_NORMAL
       )
     );
-  }, [editor, updateLinkEditor, setIsLink, isLink, popped]);
+  }, [editor, $updateLinkEditor, setIsLink, isLink]);
 
   useEffect(() => {
     editor.getEditorState().read(() => {
-      updateLinkEditor();
+      $updateLinkEditor();
     });
-  }, [editor, updateLinkEditor]);
+  }, [editor, $updateLinkEditor]);
 
   useEffect(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
     }
-  }, [isLinkEditMode]);
+  }, [isLinkEditMode, isLink]);
+
+  const monitorInputInteraction = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      if (isValidUrl(editedLinkUrl)) {
+        handleLinkSubmission(event as React.KeyboardEvent<HTMLInputElement>);
+      }
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setIsLinkEditMode(false);
+      if (linkUrl === "") {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+      }
+    }
+  };
+
+  const handleLinkSubmission = (
+    event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>
+  ) => {
+    event.preventDefault();
+    if (lastSelection !== null) {
+      if (editedLinkUrl !== "") {
+        editor.update(() => {
+          editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const parent = getSelectedNode(selection).getParent();
+            if ($isAutoLinkNode(parent)) {
+              const linkNode = $createLinkNode(parent.getURL(), {
+                rel: parent.__rel,
+                target: parent.__target,
+                title: parent.__title,
+              });
+              parent.replace(linkNode, true);
+            }
+          }
+        });
+      }
+      setEditedLinkUrl("");
+      setIsLinkEditMode(false);
+    }
+  };
 
   return (
-    <div ref={editorRef} className="gc-link-editor" data-testid="link-editor">
-      {isLinkEditMode ? (
-        <input
-          ref={inputRef}
-          className="link-input"
-          value={linkUrl}
-          onChange={(event) => {
-            setLinkUrl(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === "Escape" || event.key === "Tab") {
-              event.preventDefault();
-              if (lastSelection !== null) {
-                if (linkUrl !== "") {
-                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(linkUrl));
-                }
+    <div ref={editorRef} className="gc-link-editor" data-testid="gc-link-editor">
+      {!isLink ? null : isLinkEditMode ? (
+        <div className="gc-link-editor-container">
+          <input
+            ref={inputRef}
+            value={editedLinkUrl}
+            placeholder="http://"
+            onChange={(event) => {
+              setEditedLinkUrl(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              monitorInputInteraction(event);
+            }}
+          />
+          <div className="gc-link-editor-actions">
+            <button
+              onMouseDown={preventDefault}
+              onClick={() => {
                 setIsLinkEditMode(false);
-              }
-            }
-          }}
-        />
-      ) : (
-        <>
-          <div className="link-input">
+                if (linkUrl === "") {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                }
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  setIsLinkEditMode(false);
+                  if (linkUrl === "") {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                  }
+                }
+              }}
+            >
+              <span className="sr-only">{t("cancelEditLink")}</span>
+              <CancelIcon />
+            </button>
+
             <button
-              title={t("editLink")}
-              aria-label={t("editLink")}
-              className="relative w-full truncate pr-5"
-              onMouseDown={(event) => event.preventDefault()}
+              className={!isValidUrl(editedLinkUrl) ? "gc-link-editor-button-disabled" : ""}
+              disabled={!isValidUrl(editedLinkUrl)}
+              onMouseDown={preventDefault}
+              onClick={handleLinkSubmission}
               onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  handleLinkSubmission(event as React.KeyboardEvent<HTMLInputElement>);
+                }
                 if (event.key === "Escape") {
                   event.preventDefault();
-                  editor.focus();
+                  setIsLinkEditMode(false);
+                }
+              }}
+            >
+              <span className="sr-only">{t("saveLink")}</span>
+              <CheckIcon />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="gc-link-editor-container">
+          <button
+            className="link"
+            tabIndex={0}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                setEditedLinkUrl(linkUrl);
+                setIsLinkEditMode(true);
+              }
+            }}
+            onClick={(event) => {
+              event.preventDefault();
+              setEditedLinkUrl(linkUrl);
+              setIsLinkEditMode(true);
+            }}
+          >
+            <span className="sr-only">{t("pressEnterToEditLink")}</span>
+            {linkUrl}
+          </button>
+          <div className="gc-link-editor-actions">
+            <button
+              onMouseDown={preventDefault}
+              onClick={(event) => {
+                event.preventDefault();
+                setEditedLinkUrl(linkUrl);
+                setIsLinkEditMode(true);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  setEditedLinkUrl(linkUrl);
+                  setIsLinkEditMode(true);
                 }
-                if (event.key === "Tab") {
-                  setIsLink(false);
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setIsLinkEditMode(false);
                 }
               }}
+            >
+              <span className="sr-only">{t("editLink")}</span>
+              <EditIcon />
+            </button>
+            <button
+              onMouseDown={preventDefault}
               onClick={() => {
-                popped.current = true;
-                setIsLinkEditMode(true);
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                }
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setIsLinkEditMode(false);
+                }
               }}
             >
-              {linkUrl}
-              <EditIcon title={t("editLink")} className="absolute right-0 inline-block size-5" />
+              <span className="sr-only">{t("removeLink")}</span>
+              <DeleteIcon />
             </button>
           </div>
-          {/* <LinkPreview url={linkUrl} /> */}
-        </>
+        </div>
       )}
     </div>
   );
@@ -269,47 +387,96 @@ function useFloatingLinkEditorToolbar(
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
 
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      const node = getSelectedNode(selection);
-      const linkParent = $findMatchingParent(node, $isLinkNode);
-      const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
-
-      // We don't want this menu to open for auto links.
-      if (linkParent != null && autoLinkParent == null) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
+  useEffect(() => {
+    function $updateToolbar() {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const focusNode = getSelectedNode(selection);
+        const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+        const focusAutoLinkNode = $findMatchingParent(focusNode, $isAutoLinkNode);
+        if (!(focusLinkNode || focusAutoLinkNode)) {
+          setIsLink(false);
+          return;
+        }
+        const badNode = selection
+          .getNodes()
+          .filter((node) => !$isLineBreakNode(node))
+          .find((node) => {
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+            return (
+              (focusLinkNode && !focusLinkNode.is(linkNode)) ||
+              (linkNode && !linkNode.is(focusLinkNode)) ||
+              (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+              (autoLinkNode &&
+                (!autoLinkNode.is(focusAutoLinkNode) || autoLinkNode.getIsUnlinked()))
+            );
+          });
+        if (!badNode) {
+          setIsLink(true);
+        } else {
+          setIsLink(false);
+        }
+      } else if ($isNodeSelection(selection)) {
+        const nodes = selection.getNodes();
+        if (nodes.length === 0) {
+          setIsLink(false);
+          return;
+        }
+        const node = nodes[0];
+        const parent = node.getParent();
+        if ($isLinkNode(parent) || $isLinkNode(node)) {
+          setIsLink(true);
+        } else {
+          setIsLink(false);
+        }
       }
     }
-  }, []);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      (_payload, newEditor) => {
-        updateToolbar();
-        setActiveEditor(newEditor);
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  return isLink
-    ? createPortal(
-        <FloatingLinkEditor
-          editor={activeEditor}
-          isLink={isLink}
-          anchorElem={anchorElem}
-          setIsLink={setIsLink}
-          isLinkEditMode={isLinkEditMode}
-          setIsLinkEditMode={setIsLinkEditMode}
-        />,
-        anchorElem
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          $updateToolbar();
+          setActiveEditor(newEditor);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+              window.open(linkNode.getURL(), "_blank");
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
       )
-    : null;
+    );
+  }, [editor]);
+
+  return createPortal(
+    <FloatingLinkEditor
+      editor={activeEditor}
+      isLink={isLink}
+      anchorElem={anchorElem}
+      setIsLink={setIsLink}
+      isLinkEditMode={isLinkEditMode}
+      setIsLinkEditMode={setIsLinkEditMode}
+    />,
+    anchorElem
+  );
 }
 
 export default function FloatingLinkEditorPlugin({

package/src/plugins/MaxLengthPlugin/index.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { $trimTextContentFromAnchor } from "@lexical/selection";
+import { $restoreEditorState } from "@lexical/utils";
+import { $getSelection, $isRangeSelection, EditorState, RootNode } from "lexical";
+import { JSX, useEffect, useState } from "react";
+import "./styles.css";
+
+const MaxLengthIndicator = ({
+  maxLength,
+  contentLength,
+}: {
+  maxLength?: number;
+  contentLength: number;
+}) => {
+  if (!maxLength) {
+    return null;
+  }
+
+  return (
+    // Only show if contentLength reaches 80% of maxLength
+    contentLength >= 0.8 * maxLength && (
+      <div className="gc-editor-max-length">
+        {contentLength >= maxLength ? maxLength : contentLength}/{maxLength}
+      </div>
+    )
+  );
+};
+
+export function MaxLengthPlugin({ maxLength }: { maxLength: number }): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [contentLength, setContentLength] = useState(0);
+
+  useEffect(() => {
+    let lastRestoredEditorState: EditorState | null = null;
+
+    return editor.registerNodeTransform(RootNode, (rootNode: RootNode) => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        return;
+      }
+      const prevEditorState = editor.getEditorState();
+      const prevTextContentSize = prevEditorState.read(() => rootNode.getTextContentSize());
+      const textContentSize = rootNode.getTextContentSize();
+      setContentLength(textContentSize);
+
+      if (prevTextContentSize !== textContentSize) {
+        const delCount = textContentSize - maxLength;
+        const anchor = selection.anchor;
+
+        if (delCount > 0) {
+          // Restore the old editor state instead if the last
+          // text content was already at the limit.
+          if (prevTextContentSize === maxLength && lastRestoredEditorState !== prevEditorState) {
+            lastRestoredEditorState = prevEditorState;
+            $restoreEditorState(editor, prevEditorState);
+          } else {
+            $trimTextContentFromAnchor(editor, anchor, delCount);
+          }
+        }
+      }
+    });
+  }, [editor, maxLength, setContentLength]);
+
+  return <MaxLengthIndicator contentLength={contentLength} maxLength={maxLength} />;
+}

package/src/plugins/MaxLengthPlugin/styles.css

@@ -0,0 +1,7 @@
+.gc-editor-max-length {
+  position: absolute;
+  bottom: 0;
+  right: 8px;
+  font-size: 0.8rem;
+  color: #999;
+}