@payloadcms/richtext-lexical 3.0.0-beta.133 → 3.0.0-beta.134

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/exports/client/Field-S5G27AVI.js +2 -0
  2. package/dist/exports/client/Field-S5G27AVI.js.map +7 -0
  3. package/dist/exports/client/bundled.css +1 -1
  4. package/dist/exports/client/chunk-2CYU43GM.js +2 -0
  5. package/dist/exports/client/chunk-2CYU43GM.js.map +7 -0
  6. package/dist/exports/client/chunk-C7S3V4EB.js +2 -0
  7. package/dist/exports/client/chunk-C7S3V4EB.js.map +7 -0
  8. package/dist/exports/client/chunk-U7O7EYCP.js +2 -0
  9. package/dist/exports/client/chunk-U7O7EYCP.js.map +7 -0
  10. package/dist/exports/client/component-H3EYQ5KG.js +2 -0
  11. package/dist/exports/client/{component-YICNYPTU.js.map → component-H3EYQ5KG.js.map} +1 -1
  12. package/dist/exports/client/componentInline-ZGO3K4TA.js +2 -0
  13. package/dist/exports/client/componentInline-ZGO3K4TA.js.map +7 -0
  14. package/dist/exports/client/index.d.ts +7 -0
  15. package/dist/exports/client/index.d.ts.map +1 -1
  16. package/dist/exports/client/index.js +7 -7
  17. package/dist/exports/client/index.js.map +4 -4
  18. package/dist/features/blocks/client/component/BlockContent.d.ts +34 -9
  19. package/dist/features/blocks/client/component/BlockContent.d.ts.map +1 -1
  20. package/dist/features/blocks/client/component/BlockContent.js +63 -158
  21. package/dist/features/blocks/client/component/BlockContent.js.map +1 -1
  22. package/dist/features/blocks/client/component/components/BlockCollapsible.d.ts +11 -0
  23. package/dist/features/blocks/client/component/components/BlockCollapsible.d.ts.map +1 -0
  24. package/dist/features/blocks/client/component/components/BlockCollapsible.js +37 -0
  25. package/dist/features/blocks/client/component/components/BlockCollapsible.js.map +1 -0
  26. package/dist/features/blocks/client/component/components/BlockEditButton.d.ts +3 -0
  27. package/dist/features/blocks/client/component/components/BlockEditButton.d.ts.map +1 -0
  28. package/dist/features/blocks/client/component/components/BlockEditButton.js +22 -0
  29. package/dist/features/blocks/client/component/components/BlockEditButton.js.map +1 -0
  30. package/dist/features/blocks/client/component/components/BlockRemoveButton.d.ts +3 -0
  31. package/dist/features/blocks/client/component/components/BlockRemoveButton.d.ts.map +1 -0
  32. package/dist/features/blocks/client/component/components/BlockRemoveButton.js +22 -0
  33. package/dist/features/blocks/client/component/components/BlockRemoveButton.js.map +1 -0
  34. package/dist/features/blocks/client/component/index.d.ts.map +1 -1
  35. package/dist/features/blocks/client/component/index.js +242 -63
  36. package/dist/features/blocks/client/component/index.js.map +1 -1
  37. package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.d.ts +5 -0
  38. package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.d.ts.map +1 -0
  39. package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js +28 -0
  40. package/dist/features/blocks/client/componentInline/components/InlineBlockContainer.js.map +1 -0
  41. package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.d.ts +3 -0
  42. package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.d.ts.map +1 -0
  43. package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js +22 -0
  44. package/dist/features/blocks/client/componentInline/components/InlineBlockEditButton.js.map +1 -0
  45. package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.d.ts +3 -0
  46. package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.d.ts.map +1 -0
  47. package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js +22 -0
  48. package/dist/features/blocks/client/componentInline/components/InlineBlockLabel.js.map +1 -0
  49. package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.d.ts +3 -0
  50. package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.d.ts.map +1 -0
  51. package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js +22 -0
  52. package/dist/features/blocks/client/componentInline/components/InlineBlockRemoveButton.js.map +1 -0
  53. package/dist/features/blocks/client/componentInline/index.d.ts +13 -1
  54. package/dist/features/blocks/client/componentInline/index.d.ts.map +1 -1
  55. package/dist/features/blocks/client/componentInline/index.js +219 -43
  56. package/dist/features/blocks/client/componentInline/index.js.map +1 -1
  57. package/dist/features/blocks/client/index.d.ts.map +1 -1
  58. package/dist/features/blocks/client/index.js +7 -10
  59. package/dist/features/blocks/client/index.js.map +1 -1
  60. package/dist/features/blocks/client/nodes/BlocksNode.d.ts.map +1 -1
  61. package/dist/features/blocks/client/nodes/BlocksNode.js +1 -3
  62. package/dist/features/blocks/client/nodes/BlocksNode.js.map +1 -1
  63. package/dist/features/blocks/client/plugin/commands.d.ts +0 -4
  64. package/dist/features/blocks/client/plugin/commands.d.ts.map +1 -1
  65. package/dist/features/blocks/client/plugin/commands.js +0 -1
  66. package/dist/features/blocks/client/plugin/commands.js.map +1 -1
  67. package/dist/features/blocks/client/plugin/index.d.ts.map +1 -1
  68. package/dist/features/blocks/client/plugin/index.js +28 -135
  69. package/dist/features/blocks/client/plugin/index.js.map +1 -1
  70. package/dist/features/blocks/server/index.d.ts.map +1 -1
  71. package/dist/features/blocks/server/index.js +28 -2
  72. package/dist/features/blocks/server/index.js.map +1 -1
  73. package/dist/features/typesClient.d.ts +1 -17
  74. package/dist/features/typesClient.d.ts.map +1 -1
  75. package/dist/features/typesClient.js.map +1 -1
  76. package/dist/field/Field.d.ts.map +1 -1
  77. package/dist/field/Field.js +163 -78
  78. package/dist/field/Field.js.map +1 -1
  79. package/dist/field/bundled.css +1 -1
  80. package/dist/field/rscEntry.d.ts.map +1 -1
  81. package/dist/field/rscEntry.js +23 -1
  82. package/dist/field/rscEntry.js.map +1 -1
  83. package/dist/lexical/LexicalProvider.d.ts.map +1 -1
  84. package/dist/lexical/LexicalProvider.js +9 -18
  85. package/dist/lexical/LexicalProvider.js.map +1 -1
  86. package/dist/lexical/config/client/sanitize.d.ts.map +1 -1
  87. package/dist/lexical/config/client/sanitize.js +0 -12
  88. package/dist/lexical/config/client/sanitize.js.map +1 -1
  89. package/dist/types.d.ts +2 -0
  90. package/dist/types.d.ts.map +1 -1
  91. package/dist/types.js.map +1 -1
  92. package/dist/utilities/buildInitialState.d.ts +27 -0
  93. package/dist/utilities/buildInitialState.d.ts.map +1 -0
  94. package/dist/utilities/buildInitialState.js +53 -0
  95. package/dist/utilities/buildInitialState.js.map +1 -0
  96. package/dist/utilities/fieldsDrawer/DrawerContent.d.ts.map +1 -1
  97. package/dist/utilities/fieldsDrawer/DrawerContent.js +8 -5
  98. package/dist/utilities/fieldsDrawer/DrawerContent.js.map +1 -1
  99. package/dist/utilities/fieldsDrawer/useLexicalDrawer.d.ts.map +1 -1
  100. package/dist/utilities/fieldsDrawer/useLexicalDrawer.js +8 -8
  101. package/dist/utilities/fieldsDrawer/useLexicalDrawer.js.map +1 -1
  102. package/package.json +6 -6
  103. package/dist/exports/client/Field-GWJ72IYP.js +0 -2
  104. package/dist/exports/client/Field-GWJ72IYP.js.map +0 -7
  105. package/dist/exports/client/chunk-D7PD5DUW.js +0 -2
  106. package/dist/exports/client/chunk-D7PD5DUW.js.map +0 -7
  107. package/dist/exports/client/chunk-XDEGE6I5.js +0 -2
  108. package/dist/exports/client/chunk-XDEGE6I5.js.map +0 -7
  109. package/dist/exports/client/chunk-YGRKYSDC.js +0 -2
  110. package/dist/exports/client/chunk-YGRKYSDC.js.map +0 -7
  111. package/dist/exports/client/component-KLNTKKNE.js +0 -2
  112. package/dist/exports/client/component-KLNTKKNE.js.map +0 -7
  113. package/dist/exports/client/component-YICNYPTU.js +0 -2
  114. package/dist/exports/client/componentInline-6RPSMLNJ.js +0 -2
  115. package/dist/exports/client/componentInline-6RPSMLNJ.js.map +0 -7
  116. package/dist/features/blocks/client/component/FormSavePlugin.d.ts +0 -11
  117. package/dist/features/blocks/client/component/FormSavePlugin.d.ts.map +0 -1
  118. package/dist/features/blocks/client/component/FormSavePlugin.js +0 -53
  119. package/dist/features/blocks/client/component/FormSavePlugin.js.map +0 -1
