block decoration error - Uncaught RangeError: Block decorations may not be specified via plugins

1

I have a widget that works as inline decoration, but when I change it to block decoration it gives me this error -

Uncaught RangeError: Block decorations may not be specified via plugins

function resultDOM(view: EditorView) {
const resultWidgets: Range = ;

const results = getResult(view, storePage); // returns array of results
results.forEach((res, index) => {
  const deco = Decoration.widget({
    widget: new ResultWidget(res),
    side: 0,
    block: true, // this causes the error
  });
  const { to } = view.lineBlockAt(view.state.doc.line(index + 1).to);
  resultWidgets.push(deco.range(to));
});
return Decoration.set(resultWidgets);

}

const resultPlugin = ViewPlugin.fromClass(
class {
decorations: DecorationSet;

  constructor(view: EditorView) {
    this.decorations = resultDOM(view);
  }

  update(update: ViewUpdate) {
    if (update.docChanged || update.viewportChanged)
      this.decorations = resultDOM(update.view);
  }
},
{
  decorations: (v) => v.decorations,
});

class ResultWidget extends WidgetType {
constructor(readonly result: Results) {
super();
this.result = result;
}

toDOM() {
const wrap = document.createElement(“span”);
wrap.setAttribute(“aria-hidden”, “true”);
wrap.className = “cm-result”;
wrap.innerText = this.result.result;
return wrap;
}

ignoreEvent() {
return false;
}
}

Am I missing anything?

2

Here is a sandbox to repro.

3

The error message says it all: block decorations may not be specified via plugins. Only the decorations facet can create block decorations. See the docs.

1 Like