chore: restructure and simplify richtext-lexical package (#6856)

Hoists field.lexical and field.features up to the src root, moves some
utilities to src/utilities

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

@@ -7,14 +7,14 @@ import { useClientFunctions, useTableCell } from '@payloadcms/ui'
 import { $getRoot } from 'lexical'
 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 { FeatureProviderClient } from '../features/types.js'
+import type { SanitizedClientEditorConfig } from '../lexical/config/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'
+import { defaultEditorLexicalConfig } from '../lexical/config/client/default.js'
+import { loadClientFeatures } from '../lexical/config/client/loader.js'
+import { sanitizeClientEditorConfig } from '../lexical/config/client/sanitize.js'
+import { getEnabledNodes } from '../lexical/nodes/index.js'
 
 export const RichTextCell: React.FC<
   CellComponentProps & {

packages/richtext-lexical/src/exports/client/index.ts

@@ -2,72 +2,72 @@
 'use client'
 
 export { RichTextCell } from '../../cell/index.js'
-export { AlignFeatureClientComponent } from '../../field/features/align/feature.client.js'
-export { BlockquoteFeatureClientComponent } from '../../field/features/blockquote/feature.client.js'
-export { BlocksFeatureClientComponent } from '../../field/features/blocks/feature.client.js'
-export { createClientComponent } from '../../field/features/createClientComponent.js'
-export { TestRecorderFeatureClientComponent } from '../../field/features/debug/testRecorder/feature.client.js'
-export { TreeViewFeatureClientComponent } from '../../field/features/debug/treeView/feature.client.js'
-export { BoldFeatureClientComponent } from '../../field/features/format/bold/feature.client.js'
-export { InlineCodeFeatureClientComponent } from '../../field/features/format/inlineCode/feature.client.js'
-export { ItalicFeatureClientComponent } from '../../field/features/format/italic/feature.client.js'
-export { toolbarFormatGroupWithItems } from '../../field/features/format/shared/toolbarFormatGroup.js'
-export { StrikethroughFeatureClientComponent } from '../../field/features/format/strikethrough/feature.client.js'
-export { SubscriptFeatureClientComponent } from '../../field/features/format/subscript/feature.client.js'
-export { SuperscriptFeatureClientComponent } from '../../field/features/format/superscript/feature.client.js'
-export { UnderlineFeatureClientComponent } from '../../field/features/format/underline/feature.client.js'
-export { HeadingFeatureClientComponent } from '../../field/features/heading/feature.client.js'
-export { HorizontalRuleFeatureClientComponent } from '../../field/features/horizontalRule/feature.client.js'
-export { IndentFeatureClientComponent } from '../../field/features/indent/feature.client.js'
-export { LinkFeatureClientComponent } from '../../field/features/link/feature.client.js'
-export { ChecklistFeatureClientComponent } from '../../field/features/lists/checklist/feature.client.js'
-export { OrderedListFeatureClientComponent } from '../../field/features/lists/orderedList/feature.client.js'
-export { UnorderedListFeatureClientComponent } from '../../field/features/lists/unorderedList/feature.client.js'
-export { LexicalPluginToLexicalFeatureClientComponent } from '../../field/features/migrations/lexicalPluginToLexical/feature.client.js'
-export { SlateToLexicalFeatureClientComponent } from '../../field/features/migrations/slateToLexical/feature.client.js'
-export { ParagraphFeatureClientComponent } from '../../field/features/paragraph/feature.client.js'
+export { AlignFeatureClientComponent } from '../../features/align/feature.client.js'
+export { BlockquoteFeatureClientComponent } from '../../features/blockquote/feature.client.js'
+export { BlocksFeatureClientComponent } from '../../features/blocks/feature.client.js'
+export { createClientComponent } from '../../features/createClientComponent.js'
+export { TestRecorderFeatureClientComponent } from '../../features/debug/testRecorder/feature.client.js'
+export { TreeViewFeatureClientComponent } from '../../features/debug/treeView/feature.client.js'
+export { BoldFeatureClientComponent } from '../../features/format/bold/feature.client.js'
+export { InlineCodeFeatureClientComponent } from '../../features/format/inlineCode/feature.client.js'
+export { ItalicFeatureClientComponent } from '../../features/format/italic/feature.client.js'
+export { toolbarFormatGroupWithItems } from '../../features/format/shared/toolbarFormatGroup.js'
+export { StrikethroughFeatureClientComponent } from '../../features/format/strikethrough/feature.client.js'
+export { SubscriptFeatureClientComponent } from '../../features/format/subscript/feature.client.js'
+export { SuperscriptFeatureClientComponent } from '../../features/format/superscript/feature.client.js'
+export { UnderlineFeatureClientComponent } from '../../features/format/underline/feature.client.js'
+export { HeadingFeatureClientComponent } from '../../features/heading/feature.client.js'
+export { HorizontalRuleFeatureClientComponent } from '../../features/horizontalRule/feature.client.js'
+export { IndentFeatureClientComponent } from '../../features/indent/feature.client.js'
+export { LinkFeatureClientComponent } from '../../features/link/feature.client.js'
+export { ChecklistFeatureClientComponent } from '../../features/lists/checklist/feature.client.js'
+export { OrderedListFeatureClientComponent } from '../../features/lists/orderedList/feature.client.js'
+export { UnorderedListFeatureClientComponent } from '../../features/lists/unorderedList/feature.client.js'
+export { LexicalPluginToLexicalFeatureClientComponent } from '../../features/migrations/lexicalPluginToLexical/feature.client.js'
+export { SlateToLexicalFeatureClientComponent } from '../../features/migrations/slateToLexical/feature.client.js'
+export { ParagraphFeatureClientComponent } from '../../features/paragraph/feature.client.js'
 
-export { RelationshipFeatureClientComponent } from '../../field/features/relationship/feature.client.js'
+export { RelationshipFeatureClientComponent } from '../../features/relationship/feature.client.js'
 
-export { toolbarAddDropdownGroupWithItems } from '../../field/features/shared/toolbar/addDropdownGroup.js'
-export { toolbarFeatureButtonsGroupWithItems } from '../../field/features/shared/toolbar/featureButtonsGroup.js'
-export { toolbarTextDropdownGroupWithItems } from '../../field/features/shared/toolbar/textDropdownGroup.js'
-export { FixedToolbarFeatureClientComponent } from '../../field/features/toolbars/fixed/feature.client.js'
-export { InlineToolbarFeatureClientComponent } from '../../field/features/toolbars/inline/feature.client.js'
-export { ToolbarButton } from '../../field/features/toolbars/shared/ToolbarButton/index.js'
+export { toolbarAddDropdownGroupWithItems } from '../../features/shared/toolbar/addDropdownGroup.js'
+export { toolbarFeatureButtonsGroupWithItems } from '../../features/shared/toolbar/featureButtonsGroup.js'
+export { toolbarTextDropdownGroupWithItems } from '../../features/shared/toolbar/textDropdownGroup.js'
+export { FixedToolbarFeatureClientComponent } from '../../features/toolbars/fixed/feature.client.js'
+export { InlineToolbarFeatureClientComponent } from '../../features/toolbars/inline/feature.client.js'
+export { ToolbarButton } from '../../features/toolbars/shared/ToolbarButton/index.js'
 
-export { ToolbarDropdown } from '../../field/features/toolbars/shared/ToolbarDropdown/index.js'
-export { UploadFeatureClientComponent } from '../../field/features/upload/feature.client.js'
+export { ToolbarDropdown } from '../../features/toolbars/shared/ToolbarDropdown/index.js'
+export { UploadFeatureClientComponent } from '../../features/upload/feature.client.js'
 
 export { RichTextField } from '../../field/index.js'
 export {
   type EditorConfigContextType,
   EditorConfigProvider,
   useEditorConfigContext,
-} from '../../field/lexical/config/client/EditorConfigProvider.js'
-export { defaultEditorLexicalConfig } from '../../field/lexical/config/client/default.js'
+} from '../../lexical/config/client/EditorConfigProvider.js'
+export { defaultEditorLexicalConfig } from '../../lexical/config/client/default.js'
 
 export {
   sanitizeClientEditorConfig,
   sanitizeClientFeatures,
-} from '../../field/lexical/config/client/sanitize.js'
-export { CAN_USE_DOM } from '../../field/lexical/utils/canUseDOM.js'
-export { cloneDeep } from '../../field/lexical/utils/cloneDeep.js'
-export { getDOMRangeRect } from '../../field/lexical/utils/getDOMRangeRect.js'
-export { getSelectedNode } from '../../field/lexical/utils/getSelectedNode.js'
-export { isHTMLElement } from '../../field/lexical/utils/guard.js'
-export { invariant } from '../../field/lexical/utils/invariant.js'
-export { joinClasses } from '../../field/lexical/utils/joinClasses.js'
+} from '../../lexical/config/client/sanitize.js'
+export { CAN_USE_DOM } from '../../lexical/utils/canUseDOM.js'
+export { cloneDeep } from '../../lexical/utils/cloneDeep.js'
+export { getDOMRangeRect } from '../../lexical/utils/getDOMRangeRect.js'
+export { getSelectedNode } from '../../lexical/utils/getSelectedNode.js'
+export { isHTMLElement } from '../../lexical/utils/guard.js'
+export { invariant } from '../../lexical/utils/invariant.js'
+export { joinClasses } from '../../lexical/utils/joinClasses.js'
 
