diff --git a/package-lock.json b/package-lock.json index f0f7da93..9263dd4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "devDependencies": { "@actions/core": "^1.8.2", "@bendera/vscode-webview-elements": "0.6.2", - "@estruyf/vscode": "0.0.3", + "@estruyf/vscode": "^1.1.0", "@headlessui/react": "1.5.0", "@heroicons/react": "1.0.4", "@iarna/toml": "2.2.3", @@ -316,17 +316,28 @@ "dev": true }, "node_modules/@estruyf/vscode": { - "version": "0.0.3", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-1.1.0.tgz", + "integrity": "sha512-JOjok+d870IsBPqk/E+KeW9E5ar+slqW8Sae5PtNb1yB8aMudJy9DHV5wQeki/ZwggFYDv+6EPjyzW/71/5yVw==", "dev": true, - "license": "MIT", "dependencies": { - "@types/vscode-webview": "1.57.0" + "@types/vscode-webview": "1.57.0", + "uuid": "^9.0.0" }, "funding": { "type": "individual", "url": "https://github.com/sponsors/estruyf" } }, + "node_modules/@estruyf/vscode/node_modules/uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@headlessui/react": { "version": "1.5.0", "dev": true, @@ -12088,10 +12099,21 @@ } }, "@estruyf/vscode": { - "version": "0.0.3", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@estruyf/vscode/-/vscode-1.1.0.tgz", + "integrity": "sha512-JOjok+d870IsBPqk/E+KeW9E5ar+slqW8Sae5PtNb1yB8aMudJy9DHV5wQeki/ZwggFYDv+6EPjyzW/71/5yVw==", "dev": true, "requires": { - "@types/vscode-webview": "1.57.0" + "@types/vscode-webview": "1.57.0", + "uuid": "^9.0.0" + }, + "dependencies": { + "uuid": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", + "dev": true + } } }, "@headlessui/react": { diff --git a/package.json b/package.json index 5138c18c..0ad69900 100644 --- a/package.json +++ b/package.json @@ -1889,10 +1889,12 @@ "category": "Front Matter" } ], - "submenus": [{ - "id": "frontmatter.submenu", - "label": "Front Matter" - }], + "submenus": [ + { + "id": "frontmatter.submenu", + "label": "Front Matter" + } + ], "menus": { "editor/title": [ { @@ -2230,7 +2232,7 @@ "devDependencies": { "@actions/core": "^1.8.2", "@bendera/vscode-webview-elements": "0.6.2", - "@estruyf/vscode": "0.0.3", + "@estruyf/vscode": "^1.1.0", "@headlessui/react": "1.5.0", "@heroicons/react": "1.0.4", "@iarna/toml": "2.2.3", diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 09619abf..005473ab 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -77,7 +77,7 @@ export class Dashboard { if (hasData) { Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, - data: Dashboard.viewData + payload: Dashboard.viewData }); } } @@ -142,7 +142,7 @@ export class Dashboard { Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, - data: null + payload: null }); } @@ -190,7 +190,7 @@ export class Dashboard { * Post data to the dashboard * @param msg */ - public static postWebviewMessage(msg: { command: DashboardCommand; data?: unknown }) { + public static postWebviewMessage(msg: { command: DashboardCommand; payload?: unknown }) { if (Dashboard.isDisposed) { return; } diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts index 66539608..de8e6074 100644 --- a/src/dashboardWebView/DashboardMessage.ts +++ b/src/dashboardWebView/DashboardMessage.ts @@ -19,6 +19,7 @@ export enum DashboardMessage { searchPages = 'searchPages', openFile = 'openFile', deleteFile = 'deleteFile', + getCustomHtml = 'getCustomHtml', // Media Dashboard getMedia = 'getMedia', diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index 8245bf17..bffeb918 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/src/dashboardWebView/components/Contents/Item.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { useRecoilValue } from 'recoil'; import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon'; import { DashboardMessage } from '../../DashboardMessage'; @@ -8,9 +7,11 @@ import { DateField } from '../Common/DateField'; import { Messenger } from '@estruyf/vscode/dist/client'; import { DashboardViewType } from '../../models'; import { ContentActions } from './ContentActions'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import useThemeColors from '../../hooks/useThemeColors'; import { Status } from './Status'; +import * as React from 'react'; +import { messageHandler } from '@estruyf/vscode/dist/client'; export interface IItemProps extends Page { } @@ -27,6 +28,7 @@ export const Item: React.FunctionComponent = ({ const view = useRecoilValue(ViewSelector); const settings = useRecoilValue(SettingsSelector); const draftField = useMemo(() => settings?.draftField, [settings]); + const [customHtml, setCustomHtml] = useState(undefined); const { getColors } = useThemeColors(); const escapedTitle = useMemo(() => { @@ -49,7 +51,7 @@ export const Item: React.FunctionComponent = ({ Messenger.send(DashboardMessage.openFile, fmFilePath); }; - const tags: string[] | undefined = React.useMemo(() => { + const tags: string[] | undefined = useMemo(() => { if (!settings?.dashboardState?.contents?.tags) { return undefined; } @@ -74,6 +76,15 @@ export const Item: React.FunctionComponent = ({ return []; }, [settings, pageData]); + useEffect(() => { + messageHandler.request(DashboardMessage.getCustomHtml, { + path: fmFilePath, + data: pageData, + }).then((html) => { + setCustomHtml(html || ""); + }); + }, []); + if (view === DashboardViewType.Grid) { return (
  • @@ -157,6 +168,12 @@ export const Item: React.FunctionComponent = ({ )} )} + + { + customHtml && ( +
    + ) + }
    • diff --git a/src/dashboardWebView/components/DataView/DataView.tsx b/src/dashboardWebView/components/DataView/DataView.tsx index 8b9b5e95..a70c613f 100644 --- a/src/dashboardWebView/components/DataView/DataView.tsx +++ b/src/dashboardWebView/components/DataView/DataView.tsx @@ -44,7 +44,7 @@ export const DataView: React.FunctionComponent = ( const messageListener = (message: MessageEvent>) => { if (message.data.command === DashboardCommand.dataFileEntries) { - setDataEntries(message.data.data); + setDataEntries(message.data.payload); } }; diff --git a/src/dashboardWebView/components/Header/SyncButton.tsx b/src/dashboardWebView/components/Header/SyncButton.tsx index 887f5a6e..fac95142 100644 --- a/src/dashboardWebView/components/Header/SyncButton.tsx +++ b/src/dashboardWebView/components/Header/SyncButton.tsx @@ -22,7 +22,7 @@ export const SyncButton: React.FunctionComponent = ( }; const messageListener = (message: MessageEvent>) => { - const { command, data } = message.data; + const { command, payload } = message.data; if (command === GeneralCommands.toWebview.gitSyncingStart) { setIsSyncing(true); diff --git a/src/dashboardWebView/hooks/useMedia.tsx b/src/dashboardWebView/hooks/useMedia.tsx index 1fd6d293..d6400fd7 100644 --- a/src/dashboardWebView/hooks/useMedia.tsx +++ b/src/dashboardWebView/hooks/useMedia.tsx @@ -51,15 +51,15 @@ export default function useMedia() { message: MessageEvent> ) => { if (message.data.command === DashboardCommand.media) { - const data: MediaPaths = message.data.data as MediaPaths; + const payload: MediaPaths = message.data.payload as MediaPaths; setLoading(false); - setMedia(data.media); - setTotal(data.total); - setFolders(data.folders); - setSelectedFolder(data.selectedFolder); - setSearchedMedia(data.media); - setAllContentFolders(data.allContentFolders); - setAllStaticFolders(data.allStaticfolders); + setMedia(payload.media); + setTotal(payload.total); + setFolders(payload.folders); + setSelectedFolder(payload.selectedFolder); + setSearchedMedia(payload.media); + setAllContentFolders(payload.allContentFolders); + setAllStaticFolders(payload.allStaticfolders); } }; diff --git a/src/dashboardWebView/hooks/useMessages.tsx b/src/dashboardWebView/hooks/useMessages.tsx index b2bb709e..d85011bb 100644 --- a/src/dashboardWebView/hooks/useMessages.tsx +++ b/src/dashboardWebView/hooks/useMessages.tsx @@ -30,34 +30,34 @@ export default function useMessages() { switch (message.command) { case DashboardCommand.loading: - setLoading(message.data); + setLoading(message.payload); break; case DashboardCommand.viewData: - setViewData(message.data); - if (message.data?.type === NavigationType.Media) { + setViewData(message.payload); + if (message.payload?.type === NavigationType.Media) { setView(NavigationType.Media); - } else if (message.data?.type === NavigationType.Contents) { + } else if (message.payload?.type === NavigationType.Contents) { setView(NavigationType.Contents); - } else if (message.data?.type === NavigationType.Data) { + } else if (message.payload?.type === NavigationType.Data) { setView(NavigationType.Data); - } else if (message.data?.type === NavigationType.Taxonomy) { + } else if (message.payload?.type === NavigationType.Taxonomy) { setView(NavigationType.Taxonomy); - } else if (message.data?.type === NavigationType.Snippets) { + } else if (message.payload?.type === NavigationType.Snippets) { setView(NavigationType.Snippets); } break; case DashboardCommand.settings: - setSettings(message.data); + setSettings(message.payload); break; case DashboardCommand.pages: - setPages(message.data); + setPages(message.payload); setLoading(false); break; case DashboardCommand.searchReady: setSearchReady(true); break; case GeneralCommands.toWebview.setMode: - setMode(message.data); + setMode(message.payload); break; } }; diff --git a/src/dashboardWebView/hooks/usePages.tsx b/src/dashboardWebView/hooks/usePages.tsx index 41da1b01..473f6f0a 100644 --- a/src/dashboardWebView/hooks/usePages.tsx +++ b/src/dashboardWebView/hooks/usePages.tsx @@ -182,7 +182,7 @@ export default function usePages(pages: Page[]) { const searchListener = (message: MessageEvent>) => { switch (message.data.command) { case DashboardMessage.searchPages: - processPages(message.data.data); + processPages(message.data.payload); break; } }; diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts index cd4500f3..0881ca90 100644 --- a/src/explorerView/ExplorerView.ts +++ b/src/explorerView/ExplorerView.ts @@ -115,7 +115,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable { }); window.onDidChangeActiveTextEditor(() => { - this.sendMessage({ command: Command.loading, data: true }); + this.sendMessage({ command: Command.loading, payload: true }); if (this.visible) { DataListener.getFileData(); @@ -131,7 +131,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable { * Post data to the panel * @param msg */ - public sendMessage(msg: { command: Command; data?: any }) { + public sendMessage(msg: { command: Command; payload?: any }) { this.panel?.webview?.postMessage(msg); } diff --git a/src/listeners/dashboard/BaseListener.ts b/src/listeners/dashboard/BaseListener.ts index 21fddf86..ed23489c 100644 --- a/src/listeners/dashboard/BaseListener.ts +++ b/src/listeners/dashboard/BaseListener.ts @@ -2,21 +2,22 @@ import { Dashboard } from '../../commands/Dashboard'; import { DashboardCommand } from '../../dashboardWebView/DashboardCommand'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Logger } from '../../helpers/Logger'; +import { PostMessageData } from '../../models'; export abstract class BaseListener { - public static process(msg: { command: DashboardMessage; data: any }) {} + public static process(msg: PostMessageData) {} /** * Send a message to the webview * @param command * @param data */ - public static sendMsg(command: DashboardCommand, data: any) { + public static sendMsg(command: DashboardCommand, payload: any) { Logger.info(`Sending message to webview: ${command}`); Dashboard.postWebviewMessage({ command, - data + payload }); } } diff --git a/src/listeners/dashboard/DashboardListener.ts b/src/listeners/dashboard/DashboardListener.ts index d5144005..0a7c72d9 100644 --- a/src/listeners/dashboard/DashboardListener.ts +++ b/src/listeners/dashboard/DashboardListener.ts @@ -3,6 +3,7 @@ import { ExtensionState } from '../../constants'; import { DashboardCommand } from '../../dashboardWebView/DashboardCommand'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Extension, Notifications } from '../../helpers'; +import { PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class DashboardListener extends BaseListener { @@ -10,7 +11,7 @@ export class DashboardListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -23,10 +24,10 @@ export class DashboardListener extends BaseListener { Dashboard.reload(); break; case DashboardMessage.setPageViewType: - Extension.getInstance().setState(ExtensionState.PagesView, msg.data, 'workspace'); + Extension.getInstance().setState(ExtensionState.PagesView, msg.payload, 'workspace'); break; case DashboardMessage.showWarning: - Notifications.warning(msg.data); + Notifications.warning(msg.payload); break; } } diff --git a/src/listeners/dashboard/DataListener.ts b/src/listeners/dashboard/DataListener.ts index 9271f08a..3fd28130 100644 --- a/src/listeners/dashboard/DataListener.ts +++ b/src/listeners/dashboard/DataListener.ts @@ -9,21 +9,22 @@ import * as yaml from 'js-yaml'; import { DataFileHelper } from '../../helpers'; import { existsAsync, readFileAsync, writeFileAsync } from '../../utils'; import { mkdirAsync } from '../../utils/mkdirAsync'; +import { PostMessageData } from '../../models'; export class DataListener extends BaseListener { - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.getDataEntries: - if (!(msg?.data as DataFile).file) { + if (!(msg?.payload as DataFile).file) { this.sendMsg(DashboardCommand.dataFileEntries, []); } - this.processDataFile(msg?.data); + this.processDataFile(msg?.payload); break; case DashboardMessage.putDataEntries: - this.processDataUpdate(msg?.data); + this.processDataUpdate(msg?.payload); break; default: return; diff --git a/src/listeners/dashboard/ExtensionListener.ts b/src/listeners/dashboard/ExtensionListener.ts index d3b644e1..af7b5eb5 100644 --- a/src/listeners/dashboard/ExtensionListener.ts +++ b/src/listeners/dashboard/ExtensionListener.ts @@ -4,27 +4,28 @@ import { COMMAND_NAME } from '../../constants'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { CustomScript, Extension } from '../../helpers'; import { openFileInEditor } from '../../helpers/openFileInEditor'; +import { PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class ExtensionListener extends BaseListener { - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.openFile: - openFileInEditor(msg.data); + openFileInEditor(msg.payload); break; case DashboardMessage.initializeProject: commands.executeCommand(COMMAND_NAME.init, SettingsListener.getSettings); break; case DashboardMessage.copyToClipboard: - env.clipboard.writeText(msg.data); + env.clipboard.writeText(msg.payload); break; case DashboardMessage.runCustomScript: - CustomScript.run(msg?.data?.script, msg?.data?.path); + CustomScript.run(msg?.payload?.script, msg?.payload?.path); break; case DashboardMessage.setState: - this.setState(msg?.data); + this.setState(msg?.payload); break; } } diff --git a/src/listeners/dashboard/LogListener.ts b/src/listeners/dashboard/LogListener.ts index f39802c7..f4879b7b 100644 --- a/src/listeners/dashboard/LogListener.ts +++ b/src/listeners/dashboard/LogListener.ts @@ -1,5 +1,6 @@ import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Logger } from '../../helpers'; +import { PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class LogListener extends BaseListener { @@ -7,12 +8,12 @@ export class LogListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.logError: - Logger.error(msg.data); + Logger.error(msg.payload); break; } } diff --git a/src/listeners/dashboard/MediaListener.ts b/src/listeners/dashboard/MediaListener.ts index d2ac5f23..c4212921 100644 --- a/src/listeners/dashboard/MediaListener.ts +++ b/src/listeners/dashboard/MediaListener.ts @@ -8,52 +8,53 @@ import { commands, env, Uri } from 'vscode'; import { COMMAND_NAME, TelemetryEvent } from '../../constants'; import * as os from 'os'; import { Folders } from '../../commands'; +import { PostMessageData } from '../../models'; export class MediaListener extends BaseListener { private static timers: { [folder: string]: any } = {}; - public static async process(msg: { command: DashboardMessage; data: any }) { + public static async process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.getMedia: - const { page, folder, sorting } = msg?.data; + const { page, folder, sorting } = msg?.payload; this.sendMediaFiles(page, folder, sorting); break; case DashboardMessage.refreshMedia: Telemetry.send(TelemetryEvent.refreshMedia); MediaHelpers.resetMedia(); - this.sendMediaFiles(0, msg?.data?.folder); + this.sendMediaFiles(0, msg?.payload?.folder); break; case DashboardMessage.uploadMedia: Telemetry.send(TelemetryEvent.uploadMedia); - this.store(msg?.data); + this.store(msg?.payload); break; case DashboardMessage.deleteMedia: Telemetry.send(TelemetryEvent.deleteMedia); - this.delete(msg?.data); + this.delete(msg?.payload); break; case DashboardMessage.revealMedia: - this.openFileInFinder(msg?.data?.file); + this.openFileInFinder(msg?.payload?.file); break; case DashboardMessage.insertMedia: Telemetry.send(TelemetryEvent.insertMediaToContent); - MediaHelpers.insertMediaToMarkdown(msg?.data); + MediaHelpers.insertMediaToMarkdown(msg?.payload); break; case DashboardMessage.insertFile: Telemetry.send(TelemetryEvent.insertFileToContent); - MediaHelpers.insertMediaToMarkdown(msg?.data); + MediaHelpers.insertMediaToMarkdown(msg?.payload); break; case DashboardMessage.updateMediaMetadata: Telemetry.send(TelemetryEvent.updateMediaMetadata); - this.update(msg.data); + this.update(msg.payload); break; case DashboardMessage.createMediaFolder: - await commands.executeCommand(COMMAND_NAME.createFolder, msg?.data); + await commands.executeCommand(COMMAND_NAME.createFolder, msg?.payload); break; case DashboardMessage.createHexoAssetFolder: - if (msg?.data.hexoAssetFolderPath) { - Folders.createFolder(msg?.data.hexoAssetFolderPath); + if (msg?.payload.hexoAssetFolderPath) { + Folders.createFolder(msg?.payload.hexoAssetFolderPath); } break; } diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts index d22f97e6..bdca5746 100644 --- a/src/listeners/dashboard/PagesListener.ts +++ b/src/listeners/dashboard/PagesListener.ts @@ -1,3 +1,4 @@ +import { PostMessageData } from './../../models/PostMessageData'; import { basename } from 'path'; import { commands, FileSystemWatcher, RelativePattern, TextDocument, Uri, workspace } from 'vscode'; import { Dashboard } from '../../commands/Dashboard'; @@ -21,7 +22,7 @@ export class PagesListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static async process(msg: { command: DashboardMessage; data: any }) { + public static async process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -41,14 +42,35 @@ export class PagesListener extends BaseListener { this.getPagesData(true); break; case DashboardMessage.searchPages: - this.searchPages(msg.data); + this.searchPages(msg.payload); break; case DashboardMessage.deleteFile: - this.deletePage(msg.data); + this.deletePage(msg.payload); + break; + case DashboardMessage.getCustomHtml: + const message = msg as any; + this.getCustomCardHtml(message.command, message.requestId, message.payload); break; } } + private static async getCustomCardHtml(command: string, requestId: string, payload: any) { + if (!command || !requestId || !payload) { + return; + } + + const slug = payload.data.slug; + if (!slug) { + return; + } + + Dashboard.postWebviewMessage({ + command, + requestId, + payload: `
    `, + } as any) + } + /** * Saved file watcher * @returns diff --git a/src/listeners/dashboard/SettingsListener.ts b/src/listeners/dashboard/SettingsListener.ts index cff08ca5..e179f703 100644 --- a/src/listeners/dashboard/SettingsListener.ts +++ b/src/listeners/dashboard/SettingsListener.ts @@ -6,7 +6,7 @@ import { DashboardCommand } from '../../dashboardWebView/DashboardCommand'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { DashboardSettings, Settings } from '../../helpers'; import { FrameworkDetector } from '../../helpers/FrameworkDetector'; -import { Framework } from '../../models'; +import { Framework, PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class SettingsListener extends BaseListener { @@ -14,7 +14,7 @@ export class SettingsListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -22,13 +22,13 @@ export class SettingsListener extends BaseListener { this.getSettings(); break; case DashboardMessage.updateSetting: - this.update(msg.data); + this.update(msg.payload); break; case DashboardMessage.setFramework: - this.setFramework(msg?.data); + this.setFramework(msg?.payload); break; case DashboardMessage.addFolder: - this.addFolder(msg?.data); + this.addFolder(msg?.payload); break; } } diff --git a/src/listeners/dashboard/SnippetListener.ts b/src/listeners/dashboard/SnippetListener.ts index c8f02ece..ba88db30 100644 --- a/src/listeners/dashboard/SnippetListener.ts +++ b/src/listeners/dashboard/SnippetListener.ts @@ -4,24 +4,24 @@ import { Dashboard } from '../../commands/Dashboard'; import { SETTING_CONTENT_SNIPPETS, TelemetryEvent } from '../../constants'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Notifications, Settings, Telemetry } from '../../helpers'; -import { Snippets } from '../../models'; +import { PostMessageData, Snippets } from '../../models'; import { BaseListener } from './BaseListener'; import { SettingsListener } from './SettingsListener'; export class SnippetListener extends BaseListener { - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.addSnippet: - this.addSnippet(msg.data); + this.addSnippet(msg.payload); break; case DashboardMessage.updateSnippet: - this.updateSnippet(msg.data); + this.updateSnippet(msg.payload); break; case DashboardMessage.insertSnippet: Telemetry.send(TelemetryEvent.insertContentSnippet); - this.insertSnippet(msg.data); + this.insertSnippet(msg.payload); break; } } diff --git a/src/listeners/dashboard/TaxonomyListener.ts b/src/listeners/dashboard/TaxonomyListener.ts index a463a35d..2a9e4e22 100644 --- a/src/listeners/dashboard/TaxonomyListener.ts +++ b/src/listeners/dashboard/TaxonomyListener.ts @@ -8,7 +8,7 @@ import { import { DashboardCommand } from '../../dashboardWebView/DashboardCommand'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Settings, TaxonomyHelper } from '../../helpers'; -import { CustomTaxonomy } from '../../models'; +import { CustomTaxonomy, PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class TaxonomyListener extends BaseListener { @@ -16,7 +16,7 @@ export class TaxonomyListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -24,22 +24,22 @@ export class TaxonomyListener extends BaseListener { this.getData(); break; case DashboardMessage.editTaxonomy: - TaxonomyHelper.rename(msg.data); + TaxonomyHelper.rename(msg.payload); break; case DashboardMessage.mergeTaxonomy: - TaxonomyHelper.merge(msg.data); + TaxonomyHelper.merge(msg.payload); break; case DashboardMessage.deleteTaxonomy: - TaxonomyHelper.delete(msg.data); + TaxonomyHelper.delete(msg.payload); break; case DashboardMessage.moveTaxonomy: - TaxonomyHelper.move(msg.data); + TaxonomyHelper.move(msg.payload); break; case DashboardMessage.addToTaxonomy: - TaxonomyHelper.addTaxonomy(msg.data); + TaxonomyHelper.addTaxonomy(msg.payload); break; case DashboardMessage.createTaxonomy: - TaxonomyHelper.createNew(msg.data); + TaxonomyHelper.createNew(msg.payload); break; case DashboardMessage.importTaxonomy: commands.executeCommand(COMMAND_NAME.exportTaxonomy); diff --git a/src/listeners/dashboard/TelemetryListener.ts b/src/listeners/dashboard/TelemetryListener.ts index ad6df246..9d3cd93e 100644 --- a/src/listeners/dashboard/TelemetryListener.ts +++ b/src/listeners/dashboard/TelemetryListener.ts @@ -1,5 +1,6 @@ import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { Telemetry } from '../../helpers/Telemetry'; +import { PostMessageData } from '../../models'; import { BaseListener } from './BaseListener'; export class TelemetryListener extends BaseListener { @@ -7,12 +8,12 @@ export class TelemetryListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: DashboardMessage; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case DashboardMessage.sendTelemetry: - Telemetry.send(msg.data.event, msg.data.properties, msg.data.metrics); + Telemetry.send(msg.payload.event, msg.payload.properties, msg.payload.metrics); break; } } diff --git a/src/listeners/general/BaseListener.ts b/src/listeners/general/BaseListener.ts index 8a963c65..fa1364ed 100644 --- a/src/listeners/general/BaseListener.ts +++ b/src/listeners/general/BaseListener.ts @@ -1,18 +1,17 @@ import { GeneralCommands } from './../../constants/GeneralCommands'; import { Dashboard } from '../../commands/Dashboard'; -import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; import { ExplorerView } from '../../explorerView/ExplorerView'; import { Extension } from '../../helpers'; import { Logger } from '../../helpers/Logger'; -import { CommandToCode } from '../../panelWebView/CommandToCode'; import { commands, Uri } from 'vscode'; +import { PostMessageData } from '../../models'; export abstract class BaseListener { - public static process(msg: { command: DashboardMessage | CommandToCode | string; data: any }) { + public static process(msg: PostMessageData) { switch (msg.command) { case GeneralCommands.toVSCode.openLink: - if (msg.data) { - commands.executeCommand('vscode.open', Uri.parse(msg.data)); + if (msg.payload) { + commands.executeCommand('vscode.open', Uri.parse(msg.payload)); } break; } @@ -23,14 +22,14 @@ export abstract class BaseListener { * @param command * @param data */ - public static sendMsg(command: string, data: any) { + public static sendMsg(command: string, payload: any) { Logger.info(`Sending message to webview (panel&dashboard): ${command}`); const extPath = Extension.getInstance().extensionPath; const panel = ExplorerView.getInstance(extPath); - panel.sendMessage({ command: command as any, data }); + panel.sendMessage({ command: command as any, payload }); - Dashboard.postWebviewMessage({ command: command as any, data }); + Dashboard.postWebviewMessage({ command: command as any, payload }); } } diff --git a/src/listeners/general/GitListener.ts b/src/listeners/general/GitListener.ts index c204187d..fa4da68b 100644 --- a/src/listeners/general/GitListener.ts +++ b/src/listeners/general/GitListener.ts @@ -20,6 +20,7 @@ import { } from '../../constants'; import { Folders } from '../../commands/Folders'; import { commands } from 'vscode'; +import { PostMessageData } from '../../models'; export class GitListener { private static isRegistered: boolean = false; @@ -49,7 +50,7 @@ export class GitListener { * Process the messages * @param msg */ - public static process(msg: { command: string; data: any }) { + public static process(msg: PostMessageData) { switch (msg.command) { case GeneralCommands.toVSCode.gitSync: this.sync(); @@ -148,12 +149,12 @@ export class GitListener { return this.client; } - private static sendMsg(command: string, data: any) { + private static sendMsg(command: string, payload: any) { const extPath = Extension.getInstance().extensionPath; const panel = ExplorerView.getInstance(extPath); - panel.sendMessage({ command: command as any, data }); + panel.sendMessage({ command: command as any, payload }); - Dashboard.postWebviewMessage({ command: command as any, data }); + Dashboard.postWebviewMessage({ command: command as any, payload }); } } diff --git a/src/listeners/general/ModeListener.ts b/src/listeners/general/ModeListener.ts index 0e7b3cc3..53a375e0 100644 --- a/src/listeners/general/ModeListener.ts +++ b/src/listeners/general/ModeListener.ts @@ -1,7 +1,7 @@ import { ModeSwitch } from './../../services/ModeSwitch'; import { CONTEXT, FEATURE_FLAG, GeneralCommands, SETTING_GLOBAL_MODES } from '../../constants'; import { DashboardMessage } from '../../dashboardWebView/DashboardMessage'; -import { Mode } from '../../models'; +import { Mode, PostMessageData } from '../../models'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; import { Settings } from '../../helpers'; @@ -12,7 +12,7 @@ export class ModeListener extends BaseListener { * Process the messages * @param msg */ - public static process(msg: { command: DashboardMessage | CommandToCode; data: any }) { + public static process(msg: PostMessageData) { super.process(msg as any); switch (msg.command) { diff --git a/src/listeners/panel/ArticleListener.ts b/src/listeners/panel/ArticleListener.ts index df1ed126..4c6cbd47 100644 --- a/src/listeners/panel/ArticleListener.ts +++ b/src/listeners/panel/ArticleListener.ts @@ -1,4 +1,5 @@ import { Article } from '../../commands'; +import { PostMessageData } from '../../models'; import { Command } from '../../panelWebView/Command'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; @@ -8,7 +9,7 @@ export class ArticleListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: any; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -16,7 +17,7 @@ export class ArticleListener extends BaseListener { Article.updateSlug(); break; case CommandToCode.generateSlug: - this.generateSlug(msg.data); + this.generateSlug(msg.payload); break; case CommandToCode.updateLastMod: Article.setLastModifiedDate(); diff --git a/src/listeners/panel/BaseListener.ts b/src/listeners/panel/BaseListener.ts index 7d38ea8d..f1757953 100644 --- a/src/listeners/panel/BaseListener.ts +++ b/src/listeners/panel/BaseListener.ts @@ -1,18 +1,18 @@ import { Extension } from './../../helpers/Extension'; import { ExplorerView } from './../../explorerView/ExplorerView'; import { Logger } from '../../helpers'; -import { CommandToCode } from '../../panelWebView/CommandToCode'; import { Command } from '../../panelWebView/Command'; +import { PostMessageData } from '../../models'; export abstract class BaseListener { - public static process(msg: { command: CommandToCode; data: any }) {} + public static process(msg: PostMessageData) {} /** * Send a message to the webview * @param command * @param data */ - public static sendMsg(command: Command, data: any) { + public static sendMsg(command: Command, payload: any) { Logger.info(`Sending message to panel: ${command}`); const extPath = Extension.getInstance().extensionPath; @@ -20,7 +20,7 @@ export abstract class BaseListener { panel.sendMessage({ command, - data + payload }); } } diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts index a2905851..f3a17743 100644 --- a/src/listeners/panel/DataListener.ts +++ b/src/listeners/panel/DataListener.ts @@ -17,6 +17,7 @@ import { import { Article } from '../../commands'; import { ParsedFrontMatter } from '../../parsers'; import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper'; +import { PostMessageData } from '../../models'; const FILE_LIMIT = 10; @@ -28,7 +29,7 @@ export class DataListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: CommandToCode; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -43,16 +44,16 @@ export class DataListener extends BaseListener { commands.executeCommand(COMMAND_NAME.createTemplate); break; case CommandToCode.updateMetadata: - this.updateMetadata(msg.data); + this.updateMetadata(msg.payload); break; case CommandToCode.frameworkCommand: - this.openTerminalWithCommand(msg.data.command); + this.openTerminalWithCommand(msg.payload.command); break; case CommandToCode.stopServer: this.stopServer(); break; case CommandToCode.updatePlaceholder: - this.updatePlaceholder(msg?.data?.field, msg?.data?.value, msg?.data?.title); + this.updatePlaceholder(msg?.payload?.field, msg?.payload?.value, msg?.payload?.title); break; case CommandToCode.generateContentType: commands.executeCommand(COMMAND_NAME.generateContentType); @@ -64,7 +65,7 @@ export class DataListener extends BaseListener { commands.executeCommand(COMMAND_NAME.setContentType); break; case CommandToCode.getDataEntries: - this.getDataFileEntries(msg.data); + this.getDataFileEntries(msg.payload); break; } } diff --git a/src/listeners/panel/ExtensionListener.ts b/src/listeners/panel/ExtensionListener.ts index fd63f1dc..bdfdecae 100644 --- a/src/listeners/panel/ExtensionListener.ts +++ b/src/listeners/panel/ExtensionListener.ts @@ -5,15 +5,15 @@ import * as os from 'os'; import { exec } from 'child_process'; import { Folders } from '../../commands/Folders'; import { COMMAND_NAME } from '../../constants'; -import { SettingsListener } from '.'; import { openFileInEditor } from '../../helpers'; +import { PostMessageData } from '../../models'; export class ExtensionListener extends BaseListener { /** * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: any; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -24,7 +24,7 @@ export class ExtensionListener extends BaseListener { this.openFolder(); break; case CommandToCode.openInEditor: - openFileInEditor(msg.data); + openFileInEditor(msg.payload); break; case CommandToCode.initProject: this.initialize(); diff --git a/src/listeners/panel/MediaListener.ts b/src/listeners/panel/MediaListener.ts index 98046cc3..c663b818 100644 --- a/src/listeners/panel/MediaListener.ts +++ b/src/listeners/panel/MediaListener.ts @@ -3,7 +3,7 @@ import { commands, window } from 'vscode'; import { Dashboard } from '../../commands/Dashboard'; import { COMMAND_NAME } from '../../constants'; import { ImageHelper } from '../../helpers'; -import { DashboardData } from '../../models'; +import { DashboardData, PostMessageData } from '../../models'; import { Command } from '../../panelWebView/Command'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; @@ -13,7 +13,7 @@ export class MediaListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: any; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -24,7 +24,7 @@ export class MediaListener extends BaseListener { this.selectMedia(msg); break; case CommandToCode.getImageUrl: - this.generateUrl(msg.data); + this.generateUrl(msg.payload); break; } } @@ -47,10 +47,10 @@ export class MediaListener extends BaseListener { /** * Select a media file */ - private static async selectMedia(msg: { data: any }) { + private static async selectMedia(msg: PostMessageData) { await commands.executeCommand(COMMAND_NAME.dashboard, { type: 'media', - data: msg.data + data: msg.payload } as DashboardData); this.getMediaSelection(); } diff --git a/src/listeners/panel/ScriptListener.ts b/src/listeners/panel/ScriptListener.ts index 715b2e26..e80c47c8 100644 --- a/src/listeners/panel/ScriptListener.ts +++ b/src/listeners/panel/ScriptListener.ts @@ -1,6 +1,6 @@ import { SETTING_CUSTOM_SCRIPTS } from '../../constants'; import { CustomScript, Settings } from '../../helpers'; -import { CustomScript as ICustomScript } from '../../models'; +import { CustomScript as ICustomScript, PostMessageData } from '../../models'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; @@ -9,7 +9,7 @@ export class ScriptListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: any; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -23,11 +23,11 @@ export class ScriptListener extends BaseListener { * Run a custom script * @param msg */ - private static runCustomScript(msg: { command: string; data: any }) { + private static runCustomScript(msg: PostMessageData) { const scripts: ICustomScript[] | undefined = Settings.get(SETTING_CUSTOM_SCRIPTS); - if (msg?.data?.title && msg?.data?.script && scripts) { - const customScript = scripts.find((s: ICustomScript) => s.title === msg.data.title); + if (msg?.payload?.title && msg?.payload?.script && scripts) { + const customScript = scripts.find((s: ICustomScript) => s.title === msg.payload.title); if (customScript?.script && customScript?.title) { CustomScript.run(customScript); } diff --git a/src/listeners/panel/SettingsListener.ts b/src/listeners/panel/SettingsListener.ts index d07f04dd..ff3f0dea 100644 --- a/src/listeners/panel/SettingsListener.ts +++ b/src/listeners/panel/SettingsListener.ts @@ -9,6 +9,7 @@ import { } from '../../constants'; import { Extension, Settings } from '../../helpers'; import { PanelSettings } from '../../helpers/PanelSettings'; +import { PostMessageData } from '../../models'; import { Command } from '../../panelWebView/Command'; import { CommandToCode } from '../../panelWebView/CommandToCode'; import { BaseListener } from './BaseListener'; @@ -18,7 +19,7 @@ export class SettingsListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: CommandToCode; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { @@ -32,19 +33,19 @@ export class SettingsListener extends BaseListener { this.toggleWritingSettings(); break; case CommandToCode.updateModifiedUpdating: - this.updateSetting(SETTING_AUTO_UPDATE_DATE, msg.data || false); + this.updateSetting(SETTING_AUTO_UPDATE_DATE, msg.payload || false); break; case CommandToCode.updateFmHighlight: this.updateSetting( SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, - msg.data !== null && msg.data !== undefined ? msg.data : false + msg.payload !== null && msg.payload !== undefined ? msg.payload : false ); break; case CommandToCode.updatePreviewUrl: - this.updateSetting(SETTING_PREVIEW_HOST, msg.data || ''); + this.updateSetting(SETTING_PREVIEW_HOST, msg.payload || ''); break; case CommandToCode.updateStartCommand: - this.updateSetting(SETTING_FRAMEWORK_START, msg.data || ''); + this.updateSetting(SETTING_FRAMEWORK_START, msg.payload || ''); break; } } diff --git a/src/listeners/panel/TaxonomyListener.ts b/src/listeners/panel/TaxonomyListener.ts index cfbe5b05..f22f286d 100644 --- a/src/listeners/panel/TaxonomyListener.ts +++ b/src/listeners/panel/TaxonomyListener.ts @@ -3,7 +3,7 @@ import { TagType } from '../../panelWebView/TagType'; import { BaseListener } from './BaseListener'; import { window } from 'vscode'; import { ArticleHelper, Settings } from '../../helpers'; -import { BlockFieldData, CustomTaxonomyData, TaxonomyType } from '../../models'; +import { BlockFieldData, CustomTaxonomyData, PostMessageData, TaxonomyType } from '../../models'; import { DataListener } from '.'; import { SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from '../../constants'; @@ -12,45 +12,45 @@ export class TaxonomyListener extends BaseListener { * Process the messages for the dashboard views * @param msg */ - public static process(msg: { command: any; data: any }) { + public static process(msg: PostMessageData) { super.process(msg); switch (msg.command) { case CommandToCode.updateTags: this.updateTags( - msg.data?.fieldName, - msg.data?.values || [], - msg.data?.parents || [], - msg.data?.blockData + msg.payload?.fieldName, + msg.payload?.values || [], + msg.payload?.parents || [], + msg.payload?.blockData ); break; case CommandToCode.updateCategories: this.updateTags( - msg.data?.fieldName, - msg.data?.values || [], - msg.data?.parents || [], - msg.data?.blockData + msg.payload?.fieldName, + msg.payload?.values || [], + msg.payload?.parents || [], + msg.payload?.blockData ); break; case CommandToCode.updateKeywords: this.updateTags( TagType.keywords.toLowerCase(), - msg.data?.values || [], - msg.data?.parents || [], - msg.data?.blockData + msg.payload?.values || [], + msg.payload?.parents || [], + msg.payload?.blockData ); break; case CommandToCode.updateCustomTaxonomy: - this.updateCustomTaxonomy(msg.data); + this.updateCustomTaxonomy(msg.payload); break; case CommandToCode.addTagToSettings: - this.addTags(TagType.tags, msg.data); + this.addTags(TagType.tags, msg.payload); break; case CommandToCode.addCategoryToSettings: - this.addTags(TagType.categories, msg.data); + this.addTags(TagType.categories, msg.payload); break; case CommandToCode.addToCustomTaxonomy: - this.addCustomTaxonomy(msg.data); + this.addCustomTaxonomy(msg.payload); break; } } diff --git a/src/models/PostMessageData.ts b/src/models/PostMessageData.ts new file mode 100644 index 00000000..9fd0b412 --- /dev/null +++ b/src/models/PostMessageData.ts @@ -0,0 +1,5 @@ +export interface PostMessageData { + command: string; + payload: any; + requestId?: string +} \ No newline at end of file diff --git a/src/models/index.ts b/src/models/index.ts index f42a401f..9f7ec5cd 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -14,6 +14,7 @@ export * from './GitSettings'; export * from './MediaPaths'; export * from './Mode'; export * from './PanelSettings'; +export * from './PostMessageData'; export * from './Snippets'; export * from './SortOrder'; export * from './SortType'; diff --git a/src/panelWebView/components/Fields/DataFileField.tsx b/src/panelWebView/components/Fields/DataFileField.tsx index 3391ec56..28036169 100644 --- a/src/panelWebView/components/Fields/DataFileField.tsx +++ b/src/panelWebView/components/Fields/DataFileField.tsx @@ -38,10 +38,10 @@ export const DataFileField: React.FunctionComponent = ({ const dsRef = React.useRef | null>(null); const messageListener = (message: MessageEvent>) => { - const { command, data } = message.data; + const { command, payload } = message.data; if (command === Command.dataFileEntries) { - setDataEntries(data || null); + setDataEntries(payload || null); } }; @@ -179,18 +179,18 @@ export const DataFileField: React.FunctionComponent = ({ > {isOpen ? availableChoices.map((choice, index) => ( -
  • - {choice.title || ( - Clear value - )} -
    • - )) +
  • + {choice.title || ( + Clear value + )} +
    • + )) : null} @@ -205,21 +205,21 @@ export const DataFileField: React.FunctionComponent = ({ {crntSelected instanceof Array ? crntSelected.map((value: string) => ( - - )) + + )) : crntSelected && ( - - )} + + )} ); }; diff --git a/src/panelWebView/components/Fields/PreviewImage.tsx b/src/panelWebView/components/Fields/PreviewImage.tsx index 49cbdb41..029e3e61 100644 --- a/src/panelWebView/components/Fields/PreviewImage.tsx +++ b/src/panelWebView/components/Fields/PreviewImage.tsx @@ -21,9 +21,9 @@ export const PreviewImage: React.FunctionComponent = ({ const message = event.data; if (message.command === Command.sendMediaUrl) { - const data = message.data; - if (data?.original === value && data.url) { - setImgUrl(data.url); + const payload = message.payload; + if (payload?.original === value && payload.url) { + setImgUrl(payload.url); } } }; diff --git a/src/panelWebView/components/Fields/SlugField.tsx b/src/panelWebView/components/Fields/SlugField.tsx index cdf0e7c8..5dd3c762 100644 --- a/src/panelWebView/components/Fields/SlugField.tsx +++ b/src/panelWebView/components/Fields/SlugField.tsx @@ -38,9 +38,9 @@ export const SlugField: React.FunctionComponent = ({ const messageListener = useCallback( (message: MessageEvent>) => { - const { command, data } = message.data; + const { command, payload } = message.data; if (command === Command.updatedSlug) { - setSlug(data?.slugWithPrefixAndSuffix); + setSlug(payload?.slugWithPrefixAndSuffix); } }, [text] @@ -87,9 +87,8 @@ export const SlugField: React.FunctionComponent = ({