How can I let the browser instead of prosemirror-view handle triple clicks?

1

I’m implementing an editor that has two modes: markdown and rich text.

The markdown editor is essentially a pre > code block wrapped in a contenteditable="true" div. I’m using highlight.js to highlight headers, links, lists, etc. Here’s how it looks like (roughly):

<div contenteditable="true">
    <pre>
        <code><span class="hljs-section">## This is a header</span>
<span class="hljs-bullet">1.</span> This is a list

<span class="hljs-code">`this is some code`</span>

text...
etc...
        </code>
    </pre>
</div>

When I try to triple-click inside the editor, prosemirror-view selects the entire markdown text, instead of the paragraph (which is standard behaviour). Apparently, defaultTripleClick() is called and because there’s only one text node (the entire body) it selects that.

How can I override that function and let the browser handle the triple clicks?

2

You can’t, but you could implement your own triple-click handler that implements what you want here.

3

Try

      new Plugin({
        props: {
          handleDOMEvents: {
            mousedown(view, event) {
              const {selection: {$from, $to}, schema} = view.state
              return $from.sameParent($to) && event.detail === 3
            }
          }
        }
      })

This does defer tripleClick behavior to the browser which is not always consistent.

3 Likes