feat(richtext-lexical): various gutter, error states & add/drag handle improvements (#6448)

## Gutter

Adds gutter by default:

![CleanShot 2024-05-21 at 16 24
13](https://github.com/payloadcms/payload/assets/70709113/09c59b6f-bd4a-4e81-bfdd-731d1cbbe075)


![CleanShot 2024-05-21 at 16 20
23](https://github.com/payloadcms/payload/assets/70709113/94df3e8c-663e-4b08-90cb-a24b2a788ff6)

can be disabled with admin.hideGutter

## Error states
![CleanShot 2024-05-21 at 16 21
18](https://github.com/payloadcms/payload/assets/70709113/06754d8f-c674-4aaa-a4e5-47e284970776)

Finally, proper error states display. Cleaner, and previously fields
were shown as erroring even though they weren't. No more!

## Drag & Block handles
Improved performance, and cleaned up code. Drag handle positions are now
only calculated for one editor rather than all editors on the page. Add
block handle calculation now uses a better algorithm to minimize the
amount of nodes which are iterated.

Additionally, have you noticed how sometimes the add button jumps to the
next node while the drag button is still at the previous node?


https://github.com/payloadcms/payload/assets/70709113/8dff3081-1de0-4902-8229-62f178f23549

No more! Now they behave the same. Feels a lot cleaner now.

Author: AlessioGr

packages/richtext-lexical/src/cell/index.tsx

@@ -10,17 +10,18 @@ import React, { useEffect, useState } from 'react'
 
 import type { FeatureProviderClient } from '../field/features/types.js'
 import type { SanitizedClientEditorConfig } from '../field/lexical/config/types.js'
-import type { GeneratedFeatureProviderComponent } from '../types.js'
+import type { GeneratedFeatureProviderComponent, LexicalFieldAdminProps } from '../types.js'
 
 import { defaultEditorLexicalConfig } from '../field/lexical/config/client/default.js'
 import { loadClientFeatures } from '../field/lexical/config/client/loader.js'
 import { sanitizeClientEditorConfig } from '../field/lexical/config/client/sanitize.js'
 import { getEnabledNodes } from '../field/lexical/nodes/index.js'
 
 export const RichTextCell: React.FC<{
+  admin?: LexicalFieldAdminProps
   lexicalEditorConfig: LexicalEditorConfig
 }> = (props) => {
-  const { lexicalEditorConfig } = props
+  const { admin, lexicalEditorConfig } = props
 
   const [preview, setPreview] = React.useState('Loading...')
   const { schemaPath } = useFieldProps()
@@ -81,11 +82,13 @@ export const RichTextCell: React.FC<{
           sanitizeClientEditorConfig(
             lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,
             resolvedClientFeatures,
+            admin,
           ),
         )
       }
     }
   }, [
+    admin,
     hasLoadedFeatures,
     clientFunctions,
     schemaPath,

packages/richtext-lexical/src/field/Field.tsx

@@ -71,6 +71,7 @@ const _RichText: React.FC<
     className,
     showError && 'error',
     readOnly && `${baseClass}--read-only`,
+    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,
   ]
     .filter(Boolean)
     .join(' ')

packages/richtext-lexical/src/field/features/toolbars/fixed/Toolbar/index.scss

@@ -85,14 +85,28 @@ html[data-theme='dark'] {
   }
 
   + .editor-container {
-    > .editor-scroller > .editor > .ContentEditable__root {
-      padding-top: calc(var(--base) * 1.25);
+    > .editor-scroller > .editor {
+      > .ContentEditable__root {
+        padding-top: calc(var(--base) * 1.25);
+      }
     }
 
     > .editor-placeholder {
       top: calc(var(--base) * 1.25);
     }
   }
+}
 
 
+.rich-text-lexical--show-gutter {
+  .fixed-toolbar {
+    + .editor-container {
+      > .editor-scroller > .editor {
+        > .ContentEditable__root::before {
+          top: calc(var(--base) * 1.25)!important;
+          height: calc(100% - calc(var(--base) * 1.25) - 8px)!important;
+        }
+      }
+    }
+  }
 }

packages/richtext-lexical/src/field/index.scss

@@ -23,22 +23,3 @@
   }
 }
 
