Skip to content

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

try fix

parent a5d39205
Showing with 43 additions and 190 deletions
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.79", "version": "1.0.80",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/extensions/DragAndDrop.js
...@@ -12,214 +12,67 @@ const upload = async (file) => { ...@@ -12,214 +12,67 @@ const upload = async (file) => {
return response.data.file_path; return response.data.file_path;
}; };
// const DragAndDrop = Extension.create({
// name: 'customDragAndDrop',
// addProseMirrorPlugins() {
// return [
// new Plugin({
// key: new PluginKey('customDragAndDrop'),
// props: {
// handleDOMEvents: {
// async paste (view, event) {
// let items = (event.clipboardData || event.originalEvent.clipboardData).items;
//
// for (let i = 0; i < items.length; i++){
// const { schema } = view.state;
// const image = items[i].getAsFile();
//
// if (!image) {
// return
// }
//
// event.preventDefault();
// const imageSrc = await upload(image);
//
// const node = schema.nodes.image.create({
// src: imageSrc,
// });
// const transaction = view.state.tr.replaceSelectionWith(node);
// view.dispatch(transaction)
// }
// },
// async drop (view, event) {
// const hasFiles = event.dataTransfer.files.length > 0;
//
// // Другой способ достать текст
// // console.log(event.dataTransfer.items[0].getAsString( (i) => {
// // console.log(i)
// // }));
// // console.log(hasFiles)
//
// if (hasFiles) {
// 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++) {
// 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)
// }
// }
// }
// }
// }
// }
// })
// ]
// }
// });
// 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: 'smartImageUpload', name: 'customDragAndDrop',
addProseMirrorPlugins() { addProseMirrorPlugins() {
return [ return [
new Plugin({ new Plugin({
key: new PluginKey('smartImageUpload'), key: new PluginKey('customDragAndDrop'),
props: { props: {
handleDOMEvents: { handleDOMEvents: {
paste: (view, event) => { async paste (view, event) {
const clipboard = event.clipboardData || event.originalEvent.clipboardData let items = (event.clipboardData || event.originalEvent.clipboardData).items;
// Проверяем наличие изображений
const hasImages = Array.from(clipboard.items).some(
item => item.type.startsWith('image/')
)
// Если есть изображения - обрабатываем только их for (let i = 0; i < items.length; i++){
if (hasImages) { const { schema } = view.state;
event.preventDefault() const image = items[i].getAsFile();
// Получаем все изображения из буфера if (!image) {
const images = Array.from(clipboard.items) return
.filter(item => item.type.startsWith('image/')) }
.map(item => item.getAsFile())
.filter(Boolean)
// Загружаем и вставляем каждое изображение // event.preventDefault();
images.forEach(async (file) => { const imageSrc = await upload(image);
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)
})
})
return true const node = schema.nodes.image.create({
src: imageSrc,
});
const transaction = view.state.tr.replaceSelectionWith(node);
view.dispatch(transaction)
} }
// Для всего остального позволяем Tiptap обрабатывать самостоятельно
return false
}, },
drop: (view, event) => { async drop (view, event) {
const files = event.dataTransfer?.files const hasFiles = event.dataTransfer.files.length > 0;
if (files && files.length > 0) {
const imageFiles = Array.from(files).filter( // Другой способ достать текст
file => file.type.startsWith('image/') // console.log(event.dataTransfer.items[0].getAsString( (i) => {
) // console.log(i)
// }));
if (imageFiles.length > 0) { // console.log(hasFiles)
event.preventDefault()
if (hasFiles) {
// Получаем позицию для вставки // event.preventDefault();
const coordinates = view.posAtCoords({ const images = event.dataTransfer.files;
left: event.clientX, const {schema} = view.state;
top: event.clientY const coordinates = view.posAtCoords({left: event.clientX, top: event.clientY});
})
for (let i = 0; i < images.length; i++) {
// Загружаем и вставляем изображения const imageSrc = await upload(images[i]);
imageFiles.forEach(async (file) => { if (imageSrc) {
const imageUrl = await upload(file) // Ваша функция загрузки const node = schema.nodes.image.create({
const node = view.state.schema.nodes.image.create( src: imageSrc
{ src: imageUrl } });
) 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 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