Merge remote-tracking branch 'origin/main' into sandcastle-banner-update

Author: jjspace

packages/sandcastle/src/Gallery/GalleryItemStore.ts

@@ -194,6 +194,21 @@ export function useGalleryItemStore() {
     return isGalleryLoaded ? () => loadFromUrl(items, legacyIds) : null;
   }, [items, legacyIds]);
 
+  const [isFirstSearch, setFirstSearch] = useState(true);
+  const setSearchTermWrapper = useCallback(
+    (newSearchTerm: string | null) => {
+      // the default label filter for Showcases can be confusing when it doesn't
+      // search everything after page load. Remove the filter on the first search only
+      // to ensure we search everything
+      if (isFirstSearch) {
+        setSearchFilter(null);
+        setFirstSearch(false);
+      }
+      setSearchTerm(newSearchTerm);
+    },
+    [setSearchTerm, isFirstSearch, setSearchFilter],
+  );
+
   return {
     items,
     galleryLoaded,
@@ -203,7 +218,7 @@ export function useGalleryItemStore() {
     searchFilter,
     searchTerm,
     isSearchPending,
-    setSearchTerm,
+    setSearchTerm: setSearchTermWrapper,
     setSearchFilter,
     searchResults: memoizedSearchResults,
 

packages/sandcastle/src/SandcastleEditor.tsx

@@ -83,10 +83,28 @@ function SandcastleEditor({
   const {
     settings: { fontFamily, fontSize, fontLigatures },
   } = useContext(SettingsContext);
+  const documentRef = useRef(document);
   useEffect(() => {
-    internalEditorRef.current?.updateOptions({
-      fontFamily: availableFonts[fontFamily]?.cssValue ?? "Droid Sans Mono",
-    });
+    const cssName = availableFonts[fontFamily]?.cssValue ?? "Droid Sans Mono";
+    const fontFace = [...documentRef.current.fonts.values()].find(
+      (font) => font.family === cssName && font.weight === "400",
+    );
+    if (fontFace?.status !== "loaded") {
+      // Monaco needs to check the size of the font for things like cursor position
+      // and variable highlighting. If it does this check before the font has loaded
+      // it will get the wrong size and may be horribly offset especially with ligatures
+      // https://github.com/microsoft/monaco-editor/issues/392
+      documentRef.current.fonts.load(`1rem ${cssName}`).then(() => {
+        internalEditorRef.current?.updateOptions({
+          fontFamily: cssName,
+        });
+        monaco.editor.remeasureFonts();
+      });
+    } else {
+      internalEditorRef.current?.updateOptions({
+        fontFamily: cssName,
+      });
+    }
   }, [fontFamily]);
   useEffect(() => {
     internalEditorRef.current?.updateOptions({