patternfly · nicolethoen · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025
diff --git a/packages/dev/package.json b/packages/dev/package.json
@@ -44,7 +44,7 @@
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "webpack": "^5.95.0",
     "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^5.2.1",
+    "webpack-dev-server": "^5.2.2",
     "yaml": "^1.10.2",
     "yaml-loader": "^0.6.0"
   }

diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -56,16 +56,16 @@
     "ts-loader": "^9.4.2",
     "tslint": "^6.1.3",
     "vscode": "^1.1.37",
-    "webpack": "^5.83.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.1"
   },
   "dependencies": {
-    "@cloudmosaic/quickstarts": "^0.0.15",
     "@patternfly/patternfly": "^6.3.1",
+    "@patternfly/quickstarts": "^6.0.0-prerelease.0",
     "i18next-parser": "^9.3.0",
-    "js-base64": "^3.6.0",
+    "js-base64": "3.7.8",
     "js-yaml": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   }
 }
diff --git a/packages/vscode/src/extension.ts b/packages/vscode/src/extension.ts
@@ -19,9 +19,14 @@ export function activate(context: vscode.ExtensionContext) {
   const disposable = vscode.commands.registerCommand(
     "extension.qsPreview",
     () => {
+      const activeEditor = vscode.window.activeTextEditor;
+      if (!activeEditor) {
+        vscode.window.showWarningMessage("Please open a file first to preview quick starts.");
+        return;
+      }
       view = new ViewLoader(
-        vscode.window.activeTextEditor?.document.getText() as string,
-        vscode.window.activeTextEditor?.document.fileName as string,
+        activeEditor.document.getText(),
+        activeEditor.document.fileName,
         context.extensionPath
       );
     }

diff --git a/packages/vscode/src/view/ViewLoader.ts b/packages/vscode/src/view/ViewLoader.ts
@@ -52,11 +52,18 @@ export default class ViewLoader {
   }
 
   private getWebviewContent(config: string, filePath: string): string {
+    if (!this._panel) {
+      return "";
+    }
     // Local path to main script run in the webview
     const reactAppPathOnDisk = vscode.Uri.file(
       path.join(this._extensionPath, "quickstartsPreview", "quickstartsPreview.js")
     );
+    // Use vscode-resource scheme for older VS Code API compatibility
     const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });
+    // Escape the config and filePath for HTML to prevent XSS and syntax errors
+    const escapedConfig = config.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+    const escapedFilePath = filePath.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
     const html = `<!DOCTYPE html>
     <html lang="en">
     <head>
@@ -72,8 +79,8 @@ export default class ViewLoader {
 
         <script>
           window.acquireVsCodeApi = acquireVsCodeApi;
-          window.initialData = "${config}";
-          window.filePath = "${filePath}";
+          window.initialData = "${escapedConfig}";
+          window.filePath = "${escapedFilePath}";
         </script>
     </head>
     <body>
@@ -86,7 +93,7 @@ export default class ViewLoader {
   }
 
   private encodeContent(text: string, fileName: string): any {
-    if (fileName.endsWith(".yaml")) {
+    if (fileName && fileName.endsWith(".yaml")) {
       return Base64.encode(JSON.stringify(yamlLoad(text)));
     }
     return Base64.encode(text);

diff --git a/packages/vscode/src/view/app/index.tsx b/packages/vscode/src/view/app/index.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { QuickStartsPreview } from './quickstarts';
 
@@ -11,14 +12,27 @@ declare global {
   }
 }
 
-const vscode = window.acquireVsCodeApi();
-
-const root = createRoot(document.getElementById('root'));
-
-root.render(
-  <QuickStartsPreview
-    vscode={vscode}
-    initialData={window.initialData}
-    filePath={window.filePath}
-  />,
-);
+try {
+  const vscode = window.acquireVsCodeApi();
+  const rootElement = document.getElementById('root');
+  if (!rootElement) {
+    console.error('Root element not found!');
+  } else {
+    const root = createRoot(rootElement);
+    root.render(
+      <QuickStartsPreview
+        vscode={vscode}
+        initialData={window.initialData}
+        filePath={window.filePath}
+      />,
+    );
+  }
+} catch (error) {
+  console.error('Error in webview:', error);
+  document.body.innerHTML = `<div style="padding: 20px; color: red;">
+    <h2>Error loading preview</h2>
+    <pre>${error instanceof Error ? error.stack : String(error)}</pre>
+    <p>initialData: ${window.initialData ? 'present (' + window.initialData.length + ' chars)' : 'missing'}</p>
+    <p>filePath: ${window.filePath || 'missing'}</p>
+  </div>`;
+}
diff --git a/packages/vscode/src/view/app/quickstarts.tsx b/packages/vscode/src/view/app/quickstarts.tsx
@@ -1,9 +1,8 @@
-import '@patternfly/patternfly/base/patternfly-shield-inheritable.css';
+import * as React from 'react';
 import '@patternfly/patternfly/patternfly.min.css';
-import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
 import '@patternfly/quickstarts/dist/quickstarts.css';
 import {
-  ProcedureAsciiDocParser,
+  ProcQuickStartParser,
   QuickStartCatalogPage,
   QuickStartContext,
   QuickStartDrawer,
@@ -13,27 +12,47 @@ import {
 import { Base64 } from 'js-base64';
 
 export const QuickStartsPreview = ({ initialData: config, filePath, vscode }) => {
-  const decodedConfig = Base64.decode(config);
-  const allQuickStarts = [];
-  if (filePath.endsWith('.adoc')) {
-    allQuickStarts.push(ProcedureAsciiDocParser(decodedConfig));
-  } else {
-    allQuickStarts.push(JSON.parse(decodedConfig));
+  if (!config) {
+    console.error('No initialData provided!');
+    return <div style={{ padding: '20px' }}>Error: No data provided to preview</div>;
+  }
+
+  try {
+    const decodedConfig = Base64.decode(config);
+    const allQuickStarts = [];
+    if (filePath && filePath.endsWith('.adoc')) {
+      const parsedConfig = JSON.parse(decodedConfig);
+      allQuickStarts.push(ProcQuickStartParser(parsedConfig));
+    } else {
+      const parsed = JSON.parse(decodedConfig);
+      allQuickStarts.push(parsed);
+    }
+
+    const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+    const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+    const valuesForQuickstartContext = useValuesForQuickStartContext({
+      allQuickStarts,
+      activeQuickStartID,
+      setActiveQuickStartID,
+      allQuickStartStates,
+      setAllQuickStartStates,
+    });
+    return (
+      <QuickStartContext.Provider value={valuesForQuickstartContext}>
+        <QuickStartDrawer>
+          <QuickStartCatalogPage />
+        </QuickStartDrawer>
+      </QuickStartContext.Provider>
+    );
+  } catch (error) {
+    console.error('Error in QuickStartsPreview:', error);
+    return (
+      <div style={{ padding: '20px', color: 'red' }}>
+        <h2>Error rendering Quick Start</h2>
+        <pre>{error instanceof Error ? error.stack : String(error)}</pre>
+        <p>Config length: {config?.length || 0}</p>
+        <p>File path: {filePath || 'missing'}</p>
+      </div>
+    );
   }
-  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
-  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
-  const valuesForQuickstartContext = useValuesForQuickStartContext({
-    allQuickStarts,
-    activeQuickStartID,
-    setActiveQuickStartID,
-    allQuickStartStates,
-    setAllQuickStartStates,
-  });
-  return (
-    <QuickStartContext.Provider value={valuesForQuickstartContext}>
-      <QuickStartDrawer>
-        <QuickStartCatalogPage />
-      </QuickStartDrawer>
-    </QuickStartContext.Provider>
-  );
 };
diff --git a/packages/vscode/src/view/app/tsconfig.json b/packages/vscode/src/view/app/tsconfig.json
@@ -14,7 +14,9 @@
         "noUnusedLocals": true,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
-        "experimentalDecorators": true
+        "experimentalDecorators": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true
     },
     "exclude": [
         "node_modules"

diff --git a/packages/vscode/webpack.config.js b/packages/vscode/webpack.config.js
@@ -12,8 +12,15 @@ module.exports = {
   externals: {
     vscode: 'commonjs vscode',
   },
+  optimization: {
+    splitChunks: false,
+  },
   resolve: {
     extensions: ['.js', '.ts', '.tsx'],
+    alias: {
+      'react': path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+    },
   },
   module: {
     rules: [