[pull] master from microsoft:master

cli/cli.ts

@@ -56,6 +56,7 @@ pxt.docs.requireDOMSanitizer = () => {
             code: mergeClassAttribute("code"),
             pre: mergeClassAttribute("pre"),
             div: mergeClassAttribute("div", "data-youtube", "title"),
+            img: mergeClassAttribute("img"),
         },
     };
 
@@ -3063,7 +3064,7 @@ function renderDocs(builtPackaged: string, localDir: string) {
 
                     html = pxt.docs.renderMarkdown({
                         template: docsTemplate,
-                        markdown: patchedMd,
+                        markdown: pxt.docs.normalizeStaticMarkdown(patchedMd),
                         theme: pxt.appTarget.appTheme,
                         filepath: path.join("docs", pathUnderDocs),
                     });
@@ -6278,6 +6279,23 @@ function readBlocksprjConfig(): pxt.PackageConfig {
     return config;
 }
 
+function mergeCorePackage(corePackage: pxt.PackageConfig, dependencies = {} as pxt.Map<string>): pxt.Map<string> {
+    for (const dep of Object.keys(dependencies)) {
+        const verSpec = dependencies[dep];
+
+        if (pxt.appTarget.bundledpkgs[dep] && (verSpec === "*" || verSpec.startsWith("file:"))) {
+            const bundled = pxt.appTarget.bundledpkgs[dep];
+            const config = pxt.U.jsonTryParse(bundled[pxt.CONFIG_NAME]);
+
+            if (config?.core) {
+                return dependencies;
+            }
+        }
+    }
+
+    return pxt.tutorial.mergeTutorialDependencies(corePackage.dependencies, dependencies);
+}
+
 function checkFileSize(files: string[]): number {
     if (!pxt.appTarget.cloud)
         return 0;
@@ -6536,7 +6554,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo
                                     continue;
                                 }
                                 const tutorial = pxt.tutorial.parseTutorial(tutorialMd);
-                                const pkgs = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, pxt.gallery.parsePackagesFromMarkdown(tutorialMd) || {});
+                                const pkgs = mergeCorePackage(blocksprjConfig, pxt.gallery.parsePackagesFromMarkdown(tutorialMd) || {});
 
                                 let extraFiles: Map<string> = null;
 
@@ -6595,7 +6613,7 @@ function internalCheckDocsAsync(compileSnippets?: boolean, re?: string, fix?: bo
                                     continue;
                                 }
                                 const prj = pxt.gallery.parseExampleMarkdown(card.name, exMd);
-                                const pkgs = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, prj.dependencies);
+                                const pkgs = mergeCorePackage(blocksprjConfig, prj.dependencies);
 
                                 let extraFiles: Map<string> = undefined;
 
@@ -6691,7 +6709,7 @@ function internalCacheUsedBlocksAsync(): Promise<Map<pxt.BuiltTutorialInfo>> {
         }
         const tutorial = pxt.tutorial.parseTutorial(md) as TutorialInfo;
         const tutorialDeps = pxt.gallery.parsePackagesFromMarkdown(md) || {};
-        const pkgs: pxt.Map<string> = pxt.tutorial.mergeTutorialDependencies(blocksprjConfig.dependencies, tutorialDeps);
+        const pkgs: pxt.Map<string> = mergeCorePackage(blocksprjConfig, tutorialDeps);
 
         tutorial.pkgs = pkgs;
         tutorial.path = path;
@@ -6849,7 +6867,7 @@ export function getCodeSnippets(fileName: string, md: string, baseConfig: pxt.Pa
             return acc;
         }, {} as pxt.Map<string>);
 
