fix(richtext-*): do not use different version of faceless-ui by importing prebundled faceless-ui from ui (#6816)

Fixes editor crashing when opening admin panel

Author: AlessioGr

packages/richtext-lexical/package.json

@@ -41,8 +41,6 @@
     "translateNewKeys": "tsx scripts/translateNewKeys.ts"
   },
   "dependencies": {
-    "@faceless-ui/modal": "3.0.0-beta.0",
-    "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@lexical/headless": "0.16.0",
     "@lexical/link": "0.16.0",
     "@lexical/list": "0.16.0",

packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx

@@ -1,9 +1,14 @@
 'use client'
 import type { LexicalCommand, LexicalEditor } from 'lexical'
 
-import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui/client'
+import {
+  BlocksDrawer,
+  formatDrawerSlug,
+  useEditDepth,
+  useModal,
+  useTranslation,
+} from '@payloadcms/ui/client'
 import { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical'
 import React, { useCallback, useEffect, useState } from 'react'
 

packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

@@ -2,11 +2,16 @@
 import type { LexicalNode } from 'lexical'
 import type { Data, FormState } from 'payload'
 
-import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { $findMatchingParent, mergeRegister } from '@lexical/utils'
 import { getTranslation } from '@payloadcms/translations'
-import { formatDrawerSlug, useConfig, useEditDepth, useTranslation } from '@payloadcms/ui/client'
+import {
+  formatDrawerSlug,
+  useConfig,
+  useEditDepth,
+  useModal,
+  useTranslation,
+} from '@payloadcms/ui/client'
 import {
   $getSelection,
   $isLineBreakNode,

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

@@ -1,9 +1,8 @@
 'use client'
 import type { LexicalEditor } from 'lexical'
 
-import * as scrollInfoImport from '@faceless-ui/scroll-info'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
-import { useThrottledEffect, useTranslation } from '@payloadcms/ui/client'
+import { useScrollInfo, useThrottledEffect, useTranslation } from '@payloadcms/ui/client'
 import * as React from 'react'
 import { useMemo } from 'react'
 
@@ -146,8 +145,6 @@ function FixedToolbar({
   editorConfig: SanitizedClientEditorConfig
   parentWithFixedToolbar: EditorConfigContextType | false
 }): React.ReactNode {
-  const { useScrollInfo } = scrollInfoImport
-
   const currentToolbarRef = React.useRef<HTMLDivElement>(null)
 
   const { y } = useScrollInfo()

packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx

@@ -2,7 +2,6 @@
 import type { FormProps } from '@payloadcms/ui/forms/Form'
 import type { ClientCollectionConfig, FormState } from 'payload'
 
-import { useModal } from '@faceless-ui/modal'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { getTranslation } from '@payloadcms/translations'
 import {
@@ -13,6 +12,7 @@ import {
   useConfig,
   useDocumentInfo,
   useFieldProps,
+  useModal,
   useTranslation,
 } from '@payloadcms/ui/client'
 import { getFormState } from '@payloadcms/ui/shared'

packages/richtext-slate/package.json

@@ -32,7 +32,6 @@
     "prepublishOnly": "pnpm clean && pnpm turbo build"
   },
   "dependencies": {
-    "@faceless-ui/modal": "3.0.0-beta.0",
     "is-hotkey": "0.2.0",
     "slate": "0.91.4",
     "slate-history": "0.86.0",

packages/richtext-slate/src/field/elements/link/Button/index.tsx

@@ -2,8 +2,13 @@
 
 import type { FormState } from 'payload'
 
-import { useModal } from '@faceless-ui/modal'
-import { useConfig, useDrawerSlug, useFieldProps, useTranslation } from '@payloadcms/ui/client'
+import {
+  useConfig,
+  useDrawerSlug,
+  useFieldProps,
+  useModal,
+  useTranslation,
+} from '@payloadcms/ui/client'
 import { getFormState, reduceFieldsToValues } from '@payloadcms/ui/shared'
 import React, { Fragment, useState } from 'react'
 import { Editor, Range, Transforms } from 'slate'

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FormState } from 'payload'
 
-import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import {
   Button,
@@ -12,6 +11,7 @@ import {
   useDocumentInfo,
   useDrawerSlug,
   useLocale,
+  useModal,
   useTranslation,
 } from '@payloadcms/ui/client'
 import { getFormState, reduceFieldsToValues } from '@payloadcms/ui/shared'

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -3,7 +3,6 @@
 import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { ClientCollectionConfig } from 'payload'
 
-import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import {
   Drawer,
@@ -13,6 +12,7 @@ import {
   useConfig,
   useDocumentInfo,
   useLocale,
+  useModal,
   useTranslation,
 } from '@payloadcms/ui/client'
 import { type FormProps } from '@payloadcms/ui/forms/Form'