From c48ddb08a97e7f6eb846a790c611c3d103faf75c Mon Sep 17 00:00:00 2001
From: Richard Knoll <riknoll@users.noreply.github.com>
Date: Wed, 8 May 2024 10:01:01 -0700
Subject: [PATCH] fix help link in monaco flyout (#10008)

---
 webapp/src/monacoFlyout.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index 474ec8451902..5f7d6a595b08 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -6,6 +6,7 @@ import * as workspace from "./workspace";
 import * as data from "./data";
 import * as auth from "./auth";
 import { HELP_IMAGE_URI } from "../../pxteditor";
+import * as pxtblockly from "../../pxtblocks";
 
 import ISettingsProps = pxt.editor.ISettingsProps;
 
@@ -353,7 +354,11 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
         const params = block.parameters;
         const blockColor = pxt.toolbox.getAccessibleBackground(block.attributes.color || color);
         const blockDescription = this.getBlockDescription(block, params ? params.slice() : null);
-        const helpUrl = block.attributes.help;
+        const helpUrl = pxt.blocks.getHelpUrl(block as pxtc.SymbolInfo);
+
+        const openHelp = () => {
+            pxtblockly.external.openHelpUrl(helpUrl);
+        };
 
         const qName = this.getQName(block) || this.getSnippetName(block);
         const selected = qName == this.state.selectedBlock;
@@ -385,9 +390,11 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
                 <div className="description">{description}</div>
                 <div className="signature">
                     <span>{snippet ? snippet : `${qName}(${params ? params.map(p => `${p.name}`).join(", ") : ""})`}</span>
-                    {helpUrl && <a className="blockHelp" href={`/reference/${helpUrl}`} target="_blank" rel="noopener noreferrer" role="button">
-                        <i className="question circle outline icon" aria-label={lf("Open documentation")}></i>
-                    </a>}
+                    {helpUrl &&
+                        <a className="blockHelp" role="button" onClick={openHelp}>
+                            <i className="question circle outline icon" aria-label={lf("Open documentation")}></i>
+                        </a>
+                    }
                 </div>
                 {params && <div className="params">
                     {params.map((p, i) => {