Editable Decoration Widget for inline editing encrypted/decrypted text

I want to have a decoration widget, with a text cursor inside (as obsidian.md plugin, obsidian is a markdown editor) with CM6.


<secret>Crypted Text...</secret>

Rendered View:

<secret>Decrypted Text</secret>

This already works! The Problem is, i don’t find any way making an inline edit possible. Even when using a html-input, the textbox cannot get focus and the cursor will be placed before or after the input field.

Shortened code:

class FoldWidget extends WidgetType {

  constructor() {

  eq(other: FoldWidget) {

  toDOM() {
    let el = document.createElement("input");
    el.setAttr("type", "text");
    return el;

  ignoreEvent() {
    return false;


let deco = Decoration.replace({
  widget: new FoldWidget(false, isHeader),
  inclusive: true,
builder.add(from, to, deco);

What is the right way to archive this?
The goal is, that the user will never see the encrypted text and can edit the decrypted text like a normal text value, but in the background the encrypted text will be updated. The decrypted text should never emitted to the file itself, because of auto-save it would arrive the disk or the decrypted text would be indexed by obsidian.md.

Of course, it should also work for multi-line (in other words: The decrypted text could contain line breaks):

line 1
line 2

I suspect the problem is in your ignoreEvent method. By letting the editor handle all evens in your widget, you are preventing direct interaction with it. return true might help a lot (though possibly you’ll want to return false for some events, such as drag events that target the outer widget element).