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",
|
"name": "paarrot",
|
||||||
"version": "4.11.123",
|
"version": "4.11.124",
|
||||||
"description": "Paarrot - A Matrix client based on Cinny",
|
"description": "Paarrot - A Matrix client based on Cinny",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=18.0.0"
|
"node": ">=18.0.0"
|
||||||
|
|||||||
Reference in New Issue
Block a user