@@ -1,14 +1,20 @@
1
1
  'use client';
2
2
 
3
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
4
- import { Collapsible, Form, Pill, SectionTitle, ShimmerEffect, useDocumentInfo, useFormSubmitted, useServerFunctions, useTranslation } from '@payloadcms/ui';
3
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
4
+ import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, FormSubmit, Pill, RenderFields, SectionTitle, useDocumentInfo, useEditDepth, useFormSubmitted, useServerFunctions, useTranslation } from '@payloadcms/ui';
5
5
  import { abortAndIgnore } from '@payloadcms/ui/shared';
6
- import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
6
+ import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
7
+ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
7
8
  const baseClass = 'lexical-block';
9
+ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
8
10
  import { getTranslation } from '@payloadcms/translations';
11
+ import { $getNodeByKey } from 'lexical';
9
12
  import { v4 as uuid } from 'uuid';
10
13
  import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
14
+ import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
15
+ import { $isBlockNode } from '../nodes/BlocksNode.js';
11
16
  import { BlockContent } from './BlockContent.js';
17
+ import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
12
18
  export const BlockComponent = props => {
13
19
  const {
14
20
  formData,
@@ -24,31 +30,53 @@ export const BlockComponent = props => {
24
30
  fieldProps: {
25
31
  featureClientSchemaMap,
26
32
  field: parentLexicalRichTextField,
27
- path,
33
+ initialLexicalFormState,
34
+ permissions,
35
+ readOnly,
28
36
  schemaPath
29
- }
37
+ },
38
+ uuid: uuidFromContext
30
39
  } = useEditorConfigContext();
31
40
  const onChangeAbortControllerRef = useRef(new AbortController());
41
+ const editDepth = useEditDepth();
42
+ const [errorCount, setErrorCount] = React.useState(0);
43
+ const drawerSlug = formatDrawerSlug({
44
+ slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,
45
+ depth: editDepth
46
+ });
32
47
  const {
33
- docPermissions,
34
- getDocPreferences
48
+ toggleDrawer
49
+ } = useLexicalDrawer(drawerSlug, true);
50
+ // Used for saving collapsed to preferences (and gettin' it from there again)
51
+ // Remember, these preferences are scoped to the whole document, not just this form. This
52
+ // is important to consider for the data path used in setDocFieldPreferences
53
+ const {
54
+ getDocPreferences,
55
+ setDocFieldPreferences
35
56
  } = useDocumentInfo();
57
+ const [editor] = useLexicalComposerContext();
36
58
  const {
37
59
  getFormState
38
60
  } = useServerFunctions();
39
- const [initialState, setInitialState] = useState(false);
40
61
  const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`;
41
- const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`;
42
- const clientSchemaMap = featureClientSchemaMap['blocks'];
43
- const blocksField = clientSchemaMap[componentMapRenderedBlockPath][0];
44
- const clientBlock = blocksField.blocks[0];
45
- const {
46
- i18n
47
- } = useTranslation();
48
- // Field Schema
62
+ const [initialState, setInitialState] = React.useState(initialLexicalFormState?.[formData.id]?.formState ? {
63
+ ...initialLexicalFormState?.[formData.id]?.formState,
64
+ blockName: {
65
+ initialValue: formData.blockName,
66
+ passesCondition: true,
67
+ valid: true,
68
+ value: formData.blockName
69
+ }
70
+ } : false);
71
+ // Initial state for newly created blocks
49
72
  useEffect(() => {
50
73
  const abortController = new AbortController();
51
74
  const awaitInitialState = async () => {
75
+ /*
76
+ * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,
77
+ * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side
78
+ * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.
79
+ */
52
80
  const {
53
81
  state
54
82
  } = await getFormState({
@@ -67,7 +95,7 @@ export const BlockComponent = props => {
67
95
  });
68
96
  if (state) {
69
97
  state.blockName = {
70
- initialValue: '',
98
+ initialValue: formData.blockName,
71
99
  passesCondition: true,
72
100
  valid: true,
73
101
  value: formData.blockName
@@ -75,15 +103,25 @@ export const BlockComponent = props => {
75
103
  setInitialState(state);
76
104
  }
77
105
  };
78
- if (formData) {
106
+ if (formData && !initialState) {
79
107
  void awaitInitialState();
80
108
  }
81
109
  return () => {
82
110
  abortAndIgnore(abortController);
83
111
  };
84
- }, [getFormState, schemaFieldsPath, id, collectionSlug, globalSlug, getDocPreferences]);
112
+ }, [getFormState, schemaFieldsPath, id, formData, initialState, collectionSlug, globalSlug, getDocPreferences]);
113
+ const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
114
+ const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`;
115
+ const clientSchemaMap = featureClientSchemaMap['blocks'];
116
+ const blocksField = clientSchemaMap[componentMapRenderedBlockPath][0];
117
+ const clientBlock = blocksField.blocks[0];
118
+ const {
119
+ i18n,
120
+ t
121
+ } = useTranslation();
85
122
  const onChange = useCallback(async ({
86
- formState: prevFormState
123
+ formState: prevFormState,
124
+ submit
87
125
  }) => {
88
126
  abortAndIgnore(onChangeAbortControllerRef.current);
89
127
  const controller = new AbortController();
@@ -93,7 +131,9 @@ export const BlockComponent = props => {
93
131
  } = await getFormState({
94
132
  id,
95
133
  collectionSlug,
96
- docPermissions,
134
+ docPermissions: {
135
+ fields: true
136
+ },
97
137
  docPreferences: await getDocPreferences(),
98
138
  formState: prevFormState,
99
139
  globalSlug,
@@ -104,64 +144,203 @@ export const BlockComponent = props => {
104
144
  if (!newFormState) {
105
145
  return prevFormState;
106
146
  }
107
- newFormState.blockName = {
108
- initialValue: '',
109
- passesCondition: true,
110
- valid: true,
111
- value: formData.blockName
112
- };
147
+ newFormState.blockName = prevFormState.blockName;
148
+ const newFormStateData = reduceFieldsToValues(removeEmptyArrayValues({
149
+ fields: deepCopyObjectSimpleWithoutReactComponents(newFormState)
150
+ }), true);
151
+ setTimeout(() => {
152
+ editor.update(() => {
153
+ const node = $getNodeByKey(nodeKey);
154
+ if (node && $isBlockNode(node)) {
155
+ const newData = {
156
+ ...newFormStateData,
157
+ blockType: formData.blockType
158
+ };
159
+ node.setFields(newData);
160
+ }
161
+ });
162
+ }, 0);
163
+ if (submit) {
164
+ let rowErrorCount = 0;
165
+ for (const formField of Object.values(newFormState)) {
166
+ if (formField?.valid === false) {
167
+ rowErrorCount++;
168
+ }
169
+ }
170
+ setErrorCount(rowErrorCount);
171
+ }
113
172
  return newFormState;
114
- }, [getFormState, id, collectionSlug, docPermissions, getDocPreferences, globalSlug, schemaFieldsPath, formData.blockName]);
173
+ }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, formData.blockType, editor, nodeKey]);
115
174
  useEffect(() => {
116
175
  return () => {
117
176
  abortAndIgnore(onChangeAbortControllerRef.current);
118
177
  };
119
178
  }, []);
120
- const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ');
121
- const Label = clientBlock?.admin?.components?.Label;
179
+ const removeBlock = useCallback(() => {
180
+ editor.update(() => {
181
+ $getNodeByKey(nodeKey)?.remove();
182
+ });
183
+ }, [editor, nodeKey]);
184
+ const CustomLabel = initialState?.['_components']?.customComponents?.BlockLabel;
185
+ const CustomBlock = initialState?.['_components']?.customComponents?.Block;
186
+ const blockDisplayName = clientBlock?.labels?.singular ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug;
187
+ const onCollapsedChange = useCallback(changedCollapsed => {
188
+ void getDocPreferences().then(currentDocPreferences => {
189
+ const currentFieldPreferences = currentDocPreferences?.fields[parentLexicalRichTextField.name];
190
+ const collapsedArray = currentFieldPreferences?.collapsed;
191
+ const newCollapsed = collapsedArray && collapsedArray?.length ? collapsedArray : [];
192
+ if (changedCollapsed) {
193
+ if (!newCollapsed.includes(formData.id)) {
194
+ newCollapsed.push(formData.id);
195
+ }
196
+ } else {
197
+ if (newCollapsed.includes(formData.id)) {
198
+ newCollapsed.splice(newCollapsed.indexOf(formData.id), 1);
199
+ }
200
+ }
201
+ setDocFieldPreferences(parentLexicalRichTextField.name, {
202
+ collapsed: newCollapsed,
203
+ hello: 'hi'
204
+ });
205
+ });
206
+ }, [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id]);
207
+ const EditButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
208
+ buttonStyle: "icon-label",
209
+ className: `${baseClass}__editButton`,
210
+ disabled: readOnly,
211
+ el: "div",
212
+ icon: "edit",
213
+ onClick: () => {
214
+ toggleDrawer();
215
+ },
216
+ round: true,
217
+ size: "small",
218
+ tooltip: t('lexical:blocks:inlineBlocks:edit', {
219
+ label: blockDisplayName
220
+ })
221
+ }), [blockDisplayName, readOnly, t, toggleDrawer]);
222
+ const RemoveButton = useMemo(() => () => /*#__PURE__*/_jsx(Button, {
223
+ buttonStyle: "icon-label",
224
+ className: `${baseClass}__removeButton`,
225
+ disabled: parentLexicalRichTextField?.admin?.readOnly || false,
226
+ icon: "x",
227
+ onClick: e => {
228
+ e.preventDefault();
229
+ removeBlock();
230
+ },
231
+ round: true,
232
+ tooltip: "Remove Block"
233
+ }), [parentLexicalRichTextField?.admin?.readOnly, removeBlock]);
234
+ const BlockCollapsible = useMemo(() => ({
235
+ children,
236
+ editButton,
237
+ errorCount: errorCount_0,
238
+ fieldHasErrors,
239
+ Label,
240
+ removeButton
241
+ }) => /*#__PURE__*/_jsx("div", {
242
+ className: baseClass + ' ' + baseClass + '-' + formData.blockType,
243
+ children: /*#__PURE__*/_jsx(Collapsible, {
244
+ className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`].join(' '),
245
+ collapsibleStyle: fieldHasErrors ? 'error' : 'default',
246
+ header: /*#__PURE__*/_jsxs("div", {
247
+ className: `${baseClass}__block-header`,
248
+ children: [Label ?? CustomLabel ? Label ?? CustomLabel : /*#__PURE__*/_jsxs("div", {
249
+ children: [/*#__PURE__*/_jsx(Pill, {
250
+ className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
251
+ pillStyle: "white",
252
+ children: blockDisplayName
253
+ }), /*#__PURE__*/_jsx(SectionTitle, {
254
+ path: "blockName",
255
+ readOnly: parentLexicalRichTextField?.admin?.readOnly || false
256
+ }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
257
+ count: errorCount_0 ?? 0,
258
+ i18n: i18n,
259
+ withMessage: true
260
+ })]
261
+ }), /*#__PURE__*/_jsxs("div", {
262
+ children: [CustomBlock && editButton !== false || !CustomBlock && editButton ? /*#__PURE__*/_jsx(EditButton, {}) : null, removeButton !== false && editor.isEditable() ? /*#__PURE__*/_jsx(RemoveButton, {}) : null]
263
+ })]
264
+ }),
265
+ isCollapsed: isCollapsed,
266
+ onToggle: incomingCollapsedState => {
267
+ onCollapsedChange(incomingCollapsedState);
268
+ setIsCollapsed(incomingCollapsedState);
269
+ },
270
+ children: children
271
+ }, 0)
272
+ }), [CustomBlock, CustomLabel, EditButton, RemoveButton, blockDisplayName, editor, formData.blockType, i18n, isCollapsed, onCollapsedChange, parentLexicalRichTextField?.admin?.readOnly]);
273
+ const BlockDrawer = useMemo(() => () => /*#__PURE__*/_jsx(EditDepthProvider, {
274
+ children: /*#__PURE__*/_jsx(Drawer, {
275
+ className: '',
276
+ slug: drawerSlug,
277
+ title: t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {
278
+ label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label')
279
+ }),
280
+ children: initialState ? /*#__PURE__*/_jsxs(_Fragment, {
281
+ children: [/*#__PURE__*/_jsx(RenderFields, {
282
+ fields: clientBlock.fields,
283
+ forceRender: true,
284
+ parentIndexPath: "",
285
+ parentPath: "" // See Blocks feature path for details as for why this is empty
286
+ ,
287
+
288
+ parentSchemaPath: schemaFieldsPath,
289
+ permissions: permissions,
290
+ readOnly: false
291
+ }), /*#__PURE__*/_jsx(FormSubmit, {
292
+ children: t('fields:saveChanges')
293
+ })]
294
+ }) : null
295
+ })
296
+ }), [initialState, drawerSlug, blockDisplayName, t, clientBlock.fields, schemaFieldsPath, permissions]);
122
297
  // Memoized Form JSX
