how to group some text?

Can I group text by [] and inner text is editable?

origin text:

[text 1]

[text 2]

after render, [] should be hide, and inner text should be editable.

I had tried to use Decoration.replace, but it make inner text can not be editable.

Decoration.replace can hide the brackets. If text is in the editor, isn’t it already editable without doing anything?

my purpose is group the text, but not only hide brackets.
my codes:

import {EditorView, basicSetup} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
import { Decoration, DecorationSet, MatchDecorator, ViewPlugin, ViewUpdate, WidgetType } from '@codemirror/view';
import { EditorState, RangeSetBuilder, StateField } from '@codemirror/state';

class BlockWidget extends WidgetType {
  constructor() {
  toDOM(view: EditorView): HTMLElement {
    const div = document.createElement('div');
    // @ts-ignore
    div.innerText = view.state.doc.slice(view.state.doc.line(2).from, view.state.doc.line(3).to).text.join('\n');
    return div;
const blockDeco = Decoration.replace({
  block: true,
  widget: new BlockWidget(),

let field = StateField.define({
	create() {
		return Decoration.none;
	update(decos, tr) {
    const block =;
    const newBlock = []

    newBlock.push(blockDeco.range(tr.newDoc.line(2).from, tr.newDoc.line(3).to))

		return block.update({ add: newBlock });
	provide: f => EditorView.decorations.from(f)
let state = EditorState.create({
	doc: 'console.log("Hello world")\nconsole.log("second line")\nconsole.log("third line")',
	extensions: [basicSetup, field]
const view = new EditorView({
  extensions: [
  parent: document.querySelector("#editor")!
;(window as any).view = view;

In another mean, I want to customize the render function of some struct text, and it’s content should be editable. Is possible to achieve it?

It’s not clear what “grouping” the text means in this context. You can style it with Decoration.mark, even add an additional DOM element around it, but there’s no concept of a render function for editable text in the library.