Add header styling in source editor (closes #1)

Author: ruivieira

README.md

@@ -12,4 +12,5 @@ This plugin doesn't support configuration at the moment.
 
 - Preview of `org-mode` tasks (`TODO`, `DONE`, `COMPLETED`, etc.) with proper styling
 - Remove LogSeq timestamps from preview
-- Render `org-mode` blocks (eg `#+BEGIN_NOTE`/`#+END_NOTE`) as `<blockquote>`
+- Render `org-mode` blocks (eg `#+BEGIN_NOTE`/`#+END_NOTE`) as `<blockquote>`
+- Style headings in source editor

main.js

@@ -14,7 +14,15 @@ enum TaskType {
   UNKNOWN,
 }
 
-const VERSION = "0.0.2";
+const HEADING_REGEX = {
+  h1: /(?:\s+)?- # (?:.*)$/gms,
+  h2: /(?:\s+)?- ## (?:.*)$/gms,
+  h3: /(?:\s+)?- ### (?:.*)$/gms,
+  h4: /(?:\s+)?- #### (?:.*)$/gms,
+  h5: /(?:\s+)?- ##### (?:.*)$/gms,
+};
+
+const VERSION = "0.0.3";
 
 function parseTaskType(content: string): TaskType | null {
   if (content.startsWith("DONE ")) {
@@ -40,6 +48,10 @@ function removeTimestamps(content: string): string {
     .replace(/doing:: (?:\d{13})/gms, "")
     .replace(/later:: (?:\d{13})/gms, "")
     .replace(/canceled:: (?:\d{13})/gms, "")
+    .replace(
+      /id:: (?:[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})/gims,
+      ""
+    )
     .replace(/collapsed:: (?:true|false)/gms, "")
     .replace("<br>", "");
 }
@@ -50,6 +62,26 @@ function isBlock(content: string): boolean {
   return blockTest.test(content);
 }
 
+function cmHeadingOverlay(cm: CodeMirror.Editor) {
+  cm.addOverlay({
+    token: (stream: any) => {
+      if (stream.match(HEADING_REGEX["h1"])) {
+        return "header-1";
+      } else if (stream.match(HEADING_REGEX["h2"])) {
+        return "header-2";
+      } else if (stream.match(HEADING_REGEX["h3"])) {
+        return "header-3";
+      } else if (stream.match(HEADING_REGEX["h4"])) {
+        return "header-4";
+      } else if (stream.match(HEADING_REGEX["h5"])) {
+        return "header-5";
+      } else {
+        stream.next();
+      }
+    },
+  });
+}
+
 export default class LogSeqPlugin extends Plugin {
   static postprocessor: MarkdownPostProcessor = (
     el: HTMLElement,
@@ -105,6 +137,8 @@ export default class LogSeqPlugin extends Plugin {
   onload() {
     console.log(`Loading LogSeq plugin ${VERSION}`);
     MarkdownPreviewRenderer.registerPostProcessor(LogSeqPlugin.postprocessor);
+    // Style headings in source editing
+    this.registerCodeMirror(cmHeadingOverlay);
   }
 
   onunload() {

main.ts

@@ -1,7 +1,7 @@
 {
 	"id": "logseq-format",
 	"name": "LogSeq markdown formatting",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"minAppVersion": "0.9.15",
 	"description": "Render LogSeq-specific markdown",
 	"author": "Rui Vieira",

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-plugin-logseq",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Render LogSeq-specific markdown.",
   "main": "main.js",
   "scripts": {

package.json

@@ -1,4 +1,5 @@
 {
 	"0.0.1": "0.9.15",
-	"0.0.2": "0.9.15"
+	"0.0.2": "0.9.15",
+	"0.0.3": "0.9.15"
 }