Eliminiate vertical jump with directives

web/cm_plugins/clean.ts

@@ -16,7 +16,7 @@ import { cleanCommandLinkPlugin } from "./command_link.ts";
 export function cleanModePlugins(editor: Editor) {
   return [
     linkPlugin(editor),
-    directivePlugin(),
+    directivePlugin(editor),
     blockquotePlugin(),
     admonitionPlugin(editor),
     hideMarksPlugin(),

web/cm_plugins/directive.ts

@@ -1,13 +1,14 @@
-import { Decoration, EditorState, syntaxTree } from "../deps.ts";
 import {
-  decoratorStateField,
-  invisibleDecoration,
-  isCursorInRange,
-} from "./util.ts";
+  directiveEndRegex,
+  directiveStartRegex,
+} from "../../plug-api/lib/query.ts";
+import { Decoration, EditorState, syntaxTree } from "../deps.ts";
+import type { Editor } from "../editor.tsx";
+import { decoratorStateField, HtmlWidget, 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() {
+export function directivePlugin(editor: Editor) {
   return decoratorStateField((state: EditorState) => {
     const widgets: any[] = [];
 
@@ -28,10 +29,34 @@ export function directivePlugin() {
               Decoration.line({ class: "sb-directive-start" }).range(from),
             );
           } else {
-            widgets.push(invisibleDecoration.range(from, to));
+            const text = state.sliceDoc(from, to);
+            const match = directiveStartRegex.exec(text);
+            if (!match) {
+              console.error("Something went wrong with this directive");
+              return;
+            }
+            const [fullMatch, directiveName] = match;
             widgets.push(
-              Decoration.line({ class: "sb-directive-start-outside" }).range(
-                state.doc.lineAt(to).from,
+              Decoration.widget({
+                widget: new HtmlWidget(
+                  `#${directiveName}`,
+                  "sb-directive-placeholder",
+                  (e) => {
+                    e.stopPropagation();
+                    editor.editorView?.dispatch({
+                      selection: {
+                        anchor: from + fullMatch.indexOf(directiveName),
+                      },
+                    });
+                  },
+                ),
+              }).range(from),
+            );
+            widgets.push(
+              Decoration.line({
+                class: "sb-directive-start sb-directive-start-outside",
+              }).range(
+                from,
               ),
             );
           }
@@ -45,10 +70,34 @@ export function directivePlugin() {
               Decoration.line({ class: "sb-directive-end" }).range(from),
             );
           } else {
-            widgets.push(invisibleDecoration.range(from, to));
+            const text = state.sliceDoc(from, to);
+            const match = directiveEndRegex.exec(text);
+            if (!match) {
+              console.error("Something went wrong with this directive");
+              return;
+            }
+            const [fullMatch, directiveName] = match;
             widgets.push(
-              Decoration.line({ class: "sb-directive-end-outside" }).range(
-                state.doc.lineAt(from - 1).from,
+              Decoration.widget({
+                widget: new HtmlWidget(
+                  `/${directiveName}`,
+                  "sb-directive-placeholder",
+                  (e) => {
+                    e.stopPropagation();
+                    editor.editorView?.dispatch({
+                      selection: {
+                        anchor: from + fullMatch.indexOf(directiveName),
+                      },
+                    });
+                  },
+                ),
+              }).range(from),
+            );
+            widgets.push(
+              Decoration.line({
+                class: "sb-directive-end sb-directive-end-outside",
+              }).range(
+                from,
               ),
             );
           }
@@ -68,6 +117,7 @@ export function directivePlugin() {
             }
             pos += line.length + 1;
           }
+          return true;
         }
       },
     });

web/cm_plugins/util.ts

@@ -40,6 +40,27 @@ export class LinkWidget extends WidgetType {
   }
 }
 
+export class HtmlWidget extends WidgetType {
+  constructor(
+    readonly html: string,
+    readonly className?: string,
+    readonly onClick?: (e: MouseEvent) => void,
+  ) {
+    super();
+  }
+  toDOM(): HTMLElement {
+    const el = document.createElement("span");
+    if (this.className) {
+      el.className = this.className;
+    }
+    if (this.onClick) {
+      el.addEventListener("click", this.onClick);
+    }
+    el.innerHTML = this.html;
+    return el;
+  }
+}
+
 export function decoratorStateField(
   stateToDecoratorMapper: (state: EditorState) => DecorationSet,
 ) {