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