how to group some text?

v6
1

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

e.g:
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.

2

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

3

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() {
    super()
  }
  
  toDOM(view: EditorView): HTMLElement {
    const div = document.createElement('div');
    console.log('debug1', view.st)
    // @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 = decos.map(tr.changes);
    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: [
    basicSetup,
    javascript(),
  ],
  parent: document.querySelector("#editor")!
});
view.setState(state);
;(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?

4

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.