Fixes #144

web/cm_plugins/directive.ts

@@ -1,44 +1,62 @@
 import { Decoration, EditorState, syntaxTree } from "../deps.ts";
-import { decoratorStateField, isCursorInRange } from "./util.ts";
-
-function getDirectives(state: EditorState) {
-  const widgets: any[] = [];
-
-  syntaxTree(state).iterate({
-    enter: ({ type, from, to }) => {
-      if (type.name !== "CommentBlock") {
-        return;
-      }
-      const text = state.sliceDoc(from, to);
-      if (/<!--\s*#/.exec(text)) {
-        // Open directive
-        widgets.push(
-          Decoration.line({
-            class: "sb-directive-start",
-          }).range(from),
-        );
-      } else if (/<!--\s*\//.exec(text)) {
-        widgets.push(
-          Decoration.line({
-            class: "sb-directive-end",
-          }).range(from),
-        );
-      } else {
-        return;
-      }
-      if (!isCursorInRange(state, [from, to])) {
-        widgets.push(
-          Decoration.line({
-            class: "sb-directive-outside",
-          }).range(from),
-        );
-      }
-    },
-  });
-
-  return Decoration.set(widgets, true);
-}
+import {
+  decoratorStateField,
+  invisibleDecoration,
+  isCursorInRange,
+} from "./util.ts";
 
+// Does a few things: hides the directives when the cursor is not placed inside
+// Adds a class to the start and end of the directive when the cursor is placed inside
 export function directivePlugin() {
-  return decoratorStateField(getDirectives);
+  return decoratorStateField((state: EditorState) => {
+    const widgets: any[] = [];
+    const cursorPos = state.selection.main.head;
+
+    // TODO: This doesn't handle nested directives properly
+    let posOfLastOpen = { from: 0, to: 0 };
+
+    syntaxTree(state).iterate({
+      enter: ({ type, from, to }) => {
+        if (type.name !== "CommentBlock") {
+          return;
+        }
+        const text = state.sliceDoc(from, to);
+        if (/<!--\s*#/.exec(text)) {
+          // Open directive
+          posOfLastOpen = { from, to };
+        } else if (/<!--\s*\//.exec(text)) {
+          // Close directive
+          if (
+            (cursorPos > to || cursorPos < posOfLastOpen.from) &&
+            !isCursorInRange(state, [posOfLastOpen.from, to])
+          ) {
+            widgets.push(
+              invisibleDecoration.range(
+                posOfLastOpen.from,
+                posOfLastOpen.to + 1,
+              ),
+            );
+            widgets.push(
+              invisibleDecoration.range(from - 1, to),
+            );
+          } else {
+            widgets.push(
+              Decoration.line({
+                class: "sb-directive-start",
+              }).range(posOfLastOpen.from),
+            );
+            widgets.push(
+              Decoration.line({
+                class: "sb-directive-end",
+              }).range(from),
+            );
+          }
+        } else {
+          return;
+        }
+      },
+    });
+
+    return Decoration.set(widgets, true);
+  });
 }

web/styles/editor.scss

@@ -146,10 +146,6 @@
     left: -20px;
 	}
 
-  .sb-directive-outside {
-    opacity: 0.4;
-  }
-
   .sb-line-frontmatter-outside, .sb-line-code-outside {
     display: none;
   }

website/CHANGELOG.md

@@ -7,6 +7,7 @@ release.
 
 * Replaced the `--password` flag with `--user` taking a basic auth combination of username and password, e.g. `--user pete:1234`. Authentication now uses standard basic auth. This should fix attachments not working with password-protected setups.
 * Added support for ~~strikethrough~~ syntax.
+* Directives are now hidden unless the cursor is placed inside them for an even cleaner look
 * New logo! Contributed by [petercoyne](https://github.com/silverbulletmd/silverbullet/pull/177)
 * New button icons, from [feather](https://feathericons.com/)
 * UI font tweaks