Skip to content

R
react-ag-qeditor
Commit a5d39205 by Яков
Options

try fix

parent 0ac96429
Showing with 58 additions and 67 deletions
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.78", "version": "1.0.79",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/extensions/DragAndDrop.js
...@@ -141,94 +141,85 @@ const upload = async (file) => { ...@@ -141,94 +141,85 @@ const upload = async (file) => {
// ] // ]
// } // }
// }); // });
const DragAndDrop = Extension.create({ const DragAndDrop = Extension.create({
name: 'customDragAndDrop', name: 'smartImageUpload',
addProseMirrorPlugins() { addProseMirrorPlugins() {
return [ return [
new Plugin({ new Plugin({
key: new PluginKey('customDragAndDropPlugin'), key: new PluginKey('smartImageUpload'),
props: { props: {
handleDOMEvents: { handleDOMEvents: {
paste: async (view, event) => { paste: (view, event) => {
const clipboardData = event.clipboardData || event.originalEvent.clipboardData; const clipboard = event.clipboardData || event.originalEvent.clipboardData
// 1. Сначала проверяем HTML-вставку (таблицы, форматирование) // Проверяем наличие изображений
const html = clipboardData.getData('text/html'); const hasImages = Array.from(clipboard.items).some(
if (html) { item => item.type.startsWith('image/')
// Если есть HTML - пропускаем для обработки другими расширениями )
return false;
} // Если есть изображения - обрабатываем только их
if (hasImages) {
event.preventDefault()
// Получаем все изображения из буфера
const images = Array.from(clipboard.items)
.filter(item => item.type.startsWith('image/'))
.map(item => item.getAsFile())
.filter(Boolean)
// Загружаем и вставляем каждое изображение
images.forEach(async (file) => {
const imageUrl = await upload(file) // Ваша функция загрузки
view.state.schema.nodes.image.createAndFill(
{ src: imageUrl }
)?.forEach(node => {
const transaction = view.state.tr.replaceSelectionWith(node)
view.dispatch(transaction)
})
})
// 2. Проверяем наличие именно файлов изображений return true
const files = Array.from(clipboardData.files);
const imageFiles = files.filter(file =>
file.type.startsWith('image/') &&
file.size > 0 &&
file.name.match(/\.(jpg|jpeg|png|gif|webp)$/i)
);
// Если нет реальных изображений - пропускаем
if (imageFiles.length === 0) return false;
// 3. Только теперь обрабатываем изображения
event.preventDefault();
const { schema } = view.state;
if (!schema.nodes.image) return false;
try {
for (const file of imageFiles) {
const imageSrc = await upload(file);
const node = schema.nodes.image.create({ src: imageSrc });
const transaction = view.state.tr.replaceSelectionWith(node);
view.dispatch(transaction);
}
return true;
} catch (error) {
console.error('Image upload failed:', error);
return false;
} }
},
drop: async (view, event) => {
// Аналогичная логика для drop
const files = Array.from(event.dataTransfer?.files || []);
const imageFiles = files.filter(file =>
file.type.startsWith('image/') &&
file.size > 0 &&
file.name.match(/\.(jpg|jpeg|png|gif|webp)$/i)
);
if (imageFiles.length === 0) return false; // Для всего остального позволяем Tiptap обрабатывать самостоятельно
return false
event.preventDefault(); },
drop: (view, event) => {
const files = event.dataTransfer?.files
if (files && files.length > 0) {
const imageFiles = Array.from(files).filter(
file => file.type.startsWith('image/')
)
const { schema } = view.state; if (imageFiles.length > 0) {
if (!schema.nodes.image) return false; event.preventDefault()
try { // Получаем позицию для вставки
const coordinates = view.posAtCoords({ const coordinates = view.posAtCoords({
left: event.clientX, left: event.clientX,
top: event.clientY top: event.clientY
}); })
// Загружаем и вставляем изображения
imageFiles.forEach(async (file) => {
const imageUrl = await upload(file) // Ваша функция загрузки
const node = view.state.schema.nodes.image.create(
{ src: imageUrl }
)
const transaction = view.state.tr.insert(coordinates.pos, node)
view.dispatch(transaction)
})
for (const file of imageFiles) { return true
const imageSrc = await upload(file);
const node = schema.nodes.image.create({ src: imageSrc });
const transaction = view.state.tr.insert(coordinates.pos, node);
view.dispatch(transaction);
} }
return true;
} catch (error) {
console.error('Image drop failed:', error);
return false;
} }
return false
} }
} }
} }
}) })
] ]
} }
}); })
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