@gcforms/editor 0.0.1 → 1.0.0

package/src/plugins/ToolbarPlugin/utils.ts

@@ -0,0 +1,172 @@
+/**
+ * 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 { $createCodeNode } from "@lexical/code";
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+} from "@lexical/list";
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+  $isQuoteNode,
+  HeadingTagType,
+} from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { $isTableSelection } from "@lexical/table";
+import { $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  LexicalEditor,
+} from "lexical";
+
+export const formatParagraph = (editor: LexicalEditor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    $setBlocksType(selection, () => $createParagraphNode());
+  });
+};
+
+export const formatHeading = (
+  editor: LexicalEditor,
+  blockType: string,
+  headingSize: HeadingTagType
+) => {
+  if (blockType === headingSize) {
+    formatParagraph(editor);
+  }
+
+  if (blockType !== headingSize) {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createHeadingNode(headingSize));
+    });
+  }
+};
+
+export const formatBulletList = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== "bullet") {
+    editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatCheckList = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== "check") {
+    editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatNumberedList = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== "number") {
+    editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+  } else {
+    formatParagraph(editor);
+  }
+};
+
+export const formatQuote = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== "quote") {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createQuoteNode());
+    });
+  }
+};
+
+export const formatCode = (editor: LexicalEditor, blockType: string) => {
+  if (blockType !== "code") {
+    editor.update(() => {
+      let selection = $getSelection();
+      if (!selection) {
+        return;
+      }
+      if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+        $setBlocksType(selection, () => $createCodeNode());
+      } else {
+        const textContent = selection.getTextContent();
+        const codeNode = $createCodeNode();
+        selection.insertNodes([codeNode]);
+        selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.insertRawText(textContent);
+        }
+      }
+    });
+  }
+};
+
+export const clearFormatting = (editor: LexicalEditor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+      const anchor = selection.anchor;
+      const focus = selection.focus;
+      const nodes = selection.getNodes();
+      const extractedNodes = selection.extract();
+
+      if (anchor.key === focus.key && anchor.offset === focus.offset) {
+        return;
+      }
+
+      nodes.forEach((node, idx) => {
+        // We split the first and last node by the selection
+        // So that we don't format unselected text inside those nodes
+        if ($isTextNode(node)) {
+          // Use a separate variable to ensure TS does not lose the refinement
+          let textNode = node;
+          if (idx === 0 && anchor.offset !== 0) {
+            textNode = textNode.splitText(anchor.offset)[1] || textNode;
+          }
+          if (idx === nodes.length - 1) {
+            textNode = textNode.splitText(focus.offset)[0] || textNode;
+          }
+          /**
+           * If the selected text has one format applied
+           * selecting a portion of the text, could
+           * clear the format to the wrong portion of the text.
+           *
+           * The cleared text is based on the length of the selected text.
+           */
+          // We need this in case the selected text only has one format
+          const extractedTextNode = extractedNodes[0];
+          if (nodes.length === 1 && $isTextNode(extractedTextNode)) {
+            textNode = extractedTextNode;
+          }
+
+          if (textNode.__style !== "") {
+            textNode.setStyle("");
+          }
+          if (textNode.__format !== 0) {
+            textNode.setFormat(0);
+          }
+          const nearestBlockElement = $getNearestBlockElementAncestorOrThrow(textNode);
+          if (nearestBlockElement.__format !== 0) {
+            nearestBlockElement.setFormat("");
+          }
+          if (nearestBlockElement.__indent !== 0) {
+            nearestBlockElement.setIndent(0);
+          }
+          node = textNode;
+        } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+          node.replace($createParagraphNode(), true);
+        } else if ($isDecoratorBlockNode(node)) {
+          node.setFormat("");
+        }
+      });
+    }
+  });
+};

package/src/styles.css

@@ -1,11 +1,11 @@
-/*--------------------------------------------*
-  * Rich text editor
-  *--------------------------------------------*/
-
-.editor-list-ul li {
-  margin-bottom: 0.25rem;
-}
-
 .gc-editor-container {
   position: relative;
 }
+
+.gc-editor-max-length {
+  position: absolute;
+  bottom: 0;
+  right: 8px;
+  font-size: 0.8rem;
+  color: #999;
+}

package/src/tests/Editor.cy.tsx

@@ -7,7 +7,7 @@ describe("<RichTextEditor />", () => {
     // see: https://on.cypress.io/mounting-react
     cy.mount(
       <div className="form-builder">
-        <Editor content="" ariaLabel="AriaLabel" lang="en" />
+        <Editor content="" ariaLabel="AriaLabel" locale="en" />
       </div>
     );
 
@@ -77,8 +77,10 @@ describe("<RichTextEditor />", () => {
     // 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('[data-testid="gc-link-editor"] input').type(
+      "{selectAll}https://example.com{enter}{esc}"
+    );
     cy.get('[id^="editor-"] a').first().contains("will be a link");
+    cy.get('[id^="editor-"] a').first().should("have.attr", "href", "https://example.com");
   });
 });

package/src/transformers/index.ts

