fix(web-pkg): embed pasted images in rich text editors

[AlexAndBear]

Description

Copying an image (e.g. from the preview app) and pasting it into a note (.ocnote) or markdown file didn't work.

The image file handler of the rich text editors only handled dropped files, so the pasted image file was ignored. ProseMirror then fell back to the text/html clipboard payload, which is <img src="blob:...">. The preview app renders images via object urls, so the inserted image pointed to a blob url that is only valid in the page that created it and breaks after a reload.

The image file handler now also handles pasted image files: they get embedded as data url at the cursor position, the same way dropped images are. The paste event is consumed so the blob image from the html payload isn't inserted on top of it. Only known image mime types are handled, so pasting other copied files keeps the default behavior.

Related Issue

• Fixes: no issue, found while testing the editor

How Has This Been Tested?

• test environment: local dev setup (Chrome), unit tests via Vitest
• test case 1: copy an image in the preview app and paste it into an .ocnote file → image is embedded and survives a reload
• test case 2: copy an image in the preview app and paste it into a .md file → image is embedded as data url
• test case 3: unit tests for pasting image files, pasting non-image files and pasting into read-only editors

Types of changes

• Bugfix
• Enhancement (a change that doesn't break existing code or deployments)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)