check for the flyout flag to not include icon, clicking (#10228)

microsoft · Oct 11, 2024 · 4f68e8b · 4f68e8b
1 parent 7c79622
commit 4f68e8b
Showing 1 changed file with 30 additions and 24 deletions.
diff --git a/webapp/src/marked.tsx b/webapp/src/marked.tsx
@@ -383,6 +383,8 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
 
     // Renders inline blocks, such as "||controller: Controller||".
     private renderInlineBlocks(content: HTMLElement) {
+        const { parent } = this.props;
+        const hasCategories = !parent.state.tutorialOptions?.metadata?.flyoutOnly;
         const inlineBlocks = pxt.Util.toArray(content.querySelectorAll(`:not(pre) > code`))
             .map((inlineBlock: HTMLElement) => {
                 const text = inlineBlock.innerText;
@@ -400,11 +402,13 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
                         : `docs inlineblock ${displayNs}`;
 
                     const inlineBlockDiv = document.createElement('span');
-                    const inlineBlockIcon = document.createElement('i');
                     pxsim.U.clear(inlineBlock);
                     inlineBlock.appendChild(inlineBlockDiv);
                     inlineBlockDiv.className = lev;
-                    inlineBlockDiv.append(inlineBlockIcon);
+                    if (hasCategories) {
+                        const inlineBlockIcon = document.createElement('i');
+                        inlineBlockDiv.append(inlineBlockIcon);
+                    }
                     inlineBlockDiv.append(pxt.U.rlf(txt));
                     inlineBlockDiv.setAttribute("data-ns", behaviorNs);
                     if (displayNs !== behaviorNs) {
@@ -443,28 +447,30 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
                         continue;
                     }
 
-                    const isAdvanced = bi?.attributes?.advanced || ns === "arrays";
-                    inlineBlock.classList.add("clickable");
-                    inlineBlock.tabIndex = 0;
-                    inlineBlock.ariaLabel = lf("Toggle the {0} category", ns);
-                    inlineBlock.title = inlineBlock.ariaLabel;
-                    inlineBlock.children[0].append(bi?.attributes?.icon || pxt.toolbox.getNamespaceIcon(ns) || "");
-                    inlineBlock.addEventListener("click", e => {
-                        // need to filter out editors that are currently hidden as we leave toolboxes in dom
-                        const editorSelector = `#maineditor > div:not([style*="display:none"]):not([style*="display: none"])`;
-
-                        if (isAdvanced) {
-                            // toggle advanced open first if it is collapsed.
-                            const advancedSelector = `${editorSelector} .blocklyTreeRow[data-ns="advancedcollapsed"]`;
-                            const advancedRow = document.querySelector<HTMLDivElement>(advancedSelector);
-                            advancedRow?.click();
-                        }
-
-                        const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`;
-                        const toolboxRow = document.querySelector<HTMLDivElement>(toolboxSelector);
-                        toolboxRow?.click();
-                    });
-                    inlineBlock.addEventListener("keydown", e => fireClickOnEnter(e as any))
+                    if (hasCategories) {
+                            const isAdvanced = bi?.attributes?.advanced || ns === "arrays";
+                            inlineBlock.classList.add("clickable");
+                            inlineBlock.tabIndex = 0;
+                            inlineBlock.ariaLabel = lf("Toggle the {0} category", ns);
+                            inlineBlock.title = inlineBlock.ariaLabel;
+                            inlineBlock.children[0].append(bi?.attributes?.icon || pxt.toolbox.getNamespaceIcon(ns) || "");
+                            inlineBlock.addEventListener("click", e => {
+                                // need to filter out editors that are currently hidden as we leave toolboxes in dom
+                                const editorSelector = `#maineditor > div:not([style*="display:none"]):not([style*="display: none"])`;
+
+                                if (isAdvanced) {
+                                    // toggle advanced open first if it is collapsed.
+                                    const advancedSelector = `${editorSelector} .blocklyTreeRow[data-ns="advancedcollapsed"]`;
+                                    const advancedRow = document.querySelector<HTMLDivElement>(advancedSelector);
+                                    advancedRow?.click();
+                                }
+
+                                const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`;
+                                const toolboxRow = document.querySelector<HTMLDivElement>(toolboxSelector);
+                                toolboxRow?.click();
+                            });
+                            inlineBlock.addEventListener("keydown", e => fireClickOnEnter(e as any))
+                    }
                 }
             });
     }