@@ -0,0 +1,18 @@
+import { TextMatchTransformer } from "@lexical/markdown";
+import { $createTextNode, $isLineBreakNode, LineBreakNode } from "lexical";
+
+export const LINE_BREAK_FIX: TextMatchTransformer = {
+  dependencies: [LineBreakNode],
+  export: (node) => {
+    if (!$isLineBreakNode(node)) return null;
+    return "  \n";
+  },
+  regExp: /\\$/,
+  importRegExp: /\\$/,
+  replace: (textNode) => {
+    if (!textNode?.getParent()) return;
+    textNode.replace($createTextNode());
+  },
+  trigger: "",
+  type: "text-match",
+};

package/src/ui/ContentEditable.css

@@ -1,25 +1,11 @@
 .gc-contenteditable {
   padding: 20px;
+  width: 100%;
+  background-color: #fff;
 
   &:focus {
     outline: 2px #303fc3 solid;
   }
-
-  p:first-child {
-    margin-top: 0;
-  }
-
-  p {
-    margin: 40px 0;
-  }
-
-  .editor-nested-listitem {
-    list-style-type: none;
-  }
-
-  .editor-list-ol {
-    padding-left: 20px;
-  }
 }
 
 .gc-contenteditable-placeholder {

package/src/ui/ContentEditable.tsx

@@ -24,13 +24,13 @@ export default function LexicalContentEditable({
 }: Props): JSX.Element {
   return (
     <ContentEditable
-      className={className ?? "gc-contenteditable"}
+      className={`${className ?? ""} gc-contenteditable`}
       aria-placeholder={placeholder}
       id={id}
       aria-label={ariaLabel}
       aria-describedby={ariaDescribedBy}
       placeholder={
-        <div className={placeholderClassName ?? "gc-contenteditable-placeholder"}>
+        <div className={placeholderClassName || "gc-contenteditable-placeholder"}>
           {placeholder}
         </div>
       }

package/src/ui/ToolTip.css

@@ -0,0 +1,35 @@
+.gc-tooltip-container {
+  position: relative;
+}
+
+.gc-tooltip {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  left: -3.5rem;
+  visibility: hidden;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  width: 9rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+  color: #ffffff;
+  white-space: wrap;
+  background-color: #1f2937;
+}
+
+.gc-tooltip:after {
+  content: " ";
+  position: absolute;
+  top: 100%; /* At the bottom of the tooltip */
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.gc-tooltip-target:hover + .gc-tooltip,
+.gc-tooltip-target:focus + .gc-tooltip {
+  visibility: visible;
+}

package/src/{ToolTip.tsx → ui/ToolTip.tsx}

@@ -1,24 +1,22 @@
 "use client";
 import React, { useId, Children } from "react";
+import "./ToolTip.css";
 
 export const ToolTip = ({ children, text }: { children: React.ReactElement; text: string }) => {
   const id = `tooltip-${useId()}`;
 
   return (
-    <span className="relative">
+    <span className="gc-tooltip-container">
       {Children.map(children, (child) => {
         return React.cloneElement(child, {
           // @ts-expect-error  -- TODO: fix this
           ...child.props,
           // @ts-expect-error  -- TODO: fix this
-          className: child.props.className + " peer",
+          className: child.props.className + " gc-tooltip-target",
           "aria-labelledby": id,
         });
       })}
-      <span
-        id={id}
-        className={`invisible absolute -left-14 -top-10 z-[1000] w-36 whitespace-nowrap rounded bg-gray-800 p-1 text-center text-sm text-white after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700 after:content-[''] peer-hover:visible peer-focus:visible`}
-      >
+      <span id={id} className="gc-tooltip">
         {text}
       </span>
     </span>

package/src/utils/url.ts

@@ -18,15 +18,13 @@ export function sanitizeUrl(url: string): string {
 
   if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) return url;
 
-  return "https://";
+  return url;
 }
 
-// Source: https://stackoverflow.com/a/8234912/2013580
-const urlRegExp = new RegExp(
-  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/
-);
-export function validateUrl(url: string): boolean {
-  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
-  // Maybe show a dialog where they user can type the URL before inserting it.
-  return url === "https://" || urlRegExp.test(url);
+/**
+ * A pattern that matches a valid URL.
+ */
+const urlRegExp = new RegExp(/^(https?:\/\/)?([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,}(\/[^\s]*)?$/);
+export function isValidUrl(url: string): boolean {
+  return urlRegExp.test(url);
 }

package/src/themes/BasicTheme.ts

@@ -1,69 +0,0 @@
-const basicTheme = {
-  ltr: "ltr",
-  rtl: "rtl",
-  placeholder: "editor-placeholder",
-  paragraph: "editor-paragraph",
-  quote: "editor-quote",
-  heading: {
-    h1: "editor-heading-h1",
-    h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5"
-  },
-  list: {
-    nested: {
-      listitem: "editor-nested-listitem"
-    },
-    ol: "editor-list-ol",
-    ul: "editor-list-ul",
-    listitem: "editor-listitem"
-  },
-  image: "editor-image",
-  link: "editor-link",
-  text: {
-    bold: "editor-text-bold",
-    italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code"
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable"
-  }
-};
-
-export default basicTheme;