Files
payload/test/fields/collections/Lexical/ModifyInlineBlockFeature/feature.client.ts
Alessio Gravili 4c96028e87 fix(richtext-lexical): allow external state mutation of block node from outside the form (#10486)
Previously, updates of the node fields from outside the form using
setFields did not trigger re-fetching the initial state, and thus
providing updated values to the form. This is to avoid unnecessary
re-renders of the form and unnecessary requests when setFields is
triggered from within the form.

This PR resets the initial state, thus triggering a re-render and
re-fetch of the initial state, if node.setFields is called from outside
the form. This preserves the performance optimization
2025-01-10 01:03:51 -07:00

58 lines
1.4 KiB
TypeScript

'use client'
import { $isInlineBlockNode, createClientFeature } from '@payloadcms/richtext-lexical/client'
import { $getSelection } from '@payloadcms/richtext-lexical/lexical'
import { CloseMenuIcon } from '@payloadcms/ui'
import { ModifyInlineBlockPlugin } from './plugin.js'
export const ModifyInlineBlockFeatureClient = createClientFeature({
plugins: [
{
Component: ModifyInlineBlockPlugin,
position: 'normal',
},
],
toolbarFixed: {
groups: [
{
key: 'debug',
items: [
{
ChildComponent: CloseMenuIcon,
key: 'setKeyToDebug',
label: 'Set Key To Debug',
onSelect({ editor }) {
editor.update(() => {
const selection = $getSelection()
// Check if selection consist of 1 node and that its an inlineblocknode
const nodes = selection.getNodes()
if (nodes.length !== 1) {
return
}
const node = nodes[0]
if (!$isInlineBlockNode(node)) {
return
}
const fields = node.getFields()
node.setFields({
blockType: fields.blockType,
id: fields.id,
key: 'value2',
})
})
},
},
],
type: 'buttons',
},
],
},
})