@gcforms/editor 0.0.1 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+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.1] - 2025-04-17
+
+### Changed
+
+- Only show contentLength/maxLength indicator when contentLength reaches 80% of maxLength
+
+## [1.0.0] - 2025-04-17
+
+### Changed
+
+- Refactored and moved wysiwyg editor to internal package
+- Updated to latest Lexical version
+- Replaced Link Editor with latest from Lexical examples
+- Moved Markdown transforms to Transformer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {
@@ -8,11 +8,11 @@
   },
   "packageManager": "yarn@4.6.0",
   "dependencies": {
-    "@lexical/react": "^0.28.0",
-    "lexical": "^0.28.0"
+    "@lexical/react": "^0.30.0",
+    "lexical": "^0.30.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   }
 }

package/src/Editor.tsx

@@ -1,11 +1,18 @@
 "use client";
 import React, { useId, useState } from "react";
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  TRANSFORMERS,
+} from "@lexical/markdown";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 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";
@@ -13,14 +20,14 @@ import TreeViewPlugin from "./plugins/TreeViewPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
 import { editorConfig } from "./config";
-import { $createParagraphNode, $getRoot } from "lexical";
-import {
-  $convertFromMarkdownString,
-  $convertToMarkdownString,
-  TRANSFORMERS,
-} from "@lexical/markdown";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { LINE_BREAK_FIX } from "./transformers";
+import { Language } from "./i18n";
+import { LocaleContext } from "./context/LocaleContext";
+
 import "./styles.css";