123
- const formContent = useMemo(() => {
124
- return clientBlock && initialState !== false ? /*#__PURE__*/_jsx(Form, {
125
- beforeSubmit: [onChange],
298
+ const Block = useMemo(() => {
299
+ if (!initialState) {
300
+ return null;
301
+ }
302
+ return /*#__PURE__*/_jsx(Form, {
303
+ beforeSubmit: [async ({
304
+ formState
305
+ }) => {
306
+ return await onChange({
307
+ formState,
308
+ submit: true
309
+ });
310
+ }],
126
311
  fields: clientBlock.fields,
127
312
  initialState: initialState,
128
313
  onChange: [onChange],
314
+ onSubmit: formState_0 => {
315
+ // THis is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
316
+ const newData_0 = reduceFieldsToValues(formState_0);
317
+ newData_0.blockType = formData.blockType;
318
+ editor.update(() => {
319
+ const node_0 = $getNodeByKey(nodeKey);
320
+ if (node_0 && $isBlockNode(node_0)) {
321
+ node_0.setFields(newData_0);
322
+ }
323
+ });
324
+ toggleDrawer();
325
+ },
129
326
  submitted: submitted,
130
327
  uuid: uuid(),
131
328
  children: /*#__PURE__*/_jsx(BlockContent, {
132
329
  baseClass: baseClass,
133
- clientBlock: clientBlock,
134
- field: parentLexicalRichTextField,
135
- formData: formData,
330
+ BlockDrawer: BlockDrawer,
331
+ Collapsible: BlockCollapsible,
332
+ CustomBlock: CustomBlock,
333
+ EditButton: EditButton,
334
+ errorCount: errorCount,
136
335
  formSchema: clientBlock.fields,
336
+ initialState: initialState,
137
337
  nodeKey: nodeKey,
138
- path: `${path}.lexical_internal_feature.blocks.${formData.blockType}`,
139
- schemaPath: schemaFieldsPath
338
+ RemoveButton: RemoveButton
140
339
  })
141
- }) : /*#__PURE__*/_jsx(Collapsible, {
142
- className: classNames,
143
- collapsibleStyle: "default",
144
- header: clientBlock?.admin?.components?.Label ? Label : /*#__PURE__*/_jsx("div", {
145
- className: `${baseClass}__block-header`,
146
- children: /*#__PURE__*/_jsxs("div", {
147
- children: [/*#__PURE__*/_jsx(Pill, {
148
- className: `${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`,
149
- pillStyle: "white",
150
- children: clientBlock && typeof clientBlock.labels?.singular === 'string' ? getTranslation(clientBlock.labels.singular, i18n) : clientBlock?.slug
151
- }), /*#__PURE__*/_jsx(SectionTitle, {
152
- path: "blockName",
153
- readOnly: parentLexicalRichTextField?.admin?.readOnly || false
154
- })]
155
- })
156
- }),
157
- children: /*#__PURE__*/_jsx(ShimmerEffect, {
158
- height: "35vh"
159
- })
160
- }, 0);
161
- }, [clientBlock, initialState, onChange, submitted, parentLexicalRichTextField, nodeKey, path, schemaFieldsPath, classNames, i18n]);
162
- return /*#__PURE__*/_jsx("div", {
163
- className: baseClass + ' ' + baseClass + '-' + formData.blockType,
164
- children: formContent
165
- });
340
+ });
341
+ }, [BlockCollapsible, BlockDrawer, CustomBlock, RemoveButton, EditButton, editor, errorCount, toggleDrawer, clientBlock.fields,
342
+ // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
343
+ initialState, nodeKey, onChange, submitted]);
344
+ return Block;
166
345
  };
