Editable Decoration Widget for inline editing encrypted/decrypted text

v6
1

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

Textfile:

<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() {
    super();
  }

  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):

<secret>
line 1
line 2
</secret>
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).

3

I ran into the same problem just now. Did you ever get it resolved?

testing mistake, it actually works fine. Sorry for the necro-noise.