+import { ToolbarContext } from "./context/ToolbarContext";
+import ShortcutsPlugin from "./plugins/ShortcutsPlugin";
+import { MaxLengthPlugin } from "./plugins/MaxLengthPlugin";
 
 interface EditorProps {
   id?: string;
@@ -28,7 +35,10 @@ interface EditorProps {
   showTreeview?: boolean;
   ariaLabel?: string;
   ariaDescribedBy?: string;
-  lang?: string;
+  locale?: string;
+  contentLocale?: string;
+  className?: string;
+  maxLength?: number;
 
   onChange?(...args: unknown[]): unknown;
 }
@@ -40,7 +50,13 @@ export const Editor = ({
   ariaLabel = "AriaLabel",
   ariaDescribedBy = "AriaDescribedBy",
   onChange,
+  locale = "en",
+  contentLocale = "en",
+  className,
+  maxLength,
 }: EditorProps) => {
+  contentLocale = contentLocale || locale;
+
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
 
@@ -54,73 +70,69 @@ export const Editor = ({
   };
 
   return (
-    <LexicalComposer
-      initialConfig={{
-        ...editorConfig,
-        editorState: () => {
-          // @TODO: how to make this configurable
-          if (!content) {
-            const root = $getRoot();
-            const paragraphNode = $createParagraphNode();
-            root.append(paragraphNode);
-            return;
-          }
-          $convertFromMarkdownString(content, TRANSFORMERS);
-        },
-      }}
-    >
-      <div>
-        <ToolbarPlugin editorId={id || ""} />
-
-        <RichTextPlugin
-          contentEditable={
-            <div className="gc-editor-container" ref={onRef}>
-              <ContentEditable
-                placeholder={""}
-                id={editorId}
-                ariaLabel={ariaLabel && ariaLabel}
-                ariaDescribedBy={ariaDescribedBy && ariaDescribedBy}
-              />
-            </div>
-          }
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <HistoryPlugin />
-        {showTreeview && <TreeViewPlugin />}
-        <OnChangePlugin // @TODO: make the following configurable
-          onChange={(editorState) => {
-            editorState.read(() => {
-              // Read the contents of the EditorState here.
-              const markdown = $convertToMarkdownString(TRANSFORMERS);
-
-              // Add two spaces to previous line for linebreaks (this is not handled properly by $convertToMarkdownString)
-              const lines = markdown.split("\n");
-              lines.forEach((currentLine, i) => {
-                if (i > 0) {
-                  const previousLine = lines[i - 1];
-                  if (previousLine !== "" && currentLine !== "") {
-                    lines[i - 1] = previousLine.trim() + "  ";
-                  }
-                }
-              });
-              onChange && onChange(lines.join("\n"));
-            });
+    <LocaleContext initialLocale={locale as Language}>
+      <ToolbarContext>
+        <LexicalComposer
+          initialConfig={{
+            ...editorConfig,
+            editorState: () => {
+              $convertFromMarkdownString(content, [...TRANSFORMERS]);
+            },
           }}
-        />
-        <ListPlugin />
-        <LinkPlugin />
-        <TabControlPlugin />
-        <ListMaxIndentLevelPlugin maxDepth={5} />
-        {floatingAnchorElem && (
-          <>
-            <FloatingLinkEditorPlugin
-              anchorElem={floatingAnchorElem}
-              isLinkEditMode={isLinkEditMode}
-              setIsLinkEditMode={setIsLinkEditMode}
+        >
+          <div className="gc-editor-container">
+            <ToolbarPlugin editorId={editorId} setIsLinkEditMode={setIsLinkEditMode} />
+            <ShortcutsPlugin setIsLinkEditMode={setIsLinkEditMode} />
+            <RichTextPlugin
+              contentEditable={
+                <div
+                  className="gc-editor-container"
+                  ref={onRef}
+                  {...(contentLocale && { lang: contentLocale })}
+                >
+                  <ContentEditable
+                    className={className || ""}
+                    placeholder={""}
+                    id={editorId}
+                    ariaLabel={ariaLabel}
+                    ariaDescribedBy={ariaDescribedBy}
+                  />
+                </div>
+              }
+              ErrorBoundary={LexicalErrorBoundary}
             />
-          </>
-        )}
-      </div>
-    </LexicalComposer>
+            <HistoryPlugin />
+            {showTreeview && <TreeViewPlugin />}
+            <OnChangePlugin
+              onChange={(editorState) => {
+                editorState.read(() => {
+                  const markdown = $convertToMarkdownString([...TRANSFORMERS, LINE_BREAK_FIX]);
+                  onChange && onChange(markdown);
+                });
+              }}
+            />
+            <ListPlugin />
+            <LinkPlugin />
+            <TabControlPlugin />
+            <ListMaxIndentLevelPlugin maxDepth={5} />
+
+            {floatingAnchorElem && (
+              <>
+                <FloatingLinkEditorPlugin
+                  anchorElem={floatingAnchorElem}
+                  isLinkEditMode={isLinkEditMode}
+                  setIsLinkEditMode={setIsLinkEditMode}
+                />
+              </>
+            )}
+            {maxLength && (
+              <>
+                <MaxLengthPlugin maxLength={maxLength} />
+              </>
+            )}
+          </div>
+        </LexicalComposer>
+      </ToolbarContext>
+    </LocaleContext>
   );
 };

package/src/config.ts

@@ -1,12 +1,15 @@
 import { HeadingNode } from "@lexical/rich-text";
 import { LinkNode } from "@lexical/link";
 import { ListItemNode, ListNode } from "@lexical/list";
-import basicTheme from "./themes/BasicTheme";
 
 export const editorConfig = {
   namespace: "FormBuilder",
-  // The editor theme
-  theme: basicTheme,
+  theme: {
+    text: {
+      bold: "font-bold",
+      italic: "italic",
+    },
+  },
   // Handling of errors during update
   onError(error: Error) {
     throw error;

package/src/context/LocaleContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext } from "react";
+import translations, { Language } from "../i18n";
+
+interface LocaleContextProps {
+  locale: Language;
+}
+
+const Context = createContext<LocaleContextProps | undefined>(undefined);
+
+export const LocaleContext: React.FC<{
+  initialLocale: Language;
+  children: React.ReactNode;
+}> = ({ initialLocale, children }) => {
+  let locale = initialLocale;
+
+  if (!translations[initialLocale as Language]) {
+    // eslint-disable-next-line no-console
+    console.warn(`The locale "${initialLocale}" is not supported. Defaulting to "en".`);
+    locale = "en";
+  }
+
+  return <Context.Provider value={{ locale }}>{children}</Context.Provider>;
+};
+
+export const useLocale = (): LocaleContextProps => {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useLocale must be used within a LocaleProvider");
+  }
+  return context;
+};

package/src/context/ToolbarContext.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 type { JSX } from "react";
+
+import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+
+export const MIN_ALLOWED_FONT_SIZE = 8;
+export const MAX_ALLOWED_FONT_SIZE = 72;
+export const DEFAULT_FONT_SIZE = 15;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const rootTypeToRootName = {
+  root: "Root",
+  table: "Table",
+};
+
+export const blockTypeToBlockName = {
+  bullet: "Bulleted List",
+  check: "Check List",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  number: "Numbered List",
+  paragraph: "Normal",
+};
+
+const INITIAL_TOOLBAR_STATE = {
+  blockType: "paragraph" as keyof typeof blockTypeToBlockName,
+  canRedo: false,
+  canUndo: false,
+  isBold: false,
+  isItalic: false,
+  isLink: false,
+  rootType: "root" as keyof typeof rootTypeToRootName,
+};
+
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+
+// Utility type to get keys and infer value types
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+
+type ContextShape = {
+  toolbarState: ToolbarState;
+  updateToolbarState<Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>): void;
+};
+
+const Context = createContext<ContextShape | undefined>(undefined);
+
+export const ToolbarContext = ({ children }: { children: ReactNode }): JSX.Element => {
+  const [toolbarState, setToolbarState] = useState(INITIAL_TOOLBAR_STATE);
+
+  const updateToolbarState = useCallback(
+    <Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>) => {
+      setToolbarState((prev) => ({
+        ...prev,
+        [key]: value,
+      }));
+    },
+    []
+  );
+
+  const contextValue = useMemo(() => {
+    return {
+      toolbarState,
+      updateToolbarState,
+    };
+  }, [toolbarState, updateToolbarState]);
+
+  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
+};
+
+export const useToolbarState = () => {
+  const context = useContext(Context);
+
+  if (context === undefined) {
+    throw new Error("useToolbarState must be used within a ToolbarProvider");
+  }
+
+  return context;
+};

package/src/hooks/useTranslation.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import translations from "../i18n";
+import type { Translations } from "../i18n";
+import type { TranslationKey } from "../i18n";
+import { useLocale } from "../context/LocaleContext";
+
+export const useTranslation = () => {
+  const { locale } = useLocale();
+
+  const t = useCallback(
+    (key: TranslationKey): string => {
+      const langTranslations = translations[locale] as Translations;
+      return langTranslations[key] || key;
+    },
+    [locale]
+  );
+
+  return { t, locale };
+};

package/src/i18n/en.json

@@ -0,0 +1,22 @@
+{
+  "textFormatting": "Text formatting",
+  "tooltipFormatBold": "Bold",
+  "tooltipFormatBulletList": "Bulleted list",
+  "tooltipFormatH2": "Heading 2",
+  "tooltipFormatH3": "Heading 3",
+  "tooltipFormatItalic": "Italic",
+  "tooltipFormatNumberedList": "Numbered list",
+  "tooltipInsertLink": "Insert link",
+  "formatBold": "Format bold",
+  "formatBulletList": "Format bulleted list",
+  "formatH2": "Format Heading 2",
+  "formatH3": "Format Heading 3",
+  "formatItalic": "Format italic",
+  "formatNumberedList": "Format numbered list",
+  "insertLink": "Insert link",
+  "cancelEditLink": "Cancel edit link",
+  "saveLink": "Save link",
+  "editLink": "Edit link",
+  "removeLink": "Remove link",
+  "pressEnterToEditLink": "Press Enter to edit link"
+}

package/src/i18n/fr.json

@@ -0,0 +1,22 @@
+{
+  "textFormatting": "Mise en forme du texte",
+  "tooltipFormatBold": "En gras",
+  "tooltipFormatBulletList": "Liste à puces",
+  "tooltipFormatH2": "En-tête niveau 2",
+  "tooltipFormatH3": "En-tête niveau 3",
+  "tooltipFormatItalic": "Italique",
+  "tooltipFormatNumberedList": "Liste numérotée",
+  "tooltipInsertLink": "Insérer un lien",
+  "formatBold": "Mettre en gras",
+  "formatBulletList": "Mettre en liste à puces",
+  "formatH2": "Mettre en en-tête niveau 2",
+  "formatH3": "Mettre en en-tête niveau 3",
+  "formatItalic": "Mettre en italique",
+  "formatNumberedList": "Mettre en liste numérotée",
+  "insertLink": "Insérer un lien",
+  "cancelEditLink": "Annuler la modification du lien",
+  "saveLink": "Enregistrer le lien",
+  "editLink": "Modifier le lien",
+  "removeLink": "Supprimer le lien",
+  "pressEnterToEditLink": "Appuyez sur Entrée pour modifier le lien"
+}

package/src/i18n/index.tsx

@@ -0,0 +1,12 @@
+import en from "./en.json";
+import fr from "./fr.json";
+
+const translations = {
+  en,
+  fr,
+};
+
+export default translations;
+export type Language = keyof typeof translations;
+export type TranslationKey = keyof typeof translations.en;
+export type Translations = typeof translations.en;

package/src/icons/CancelIcon.tsx

@@ -0,0 +1,15 @@
+export const CancelIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    width="24"
+    className={className}
+    viewBox="0 0 24 24"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="m8.4 17 3.6-3.6 3.6 3.6 1.4-1.4-3.6-3.6L17 8.4 15.6 7 12 10.6 8.4 7 7 8.4l3.6 3.6L7 15.6Zm3.6 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z" />
+  </svg>
+);

package/src/icons/CheckIcon.tsx

@@ -0,0 +1,15 @@
+export const CheckIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    width="24px"
+    viewBox="0 -960 960 960"
+    className={className}
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+  </svg>
+);

