Fixes #164: Rewrote all CM view plugins to statefields

web/cm_plugins/block_quote.ts

@@ -1,45 +1,26 @@
+import { Decoration, EditorState, syntaxTree } from "../deps.ts";
 import {
-  Decoration,
-  DecorationSet,
-  EditorView,
-  ViewPlugin,
-  ViewUpdate,
-} from "../deps.ts";
-import {
+  decoratorStateField,
   invisibleDecoration,
   isCursorInRange,
-  iterateTreeInVisibleRanges,
 } from "./util.ts";
 
-class BlockquotePlugin {
-  decorations: DecorationSet = Decoration.none;
-  constructor(view: EditorView) {
-    this.decorations = this.decorateLists(view);
-  }
-  update(update: ViewUpdate) {
-    if (update.docChanged || update.viewportChanged || update.selectionSet) {
-      this.decorations = this.decorateLists(update.view);
-    }
-  }
-  private decorateLists(view: EditorView) {
-    const widgets: any[] = [];
-    iterateTreeInVisibleRanges(view, {
-      enter: ({ type, from, to }) => {
-        if (isCursorInRange(view.state, [from, to])) return;
-        if (type.name === "QuoteMark") {
-          widgets.push(invisibleDecoration.range(from, to));
-          widgets.push(
-            Decoration.line({ class: "sb-blockquote-outside" }).range(from),
-          );
-        }
-      },
-    });
-    return Decoration.set(widgets, true);
-  }
+function decorateBlockQuote(state: EditorState) {
+  const widgets: any[] = [];
+  syntaxTree(state).iterate({
+    enter: ({ type, from, to }) => {
+      if (isCursorInRange(state, [from, to])) return;
+      if (type.name === "QuoteMark") {
+        widgets.push(invisibleDecoration.range(from, to));
+        widgets.push(
+          Decoration.line({ class: "sb-blockquote-outside" }).range(from),
+        );
+      }
+    },
+  });
+  return Decoration.set(widgets, true);
+}
+
+export function blockquotePlugin() {
+  return decoratorStateField(decorateBlockQuote);
 }
-export const blockquotePlugin = ViewPlugin.fromClass(
-  BlockquotePlugin,
-  {
-    decorations: (v) => v.decorations,
-  },
-);