vanilla-repl-cm6: add flash effect

packages/core/examples/vite-vanilla-repl-cm6/codemirror.js

@@ -13,15 +13,11 @@ export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
     extensions: [
       javascript(),
       lineNumbers(),
-      /*gutter({
-        class: "cm-mygutter"
-      }),*/
       highlightField,
       highlightActiveLineGutter(),
-      //markLineGutter,
       syntaxHighlighting(defaultHighlightStyle),
       keymap.of(defaultKeymap),
-      //flashField,
+      flashField,
       EditorView.updateListener.of((v) => onChange(v)),
       keymap.of([
         {
@@ -42,7 +38,9 @@ export function initEditor({ initialCode, onChange, onEvaluate, onStop }) {
   });
 }
 
-// codemirror specific highlighting logic
+//
+//  highlighting
+//
 
 export const setHighlights = StateEffect.define();
 export const highlightField = StateField.define({
@@ -89,3 +87,40 @@ export const highlightField = StateField.define({
 export function highlightHaps(view, haps) {
   view.dispatch({ effects: setHighlights.of({ haps }) });
 }
+
+//
+// flash
+//
+
+export const setFlash = StateEffect.define();
+const flashField = StateField.define({
+  create() {
+    return Decoration.none;
+  },
+  update(flash, tr) {
+    try {
+      for (let e of tr.effects) {
+        if (e.is(setFlash)) {
+          if (e.value) {
+            const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
+            flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
+          } else {
+            flash = Decoration.set([]);
+          }
+        }
+      }
+      return flash;
+    } catch (err) {
+      console.warn('flash error', err);
+      return flash;
+    }
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+export const flash = (view) => {
+  view.dispatch({ effects: setFlash.of(true) });
+  setTimeout(() => {
+    view.dispatch({ effects: setFlash.of(false) });
+  }, 200);
+};