Paste Image to HtmlEditor throws Exception

[DennisOstertag]

Describe the bug
Radzen.Blazor.js runs into an exception when trying to copy/paste an image into the editor in firefox.
Detailed:
Firefox allows to copy and image and paste that into the radzen html editor. (chromium does not allow this).
When doing so the image is displayed correctly, but the paste listener is not invoced correclty, as there is an TypeError: item is undefined thrown. This prevents custom code in the onPaste from being executed.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://blazor.radzen.com/html-editor#get-set-value' in Firefox
2. Selecte one of the examples
3. Copy an image and paste it into the editor
4. See error thrown in the console: (i did paste my error from localhost as there are more details)

Uncaught TypeError: item is undefined
    pasteListener https://localhost:7071/_content/Radzen.Blazor/Radzen.Blazor.js:1381
    createEditor https://localhost:7071/_content/Radzen.Blazor/Radzen.Blazor.js:1425
    s https://localhost:7071/_framework/blazor.webassembly.js:1
    beginInvokeJSFromDotNet https://localhost:7071/_framework/blazor.webassembly.js:1
    Gt https://localhost:7071/_framework/blazor.webassembly.js:1
    Ii https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    _mono_wasm_invoke_js_blazor https://localhost:7071/_framework/dotnet..x6rssna6m3.js:7677
    _mono_wasm_invoke_method_bound https://localhost:7071/_framework/dotnet..x6rssna6m3.js:8659
    Ws https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    complete_task https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    Kr https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    promise callback*Kr https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    _bound_js_INTERNAL_http_wasm_get_response_length https://dotnet.generated.invalid/_bound_js_INTERNAL_http_wasm_get_response_length:8
    Ss https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    _mono_wasm_invoke_bound_function https://localhost:7071/_framework/dotnet..x6rssna6m3.js:7672
    _mono_wasm_invoke_method_bound https://localhost:7071/_framework/dotnet..x6rssna6m3.js:8659
    Ws https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    complete_task https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    Kr https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    promise callback*Kr https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    _bound_js_INTERNAL_http_wasm_fetch https://dotnet.generated.invalid/_bound_js_INTERNAL_http_wasm_fetch:14
    Ss https://localhost:7071/_framework/dotnet..x6rssna6m3.js:5
    _mono_wasm_invoke_bound_function https://localhost:7071/_framework/dotnet..x6rssna6m3.js:7672
Radzen.Blazor.js:1381:11

Alternatively link your repo with a sample project that can be run.

Expected behavior
No Exception thrown

Desktop (please complete the following information):

• OS: Windows
• Browser Firefox
• Version 114.0.2 (64-Bit) (latest version)

[akorchev]

Seems to work for me.

Here I am pasting an image from the clipboard.

[DennisOstertag]

Hi thanks for the quick reply.
I did not describe the error very well, im sorry.

@akorchev you are right, the image is loaded.
BUT:

If you open the browser developer console, there is an error thrown (no error shown on the page, no crash etc).
The problem is, the paste listener crashes internally.

Try this:

1. Paste a simple text
   Result:
   The paste handler works -> The text is logged to the event console

2. Paste an image
   Result:
   The paste handler does not work -> Nothing is written to the event console and an error is shown in the browser console.

[akorchev]

The fact that the image is uploaded means that the paste handler ran successfully. I can confirm there wasn't any error in the browser console. Can you try breaking with the debugger in the paste handler to see what the actual problem is?

[DennisOstertag]

The handler does not execute the custom code in the event handler on Paste.
Even if i change the custom OnPaste EventHandler code to the code below, nothing gets logged to the console when pasting an image.

void OnPaste(HtmlEditorPasteEventArgs args)
    {
        console.Log($"Paste");
    }

In your video nothing is written to the event console as well when pasting the image.

[akorchev]

The Paste event isn't raised when a file is pasted. You can check the implementation. I still cannot reproduce any JS error though. Here is how it works with the debugger enabled.

[DennisOstertag]

Seems like some issue with my firefox.
I will close the issue, as this works correct and not raising the paste event on file paste is by design.
@akorchev thanks for the help. Maybe you could add a note to the docs, telling users about this behavior, as it is not really expected.