Fixed print rendering of nested code annotations

material/base.html

@@ -213,7 +213,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.cb647d62.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.82d444e5.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/browser/media/index.ts

@@ -63,10 +63,14 @@ export function watchMedia(query: string): Observable<boolean> {
  * @returns Print observable
  */
 export function watchPrint(): Observable<boolean> {
+  const media = matchMedia("print")
   return merge(
     fromEvent(window, "beforeprint").pipe(mapTo(true)),
     fromEvent(window, "afterprint").pipe(mapTo(false))
   )
+    .pipe(
+      startWith(media.matches)
+    )
 }
 
 /* ------------------------------------------------------------------------- */

src/assets/javascripts/components/content/code/_/index.ts

@@ -26,6 +26,7 @@ import {
   Observable,
   Subject,
   defer,
+  distinctUntilChanged,
   distinctUntilKeyChanged,
   finalize,
   map,
@@ -195,11 +196,11 @@ export function mountCodeBlock(
             mergeWith(watchElementSize(container)
               .pipe(
                 takeUntil(push$.pipe(takeLast(1))),
-                switchMap(({ width, height }) => width && height
-                  ? annotations$
-                  : EMPTY
-                )
-              ))
+                map(({ width, height }) => width && height),
+                distinctUntilChanged(),
+                switchMap(active => active ? annotations$ : EMPTY)
+              )
+            )
           )
       }
     }

src/assets/javascripts/components/content/code/annotation/list/index.ts

@@ -28,7 +28,6 @@ import {
   finalize,
   merge,
   share,
-  startWith,
   takeLast,
   takeUntil
 } from "rxjs"
@@ -100,6 +99,11 @@ function swap(source: HTMLElement, target: HTMLElement): void {
 /**
  * Mount code annotation list
  *
+ * This function analyzes the given container code block and checks for markers
+ * referring to elements in the given code annotation list. If no markers are
+ * found, the list is left untouched. Otherwise, list elements are rendered as
+ * code annotations inside the code block.
+ *
  * @param el - Code annotation list element
  * @param container - Containing code block element
  * @param options - Options
@@ -107,9 +111,8 @@ function swap(source: HTMLElement, target: HTMLElement): void {
  * @returns Code annotation list component observable
  */
 export function mountAnnotationList(
-  el: HTMLElement, container: HTMLElement, options: MountOptions
+  el: HTMLElement, container: HTMLElement, { print$ }: MountOptions
 ): Observable<Component<Annotation>> {
-  const { print$ } = options
 
   /* Find and replace all markers with empty annotations */
   const annotations = new Map<number, HTMLElement>()
@@ -130,7 +133,6 @@ export function mountAnnotationList(
     /* Handle print mode - see https://bit.ly/3rgPdpt */
     print$
       .pipe(
-        startWith(false),
         takeUntil(done$.pipe(takeLast(1)))
       )
         .subscribe(active => {