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

update fix issue

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