refactor: added validation, fixed toolbar display when disabled, cleanup

Author: alex-struk

src/front-end/typescript/lib/components/form-field/plate-editor.tsx

@@ -23,6 +23,7 @@ export interface State {
   showHelp: boolean;
   validate: (value: string) => Validation<string>;
   child: Child;
+  isDirty: boolean;
 }
 
 export interface Child {
@@ -47,7 +48,8 @@ export const init: component_.base.Init<Params, State, Msg> = (params) => {
       errors: params.errors,
       showHelp: false,
       validate: params.validate || ((v) => ({ tag: "valid", value: v })),
-      child: params.child
+      child: params.child,
+      isDirty: false
     },
     []
   ];
@@ -57,14 +59,16 @@ export const update: component_.base.Update<State, Msg> = ({ state, msg }) => {
   switch (msg.tag) {
     case "child":
       switch (msg.value.tag) {
-        case "onChangeTextArea":
-          return [
-            state.set("child", {
+        case "onChangeTextArea": {
+          const newState = state
+            .set("child", {
               ...state.child,
               value: msg.value.value[0]
-            }),
-            []
-          ];
+            })
+            .set("isDirty", true);
+          // Trigger validation after content change when field is dirty
+          return [validate(newState), []];
+        }
       }
   }
 };
@@ -97,16 +101,37 @@ export function setValidate(
 ): Immutable<State> {
   state = state.set("validate", validate);
   if (runValidation) {
+    // Mark as dirty when running validation on existing content
+    state = state.set("isDirty", true);
     state = validateState(state);
   }
   return state;
 }
 
+function cleanPlateEditorValue(value: string): string {
+  // Remove zero-width spaces, regular whitespace, and newlines
+  // This handles the case where PlateJS serializes empty content as whitespace/special chars
+  return value
+    .replace(/\u200B|\u200C|\u200D|\uFEFF/g, "") // Remove zero-width spaces
+    .trim(); // Remove regular whitespace and newlines
+}
+
 export function validateState(state: Immutable<State>): Immutable<State> {
-  const result = state.validate(state.child.value);
+  // Only run validation if the field is dirty (user has made changes)
+  if (!state.isDirty) {
+    return state;
+  }
+
+  const rawValue = state.child.value;
+  const cleanedValue = cleanPlateEditorValue(rawValue);
+  const result = state.validate(cleanedValue);
   return state.set("errors", result.tag === "invalid" ? result.value : []);
 }
 
+export function validate(state: Immutable<State>): Immutable<State> {
+  return validateState(state);
+}
+
 export function isValid(state: Immutable<State>): boolean {
   return state.errors.length === 0;
 }
