diff --git a/webapp/src/marked.tsx b/webapp/src/marked.tsx index 657c5cad6db..e4125dbf4b6 100644 --- a/webapp/src/marked.tsx +++ b/webapp/src/marked.tsx @@ -383,6 +383,8 @@ export class MarkedContent extends data.Component code`)) .map((inlineBlock: HTMLElement) => { const text = inlineBlock.innerText; @@ -400,11 +402,13 @@ export class MarkedContent extends data.Component { - // 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(advancedSelector); - advancedRow?.click(); - } - - const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`; - const toolboxRow = document.querySelector(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(advancedSelector); + advancedRow?.click(); + } + + const toolboxSelector = `${editorSelector} .blocklyTreeRow[data-ns="${ns}"]`; + const toolboxRow = document.querySelector(toolboxSelector); + toolboxRow?.click(); + }); + inlineBlock.addEventListener("keydown", e => fireClickOnEnter(e as any)) + } } }); }