Showing some tools by entering "/"

1

Hi! I need to show some tools in position: absolute window by entering /, how can I do it?

I had such thoughts:

  1. I thought that I had to watch on transactions and when transaction would have added text content ‘/’, I’ll show my tools, it works, but looks bad because transactions not always have this structure:
transaction.steps[transaction.steps.length - 1]?.slice.content.content[0]?.text === '/'

// I think it's a bad and incorrect decision.
  1. I thought maybe I need to use prosemirror-inputrules module but I’m not sure :.
  1. Or I need to write a plugin, or to describe handleTextInput event for my view.

I’ll be grateful if someone will help me! (:

Thanks all! :man_technologist:

2

I think your second thought is ok，my thoughts

  1. create an input rule plugin, trigger display action.
  2. use EditorView.posAtCoords | EditorView.domAtPos | EditorView.nodeDOM to calculate the display position
  3. close tools

Sample code

new InputRule(/^\/(\w+)?$/, (state, match) = >{
    if (match) {
        // show tools and calculate the position
    }
    return null;
}),

new Plugin({
    props: {
        handleClick: () = >{
            // close tools or other action
        },
        handleKeyDown: () = >{
            // close tools or other action
        }
    }
})
3

I understood that I had to watch for the current caret position and to get the symbol before it. Is it possible?

Your code is okay but if you set caret position after / by click, your code won’t be ready for it.

4

I found this, hope it helps you