1import { StateEffect, StateField } from '@codemirror/state';
2import { Decoration, EditorView } from '@codemirror/view';
3
4export const setFlash = StateEffect.define();
5export const flashField = StateField.define({
6  create() {
7    return Decoration.none;
8  },
9  update(flash, tr) {
10    try {
11      for (let e of tr.effects) {
12        if (e.is(setFlash)) {
13          if (e.value && tr.newDoc.length > 0) {
14            const mark = Decoration.mark({
15              attributes: { style: `background-color: rgba(255,255,255, .4); filter: invert(10%)` },
16            });
17            const range = e.value.range || { from: 0, to: tr.newDoc.length };
18            flash = Decoration.set([mark.range(range.from, range.to)]);
19          } else {
20            flash = Decoration.set([]);
21          }
22        }
23      }
24      return flash;
25    } catch (err) {
26      console.warn('flash error', err);
27      return flash;
28    }
29  },
30  provide: (f) => EditorView.decorations.from(f),
31});
32
33export const flash = (view, ms = 200, range) => {
34  const flashData = range ? { range } : true;
35  view.dispatch({ effects: setFlash.of(flashData) });
36  setTimeout(() => {
37    view.dispatch({ effects: setFlash.of(false) });
38  }, ms);
39};
40
41export const isFlashEnabled = (on) => (on ? flashField : []);