Feature: Insert the copied image from the browser as a file

[levensta]

Description

There are several ways to copy and paste an image. You can copy it from the file system or copy it from the browser using the context menu. When copying an image from a browser, the image is not pasted as a file. Instead, an HTML import is performed

copy-from-browser.mov

This happens because when you copy an image from a web page via the context menu, the browser contains two mime types in the clipboard at the same time: text/html and the file type

evetFiles function returns false for the hasTextContent flag because DataTransfer has text/html type and the DRAG_DROP_PASTE dispatch is skipped https://github.com/facebook/lexical/blob/main/packages/lexical-rich-text/src/index.ts#L1292-L1298

Impact

The current limitation prevents images copied from the browser from being pasted as a file, even though the clipboard contains a file. The DRAG_DROP_PASTE command handler will never trigger. Pasting via HTML may not be desirable if the user wants to strictly control the sources of images

To support this scenario, you have to override the PASTE_COMMAND, although it would be nice to have this kind of paste built-in. Alternatively, the eventFiles function could be parameterized so that overriding PASTE_COMMAND in a custom editor doesn't duplicate the existing logic, but reuses it

[etrepum]

What do you mean by this:

Alternatively, the eventFiles function could be parameterized so that overriding PASTE_COMMAND in a custom editor doesn't duplicate the existing logic, but reuses it

I think this is sufficient to override the hasTextContent heuristic:

    editor.registerCommand(
      PASTE_COMMAND,
      event => {
        const [, files] = eventFiles(event);
        const dataTransfer = 'dataTransfer' in event && event.dataTransfer || 'clipboardData' in event && event.clipboardData;
        const hasTextContent = dataTransfer && dataTransfer.types.getData('text/plain');
        if (files.length > 0 && !hasTextContent) {
          editor.dispatchCommand(DRAG_DROP_PASTE, files);
          return true;
        }
        return false;
      },
      COMMAND_PRIORITY_BEFORE_EDITOR,
    )

[levensta]

What I mean is that if a new parameter is passed, eventFiles might return false for hasTextContent if the clipboard contains a file and text/html. Or if the clipboard contains a file and the text/html content consists solely of an <img> tag.

Basically, something that would allow us to use less code when overriding the PASTE_COMMAND

    editor.registerCommand(
      PASTE_COMMAND,
      event => {
-       const [, files] = eventFiles(event);
+       const [, files] = eventFiles(event, true);
-       const dataTransfer = 'dataTransfer' in event && event.dataTransfer || 'clipboardData' in event && event.clipboardData;
-       const hasTextContent = dataTransfer && dataTransfer.types.getData('text/plain');
        if (files.length > 0 && !hasTextContent) {
          editor.dispatchCommand(DRAG_DROP_PASTE, files);
          return true;
        }
        return false;
      },
      COMMAND_PRIORITY_BEFORE_EDITOR,
    )

Ideally, it would be best not to override anything and to have a ready-made handler for files copied from the browser

[etrepum]

Well the thing is that in some cases you would prefer to have the HTML import, and in others you'd prefer to have the file. The playground for example doesn't have any file upload capability so whenever feasible you probably do want to keep the remote source URLs rather than encode the file as a data URL. It might make sense to have a guard argument given the dataTransfer to decide if the files should be considered or not, rather than a boolean, e.g.

const [, files, hasTextContent] = eventFiles(event, (dataTransfer) => dataTransfer.types.getData('text/plain') !== '');

Where the default would be equivalent to

const [, files, hasTextContent] = eventFiles(event, ({types}) => types.includes('text/html') || types.includes('text/plain'));

Maybe that function could be configured in RichTextExtension with a backwards compatible default to avoid the need to override the command