adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-01 15:31:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

process image fields in blocks

Browse Source
This commit is contained in:
Elio Struyf
2023-06-21 09:00:47 +02:00
parent b799b46d08
commit b644cab111
5 changed files with 112 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/helpers/ContentType.ts
+47
View File
@@ -435,6 +435,53 @@ export class ContentType {
return emptyFields || [];
}
public static findFieldsByTypeDeep(
fields: Field[],
type: FieldType,
parents: Field[][] = [],
parentFields: Field[] = []
): Field[][] {
for (const field of fields) {
if (field.type === type) {
parents.push([...parentFields, field]);
} else if (field.type === 'fields' && field.fields) {
this.findFieldsByTypeDeep(field.fields, type, parents, [...parentFields, field]);
} else if (field.type === 'block') {
const groups =
field.fieldGroup && Array.isArray(field.fieldGroup)
? field.fieldGroup
: [field.fieldGroup];
const blocks = Settings.get<FieldGroup[]>(SETTING_TAXONOMY_FIELD_GROUPS);
if (groups && blocks) {
let found = false;
for (const group of groups) {
const block = blocks.find((block) => block.id === group);
if (!block) {
continue;
}
let newParents: Field[][] = [];
if (!found) {
newParents = this.findFieldsByTypeDeep(block?.fields, type, parents, [
...parentFields,
field
]);
}
if (newParents.length > 0) {
found = true;
return newParents;
}
}
}
}
}
return parents;
}
/**
* Find all the required fields in the content type
* @param fields
src/helpers/ImageHelper.ts
+1
View File
@@ -103,6 +103,7 @@ export class ImageHelper {
* @param parents
*/
public static processImageFields(updatedMetadata: any, fields: Field[], parents: string[] = []) {
// TODO: Support image fields from blocks
const imageFields = fields.filter((field) => field.type === 'image');
const panel = ExplorerView.getInstance();
src/listeners/panel/DataListener.ts
+60 -29
View File
@@ -6,7 +6,7 @@ import { Command } from '../../panelWebView/Command';
import { CommandToCode } from '../../panelWebView/CommandToCode';
import { BaseListener } from './BaseListener';
import { commands, ThemeIcon, window } from 'vscode';
import { ArticleHelper, Logger, Settings } from '../../helpers';
import { ArticleHelper, ContentType, Logger, Settings } from '../../helpers';
import {
COMMAND_NAME,
DefaultFields,
@@ -17,7 +17,7 @@ import {
import { Article, Preview } from '../../commands';
import { ParsedFrontMatter } from '../../parsers';
import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper';
import { PostMessageData } from '../../models';
import { Field, PostMessageData } from '../../models';
import { encodeEmoji } from '../../utils';
const FILE_LIMIT = 10;
@@ -183,48 +183,79 @@ export class DataListener extends BaseListener {
}
const contentType = ArticleHelper.getContentType(article.data);
const dateFields = contentType.fields.filter((f) => f.type === 'datetime');
const imageFields = contentType.fields.filter((f) => f.type === 'image' && f.multiple);
const fileFields = contentType.fields.filter((f) => f.type === 'file' && f.multiple);
const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji);
const dateFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'datetime');
const imageFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'image');
const fileFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'file');
// const dateFields = contentType.fields.filter((f) => f.type === 'datetime');
// const imageFields = contentType.fields.filter((f) => f.type === 'image' && f.multiple);
// const fileFields = contentType.fields.filter((f) => f.type === 'file' && f.multiple);
// const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji);
// Support multi-level fields
const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
const isDateField = dateFields.some((f) => f.name === field);
const isMultiImageField = imageFields.some((f) => f.name === field);
const isMultiFileField = fileFields.some((f) => f.name === field);
const dateFieldsArray = dateFields.find((f: Field[]) => {
const lastField = f?.[f.length - 1];
if (lastField) {
return lastField.name === field;
}
});
if (isDateField) {
for (const dateField of dateFields) {
const multiImageFieldsArray = imageFields.find((f: Field[]) => {
const lastField = f?.[f.length - 1];
if (lastField) {
return lastField.name === field;
}
});
const multiFileFieldsArray = fileFields.find((f: Field[]) => {
const lastField = f?.[f.length - 1];
if (lastField) {
return lastField.name === field;
}
});
// const isDateField = dateFields.some((f) => f.name === field);
// const isMultiImageField = imageFields.some((f) => f.name === field);
// const isMultiFileField = fileFields.some((f) => f.name === field);
if (dateFieldsArray && dateFieldsArray.length > 0) {
for (const dateField of dateFieldsArray) {
if (field === dateField.name && value) {
parentObj[field] = Article.formatDate(new Date(value));
}
}
} else if (isMultiImageField || isMultiFileField) {
const fields = isMultiImageField ? imageFields : fileFields;
} else if (multiImageFieldsArray || multiFileFieldsArray) {
const fields =
multiImageFieldsArray && multiImageFieldsArray.length > 0
? multiImageFieldsArray
: multiFileFieldsArray;
for (const crntField of fields) {
if (field === crntField.name) {
// If value is an array, it means it comes from the explorer view itself (deletion)
if (Array.isArray(value)) {
parentObj[field] = value || [];
} else {
// Otherwise it is coming from the media dashboard (addition)
let fieldValue = parentObj[field];
if (fieldValue && !Array.isArray(fieldValue)) {
fieldValue = [fieldValue];
if (fields) {
for (const crntField of fields) {
if (field === crntField.name) {
// If value is an array, it means it comes from the explorer view itself (deletion)
if (Array.isArray(value)) {
parentObj[field] = value || [];
} else {
// Otherwise it is coming from the media dashboard (addition)
let fieldValue = parentObj[field];
if (fieldValue && !Array.isArray(fieldValue)) {
fieldValue = [fieldValue];
}
const crntData = Object.assign([], fieldValue);
const allRelPaths = [...(crntData || []), value];
parentObj[field] = [...new Set(allRelPaths)].filter((f) => f);
}
const crntData = Object.assign([], fieldValue);
const allRelPaths = [...(crntData || []), value];
parentObj[field] = [...new Set(allRelPaths)].filter((f) => f);
}
}
}
} else {
if (fieldsWithEmojiEncoding.some((f) => f.name === field)) {
value = encodeEmoji(value);
}
// if (fieldsWithEmojiEncoding.some((f) => f.name === field)) {
// value = encodeEmoji(value);
// }
parentObj[field] = value;
}
src/panelWebView/components/Fields/PreviewImageField.tsx
+3 -2
View File
@@ -50,9 +50,10 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
}, [filePath, fieldName, value, multiple, parents]);
const onImageRemove = (imageToRemove: string) => {
debugger;
const newValue =
value && Array.isArray(value)
? value.filter((image) => image.original !== imageToRemove).map((i) => i.original)
? value.filter((image) => (image?.original || image) !== imageToRemove).map((i) => (i?.original || i as any as string))
: null;
onChange(newValue);
};
@@ -96,7 +97,7 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
Array.isArray(value) &&
!isFaultyImage &&
value.map((image) => (
<PreviewImage key={image.original} value={image} onRemove={onImageRemove} />
<PreviewImage key={image?.original || image as any as string} value={image} onRemove={() => onImageRemove(image?.original || image as any as string)} />
))}
</div>
src/panelWebView/components/Fields/WrapperField.tsx
+1
View File
@@ -241,6 +241,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
</FieldBoundary>
);
} else if (field.type === 'image') {
console.log('image', field, fieldValue);
return (
<FieldBoundary key={field.name} fieldName={field.title || field.name}>
<PreviewImageField