From 4cc1d07aab281e02448c347d5141f982001c700b 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 | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/webapp/src/monacoFlyout.tsx b/webapp/src/monacoFlyout.tsx
index bdf68e448550..308f97cf4072 100644
--- a/webapp/src/monacoFlyout.tsx
+++ b/webapp/src/monacoFlyout.tsx
@@ -350,7 +350,16 @@ export class MonacoFlyout extends data.Component<MonacoFlyoutProps, MonacoFlyout
         const params = block.parameters;
         const blockColor = 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 = () => {
+            if (pxt.blocks.openHelpUrl) {
+                pxt.blocks.openHelpUrl(helpUrl);
+            }
+            else {
+                window.open(helpUrl);
+            }
+        };
 
         const qName = this.getQName(block) || this.getSnippetName(block);
         const selected = qName == this.state.selectedBlock;
@@ -382,9 +391,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) => {