Non jumpy headers

web/clean_mode.ts

@@ -150,6 +150,7 @@ const typesWithMarks = [
   "Emphasis",
   "StrongEmphasis",
   "InlineCode",
+  "Highlight",
   "Strikethrough",
   "WikiLink",
   "CommandLink",
@@ -160,6 +161,7 @@ const typesWithMarks = [
 const markTypes = [
   "EmphasisMark",
   "CodeMark",
+  "HighlightMark",
   "StrikethroughMark",
   "WikiLinkMark",
   "CommandLinkMark",
@@ -255,7 +257,12 @@ class HideHeaderMarkPlugin {
         const cursorOverlaps = ranges.some(({ from, to }) =>
           checkRangeOverlap([from, to], [line.from, line.to])
         );
-        if (cursorOverlaps) return;
+        if (cursorOverlaps) {
+          widgets.push(
+            Decoration.line({ class: "sb-header-inside" }).range(from),
+          );
+          return;
+        }
         if (
           type.name === "HeaderMark" &&
           // Setext heading's horizontal lines are not hidden.

web/styles/editor.scss

@@ -110,10 +110,6 @@
 		content: "\2022"; /* U+2022 BULLET */
 	}
 
-  // .sb-directive-start {
-  //   border-bottom: 1px dotted #6c6c6c;
-  // }
-
   .sb-directive-start .sb-comment, .sb-directive-end .sb-comment {
     position: relative;
     left: -12px;

web/styles/theme.scss

@@ -128,11 +128,23 @@
   }
 }
 
+.sb-header-inside.sb-line-h1 {
+  margin-left: -2ch;
+}
+
+.sb-header-inside.sb-line-h2 {
+  margin-left: -3ch;
+}
+
+.sb-header-inside.sb-line-h3 {
+  margin-left: -4ch;
+}
+
 .sb-line-h1,
 .sb-line-h2,
 .sb-line-h3 {
-  background-color: rgba(0, 30, 77, 0.5);
-  color: #fff;
+  // background-color: rgba(0, 30, 77, 0.5);
+  color: #333;
   font-weight: bold;
   padding: 2px 2px !important;
 }
@@ -140,7 +152,7 @@
 .sb-line-h1 .sb-meta,
 .sb-line-h2 .sb-meta,
 .sb-line-h3 .sb-meta {
-  color: orange;
+  color: #a1a1a0;
 }
 
 .sb-line-h1 {