167
346
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Collapsible","Form","Pill","SectionTitle","ShimmerEffect","useDocumentInfo","useFormSubmitted","useServerFunctions","useTranslation","abortAndIgnore","React","useCallback","useEffect","useMemo","useRef","useState","baseClass","getTranslation","v4","uuid","useEditorConfigContext","BlockContent","BlockComponent","props","formData","nodeKey","submitted","id","collectionSlug","globalSlug","fieldProps","featureClientSchemaMap","field","parentLexicalRichTextField","path","schemaPath","onChangeAbortControllerRef","AbortController","docPermissions","getDocPreferences","getFormState","initialState","setInitialState","schemaFieldsPath","blockType","componentMapRenderedBlockPath","clientSchemaMap","blocksField","clientBlock","blocks","i18n","abortController","awaitInitialState","state","data","fields","docPreferences","operation","renderAllFields","signal","blockName","initialValue","passesCondition","valid","value","onChange","formState","prevFormState","current","controller","newFormState","classNames","filter","Boolean","join","Label","admin","components","formContent","_jsx","beforeSubmit","formSchema","className","collapsibleStyle","header","_jsxs","pillStyle","labels","singular","slug","readOnly","height"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n Collapsible,\n Form,\n Pill,\n SectionTitle,\n ShimmerEffect,\n useDocumentInfo,\n useFormSubmitted,\n useServerFunctions,\n useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nconst baseClass = 'lexical-block'\nimport { getTranslation } from '@payloadcms/translations'\nimport { type BlocksFieldClient, type FormState } from 'payload'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\n\ntype Props = {\n readonly children?: React.ReactNode\n readonly formData: BlockFields\n readonly nodeKey: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n const { formData, nodeKey } = props\n const submitted = useFormSubmitted()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n const {\n fieldProps: { featureClientSchemaMap, field: parentLexicalRichTextField, path, schemaPath },\n } = useEditorConfigContext()\n const onChangeAbortControllerRef = useRef(new AbortController())\n const { docPermissions, getDocPreferences } = useDocumentInfo()\n\n const { getFormState } = useServerFunctions()\n\n const [initialState, setInitialState] = useState<false | FormState | undefined>(false)\n\n const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`\n\n const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`\n\n const clientSchemaMap = featureClientSchemaMap['blocks']\n\n const blocksField: BlocksFieldClient = clientSchemaMap[\n componentMapRenderedBlockPath\n ][0] as BlocksFieldClient\n\n const clientBlock = blocksField.blocks[0]\n\n const { i18n } = useTranslation()\n\n // Field Schema\n useEffect(() => {\n const abortController = new AbortController()\n\n const awaitInitialState = async () => {\n const { state } = await getFormState({\n id,\n collectionSlug,\n data: formData,\n docPermissions: { fields: true },\n docPreferences: await getDocPreferences(),\n globalSlug,\n operation: 'update',\n renderAllFields: true,\n schemaPath: schemaFieldsPath,\n signal: abortController.signal,\n })\n\n if (state) {\n state.blockName = {\n initialValue: '',\n passesCondition: true,\n valid: true,\n value: formData.blockName,\n }\n\n setInitialState(state)\n }\n }\n\n if (formData) {\n void awaitInitialState()\n }\n\n return () => {\n abortAndIgnore(abortController)\n }\n }, [\n getFormState,\n schemaFieldsPath,\n id,\n collectionSlug,\n globalSlug,\n getDocPreferences,\n // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n ])\n\n const onChange = useCallback(\n async ({ formState: prevFormState }) => {\n abortAndIgnore(onChangeAbortControllerRef.current)\n\n const controller = new AbortController()\n onChangeAbortControllerRef.current = controller\n\n const { state: newFormState } = await getFormState({\n id,\n collectionSlug,\n docPermissions,\n docPreferences: await getDocPreferences(),\n formState: prevFormState,\n globalSlug,\n operation: 'update',\n schemaPath: schemaFieldsPath,\n signal: controller.signal,\n })\n\n if (!newFormState) {\n return prevFormState\n }\n\n newFormState.blockName = {\n initialValue: '',\n passesCondition: true,\n valid: true,\n value: formData.blockName,\n }\n\n return newFormState\n },\n\n [\n getFormState,\n id,\n collectionSlug,\n docPermissions,\n getDocPreferences,\n globalSlug,\n schemaFieldsPath,\n formData.blockName,\n ],\n )\n\n useEffect(() => {\n return () => {\n abortAndIgnore(onChangeAbortControllerRef.current)\n }\n }, [])\n\n const classNames = [`${baseClass}__row`, `${baseClass}__row--no-errors`].filter(Boolean).join(' ')\n\n const Label = clientBlock?.admin?.components?.Label\n\n // Memoized Form JSX\n const formContent = useMemo(() => {\n return clientBlock && initialState !== false ? (\n <Form\n beforeSubmit={[onChange]}\n fields={clientBlock.fields}\n initialState={initialState}\n onChange={[onChange]}\n submitted={submitted}\n uuid={uuid()}\n >\n <BlockContent\n baseClass={baseClass}\n clientBlock={clientBlock}\n field={parentLexicalRichTextField}\n formData={formData}\n formSchema={clientBlock.fields}\n nodeKey={nodeKey}\n path={`${path}.lexical_internal_feature.blocks.${formData.blockType}`}\n schemaPath={schemaFieldsPath}\n />\n </Form>\n ) : (\n <Collapsible\n className={classNames}\n collapsibleStyle=\"default\"\n header={\n clientBlock?.admin?.components?.Label ? (\n Label\n ) : (\n <div className={`${baseClass}__block-header`}>\n <div>\n <Pill\n className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n pillStyle=\"white\"\n >\n {clientBlock && typeof clientBlock.labels?.singular === 'string'\n ? getTranslation(clientBlock.labels.singular, i18n)\n : clientBlock?.slug}\n </Pill>\n <SectionTitle\n path=\"blockName\"\n readOnly={parentLexicalRichTextField?.admin?.readOnly || false}\n />\n </div>\n </div>\n )\n }\n key={0}\n >\n <ShimmerEffect height=\"35vh\" />\n </Collapsible>\n )\n }, [\n clientBlock,\n initialState,\n onChange,\n submitted,\n parentLexicalRichTextField,\n nodeKey,\n path,\n schemaFieldsPath,\n classNames,\n i18n,\n // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n ])\n\n return <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>{formContent}</div>\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["Button","Collapsible","Drawer","EditDepthProvider","ErrorPill","Form","formatDrawerSlug","FormSubmit","Pill","RenderFields","SectionTitle","useDocumentInfo","useEditDepth","useFormSubmitted","useServerFunctions","useTranslation","abortAndIgnore","deepCopyObjectSimpleWithoutReactComponents","reduceFieldsToValues","React","useCallback","useEffect","useMemo","useRef","baseClass","useLexicalComposerContext","getTranslation","$getNodeByKey","v4","uuid","useEditorConfigContext","useLexicalDrawer","$isBlockNode","BlockContent","removeEmptyArrayValues","BlockComponent","props","formData","nodeKey","submitted","id","collectionSlug","globalSlug","fieldProps","featureClientSchemaMap","field","parentLexicalRichTextField","initialLexicalFormState","permissions","readOnly","schemaPath","uuidFromContext","onChangeAbortControllerRef","AbortController","editDepth","errorCount","setErrorCount","useState","drawerSlug","slug","depth","toggleDrawer","getDocPreferences","setDocFieldPreferences","editor","getFormState","schemaFieldsPath","blockType","initialState","setInitialState","formState","blockName","initialValue","passesCondition","valid","value","abortController","awaitInitialState","state","data","docPermissions","fields","docPreferences","operation","renderAllFields","signal","isCollapsed","setIsCollapsed","collapsed","componentMapRenderedBlockPath","clientSchemaMap","blocksField","clientBlock","blocks","i18n","t","onChange","prevFormState","submit","current","controller","newFormState","newFormStateData","setTimeout","update","node","newData","setFields","rowErrorCount","formField","Object","values","removeBlock","remove","CustomLabel","customComponents","BlockLabel","CustomBlock","Block","blockDisplayName","labels","singular","onCollapsedChange","changedCollapsed","then","currentDocPreferences","currentFieldPreferences","name","collapsedArray","newCollapsed","length","includes","push","splice","indexOf","hello","EditButton","_jsx","buttonStyle","className","disabled","el","icon","onClick","round","size","tooltip","label","RemoveButton","admin","e","preventDefault","BlockCollapsible","children","editButton","fieldHasErrors","Label","removeButton","join","collapsibleStyle","header","_jsxs","pillStyle","path","count","withMessage","isEditable","onToggle","incomingCollapsedState","BlockDrawer","title","_Fragment","forceRender","parentIndexPath","parentPath","parentSchemaPath","beforeSubmit","onSubmit","formSchema"],"sources":["../../../../../src/features/blocks/client/component/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n Button,\n Collapsible,\n Drawer,\n EditDepthProvider,\n ErrorPill,\n Form,\n formatDrawerSlug,\n FormSubmit,\n Pill,\n RenderFields,\n SectionTitle,\n useDocumentInfo,\n useEditDepth,\n useFormSubmitted,\n useServerFunctions,\n useTranslation,\n} from '@payloadcms/ui'\nimport { abortAndIgnore } from '@payloadcms/ui/shared'\nimport { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\n\nconst baseClass = 'lexical-block'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { getTranslation } from '@payloadcms/translations'\nimport { $getNodeByKey } from 'lexical'\nimport { type BlocksFieldClient, type CollapsedPreferences, type FormState } from 'payload'\nimport { v4 as uuid } from 'uuid'\n\nimport type { BlockFields } from '../../server/nodes/BlocksNode.js'\n\nimport { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js'\nimport { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js'\nimport { $isBlockNode } from '../nodes/BlocksNode.js'\nimport { BlockContent } from './BlockContent.js'\nimport './index.scss'\nimport { removeEmptyArrayValues } from './removeEmptyArrayValues.js'\n\ntype Props = {\n readonly children?: React.ReactNode\n readonly formData: BlockFields\n readonly nodeKey: string\n}\n\nexport const BlockComponent: React.FC<Props> = (props) => {\n const { formData, nodeKey } = props\n const submitted = useFormSubmitted()\n const { id, collectionSlug, globalSlug } = useDocumentInfo()\n const {\n fieldProps: {\n featureClientSchemaMap,\n field: parentLexicalRichTextField,\n initialLexicalFormState,\n permissions,\n readOnly,\n schemaPath,\n },\n uuid: uuidFromContext,\n } = useEditorConfigContext()\n const onChangeAbortControllerRef = useRef(new AbortController())\n const editDepth = useEditDepth()\n const [errorCount, setErrorCount] = React.useState(0)\n\n const drawerSlug = formatDrawerSlug({\n slug: `lexical-blocks-create-${uuidFromContext}-${formData.id}`,\n depth: editDepth,\n })\n const { toggleDrawer } = useLexicalDrawer(drawerSlug, true)\n\n // Used for saving collapsed to preferences (and gettin' it from there again)\n // Remember, these preferences are scoped to the whole document, not just this form. This\n // is important to consider for the data path used in setDocFieldPreferences\n const { getDocPreferences, setDocFieldPreferences } = useDocumentInfo()\n const [editor] = useLexicalComposerContext()\n\n const { getFormState } = useServerFunctions()\n const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}.fields`\n\n const [initialState, setInitialState] = React.useState<false | FormState | undefined>(\n initialLexicalFormState?.[formData.id]?.formState\n ? {\n ...initialLexicalFormState?.[formData.id]?.formState,\n blockName: {\n initialValue: formData.blockName,\n passesCondition: true,\n valid: true,\n value: formData.blockName,\n },\n }\n : false,\n )\n\n // Initial state for newly created blocks\n useEffect(() => {\n const abortController = new AbortController()\n\n const awaitInitialState = async () => {\n /*\n * This will only run if a new block is created. For all existing blocks that are loaded when the document is loaded, or when the form is saved,\n * this is not run, as the lexical field RSC will fetch the state server-side and pass it to the client. That way, we avoid unnecessary client-side\n * requests. Though for newly created blocks, we need to fetch the state client-side, as the server doesn't know about the block yet.\n */\n const { state } = await getFormState({\n id,\n collectionSlug,\n data: formData,\n docPermissions: { fields: true },\n docPreferences: await getDocPreferences(),\n globalSlug,\n operation: 'update',\n renderAllFields: true,\n schemaPath: schemaFieldsPath,\n signal: abortController.signal,\n })\n\n if (state) {\n state.blockName = {\n initialValue: formData.blockName,\n passesCondition: true,\n valid: true,\n value: formData.blockName,\n }\n\n setInitialState(state)\n }\n }\n\n if (formData && !initialState) {\n void awaitInitialState()\n }\n\n return () => {\n abortAndIgnore(abortController)\n }\n }, [\n getFormState,\n schemaFieldsPath,\n id,\n formData,\n initialState,\n collectionSlug,\n globalSlug,\n getDocPreferences,\n ])\n\n const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\n initialLexicalFormState?.[formData.id]?.collapsed ?? false,\n )\n\n const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${formData.blockType}`\n\n const clientSchemaMap = featureClientSchemaMap['blocks']\n\n const blocksField: BlocksFieldClient = clientSchemaMap[\n componentMapRenderedBlockPath\n ][0] as BlocksFieldClient\n\n const clientBlock = blocksField.blocks[0]\n\n const { i18n, t } = useTranslation<object, string>()\n\n const onChange = useCallback(\n async ({ formState: prevFormState, submit }) => {\n abortAndIgnore(onChangeAbortControllerRef.current)\n\n const controller = new AbortController()\n onChangeAbortControllerRef.current = controller\n\n const { state: newFormState } = await getFormState({\n id,\n collectionSlug,\n docPermissions: {\n fields: true,\n },\n docPreferences: await getDocPreferences(),\n formState: prevFormState,\n globalSlug,\n operation: 'update',\n schemaPath: schemaFieldsPath,\n signal: controller.signal,\n })\n\n if (!newFormState) {\n return prevFormState\n }\n\n newFormState.blockName = prevFormState.blockName\n\n const newFormStateData: BlockFields = reduceFieldsToValues(\n removeEmptyArrayValues({\n fields: deepCopyObjectSimpleWithoutReactComponents(newFormState),\n }),\n true,\n ) as BlockFields\n\n setTimeout(() => {\n editor.update(() => {\n const node = $getNodeByKey(nodeKey)\n if (node && $isBlockNode(node)) {\n const newData = {\n ...newFormStateData,\n blockType: formData.blockType,\n }\n node.setFields(newData)\n }\n })\n }, 0)\n\n if (submit) {\n let rowErrorCount = 0\n for (const formField of Object.values(newFormState)) {\n if (formField?.valid === false) {\n rowErrorCount++\n }\n }\n setErrorCount(rowErrorCount)\n }\n\n return newFormState\n },\n\n [\n getFormState,\n id,\n collectionSlug,\n getDocPreferences,\n globalSlug,\n schemaFieldsPath,\n formData.blockType,\n editor,\n nodeKey,\n ],\n )\n\n useEffect(() => {\n return () => {\n abortAndIgnore(onChangeAbortControllerRef.current)\n }\n }, [])\n\n const removeBlock = useCallback(() => {\n editor.update(() => {\n $getNodeByKey(nodeKey)?.remove()\n })\n }, [editor, nodeKey])\n\n const CustomLabel = initialState?.['_components']?.customComponents?.BlockLabel\n const CustomBlock = initialState?.['_components']?.customComponents?.Block\n\n const blockDisplayName = clientBlock?.labels?.singular\n ? getTranslation(clientBlock.labels.singular, i18n)\n : clientBlock?.slug\n\n const onCollapsedChange = useCallback(\n (changedCollapsed: boolean) => {\n void getDocPreferences().then((currentDocPreferences) => {\n const currentFieldPreferences =\n currentDocPreferences?.fields[parentLexicalRichTextField.name]\n\n const collapsedArray = currentFieldPreferences?.collapsed\n\n const newCollapsed: CollapsedPreferences =\n collapsedArray && collapsedArray?.length ? collapsedArray : []\n\n if (changedCollapsed) {\n if (!newCollapsed.includes(formData.id)) {\n newCollapsed.push(formData.id)\n }\n } else {\n if (newCollapsed.includes(formData.id)) {\n newCollapsed.splice(newCollapsed.indexOf(formData.id), 1)\n }\n }\n\n setDocFieldPreferences(parentLexicalRichTextField.name, {\n collapsed: newCollapsed,\n hello: 'hi',\n })\n })\n },\n [getDocPreferences, parentLexicalRichTextField.name, setDocFieldPreferences, formData.id],\n )\n\n const EditButton = useMemo(\n () => () => (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__editButton`}\n disabled={readOnly}\n el=\"div\"\n icon=\"edit\"\n onClick={() => {\n toggleDrawer()\n }}\n round\n size=\"small\"\n tooltip={t('lexical:blocks:inlineBlocks:edit', { label: blockDisplayName })}\n />\n ),\n [blockDisplayName, readOnly, t, toggleDrawer],\n )\n\n const RemoveButton = useMemo(\n () => () => (\n <Button\n buttonStyle=\"icon-label\"\n className={`${baseClass}__removeButton`}\n disabled={parentLexicalRichTextField?.admin?.readOnly || false}\n icon=\"x\"\n onClick={(e) => {\n e.preventDefault()\n removeBlock()\n }}\n round\n tooltip=\"Remove Block\"\n />\n ),\n [parentLexicalRichTextField?.admin?.readOnly, removeBlock],\n )\n\n const BlockCollapsible = useMemo(\n () =>\n ({\n children,\n editButton,\n errorCount,\n fieldHasErrors,\n Label,\n removeButton,\n }: {\n children?: React.ReactNode\n editButton?: boolean\n errorCount?: number\n fieldHasErrors?: boolean\n /**\n * Override the default label with a custom label\n */\n Label?: React.ReactNode\n removeButton?: boolean\n }) => (\n <div className={baseClass + ' ' + baseClass + '-' + formData.blockType}>\n <Collapsible\n className={[\n `${baseClass}__row`,\n fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n ].join(' ')}\n collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n header={\n <div className={`${baseClass}__block-header`}>\n {(Label ?? CustomLabel) ? (\n (Label ?? CustomLabel)\n ) : (\n <div>\n <Pill\n className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}\n pillStyle=\"white\"\n >\n {blockDisplayName}\n </Pill>\n <SectionTitle\n path=\"blockName\"\n readOnly={parentLexicalRichTextField?.admin?.readOnly || false}\n />\n {fieldHasErrors && (\n <ErrorPill count={errorCount ?? 0} i18n={i18n} withMessage />\n )}\n </div>\n )}\n\n <div>\n {(CustomBlock && editButton !== false) || (!CustomBlock && editButton) ? (\n <EditButton />\n ) : null}\n {removeButton !== false && editor.isEditable() ? <RemoveButton /> : null}\n </div>\n </div>\n }\n isCollapsed={isCollapsed}\n key={0}\n onToggle={(incomingCollapsedState) => {\n onCollapsedChange(incomingCollapsedState)\n setIsCollapsed(incomingCollapsedState)\n }}\n >\n {children}\n </Collapsible>\n </div>\n ),\n [\n CustomBlock,\n CustomLabel,\n EditButton,\n RemoveButton,\n blockDisplayName,\n editor,\n formData.blockType,\n i18n,\n isCollapsed,\n onCollapsedChange,\n parentLexicalRichTextField?.admin?.readOnly,\n ],\n )\n\n const BlockDrawer = useMemo(\n () => () => (\n <EditDepthProvider>\n <Drawer\n className={''}\n slug={drawerSlug}\n title={t(`lexical:blocks:inlineBlocks:${formData?.id ? 'edit' : 'create'}`, {\n label: blockDisplayName ?? t('lexical:blocks:inlineBlocks:label'),\n })}\n >\n {initialState ? (\n <>\n <RenderFields\n fields={clientBlock.fields}\n forceRender\n parentIndexPath=\"\"\n parentPath=\"\" // See Blocks feature path for details as for why this is empty\n parentSchemaPath={schemaFieldsPath}\n permissions={permissions}\n readOnly={false}\n />\n <FormSubmit>{t('fields:saveChanges')}</FormSubmit>\n </>\n ) : null}\n </Drawer>\n </EditDepthProvider>\n ),\n [\n initialState,\n drawerSlug,\n blockDisplayName,\n t,\n clientBlock.fields,\n schemaFieldsPath,\n permissions,\n // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n ],\n )\n\n // Memoized Form JSX\n const Block = useMemo(() => {\n if (!initialState) {\n return null\n }\n return (\n <Form\n beforeSubmit={[\n async ({ formState }) => {\n return await onChange({ formState, submit: true })\n },\n ]}\n fields={clientBlock.fields}\n initialState={initialState}\n onChange={[onChange]}\n onSubmit={(formState) => {\n // THis is only called when form is submitted from drawer - usually only the case if the block has a custom Block component\n const newData: any = reduceFieldsToValues(formState)\n newData.blockType = formData.blockType\n editor.update(() => {\n const node = $getNodeByKey(nodeKey)\n if (node && $isBlockNode(node)) {\n node.setFields(newData)\n }\n })\n toggleDrawer()\n }}\n submitted={submitted}\n uuid={uuid()}\n >\n <BlockContent\n baseClass={baseClass}\n BlockDrawer={BlockDrawer}\n Collapsible={BlockCollapsible}\n CustomBlock={CustomBlock}\n EditButton={EditButton}\n errorCount={errorCount}\n formSchema={clientBlock.fields}\n initialState={initialState}\n nodeKey={nodeKey}\n RemoveButton={RemoveButton}\n />\n </Form>\n )\n }, [\n BlockCollapsible,\n BlockDrawer,\n CustomBlock,\n RemoveButton,\n EditButton,\n editor,\n errorCount,\n toggleDrawer,\n clientBlock.fields,\n // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.\n initialState,\n nodeKey,\n onChange,\n submitted,\n ])\n\n return Block\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ export declare const InlineBlockContainer: ({ children }: {
3
+ children: any;
4
+ }) => React.JSX.Element | null;
5
+ //# sourceMappingURL=InlineBlockContainer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockContainer.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,oBAAoB;;8BAIhC,CAAA"}
@@ -0,0 +1,28 @@
1
+ 'use client';
2
+
3
+ import { c as _c } from "react/compiler-runtime";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import React from 'react';
6
+ import { useInlineBlockComponentContext } from '../index.js';
7
+ export const InlineBlockContainer = t0 => {
8
+ const $ = _c(3);
9
+ const {
10
+ children
11
+ } = t0;
12
+ const {
13
+ InlineBlockContainer
14
+ } = useInlineBlockComponentContext();
15
+ let t1;
16
+ if ($[0] !== InlineBlockContainer || $[1] !== children) {
17
+ t1 = InlineBlockContainer ? _jsx(InlineBlockContainer, {
18
+ children
19
+ }) : null;
20
+ $[0] = InlineBlockContainer;
21
+ $[1] = children;
22
+ $[2] = t1;
23
+ } else {
24
+ t1 = $[2];
25
+ }
26
+ return t1;
27
+ };
28
+ //# sourceMappingURL=InlineBlockContainer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockContainer.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockContainer","t0","$","children","t1","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockContainer.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockContainer = ({ children }) => {\n const { InlineBlockContainer } = useInlineBlockComponentContext()\n\n return InlineBlockContainer ? <InlineBlockContainer>{children}</InlineBlockContainer> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,oBAAA,GAAuBC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM;EAAA,IAAAF,EAAY;EAC/C;IAAAD;EAAA,IAAiCD,8BAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAF,oBAAA,IAAAE,CAAA,QAAAC,QAAA;IAE1BC,EAAA,GAAAJ,oBAAA,GAAuBK,IAAA,CAACL,oBAAA;MAAAG;IAAA,C,QAAyD;IAAAD,CAAA,MAAAF,oBAAA;IAAAE,CAAA,MAAAC,QAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAjFE,EAAiF;AAAA,CAC1F","ignoreList":[]}
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const InlineBlockEditButton: () => React.JSX.Element | null;
3
+ //# sourceMappingURL=InlineBlockEditButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockEditButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,qBAAqB,gCAIjC,CAAA"}
@@ -0,0 +1,22 @@
1
+ 'use client';
2
+
3
+ import { c as _c } from "react/compiler-runtime";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import React from 'react';
6
+ import { useInlineBlockComponentContext } from '../index.js';
7
+ export const InlineBlockEditButton = () => {
8
+ const $ = _c(2);
9
+ const {
10
+ EditButton
11
+ } = useInlineBlockComponentContext();
12
+ let t0;
13
+ if ($[0] !== EditButton) {
14
+ t0 = EditButton ? _jsx(EditButton, {}) : null;
15
+ $[0] = EditButton;
16
+ $[1] = t0;
17
+ } else {
18
+ t0 = $[1];
19
+ }
20
+ return t0;
21
+ };
22
+ //# sourceMappingURL=InlineBlockEditButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockEditButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockEditButton","$","EditButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockEditButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockEditButton = () => {\n const { EditButton } = useInlineBlockComponentContext()\n\n return EditButton ? <EditButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,qBAAA,GAAwBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACnC;IAAAK;EAAA,IAAuBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,UAAA;IAEhBC,EAAA,GAAAD,UAAA,GAAaE,IAAA,CAACF,UAAA,YAAgB;IAAAD,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAA9BE,EAA8B;AAAA,CACvC","ignoreList":[]}
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const InlineBlockLabel: () => React.JSX.Element | null;
3
+ //# sourceMappingURL=InlineBlockLabel.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockLabel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,gBAAgB,gCAI5B,CAAA"}
@@ -0,0 +1,22 @@
1
+ 'use client';
2
+
3
+ import { c as _c } from "react/compiler-runtime";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import React from 'react';
6
+ import { useInlineBlockComponentContext } from '../index.js';
7
+ export const InlineBlockLabel = () => {
8
+ const $ = _c(2);
9
+ const {
10
+ Label
11
+ } = useInlineBlockComponentContext();
12
+ let t0;
13
+ if ($[0] !== Label) {
14
+ t0 = Label ? _jsx(Label, {}) : null;
15
+ $[0] = Label;
16
+ $[1] = t0;
17
+ } else {
18
+ t0 = $[1];
19
+ }
20
+ return t0;
21
+ };
22
+ //# sourceMappingURL=InlineBlockLabel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockLabel.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockLabel","$","Label","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockLabel.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockLabel = () => {\n const { Label } = useInlineBlockComponentContext()\n\n return Label ? <Label /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,gBAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EAC9B;IAAAK;EAAA,IAAkBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,KAAA;IAEXC,EAAA,GAAAD,KAAA,GAAQE,IAAA,CAACF,KAAA,YAAW;IAAAD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAApBE,EAAoB;AAAA,CAC7B","ignoreList":[]}
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export declare const InlineBlockRemoveButton: () => React.JSX.Element | null;
3
+ //# sourceMappingURL=InlineBlockRemoveButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockRemoveButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,uBAAuB,gCAInC,CAAA"}
@@ -0,0 +1,22 @@
1
+ 'use client';
2
+
3
+ import { c as _c } from "react/compiler-runtime";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import React from 'react';
6
+ import { useInlineBlockComponentContext } from '../index.js';
7
+ export const InlineBlockRemoveButton = () => {
8
+ const $ = _c(2);
9
+ const {
10
+ RemoveButton
11
+ } = useInlineBlockComponentContext();
12
+ let t0;
13
+ if ($[0] !== RemoveButton) {
14
+ t0 = RemoveButton ? _jsx(RemoveButton, {}) : null;
15
+ $[0] = RemoveButton;
16
+ $[1] = t0;
17
+ } else {
18
+ t0 = $[1];
19
+ }
20
+ return t0;
21
+ };
22
+ //# sourceMappingURL=InlineBlockRemoveButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InlineBlockRemoveButton.js","names":["c","_c","React","useInlineBlockComponentContext","InlineBlockRemoveButton","$","RemoveButton","t0","_jsx"],"sources":["../../../../../../src/features/blocks/client/componentInline/components/InlineBlockRemoveButton.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useInlineBlockComponentContext } from '../index.js'\n\nexport const InlineBlockRemoveButton = () => {\n const { RemoveButton } = useInlineBlockComponentContext()\n\n return RemoveButton ? <RemoveButton /> : null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,8BAA8B,QAAQ;AAE/C,OAAO,MAAMC,uBAAA,GAA0BA,CAAA;EAAA,MAAAC,CAAA,GAAAJ,EAAA;EACrC;IAAAK;EAAA,IAAyBH,8BAAA;EAAA,IAAAI,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA;IAElBC,EAAA,GAAAD,YAAA,GAAeE,IAAA,CAACF,YAAA,YAAkB;IAAAD,CAAA,MAAAC,YAAA;IAAAD,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAAA,OAAlCE,EAAkC;AAAA,CAC3C","ignoreList":[]}