@codemirror/language 6.8.0 → 6.9.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 6.9.0 (2023-08-16)
+
+### Bug fixes
+
+Make `getIndentation` return null, rather than 0, when there is no syntax tree available.
+
+### New features
+
+The new `preparePlaceholder` option to `codeFolding` makes it possible to display contextual information in a folded range placeholder widget.
+
 ## 6.8.0 (2023-06-12)
 
 ### New features

package/dist/index.cjs

@@ -865,7 +865,7 @@ function getIndentation(context, pos) {
             return result;
     }
     let tree = syntaxTree(context.state);
-    return tree ? syntaxIndentation(context, tree, pos) : null;
+    return tree.length >= pos ? syntaxIndentation(context, tree, pos) : null;
 }
 /**
 Create a change set that auto-indents all lines touched by the
@@ -1304,11 +1304,16 @@ const foldState = state.StateField.define({
     update(folded, tr) {
         folded = folded.map(tr.changes);
         for (let e of tr.effects) {
-            if (e.is(foldEffect) && !foldExists(folded, e.value.from, e.value.to))
-                folded = folded.update({ add: [foldWidget.range(e.value.from, e.value.to)] });
-            else if (e.is(unfoldEffect))
+            if (e.is(foldEffect) && !foldExists(folded, e.value.from, e.value.to)) {
+                let { preparePlaceholder } = tr.state.facet(foldConfig);
+                let widget = !preparePlaceholder ? foldWidget :
+                    view.Decoration.replace({ widget: new PreparedFoldWidget(preparePlaceholder(tr.state, e.value)) });
+                folded = folded.update({ add: [widget.range(e.value.from, e.value.to)] });
+            }
+            else if (e.is(unfoldEffect)) {
                 folded = folded.update({ filter: (from, to) => e.value.from != from || e.value.to != to,
                     filterFrom: e.value.from, filterTo: e.value.to });
+            }
         }
         // Clear folded ranges that cover the selection head
         if (tr.selection) {
@@ -1485,6 +1490,7 @@ const foldKeymap = [
 ];
 const defaultConfig = {
     placeholderDOM: null,
+    preparePlaceholder: null,
     placeholderText: "…"
 };
 const foldConfig = state.Facet.define({
@@ -1499,27 +1505,36 @@ function codeFolding(config) {
         result.push(foldConfig.of(config));
     return result;
 }
+function widgetToDOM(view, prepared) {
+    let { state } = view, conf = state.facet(foldConfig);
+    let onclick = (event) => {
+        let line = view.lineBlockAt(view.posAtDOM(event.target));
+        let folded = findFold(view.state, line.from, line.to);
+        if (folded)
+            view.dispatch({ effects: unfoldEffect.of(folded) });
+        event.preventDefault();
+    };
+    if (conf.placeholderDOM)
+        return conf.placeholderDOM(view, onclick, prepared);
+    let element = document.createElement("span");
+    element.textContent = conf.placeholderText;
+    element.setAttribute("aria-label", state.phrase("folded code"));
+    element.title = state.phrase("unfold");
+    element.className = "cm-foldPlaceholder";
+    element.onclick = onclick;
+    return element;
+}
 const foldWidget = view.Decoration.replace({ widget: new class extends view.WidgetType {
-        toDOM(view) {
-            let { state } = view, conf = state.facet(foldConfig);
-            let onclick = (event) => {
-                let line = view.lineBlockAt(view.posAtDOM(event.target));
-                let folded = findFold(view.state, line.from, line.to);
-                if (folded)
-                    view.dispatch({ effects: unfoldEffect.of(folded) });
-                event.preventDefault();
-            };
-            if (conf.placeholderDOM)
-                return conf.placeholderDOM(view, onclick);
-            let element = document.createElement("span");
-            element.textContent = conf.placeholderText;
-            element.setAttribute("aria-label", state.phrase("folded code"));
-            element.title = state.phrase("unfold");
-            element.className = "cm-foldPlaceholder";
-            element.onclick = onclick;
-            return element;
-        }
+        toDOM(view) { return widgetToDOM(view, null); }
     } });
+class PreparedFoldWidget extends view.WidgetType {
+    constructor(value) {
+        super();
+        this.value = value;
+    }
+    eq(other) { return this.value == other.value; }
+    toDOM(view) { return widgetToDOM(view, this.value); }
+}
 const foldGutterDefaults = {
     openText: "⌄",
     closedText: "›",
@@ -2489,7 +2504,7 @@ function createTokenType(extra, tagStr) {
     return type.id;
 }
 function docID(data) {
-    let type = common.NodeType.define({ id: typeArray.length, name: "Document", props: [languageDataProp.add(() => data)] });
+    let type = common.NodeType.define({ id: typeArray.length, name: "Document", props: [languageDataProp.add(() => data)], top: true });
     typeArray.push(type);
     return type;
 }

package/dist/index.d.cts

@@ -761,17 +761,30 @@ interface FoldConfig {
     position of folded code. The `onclick` argument is the default
     click event handler, which toggles folding on the line that
     holds the element, and should probably be added as an event
-    handler to the returned element.
+    handler to the returned element. If
+    [`preparePlaceholder`](https://codemirror.net/6/docs/ref/#language.FoldConfig.preparePlaceholder)
+    is given, its result will be passed as 3rd argument. Otherwise,
+    this will be null.
     
     When this option isn't given, the `placeholderText` option will
     be used to create the placeholder element.
     */
