[pull] master from microsoft:master

pxtblocks/fields/field_asset.ts

@@ -403,7 +403,7 @@ export abstract class FieldAssetEditor<U extends FieldAssetEditorOptions, V exte
         const bg = new svg.Rect()
             .at(X_PADDING, Y_PADDING)
             .size(BG_WIDTH, BG_WIDTH)
-            .setClass("blocklySpriteField")
+            .setClass("blocklyFieldRect blocklySpriteField")
             .stroke("#898989", 1)
             .corner(4);
 

pxtblocks/fields/field_musiceditor.ts

@@ -105,7 +105,7 @@ export class FieldMusicEditor extends FieldAssetEditor<FieldMusicEditorOptions,
         const bg = new svg.Rect()
             .at(X_PADDING, Y_PADDING)
             .size(BG_PADDING * 2 + this.previewWidth(), BG_HEIGHT)
-            .setClass("blocklySpriteField")
+            .setClass("blocklyFieldRect blocklySpriteField")
             .stroke("#898989", 1)
             .corner(4);
 

pxteditor/monaco-fields/field_musiceditor.ts

@@ -66,8 +66,16 @@ export class MonacoSongEditor extends MonacoReactFieldEditor<pxt.Song> {
             } else {
                 result = project.createNewSong(result.song, result.meta.displayName);
             }
-            this.isAsset = true;
-            return pxt.getTSReferenceForAsset(result, this.isPython);
+            let out = pxt.getTSReferenceForAsset(result, this.isPython);
+            if (!this.isAsset) {
+                if (this.isPython) {
+                    out = `music.create_song(${out})`;
+                }
+                else {
+                    out = `music.createSong(${out})`;
+                }
+            }
+            return out;
         }
 
         let hexString = pxt.assets.music.encodeSongToHex(result.song);
@@ -101,25 +109,26 @@ function createFakeAsset(song: pxt.assets.music.Song): pxt.Song {
     }
 }
 
