onkeypress event not firing in Placeholderwidget

v6
1

Hello,

I am following the example for atomic ranges.

class PlaceholderWidget extends WidgetType {
  value: string;
  constructor(value: string) {
    super();
    this.value = value;
  }
  toDOM(): HTMLElement {
    const span = document.createElement("span");

    span.textContent = this.value;
    span.className = "cm-prompt";
    span.contentEditable = "true";
    span.tabIndex = 0;
    span.onkeypress = (e) => {
     // does not fire
      console.log("Key Press:", e.key);
      e.preventDefault();
      e.stopPropagation();
      console.log("Form submitted");
    };
    span.onkeyup = (e) => {
          // does not fire
      console.log("Key released:", e.key);
      if (e.key === "Enter") {
        e.preventDefault();
        e.stopPropagation();
        console.log("Enter key released");
      }
    };

    span.onkeydown = (e) => {
           // does not fire
      console.log("Key pressed:", e.key);
      if (e.key === "Enter") {
        e.preventDefault();
        e.stopPropagation();
        console.log("Enter key pressed");
      }
    };
    span.onclick = (e) => {
     // does fire
      e.preventDefault();
      e.stopPropagation();
      span.contentEditable = "true";
      console.log("Span clicked");
    };
    span.focus();
    return span;
  }
}

const placeholderMatcher = new MatchDecorator({
  regexp: /\[\[(.*?)\]\]/g,
  decoration: (match) =>
    Decoration.replace({
      widget: new PlaceholderWidget(match[1]),
    }),
});

export const prompt = ViewPlugin.fromClass(
  class {
    placeholders: DecorationSet;
    constructor(view: EditorView) {
      this.placeholders = placeholderMatcher.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.placeholders = placeholderMatcher.updateDeco(
        update,
        this.placeholders,
      );
    }
  },
  {
    decorations: (instance) => instance.placeholders,
    provide: (plugin) =>
      EditorView.atomicRanges.of((view) => {
        return view.plugin(plugin)?.placeholders || Decoration.none;
      }),
  },
);

Here the user can press [[ ]] enter custom text between the atomic range. After entering I want to capture the Enter keypress and do something. However none of the keypress events are firing. The mouse events do fire though. Is this due to any keyBindings (or lack thereof) or do I need to do something special to capture keypresses inside this widget?
FYI, I am using this extenstion - keymap.of(defaultKeymap),

2

Giving that element its own contenteditable attribute will make it separately focusable. So I expect the problem is that focus isn’t actually on the main editor, so key event don’t go to the element the library expects them to go to, when this happens.

3

so even removing the contendeditable and focus from the span, the keyup/down events are not captured.

I updated the ViewPlugin to add eventhandlers -

export const prompt = ViewPlugin.fromClass(
  class {
    placeholders: DecorationSet;
    constructor(view: EditorView) {
      this.placeholders = placeholderMatcher.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.placeholders = placeholderMatcher.updateDeco(
        update,
        this.placeholders,
      );
    }
  },
  {
    eventHandlers: {
      keydown: (event, view) => {
        //event.preventDefault();
        //event.stopPropagation();
        console.log("key pressed event");
        if (event.key === "Enter") {
          console.log("Enter");
          //event.preventDefault();
          //event.stopPropagation();
        }
      },
    },
    decorations: (instance) => instance.placeholders,
    provide: (plugin) =>
      EditorView.atomicRanges.of((view) => {
        return view.plugin(plugin)?.placeholders || Decoration.none;
      }),
  },
);

So with this, it does capture the key event, however I found that all the events in the defaultKeymap are not getting passed to the span/eventHandlers as the keymap extension probably stops the propagation.

If I try to capture to capture any other key that is not registered by the standardKeymap like cltr, alt etc, it gets triggered, but Enter, backspace, left/right arrow keys etc which are part of the standardKeymap are not captured by this plugin.

Any workaround to pass those key events to the PlaceholderWidget?

4

So the eventHandlers in the above example still fire for the entire editor, not just the Widget.
However I can capture and control the key press this way. However I just need to detect if the cursor is inside the widget or not. How can I detect this?

{
    eventHandlers: {
      keydown: (e, view) => {
        // Detect if the cursor is inside the editor??
        console.log("Key pressed:", e.key);
        if (e.key === "Enter") {
          e.preventDefault();
          e.stopPropagation();
          console.log("Enter key pressed");
        }
        if (e.key === "ArrowLeft") {
          //e.preventDefault();
          e.stopPropagation();
          console.log("Left arrow key pressed");
        }
        if (e.key === "ArrowRight") {
          //e.preventDefault();
          e.stopPropagation();
          console.log("Right arrow key pressed");
        }
      },
    },
5

I guess looking at event.target would be the way to do that.

6

The focus is always on the editor no matter what and therefore the event.target is always the editor and not the decorator span element. I guess this makes sense as the editor needs to capture all such events in order to function properly.

I found another way to detect if the current cursor position is inside any of the decorator or not -

export const prompt = ViewPlugin.fromClass(
  class {
    placeholders: DecorationSet;
    constructor(view: EditorView) {
      this.placeholders = placeholderMatcher.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.placeholders = placeholderMatcher.updateDeco(
        update,
        this.placeholders,
      );
    }
  },
  {
    eventHandlers: {
      keydown: (e, view) => {
        const value = view.plugin(prompt)?.placeholders;
        const current = view.state.selection.main.head;
        let isPromptFocused = false;
        for (let iter = value!.iter(); iter.value !== null; iter.next()) {
          if (current > iter.from && current < iter.to) {
            isPromptFocused = true;
            break;
          }
        }
        console.log("Current:", view.state.selection.main.head);
        console.log("Key pressed:", e.key);
        if (e.key === "Enter") {
          if (isPromptFocused) {
            console.log("Enter key pressed in prompt");
            view.dispatch({
              selection: { anchor: current + 2 },
            });
          }
          //e.preventDefault();
          //e.stopPropagation();
          console.log("Enter key pressed");
        }
      },
    },
    decorations: (instance) => instance.placeholders,
    provide: (plugin) =>
      EditorView.decorations.of((view) => {
        return view.plugin(plugin)?.placeholders || Decoration.none;
      }),
  },
);

However there is perhaps a bug in the decoration behaviour.
While typing inside the decoration widget, if you move your arrow keys left or right, the cursor visually does not move and stays in the end, but if you type, it will type in the location where the cursor is supposed to be.
Quick video - https://www.dropbox.com/scl/fi/11x5cgcxd2qtn2y01u579/hissab_decoration_bug.mov?rlkey=i7gpk56phxh96tx0h0n0iiops&dl=0

7

The way the editor manages the selection, it assumes widgets are atomic things that you cannot move around through. I don’t think what you’re trying to do here is really something that’s possible with CodeMirror.