Allow clicking on a card header to open it in the full page

.idea/inspectionProfiles/Project_Default.xml

@@ -9,7 +9,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="11">
+          <list size="12">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -21,6 +21,7 @@
             <item index="8" class="java.lang.String" itemvalue="x-node-file" />
             <item index="9" class="java.lang.String" itemvalue="x-canvas" />
             <item index="10" class="java.lang.String" itemvalue="x-display" />
+            <item index="11" class="java.lang.String" itemvalue="x-wikilink" />
           </list>
         </value>
       </option>

index.html

@@ -246,18 +246,7 @@
 			</style>
 			<span class="hashtag"><slot name="hashtag-tag">{#Hashtag}</slot></span></template>
 		<template id="template-wikilink">
-			<style>
-				.wikilink {
-					color: color-mix(in srgb, var(--color-accent) 50%, transparent);
-					text-decoration: underline 1px solid currentColor;
-				}
-
-				.wikilink[href] {
-					color: var(--color-accent);
-					cursor: pointer;
-				}
-			</style>
-			<a class="wikilink"></a></template>
+			<slot name="wikilink-anchor">{Wikilink}</slot></template>
 		<template id="template-math">
 			<slot name="math-katex">{Math}</slot></template>
 	</head>

src/elements/canvas/node/file.mjs

@@ -1,6 +1,9 @@
 import { NodeElement } from "./base.mjs";
 import { DisplayElement } from "../../display.mjs";
 import { fileDetails } from "../../../utils/file.mjs";
+import {findFirstAncestor} from "../../../utils/trasversal.mjs";
+import {VaultElement} from "../../vault.mjs";
+import {BrowseElement} from "../../browse.mjs";
 
 
 export class NodeFileElement extends NodeElement {
@@ -15,6 +18,9 @@ export class NodeFileElement extends NodeElement {
     get pathRelativeToVault() {
         return this.getAttribute("path")
     }
+    set pathRelativeToVault(value) {
+        return this.setAttribute("path", value)
+    }
 
     /**
      * Get the name of the file displayed by this node, with no extension.
@@ -38,7 +44,7 @@ export class NodeFileElement extends NodeElement {
     static LABEL_ELEMENT_SLOT = "node-file-label"
 
     /**
-     * Recreate {@link labelElement} with the current value of {@link fileName}.
+     * Recreate {@link labelElement} with the current value of {@link fileName} and {@link vault}.
      */
     recreateLabelElement() {
         if(this.labelElement) {
@@ -46,9 +52,11 @@ export class NodeFileElement extends NodeElement {
             this.labelElement = null
         }
 
-        this.labelSlotted = document.createElement("span")
+        this.labelSlotted = document.createElement("x-wikilink")
         this.labelSlotted.slot = this.constructor.LABEL_ELEMENT_SLOT
-        this.labelSlotted.innerText = this.fileName
+        this.labelSlotted.target = this.pathRelativeToVault
+        this.labelSlotted.text = this.fileName
+        this.labelSlotted.heading = true
         this.appendChild(this.labelSlotted)
     }
 

src/elements/markdown/wikilink.mjs

@@ -52,6 +52,9 @@ export class WikilinkElement extends CustomElement {
     get target() {
         return this.getAttribute("target")
     }
+    set target(value) {
+        this.setAttribute("target", value)
+    }
 
     /**
      * Get the text that should be displayed in this wikilink.
@@ -66,32 +69,50 @@ export class WikilinkElement extends CustomElement {
         }
         return text
     }
+    set text(value) {
+        // TODO: Dirty hack to hide "undefined"
+        // noinspection EqualityComparisonWithCoercionJS
+        if(value == "undefined") {
+            this.removeAttribute("text")
+        }
+        else {
+            this.setAttribute("text", value)
+        }
+    }
 
     /**
-     * The CSS selector of the anchor element.
-     * @type {string}
+     * Set the `heading` property of the wikilink, changing its style.
+     * @returns {boolean} Whether the element is a heading or not.
      */
-    static ANCHOR_SELECTOR = "a.wikilink"
+    get heading() {
+        return this.hasAttribute("heading")
+    }
+    set heading(value) {
+        if(value) {
+            this.setAttribute("heading", "")
+        }
+        else {
+            this.removeAttribute("heading")
+        }
+    }
 
     /**
      * The element displaying the wikilink.
-     * Can be recreated with {@link recreateTagElement}.
+     * Can be recreated with {@link recreateAnchorElement}.
      * @type {HTMLAnchorElement}
      */
     anchorElement
 
     /**
-     Update the value of the {@link canvasItemElement} by querying the current {@link instance} with {@link ANCHOR_SELECTOR}.
-     * @returns {void}
+     * The name of the slot where {@link anchorElement} should be placed in.
+     * @type {string}
      */
-    recalculateAnchorElement() {
-        this.anchorElement = this.instance.querySelector(this.constructor.ANCHOR_SELECTOR)
-    }
-
-    resetAnchorElementInnerText() {
-        this.anchorElement.innerText = this.text
-    }
+    static ANCHOR_ELEMENT_SLOT = "wikilink-anchor"
 
+    /**
+     * Reset the `href` property of an existing {@link anchorElement}.
+     * @returns {Promise<void>}
+     */
     async resetAnchorElementHref() {
         await this.vault.sleepUntilFileIndexIsAvailable()
 
@@ -113,11 +134,25 @@ export class WikilinkElement extends CustomElement {
         }
     }
 
+    /**
+     * Recreate {@link anchorElement} with the current {@link target}, {@link text} and {@link heading}.
+     * @returns {void}
+     */
+    recreateAnchorElement() {
+        this.anchorElement = document.createElement("a")
+        this.anchorElement.slot = this.constructor.ANCHOR_ELEMENT_SLOT
+        this.anchorElement.innerText = this.text
+        this.anchorElement.classList.add("wikilink")
+        if(this.heading) {
+            this.anchorElement.classList.add("wikilink-heading")
+        }
+        this.appendChild(this.anchorElement)
+        this.resetAnchorElementHref().then()
+    }
+
     onConnect() {
         super.onConnect()
         this.recalculateAncestors()
-        this.recalculateAnchorElement()
-        this.resetAnchorElementInnerText()
-        this.resetAnchorElementHref().then()
+        this.recreateAnchorElement()
     }
 }

style/base.css

@@ -81,3 +81,18 @@ svg line {
 
     text-align: center;
 }
+
+.wikilink {
+    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
+    text-decoration: underline 1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+.wikilink[href] {
+    color: var(--color-accent);
+    text-decoration: underline 1px solid var(--color-accent);
+    cursor: pointer;
+}
+
+.wikilink.wikilink-heading {
+    color: var(--color-foreground);
+}