+const regexes = [
+    // typescript
+    "music\\s*\\.\\s*createSong\\s*\\(\\s*hex`[a-fA-F0-9\\s\\n]*`\\s*\\)",
+    "assets\\s*\\.\\s*song\\s*`[a-zA-Z_\\s\\n]*`",
+
+    // python
+    'music\\s*\\.\\s*create_song\\s*\\(\\s*hex\\s*\\(\\s*"""[a-fA-F0-9\\s\\n]*"""\\s*\\)\\s*\\)',
+    'music\\s*\\.\\s*createSong\\s*\\(\\s*hex\\s*\\(\\s*"""[a-fA-F0-9\\s\\n]*"""\\s*\\)\\s*\\)',
+    'assets\\s*\\.\\s*song\\s*\\(\\s*"""[a-zA-Z_\\s\\n]*"""\\s*\\)'
+];
+
+const searchString = regexes.map(r => `(?:${r})`).join("|");
+
 export const songEditorDefinition: pxt.editor.MonacoFieldEditorDefinition = {
     id: fieldEditorId,
     foldMatches: true,
     glyphCssClass: "fas fa-music sprite-focus-hover",
     heightInPixels: 510,
     matcher: {
-        /**
-         * This is horrendous-looking regex matches both the asset reference syntax:
-         *     assets.song`name`
-         *     assets.song("""name""")
-         *
-         * and the hex-literal syntax:
-         *     music.createSong(hex`01234`
-         *     music.create_song(hex("""01234""")
-         *
-         * For the hex literal matches, it includes the call to music.createSong since
-         * hex buffers can also be used for other things
-         */
-        searchString: "(?:(?:assets\\s*\\.\\s*song)|(?:music\\s*\\.\\s*create(?:S|_s)ong\\s*\\(\\s*hex))\\s*(?:`|\\(\\s*\"\"\")(?:(?:[^(){}:\\[\\]\"';?/,+\\-=*&|^%!`~]|\\n)*)\\s*(?:`|\"\"\"\\s*\\))",
+        searchString: searchString,
         isRegex: true,
         matchCase: true,
         matchWholeWord: false

pxteditor/monaco-fields/field_sprite.ts

@@ -85,14 +85,27 @@ function createFakeAsset(bitmap: pxt.sprite.Bitmap): pxt.ProjectImage {
     }
 }
 
+const regexes = [
+    // typescript
+    "img\\s*`[\\.a-zA-Z0-9#\\n\\s]*`",
+    "bmp\\s*`[\\.a-zA-Z0-9#\\n\\s]*`",
+    "assets\\s*\\.\\s*image\\s*`[a-zA-Z_\\s\\n]*`",
+
+    // python
+    'img\\s*\\(\\s*"""[\\.a-zA-Z0-9#\\n\\s]*"""\\s*\\)',
+    'bmp\\s*\\(\\s*"""[\\.a-zA-Z0-9#\\n\\s]*"""\\s*\\)',
+    'assets\\s*\\.\\s*image\\s*\\(\\s*"""[a-zA-Z_\\s\\n]*"""\\s*\\)'
+];
+
+const searchString = regexes.map(r => `(?:${r})`).join("|");
+
 export const spriteEditorDefinition: pxt.editor.MonacoFieldEditorDefinition = {
     id: fieldEditorId,
     foldMatches: true,
     glyphCssClass: "sprite-editor-glyph sprite-focus-hover",
     heightInPixels: 510,
     matcher: {
-        // match both JS and python
-        searchString: "(?:img|bmp|assets\\s*\\.\\s*image)\\s*(?:`|\\(\\s*\"\"\")(?:(?:[^(){}:\\[\\]\"';?/,+\\-=*&|^%!`~]|\\n)*)\\s*(?:`|\"\"\"\\s*\\))",
+        searchString: searchString,
         isRegex: true,
         matchCase: true,
         matchWholeWord: false

pxtlib/docsrender.ts

@@ -30,6 +30,7 @@ namespace pxt.docs {
         lexer: (src: string, options?: any) => any[];
         setOptions: (options: any) => void;
         parseInline?: (src: string, options?: any) => string;
+        parse?: (src: string, options?: any) => string;
     }
 
     interface MarkedImageToken {
@@ -690,7 +691,7 @@ ${opts.repo.name.replace(/^pxt-/, '')}=github:${opts.repo.fullName}#${opts.repo.
             return macro || 'unknown macro'
         });
 
-        let html = markedInstance(markdown);
+        let html = markedInstance.parse(markdown);
         const coerceToString = (value: unknown, fallback: string = "") => {
             if (typeof value === "string") return value;
             if (value && typeof (value as any).toString === "function") {

teachertool/src/components/HeaderBar.tsx

@@ -52,7 +52,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
                         )}
                     </>
                 ) : (
-                    <span className="name">{appTheme.organization}</span>
+                    <span className={css["organization-name"]}>{appTheme.organization}</span>
                 )}
             </div>
         );
@@ -67,14 +67,20 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
                 onClick={onBrandIconClick}
             >
                 {appTheme.useTextLogo ? (
-                    [
-                        <span className={css["name"]} key="org-name">
+                    <>
+                        <span
+                            className={classList(css["brand-text"], "min-sm")}
+                            key="org-name"
+                        >
                             {appTheme.organizationText}
-                        </span>,
-                        <span className={css["name-short"]} key="org-name-short">
+                        </span>
+                        <span
+                            className={classList(css["brand-text-short"], "max-sm")}
+                            key="org-name-short"
+                        >
                             {appTheme.organizationShortText || appTheme.organizationText}
-                        </span>,
-                    ]
+                        </span>
+                    </>
                 ) : appTheme.logo || appTheme.portraitLogo ? (
                     <>
                         {appTheme.logo && (
@@ -93,7 +99,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
                         )}
                     </>
                 ) : (
-                    <span className={css["name"]}>{appTheme.boardName}</span>
+                    <span className={css["brand-text"]}>{appTheme.boardName}</span>
                 )}
             </div>
         );

teachertool/src/components/styling/HeaderBar.module.scss

@@ -28,6 +28,14 @@
         }
     }
 
+    .organization-name {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-left: 1rem;
+        color: var(--pxt-header-foreground);
+        white-space: nowrap;
+    }
+
     .brand {
         display: flex;
         align-items: center;
@@ -43,6 +51,19 @@
             height: 1.1rem;
             margin: 0 1rem;
         }
+
+        .brand-text,
+        .brand-text-short {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--pxt-header-foreground);
+            margin-left: 1rem;
+            white-space: nowrap;
+        }
+
+        .brand-text-short {
+            font-size: 1.125rem;
+        }
     }
 
     .centered-panel {