@codemirror/view 6.0.3 → 6.1.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 6.1.0 (2022-07-19)
+
+### New features
+
+`MatchDecorator` now supports a `decorate` option that can be used to customize the way decorations are added for each match.
+
 ## 6.0.3 (2022-07-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -7381,7 +7381,7 @@ function iterMatches(doc, re, from, to, f) {
     for (let cursor = doc.iterRange(from, to), pos = from, m; !cursor.next().done; pos += cursor.value.length) {
         if (!cursor.lineBreak)
             while (m = re.exec(cursor.value))
-                f(pos + m.index, pos + m.index + m[0].length, m);
+                f(pos + m.index, m);
     }
 }
 function matchRanges(view, maxLength) {
@@ -7411,11 +7411,20 @@ class MatchDecorator {
     Create a decorator.
     */
     constructor(config) {
-        let { regexp, decoration, boundary, maxLength = 1000 } = config;
+        const { regexp, decoration, decorate, boundary, maxLength = 1000 } = config;
         if (!regexp.global)
             throw new RangeError("The regular expression given to MatchDecorator should have its 'g' flag set");
         this.regexp = regexp;
-        this.getDeco = typeof decoration == "function" ? decoration : () => decoration;
+        if (decorate) {
+            this.addMatch = (match, view, from, add) => decorate(add, from, from + match[0].length, match, view);
+        }
+        else if (decoration) {
+            let getDeco = typeof decoration == "function" ? decoration : () => decoration;
+            this.addMatch = (match, view, from, add) => add(from, from + match[0].length, getDeco(match, view, from));
+        }
+        else {
+            throw new RangeError("Either 'decorate' or 'decoration' should be provided to MatchDecorator");
+        }
         this.boundary = boundary;
         this.maxLength = maxLength;
     }
@@ -7425,9 +7434,9 @@ class MatchDecorator {
     plugin.
     */
     createDeco(view) {
-        let build = new state.RangeSetBuilder();
+        let build = new state.RangeSetBuilder(), add = build.add.bind(build);
         for (let { from, to } of matchRanges(view, this.maxLength))
-            iterMatches(view.state.doc, this.regexp, from, to, (a, b, m) => build.add(a, b, this.getDeco(m, view, a)));
+            iterMatches(view.state.doc, this.regexp, from, to, (from, m) => this.addMatch(m, view, from, add));
         return build.finish();
     }
     /**
@@ -7469,15 +7478,14 @@ class MatchDecorator {
                         }
                 }
                 let ranges = [], m;
+                let add = (from, to, deco) => ranges.push(deco.range(from, to));
                 if (fromLine == toLine) {
                     this.regexp.lastIndex = start - fromLine.from;
-                    while ((m = this.regexp.exec(fromLine.text)) && m.index < end - fromLine.from) {
-                        let pos = m.index + fromLine.from;
-                        ranges.push(this.getDeco(m, view, pos).range(pos, pos + m[0].length));
-                    }
+                    while ((m = this.regexp.exec(fromLine.text)) && m.index < end - fromLine.from)
+                        this.addMatch(m, view, m.index + fromLine.from, add);
                 }
                 else {
-                    iterMatches(view.state.doc, this.regexp, start, end, (from, to, m) => ranges.push(this.getDeco(m, view, from).range(from, to)));
+                    iterMatches(view.state.doc, this.regexp, start, end, (from, m) => this.addMatch(m, view, from, add));
                 }
                 deco = deco.update({ filterFrom: start, filterTo: end, filter: (from, to) => from < start || to > end, add: ranges });
             }

package/dist/index.d.ts

@@ -1357,7 +1357,7 @@ represent a matching configuration.
 */
 declare class MatchDecorator {
     private regexp;
-    private getDeco;
+    private addMatch;
     private boundary;
     private maxLength;
     /**
@@ -1374,7 +1374,18 @@ declare class MatchDecorator {
         The decoration to apply to matches, either directly or as a
         function of the match.
         */
-        decoration: Decoration | ((match: RegExpExecArray, view: EditorView, pos: number) => Decoration);
+        decoration?: Decoration | ((match: RegExpExecArray, view: EditorView, pos: number) => Decoration);
+        /**
+        Customize the way decorations are added for matches. This
+        function, when given, will be called for matches and should
+        call `add` to create decorations for them. Note that the
+        decorations should appear *in* the given range, and the
+        function should have no side effects beyond calling `add`.
+        
+        The `decoration` option is ignored when `decorate` is
+        provided.
+        */
+        decorate?: (add: (from: number, to: number, decoration: Decoration) => void, from: number, to: number, match: RegExpExecArray, view: EditorView) => void;
         /**
         By default, changed lines are re-matched entirely. You can
         provide a boundary expression, which should match single

package/dist/index.js

@@ -7374,7 +7374,7 @@ function iterMatches(doc, re, from, to, f) {
     for (let cursor = doc.iterRange(from, to), pos = from, m; !cursor.next().done; pos += cursor.value.length) {
         if (!cursor.lineBreak)
             while (m = re.exec(cursor.value))
-                f(pos + m.index, pos + m.index + m[0].length, m);
+                f(pos + m.index, m);
     }
 }
 function matchRanges(view, maxLength) {
@@ -7404,11 +7404,20 @@ class MatchDecorator {
     Create a decorator.
     */
     constructor(config) {
-        let { regexp, decoration, boundary, maxLength = 1000 } = config;
+        const { regexp, decoration, decorate, boundary, maxLength = 1000 } = config;
         if (!regexp.global)
             throw new RangeError("The regular expression given to MatchDecorator should have its 'g' flag set");
         this.regexp = regexp;
-        this.getDeco = typeof decoration == "function" ? decoration : () => decoration;
+        if (decorate) {
+            this.addMatch = (match, view, from, add) => decorate(add, from, from + match[0].length, match, view);
+        }
+        else if (decoration) {
+            let getDeco = typeof decoration == "function" ? decoration : () => decoration;
+            this.addMatch = (match, view, from, add) => add(from, from + match[0].length, getDeco(match, view, from));
+        }
+        else {
+            throw new RangeError("Either 'decorate' or 'decoration' should be provided to MatchDecorator");
+        }
         this.boundary = boundary;
         this.maxLength = maxLength;
     }
@@ -7418,9 +7427,9 @@ class MatchDecorator {
     plugin.
     */
     createDeco(view) {
-        let build = new RangeSetBuilder();
+        let build = new RangeSetBuilder(), add = build.add.bind(build);
         for (let { from, to } of matchRanges(view, this.maxLength))
-            iterMatches(view.state.doc, this.regexp, from, to, (a, b, m) => build.add(a, b, this.getDeco(m, view, a)));
+            iterMatches(view.state.doc, this.regexp, from, to, (from, m) => this.addMatch(m, view, from, add));
         return build.finish();
     }
     /**
@@ -7462,15 +7471,14 @@ class MatchDecorator {
                         }
                 }
                 let ranges = [], m;
+                let add = (from, to, deco) => ranges.push(deco.range(from, to));
                 if (fromLine == toLine) {
                     this.regexp.lastIndex = start - fromLine.from;
-                    while ((m = this.regexp.exec(fromLine.text)) && m.index < end - fromLine.from) {
-                        let pos = m.index + fromLine.from;
-                        ranges.push(this.getDeco(m, view, pos).range(pos, pos + m[0].length));
-                    }
+                    while ((m = this.regexp.exec(fromLine.text)) && m.index < end - fromLine.from)
+                        this.addMatch(m, view, m.index + fromLine.from, add);
                 }
                 else {
-                    iterMatches(view.state.doc, this.regexp, start, end, (from, to, m) => ranges.push(this.getDeco(m, view, from).range(from, to)));
+                    iterMatches(view.state.doc, this.regexp, start, end, (from, m) => this.addMatch(m, view, from, add));
                 }
                 deco = deco.update({ filterFrom: start, filterTo: end, filter: (from, to) => from < start || to > end, add: ranges });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.0.3",
+  "version": "6.1.0",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",