Live Preview (#119)

Live preview mode is here
2022-11-18 16:04:37 +01:00
parent c9713bf52b
commit 24c17a793f
42 changed files with 1502 additions and 183 deletions
@@ -0,0 +1,106 @@
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  NodeType,
+  SyntaxNodeRef,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "../deps.ts";
+import { isCursorInRange, iterateTreeInVisibleRanges } from "./util.ts";
+
+// TODO: Find a nicer way to inject this on task handler into the class
+function TaskListsPluginFactory(onCheckboxClick: (pos: number) => void) {
+  return class TaskListsPlugin {
+    decorations: DecorationSet = Decoration.none;
+    constructor(
+      view: EditorView,
+    ) {
+      this.decorations = this.addCheckboxes(view);
+    }
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged || update.selectionSet) {
+        this.decorations = this.addCheckboxes(update.view);
+      }
+    }
+    addCheckboxes(view: EditorView) {
+      const widgets: any[] = [];
+      iterateTreeInVisibleRanges(view, {
+        enter: this.iterateTree(view, widgets),
+      });
+      return Decoration.set(widgets, true);
+    }
+
+    private iterateTree(view: EditorView, widgets: any[]) {
+      return ({ type, from, to, node }: SyntaxNodeRef) => {
+        if (type.name !== "Task") return;
+        let checked = false;
+        // Iterate inside the task node to find the checkbox
+        node.toTree().iterate({
+          enter: (ref) => iterateInner(ref.type, ref.from, ref.to),
+        });
+        if (checked) {
+          widgets.push(
+            Decoration.mark({
+              tagName: "span",
+              class: "cm-task-checked",
+            }).range(from, to),
+          );
+        }
+
+        function iterateInner(type: NodeType, nfrom: number, nto: number) {
+          if (type.name !== "TaskMarker") return;
+          if (isCursorInRange(view.state, [from + nfrom, from + nto])) return;
+          const checkbox = view.state.sliceDoc(from + nfrom, from + nto);
+          // Checkbox is checked if it has a 'x' in between the []
+          if ("xX".includes(checkbox[1])) checked = true;
+          const dec = Decoration.replace({
+            widget: new CheckboxWidget(
+              checked,
+              from + nfrom + 1,
+              onCheckboxClick,
+            ),
+          });
+          widgets.push(dec.range(from + nfrom, from + nto));
+        }
+      };
+    }
+  };
+}
+
+/**
+ * Widget to render checkbox for a task list item.
+ */
+class CheckboxWidget extends WidgetType {
+  constructor(
+    public checked: boolean,
+    readonly pos: number,
+    readonly clickCallback: (pos: number) => void,
+  ) {
+    super();
+  }
+  toDOM(_view: EditorView): HTMLElement {
+    const wrap = document.createElement("span");
+    wrap.classList.add("sb-checkbox");
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = this.checked;
+    checkbox.addEventListener("click", (e) => {
+      // Let the click handler handle this
+      e.stopPropagation();
+
+      this.clickCallback(this.pos);
+    });
+    wrap.appendChild(checkbox);
+    return wrap;
+  }
+}
+
+export function taskListPlugin(
+  { onCheckboxClick }: { onCheckboxClick: (pos: number) => void },
+) {
+  return ViewPlugin.fromClass(TaskListsPluginFactory(onCheckboxClick), {
+    decorations: (v) => v.decorations,
+  });
+}