Dependency updates + Panel view refactoring

package.json

@@ -2430,7 +2430,7 @@
     "localization:find": "node scripts/find-localization.js"
   },
   "devDependencies": {
-    "@actions/core": "^1.8.2",
+    "@actions/core": "^1.10.0",
     "@bendera/vscode-webview-elements": "0.6.2",
     "@estruyf/vscode": "^1.1.0",
     "@headlessui/react": "1.5.0",
@@ -2438,38 +2438,38 @@
     "@iarna/toml": "2.2.3",
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.11.6",
-    "@sentry/react": "^6.13.3",
-    "@sentry/tracing": "^6.13.3",
+    "@sentry/react": "^6.19.7",
+    "@sentry/tracing": "^6.19.7",
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chai": "^4.3.1",
+    "@types/chai": "^4.3.4",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
     "@types/js-yaml": "3.12.1",
-    "@types/lodash.omit": "^4.5.6",
+    "@types/lodash.omit": "^4.5.7",
     "@types/lodash.uniqby": "4.7.6",
-    "@types/lodash.xor": "^4.5.6",
+    "@types/lodash.xor": "^4.5.7",
     "@types/mdast": "^3.0.10",
     "@types/mime-types": "^2.1.1",
     "@types/mocha": "^5.2.7",
-    "@types/mustache": "^4.1.2",
+    "@types/mustache": "^4.2.2",
     "@types/node": "10.17.48",
-    "@types/node-fetch": "^2.5.12",
+    "@types/node-fetch": "^2.6.2",
     "@types/react": "17.0.0",
-    "@types/react-datepicker": "^4.1.7",
+    "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "17.0.0",
-    "@types/vscode": "^1.73.0",
+    "@types/vscode": "^1.81.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "@vscode/codicons": "0.0.20",
     "@vscode/l10n": "^0.0.14",
-    "@vscode/webview-ui-toolkit": "^0.9.1",
-    "@webpack-cli/serve": "^1.6.0",
+    "@vscode/webview-ui-toolkit": "^0.9.3",
+    "@webpack-cli/serve": "^1.7.0",
     "ajv": "^8.12.0",
     "array-move": "^4.0.0",
     "assert": "^2.0.0",
     "autoprefixer": "^10.4.13",
-    "chai": "^4.3.6",
-    "cheerio": "^1.0.0-rc.12",
+    "chai": "^4.3.7",
+    "cheerio": "1.0.0-rc.12",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
     "downshift": "6.0.6",
@@ -2479,7 +2479,7 @@
     "gray-matter": "4.0.3",
     "html-loader": "1.3.2",
     "html-webpack-plugin": "4.5.0",
-    "image-size": "^1.0.0",
+    "image-size": "^1.0.2",
     "invariant": "^2.2.4",
     "js-yaml": "^4.1.0",
     "jsonc-parser": "^3.2.0",
@@ -2489,7 +2489,7 @@
     "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
     "mime-types": "^2.1.35",
-    "mocha": "^10.0.0",
+    "mocha": "^10.2.0",
     "mustache": "^4.2.0",
     "node-fetch": "^2.6.9",
     "node-json-db": "^2.2.0",
@@ -2503,33 +2503,33 @@
     "react": "17.0.1",
     "react-datepicker": "4.2.1",
     "react-dom": "17.0.1",
-    "react-dropzone": "^11.3.4",
-    "react-markdown": "^8.0.5",
+    "react-dropzone": "^11.7.1",
+    "react-markdown": "^8.0.7",
     "react-popper": "^2.3.0",
-    "react-quill": "^2.0.0-beta.4",
-    "react-router-dom": "^6.3.0",
+    "react-quill": "^2.0.0",
+    "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^8.2.0",
     "recoil": "^0.4.1",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
-    "semver": "^7.3.7",
-    "simple-git": "^3.10.0",
+    "semver": "^7.3.8",
+    "simple-git": "^3.16.0",
     "style-loader": "2.0.0",
     "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.6.2",
-    "uniforms": "^3.7.0",
-    "uniforms-antd": "^3.7.0",
-    "uniforms-bridge-json-schema": "^3.7.0",
-    "uniforms-unstyled": "^3.7.0",
+    "typescript": "^4.9.5",
+    "uniforms": "^3.10.2",
+    "uniforms-antd": "^3.10.2",
+    "uniforms-bridge-json-schema": "^3.10.2",
+    "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
     "vscode-extension-tester": "^5.3.0",
     "wc-react": "github:estruyf/wc-react",
-    "webpack": "^5.65.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
     "yaml": "^2.2.1",
     "yawn-yaml": "^1.5.0"
   },

