Commit 5e84f9a6 authored by Яков's avatar Яков
Browse files

update fix issue

parent 89b12f49
{
"name": "react-ag-qeditor",
"version": "1.1.52",
"version": "1.1.53",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
......@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState, Fragment } from "react";
import TipTapImage from "@tiptap/extension-image";
import { Button, Modal, Input, Typography } from 'antd';
import {FontSizeOutlined} from "@ant-design/icons";
import { isMobile } from 'react-device-detect';
const { TextArea } = Input;
const {Text} = Typography;
......@@ -378,22 +379,20 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
const { align, wrap, width } = node.attrs;
const w = width ? `${width}px` : 'auto';
const sharedMargin = { marginTop: '0.5rem', marginBottom: '0.5rem' };
const noSelect = { userSelect: 'none', WebkitUserSelect: 'none', touchAction: 'manipulation' };
if (align === 'center') {
// Используем float:left+width:100% чтобы не создавать block-in-inline внутри <p>
// (иначе параграф получает лишнюю высоту). textAlign:center центрирует внутренний inline-block.
return {
...sharedMargin, lineHeight: 0,
...sharedMargin, ...noSelect, lineHeight: 0,
display: 'inline-block', float: 'left', clear: 'both',
width: '100%', textAlign: 'center',
};
}
if (!wrap) {
// no-wrap: float:left + width:100% — занимает всю строку, текст не может встать рядом.
// Используем float (а не display:block) чтобы layout-алгоритм был одинаковым
// с wrap=true и не было прыжка при переключении обтекания.
return {
...sharedMargin, lineHeight: 0,
...sharedMargin, ...noSelect, lineHeight: 0,
display: 'inline-block',
float: 'left',
clear: 'both',
......@@ -401,9 +400,8 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...(align === 'right' ? { textAlign: 'right' } : { textAlign: 'left' }),
};
}
// wrap: true — узкий float с шириной картинки, текст обтекает
return {
...sharedMargin, lineHeight: 0,
...sharedMargin, ...noSelect, lineHeight: 0,
display: 'inline-block',
float: align === 'left' ? 'left' : 'right',
...(align === 'left' ? { marginRight: '1rem' } : { marginLeft: '1rem' }),
......@@ -423,6 +421,8 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
outline: (selected || isResizing) ? `1px dashed ${BORDER_COLOR}` : 'none',
width: w,
maxWidth: '100%',
userSelect: 'none',
WebkitUserSelect: 'none',
};
if (align === 'center') {
return { ...base, display: 'block', marginLeft: 'auto', marginRight: 'auto',
......@@ -463,7 +463,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
title={node.attrs.title || undefined}
data-node-id={node.attrs['data-node-id'] || undefined}
ref={imgRef}
draggable={true}
draggable={!isMobile}
style={getImageStyle()}
/>
{node.attrs.frontAlt?.length > 0 && (
......@@ -522,7 +522,7 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
}}
>×</Button>
)}
{(selected || isResizing) && (
{(selected || isResizing) && !isMobile && (
<Fragment>
{['nw', 'ne', 'sw', 'se'].map(dir => (
<div
......@@ -648,7 +648,12 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
// поэтому при смене выравнивания React не размонтирует img и не перезагружает его.
return (
<NodeViewWrapper as="div" style={getOuterStyle()} contentEditable={false} data-image-wrapper>
<div ref={wrapperRef} style={getInnerStyle()} onClick={handleNodeClick}>
<div
ref={wrapperRef}
style={getInnerStyle()}
onClick={handleNodeClick}
onTouchEnd={(e) => { e.preventDefault(); handleNodeClick(e); }}
>
{imageContent}
</div>
</NodeViewWrapper>
......
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