subprojects/frontend/src/editor/defineDecorationSetExtension.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

/*
 * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
 *
 * SPDX-License-Identifier: EPL-2.0
 */

import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
import { EditorView, Decoration, DecorationSet } from '@codemirror/view';

export type TransactionSpecFactory = (
  decorations: DecorationSet,
) => TransactionSpec;

export default function defineDecorationSetExtension(): [
  TransactionSpecFactory,
  StateField<DecorationSet>,
] {
  const setEffect = StateEffect.define<DecorationSet>();
  const stateField = StateField.define<DecorationSet>({
    create() {
      return Decoration.none;
    },
    update(currentDecorations, transaction) {
      let newDecorations: DecorationSet | null = null;
      transaction.effects.forEach((effect) => {
        if (effect.is(setEffect)) {
          newDecorations = effect.value;
        }
      });
      if (newDecorations === null) {
        if (transaction.docChanged) {
          return currentDecorations.map(transaction.changes);
        }
        return currentDecorations;
      }
      return newDecorations;
    },
    provide: (field) => EditorView.decorations.from(field),
  });

  function transactionSpecFactory(decorations: DecorationSet) {
    return {
      effects: [setEffect.of(decorations)],
    };
  }

  return [transactionSpecFactory, stateField];
}