-html[data-theme='light'] {
-  .rich-text-lexical {
-    &.error {
-      .editor-container {
-        @include lightInputError;
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .rich-text-lexical {
-    &.error {
-      .editor-container {
-        @include darkInputError;
-      }
-    }
-  }
-}

packages/richtext-lexical/src/field/index.tsx

@@ -7,7 +7,7 @@ import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'
 import React, { Suspense, lazy, useEffect, useState } from 'react'
 
-import type { GeneratedFeatureProviderComponent } from '../types.js'
+import type { GeneratedFeatureProviderComponent, LexicalFieldAdminProps } from '../types.js'
 import type { FeatureProviderClient } from './features/types.js'
 import type { SanitizedClientEditorConfig } from './lexical/config/types.js'
 
@@ -21,12 +21,13 @@ const RichTextEditor = lazy(() =>
 
 export const RichTextField: React.FC<
   FormFieldBase & {
+    admin?: LexicalFieldAdminProps
     lexicalEditorConfig: LexicalEditorConfig
     name: string
     richTextComponentMap: Map<string, React.ReactNode>
   }
 > = (props) => {
-  const { lexicalEditorConfig, richTextComponentMap } = props
+  const { admin, lexicalEditorConfig, richTextComponentMap } = props
   const { schemaPath } = useFieldProps()
   const clientFunctions = useClientFunctions()
   const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)
@@ -82,11 +83,13 @@ export const RichTextField: React.FC<
           sanitizeClientEditorConfig(
             lexicalEditorConfig ? lexicalEditorConfig : defaultEditorLexicalConfig,
             resolvedClientFeatures,
+            admin,
           ),
         )
       }
     }
   }, [
+    admin,
     hasLoadedFeatures,
     clientFunctions,
     schemaPath,

packages/richtext-lexical/src/field/lexical/LexicalEditor.scss

@@ -22,10 +22,19 @@
     }
   }
 
+  &--show-gutter  {
+    > .rich-text-lexical__wrap > .editor-container > .editor-placeholder {
+      left: 3rem;
+    }
+  }
+
+  &:not(&--show-gutter) > .rich-text-lexical__wrap > .editor-container > .editor-placeholder {
+    left: 0;
+  }
+
   .editor-placeholder {
     position: absolute;
     top: 8px;
-    left: 0;
     font-size: 15px;
     color: var(--theme-elevation-500);
     /* Prevent text selection */

packages/richtext-lexical/src/field/lexical/config/client/sanitize.ts

@@ -2,6 +2,7 @@
 
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
 
+import type { LexicalFieldAdminProps } from '../../../../types.js'
 import type { ResolvedClientFeatureMap, SanitizedClientFeatures } from '../../../features/types.js'
 import type { SanitizedClientEditorConfig } from '../types.js'
 
@@ -205,8 +206,10 @@ export const sanitizeClientFeatures = (
 export function sanitizeClientEditorConfig(
   lexical: LexicalEditorConfig,
   resolvedClientFeatureMap: ResolvedClientFeatureMap,
+  admin?: LexicalFieldAdminProps,
 ): SanitizedClientEditorConfig {
   return {
+    admin,
     features: sanitizeClientFeatures(resolvedClientFeatureMap),
     lexical,
     resolvedFeatureMap: resolvedClientFeatureMap,

packages/richtext-lexical/src/field/lexical/config/types.ts

@@ -1,5 +1,6 @@
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
 
+import type { LexicalFieldAdminProps } from '../../../types.js'
 import type {
   FeatureProviderClient,
   FeatureProviderServer,
@@ -26,6 +27,7 @@ export type ClientEditorConfig = {
 }
 
 export type SanitizedClientEditorConfig = {
+  admin?: LexicalFieldAdminProps
   features: SanitizedClientFeatures
   lexical: LexicalEditorConfig
   resolvedFeatureMap: ResolvedClientFeatureMap

packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.scss

@@ -10,7 +10,7 @@
   will-change: transform;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background-color: var(--theme-elevation-100);
     .icon {
       opacity: 1;
     }
@@ -25,7 +25,7 @@
 
   html[data-theme='dark'] & {
     .icon {
-      filter: invert(1);
+      background-image: url(../../../ui/icons/Add/light.svg);
     }
   }
 }