Remove doubling proxied event handlers in NcRichContenteditable

[ShGKme]

A problem

All component's event handlers were set as native event handlers with by v-on="$listeners".
It allows using event handlers without the .native modifier for native events.

But the component also raised custom events manually by $emit, including corresponding native events. As a result, it triggers such handlers twice.

Related issue: nextcloud/spreed#9004

Steps to reproduce

1. Set paste event handler:

   <NcRichContenteditable @paste="handler" />

2. Paste anything

Actual behavior

handler is called twice:

• Once handler will be called by $emit('paste')
• One more time, handler will be called by v-on="$listeners".

Expected behavior

handler is called once.

Proposed solution

In this PR with the v-on="listeners" directive only proxied native event handlers are set, without custom events.

Alternative solution

There is a simple alternative solution: remove this.$emit('paste', event) from onPaste handler. It also removes the doubling paste event.

I suggest the solution from the PR because:

• It doesn't change the component's interface (emits option) and behavior with conditions in onPaste.
• It is scalable: it allows adding more custom processing to paste event handling as well as custom processing of other "native" events.

submit and update:value event handlers are not removed because they don't exist as native events on div.

[skjnldsv]

Feels a bit hackish to me?
What about just stopping the propagation and preventing defaults on the @paste event?

[ShGKme]

What about just stopping the propagation and preventing defaults on the @paste event?

The problem is not about the DOM event but the Vue component custom event handler.
The component receives a Vue custom event handler for the paste custom event.

<NcRichContenteditable @paste="customEventHandler" />

Then the component adds native DOM event handlers on the div:

<div @paste="onPaste" v-on="$listeners" />

Which is "equal" to

<div @paste="$emit('paste')" @paste="$listeners.paste()" />

So on the paste:

1. $emit('paste') - calls the customEventHandler
2. $listeners.paste()" - calls the customEventHandler

Feels a bit hackish to me?

Maybe 😀. I personally always use this approach on a wrapper-component if I need to patch specific native event handlers while proxying all handlers. It is always a problem if you combine v-on="$listeners" with custom events.

A simple alternative is to remove paste from emitted component events. But it's less flexible - no control over the event. Though, in this component, it won't break anything.

I'm also okay with removing $emit('paste').

P.S. This problem was solved in Vue 3. They removed $listeners and added the emits option to divide custom and native events.

[ShGKme]

@skjnldsv Hi, do you have any thoughts about this solution or an alternative way to solve duplicating native + vue events?

[skjnldsv]

@skjnldsv Hi, do you have any thoughts about this solution or an alternative way to solve duplicating native + vue events?

With the amount of work I've spent on this component to try to mitigate and handle every use case, I'm too afraid to touch it. It's been a while, but I do remember the struggle back then. Sorry, but I don't have time right now to give a proper review and in-depth check 😞

[ShGKme]

Just found that the same approach is described in the Vue 2 documentation:
So it is not so hackish, recommended and documented way to solve this problem.

https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

The only difference is that in the docs computed does not remove, but replaces listeners. While in this PR computed removes listeners that are replaced in the template. The result is the same, but replacing the listeners in the computed is fine by me either.

It allows removing timestamp check on path event handling: https://github.com/nextcloud/spreed/blob/cd0a971a2bdad0c8f5a177e958f0ebe99d33d505/src/components/NewMessage/NewMessage.vue#L596-L603

[ShGKme]

Rebased onto master

[ShGKme]

/backport to stable7