diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index 086fc2e3..afed50ee 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/src/dashboardWebView/components/Contents/Item.tsx @@ -40,7 +40,6 @@ export const Item: React.FunctionComponent = ({ const { getColors } = useThemeColors(); const escapedTitle = useMemo(() => { - console.log('escapedTitle', title, cardFields?.title, pageData); let value = title; if (cardFields?.title) { diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts index d98d404f..8cf5da62 100644 --- a/src/helpers/ContentType.ts +++ b/src/helpers/ContentType.ts @@ -435,6 +435,14 @@ export class ContentType { return emptyFields || []; } + /** + * Find fields by type (deep search) + * @param fields + * @param type + * @param parents + * @param parentFields + * @returns + */ public static findFieldsByTypeDeep( fields: Field[], type: FieldType, @@ -482,6 +490,36 @@ export class ContentType { return parents; } + /** + * Retrieve the block field groups + * @param field + * @returns + */ + public static getBlockFieldGroups(field: Field): FieldGroup[] { + const groups = + field.fieldGroup && Array.isArray(field.fieldGroup) ? field.fieldGroup : [field.fieldGroup]; + if (!groups) { + return []; + } + + const blocks = Settings.get(SETTING_TAXONOMY_FIELD_GROUPS); + if (!blocks) { + return []; + } + + let foundBlocks = []; + for (const group of groups) { + const block = blocks.find((block) => block.id === group); + if (!block) { + continue; + } + + foundBlocks.push(block); + } + + return foundBlocks; + } + /** * Find all the required fields in the content type * @param fields diff --git a/src/helpers/ImageHelper.ts b/src/helpers/ImageHelper.ts index 83fb8069..93a150b0 100644 --- a/src/helpers/ImageHelper.ts +++ b/src/helpers/ImageHelper.ts @@ -103,7 +103,6 @@ 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(); diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts index c3ceb2ee..a55c32d0 100644 --- a/src/listeners/panel/DataListener.ts +++ b/src/listeners/panel/DataListener.ts @@ -187,11 +187,7 @@ export class DataListener extends BaseListener { 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); + const fieldsWithEmojiEncoding = contentType.fields.filter((f) => f.encodeEmoji); // Support multi-level fields const parentObj = DataListener.getParentObject(article.data, article, parents, blockData); @@ -206,14 +202,14 @@ export class DataListener extends BaseListener { const multiImageFieldsArray = imageFields.find((f: Field[]) => { const lastField = f?.[f.length - 1]; if (lastField) { - return lastField.name === field; + return lastField.name === field && lastField.multiple; } }); const multiFileFieldsArray = fileFields.find((f: Field[]) => { const lastField = f?.[f.length - 1]; if (lastField) { - return lastField.name === field; + return lastField.name === field && lastField.multiple; } }); @@ -253,9 +249,9 @@ export class DataListener extends BaseListener { } } } else { - // if (fieldsWithEmojiEncoding.some((f) => f.name === field)) { - // value = encodeEmoji(value); - // } + if (fieldsWithEmojiEncoding.some((f) => f.name === field)) { + value = encodeEmoji(value); + } parentObj[field] = value; } diff --git a/src/listeners/panel/FieldsListener.ts b/src/listeners/panel/FieldsListener.ts index 4bd3fbd6..27912d99 100644 --- a/src/listeners/panel/FieldsListener.ts +++ b/src/listeners/panel/FieldsListener.ts @@ -53,8 +53,6 @@ export class FieldsListener extends BaseListener { }); const pageResults = results.map((page) => page.item); - console.log('pageResults', pageResults); - this.sendRequest(command, requestId, pageResults || []); }); } diff --git a/src/listeners/panel/MediaListener.ts b/src/listeners/panel/MediaListener.ts index c663b818..576cea76 100644 --- a/src/listeners/panel/MediaListener.ts +++ b/src/listeners/panel/MediaListener.ts @@ -7,6 +7,7 @@ import { DashboardData, PostMessageData } from '../../models'; import { Command } from '../../panelWebView/Command'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; +import { Preview } from '../../commands'; export class MediaListener extends BaseListener { /** @@ -26,6 +27,46 @@ export class MediaListener extends BaseListener { case CommandToCode.getImageUrl: this.generateUrl(msg.payload); break; + case CommandToCode.processMediaData: + this.processMedia(msg.command, msg.payload, msg.requestId); + break; + } + } + + private static processMedia(command: string, payload: any, requestId?: string) { + if (!requestId || !payload) { + return; + } + + const panel = ExplorerView.getInstance(); + + if (typeof payload === 'string') { + const imagePath = payload; + const filePath = window.activeTextEditor?.document.uri.fsPath || Preview.filePath; + if (!filePath) { + return; + } + + const imageAbsPath = imagePath.startsWith('http') + ? imagePath + : ImageHelper.relToAbs(filePath, imagePath); + + let preview = undefined; + if (imageAbsPath) { + preview = + typeof imageAbsPath === 'string' + ? imageAbsPath + : panel.getWebview()?.asWebviewUri(imageAbsPath); + } + + const imageData = { + original: imagePath, + absPath: imageAbsPath, + webviewUrl: preview ? preview.toString() : null + }; + + this.sendRequest(command, requestId, imageData); + return; } } diff --git a/src/panelWebView/CommandToCode.ts b/src/panelWebView/CommandToCode.ts index b4e5a52a..6e654e98 100644 --- a/src/panelWebView/CommandToCode.ts +++ b/src/panelWebView/CommandToCode.ts @@ -41,5 +41,6 @@ export enum CommandToCode { generateSlug = 'generate-slug', stopServer = 'stop-server', aiSuggestTaxonomy = 'ai-suggest-taxonomy', - searchByType = 'search-by-type' + searchByType = 'search-by-type', + processMediaData = 'process-media-data' } diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx index 0b9027d2..501aba81 100644 --- a/src/panelWebView/components/DataBlock/DataBlockField.tsx +++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx @@ -60,7 +60,6 @@ export const DataBlockField: React.FunctionComponent = ({ const onFieldUpdate = useCallback( (crntField: string | undefined, crntValue: any, parents: string[]) => { - debugger; const dataClone: any[] = Object.assign([], value); if (!crntField) { @@ -242,7 +241,6 @@ export const DataBlockField: React.FunctionComponent = ({ ); const getSelectedIndex = useCallback(() => { - console.log(blockData) let crntValue = []; if (blockData?.selectedIndex !== null && blockData?.selectedIndex !== undefined) { diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx index fea8ba36..e9646a95 100644 --- a/src/panelWebView/components/Fields/PreviewImageField.tsx +++ b/src/panelWebView/components/Fields/PreviewImageField.tsx @@ -1,7 +1,7 @@ -import { Messenger } from '@estruyf/vscode/dist/client'; +import { Messenger, messageHandler } from '@estruyf/vscode/dist/client'; import { PhotographIcon } from '@heroicons/react/outline'; import * as React from 'react'; -import { useCallback, useMemo } from 'react'; +import { useCallback, useEffect, useMemo } from 'react'; import { DefaultFieldValues } from '../../../constants'; import { BaseFieldProps, BlockFieldData } from '../../../models'; import { CommandToCode } from '../../CommandToCode'; @@ -15,7 +15,7 @@ export interface PreviewImageValue { } export interface IPreviewImageFieldProps - extends BaseFieldProps { + extends BaseFieldProps { fieldName: string; filePath: string | null; parents?: string[]; @@ -36,6 +36,8 @@ export const PreviewImageField: React.FunctionComponent parents, required }: React.PropsWithChildren) => { + const [imageData, setImageData] = React.useState(null); + const selectImage = useCallback(() => { Messenger.send(CommandToCode.selectImage, { filePath: filePath, @@ -49,14 +51,13 @@ export const PreviewImageField: React.FunctionComponent }); }, [filePath, fieldName, value, multiple, parents]); - const onImageRemove = (imageToRemove: string) => { - debugger; + const onImageRemove = useCallback((imageToRemove: string) => { const newValue = - value && Array.isArray(value) - ? value.filter((image) => (image?.original || image) !== imageToRemove).map((i) => (i?.original || i as any as string)) + imageData && Array.isArray(imageData) + ? imageData.filter((image) => image.original !== imageToRemove).map((i) => i.original) : null; onChange(newValue); - }; + }, [imageData]); const isFaultyImage = useMemo(() => { return typeof value === 'string' && value === DefaultFieldValues.faultyCustomPlaceholder; @@ -66,17 +67,39 @@ export const PreviewImageField: React.FunctionComponent return required && (isFaultyImage || !value); }, [required, value, isFaultyImage]); + useEffect(() => { + if (typeof value === 'string') { + messageHandler.request(CommandToCode.processMediaData, value).then((data) => { + setImageData(data); + }); + } else if (Array.isArray(value)) { + Promise.all( + value.map((v) => { + if (typeof v === 'string') { + return messageHandler.request(CommandToCode.processMediaData, v); + } else { + return Promise.resolve(v); + } + }) + ).then((data) => { + setImageData(data); + }); + } else { + setImageData(value); + } + }, [value]); + return (
} required={required} />
0 + className={`metadata_field__preview_image ${multiple && imageData && (imageData as PreviewImageValue[]).length > 0 ? `metadata_field__multiple_images` : '' } ${showRequiredState ? 'required' : ''}`} > - {(!value || isFaultyImage || multiple) && ( + {(!imageData || isFaultyImage || multiple) && ( )} - {value && !Array.isArray(value) && !isFaultyImage && ( - onChange(null)} /> + {imageData && !Array.isArray(imageData) && !isFaultyImage && ( + onChange(null)} /> )} {multiple && - value && - Array.isArray(value) && + imageData && + Array.isArray(imageData) && !isFaultyImage && - value.map((image) => ( - onImageRemove(image?.original || image as any as string)} /> + imageData.map((image) => ( + onImageRemove(image.original)} /> ))}
diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx index 27ba1802..bffef646 100644 --- a/src/panelWebView/components/Fields/WrapperField.tsx +++ b/src/panelWebView/components/Fields/WrapperField.tsx @@ -241,7 +241,6 @@ export const WrapperField: React.FunctionComponent = ({ ); } else if (field.type === 'image') { - console.log('image', field, fieldValue); return (