package/src/icons/DeleteIcon.tsx

@@ -0,0 +1,15 @@
+export const DeleteIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    className={className}
+    viewBox="0 -960 960 960"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M261-120q-24.75 0-42.375-17.625T201-180v-570h-41v-60h188v-30h264v30h188v60h-41v570q0 24-18 42t-42 18H261Zm438-630H261v570h438v-570ZM367-266h60v-399h-60v399Zm166 0h60v-399h-60v399ZM261-750v570-570Z" />
+  </svg>
+);

package/src/icons/EditIcon.tsx

@@ -1,14 +1,15 @@
 export const EditIcon = ({ className, title }: { className?: string; title?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="21"
-    width="21"
+    height="24px"
+    width="24px"
+    viewBox="0 -960 960 960"
     className={className}
     focusable="false"
     aria-hidden={title ? false : true}
     role={title ? "img" : "presentation"}
   >
     {title && <title>{title}</title>}
-    <path d="M.582 20.418v-4.256l5.293-5.294L.991 5.957a1.654 1.654 0 0 1-.368-.546c-.082-.2-.123-.4-.123-.6 0-.2.04-.4.123-.6.082-.2.204-.382.368-.546l2.456-2.483c.163-.164.345-.286.546-.368.2-.082.4-.123.6-.123a1.678 1.678 0 0 1 1.173.491l4.911 4.911L16.052.718a.667.667 0 0 1 .273-.177c.091-.027.191-.041.3-.041.11 0 .21.014.3.04a.667.667 0 0 1 .273.178l3.084 3.083c.09.091.15.182.177.273.027.091.041.191.041.3 0 .11-.014.21-.04.3a.667.667 0 0 1-.178.273l-5.376 5.376 4.912 4.911c.164.164.286.35.368.56.082.209.123.413.123.613s-.04.4-.123.6c-.082.2-.204.383-.368.546l-2.456 2.429a1.653 1.653 0 0 1-.545.368c-.2.082-.4.123-.6.123-.2 0-.4-.041-.601-.123a1.653 1.653 0 0 1-.546-.368l-4.911-4.884-5.32 5.32H.581ZM7.048 9.695 9.504 7.24 7.512 5.248l-1.31 1.31L5.058 5.41l1.31-1.31L4.62 2.356 2.164 4.811l4.884 4.884Zm9.114 9.14 2.455-2.455-1.746-1.746-1.31 1.31-1.146-1.147 1.31-1.31-1.992-1.991-2.455 2.456 4.884 4.884Zm-13.943-.054h1.91L15.452 7.458l-1.91-1.91L2.22 16.87v1.91Zm14.38-12.47 1.91-1.91-1.91-1.91-1.91 1.91 1.91 1.91Z" />
+    <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360ZM360-360v-170l367-367q12-12 27-18t30-6q16 0 30.5 6t26.5 18l56 57q11 12 17 26.5t6 29.5q0 15-5.5 29.5T897-728L530-360H360Zm481-424-56-56 56 56ZM440-440h56l232-232-28-28-29-28-231 231v57Zm260-260-29-28 29 28 28 28-28-28Z" />
   </svg>
 );

package/src/icons/LinkIcon.tsx

@@ -4,12 +4,12 @@ export const LinkIcon = ({ className, title }: { className?: string; title?: str
     height="20"
     width="20"
     className={className}
-    viewBox="0 0 20 20"
+    viewBox="0 -960 960 960"
     focusable="false"
     aria-hidden={title ? false : true}
     role={title ? "img" : "presentation"}
   >
     {title && <title>{title}</title>}
-    <path d="M9 14H6q-1.667 0-2.833-1.167Q2 11.667 2 10q0-1.667 1.167-2.833Q4.333 6 6 6h3v1.5H6q-1.042 0-1.771.729Q3.5 8.958 3.5 10q0 1.042.729 1.771.729.729 1.771.729h3Zm-2-3.25v-1.5h6v1.5ZM11 14v-1.5h3q1.042 0 1.771-.729.729-.729.729-1.771 0-1.042-.729-1.771Q15.042 7.5 14 7.5h-3V6h3q1.667 0 2.833 1.167Q18 8.333 18 10q0 1.667-1.167 2.833Q15.667 14 14 14Z" />
+    <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
   </svg>
 );