@gcforms/editor 0.0.1

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@gcforms/editor",
+  "version": "0.0.1",
+  "author": "Canadian Digital Service",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@4.6.0",
+  "dependencies": {
+    "@lexical/react": "^0.28.0",
+    "lexical": "^0.28.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/src/Editor.tsx

@@ -0,0 +1,126 @@
+"use client";
+import React, { useId, useState } from "react";
+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 ContentEditable from "./ui/ContentEditable";
+import TabControlPlugin from "./plugins/TabControlPlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+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 "./styles.css";
+
+interface EditorProps {
+  id?: string;
+  content?: string;
+  showTreeview?: boolean;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  lang?: string;
+
+  onChange?(...args: unknown[]): unknown;
+}
+
+export const Editor = ({
+  id,
+  content = "",
+  showTreeview = false,
+  ariaLabel = "AriaLabel",
+  ariaDescribedBy = "AriaDescribedBy",
+  onChange,
+}: EditorProps) => {
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
+  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
+
+  const randomId = useId();
+  const editorId = id || `editor-${randomId}`;
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+
+  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"));
+            });
+          }}
+        />
+        <ListPlugin />
+        <LinkPlugin />
+        <TabControlPlugin />
+        <ListMaxIndentLevelPlugin maxDepth={5} />
+        {floatingAnchorElem && (
+          <>
+            <FloatingLinkEditorPlugin
+              anchorElem={floatingAnchorElem}
+              isLinkEditMode={isLinkEditMode}
+              setIsLinkEditMode={setIsLinkEditMode}
+            />
+          </>
+        )}
+      </div>
+    </LexicalComposer>
+  );
+};

package/src/ToolTip.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React, { useId, Children } from "react";
+
+export const ToolTip = ({ children, text }: { children: React.ReactElement; text: string }) => {
+  const id = `tooltip-${useId()}`;
+
+  return (
+    <span className="relative">
+      {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",
+          "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`}
+      >
+        {text}
+      </span>
+    </span>
+  );
+};

package/src/config.ts

@@ -0,0 +1,16 @@
+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,
+  // Handling of errors during update
+  onError(error: Error) {
+    throw error;
+  },
+  // Any custom nodes go here
+  nodes: [HeadingNode, LinkNode, ListItemNode, ListNode],
+};

package/src/hooks/useEditorFocus.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from "lexical";
+import { useEffect, useState } from "react";
+
+export const useEditorFocus = () => {
+  const [editor] = useLexicalComposerContext();
+  // Possibly use useRef for synchronous updates but no re-rendering effect
+  const [hasFocus, setFocus] = useState(false);
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        BLUR_COMMAND,
+        () => {
+          setFocus(false);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    [editor]
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          setFocus(true);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    [editor]
+  );
+
+  return hasFocus;
+};

package/src/icons/BoldIcon.tsx

@@ -0,0 +1,15 @@
+export const BoldIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path>
+  </svg>
+);

package/src/icons/BulletListIcon.tsx

@@ -0,0 +1,15 @@
+export const BulletListIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path>
+  </svg>
+);

package/src/icons/EditIcon.tsx

@@ -0,0 +1,14 @@
+export const EditIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="21"
+    width="21"
+    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" />
+  </svg>
+);

package/src/icons/H2Icon.tsx

@@ -0,0 +1,15 @@
+export const H2Icon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 0 1-2 2h-2v2h4v2H9v-4a2 2 0 0 1 2-2h2V9H9V7h4a2 2 0 0 1 2 2v2z"></path>
+  </svg>
+);

package/src/icons/H3Icon.tsx

@@ -0,0 +1,15 @@
+export const H3Icon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15a2 2 0 0 1-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4a2 2 0 0 1 2 2v1.5z"></path>
+  </svg>
+);

package/src/icons/ItalicIcon.tsx

@@ -0,0 +1,15 @@
+export const ItalicIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path>
+  </svg>
+);

package/src/icons/LinkIcon.tsx

@@ -0,0 +1,15 @@
+export const LinkIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    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" />
+  </svg>
+);

package/src/icons/NumberedListIcon.tsx

@@ -0,0 +1,15 @@
+export const NumberedListIcon = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="20"
+    width="20"
+    className={className}
+    viewBox="0 0 20 20"
+    focusable="false"
+    aria-hidden={title ? false : true}
+    role={title ? "img" : "presentation"}
+  >
+    {title && <title>{title}</title>}
+    <path d="M3 20v-1h2v-.5H4v-1h1V17H3v-1h3v4Zm5-1v-2h13v2Zm-5-5v-.9L4.8 11H3v-1h3v.9L4.2 13H6v1Zm5-1v-2h13v2ZM4 8V5H3V4h2v4Zm4-1V5h13v2Z" />
+  </svg>
+);

package/src/index.ts

@@ -0,0 +1 @@
+export { Editor } from "./Editor";

package/src/plugins/FloatingLinkEditorPlugin/index.css

@@ -0,0 +1,71 @@
+/*********************
+  * link editor   *
+  *********************/
+.gc-link-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  background-color: #fff;
+  border: 2px solid black;
+  border-radius: 8px;
+}
+
+.gc-link-editor button.active,
+.toolbar button.active {
+  background-color: #fff;
+}
+
+.gc-link-editor .link-input {
+  display: inline-block;
+  width: calc(100% - 24px);
+  box-sizing: border-box;
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: #eee;
+  font-size: 15px;
+  color: #050505;
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.gc-link-editor button.link-edit {
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.gc-link-editor .link-input span {
+  color: #216fdb;
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.gc-link-editor .font-size-wrapper,
+.gc-link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.gc-link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: #00000013;
+  border-radius: 4px;
+}