@docusaurus/theme-common 2.0.0-beta.17 → 2.0.0-beta.18

package/src/hooks/useHideableNavbar.ts

@@ -9,14 +9,16 @@ import {useState, useCallback, useRef} from 'react';
 import {useLocationChange} from '../utils/useLocationChange';
 import {useScrollPosition} from '../utils/scrollUtils';
 
-type UseHideableNavbarReturns = {
+/**
+ * Wires the imperative logic of a hideable navbar.
+ * @param hideOnScroll If `false`, this hook is basically a no-op.
+ */
+export function useHideableNavbar(hideOnScroll: boolean): {
+  /** A ref to the navbar component. Plug this into the actual element. */
   readonly navbarRef: (node: HTMLElement | null) => void;
+  /** If `false`, the navbar component should not be rendered. */
   readonly isNavbarVisible: boolean;
-};
-
-export default function useHideableNavbar(
-  hideOnScroll: boolean,
-): UseHideableNavbarReturns {
+} {
   const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
   const isFocusedAnchor = useRef(false);
   const navbarHeight = useRef(0);
@@ -33,7 +35,8 @@ export default function useHideableNavbar(
 
     const scrollTop = currentPosition.scrollY;
 
-    // It needed for mostly to handle rubber band scrolling
+    // Needed mostly for handling rubber band scrolling.
+    // See https://github.com/facebook/docusaurus/pull/5721
     if (scrollTop < navbarHeight.current) {
       setIsNavbarVisible(true);
       return;
@@ -70,8 +73,5 @@ export default function useHideableNavbar(
     setIsNavbarVisible(true);
   });
 
-  return {
-    navbarRef,
-    isNavbarVisible,
-  };
+  return {navbarRef, isNavbarVisible};
 }

package/src/hooks/useKeyboardNavigation.ts

@@ -11,9 +11,17 @@ import './styles.css';
 
 export const keyboardFocusedClassName = 'navigation-with-keyboard';
 
-// This hook detect keyboard focus indicator to not show outline for mouse users
-// Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
-export default function useKeyboardNavigation(): void {
+/**
+ * Side-effect that adds the `keyboardFocusedClassName` to the body element when
+ * the keyboard has been pressed, or removes it when the mouse is clicked.
+ *
+ * The presence of this class name signals that the user may be using keyboard
+ * for navigation, and the theme **must** add focus outline when this class name
+ * is present. (And optionally not if it's absent, for design purposes)
+ *
+ * Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
+ */
+export function useKeyboardNavigation(): void {
   useEffect(() => {
     function handleOutlineStyles(e: MouseEvent | KeyboardEvent) {
       if (e.type === 'keydown' && (e as KeyboardEvent).key === 'Tab') {

package/src/hooks/useLockBodyScroll.ts

@@ -7,10 +7,13 @@
 
 import {useEffect} from 'react';
 
-export default function useLockBodyScroll(lock: boolean = true): void {
+/**
+ * Side-effect that locks the document body's scroll throughout the lifetime of
+ * the containing component. e.g. when the mobile sidebar is expanded.
+ */
+export function useLockBodyScroll(lock: boolean = true): void {
   useEffect(() => {
     document.body.style.overflow = lock ? 'hidden' : 'visible';
-
     return () => {
       document.body.style.overflow = 'visible';
     };

package/src/hooks/usePrismTheme.ts

@@ -6,15 +6,19 @@
  */
 
 import defaultTheme from 'prism-react-renderer/themes/palenight';
-import {useColorMode} from '../utils/colorModeUtils';
+import {useColorMode} from '../contexts/colorMode';
 import {useThemeConfig} from '../utils/useThemeConfig';
 
-export default function usePrismTheme(): typeof defaultTheme {
+/**
+ * Returns a color-mode-dependent Prism theme: whatever the user specified in
+ * the config. Falls back to `palenight`.
+ */
+export function usePrismTheme(): typeof defaultTheme {
   const {prism} = useThemeConfig();
-  const {isDarkTheme} = useColorMode();
+  const {colorMode} = useColorMode();
   const lightModeTheme = prism.theme || defaultTheme;
   const darkModeTheme = prism.darkTheme || lightModeTheme;
-  const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
+  const prismTheme = colorMode === 'dark' ? darkModeTheme : lightModeTheme;
 
   return prismTheme;
 }

package/src/hooks/useSearchPage.ts

@@ -11,13 +11,24 @@ import {useCallback, useEffect, useState} from 'react';
 
 const SEARCH_PARAM_QUERY = 'q';
 
-interface UseSearchPageReturn {
+/** Some utility functions around search queries. */
+export function useSearchPage(): {
+  /**
+   * Works hand-in-hand with `setSearchQuery`; whatever the user has inputted
+   * into the search box.
+   */
   searchQuery: string;
+  /**
+   * Set a new search query. In addition to updating `searchQuery`, this handle
+   * also mutates the location and appends the query.
+   */
   setSearchQuery: (newSearchQuery: string) => void;
+  /**
+   * Given a query, this handle generates the corresponding search page link,
+   * with base URL prepended.
+   */
   generateSearchPageLink: (targetSearchQuery: string) => string;
-}
-
-export default function useSearchPage(): UseSearchPageReturn {
+} {
   const history = useHistory();
   const {
     siteConfig: {baseUrl},
@@ -54,7 +65,9 @@ export default function useSearchPage(): UseSearchPageReturn {
   const generateSearchPageLink = useCallback(
     (targetSearchQuery: string) =>
       // Refer to https://github.com/facebook/docusaurus/pull/2838
-      `${baseUrl}search?q=${encodeURIComponent(targetSearchQuery)}`,
+      `${baseUrl}search?${SEARCH_PARAM_QUERY}=${encodeURIComponent(
+        targetSearchQuery,
+      )}`,
     [baseUrl],
   );
 

package/src/{utils → hooks}/useTOCHighlight.ts

@@ -6,15 +6,15 @@
  */
 
 import {useEffect, useRef} from 'react';
-import {useThemeConfig} from './useThemeConfig';
+import {useThemeConfig} from '../utils/useThemeConfig';
 
-/*
-TODO make the hardcoded theme-classic classnames configurable
-(or add them to ThemeClassNames?)
- */
+// TODO make the hardcoded theme-classic classnames configurable (or add them
+// to ThemeClassNames?)
 
-// If the anchor has no height and is just a "marker" in the dom; we'll use the
-// parent (normally the link text) rect boundaries instead
+/**
+ * If the anchor has no height and is just a "marker" in the DOM; we'll use the
+ * parent (normally the link text) rect boundaries instead
+ */
 function getVisibleBoundingClientRect(element: HTMLElement): DOMRect {
   const rect = element.getBoundingClientRect();
   const hasNoHeight = rect.top === rect.bottom;
@@ -26,7 +26,7 @@ function getVisibleBoundingClientRect(element: HTMLElement): DOMRect {
 
 /**
  * Considering we divide viewport into 2 zones of each 50vh, this returns true
- * if an element is in the first zone (ie, appear in viewport, near the top)
+ * if an element is in the first zone (i.e., appear in viewport, near the top)
  */
 function isInViewportTopHalf(boundingRect: DOMRect) {
   return boundingRect.top > 0 && boundingRect.bottom < window.innerHeight / 2;
@@ -83,7 +83,7 @@ function getActiveAnchor(
   }
   // no anchor under viewport top? (ie we are at the bottom of the page)
   // => highlight the last anchor found
-  return anchors[anchors.length - 1];
+  return anchors[anchors.length - 1] ?? null;
 }
 
 function getLinkAnchorValue(link: HTMLAnchorElement): string {
@@ -116,15 +116,24 @@ function useAnchorTopOffsetRef() {
 }
 
 export type TOCHighlightConfig = {
+  /** A class name that all TOC links share. */
   linkClassName: string;
+  /** The class name applied to the active (highlighted) link. */
   linkActiveClassName: string;
+  /**
+   * The minimum heading level that the TOC includes. Only headings that are in
+   * this range will be eligible as "active heading".
+   */
   minHeadingLevel: number;
+  /** @see {@link TOCHighlightConfig.minHeadingLevel} */
   maxHeadingLevel: number;
 };
 
-export default function useTOCHighlight(
-  config: TOCHighlightConfig | undefined,
-): void {
+/**
+ * Side-effect that applies the active class name to the TOC heading that the
+ * user is currently viewing. Disabled when `config` is undefined.
+ */
+export function useTOCHighlight(config: TOCHighlightConfig | undefined): void {
   const lastActiveLinkRef = useRef<HTMLAnchorElement | undefined>(undefined);
 
   const anchorTopOffsetRef = useAnchorTopOffsetRef();

package/src/hooks/useWindowSize.ts

@@ -12,12 +12,6 @@ import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 const windowSizes = {
   desktop: 'desktop',
   mobile: 'mobile',
-
-  // This "ssr" value is very important to handle hydration FOUC / layout shifts
-  // You have to handle server-rendering explicitly on the call-site
-  // On the server, you may need to render BOTH the mobile/desktop elements (and
-  // hide one of them with mediaquery)
-  // We don't return "undefined" on purpose, to make it more explicit
   ssr: 'ssr',
 } as const;
 
@@ -34,14 +28,22 @@ function getWindowSize() {
     : windowSizes.mobile;
 }
 
-// Simulate the SSR window size in dev, so that potential hydration FOUC/layout
-// shift problems can be seen in dev too!
 const DevSimulateSSR = process.env.NODE_ENV === 'development' && true;
 
-// This hook returns an enum value on purpose!
-// We don't want it to return the actual width value, for resize perf reasons
-// We only want to re-render once a breakpoint is crossed
-export default function useWindowSize(): WindowSize {
+/**
+ * Gets the current window size as an enum value. We don't want it to return the
+ * actual width value, so that it only re-renders once a breakpoint is crossed.
+ *
+ * It may return `"ssr"`, which is very important to handle hydration FOUC or
+ * layout shifts. You have to handle it explicitly upfront. On the server, you
+ * may need to render BOTH the mobile/desktop elements (and hide one of them
+ * with mediaquery). We don't return `undefined` on purpose, to make it more
+ * explicit.
+ *
+ * In development mode, this hook will still return `"ssr"` for one second, to
+ * catch potential layout shifts, similar to strict mode calling effects twice.
+ */
+export function useWindowSize(): WindowSize {
   const [windowSize, setWindowSize] = useState<WindowSize>(() => {
     if (DevSimulateSSR) {
       return 'ssr';

package/src/index.ts

@@ -5,46 +5,46 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export {useThemeConfig} from './utils/useThemeConfig';
+export {
+  useThemeConfig,
+  type ThemeConfig,
+  type UserThemeConfig,
+  type Navbar,
+  type NavbarItem,
+  type NavbarLogo,
+  type MultiColumnFooter,
+  type SimpleFooter,
+  type Footer,
+  type FooterLogo,
+  type FooterLinkItem,
+  type ColorModeConfig,
+} from './utils/useThemeConfig';
 export {
   DocSidebarItemsExpandedStateProvider,
   useDocSidebarItemsExpandedState,
-} from './utils/docSidebarItemsExpandedState';
-
-export type {
-  ThemeConfig,
-  UserThemeConfig,
-  Navbar,
-  NavbarItem,
-  NavbarLogo,
-  MultiColumnFooter,
-  SimpleFooter,
-  Footer,
-  FooterLinkItem,
-  ColorModeConfig,
-} from './utils/useThemeConfig';
+} from './contexts/docSidebarItemsExpandedState';
+export {DocsVersionProvider, useDocsVersion} from './contexts/docsVersion';
+export {DocsSidebarProvider, useDocsSidebar} from './contexts/docsSidebar';
 
 export {createStorageSlot, listStorageKeys} from './utils/storageUtils';
 
 export {useAlternatePageUtils} from './utils/useAlternatePageUtils';
 
-export {useContextualSearchFilters} from './utils/useContextualSearchFilters';
-
 export {
   parseCodeBlockTitle,
   parseLanguage,
   parseLines,
 } from './utils/codeBlockUtils';
 
-export {docVersionSearchTag, DEFAULT_SEARCH_TAG} from './utils/searchUtils';
+export {
+  docVersionSearchTag,
+  DEFAULT_SEARCH_TAG,
+  useContextualSearchFilters,
+} from './utils/searchUtils';
 
 export {
   isDocsPluginEnabled,
-  DocsVersionProvider,
-  useDocsVersion,
   useDocById,
-  DocsSidebarProvider,
-  useDocsSidebar,
   findSidebarCategory,
   findFirstCategoryLink,
   useCurrentSidebarCategory,
@@ -52,57 +52,46 @@ export {
   useSidebarBreadcrumbs,
 } from './utils/docsUtils';
 
-export {isSamePath} from './utils/pathUtils';
-
 export {useTitleFormatter} from './utils/generalUtils';
 
 export {usePluralForm} from './utils/usePluralForm';
 
 export {useLocationChange} from './utils/useLocationChange';
 
-export {usePrevious} from './utils/usePrevious';
-
 export {useCollapsible, Collapsible} from './components/Collapsible';
-export type {
-  UseCollapsibleConfig,
-  UseCollapsibleReturns,
-} from './components/Collapsible';
 
-export {default as Details} from './components/Details';
-export type {DetailsProps} from './components/Details';
-
-export {
-  MobileSecondaryMenuProvider,
-  MobileSecondaryMenuFiller,
-  useMobileSecondaryMenuRenderer,
-} from './utils/mobileSecondaryMenu';
-export type {MobileSecondaryMenuComponent} from './utils/mobileSecondaryMenu';
+export {Details, type DetailsProps} from './components/Details';
 
 export {
   useDocsPreferredVersion,
   useDocsPreferredVersionByPluginId,
-} from './utils/docsPreferredVersion/useDocsPreferredVersion';
+  DocsPreferredVersionContextProvider,
+} from './contexts/docsPreferredVersion';
 
 export {duplicates, uniq} from './utils/jsUtils';
 
-export {DocsPreferredVersionContextProvider} from './utils/docsPreferredVersion/DocsPreferredVersionProvider';
-
 export {ThemeClassNames} from './utils/ThemeClassNames';
 
 export {
   AnnouncementBarProvider,
   useAnnouncementBar,
-} from './utils/announcementBarUtils';
+} from './contexts/announcementBar';
 
 export {useLocalPathname} from './utils/useLocalPathname';
 
-export {translateTagsPageTitle, listTagsByLetters} from './utils/tagsUtils';
-export type {TagLetterEntry} from './utils/tagsUtils';
+export {
+  translateTagsPageTitle,
+  listTagsByLetters,
+  type TagLetterEntry,
+  type TagsListItem,
+} from './utils/tagsUtils';
 
 export {useHistoryPopHandler} from './utils/historyUtils';
 
-export {default as useTOCHighlight} from './utils/useTOCHighlight';
-export type {TOCHighlightConfig} from './utils/useTOCHighlight';
+export {
+  useTOCHighlight,
+  type TOCHighlightConfig,
+} from './hooks/useTOCHighlight';
 
 export {
   useFilteredAndTreeifiedTOC,
@@ -110,6 +99,8 @@ export {
   type TOCTreeNode,
 } from './utils/tocUtils';
 
+export {isMultiColumnFooterLinks} from './utils/footerUtils';
+
 export {
   ScrollControllerProvider,
   useScrollController,
@@ -120,25 +111,46 @@ export {
 export {
   useIsomorphicLayoutEffect,
   useDynamicCallback,
+  usePrevious,
   ReactContextError,
 } from './utils/reactUtils';
 
 export {isRegexpStringMatch} from './utils/regexpUtils';
 
-export {useHomePageRoute} from './utils/routesUtils';
+export {useHomePageRoute, isSamePath} from './utils/routesUtils';
+
+export {
+  PageMetadata,
+  HtmlClassNameProvider,
+  PluginHtmlClassNameProvider,
+} from './utils/metadataUtils';
+
+export {
+  useColorMode,
+  ColorModeProvider,
+  type ColorMode,
+} from './contexts/colorMode';
+
+export {splitNavbarItems, NavbarProvider} from './utils/navbarUtils';
 
-export {useColorMode, ColorModeProvider} from './utils/colorModeUtils';
 export {
   useTabGroupChoice,
   TabGroupChoiceProvider,
-} from './utils/tabGroupChoiceUtils';
+} from './contexts/tabGroupChoice';
+
+export {useNavbarMobileSidebar} from './contexts/navbarMobileSidebar';
+export {
+  useNavbarSecondaryMenu,
+  NavbarSecondaryMenuFiller,
+  type NavbarSecondaryMenuComponent,
+} from './contexts/navbarSecondaryMenu';
 
-export {default as useHideableNavbar} from './hooks/useHideableNavbar';
+export {useHideableNavbar} from './hooks/useHideableNavbar';
 export {
-  default as useKeyboardNavigation,
+  useKeyboardNavigation,
   keyboardFocusedClassName,
 } from './hooks/useKeyboardNavigation';
-export {default as usePrismTheme} from './hooks/usePrismTheme';
-export {default as useLockBodyScroll} from './hooks/useLockBodyScroll';
-export {default as useWindowSize} from './hooks/useWindowSize';
-export {default as useSearchPage} from './hooks/useSearchPage';
+export {usePrismTheme} from './hooks/usePrismTheme';
+export {useLockBodyScroll} from './hooks/useLockBodyScroll';
+export {useWindowSize} from './hooks/useWindowSize';
+export {useSearchPage} from './hooks/useSearchPage';

package/src/utils/ThemeClassNames.ts

@@ -5,10 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// These class names are used to style page layouts in Docusaurus
-// Those are meant to be targeted by user-provided custom CSS selectors
 // Please do not modify the classnames! This is a breaking change, and annoying
 // for users!
+
+/**
+ * These class names are used to style page layouts in Docusaurus, meant to be
+ * targeted by user-provided custom CSS selectors.
+ */
 export const ThemeClassNames = {
   page: {
     blogListPage: 'blog-list-page',
@@ -17,8 +20,8 @@ export const ThemeClassNames = {
     blogTagPostListPage: 'blog-tags-post-list-page',
 
     docsDocPage: 'docs-doc-page',
-    docsTagsListPage: 'docs-tags-list-page', // List of tags
-    docsTagDocListPage: 'docs-tags-doc-list-page', // Docs for a tag
+    docsTagsListPage: 'docs-tags-list-page',
+    docsTagDocListPage: 'docs-tags-doc-list-page',
 
     mdxPage: 'mdx-page',
   },
@@ -29,8 +32,9 @@ export const ThemeClassNames = {
     mdxPages: 'mdx-wrapper',
   },
 
-  // /!\ Please keep the naming convention consistent!
-  // Something like: "theme-{blog,doc,version,page}?-<suffix>"
+  /**
+   * Follows the naming convention "theme-{blog,doc,version,page}?-<suffix>"
+   */
   common: {
     editThisPage: 'theme-edit-this-page',
     lastUpdated: 'theme-last-updated',

package/src/utils/codeBlockUtils.ts

@@ -8,49 +8,26 @@
 import rangeParser from 'parse-numeric-range';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
-const highlightLinesRangeRegex = /{(?<range>[\d,-]+)}/;
-
-const commentTypes = ['js', 'jsBlock', 'jsx', 'python', 'html'] as const;
-type CommentType = typeof commentTypes[number];
-
-type CommentPattern = {
-  start: string;
-  end: string;
-};
+const highlightLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
 
 // Supported types of highlight comments
-const commentPatterns: Record<CommentType, CommentPattern> = {
-  js: {
-    start: '\\/\\/',
-    end: '',
-  },
-  jsBlock: {
-    start: '\\/\\*',
-    end: '\\*\\/',
-  },
-  jsx: {
-    start: '\\{\\s*\\/\\*',
-    end: '\\*\\/\\s*\\}',
-  },
-  python: {
-    start: '#',
-    end: '',
-  },
-  html: {
-    start: '<!--',
-    end: '-->',
-  },
+const commentPatterns = {
+  js: {start: '\\/\\/', end: ''},
+  jsBlock: {start: '\\/\\*', end: '\\*\\/'},
+  jsx: {start: '\\{\\s*\\/\\*', end: '\\*\\/\\s*\\}'},
+  python: {start: '#', end: ''},
+  html: {start: '<!--', end: '-->'},
 };
 
+type CommentType = keyof typeof commentPatterns;
+
 const magicCommentDirectives = [
   'highlight-next-line',
   'highlight-start',
   'highlight-end',
 ];
 
-const getMagicCommentDirectiveRegex = (
-  languages: readonly CommentType[] = commentTypes,
-) => {
+function getCommentPattern(languages: CommentType[]) {
   // to be more reliable, the opening and closing comment must match
   const commentPattern = languages
     .map((lang) => {
@@ -60,38 +37,45 @@ const getMagicCommentDirectiveRegex = (
     .join('|');
   // white space is allowed, but otherwise it should be on it's own line
   return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
-};
+}
 
-// select comment styles based on language
-const magicCommentDirectiveRegex = (lang: string) => {
+/**
+ * Select comment styles based on language
+ */
+function getAllMagicCommentDirectiveStyles(lang: string) {
   switch (lang) {
     case 'js':
     case 'javascript':
     case 'ts':
     case 'typescript':
-      return getMagicCommentDirectiveRegex(['js', 'jsBlock']);
+      return getCommentPattern(['js', 'jsBlock']);
 
     case 'jsx':
     case 'tsx':
-      return getMagicCommentDirectiveRegex(['js', 'jsBlock', 'jsx']);
+      return getCommentPattern(['js', 'jsBlock', 'jsx']);
 
     case 'html':
-      return getMagicCommentDirectiveRegex(['js', 'jsBlock', 'html']);
+      return getCommentPattern(['js', 'jsBlock', 'html']);
 
     case 'python':
     case 'py':
-      return getMagicCommentDirectiveRegex(['python']);
+      return getCommentPattern(['python']);
 
     default:
       // all comment types
-      return getMagicCommentDirectiveRegex();
+      return getCommentPattern(Object.keys(commentPatterns) as CommentType[]);
   }
-};
+}
 
 export function parseCodeBlockTitle(metastring?: string): string {
   return metastring?.match(codeBlockTitleRegex)?.groups!.title ?? '';
 }
 
+/**
+ * Gets the language name from the class name (set by MDX).
+ * e.g. `"language-javascript"` => `"javascript"`.
+ * Returns undefined if there is no language class name.
+ */
 export function parseLanguage(className: string): string | undefined {
   const languageClassName = className
     .split(' ')
@@ -100,22 +84,40 @@ export function parseLanguage(className: string): string | undefined {
 }
 
 /**
- * @param metastring The highlight range declared here starts at 1
- * @returns Note: all line numbers start at 0, not 1
+ * Parses the code content, strips away any magic comments, and returns the
+ * clean content and the highlighted lines marked by the comments or metastring.
+ *
+ * If the metastring contains highlight range, the `content` will be returned
+ * as-is without any parsing.
+ *
+ * @param content The raw code with magic comments. Trailing newline will be
+ * trimmed upfront.
+ * @param metastring The full metastring, as received from MDX. Highlight range
+ * declared here starts at 1.
+ * @param language Language of the code block, used to determine which kinds of
+ * magic comment styles to enable.
  */
 export function parseLines(
   content: string,
   metastring?: string,
   language?: string,
 ): {
+  /**
+   * The highlighted lines, 0-indexed. e.g. `[0, 1, 4]` means the 1st, 2nd, and
+   * 5th lines are highlighted.
+   */
   highlightLines: number[];
+  /**
+   * The clean code without any magic comments (only if highlight range isn't
+   * present in the metastring).
+   */
   code: string;
 } {
   let code = content.replace(/\n$/, '');
   // Highlighted lines specified in props: don't parse the content
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)!
-      .groups!.range;
+      .groups!.range!;
     const highlightLines = rangeParser(highlightLinesRange)
       .filter((n) => n > 0)
       .map((n) => n - 1);
@@ -124,14 +126,14 @@ export function parseLines(
   if (language === undefined) {
     return {highlightLines: [], code};
   }
-  const directiveRegex = magicCommentDirectiveRegex(language);
+  const directiveRegex = getAllMagicCommentDirectiveStyles(language);
   // go through line by line
   const lines = code.split('\n');
   let highlightBlockStart: number;
   let highlightRange = '';
   // loop through lines
   for (let lineNumber = 0; lineNumber < lines.length; ) {
-    const line = lines[lineNumber];
+    const line = lines[lineNumber]!;
     const match = line.match(directiveRegex);
     if (match !== null) {
       const directive = match.slice(1).find((item) => item !== undefined);