Skip to content

GitLab

Commit 6e5aacd5 authored by Яков's avatar Яков
Browse files

try fix

parent 0f503d93
Show whitespace changes
Inline Side-by-side
package.json
View file @ 6e5aacd5
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.76", "version": "1.0.77",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/extensions/DragAndDrop.js
View file @ 6e5aacd5
...@@ -75,6 +75,73 @@ const upload = async (file) => { ...@@ -75,6 +75,73 @@ const upload = async (file) => {
// } // }
// }); // });
// const DragAndDrop = Extension.create({
// name: 'customDragAndDrop',
// addProseMirrorPlugins() {
// return [
// new Plugin({
// key: new PluginKey('customDragAndDropPlugin'),
// props: {
// handleDOMEvents: {
// async paste(view, event) {
// const items = (event.clipboardData || event.originalEvent.clipboardData).items;
// let hasImages = false;
//
// // Проверяем, есть ли изображения в буфере
// for (let i = 0; i < items.length; i++) {
// if (items[i].type.indexOf('image') !== -1) {
// hasImages = true;
// break;
// }
// }
//
// // Если нет изображений - пропускаем обработку
// if (!hasImages) return false;
//
// // Обрабатываем только изображения
// for (let i = 0; i < items.length; i++) {
// const image = items[i].getAsFile();
// if (!image || !image.type.match('image.*')) continue;
//
// event.preventDefault();
// const imageSrc = await upload(image);
// const node = view.state.schema.nodes.image.create({
// src: imageSrc,
// });
// const transaction = view.state.tr.replaceSelectionWith(node);
// view.dispatch(transaction);
// }
// return true;
// },
// async drop(view, event) {
// const hasFiles = event.dataTransfer.files.length > 0;
// if (!hasFiles) return false;
//
// event.preventDefault();
// const images = event.dataTransfer.files;
// const { schema } = view.state;
// const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
//
// for (let i = 0; i < images.length; i++) {
// if (!images[i].type.match('image.*')) continue;
// const imageSrc = await upload(images[i]);
// if (imageSrc) {
// const node = schema.nodes.image.create({
// src: imageSrc
// });
// const transaction = view.state.tr.insert(coordinates.pos, node);
// view.dispatch(transaction);
// }
// }
// return true;
// }
// }
// }
// })
// ]
// }
// });
const DragAndDrop = Extension.create({ const DragAndDrop = Extension.create({
name: 'customDragAndDrop', name: 'customDragAndDrop',
addProseMirrorPlugins() { addProseMirrorPlugins() {
...@@ -83,57 +150,70 @@ const DragAndDrop = Extension.create({ ...@@ -83,57 +150,70 @@ const DragAndDrop = Extension.create({
key: new PluginKey('customDragAndDropPlugin'), key: new PluginKey('customDragAndDropPlugin'),
props: { props: {
handleDOMEvents: { handleDOMEvents: {
async paste(view, event) { paste: async (view, event) => {
const items = (event.clipboardData || event.originalEvent.clipboardData).items; const items = Array.from(
let hasImages = false; (event.clipboardData || event.originalEvent.clipboardData).items
);
// Проверяем, есть ли изображения в буфере
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
hasImages = true;
break;
}
}
// Если нет изображений - пропускаем обработку // Ищем изображения среди вставленных элементов
if (!hasImages) return false; const imageItems = items.filter(item =>
item.type.startsWith('image/') && item.getAsFile()
);
// Обрабатываем только изображения // Если нет изображений - пропускаем обработку
for (let i = 0; i < items.length; i++) { if (imageItems.length === 0) return false;
const image = items[i].getAsFile();
if (!image || !image.type.match('image.*')) continue;
// Отменяем событие только если нашли изображения
event.preventDefault(); event.preventDefault();
const imageSrc = await upload(image);
const node = view.state.schema.nodes.image.create({ try {
src: imageSrc, const { schema } = view.state;
}); if (!schema.nodes.image) return false;
// Обрабатываем все найденные изображения
for (const item of imageItems) {
const file = item.getAsFile();
if (!file) continue;
const imageSrc = await upload(file);
const node = schema.nodes.image.create({ src: imageSrc });
const transaction = view.state.tr.replaceSelectionWith(node); const transaction = view.state.tr.replaceSelectionWith(node);
view.dispatch(transaction); view.dispatch(transaction);
} }
return true; return true;
} catch (error) {
console.error('Image upload failed:', error);
return false;
}
}, },
async drop(view, event) { drop: async (view, event) => {
const hasFiles = event.dataTransfer.files.length > 0; const files = Array.from(event.dataTransfer?.files || []);
if (!hasFiles) return false; const imageFiles = files.filter(file => file.type.startsWith('image/'));
if (imageFiles.length === 0) return false;
event.preventDefault(); event.preventDefault();
const images = event.dataTransfer.files;
try {
const { schema } = view.state; const { schema } = view.state;
const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY }); if (!schema.nodes.image) return false;
for (let i = 0; i < images.length; i++) { const coordinates = view.posAtCoords({
if (!images[i].type.match('image.*')) continue; left: event.clientX,
const imageSrc = await upload(images[i]); top: event.clientY
if (imageSrc) {
const node = schema.nodes.image.create({
src: imageSrc
}); });
for (const file of imageFiles) {
const imageSrc = await upload(file);
const node = schema.nodes.image.create({ src: imageSrc });
const transaction = view.state.tr.insert(coordinates.pos, node); const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction); view.dispatch(transaction);
} }
}
return true; return true;
} catch (error) {
console.error('Image drop failed:', error);
return false;
}
} }
} }
} }
...@@ -142,3 +222,4 @@ const DragAndDrop = Extension.create({ ...@@ -142,3 +222,4 @@ const DragAndDrop = Extension.create({
} }
}); });
export default DragAndDrop; export default DragAndDrop;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment