feat(richtext-lexical): various gutter, error states & add/drag handl…

…e 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.
payloadcms · May 21, 2024 · 6c95287 · 6c95287
1 parent af7e12a
commit 6c95287
Show file tree

Hide file tree

Showing 22 changed files with 284 additions and 242 deletions.
diff --git a/packages/richtext-lexical/src/cell/index.tsx b/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,

diff --git a/packages/richtext-lexical/src/field/Field.tsx b/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(' ')

diff --git a/packages/richtext-lexical/src/field/features/toolbars/fixed/Toolbar/index.scss b/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;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/richtext-lexical/src/field/index.scss b/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;
-      }
-    }
-  }
-}
diff --git a/packages/richtext-lexical/src/field/index.tsx b/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,

diff --git a/packages/richtext-lexical/src/field/lexical/LexicalEditor.scss b/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 */

diff --git a/packages/richtext-lexical/src/field/lexical/config/client/sanitize.ts b/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,

diff --git a/packages/richtext-lexical/src/field/lexical/config/types.ts b/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

diff --git a/packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.scss b/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);
     }
   }
 }