Skip to content

R
react-ag-qeditor
Commit 8c845e28 by Яков
Options

update iframe and video

parent e1b05324
Showing with 67 additions and 47 deletions
package.json
{
"name": "react-ag-qeditor",
"version": "1.1.24",
"version": "1.1.25",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/extensions/Iframe.js
......@@ -18,8 +18,17 @@ const getStyleForAlign = (align) => {
return style
}
const getOuterAlignStyle = (align) => {
return {
width: '100%',
display: 'block',
textAlign: align === 'center' ? 'center' : align === 'right' ? 'right' : 'left',
}
}
const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected }) => {
const wrapperRef = useRef(null)
const outerRef = useRef(null)
const innerRef = useRef(null)
const iframeRef = useRef(null)
const [showAlignMenu, setShowAlignMenu] = useState(false)
......@@ -36,10 +45,9 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
const paddingRight = parseFloat(editorStyles.paddingRight) || 0
const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight
// важно: стартуем от parentElement, чтобы не схватить wrapperRef.current
const startEl = wrapperRef.current?.parentElement || editorContent
const container =
startEl.closest('li, blockquote, td, p, div') || editorContent
// важно: стартуем от parentElement, чтобы не схватить innerRef.current
const startEl = outerRef.current?.parentElement || editorContent
const container = startEl.closest('li, blockquote, td, p, div') || editorContent
const containerStyles = window.getComputedStyle(container)
const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0
......@@ -49,7 +57,6 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
return { width: containerWidth, availableSpace: availableEditorWidth }
}
const safeUpdateAttributes = (newAttrs) => {
const { width: containerWidth, availableSpace } = getEditorDimensions()
......@@ -57,7 +64,8 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
let height = newAttrs.height ?? node.attrs.height
if (typeof width === 'number' && typeof height === 'number') {
const maxWidth = node.attrs.align === 'center' ? containerWidth : availableSpace
const maxWidth = (newAttrs.align ?? node.attrs.align) === 'center' ? containerWidth : availableSpace
if (width > maxWidth) {
const ratio = maxWidth / width
width = maxWidth
......@@ -117,14 +125,14 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
console.warn('getPos() failed:', err)
}
const startWidth = node.attrs.width || iframeRef.current?.clientWidth || 560
const startHeight = node.attrs.height || iframeRef.current?.clientHeight || 315
const startWidth = node.attrs.width || innerRef.current?.clientWidth || 560
const startHeight = node.attrs.height || innerRef.current?.clientHeight || 315
const aspectRatio = startWidth / startHeight
const startX = e.clientX
const startY = e.clientY
const { width: containerWidth, availableSpace } = getEditorDimensions()
const maxWidth = node.attrs.align === 'center' ? containerWidth : availableSpace
const maxWidth = (node.attrs.align || 'left') === 'center' ? containerWidth : availableSpace
const onMouseMove = (ev) => {
requestAnimationFrame(() => {
......@@ -177,31 +185,24 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
const align = node.attrs.align || 'left'
const wrapperStyle = {
const outerStyle = getOuterAlignStyle(align)
const innerStyle = {
position: 'relative',
display: 'inline-block',
width: node.attrs.width ? `${node.attrs.width}px` : undefined,
height: node.attrs.height ? `${node.attrs.height}px` : undefined,
// align styles inside editor
display: align === 'center' ? 'block' : 'inline-block',
marginLeft: align === 'center' ? 'auto' : undefined,
marginRight: align === 'center' ? 'auto' : undefined,
float: align === 'left' ? 'left' : align === 'right' ? 'right' : 'none',
// чтобы текст красиво обтекал
marginInlineEnd: align === 'left' ? '1rem' : undefined,
marginInlineStart: align === 'right' ? '1rem' : undefined,
}
return (
<NodeViewWrapper
ref={wrapperRef}
ref={outerRef}
as="div"
className="atma-iframe-wrapper"
style={wrapperStyle}
data-align={node.attrs.align || 'left'}
style={outerStyle}
data-align={align}
>
<div ref={innerRef} style={innerStyle}>
<iframe
ref={iframeRef}
src={node.attrs.src}
......@@ -272,21 +273,21 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
display: 'flex',
}}
>
{ALIGN_OPTIONS.map((align) => (
{ALIGN_OPTIONS.map((a) => (
<button
type="button"
key={align}
onClick={() => handleAlign(align)}
key={a}
onClick={() => handleAlign(a)}
style={{
margin: '0 2px',
padding: '10px 8px',
background: node.attrs.align === align ? '#e6f7ff' : 'transparent',
background: align === a ? '#e6f7ff' : 'transparent',
border: '1px solid #d9d9d9',
borderRadius: 2,
cursor: 'pointer',
}}
>
{align}
{a}
</button>
))}
</div>
......@@ -316,6 +317,7 @@ const ResizableIframeView = ({ editor, node, updateAttributes, getPos, selected
</button>
</Fragment>
)}
</div>
</NodeViewWrapper>
)
}
......
src/extensions/Video.js
......@@ -18,8 +18,17 @@ const getStyleForAlign = (align) => {
return style
}
const getOuterAlignStyle = (align) => {
return {
width: '100%',
display: 'block',
textAlign: align === 'center' ? 'center' : align === 'right' ? 'right' : 'left',
}
}
const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }) => {
const wrapperRef = useRef(null)
const outerRef = useRef(null)
const innerRef = useRef(null)
const videoRef = useRef(null)
const [showAlignMenu, setShowAlignMenu] = useState(false)
......@@ -36,7 +45,9 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
const paddingRight = parseFloat(editorStyles.paddingRight) || 0
const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight
const container = wrapperRef.current?.closest('li, blockquote, td, p, div') || editorContent
const startEl = outerRef.current?.parentElement || editorContent
const container = startEl.closest('li, blockquote, td, p, div') || editorContent
const containerStyles = window.getComputedStyle(container)
const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0
const containerPaddingRight = parseFloat(containerStyles.paddingRight) || 0
......@@ -52,7 +63,8 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
let height = newAttrs.height ?? node.attrs.height
if (typeof width === 'number' && typeof height === 'number') {
const maxWidth = node.attrs.align === 'center' ? containerWidth : availableSpace
const maxWidth = (newAttrs.align ?? node.attrs.align) === 'center' ? containerWidth : availableSpace
if (width > maxWidth) {
const ratio = maxWidth / width
width = maxWidth
......@@ -112,14 +124,14 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
console.warn('getPos() failed:', err)
}
const startWidth = node.attrs.width || videoRef.current?.clientWidth || 640
const startHeight = node.attrs.height || videoRef.current?.clientHeight || 360
const startWidth = node.attrs.width || innerRef.current?.clientWidth || 640
const startHeight = node.attrs.height || innerRef.current?.clientHeight || 360
const aspectRatio = startWidth / startHeight
const startX = e.clientX
const startY = e.clientY
const { width: containerWidth, availableSpace } = getEditorDimensions()
const maxWidth = node.attrs.align === 'center' ? containerWidth : availableSpace
const maxWidth = (node.attrs.align || 'left') === 'center' ? containerWidth : availableSpace
const onMouseMove = (ev) => {
requestAnimationFrame(() => {
......@@ -170,21 +182,26 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
}
}
const wrapperStyle = {
const align = node.attrs.align || 'left'
const outerStyle = getOuterAlignStyle(align)
const innerStyle = {
position: 'relative',
display: node.attrs.align === 'center' ? 'block' : 'inline-block',
display: 'inline-block',
width: node.attrs.width ? `${node.attrs.width}px` : undefined,
height: node.attrs.height ? `${node.attrs.height}px` : undefined,
}
return (
<NodeViewWrapper
ref={wrapperRef}
ref={outerRef}
as="div"
className="atma-video-wrapper"
style={wrapperStyle}
data-align={node.attrs.align || 'left'}
style={outerStyle}
data-align={align}
>
<div ref={innerRef} style={innerStyle}>
<video
ref={videoRef}
src={node.attrs.src}
......@@ -254,21 +271,21 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
display: 'flex',
}}
>
{ALIGN_OPTIONS.map((align) => (
{ALIGN_OPTIONS.map((a) => (
<button
type="button"
key={align}
onClick={() => handleAlign(align)}
key={a}
onClick={() => handleAlign(a)}
style={{
margin: '0 2px',
padding: '10px 8px',
background: node.attrs.align === align ? '#e6f7ff' : 'transparent',
background: align === a ? '#e6f7ff' : 'transparent',
border: '1px solid #d9d9d9',
borderRadius: 2,
cursor: 'pointer',
}}
>
{align}
{a}
</button>
))}
</div>
......@@ -298,6 +315,7 @@ const ResizableVideoView = ({ editor, node, updateAttributes, getPos, selected }
</button>
</Fragment>
)}
</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