@gcforms/editor 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -5,7 +5,13 @@ 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.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.1",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {

package/src/Editor.tsx

@@ -59,7 +59,6 @@ export const Editor = ({
 
   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 +115,7 @@ export const Editor = ({
             <LinkPlugin />
             <TabControlPlugin />
             <ListMaxIndentLevelPlugin maxDepth={5} />
-            {maxLength && (
-              <MaxLengthPlugin maxLength={maxLength} setContentLength={setContentLength} />
-            )}
+
             {floatingAnchorElem && (
               <>
                 <FloatingLinkEditorPlugin
@@ -129,13 +126,9 @@ export const Editor = ({
               </>
             )}
             {maxLength && (
-              <div className="gc-editor-max-length">
-                {maxLength && (
-                  <>
-                    {contentLength}/{maxLength}
-                  </>
-                )}
-              </div>
+              <>
+                <MaxLengthPlugin maxLength={maxLength} />
+              </>
             )}
           </div>
         </LexicalComposer>

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