Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b260f741d5 | ||
| 7655759bbc | |||
| d30b98c987 |
79
overlay/src/app/hooks/useFilePasteHandler.ts
Normal file
79
overlay/src/app/hooks/useFilePasteHandler.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { useCallback, ClipboardEventHandler } from 'react';
|
||||
import { getDataTransferFiles } from '../utils/dom';
|
||||
import { readClipboardImage, isTauri, isLinux } from '../utils/tauri';
|
||||
|
||||
const filesFromClipboardItems = (data: DataTransfer | null): File[] => {
|
||||
if (!data?.items) return [];
|
||||
|
||||
const files: File[] = [];
|
||||
for (let i = 0; i < data.items.length; i += 1) {
|
||||
const item = data.items[i];
|
||||
if (item.kind !== 'file') continue;
|
||||
const file = item.getAsFile();
|
||||
if (file) files.push(file);
|
||||
}
|
||||
return files;
|
||||
};
|
||||
|
||||
const filesFromHtmlImage = (data: DataTransfer | null): File[] => {
|
||||
const html = data?.getData('text/html');
|
||||
if (!html) return [];
|
||||
|
||||
const match = html.match(/<img[^>]+src=["'](data:image\/[a-zA-Z+]+;base64,[^"']+)["']/i);
|
||||
if (!match?.[1]) return [];
|
||||
|
||||
try {
|
||||
const dataUrl = match[1];
|
||||
const [meta, base64] = dataUrl.split(',');
|
||||
const mime = meta.match(/data:(image\/[a-zA-Z+]+);base64/i)?.[1] ?? 'image/png';
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i += 1) {
|
||||
bytes[i] = binary.charCodeAt(i);
|
||||
}
|
||||
const ext = mime.split('/')[1]?.replace('+xml', '') || 'png';
|
||||
return [new File([bytes], `clipboard-image.${ext}`, { type: mime })];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const getClipboardFiles = (data: DataTransfer | null): File[] => {
|
||||
if (!data) return [];
|
||||
|
||||
const fromFiles = getDataTransferFiles(data);
|
||||
if (fromFiles && fromFiles.length > 0) return fromFiles;
|
||||
|
||||
const fromItems = filesFromClipboardItems(data);
|
||||
if (fromItems.length > 0) return fromItems;
|
||||
|
||||
return filesFromHtmlImage(data);
|
||||
};
|
||||
|
||||
/**
|
||||
* Paste handler for RoomInput. Supports clipboard images via files, DataTransferItem
|
||||
* list, and HTML data-URL fallbacks (common on mobile WebViews).
|
||||
*/
|
||||
export const useFilePasteHandler = (onPaste: (file: File[]) => void): ClipboardEventHandler =>
|
||||
useCallback(
|
||||
async (evt) => {
|
||||
const files = getClipboardFiles(evt.clipboardData);
|
||||
if (files.length > 0) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
onPaste(files);
|
||||
return;
|
||||
}
|
||||
|
||||
// On Linux with Tauri, browser clipboard API doesn't work for images.
|
||||
if (isTauri() && isLinux()) {
|
||||
const clipboardImage = await readClipboardImage();
|
||||
if (clipboardImage) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
onPaste([clipboardImage]);
|
||||
}
|
||||
}
|
||||
},
|
||||
[onPaste]
|
||||
);
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paarrot",
|
||||
"version": "4.11.123",
|
||||
"version": "4.11.124",
|
||||
"description": "Paarrot - A Matrix client based on Cinny",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
|
||||
Reference in New Issue
Block a user