@gcforms/editor 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,7 +5,19 @@ 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.0] - 2025-04-07
+## [1.0.2] - 2025-04-17
+
+### Changed
+
+- Add Draggable Block plugin
+
+## [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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcforms/editor",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {

package/src/Editor.tsx

@@ -28,6 +28,7 @@ import "./styles.css";
 import { ToolbarContext } from "./context/ToolbarContext";
 import ShortcutsPlugin from "./plugins/ShortcutsPlugin";
 import { MaxLengthPlugin } from "./plugins/MaxLengthPlugin";
+import DraggableBlockPlugin from "./plugins/DraggableBlockPlugin";
 
 interface EditorProps {
   id?: string;
@@ -39,6 +40,7 @@ interface EditorProps {
   contentLocale?: string;
   className?: string;
   maxLength?: number;
+  enableDraggableBlocks?: boolean;
 
   onChange?(...args: unknown[]): unknown;
 }
@@ -54,12 +56,12 @@ export const Editor = ({
   contentLocale = "en",
   className,
   maxLength,
+  enableDraggableBlocks = false,
 }: EditorProps) => {
   contentLocale = contentLocale || locale;
 
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
   const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
-  const [contentLength, setContentLength] = useState<number>(0);
 
   const randomId = useId();
   const editorId = id || `editor-${randomId}`;
@@ -116,9 +118,7 @@ export const Editor = ({
             <LinkPlugin />
             <TabControlPlugin />
             <ListMaxIndentLevelPlugin maxDepth={5} />
-            {maxLength && (
-              <MaxLengthPlugin maxLength={maxLength} setContentLength={setContentLength} />
-            )}
+
             {floatingAnchorElem && (
               <>
                 <FloatingLinkEditorPlugin
@@ -126,16 +126,13 @@ export const Editor = ({
                   isLinkEditMode={isLinkEditMode}
                   setIsLinkEditMode={setIsLinkEditMode}
                 />
+                {enableDraggableBlocks && <DraggableBlockPlugin anchorElem={floatingAnchorElem} />}
               </>
             )}
             {maxLength && (
-              <div className="gc-editor-max-length">
-                {maxLength && (
-                  <>
-                    {contentLength}/{maxLength}
-                  </>
-                )}
-              </div>
+              <>
+                <MaxLengthPlugin maxLength={maxLength} />
+              </>
             )}
           </div>
         </LexicalComposer>

package/src/icons/DraggableIcon.tsx

@@ -0,0 +1,15 @@
+export const DraggableIcon = ({ 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="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z" />
+  </svg>
+);

package/src/icons/PlusIcon.tsx

@@ -0,0 +1,15 @@
+export const PlusIcon = ({ 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="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
+  </svg>
+);

package/src/plugins/DraggableBlockPlugin/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 "./styles.css";
+
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { DraggableBlockPlugin_EXPERIMENTAL } from "@lexical/react/LexicalDraggableBlockPlugin";
+import { $createParagraphNode, $getNearestNodeFromDOMNode } from "lexical";
+import { useRef, useState } from "react";
+import { PlusIcon } from "../../icons/PlusIcon";
+import { DraggableIcon } from "../../icons/DraggableIcon";
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = "draggable-block-menu";
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const targetLineRef = useRef<HTMLDivElement>(null);
+  const [draggableElement, setDraggableElement] = useState<HTMLElement | null>(null);
+
+  function insertBlock(e: React.MouseEvent) {
+    if (!draggableElement || !editor) {
+      return;
+    }
+
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(draggableElement);
+      if (!node) {
+        return;
+      }
+
+      const pNode = $createParagraphNode();
+      if (e.altKey || e.ctrlKey) {
+        node.insertBefore(pNode);
+      } else {
+        node.insertAfter(pNode);
+      }
+      pNode.select();
+    });
+  }
+
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef as React.RefObject<HTMLElement>}
+      targetLineRef={targetLineRef as React.RefObject<HTMLElement>}
+      menuComponent={
+        <div ref={menuRef} className="draggable-block-menu">
+          <button title="Click to add below" className="" onClick={insertBlock}>
+            <PlusIcon />
+          </button>
+          <DraggableIcon />
+        </div>
+      }
+      targetLineComponent={<div ref={targetLineRef} className="draggable-block-target-line" />}
+      isOnMenu={isOnMenu}
+      onElementChanged={setDraggableElement}
+    />
+  );
+}

package/src/plugins/DraggableBlockPlugin/styles.css

@@ -0,0 +1,29 @@
+.draggable-block-menu {
+  border-radius: 4px;
+  padding: 2px 0px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: -30px;
+  top: 0;
+  will-change: transform;
+  display: flex;
+}
+.draggable-block-menu:active {
+  cursor: grabbing;
+}
+
+.draggable-block-menu .icon:hover {
+  background-color: #efefef;
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+}

package/src/plugins/MaxLengthPlugin/index.tsx

@@ -10,16 +10,33 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $trimTextContentFromAnchor } from "@lexical/selection";
 import { $restoreEditorState } from "@lexical/utils";
 import { $getSelection, $isRangeSelection, EditorState, RootNode } from "lexical";
-import { useEffect } from "react";
+import { JSX, useEffect, useState } from "react";
+import "./styles.css";
 
-export function MaxLengthPlugin({
+const MaxLengthIndicator = ({
   maxLength,
-  setContentLength,
+  contentLength,
 }: {
-  maxLength: number;
-  setContentLength: (length: number) => void;
-}): null {
+  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;
@@ -52,5 +69,5 @@ export function MaxLengthPlugin({
     });
   }, [editor, maxLength, setContentLength]);
 
-  return null;
+  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;
+}

package/src/plugins/TreeViewPlugin/index.tsx

@@ -11,18 +11,21 @@ import { TreeView } from "@lexical/react/LexicalTreeView";
 import * as React from "react";
 
 import type { JSX } from "react";
+import "./styles.css";
 
 export default function TreeViewPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext();
   return (
-    <TreeView
-      viewClassName="tree-view-output"
-      timeTravelPanelClassName="debug-timetravel-panel"
-      timeTravelButtonClassName="debug-timetravel-button"
-      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
-      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
-      treeTypeButtonClassName=""
-      editor={editor}
-    />
+    <div className="gc-editor-treeview">
+      <TreeView
+        viewClassName="tree-view-output"
+        timeTravelPanelClassName="debug-timetravel-panel"
+        timeTravelButtonClassName="debug-timetravel-button"
+        timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+        timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+        treeTypeButtonClassName=""
+        editor={editor}
+      />
+    </div>
   );
 }

package/src/plugins/TreeViewPlugin/styles.css

@@ -0,0 +1,8 @@
+.gc-editor-treeview {
+  padding: 10px;
+  color: white;
+  font-size: 14px;
+  font-family: "Inter", sans-serif;
+  background-color: black;
+  outline: 1px solid black;
+}

package/src/styles.css

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