From b799b46d08d93e8f0ac471f302e8fed17f177cd1 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 20 Jun 2023 15:36:00 +0200 Subject: [PATCH] #590 - Fix for image fields inside a sub-block --- CHANGELOG.md | 1 + src/listeners/panel/DataListener.ts | 17 +++++++++++--- src/models/BlockFieldData.ts | 2 +- .../components/DataBlock/DataBlockField.tsx | 22 +++++++++++++++++-- .../components/Fields/PreviewImageField.tsx | 9 ++++---- .../components/Fields/WrapperField.tsx | 5 +++-- 6 files changed, 43 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6136c4c5..78f3008f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ - [#567](https://github.com/estruyf/vscode-front-matter/issues/567): Fix taxonomy filters that are incorrectly positioned - [#572](https://github.com/estruyf/vscode-front-matter/issues/572): Fix the media snippet placeholder link - [#577](https://github.com/estruyf/vscode-front-matter/issues/577): Fix in the `dataFile` field where data entries get overwritten +- [#590](https://github.com/estruyf/vscode-front-matter/issues/590): Fix for image fields inside a sub-block ## [8.4.0] - 2023-04-03 - [Release notes](https://beta.frontmatter.codes/updates/v8.4.0) diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts index b1ed7e84..699b8ab3 100644 --- a/src/listeners/panel/DataListener.ts +++ b/src/listeners/panel/DataListener.ts @@ -254,6 +254,11 @@ export class DataListener extends BaseListener { let parentObj = data; let allParents = Object.assign([], parents); const contentType = ArticleHelper.getContentType(article.data); + const selectedIndexes = + typeof blockData?.selectedIndex === 'string' + ? blockData?.selectedIndex.split('.').map((v) => parseInt(v)) + : [blockData?.selectedIndex]; + let lastSelectedIndex: number | undefined; // Add support for block fields if (blockData?.parentFields) { @@ -272,13 +277,19 @@ export class DataListener extends BaseListener { parentObj = parentObj[parent]; crntField = contentType.fields.find((f) => f.name === parent); + + // Check if current field is an array + if (parentObj instanceof Array) { + lastSelectedIndex = selectedIndexes.shift(); + if (typeof lastSelectedIndex !== 'undefined') { + parentObj = parentObj[lastSelectedIndex]; + } + } } // Fetches the current block if (blockData && crntField && crntField.type === 'block') { - if (typeof blockData.selectedIndex !== 'undefined') { - parentObj = parentObj[blockData.selectedIndex]; - } else { + if (typeof lastSelectedIndex === 'undefined') { parentObj.push({ fieldGroup: blockData.blockType }); diff --git a/src/models/BlockFieldData.ts b/src/models/BlockFieldData.ts index cc1fe196..b7fbac65 100644 --- a/src/models/BlockFieldData.ts +++ b/src/models/BlockFieldData.ts @@ -1,5 +1,5 @@ export interface BlockFieldData { parentFields: string[] | undefined; blockType: string | undefined; - selectedIndex: number | undefined; + selectedIndex: number | string | undefined; } diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx index 813934e9..0b9027d2 100644 --- a/src/panelWebView/components/DataBlock/DataBlockField.tsx +++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx @@ -15,6 +15,7 @@ export interface IDataBlockFieldProps { field: Field; parentFields: string[]; value: any; + blockData: BlockFieldData | undefined; filePath: string; fieldsRenderer: ( ctFields: Field[], @@ -37,6 +38,7 @@ export const DataBlockField: React.FunctionComponent = ({ field, parentFields = [], value, + blockData, fieldsRenderer, onSubmit, parentBlock, @@ -58,6 +60,7 @@ export const DataBlockField: React.FunctionComponent = ({ const onFieldUpdate = useCallback( (crntField: string | undefined, crntValue: any, parents: string[]) => { + debugger; const dataClone: any[] = Object.assign([], value); if (!crntField) { @@ -91,7 +94,7 @@ export const DataBlockField: React.FunctionComponent = ({ // Delete the field group to have it added at the end delete data['fieldGroup']; - if (selectedIndex !== null && selectedIndex !== undefined) { + if (selectedIndex !== null && selectedIndex !== undefined && dataClone.length > 0) { dataClone[selectedIndex] = { ...data, fieldGroup: selectedGroup?.id @@ -238,6 +241,21 @@ export const DataBlockField: React.FunctionComponent = ({ [SELECTION_STATE_KEY] ); + const getSelectedIndex = useCallback(() => { + console.log(blockData) + let crntValue = []; + + if (blockData?.selectedIndex !== null && blockData?.selectedIndex !== undefined) { + crntValue.push(blockData.selectedIndex); + } + + if (selectedIndex !== null && selectedIndex !== undefined) { + crntValue.push(selectedIndex); + } + + return crntValue.join('.'); + }, [blockData, selectedIndex]); + useEffect(() => { if (selectedIndex !== null) { const fieldData = value[selectedIndex]; @@ -293,7 +311,7 @@ export const DataBlockField: React.FunctionComponent = ({ { parentFields: [...parentFields, field.name], blockType: selectedGroup?.id || undefined, - selectedIndex: selectedIndex === null ? undefined : selectedIndex + selectedIndex: getSelectedIndex() }, onFieldUpdate, `${field.name}-${selectedGroup?.id}-${selectedIndex || 0}` diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx index a9f2766a..bd9adbac 100644 --- a/src/panelWebView/components/Fields/PreviewImageField.tsx +++ b/src/panelWebView/components/Fields/PreviewImageField.tsx @@ -70,11 +70,10 @@ export const PreviewImageField: React.FunctionComponent } required={required} />
0 - ? `metadata_field__multiple_images` - : '' - } ${showRequiredState ? 'required' : ''}`} + className={`metadata_field__preview_image ${multiple && value && (value as PreviewImageValue[]).length > 0 + ? `metadata_field__multiple_images` + : '' + } ${showRequiredState ? 'required' : ''}`} > {(!value || isFaultyImage || multiple) && (