1 files changed, 42 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/defineDecorationSetExtension.ts b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
new file mode 100644
index 00000000..d9c7bc7d
--- /dev/null
+++ b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
@@ -0,0 +1,42 @@
+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];
+}