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
58 lines
1.4 KiB
TypeScript
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',
|
|
},
|
|
],
|
|
},
|
|
})
|