-    placeholderDOM?: ((view: EditorView, onclick: (event: Event) => void) => HTMLElement) | null;
+    placeholderDOM?: ((view: EditorView, onclick: (event: Event) => void, prepared: any) => HTMLElement) | null;
     /**
     Text to use as placeholder for folded text. Defaults to `"…"`.
     Will be styled with the `"cm-foldPlaceholder"` class.
     */
     placeholderText?: string;
+    /**
+    Given a range that is being folded, create a value that
+    describes it, to be used by `placeholderDOM` to render a custom
+    widget that, for example, indicates something about the folded
+    range's size or type.
+    */
+    preparePlaceholder?: (state: EditorState, range: {
+        from: number;
+        to: number;
+    }) => any;
 }
 /**
 Create an extension that configures code folding.

package/dist/index.d.ts

@@ -761,17 +761,30 @@ interface FoldConfig {
     position of folded code. The `onclick` argument is the default
     click event handler, which toggles folding on the line that
     holds the element, and should probably be added as an event
-    handler to the returned element.
+    handler to the returned element. If
+    [`preparePlaceholder`](https://codemirror.net/6/docs/ref/#language.FoldConfig.preparePlaceholder)
+    is given, its result will be passed as 3rd argument. Otherwise,
+    this will be null.
     
     When this option isn't given, the `placeholderText` option will
     be used to create the placeholder element.
     */
-    placeholderDOM?: ((view: EditorView, onclick: (event: Event) => void) => HTMLElement) | null;
+    placeholderDOM?: ((view: EditorView, onclick: (event: Event) => void, prepared: any) => HTMLElement) | null;
     /**
     Text to use as placeholder for folded text. Defaults to `"…"`.
     Will be styled with the `"cm-foldPlaceholder"` class.
     */
     placeholderText?: string;
