TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-04 02:32:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dev day #65,5

Browse Source
This commit is contained in:
Tomas Dvorak
2025-10-20 10:40:55 +02:00
parent 9ccca365b3
commit 68e69e00cc
41 changed files with 981 additions and 1376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/common/CustomRichEditor.tsx
+44 -6
View File
@@ -274,11 +274,30 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
// Insert into editor
const quill = quillRef.current?.getEditor();
if (quill) {
const range = quill.getSelection(true);
const index = range ? range.index : quill.getLength();
quill.insertEmbed(index, 'image', res.url, 'user');
quill.setSelection(index + 1, 0);
toast({ title: 'Obrázek vložen', status: 'success', duration: 2000 });
// Ensure editor is focused and ready
quill.focus();
// Use setTimeout to ensure Quill's internal state is ready
setTimeout(() => {
try {
const range = quill.getSelection();
const index = range ? range.index : quill.getLength();
// Insert the image
quill.insertEmbed(index, 'image', res.url, 'api');
// Move cursor after the image
quill.setSelection(index + 1, 0, 'api');
// Force content change to trigger re-render
onChangeRef.current(quill.root.innerHTML);
toast({ title: 'Obrázek vložen', status: 'success', duration: 2000 });
} catch (embedError) {
console.error('Error inserting image:', embedError);
toast({ title: 'Chyba při vkládání obrázku', description: String(embedError), status: 'error' });
}
}, 50);
}
} catch (e: any) {
console.error('Crop and insert error:', e);
@@ -500,6 +519,10 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
img.style.outline = '3px solid #3182ce';
img.style.cursor = 'move';
img.style.boxShadow = '0 4px 12px rgba(49, 130, 206, 0.3)';
// Prevent default drag behavior to avoid duplication
img.setAttribute('draggable', 'false');
createResizeHandle(img);
// Set selected image state and load filters
@@ -639,7 +662,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
currentAlignment = 'right';
}
// Disable default drag behavior to prevent ghost image
// Already set in selectImage, but ensure it's off
target.setAttribute('draggable', 'false');
const onMouseMove = (e: MouseEvent) => {
@@ -709,15 +732,27 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
}
};
// Prevent default drag behavior on images
const handleDragStart = (e: DragEvent) => {
const target = e.target as HTMLElement;
if (target.tagName === 'IMG') {
e.preventDefault();
e.stopPropagation();
return false;
}
};
editor.root.addEventListener('click', handleImageClick);
editor.root.addEventListener('mousedown', handleMouseDown);
editor.root.addEventListener('scroll', handleScroll);
editor.root.addEventListener('dragstart', handleDragStart);
document.addEventListener('keydown', handleKeyDown);
return () => {
editor.root.removeEventListener('click', handleImageClick);
editor.root.removeEventListener('mousedown', handleMouseDown);
editor.root.removeEventListener('scroll', handleScroll);
editor.root.removeEventListener('dragstart', handleDragStart);
document.removeEventListener('keydown', handleKeyDown);
removeResizeHandle();
deselectImage();
@@ -1107,6 +1142,9 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
transition: 'all 0.2s ease',
borderRadius: '4px',
userSelect: 'none',
pointerEvents: 'auto',
WebkitUserDrag: 'none',
userDrag: 'none',
'&:hover': {
opacity: 0.95,
transform: 'scale(1.01)',