Fixes #144

web/cm_plugins/directive.ts

@@ -1,8 +1,19 @@
 import { Decoration, EditorState, syntaxTree } from "../deps.ts";
-import { decoratorStateField, isCursorInRange } from "./util.ts";
+import {
+  decoratorStateField,
+  invisibleDecoration,
+  isCursorInRange,
+} from "./util.ts";
 
-function getDirectives(state: EditorState) {
+// 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((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 }) => {
@@ -12,33 +23,40 @@ function getDirectives(state: EditorState) {
         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(from),
+              }).range(posOfLastOpen.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);
-}
+  });
-
-export function directivePlugin() {
-  return decoratorStateField(getDirectives);
 }

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