Skip to content

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

update redactor

parent 22e80ce5
Showing with 75 additions and 63 deletions
package.json
{
"name": "react-ag-qeditor",
"version": "1.1.1",
"version": "1.1.2",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/extensions/Image.jsx
......@@ -15,32 +15,37 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
// Получаем текущую ширину редактора и доступное пространство
const getEditorDimensions = () => {
const editorElement = editor?.options?.element?.closest('.atma-editor-content');
if (!editorElement) return { width: Infinity, availableSpace: Infinity };
const editorWidth = editorElement.clientWidth;
const imgElement = imgRef.current;
let availableSpace = editorWidth;
if (imgElement) {
const imgRect = imgElement.getBoundingClientRect();
const editorRect = editorElement.getBoundingClientRect();
if (node.attrs.align === 'center') {
const leftSpace = imgRect.left - editorRect.left;
const rightSpace = editorRect.right - imgRect.right;
availableSpace = Math.min(editorWidth, (leftSpace + rightSpace + imgRect.width));
console.log(leftSpace, rightSpace, availableSpace);
} else if (node.attrs.align === 'right') {
availableSpace = imgRect.left - editorRect.left + node.attrs.width;
} else if (node.attrs.align === 'left' || node.attrs.align === 'text') {
availableSpace = editorRect.right - imgRect.left;
}
const editorContent = editor?.options?.element?.closest('.atma-editor-content');
if (!editorContent) return { width: Infinity, availableSpace: Infinity };
const fullEditorWidth = editorContent.clientWidth;
const editorStyles = window.getComputedStyle(editorContent);
const paddingLeft = parseFloat(editorStyles.paddingLeft) || 0;
const paddingRight = parseFloat(editorStyles.paddingRight) || 0;
const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight;
let container;
// при center — всегда редактор
if (node.attrs.align === 'center') {
container = editorContent;
} else {
// при других выравниваниях — ближайший блок
container = imgRef.current?.closest('li, blockquote, td, p, div') || editorContent;
}
return { width: editorWidth, availableSpace };
const containerStyles = window.getComputedStyle(container);
const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0;
const containerPaddingRight = parseFloat(containerStyles.paddingRight) || 0;
const containerWidth = container.clientWidth - containerPaddingLeft - containerPaddingRight;
return {
width: containerWidth, // текущая ширина контейнера
availableSpace: availableEditorWidth // фиксированная доступная ширина
};
};
// Безопасное обновление атрибутов с учетом выравнивания и границ
const safeUpdateAttributes = (newAttrs) => {
const { width: editorWidth, availableSpace } = getEditorDimensions();
......@@ -172,51 +177,56 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
const aspectRatio = startWidth / startHeight;
const startX = e.clientX;
const startY = e.clientY;
const { width: editorWidth, availableSpace } = getEditorDimensions();
const { width: initialEditorWidth, availableSpace: initialAvailableSpace } = getEditorDimensions();
const onMouseMove = (e) => {
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
let newWidth, newHeight;
const maxWidth = node.attrs.align === 'center' ? editorWidth : availableSpace;
if (node.attrs.align === 'center') {
if (direction.includes('n') || direction.includes('s')) {
const scale = direction.includes('s') ? 1 : -1;
newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
newWidth = Math.min(Math.round(newHeight * aspectRatio), maxWidth);
newHeight = Math.round(newWidth / aspectRatio);
} else {
const scale = direction.includes('e') ? 1 : -1;
newWidth = Math.min(
Math.max(startWidth + deltaX * scale, MIN_WIDTH),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
}
} else {
if (direction.includes('e') || direction.includes('w')) {
const scale = direction.includes('e') ? 1 : -1;
newWidth = Math.min(
Math.max(startWidth + deltaX * scale, MIN_WIDTH),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
requestAnimationFrame(() => {
const maxWidth = node.attrs.align === 'center' ? initialEditorWidth : initialAvailableSpace;
console.log(maxWidth);
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
let newWidth, newHeight;
if (node.attrs.align === 'center') {
if (direction.includes('n') || direction.includes('s')) {
const scale = direction.includes('s') ? 1 : -1;
newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
newWidth = Math.min(Math.round(newHeight * aspectRatio), maxWidth);
newHeight = Math.round(newWidth / aspectRatio);
} else {
const scale = direction.includes('e') ? 1 : -1;
newWidth = Math.min(
Math.max(startWidth + deltaX * scale, MIN_WIDTH),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
}
} else {
const scale = direction.includes('s') ? 1 : -1;
newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
newWidth = Math.min(
Math.round(newHeight * aspectRatio),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
if (direction.includes('e') || direction.includes('w')) {
const scale = direction.includes('e') ? 1 : -1;
newWidth = Math.min(
Math.max(startWidth + deltaX * scale, MIN_WIDTH),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
} else {
const scale = direction.includes('s') ? 1 : -1;
newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
newWidth = Math.min(
Math.round(newHeight * aspectRatio),
maxWidth
);
newHeight = Math.round(newWidth / aspectRatio);
}
}
}
safeUpdateAttributes({ width: newWidth, height: newHeight });
safeUpdateAttributes({ width: newWidth, height: newHeight });
});
};
const onMouseUp = () => {
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
......@@ -231,8 +241,10 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
// Изменение выравнивания с автоматическим масштабированием
const handleAlign = (align) => {
safeUpdateAttributes({ align });
safeUpdateAttributes({ align });
safeUpdateAttributes({ align }); // первый вызов
setTimeout(() => {
safeUpdateAttributes({ align }); // повторный вызов с обновлёнными размерами
}, 50);
setShowAlignMenu(false);
editor.commands.focus();
};
......
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