From 3abfbd53023dfff9dacdd02cab6bb060bf82e044 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 18 May 2022 13:20:06 +0200
Subject: [PATCH] Message handler updates

---
 src/helpers/MessageHelper.ts                  | 43 -------------------
 src/panelWebView/components/BaseView.tsx      | 12 +++---
 src/panelWebView/components/Collapsible.tsx   |  8 ++--
 .../ContentType/ContentTypeValidator.tsx      |  8 ++--
 src/panelWebView/components/CustomScript.tsx  |  4 +-
 .../components/Fields/FileField.tsx           |  4 +-
 .../components/Fields/PreviewImage.tsx        |  4 +-
 .../components/Fields/PreviewImageField.tsx   |  4 +-
 src/panelWebView/components/FileItem.tsx      |  4 +-
 .../components/GlobalSettings.tsx             | 10 ++---
 src/panelWebView/components/Metadata.tsx      |  4 +-
 src/panelWebView/components/OtherActions.tsx  | 14 +++---
 src/panelWebView/components/Preview.tsx       |  4 +-
 src/panelWebView/components/PublishAction.tsx |  4 +-
 src/panelWebView/components/SlugAction.tsx    |  4 +-
 .../components/StartServerButton.tsx          |  5 +--
 src/panelWebView/components/TagPicker.tsx     | 16 +++----
 src/panelWebView/hooks/useMessages.tsx        |  8 ++--
 18 files changed, 57 insertions(+), 103 deletions(-)
 delete mode 100644 src/helpers/MessageHelper.ts

