fix: make active navigation links visible

refs #4131

Author: markusfalk

docs/src/pages/examples/basic/basic-setup/basic-setup.example.html

@@ -1,8 +1,8 @@
-<bna-editor (contentChanged)="readTextFromEditor($event)"/>
+<bna-editor (contentChanged)="readTextFromEditor($event)" />
 
 <h2>Result</h2>
 <div
-      class="border border-black bg-background rounded min-h-20 w-full p-2 max-h-[400px] overflow-auto"
-    >
-      <pre><code>{{ editorContent | json }}</code></pre>
-    </div>
+  class="border border-black bg-background rounded min-h-20 w-full p-2 max-h-[400px] overflow-auto"
+>
+  <pre><code>{{ editorContent | json }}</code></pre>
+</div>

docs/src/pages/examples/examples.page.ts

@@ -20,40 +20,50 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
   >
     <aside class="flex flex-col p-3">
       Basic
-      <a hlmBtn variant="ghost" routerLink="basic/minimal" class="justify-start"
+      <a
+        hlmBtn
+        variant="ghost"
+        routerLinkActive="active-link"
+        routerLink="basic/minimal"
+        class="justify-start"
         >Basic Setup</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="basic/manipulating-blocks"
         class="justify-start"
         >Manipulating Blocks</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="basic/removing-default-blocks"
         class="justify-start"
         >Removing Default Blocks</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="basic/selection-blocks"
         class="justify-start"
         >Displaying Selected Blocks</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="basic/blocks-json"
         class="justify-start"
         >Displaying Document JSON</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="basic/all-blocks"
         class="justify-start"
         >Default Schema Showcase</a
@@ -63,13 +73,15 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="backend/saving-and-loading"
         class="justify-start"
         >Saving & Loading</a
       >
       <a
         hlmBtn
         variant="ghost"
+        routerLinkActive="active-link"
         routerLink="backend/upload-files"
         class="justify-start"
         >Upload Files</a
@@ -80,13 +92,15 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         hlmBtn
         variant="ghost"
         class="justify-start"
+        routerLinkActive="active-link"
         routerLink="custom/alert-block"
         >Alert Block</a
       >
       <a
         hlmBtn
         variant="ghost"
         class="justify-start"
+        routerLinkActive="active-link"
         routerLink="custom/api-content-block"
         >Api Content Block</a
       >
@@ -95,6 +109,7 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         hlmBtn
         variant="ghost"
         class="justify-start"
+        routerLinkActive="active-link"
         routerLink="interoperability/convert-to-html"
         >Converting Blocks to HTML</a
       >
@@ -103,13 +118,15 @@ import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
         hlmBtn
         variant="ghost"
         class="justify-start"
+        routerLinkActive="active-link"
         routerLink="ui-components/formatting-toolbar-buttons"
         >Formatting Toolbar Buttons</a
       >
       <a
         hlmBtn
         variant="ghost"
         class="justify-start"
+        routerLinkActive="active-link"
         routerLink="ui-components/formatting-side-menu-buttons"
         >Formatting Side Menu Buttons</a
       >

styles/block-note-common.css

@@ -321,6 +321,8 @@ NESTED BLOCKS
     width: 100%;
 }
 
+/* TODO: is additional specificity here used to overwrite 3rd party styles? */
+.active-link,
 [data-file-block] .bn-file-default-preview:hover,
 .ProseMirror-selectednode .bn-file-default-preview {
     background-color: rgb(225, 225, 225);