diff --git a/packages/richtext-lexical/src/features/blocks/client/component/BlockContent.tsx b/packages/richtext-lexical/src/features/blocks/client/component/BlockContent.tsx index 4f30ff283c3..a06faa0b3cf 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/BlockContent.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/component/BlockContent.tsx @@ -44,13 +44,13 @@ type Props = { // Inside of fields.data however, that sub-blocks blockName property does not exist at all. function removeUndefinedAndNullAndEmptyArraysRecursively(obj: object) { for (const key in obj) { - const value = obj[key] + const value = obj[key as keyof object] as unknown if (Array.isArray(value) && !value?.length) { - delete obj[key] + delete obj[key as keyof object] } else if (value && typeof value === 'object') { removeUndefinedAndNullAndEmptyArraysRecursively(value) } else if (value === undefined || value === null) { - delete obj[key] + delete obj[key as keyof object] } } } diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx index 4a230a2d5d3..c9752fc50a4 100644 --- a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx @@ -108,7 +108,7 @@ export const BlockComponent: React.FC = (props) => { ]) const onChange = useCallback( - async ({ formState: prevFormState }) => { + async ({ formState: prevFormState }: { formState: FormState }) => { abortAndIgnore(onChangeAbortControllerRef.current) const controller = new AbortController() diff --git a/packages/richtext-lexical/src/features/blocks/client/index.tsx b/packages/richtext-lexical/src/features/blocks/client/index.tsx index 41289e04c05..c229fef99bb 100644 --- a/packages/richtext-lexical/src/features/blocks/client/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/index.tsx @@ -1,5 +1,6 @@ 'use client' +import type { I18nClient } from '@payloadcms/translations' import type { BlocksFieldClient } from 'payload' import { getTranslation } from '@payloadcms/translations' @@ -67,7 +68,7 @@ export const BlocksFeatureClient = createClientFeature } as SlashMenuItem }), key: 'blocks', - label: ({ i18n }) => { + label: ({ i18n }: { i18n: I18nClient }) => { return i18n.t('lexical:blocks:label') }, } @@ -106,7 +107,11 @@ export const BlocksFeatureClient = createClientFeature } as SlashMenuItem }), key: 'inlineBlocks', - label: ({ i18n }) => { + label: ({ + i18n, + }: { + i18n: I18nClient + }) => { return i18n.t('lexical:blocks:inlineBlocks:label') }, } diff --git a/packages/richtext-lexical/src/features/experimental_table/client/utils/debounce.ts b/packages/richtext-lexical/src/features/experimental_table/client/utils/debounce.ts index 11b3d99ae2a..7a17717832e 100644 --- a/packages/richtext-lexical/src/features/experimental_table/client/utils/debounce.ts +++ b/packages/richtext-lexical/src/features/experimental_table/client/utils/debounce.ts @@ -1,3 +1,5 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck - not worth it migrate jsdoc to tsdoc 'use client' // Copied & modified from https://github.com/lodash/lodash/blob/main/src/debounce.ts /* @@ -242,4 +244,5 @@ function debounce(func, wait, options) { return debounced } +// eslint-disable-next-line no-restricted-exports export default debounce diff --git a/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx b/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx index 3dd9ea6f4bd..ba9931df0b3 100644 --- a/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx +++ b/packages/richtext-lexical/src/features/relationship/client/components/RelationshipComponent.tsx @@ -87,18 +87,15 @@ const Component: React.FC = (props) => { }) }, [editor, nodeKey]) - const updateRelationship = React.useCallback( - ({ doc }) => { - setParams({ - ...initialParams, - cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed - }) - - closeDocumentDrawer() - dispatchCacheBust() - }, - [cacheBust, setParams, closeDocumentDrawer], - ) + const updateRelationship = React.useCallback(() => { + setParams({ + ...initialParams, + cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed + }) + + closeDocumentDrawer() + dispatchCacheBust() + }, [cacheBust, setParams, closeDocumentDrawer]) const $onDelete = useCallback( (payload: KeyboardEvent) => { diff --git a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx index 2b6eae7cba1..97eecee120d 100644 --- a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx +++ b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx @@ -68,7 +68,7 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } }, [editor, openListDrawer]) const onSelect = useCallback( - ({ collectionSlug, docID }) => { + ({ collectionSlug, docID }: { collectionSlug: string; docID: number | string }) => { insertRelationship({ editor, relationTo: collectionSlug, diff --git a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx index 29864d71321..e5194e57f53 100644 --- a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx +++ b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx @@ -209,7 +209,7 @@ function InlineToolbar({ const isLinkEditorVisible = possibleLinkEditor !== null && 'style' in possibleLinkEditor && - possibleLinkEditor?.style?.['opacity'] === '1' + possibleLinkEditor?.style?.['opacity' as keyof typeof possibleLinkEditor.style] === '1' const rootElement = editor.getRootElement() if ( diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.tsx b/packages/richtext-lexical/src/features/upload/client/component/index.tsx index 1dee1113384..d8e5bba81d2 100644 --- a/packages/richtext-lexical/src/features/upload/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/upload/client/component/index.tsx @@ -1,5 +1,5 @@ 'use client' -import type { ClientCollectionConfig, Data } from 'payload' +import type { ClientCollectionConfig, Data, FormState, JsonObject } from 'payload' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js' import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js' @@ -183,7 +183,7 @@ const Component: React.FC = (props) => { ).collections?.[relatedCollection.slug]?.hasExtraFields const onExtraFieldsDrawerSubmit = useCallback( - (_, data) => { + (_: FormState, data: JsonObject) => { // Update lexical node (with key nodeKey) with new data editor.update(() => { const uploadNode: null | UploadNode = $getNodeByKey(nodeKey) diff --git a/packages/richtext-lexical/src/features/upload/client/drawer/index.tsx b/packages/richtext-lexical/src/features/upload/client/drawer/index.tsx index fccd620ac96..90f7c0fbb36 100644 --- a/packages/richtext-lexical/src/features/upload/client/drawer/index.tsx +++ b/packages/richtext-lexical/src/features/upload/client/drawer/index.tsx @@ -77,7 +77,7 @@ const UploadDrawerComponent: React.FC = ({ enabledCollectionSlugs }) => { }, [editor, openListDrawer]) const onSelect = useCallback( - ({ collectionSlug, docID }) => { + ({ collectionSlug, docID }: { collectionSlug: string; docID: number | string }) => { closeListDrawer() insertUpload({ editor, diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx index 87b221a83e1..bba63aa4f52 100644 --- a/packages/richtext-lexical/src/field/Field.tsx +++ b/packages/richtext-lexical/src/field/Field.tsx @@ -1,5 +1,6 @@ 'use client' import type { SerializedEditorState } from 'lexical' +import type { Validate } from 'payload' import { FieldLabel, useEditDepth, useField, withCondition } from '@payloadcms/ui' import React, { useCallback } from 'react' @@ -9,9 +10,9 @@ import type { SanitizedClientEditorConfig } from '../lexical/config/types.js' import type { LexicalRichTextFieldProps } from '../types.js' import { LexicalProvider } from '../lexical/LexicalProvider.js' +import '../lexical/theme/EditorTheme.scss' import './bundled.css' import './index.scss' -import '../lexical/theme/EditorTheme.scss' const baseClass = 'rich-text-lexical' @@ -39,11 +40,13 @@ const RichTextComponent: React.FC< const editDepth = useEditDepth() - const memoizedValidate = useCallback( + const memoizedValidate = useCallback( (value, validationOptions) => { if (typeof validate === 'function') { + // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve return validate(value, { ...validationOptions, props, required }) } + return true }, // Important: do not add props to the dependencies array. // This would cause an infinite loop and endless re-rendering. @@ -61,7 +64,6 @@ const RichTextComponent: React.FC< value, } = useField({ path, - // @ts-expect-error: TODO: Fix this validate: memoizedValidate, }) @@ -122,7 +124,7 @@ const RichTextComponent: React.FC< ) } -function fallbackRender({ error }): React.ReactElement { +function fallbackRender({ error }: { error: Error }) { // Call resetErrorBoundary() to reset the error boundary and retry the render. return ( diff --git a/packages/richtext-lexical/src/index.ts b/packages/richtext-lexical/src/index.ts index f4004cf7c6e..4019469d6fb 100644 --- a/packages/richtext-lexical/src/index.ts +++ b/packages/richtext-lexical/src/index.ts @@ -67,7 +67,7 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte }) } - let features: FeatureProviderServer[] = [] + let features: FeatureProviderServer[] = [] let resolvedFeatureMap: ResolvedServerFeatureMap let finalSanitizedEditorConfig: SanitizedServerEditorConfig // For server only @@ -123,12 +123,12 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte const featureI18n = finalSanitizedEditorConfig.features.i18n for (const lang in i18n) { - if (!featureI18n[lang]) { - featureI18n[lang] = { + if (!featureI18n[lang as keyof typeof featureI18n]) { + featureI18n[lang as keyof typeof featureI18n] = { lexical: {}, } } - + // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve featureI18n[lang].lexical.general = i18n[lang] } @@ -206,6 +206,8 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte ) { return value } + // TO-DO: We should not use context, as it is intended for external use only + // eslint-disable-next-line @typescript-eslint/no-explicit-any const context: any = _context const nodeIDMap: { [key: string]: SerializedLexicalNode @@ -438,6 +440,8 @@ export function lexicalEditor(props?: LexicalEditorProps): LexicalRichTextAdapte return value } + // TO-DO: We should not use context, as it is intended for external use only + // eslint-disable-next-line @typescript-eslint/no-explicit-any const context: any = _context const nodeIDMap: { [key: string]: SerializedLexicalNode diff --git a/packages/richtext-lexical/src/lexical/LexicalProvider.tsx b/packages/richtext-lexical/src/lexical/LexicalProvider.tsx index 0287d913c9f..ed60fd77be8 100644 --- a/packages/richtext-lexical/src/lexical/LexicalProvider.tsx +++ b/packages/richtext-lexical/src/lexical/LexicalProvider.tsx @@ -26,7 +26,14 @@ export type LexicalProviderProps = { value: SerializedEditorState } -const NestProviders = ({ children, providers }) => { +const NestProviders = ({ + children, + providers, +}: { + children: React.ReactNode + // eslint-disable-next-line @typescript-eslint/no-explicit-any + providers: any[] +}) => { if (!providers?.length) { return children } diff --git a/packages/richtext-lexical/src/lexical/config/server/sanitize.ts b/packages/richtext-lexical/src/lexical/config/server/sanitize.ts index 7c035ce6701..3fc90029abc 100644 --- a/packages/richtext-lexical/src/lexical/config/server/sanitize.ts +++ b/packages/richtext-lexical/src/lexical/config/server/sanitize.ts @@ -69,11 +69,12 @@ export const sanitizeServerFeatures = ( if (feature?.i18n) { for (const lang in feature.i18n) { - if (!sanitized.i18n[lang]) { - sanitized.i18n[lang] = { + if (!sanitized.i18n[lang as keyof typeof sanitized.i18n]) { + sanitized.i18n[lang as keyof typeof sanitized.i18n] = { lexical: {}, } } + // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve sanitized.i18n[lang].lexical[feature.key] = feature.i18n[lang] } } diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx index 8017c24a18f..84c830291da 100644 --- a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx +++ b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx @@ -126,7 +126,7 @@ function useAddBlockHandle( }, [anchorElem, hoveredElement, blockHandleHorizontalOffset]) const handleAddClick = useCallback( - (event) => { + (event: React.MouseEvent) => { let hoveredElementToUse = hoveredElement if (!hoveredElementToUse?.node) { return @@ -189,6 +189,7 @@ function useAddBlockHandle( return createPortal(