src/commands/Backers.ts

@@ -3,7 +3,7 @@ import { COMMAND_NAME, CONTEXT } from '../constants';
 import { Extension } from '../helpers';
 import { Credentials } from '../services/Credentials';
 import fetch from 'node-fetch';
-import { ExplorerView } from '../explorerView/ExplorerView';
+import { PanelWebview } from '../PanelWebview/PanelWebview';
 import { Dashboard } from './Dashboard';
 import { SettingsListener } from '../listeners/panel';
 
@@ -61,8 +61,8 @@ export class Backers {
       await ext.setState(CONTEXT.backer, true, 'global');
 
       if (!prevData) {
-        const explorerView = ExplorerView.getInstance();
-        if (explorerView.visible) {
+        const PanelView = PanelWebview.getInstance();
+        if (PanelView.visible) {
           SettingsListener.getSettings();
         }
 

src/commands/StatusListener.ts

@@ -9,7 +9,7 @@ import {
 } from './../constants';
 import * as vscode from 'vscode';
 import { ArticleHelper, Notifications, SeoHelper, Settings } from '../helpers';
-import { ExplorerView } from '../explorerView/ExplorerView';
+import { PanelWebview } from '../PanelWebview/PanelWebview';
 import { DefaultFields } from '../constants';
 import { ContentType } from '../helpers/ContentType';
 import { DataListener } from '../listeners/panel';
@@ -91,7 +91,7 @@ export class StatusListener {
           }
         }
 
-        const panel = ExplorerView.getInstance();
+        const panel = PanelWebview.getInstance();
         if (panel && panel.visible) {
           DataListener.pushMetadata(article?.data);
         }
@@ -103,7 +103,7 @@ export class StatusListener {
     } else {
       commands.executeCommand('setContext', CONTEXT.isValidFile, false);
 
-      const panel = ExplorerView.getInstance();
+      const panel = PanelWebview.getInstance();
       if (panel && panel.visible) {
         DataListener.pushMetadata(null);
       }

src/constants/TelemetryEvent.ts

@@ -26,7 +26,7 @@ export const TelemetryEvent = {
   insertMediaToContent: 'insertMediaToContent',
   insertFileToContent: 'insertFileToContent',
   updateMediaMetadata: 'updateMediaMetadata',
-  openExplorerView: 'openExplorerView',
+  openPanelWebview: 'openPanelWebview',
 
   // Chatbot
   openChatbot: 'openChatbot',

src/extension.ts

@@ -3,7 +3,7 @@ import * as vscode from 'vscode';
 import { COMMAND_NAME, TelemetryEvent } from './constants';
 import { MarkdownFoldingProvider } from './providers/MarkdownFoldingProvider';
 import { TagType } from './panelWebView/TagType';
-import { ExplorerView } from './explorerView/ExplorerView';
+import { PanelWebview } from './PanelWebview/PanelWebview';
 import { DashboardSettings, debounceCallback, Logger, Settings as SettingsHelper } from './helpers';
 import ContentProvider from './providers/ContentProvider';
 import { PagesListener } from './listeners/dashboard';
@@ -124,9 +124,9 @@ export async function activate(context: vscode.ExtensionContext) {
   }
 
   // Register the explorer view
-  const explorerSidebar = ExplorerView.getInstance(extensionUri);
-  const explorerView = vscode.window.registerWebviewViewProvider(
-    ExplorerView.viewType,
+  const explorerSidebar = PanelWebview.getInstance(extensionUri);
+  const PanelView = vscode.window.registerWebviewViewProvider(
+    PanelWebview.viewType,
     explorerSidebar,
     {
       webviewOptions: {
@@ -264,7 +264,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
   // Collapse all sections in the webview
   const collapseAll = vscode.commands.registerCommand(COMMAND_NAME.collapseSections, () => {
-    ExplorerView.getInstance()?.collapseAll();
+    PanelWebview.getInstance()?.collapseAll();
   });
 
   // Things to do when configuration changes
@@ -370,7 +370,7 @@ export async function activate(context: vscode.ExtensionContext) {
   // Subscribe all commands
   subscriptions.push(
     insertTags,
-    explorerView,
+    PanelView,
     insertCategories,
     createTag,
     createCategory,

src/helpers/ImageHelper.ts

@@ -1,5 +1,5 @@
 import { STATIC_FOLDER_PLACEHOLDER } from './../constants/StaticFolderPlaceholder';
-import { ExplorerView } from './../explorerView/ExplorerView';
+import { PanelWebview } from './../PanelWebview/PanelWebview';
 import { Uri, window } from 'vscode';
 import { dirname, extname, join } from 'path';
 import { Field } from '../models';
@@ -104,7 +104,7 @@ export class ImageHelper {
    */
   public static processImageFields(updatedMetadata: any, fields: Field[], parents: string[] = []) {
     const imageFields = fields.filter((field) => field.type === 'image');
-    const panel = ExplorerView.getInstance();
+    const panel = PanelWebview.getInstance();
 
     // Support multi-level fields
     let parentObj = updatedMetadata;

src/listeners/general/BaseListener.ts

@@ -1,6 +1,6 @@
 import { GeneralCommands } from './../../constants/GeneralCommands';
 import { Dashboard } from '../../commands/Dashboard';
-import { ExplorerView } from '../../explorerView/ExplorerView';
+import { PanelWebview } from '../../PanelWebview/PanelWebview';
 import { Extension } from '../../helpers';
 import { Logger } from '../../helpers/Logger';
 import { commands, Uri } from 'vscode';
@@ -26,7 +26,7 @@ export abstract class BaseListener {
     Logger.info(`Sending message to webview (panel&dashboard): ${command}`);
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     panel.sendMessage({ command: command as any, payload });
 

src/listeners/general/GitListener.ts

@@ -6,7 +6,7 @@ import {
 } from './../../constants/settings';
 import { Settings } from './../../helpers/SettingsHelper';
 import { Dashboard } from '../../commands/Dashboard';
-import { ExplorerView } from '../../explorerView/ExplorerView';
+import { PanelWebview } from '../../PanelWebview/PanelWebview';
 import {
   ArticleHelper,
   Extension,
@@ -258,7 +258,7 @@ export class GitListener {
    */
   private static sendMsg(command: string, payload: any) {
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     panel.sendMessage({ command: command as any, payload });
 

src/listeners/panel/BaseListener.ts

@@ -1,5 +1,5 @@
 import { Extension } from './../../helpers/Extension';
-import { ExplorerView } from './../../explorerView/ExplorerView';
+import { PanelWebview } from './../../PanelWebview/PanelWebview';
 import { Logger } from '../../helpers';
 import { Command } from '../../panelWebView/Command';
 import { PostMessageData } from '../../models';
@@ -16,7 +16,7 @@ export abstract class BaseListener {
     Logger.info(`Sending message to panel: ${command}`);
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     panel.sendMessage({
       command,
@@ -28,7 +28,7 @@ export abstract class BaseListener {
     Logger.info(`Sending request result to panel: ${command}`);
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     panel.getWebview()?.postMessage({
       command,
@@ -41,7 +41,7 @@ export abstract class BaseListener {
     Logger.info(`Sending request error to the panel: ${command}`);
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     panel.getWebview()?.postMessage({
       command,

src/listeners/panel/DataListener.ts

@@ -20,7 +20,7 @@ import { ParsedFrontMatter } from '../../parsers';
 import { processKnownPlaceholders } from '../../helpers/PlaceholderHelper';
 import { Field, PostMessageData } from '../../models';
 import { encodeEmoji } from '../../utils';
-import { ExplorerView } from '../../explorerView/ExplorerView';
+import { PanelWebview } from '../../PanelWebview/PanelWebview';
 import { MessageHandlerData } from '@estruyf/vscode';
 import { SponsorAi } from '../../services/SponsorAI';
 
@@ -84,7 +84,7 @@ export class DataListener extends BaseListener {
     }
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     const editor = window.activeTextEditor;
     if (!editor) {

src/listeners/panel/MediaListener.ts

@@ -1,4 +1,4 @@
-import { ExplorerView } from './../../explorerView/ExplorerView';
+import { PanelWebview } from './../../PanelWebview/PanelWebview';
 import { commands, window } from 'vscode';
 import { Dashboard } from '../../commands/Dashboard';
 import { COMMAND_NAME } from '../../constants';
@@ -38,7 +38,7 @@ export class MediaListener extends BaseListener {
       return;
     }
 
-    const panel = ExplorerView.getInstance();
+    const panel = PanelWebview.getInstance();
 
     if (typeof payload === 'string') {
       const imagePath = payload;
@@ -75,7 +75,7 @@ export class MediaListener extends BaseListener {
 
     const imgUrl = ImageHelper.relToAbs(filePath || '', data);
     if (imgUrl) {
-      const viewUrl = ExplorerView.getInstance().getWebview()?.asWebviewUri(imgUrl);
+      const viewUrl = PanelWebview.getInstance().getWebview()?.asWebviewUri(imgUrl);
       if (viewUrl) {
         this.sendMsg(Command.sendMediaUrl, {
           original: data,

src/listeners/panel/TaxonomyListener.ts

@@ -11,7 +11,7 @@ import {
   SETTING_SEO_TITLE_FIELD
 } from '../../constants';
 import { SponsorAi } from '../../services/SponsorAI';
-import { ExplorerView } from '../../explorerView/ExplorerView';
+import { PanelWebview } from '../../PanelWebview/PanelWebview';
 import { MessageHandlerData } from '@estruyf/vscode';
 
 export class TaxonomyListener extends BaseListener {
@@ -71,7 +71,7 @@ export class TaxonomyListener extends BaseListener {
     }
 
     const extPath = Extension.getInstance().extensionPath;
-    const panel = ExplorerView.getInstance(extPath);
+    const panel = PanelWebview.getInstance(extPath);
 
     const editor = window.activeTextEditor;
     if (!editor) {

src/panelWebView/PanelWebview.ts

@@ -29,9 +29,9 @@ import { Telemetry } from '../helpers/Telemetry';
 import { GitListener, ModeListener } from '../listeners/general';
 import { Folders } from '../commands';
 
-export class ExplorerView implements WebviewViewProvider, Disposable {
+export class PanelWebview implements WebviewViewProvider, Disposable {
   public static readonly viewType = 'frontMatter.explorer';
-  private static instance: ExplorerView;
+  private static instance: PanelWebview;
 
   private panel: WebviewView | null = null;
   private disposable: Disposable | null = null;
@@ -42,12 +42,12 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    * Creates the singleton instance for the panel
    * @param extPath
    */
-  public static getInstance(extPath?: Uri): ExplorerView {
-    if (!ExplorerView.instance) {
-      ExplorerView.instance = new ExplorerView(extPath as Uri);
+  public static getInstance(extPath?: Uri): PanelWebview {
+    if (!PanelWebview.instance) {
+      PanelWebview.instance = new PanelWebview(extPath as Uri);
     }
 
-    return ExplorerView.instance;
+    return PanelWebview.instance;
   }
 
   /**
@@ -114,7 +114,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
 
     webviewView.onDidChangeVisibility(() => {
       if (this.visible) {
-        Telemetry.send(TelemetryEvent.openExplorerView);
+        Telemetry.send(TelemetryEvent.openPanelWebview);
         DataListener.getFileData();
       }
     });