-    const pkgs = pxt.tutorial.mergeTutorialDependencies(baseConfig.dependencies, tutorialDeps);
+    const pkgs = mergeCorePackage(baseConfig, tutorialDeps);
 
     const pkgName = fileName.replace(/\\/g, '-').replace(/.md$/i, '');
     return codeSnippets.map((snip, i) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "13.1.4",
+  "version": "13.1.5",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

pxtlib/docsrender.ts

@@ -91,6 +91,39 @@ namespace pxt.docs {
         return s;
     }
 
+    export function normalizeStaticMarkdown(markdown: string): string {
+        const lines = markdown.split(/\r?\n/)
+        let codeFenceMarker = ""
+
+        for (let i = 0; i < lines.length; i++) {
+            const fenceMatch = /^ {0,3}(`{3,}|~{3,})(.*)$/.exec(lines[i])
+            if (fenceMatch) {
+                const marker = fenceMatch[1]
+                const trailingText = fenceMatch[2]
+                const closesCodeFence = !!codeFenceMarker
+                    && marker[0] === codeFenceMarker[0]
+                    && marker.length >= codeFenceMarker.length
+                    && !trailingText.trim()
+
+                if (closesCodeFence) {
+                    codeFenceMarker = ""
+                } else if (!codeFenceMarker) {
+                    codeFenceMarker = marker
+                }
+
+                continue
+            }
+
+            if (!codeFenceMarker && /^ {0,3}<br\s*\/?>\s*$/i.test(lines[i])) {
+                // Marked treats a standalone break as inline content, which can extend a
+                // preceding table or keep the following Markdown in the same paragraph.
+                lines[i] = "\n<p><br/></p>\n"
+            }
+        }
+
+        return lines.join("\n")
+    }
+
     // the input already should be HTML-quoted but we want to make sure, and also quote quotes
     export function html2Quote(s: string) {
         if (!s) return s;

pxtrunner/runner.ts

@@ -316,7 +316,10 @@ function loadPackageAsync(id: string, code?: string, dependencies?: string[]) {
                     epkg.files[pxt.MAIN_TS] = code;
                     //set the custom doc name from the URL.
                     let cfg = JSON.parse(epkg.files[pxt.CONFIG_NAME]) as pxt.PackageConfig;
-                    cfg.name = window.location.href.split('/').pop().split(/[?#]/)[0];;
+                    cfg.name = window.location.href.split('/').pop().split(/[?#]/)[0].replace(/\.html$/i, "");
+                    if (cfg.files.indexOf(pxt.MAIN_BLOCKS) == -1) {
+                        cfg.files.push(pxt.MAIN_BLOCKS);
+                    }
                     epkg.files[pxt.CONFIG_NAME] = pxt.Package.stringifyConfig(cfg);
 
                     //Propgate the change to main package

react-common/components/controls/Modal.tsx

@@ -23,13 +23,13 @@ export interface ModalAction {
 export interface ModalProps extends ContainerProps {
     title: string;
     leftIcon?: string;
-    helpUrl?: string
     ariaDescribedBy?: string;
     actions?: ModalAction[];
     onClose?: () => void;
     fullscreen?: boolean;
     parentElement?: Element;
     hideDismissButton?: boolean;
+    rightHeader?: React.ReactNode;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -43,12 +43,12 @@ export const Modal = (props: ModalProps) => {
         role,
         title,
         leftIcon,
-        helpUrl,
         actions,
         onClose,
         parentElement,
         fullscreen,
         hideDismissButton,
+        rightHeader
     } = props;
 
     const closeClickHandler = (e?: React.MouseEvent<HTMLButtonElement>) => {
@@ -110,18 +110,9 @@ export const Modal = (props: ModalProps) => {
                     {leftIcon && <i className={leftIcon} aria-hidden={true}/>}
                     {title}
                 </div>
-                {fullscreen && helpUrl &&
-                    <div className="common-modal-help">
-                        <Link
-                            className="common-button menu-button"
-                            title={lf("Help on {0} dialog", title)}
-                            href={props.helpUrl}
-                            target="_blank"
-                        >
-                            <span className="common-button-flex">
-                                <i className="fas fa-question" aria-hidden={true}/>
-                            </span>
-                        </Link>
+                {fullscreen && rightHeader &&
+                    <div className="common-modal-right-menu">
+                        {rightHeader}
                     </div>
                 }
                 {!fullscreen && !hideDismissButton &&

react-common/styles/controls/Modal.less

@@ -112,21 +112,28 @@
         align-items: center;
         font-size: 1.2rem;
         font-weight: 600;
-
-        .common-button.men .fas {
-
-        }
     }
 
     .common-modal-back:focus-within {
         border: 1px, solid var(--pxt-focus-border);
     }
 
+    .common-modal-right-menu {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
     .common-modal-help {
         display: flex;
         align-items: center;
         font-size: 1.2rem;
         font-weight: 600;
+        height: 100%;
+
+        a:hover {
+            color: var(--pxt-primary-foreground);
+        }
     }
 
     .common-modal-title {

webapp/src/extensionsBrowser.tsx

@@ -12,6 +12,7 @@ import { ExtensionCard } from "../../react-common/components/extensions/Extensio
 import { Modal } from "../../react-common/components/controls/Modal";
 import { classList } from "../../react-common/components/util";
 import { TabList, TabListProps } from "../../react-common/components/controls/TabList";
+import { Link } from "../../react-common/components/controls/Link";
 
 type ExtensionMeta = pxtc.service.ExtensionMeta & { installed?: boolean };
 const ExtensionType = pxtc.service.ExtensionType;
@@ -618,7 +619,30 @@ export const ExtensionsBrowser = (props: ExtensionsProps) => {
             fullscreen={true}
             className={"extensions-browser"}
             onClose={props.hideExtensions}
-            helpUrl={"/extensions"}
+            rightHeader={
+                <>
+                    <Button
+                        className="menu-button"
+                        title={lf("Import extension from file")}
+                        label={lf("Import File")}
+                        labelClassName="mobile-hidden"
+                        onClick={importExtension}
+                        leftIcon="fas fa-upload"
+                    />
+                    <div className="common-modal-help">
+                        <Link
+                            className="common-button menu-button"
+                            title={lf("Help on {0} dialog", lf("Extensions"))}
+                            href="/extensions"
+                            target="_blank"
+                        >
+                            <span className="common-button-flex">
+                                <i className="fas fa-question" aria-hidden={true}/>
+                            </span>
+                        </Link>
+                    </div>
+                </>
+            }
         >
             <div className="ui">
                 {showImportExtensionDialog &&