-export { createBlockNode } from '../../field/lexical/utils/markdown/createBlockNode.js'
-export { Point, isPoint } from '../../field/lexical/utils/point.js'
-export { Rect } from '../../field/lexical/utils/rect.js'
-export { setFloatingElemPosition } from '../../field/lexical/utils/setFloatingElemPosition.js'
-export { setFloatingElemPositionForLinkEditor } from '../../field/lexical/utils/setFloatingElemPositionForLinkEditor.js'
+export { createBlockNode } from '../../lexical/utils/markdown/createBlockNode.js'
+export { Point, isPoint } from '../../lexical/utils/point.js'
+export { Rect } from '../../lexical/utils/rect.js'
+export { setFloatingElemPosition } from '../../lexical/utils/setFloatingElemPosition.js'
+export { setFloatingElemPositionForLinkEditor } from '../../lexical/utils/setFloatingElemPositionForLinkEditor.js'
 
 export {
   addSwipeDownListener,
   addSwipeLeftListener,
   addSwipeRightListener,
   addSwipeUpListener,
-} from '../../field/lexical/utils/swipe.js'
+} from '../../lexical/utils/swipe.js'

packages/richtext-lexical/src/features/align/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { AlignFeatureClientComponent } from '../../../exports/client/index.js'
+import { AlignFeatureClientComponent } from '../../exports/client/index.js'
 import { i18n } from './i18n.js'
 
 export const AlignFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {

packages/richtext-lexical/src/features/blockquote/feature.server.ts

@@ -3,7 +3,7 @@ import { QuoteNode } from '@lexical/rich-text'
 import type { FeatureProviderProviderServer } from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { BlockquoteFeatureClientComponent } from '../../../exports/client/index.js'
+import { BlockquoteFeatureClientComponent } from '../../exports/client/index.js'
 import { convertLexicalNodesToHTML } from '../converters/html/converter/index.js'
 import { createNode } from '../typeUtilities.js'
 import { i18n } from './i18n.js'

packages/richtext-lexical/src/features/blocks/component/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .ContentEditable__root > div:has(.lexical-block) {
   // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.

packages/richtext-lexical/src/features/blocks/feature.server.ts

@@ -7,7 +7,7 @@ import type { FeatureProviderProviderServer } from '../types.js'
 import type { BlocksFeatureClientProps } from './feature.client.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { BlocksFeatureClientComponent } from '../../../exports/client/index.js'
+import { BlocksFeatureClientComponent } from '../../exports/client/index.js'
 import { createNode } from '../typeUtilities.js'
 import { blockPopulationPromiseHOC } from './graphQLPopulationPromise.js'
 import { i18n } from './i18n.js'

packages/richtext-lexical/src/features/blocks/graphQLPopulationPromise.ts

@@ -2,7 +2,7 @@ import type { PopulationPromise } from '../types.js'
 import type { BlocksFeatureProps } from './feature.server.js'
 import type { SerializedBlockNode } from './nodes/BlocksNode.js'
 
-import { recursivelyPopulateFieldsForGraphQL } from '../../../populateGraphQL/recursivelyPopulateFieldsForGraphQL.js'
+import { recursivelyPopulateFieldsForGraphQL } from '../../populateGraphQL/recursivelyPopulateFieldsForGraphQL.js'
 
 export const blockPopulationPromiseHOC = (
   props: BlocksFeatureProps,

packages/richtext-lexical/src/features/converters/html/field/index.ts

@@ -1,8 +1,8 @@
 import type { SerializedEditorState } from 'lexical'
 import type { Field, FieldAffectingData, RichTextField } from 'payload'
 
-import type { AdapterProps, LexicalRichTextAdapter } from '../../../../../types.js'
 import type { SanitizedServerEditorConfig } from '../../../../lexical/config/types.js'
+import type { AdapterProps, LexicalRichTextAdapter } from '../../../../types.js'
 import type { HTMLConverter } from '../converter/types.js'
 import type { HTMLConverterFeatureProps } from '../feature.server.js'
 

packages/richtext-lexical/src/features/createClientComponent.tsx

@@ -2,7 +2,7 @@
 
 import type { FeatureProviderProviderClient, ServerFeature } from './types.js'
 
-import { useLexicalFeature } from '../../useLexicalFeature.js'
+import { useLexicalFeature } from '../utilities/useLexicalFeature.js'
 
 /**
  * Utility function to create a client component for the client feature

packages/richtext-lexical/src/features/debug/testRecorder/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { TestRecorderFeatureClientComponent } from '../../../../exports/client/index.js'
+import { TestRecorderFeatureClientComponent } from '../../../exports/client/index.js'
 
 export const TestRecorderFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {

packages/richtext-lexical/src/features/debug/treeView/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { TreeViewFeatureClientComponent } from '../../../../exports/client/index.js'
+import { TreeViewFeatureClientComponent } from '../../../exports/client/index.js'
 
 export const TreeViewFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {

packages/richtext-lexical/src/features/format/bold/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { BoldFeatureClientComponent } from '../../../../exports/client/index.js'
+import { BoldFeatureClientComponent } from '../../../exports/client/index.js'
 import {
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,

packages/richtext-lexical/src/features/format/inlineCode/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { InlineCodeFeatureClientComponent } from '../../../../exports/client/index.js'
+import { InlineCodeFeatureClientComponent } from '../../../exports/client/index.js'
 import { INLINE_CODE } from './markdownTransformers.js'
 
 export const InlineCodeFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {

packages/richtext-lexical/src/features/format/italic/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { ItalicFeatureClientComponent } from '../../../../exports/client/index.js'
+import { ItalicFeatureClientComponent } from '../../../exports/client/index.js'
 import { ITALIC_STAR, ITALIC_UNDERSCORE } from './markdownTransformers.js'
 
 export const ItalicFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {

packages/richtext-lexical/src/features/format/strikethrough/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { StrikethroughFeatureClientComponent } from '../../../../exports/client/index.js'
+import { StrikethroughFeatureClientComponent } from '../../../exports/client/index.js'
 import { STRIKETHROUGH } from './markdownTransformers.js'
 
 export const StrikethroughFeature: FeatureProviderProviderServer<undefined, undefined> = (

packages/richtext-lexical/src/features/format/subscript/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { SubscriptFeatureClientComponent } from '../../../../exports/client/index.js'
+import { SubscriptFeatureClientComponent } from '../../../exports/client/index.js'
 
 export const SubscriptFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {

packages/richtext-lexical/src/features/format/superscript/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { SuperscriptFeatureClientComponent } from '../../../../exports/client/index.js'
+import { SuperscriptFeatureClientComponent } from '../../../exports/client/index.js'
 
 export const SuperscriptFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {

packages/richtext-lexical/src/features/format/underline/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { UnderlineFeatureClientComponent } from '../../../../exports/client/index.js'
+import { UnderlineFeatureClientComponent } from '../../../exports/client/index.js'
 
 export const UnderlineFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {
   return {

packages/richtext-lexical/src/features/heading/feature.server.ts

@@ -5,7 +5,7 @@ import { HeadingNode } from '@lexical/rich-text'
 import type { FeatureProviderProviderServer } from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { HeadingFeatureClientComponent } from '../../../exports/client/index.js'
+import { HeadingFeatureClientComponent } from '../../exports/client/index.js'
 import { convertLexicalNodesToHTML } from '../converters/html/converter/index.js'
 import { createNode } from '../typeUtilities.js'
 import { i18n } from './i18n.js'

packages/richtext-lexical/src/features/horizontalRule/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { HorizontalRuleFeatureClientComponent } from '../../../exports/client/index.js'
+import { HorizontalRuleFeatureClientComponent } from '../../exports/client/index.js'
 import { createNode } from '../typeUtilities.js'
 import { i18n } from './i18n.js'
 import { MarkdownTransformer } from './markdownTransformer.js'

packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .LexicalEditorTheme__hr {
   padding: 2px 2px;

packages/richtext-lexical/src/features/indent/feature.server.ts

@@ -1,7 +1,7 @@
 import type { FeatureProviderProviderServer } from '../types.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { IndentFeatureClientComponent } from '../../../exports/client/index.js'
+import { IndentFeatureClientComponent } from '../../exports/client/index.js'
 import { i18n } from './i18n.js'
 
 export const IndentFeature: FeatureProviderProviderServer<undefined, undefined> = (props) => {

packages/richtext-lexical/src/features/link/drawer/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .lexical-link-edit-drawer {
   &__template {

packages/richtext-lexical/src/features/link/feature.server.ts

@@ -8,7 +8,7 @@ import type { FeatureProviderProviderServer } from '../types.js'
 import type { ClientProps } from './feature.client.js'
 
 // eslint-disable-next-line payload/no-imports-from-exports-dir
-import { LinkFeatureClientComponent } from '../../../exports/client/index.js'
+import { LinkFeatureClientComponent } from '../../exports/client/index.js'
 import { convertLexicalNodesToHTML } from '../converters/html/converter/index.js'
 import { createNode } from '../typeUtilities.js'
 import { linkPopulationPromiseHOC } from './graphQLPopulationPromise.js'

packages/richtext-lexical/src/features/link/graphQLPopulationPromise.ts

@@ -2,7 +2,7 @@ import type { PopulationPromise } from '../types.js'
 import type { LinkFeatureServerProps } from './feature.server.js'
 import type { SerializedLinkNode } from './nodes/types.js'
 
-import { recursivelyPopulateFieldsForGraphQL } from '../../../populateGraphQL/recursivelyPopulateFieldsForGraphQL.js'
+import { recursivelyPopulateFieldsForGraphQL } from '../../populateGraphQL/recursivelyPopulateFieldsForGraphQL.js'
 
 export const linkPopulationPromiseHOC = (
   props: LinkFeatureServerProps,

packages/richtext-lexical/src/features/link/plugins/floatingLinkEditor/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 html[data-theme='light'] {
   .link-editor {