@gcforms/editor 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.3] - 2025-05-13
+
+### Changed
+
+- Bumped Lexical version to 0.31.1
+
+## [1.0.2] - 2025-04-17
+
+### Changed
+
+- Add Draggable Block plugin
+
 ## [1.0.1] - 2025-04-17
 
 ### Changed

package/package.json

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

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,6 +56,7 @@ export const Editor = ({
   contentLocale = "en",
   className,
   maxLength,
+  enableDraggableBlocks = false,
 }: EditorProps) => {
   contentLocale = contentLocale || locale;
 
@@ -123,6 +126,7 @@ export const Editor = ({
                   isLinkEditMode={isLinkEditMode}
                   setIsLinkEditMode={setIsLinkEditMode}
                 />
+                {enableDraggableBlocks && <DraggableBlockPlugin anchorElem={floatingAnchorElem} />}
               </>
             )}
             {maxLength && (

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/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;
+}