+    /**
+    Given a range that is being folded, create a value that
+    describes it, to be used by `placeholderDOM` to render a custom
+    widget that, for example, indicates something about the folded
+    range's size or type.
+    */
+    preparePlaceholder?: (state: EditorState, range: {
+        from: number;
+        to: number;
+    }) => any;
 }
 /**
 Create an extension that configures code folding.

package/dist/index.js

@@ -861,7 +861,7 @@ function getIndentation(context, pos) {
             return result;
     }
     let tree = syntaxTree(context.state);
-    return tree ? syntaxIndentation(context, tree, pos) : null;
+    return tree.length >= pos ? syntaxIndentation(context, tree, pos) : null;
 }
 /**
 Create a change set that auto-indents all lines touched by the
@@ -1300,11 +1300,16 @@ const foldState = /*@__PURE__*/StateField.define({
     update(folded, tr) {
         folded = folded.map(tr.changes);
         for (let e of tr.effects) {
-            if (e.is(foldEffect) && !foldExists(folded, e.value.from, e.value.to))
-                folded = folded.update({ add: [foldWidget.range(e.value.from, e.value.to)] });
-            else if (e.is(unfoldEffect))
+            if (e.is(foldEffect) && !foldExists(folded, e.value.from, e.value.to)) {
+                let { preparePlaceholder } = tr.state.facet(foldConfig);
+                let widget = !preparePlaceholder ? foldWidget :
+                    Decoration.replace({ widget: new PreparedFoldWidget(preparePlaceholder(tr.state, e.value)) });
+                folded = folded.update({ add: [widget.range(e.value.from, e.value.to)] });
+            }
+            else if (e.is(unfoldEffect)) {
                 folded = folded.update({ filter: (from, to) => e.value.from != from || e.value.to != to,
                     filterFrom: e.value.from, filterTo: e.value.to });
+            }
         }
         // Clear folded ranges that cover the selection head
         if (tr.selection) {
@@ -1481,6 +1486,7 @@ const foldKeymap = [
 ];
 const defaultConfig = {
     placeholderDOM: null,
+    preparePlaceholder: null,
     placeholderText: "…"
 };
 const foldConfig = /*@__PURE__*/Facet.define({
@@ -1495,27 +1501,36 @@ function codeFolding(config) {
         result.push(foldConfig.of(config));
     return result;
 }
+function widgetToDOM(view, prepared) {
+    let { state } = view, conf = state.facet(foldConfig);
+    let onclick = (event) => {
+        let line = view.lineBlockAt(view.posAtDOM(event.target));
+        let folded = findFold(view.state, line.from, line.to);
+        if (folded)
+            view.dispatch({ effects: unfoldEffect.of(folded) });
+        event.preventDefault();
+    };
+    if (conf.placeholderDOM)
+        return conf.placeholderDOM(view, onclick, prepared);
+    let element = document.createElement("span");
+    element.textContent = conf.placeholderText;
+    element.setAttribute("aria-label", state.phrase("folded code"));
+    element.title = state.phrase("unfold");
+    element.className = "cm-foldPlaceholder";
+    element.onclick = onclick;
+    return element;
+}
 const foldWidget = /*@__PURE__*/Decoration.replace({ widget: /*@__PURE__*/new class extends WidgetType {
-        toDOM(view) {
-            let { state } = view, conf = state.facet(foldConfig);
-            let onclick = (event) => {
-                let line = view.lineBlockAt(view.posAtDOM(event.target));
-                let folded = findFold(view.state, line.from, line.to);
-                if (folded)
-                    view.dispatch({ effects: unfoldEffect.of(folded) });
-                event.preventDefault();
-            };
-            if (conf.placeholderDOM)
-                return conf.placeholderDOM(view, onclick);
-            let element = document.createElement("span");
-            element.textContent = conf.placeholderText;
-            element.setAttribute("aria-label", state.phrase("folded code"));
-            element.title = state.phrase("unfold");
-            element.className = "cm-foldPlaceholder";
-            element.onclick = onclick;
-            return element;
-        }
+        toDOM(view) { return widgetToDOM(view, null); }
     } });
+class PreparedFoldWidget extends WidgetType {
+    constructor(value) {
+        super();
+        this.value = value;
+    }
+    eq(other) { return this.value == other.value; }
+    toDOM(view) { return widgetToDOM(view, this.value); }
+}
 const foldGutterDefaults = {
     openText: "⌄",
     closedText: "›",
@@ -2485,7 +2500,7 @@ function createTokenType(extra, tagStr) {
     return type.id;
 }
 function docID(data) {
-    let type = NodeType.define({ id: typeArray.length, name: "Document", props: [languageDataProp.add(() => data)] });
+    let type = NodeType.define({ id: typeArray.length, name: "Document", props: [languageDataProp.add(() => data)], top: true });
     typeArray.push(type);
     return type;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/language",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "description": "Language support infrastructure for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",