@@ -143,11 +168,11 @@ export const view: component_.base.View<ViewProps> = ({
     {
       readOnly: false
     },
-    [toolbarMode] 
+    [toolbarMode]
   );
 
   // Debounce ref for handling editor changes
-  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const updateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Initialize editor with markdown content on first load
   useEffect(() => {
@@ -263,7 +288,7 @@ export const view: component_.base.View<ViewProps> = ({
       <div
         className={`form-control tw-scoped ${hasErrors ? "is-invalid" : ""}`}
         style={{
-          border: "1px solid #cfd4da",
+          border: hasErrors ? "1px solid #dc3545" : "1px solid #cfd4da",
           borderRadius: "8px",
           padding: "12px",
           ...extraChildProps.style
@@ -275,8 +300,8 @@ export const view: component_.base.View<ViewProps> = ({
               editor={editor}
               onChange={disabled ? undefined : handleEditorChange}
               readOnly={disabled}>
-              <EditorContainer 
-                variant="demo" 
+              <EditorContainer
+                variant="demo"
                 className={cn(
                   "h-72",
                   disabled ? "overflow-hidden" : "overflow-y-auto"

src/front-end/typescript/lib/components/platejs/ui/fixed-toolbar.tsx

@@ -1,11 +1,19 @@
 "use client";
 
 import * as React from "react";
+import { useEditorReadOnly } from "platejs/react";
 import { cn } from "./utils";
 
 import { Toolbar } from "./toolbar";
 
 export function FixedToolbar(props: React.ComponentProps<typeof Toolbar>) {
+  const readOnly = useEditorReadOnly();
+
+  // Don't render the toolbar when in readOnly mode
+  if (readOnly) {
+    return null;
+  }
+
   return (
     <Toolbar
       {...props}

src/front-end/typescript/lib/pages/opportunity/team-with-us/lib/components/form.tsx

@@ -6,7 +6,7 @@ import * as LongText from "front-end/lib/components/form-field/long-text";
 import * as NumberField from "front-end/lib/components/form-field/number";
 import * as RadioGroup from "front-end/lib/components/form-field/radio-group";
 import * as PlateEditor from "front-end/lib/components/form-field/plate-editor";
-import * as AIEditor from "front-end/lib/components/platejs/ui/ai-chat-editor";
+
 import * as Select from "front-end/lib/components/form-field/select";
 import * as ShortText from "front-end/lib/components/form-field/short-text";
 import * as TabbedForm from "front-end/lib/components/tabbed-form";
@@ -49,29 +49,8 @@ import {
 } from "shared/lib/validation";
 import * as opportunityValidation from "shared/lib/validation/opportunity/team-with-us";
 import * as genericValidation from "shared/lib/validation/opportunity/utility";
+
 import Icon from "front-end/lib/views/icon";
-import { Plate, usePlateEditor } from "platejs/react";
-import { AIKit } from "front-end/lib/components/platejs/components/editor/plugins/ai-kit";
-import {
-  Editor,
-  EditorContainer
-} from "front-end/lib/components/platejs/ui/editor";
-import { FixedToolbarKit } from "front-end/lib/components/platejs/components/editor/plugins/fixed-toolbar-kit";
-import { MarkdownKit } from "front-end/lib/components/platejs/components/editor/plugins/markdown-kit";
-import { BaseBasicBlocksKit } from "front-end/lib/components/platejs/components/editor/plugins/basic-blocks-base-kit";
-import { BasicMarksKit } from "front-end/lib/components/platejs/components/editor/plugins/basic-marks-kit";
-import { CommentKit } from "front-end/lib/components/platejs/components/editor/plugins/comment-kit";
-import { ListKit } from "front-end/lib/components/platejs/components/editor/plugins/list-kit";
-import { BasicBlocksKit } from "front-end/lib/components/platejs/components/editor/plugins/basic-blocks-kit";
-import { MediaKit } from "front-end/lib/components/platejs/components/editor/plugins/media-kit";
-import { AutoformatKit } from "front-end/lib/components/platejs/components/editor/plugins/autoformat-kit";
-import { CursorOverlayKit } from "front-end/lib/components/platejs/components/editor/plugins/cursor-overlay-kit";
-import { DndKit } from "front-end/lib/components/platejs/components/editor/plugins/dnd-kit";
-import { ExitBreakKit } from "front-end/lib/components/platejs/components/editor/plugins/exit-break-kit";
-import { TrailingBlockPlugin } from "platejs";
-import { BlockPlaceholderKit } from "front-end/lib/components/platejs/components/editor/plugins/block-placeholder-kit";
-import { BlockMenuKit } from "front-end/lib/components/platejs/components/editor/plugins/block-menu-kit";
-import { EditorKit } from "front-end/lib/components/platejs/components/editor/editor-kit";
 
 type RemoteOk = "yes" | "no";
 
@@ -591,7 +570,7 @@ export function validate(state: Immutable<State>): Immutable<State> {
     .update("completionDate", (s) => FormField.validate(s))
     .update("maxBudget", (s) => FormField.validate(s))
     .update("resources", (s) => Resources.validate(s))
-    .update("description", (s) => PlateEditor.validateState(s))
+    .update("description", (s) => PlateEditor.validate(s))
     .update("resourceQuestions", (s) => ResourceQuestions.validate(s))
     .update("questionsWeight", (s) => FormField.validate(s))
     .update("challengeWeight", (s) => FormField.validate(s))
@@ -1522,68 +1501,9 @@ export const DescriptionView: component_.base.View<Props> = ({
   const startDate = DateField.getValueAsString(state.startDate);
   const completionDate = DateField.getValueAsString(state.completionDate);
 
-  // const editor = usePlateEditor({
-  //   plugins: [
-  //     ...AIKit,
-  //     ...BlockMenuKit,
-
-  //     // Elements
-  //     ...BasicBlocksKit,
-  //     // ...CodeBlockKit,
-  //     // ...TableKit,
-  //     // ...ToggleKit,
-  //     // ...TocKit,
-  //     ...MediaKit,
-  //     // ...CalloutKit,
-  //     // ...ColumnKit,
-  //     // ...MathKit,
-  //     // ...DateKit,
-  //     // ...LinkKit,
-  //     // ...MentionKit,
-
-  //     // Marks
-  //     ...BasicMarksKit,
-  //     // ...FontKit,
-  //     // Block Style
-  //     ...ListKit,
-  //     // ...AlignKit,
-  //     // ...LineHeightKit,
-
-  //     // Collaboration
-  //     // ...DiscussionKit,
-  //     ...CommentKit,
-  //     // ...SuggestionKit,
-  //     // Editing
-  //     // ...SlashKit,
-  //     ...AutoformatKit,
-  //     ...CursorOverlayKit,
-  //     ...DndKit,
-  //     // ...EmojiKit,
-  //     ...ExitBreakKit,
-  //     TrailingBlockPlugin,
-  //     // Parsers
-  //     // ...DocxKit,
-  //     ...MarkdownKit,
-  //     // UI
-  //     ...BlockPlaceholderKit,
-  //     ...FixedToolbarKit,
-  //     // ...FloatingToolbarKit,
-  //   ],
-  // });
-
-  const editor = usePlateEditor({
-    plugins: EditorKit,
-  });
-
   return (
     <Row>
       <Col xs="12">
-        {/* <Plate editor={editor}>
-      <EditorContainer variant="demo">
-        <Editor />
-      </EditorContainer>
-    </Plate> */}
-
         <PlateEditor.view
           required
           label="Description and Contract Details"