Lexical: Added image insert via image link paste

Specifically added to align with existing TinyMCE behaviour which was
used by some users based upon new editor feedback.
This commit is contained in:
Dan Brown 2025-05-26 18:02:53 +01:00
parent c4f7368c1c
commit a43a1832f5
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
1 changed files with 19 additions and 1 deletions

View File

@ -95,6 +95,21 @@ function handleMediaInsert(data: DataTransfer, context: EditorUiContext): boolea
return handled; return handled;
} }
function handleImageLinkInsert(data: DataTransfer, context: EditorUiContext): boolean {
const regex = /https?:\/\/([^?#]*?)\.(png|jpeg|jpg|gif|webp|bmp|avif)/i
const text = data.getData('text/plain');
if (text && regex.test(text)) {
context.editor.update(() => {
const image = $createImageNode(text);
$insertNodes([image]);
image.select();
});
return true;
}
return false;
}
function createDropListener(context: EditorUiContext): (event: DragEvent) => boolean { function createDropListener(context: EditorUiContext): (event: DragEvent) => boolean {
const editor = context.editor; const editor = context.editor;
return (event: DragEvent): boolean => { return (event: DragEvent): boolean => {
@ -138,7 +153,10 @@ function createPasteListener(context: EditorUiContext): (event: ClipboardEvent)
return false; return false;
} }
const handled = handleMediaInsert(event.clipboardData, context); const handled =
handleImageLinkInsert(event.clipboardData, context) ||
handleMediaInsert(event.clipboardData, context);
if (handled) { if (handled) {
event.preventDefault(); event.preventDefault();
} }