search

AlessioGr / payload-plugin-lexical

Extends payload CMS with Meta's lexical RichText editor - a much more advanced and customizable richtext editor
MIT License
144 stars 6 forks source link

Customizing features of the plugin throw missing config errors #47

Open neverether opened 1 year ago

neverether commented 1 year ago

New Payload user here – spotted the announced changes to the rich text editor for v2 and wanted to get ahead of a potentially breaking change so wanted to try adopting sooner. Thanks for making this plugin.

Based on the example code in the readme: https://github.com/AlessioGr/payload-plugin-lexical#example---more-customization-and-own-custom-node, I've tried to modify the features used by this plugin.

While disabling display of features works (defaultEditorConfig.display.align.enabled = false;) disabling the features outright as shown in the readme (defaultEditorConfig.toggles.align.enabled = false;) throws all sorts of configuration errors. So does modifying the defaultEditorConfig.features = [...] at all.

So basically copy-and-pasting the code from the readme simply doesn't work at least for me in with latest version of payload.

Here's a sampling of the dozen or so console errors:

LexicalMarkdown.dev.js:778 Uncaught Error: MarkdownShortcuts: missing dependency for transformer. Ensure node dependency is included in editor initial config.

Lexical.dev.js:10550 Uncaught Error: Node LinkNode has not been registered. Ensure node has been passed to createEditor.

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
logCapturedError @ react-dom.development.js:18687
callback @ react-dom.development.js:18755
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23364
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects_begin @ react-dom.development.js:24656
commitLayoutEffects_begin @ react-dom.development.js:24656
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <MarkdownShortcutPlugin> component:

    at MarkdownShortcutPlugin (http://localhost:3000/admin/main.js:19972:3)
    at MarkdownPlugin (http://localhost:3000/admin/main.js:198119:27)
    at div
    at Editor (http://localhost:3000/admin/main.js:192874:13)
    at div
    at CommentsContext (http://localhost:3000/admin/main.js:197049:28)
    at SharedAutocompleteContext (http://localhost:3000/admin/main.js:193390:38)
    at TableContext (http://localhost:3000/admin/main.js:199421:25)
    at SharedHistoryContext (http://localhost:3000/admin/main.js:193473:33)
    at EditorConfigContext (http://localhost:3000/admin/main.js:192770:32)
    at LexicalComposer (http://localhost:3000/admin/main.js:18755:3)
    at LexicalEditor (http://localhost:3000/admin/main.js:192728:13)
    at LexicalEditorComponent (http://localhost:3000/admin/main.js:192757:13)
    at ErrorBoundary (http://localhost:3000/admin/main.js:270895:37)
    at div
    at div
    at LexicalRichTextFieldComponent2 (http://localhost:3000/admin/main.js:193078:13)
    at CheckForCondition (http://localhost:3000/admin/main.js:219504:24)
    at Suspense
    at Field
    at RenderCustomComponent (http://localhost:3000/admin/main.js:221970:13)
    at div
    at RenderFields (http://localhost:3000/admin/main.js:211897:13)
    at div
    at div
    at TabsProvider (http://localhost:3000/admin/main.js:218734:25)
    at div
    at TabsField (http://localhost:3000/admin/main.js:218624:13)
    at CheckForCondition (http://localhost:3000/admin/main.js:219504:24)
    at RenderCustomComponent (http://localhost:3000/admin/main.js:221970:13)
    at div
    at RenderFields (http://localhost:3000/admin/main.js:211897:13)
    at div
    at http://localhost:3000/admin/main.js:205350:13
    at div
    at E.t.Provider (http://localhost:3000/admin/main.js:319227:639)
    at form
    at Form (http://localhost:3000/admin/main.js:211193:13)
    at div
    at DefaultEditView (http://localhost:3000/admin/main.js:225008:81)
    at RenderCustomComponent (http://localhost:3000/admin/main.js:221970:13)
    at EditView (http://localhost:3000/admin/main.js:225401:25)
    at DocumentInfoProvider (http://localhost:3000/admin/main.js:221213:33)
    at Route (http://localhost:3000/admin/main.js:275453:29)
    at Switch (http://localhost:3000/admin/main.js:275655:29)
    at div
    at div
    at Default (http://localhost:3000/admin/main.js:220745:20)
    at Route (http://localhost:3000/admin/main.js:275453:29)
    at Switch (http://localhost:3000/admin/main.js:275655:29)
    at Route (http://localhost:3000/admin/main.js:275453:29)
    at Suspense
    at Routes (http://localhost:3000/admin/main.js:202723:64)
    at CustomProvider (http://localhost:3000/admin/main.js:221154:27)
    at LoadingOverlayProvider (http://localhost:3000/admin/main.js:221582:35)
    at StepNavProvider (http://localhost:3000/admin/main.js:208196:28)
    at LocaleProvider (http://localhost:3000/admin/main.js:221714:27)
    at SearchParamsProvider (http://localhost:3000/admin/main.js:222021:33)
    at ThemeProvider (http://localhost:3000/admin/main.js:222086:26)
    at PreferencesProvider (http://localhost:3000/admin/main.js:221905:32)
    at AuthProvider (http://localhost:3000/admin/main.js:220840:25)
    at ModalProvider (http://localhost:3000/admin/main.js:7857:29)
    at Router (http://localhost:3000/admin/main.js:275072:30)
    at BrowserRouter (http://localhost:3000/admin/main.js:274177:35)
    at ScrollInfoProvider (http://localhost:3000/admin/main.js:9478:26)
    at WindowInfoProvider (http://localhost:3000/admin/main.js:9755:29)
    at ConfigProvider (http://localhost:3000/admin/main.js:221107:27)
    at Root

On a more general note, and I believe this was mentioned in the main discussion thread, it would probably be more optimal from a dev experience to opt-in to features instead having to opt-out.

ssyberg commented 1 year ago

On a more general note, and I believe this was mentioned in the main discussion thread, it would probably be more optimal from a dev experience to opt-in to features instead having to opt-out.

💯