Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(richtext-lexical)!: greatly simplify lexical loading and improve performance #8041

Merged
merged 5 commits into from
Sep 3, 2024
Merged

perf(richtext-lexical)!: greatly simplify lexical loading and improve performance #8041

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e585df8
perf(richtext-lexical): greatly simplify lexical loading and improve …
AlessioGr Sep 3, 2024
ff6c8a9
further simplify
AlessioGr Sep 3, 2024
1b47616
fix passing client feature props to the client feature
AlessioGr Sep 3, 2024
45a7d82
fix sub-blocks not working
AlessioGr Sep 3, 2024
645a8af
fix error
AlessioGr Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix sub-blocks not working
  • Loading branch information
@AlessioGr
AlessioGr committed Sep 3, 2024
commit 45a7d82961d48a4e9773a0b07c0cfdb3e03cd137
18 changes: 12 additions & 6 deletions packages/richtext-lexical/src/field/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'

import { ShimmerEffect } from '@payloadcms/ui'
import React, { lazy, Suspense, useMemo } from 'react'
import React, { lazy, Suspense, useEffect, useState } from 'react'

import type { FeatureProviderClient } from '../features/typesClient.js'
import type { SanitizedClientEditorConfig } from '../lexical/config/types.js'
Expand All @@ -22,7 +22,13 @@ export const RichTextField: React.FC<LexicalRichTextFieldProps> = (props) => {
lexicalEditorConfig,
} = props

const finalSanitizedEditorConfig = useMemo<SanitizedClientEditorConfig>(() => {
const [finalSanitizedEditorConfig, setFinalSanitizedEditorConfig] =
useState<SanitizedClientEditorConfig>(null)

useEffect(() => {
if (finalSanitizedEditorConfig) {
return
}
const clientFeatures: GeneratedFeatureProviderComponent[] = richTextComponentMap.get(
'features',
) as GeneratedFeatureProviderComponent[]
Expand All @@ -43,10 +49,10 @@ export const RichTextField: React.FC<LexicalRichTextFieldProps> = (props) => {
},
})

return sanitizeClientEditorConfig(resolvedClientFeatures, finalLexicalEditorConfig)
}, [richTextComponentMap, lexicalEditorConfig])

finalSanitizedEditorConfig.admin = admin
setFinalSanitizedEditorConfig(
sanitizeClientEditorConfig(resolvedClientFeatures, finalLexicalEditorConfig, admin),
)
}, [lexicalEditorConfig, richTextComponentMap, admin, finalSanitizedEditorConfig]) // TODO: Optimize this and use useMemo for this in the future. This might break sub-richtext-blocks from the blocks feature. Need to investigate

return (
<Suspense fallback={<ShimmerEffect height="35vh" />}>
Expand Down
Loading