From 7ddd7c4011a9b0688fea3f339b89d28b2f010d56 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Sun, 7 Jul 2024 10:32:13 +0200
Subject: [PATCH] Style a line containng only "#" as if it were to become a tag
 instead of a header

---
 web/cm_plugins/hide_mark.ts | 11 +++++++++++
 web/styles/editor.scss      | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/web/cm_plugins/hide_mark.ts b/web/cm_plugins/hide_mark.ts
index c9f70ffb..20f27bf2 100644
--- a/web/cm_plugins/hide_mark.ts
+++ b/web/cm_plugins/hide_mark.ts
@@ -92,6 +92,17 @@ export function hideHeaderMarkPlugin() {
         }
         // Get the active line
         const line = state.sliceDoc(from, to);
+        if (line === "#") {
+          // Empty header, potentially a tag, style it as such
+          widgets.push(
+            Decoration.mark({
+              tagName: "span",
+              class: "sb-hashtag",
+            }).range(from, from + 1),
+          );
+
+          return;
+        }
         if (isCursorInRange(state, [from, to])) {
           widgets.push(
             Decoration.line({ class: "sb-header-inside" }).range(from),
diff --git a/web/styles/editor.scss b/web/styles/editor.scss
index ba90b503..5fdacf6b 100644
--- a/web/styles/editor.scss
+++ b/web/styles/editor.scss
@@ -50,6 +50,17 @@
     font-size: 1em;
   }
 
+  // If a header only contains a tag, it's likely a line containging "#" which may turn into a hashtag, so style it as such instead of a header
+  .sb-line-h1:has(> span.sb-hashtag:only-child) {
+    font-size: 1em;
+    padding: 0;
+    font-weight: normal;
+
+    .sb-meta {
+      color: var(--editor-hashtag-color);
+    }
+  }
+
   .sb-inline-img {
     max-width: 100%;
   }