diff --git a/src/helpers/MessageHelper.ts b/src/helpers/MessageHelper.ts
deleted file mode 100644
index cc5b255f..00000000
--- a/src/helpers/MessageHelper.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
-import { CommandToCode } from "../panelWebView/CommandToCode";
-
-
-interface ClientVsCode<T> {
-  getState: () => T;
-  setState: (data: T) => void;
-  postMessage: (msg: unknown) => void;
-}
-
-declare const acquireVsCodeApi: <T = unknown>() => ClientVsCode<T>;
-
-export class MessageHelper {
-  private static vscode: ClientVsCode<any>;
-  
-  public static getVsCodeAPI() {
-    if (!MessageHelper.vscode) {
-      MessageHelper.vscode = acquireVsCodeApi();
-    }
-    return MessageHelper.vscode;
-  }
-  
-  public static sendMessage = (command: CommandToCode | DashboardMessage, data?: any) => {    
-    const vscode = MessageHelper.getVsCodeAPI();
-    if (data) {
-      vscode.postMessage({ command, data });
-    } else {
-      vscode.postMessage({ command });
-    }
-  }
-
-  public static getState = () => {    
-    const vscode = MessageHelper.getVsCodeAPI();
-    return vscode.getState();
-  }
-
-  public static setState = (data: any) => {    
-    const vscode = MessageHelper.getVsCodeAPI();
-    vscode.setState({
-      ...data
-    });
-  }
-}
\ No newline at end of file
diff --git a/src/panelWebView/components/BaseView.tsx b/src/panelWebView/components/BaseView.tsx
index abe77285..b66c5689 100644
--- a/src/panelWebView/components/BaseView.tsx
+++ b/src/panelWebView/components/BaseView.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { CustomScript, FolderInfo, Mode, PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { Collapsible } from './Collapsible';
 import { GlobalSettings } from './GlobalSettings';
 import { OtherActions } from './OtherActions';
@@ -10,6 +9,7 @@ import { SponsorMsg } from './SponsorMsg';
 import { StartServerButton } from './StartServerButton';
 import { FeatureFlag } from '../../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../../constants/Features';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IBaseViewProps {
   settings: PanelSettings | undefined;
@@ -20,23 +20,23 @@ export interface IBaseViewProps {
 const BaseView: React.FunctionComponent<IBaseViewProps> = ({settings, folderAndFiles, mode}: React.PropsWithChildren<IBaseViewProps>) => {
   
   const openDashboard = () => {
-    MessageHelper.sendMessage(CommandToCode.openDashboard);
+    Messenger.send(CommandToCode.openDashboard);
   };
   
   const initProject = () => {
-    MessageHelper.sendMessage(CommandToCode.initProject);
+    Messenger.send(CommandToCode.initProject);
   };
   
   const createContent = () => {
-    MessageHelper.sendMessage(CommandToCode.createContent);
+    Messenger.send(CommandToCode.createContent);
   };
 
   const openPreview = () => {
-    MessageHelper.sendMessage(CommandToCode.openPreview);
+    Messenger.send(CommandToCode.openPreview);
   };
 
   const runBulkScript = (script: CustomScript) => {
-    MessageHelper.sendMessage(CommandToCode.runCustomScript, { title: script.title, script });
+    Messenger.send(CommandToCode.runCustomScript, { title: script.title, script });
   };
 
   const customActions: any[] = (settings?.scripts || []).filter(s => s.bulk && (s.type === "content" || !s.type));
diff --git a/src/panelWebView/components/Collapsible.tsx b/src/panelWebView/components/Collapsible.tsx
index 31b1803d..b75589ca 100644
--- a/src/panelWebView/components/Collapsible.tsx
+++ b/src/panelWebView/components/Collapsible.tsx
@@ -1,6 +1,6 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useEffect } from 'react';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { Command } from '../Command';
 import { VsCollapsible } from './VscodeComponents';
 
@@ -16,7 +16,7 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
   const collapseKey = `collapse-${id}`;
 
   useEffect(() => {
-    const prevState = MessageHelper.getState();
+    const prevState: any = Messenger.getState();
     if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
       setIsOpen(true);
       updateStorage(true);
@@ -32,8 +32,8 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
   }, ['']);
 
   const updateStorage = (value: boolean) => {
-    const prevState = MessageHelper.getState();
-    MessageHelper.setState({
+    const prevState: any = Messenger.getState();
+    Messenger.setState({
       ...prevState,
       [collapseKey]: value.toString()
     });
diff --git a/src/panelWebView/components/ContentType/ContentTypeValidator.tsx b/src/panelWebView/components/ContentType/ContentTypeValidator.tsx
index f084a9bf..1b0c191f 100644
--- a/src/panelWebView/components/ContentType/ContentTypeValidator.tsx
+++ b/src/panelWebView/components/ContentType/ContentTypeValidator.tsx
@@ -1,7 +1,7 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { VSCodeButton, VSCodeDivider } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { Field } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { IMetadata } from '../Metadata';
@@ -30,15 +30,15 @@ export const ContentTypeValidator: React.FunctionComponent<IContentTypeValidator
 
 
   const generateContentType = () => {
-    MessageHelper.sendMessage(CommandToCode.generateContentType);
+    Messenger.send(CommandToCode.generateContentType);
   };
 
   const addMissingFields = () => {
-    MessageHelper.sendMessage(CommandToCode.addMissingFields);
+    Messenger.send(CommandToCode.addMissingFields);
   };
 
   const setContentType = () => {
-    MessageHelper.sendMessage(CommandToCode.setContentType);
+    Messenger.send(CommandToCode.setContentType);
   };
 
 
diff --git a/src/panelWebView/components/CustomScript.tsx b/src/panelWebView/components/CustomScript.tsx
index d39eb2ea..1d1d05dd 100644
--- a/src/panelWebView/components/CustomScript.tsx
+++ b/src/panelWebView/components/CustomScript.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { ActionButton } from './ActionButton';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface ICustomScriptProps {
   title: string;
@@ -11,7 +11,7 @@ export interface ICustomScriptProps {
 const CustomScript: React.FunctionComponent<ICustomScriptProps> = ({title, script}: React.PropsWithChildren<ICustomScriptProps>) => {
 
   const runCustomScript = () => {
-    MessageHelper.sendMessage(CommandToCode.runCustomScript, { title, script });
+    Messenger.send(CommandToCode.runCustomScript, { title, script });
   };
 
   return (
diff --git a/src/panelWebView/components/Fields/FileField.tsx b/src/panelWebView/components/Fields/FileField.tsx
index 30885c34..5042f054 100644
--- a/src/panelWebView/components/Fields/FileField.tsx
+++ b/src/panelWebView/components/Fields/FileField.tsx
@@ -1,8 +1,8 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import { DocumentIcon, PaperClipIcon, TrashIcon } from '@heroicons/react/outline';
 import { basename } from 'path';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { BlockFieldData } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { VsLabel } from '../VscodeComponents';
@@ -38,7 +38,7 @@ const File = ({ value, onRemove }: { value: string, onRemove: (value: string) =>
 export const FileField: React.FunctionComponent<IFileFieldProps> = ({ label, multiple, filePath, fileExtensions, fieldName, value, parents, blockData, onChange }: React.PropsWithChildren<IFileFieldProps>) => {
 
   const selectFile = useCallback(() => {
-    MessageHelper.sendMessage(CommandToCode.selectFile, { 
+    Messenger.send(CommandToCode.selectFile, { 
       filePath,
       fieldName,
       value,
diff --git a/src/panelWebView/components/Fields/PreviewImage.tsx b/src/panelWebView/components/Fields/PreviewImage.tsx
index 7451c83a..89700226 100644
--- a/src/panelWebView/components/Fields/PreviewImage.tsx
+++ b/src/panelWebView/components/Fields/PreviewImage.tsx
@@ -1,6 +1,6 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { Command } from '../../Command';
 import { CommandToCode } from '../../CommandToCode';
 import { ImageFallback } from './ImageFallback';
@@ -29,7 +29,7 @@ export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ valu
     if (value?.webviewUrl) {
       setImgUrl(value.webviewUrl);
     } else {
-      MessageHelper.sendMessage(CommandToCode.getImageUrl, value)
+      Messenger.send(CommandToCode.getImageUrl, value)
     }
   }, [value]);
 
diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx
index 733233b7..0ac6055c 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 {PhotographIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 import { BlockFieldData } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { VsLabel } from '../VscodeComponents';
@@ -35,7 +35,7 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
 }: React.PropsWithChildren<IPreviewImageFieldProps>) => {
 
   const selectImage = useCallback(() => {
-    MessageHelper.sendMessage(CommandToCode.selectImage, { 
+    Messenger.send(CommandToCode.selectImage, { 
       filePath: filePath,
       fieldName,
       value,
diff --git a/src/panelWebView/components/FileItem.tsx b/src/panelWebView/components/FileItem.tsx
index f6ff23c7..1908dab1 100644
--- a/src/panelWebView/components/FileItem.tsx
+++ b/src/panelWebView/components/FileItem.tsx
@@ -1,7 +1,7 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { DEFAULT_FILE_TYPES } from '../../constants/DefaultFileTypes';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
 import { FileIcon } from './Icons/FileIcon';
 import { MarkdownIcon } from './Icons/MarkdownIcon';
@@ -15,7 +15,7 @@ export interface IFileItemProps {
 const FileItem: React.FunctionComponent<IFileItemProps> = ({ name, folderName, path }: React.PropsWithChildren<IFileItemProps>) => {
 
   const openFile = () => {
-    MessageHelper.sendMessage(CommandToCode.openInEditor, path);
+    Messenger.send(CommandToCode.openInEditor, path);
   };
 
   const itemName = useMemo(() => {
diff --git a/src/panelWebView/components/GlobalSettings.tsx b/src/panelWebView/components/GlobalSettings.tsx
index bcd834a2..108dc412 100644
--- a/src/panelWebView/components/GlobalSettings.tsx
+++ b/src/panelWebView/components/GlobalSettings.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { useDebounce } from '../../hooks/useDebounce';
 import { Collapsible } from './Collapsible';
 import { VsLabel } from './VscodeComponents';
 import useStartCommand from '../hooks/useStartCommand';
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IGlobalSettingsProps {
   settings: PanelSettings | undefined;
@@ -24,11 +24,11 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
   const debouncePreviewUrl = useDebounce(previewUrl, 1000);
 
   const onDateCheck = () => {
-    MessageHelper.sendMessage(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
+    Messenger.send(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
   };
   
   const onHighlightCheck = () => {
-    MessageHelper.sendMessage(CommandToCode.updateFmHighlight, !fmHighlighting);
+    Messenger.send(CommandToCode.updateFmHighlight, !fmHighlighting);
   };
 
   const previewChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -54,14 +54,14 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
   React.useEffect(() => {
     if (isDirty) {
       setIsDirty(false);
-      MessageHelper.sendMessage(CommandToCode.updatePreviewUrl, debouncePreviewUrl);
+      Messenger.send(CommandToCode.updatePreviewUrl, debouncePreviewUrl);
     }
   }, [debouncePreviewUrl]);
 
   React.useEffect(() => {
     if (isDirty) {
       setIsDirty(false);
-      MessageHelper.sendMessage(CommandToCode.updateStartCommand, debounceStartCommand);
+      Messenger.send(CommandToCode.updateStartCommand, debounceStartCommand);
     }
   }, [debounceStartCommand]);
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 267e92c3..f1de0ac8 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { BlockFieldData, Field, PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { TagType } from '../TagType';
 import { Collapsible } from './Collapsible';
 import "react-datepicker/dist/react-datepicker.css";
@@ -10,6 +9,7 @@ import { WrapperField } from './Fields/WrapperField';
 import { ContentTypeValidator } from './ContentType/ContentTypeValidator';
 import { FeatureFlag } from '../../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../../constants';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -30,7 +30,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, features,
       return;
     }
 
-    MessageHelper.sendMessage(CommandToCode.updateMetadata, {
+    Messenger.send(CommandToCode.updateMetadata, {
       field,
       parents,
       value
diff --git a/src/panelWebView/components/OtherActions.tsx b/src/panelWebView/components/OtherActions.tsx
index a3362fe1..a93c8485 100644
--- a/src/panelWebView/components/OtherActions.tsx
+++ b/src/panelWebView/components/OtherActions.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { Collapsible } from './Collapsible';
 import { BugIcon } from './Icons/BugIcon';
 import { CenterIcon } from './Icons/CenterIcon';
@@ -12,6 +11,7 @@ import { TemplateIcon } from './Icons/TemplateIcon';
 import { WritingIcon } from './Icons/WritingIcon';
 import { OtherActionButton } from './OtherActionButton';
 import { ISSUE_LINK } from '../../constants/Links';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface IOtherActionsProps {
   isFile: boolean;
@@ -22,23 +22,23 @@ export interface IOtherActionsProps {
 const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, settings, isBase}: React.PropsWithChildren<IOtherActionsProps>) => {
 
   const openSettings = () => {
-    MessageHelper.sendMessage(CommandToCode.openSettings);
+    Messenger.send(CommandToCode.openSettings);
   };
   
   const openFile = () => {
-    MessageHelper.sendMessage(CommandToCode.openFile);
+    Messenger.send(CommandToCode.openFile);
   };
   
   const openProject = () => {
-    MessageHelper.sendMessage(CommandToCode.openProject);
+    Messenger.send(CommandToCode.openProject);
   };
   
   const createAsTemplate = () => {
-    MessageHelper.sendMessage(CommandToCode.createTemplate);
+    Messenger.send(CommandToCode.createTemplate);
   };
   
   const toggleWritingSettings = () => {
-    MessageHelper.sendMessage(CommandToCode.toggleWritingSettings);
+    Messenger.send(CommandToCode.toggleWritingSettings);
   };
   
   return (
@@ -46,7 +46,7 @@ const OtherActions: React.FunctionComponent<IOtherActionsProps> = ({isFile, sett
       <Collapsible id={`${isBase ? "base_" : ""}other_actions`} title="Other actions" className={`other_actions`}>
         <OtherActionButton className={settings?.writingSettingsEnabled ? "active" : ""} onClick={toggleWritingSettings} disabled={typeof settings?.writingSettingsEnabled === "undefined"}><WritingIcon /> <span>{settings?.writingSettingsEnabled ? "Writing settings enabled" : "Enable writing settings"}</span></OtherActionButton>
 
-        <OtherActionButton onClick={() => MessageHelper.sendMessage(CommandToCode.toggleCenterMode)}>
+        <OtherActionButton onClick={() => Messenger.send(CommandToCode.toggleCenterMode)}>
           <CenterIcon /> <span>Toggle center mode</span>
         </OtherActionButton>
 
diff --git a/src/panelWebView/components/Preview.tsx b/src/panelWebView/components/Preview.tsx
index 738cc3be..9e5e9d0e 100644
--- a/src/panelWebView/components/Preview.tsx
+++ b/src/panelWebView/components/Preview.tsx
@@ -1,5 +1,5 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
 import { ActionButton } from './ActionButton';
 
@@ -10,7 +10,7 @@ export interface IPreviewProps {
 const Preview: React.FunctionComponent<IPreviewProps> = ({slug}: React.PropsWithChildren<IPreviewProps>) => {
 
   const open = () => {
-    MessageHelper.sendMessage(CommandToCode.openPreview);
+    Messenger.send(CommandToCode.openPreview);
   };
 
   if (!slug) {
diff --git a/src/panelWebView/components/PublishAction.tsx b/src/panelWebView/components/PublishAction.tsx
index e9012c02..97610246 100644
--- a/src/panelWebView/components/PublishAction.tsx
+++ b/src/panelWebView/components/PublishAction.tsx
@@ -1,7 +1,7 @@
 
 
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
 import { ActionButton } from './ActionButton';
 
@@ -13,7 +13,7 @@ const PublishAction: React.FunctionComponent<IPublishActionProps> = (props: Reac
   const { draft } = props;
 
   const publish = () => {
-    MessageHelper.sendMessage(CommandToCode.publish);
+    Messenger.send(CommandToCode.publish);
   };
 
   return (
diff --git a/src/panelWebView/components/SlugAction.tsx b/src/panelWebView/components/SlugAction.tsx
index c27fb888..e0eb2bee 100644
--- a/src/panelWebView/components/SlugAction.tsx
+++ b/src/panelWebView/components/SlugAction.tsx
@@ -1,5 +1,5 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { CommandToCode } from '../CommandToCode';
 import { ActionButton } from './ActionButton';
 
@@ -8,7 +8,7 @@ export interface ISlugActionProps {}
 const SlugAction: React.FunctionComponent<ISlugActionProps> = ({}: React.PropsWithChildren<ISlugActionProps>) => {
 
   const optimize = () => {
-    MessageHelper.sendMessage(CommandToCode.updateSlug);
+    Messenger.send(CommandToCode.updateSlug);
   };
 
   return (
diff --git a/src/panelWebView/components/StartServerButton.tsx b/src/panelWebView/components/StartServerButton.tsx
index 6ab35f20..f22e675b 100644
--- a/src/panelWebView/components/StartServerButton.tsx
+++ b/src/panelWebView/components/StartServerButton.tsx
@@ -1,6 +1,5 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
-import { FrameworkDetectors } from '../../constants/FrameworkDetectors';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
 import useStartCommand from '../hooks/useStartCommand';
@@ -13,7 +12,7 @@ export const StartServerButton: React.FunctionComponent<IStartServerButtonProps>
   const { startCommand } = useStartCommand(settings);
 
   const startLocalServer = (command: string) => {
-    MessageHelper.sendMessage(CommandToCode.frameworkCommand, { command });
+    Messenger.send(CommandToCode.frameworkCommand, { command });
   };
   
   return (
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 1cd10961..2506667d 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -6,9 +6,9 @@ import { TagType } from '../TagType';
 import Downshift from 'downshift';
 import { AddIcon } from './Icons/AddIcon';
 import { VsLabel } from './VscodeComponents';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { BlockFieldData, CustomTaxonomyData } from '../../models';
 import { useCallback, useMemo } from 'react';
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export interface ITagPickerProps {
   type: TagType;
@@ -52,11 +52,11 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
    */
   const onCreate = (tag: string) => {
     if (type === TagType.tags) {
-      MessageHelper.sendMessage(CommandToCode.addTagToSettings, tag);
+      Messenger.send(CommandToCode.addTagToSettings, tag);
     } else if (type === TagType.categories) {
-      MessageHelper.sendMessage(CommandToCode.addCategoryToSettings, tag);
+      Messenger.send(CommandToCode.addCategoryToSettings, tag);
     } else if (type === TagType.custom) {
-      MessageHelper.sendMessage(CommandToCode.addToCustomTaxonomy, {
+      Messenger.send(CommandToCode.addToCustomTaxonomy, {
         id: taxonomyId,
         name: fieldName,
         option: tag
@@ -70,26 +70,26 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
    */
   const sendUpdate = (values: string[]) => {    
     if (type === TagType.tags) {
-      MessageHelper.sendMessage(CommandToCode.updateTags, {
+      Messenger.send(CommandToCode.updateTags, {
         fieldName,
         values,
         parents,
         blockData
       });
     } else if (type === TagType.categories) {
-      MessageHelper.sendMessage(CommandToCode.updateCategories, {
+      Messenger.send(CommandToCode.updateCategories, {
         fieldName,
         values,
         parents,
         blockData
       });
     } else if (type === TagType.keywords) {
-      MessageHelper.sendMessage(CommandToCode.updateKeywords, {
+      Messenger.send(CommandToCode.updateKeywords, {
         values,
         parents
       });
     } else if (type === TagType.custom) {
-      MessageHelper.sendMessage(CommandToCode.updateCustomTaxonomy, {
+      Messenger.send(CommandToCode.updateCustomTaxonomy, {
         id: taxonomyId,
         name: fieldName,
         options: values,
diff --git a/src/panelWebView/hooks/useMessages.tsx b/src/panelWebView/hooks/useMessages.tsx
index e7f598f0..14aa91cb 100644
--- a/src/panelWebView/hooks/useMessages.tsx
+++ b/src/panelWebView/hooks/useMessages.tsx
@@ -1,14 +1,12 @@
 import { useState, useEffect } from 'react';
 import { GeneralCommands } from '../../constants';
-import { MessageHelper } from '../../helpers/MessageHelper';
 import { Mode } from '../../models/Mode';
 import { DashboardData } from '../../models/DashboardData';
 import { FolderInfo, PanelSettings } from '../../models/PanelSettings';
 import { Command } from '../Command';
 import { CommandToCode } from '../CommandToCode';
 import { TagType } from '../TagType';
-
-const vscode = MessageHelper.getVsCodeAPI();
+import { Messenger } from '@estruyf/vscode/dist/client';
 
 export default function useMessages() {
   const [metadata, setMetadata] = useState<any>({});
@@ -68,8 +66,8 @@ export default function useMessages() {
       setLoading(false);
     }, 5000);
 
-    vscode.postMessage({ command: CommandToCode.getData });
-    vscode.postMessage({ command: CommandToCode.getMode });
+    Messenger.send(CommandToCode.getData);
+    Messenger.send(CommandToCode.getMode);
   }, []);
 
   return {