Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
R
react-ag-qeditor
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lib
react-ag-qeditor
Commits
199d09d0
Commit
199d09d0
authored
Jul 14, 2025
by
Яков
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update
parent
3607e730
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
49 additions
and
8 deletions
+49
-8
Image.jsx
src/extensions/Image.jsx
+49
-8
No files found.
src/extensions/Image.jsx
View file @
199d09d0
...
@@ -2,7 +2,7 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
...
@@ -2,7 +2,7 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
import
React
,
{
useEffect
,
useRef
,
useState
,
Fragment
}
from
"react"
;
import
React
,
{
useEffect
,
useRef
,
useState
,
Fragment
}
from
"react"
;
import
TipTapImage
from
"@tiptap/extension-image"
;
import
TipTapImage
from
"@tiptap/extension-image"
;
import
{
Button
,
Modal
,
Input
}
from
'antd'
;
import
{
Button
,
Modal
,
Input
}
from
'antd'
;
import
Icon
,
{
FontSizeOutlined
}
from
"@ant-design/icons"
;
import
{
FontSizeOutlined
}
from
"@ant-design/icons"
;
const
{
TextArea
}
=
Input
;
const
{
TextArea
}
=
Input
;
...
@@ -24,17 +24,26 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...
@@ -24,17 +24,26 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
useEffect
(()
=>
{
useEffect
(()
=>
{
if
(
!
editor
||
!
getPos
)
return
;
if
(
!
editor
||
!
getPos
)
return
;
const
pos
=
getPos
()
+
1
;
let
pos
;
try
{
pos
=
getPos
();
if
(
typeof
pos
!==
'number'
)
return
;
}
catch
(
e
)
{
console
.
warn
(
'getPos() failed:'
,
e
);
return
;
}
const
doc
=
editor
.
state
.
doc
;
const
doc
=
editor
.
state
.
doc
;
if
(
doc
.
nodeSize
>
pos
&&
doc
.
nodeAt
(
pos
)?.
textContent
!==
'
\
u200B'
)
{
if
(
doc
.
nodeSize
>
pos
&&
doc
.
nodeAt
(
pos
)?.
textContent
!==
'
\
u200B'
)
{
editor
.
commands
.
insertContentAt
(
pos
,
{
editor
.
commands
.
insertContentAt
(
pos
+
1
,
{
type
:
'text'
,
type
:
'text'
,
text
:
'
\
u200B'
// Невидимый нулевой пробел
text
:
'
\
u200B'
});
});
}
}
},
[
editor
,
getPos
]);
},
[
editor
,
getPos
]);
// Получаем текущую ширину редактора и доступное пространство
// Получаем текущую ширину редактора и доступное пространство
const
getEditorDimensions
=
()
=>
{
const
getEditorDimensions
=
()
=>
{
const
editorContent
=
editor
?.
options
?.
element
?.
closest
(
'.atma-editor-content'
);
const
editorContent
=
editor
?.
options
?.
element
?.
closest
(
'.atma-editor-content'
);
...
@@ -115,7 +124,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...
@@ -115,7 +124,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
useEffect
(()
=>
{
useEffect
(()
=>
{
const
handleClickOutside
=
(
event
)
=>
{
const
handleClickOutside
=
(
event
)
=>
{
if
(
wrapperRef
.
current
&&
!
wrapperRef
.
current
.
contains
(
event
.
target
)
&&
selected
)
{
if
(
wrapperRef
.
current
&&
!
wrapperRef
.
current
.
contains
(
event
.
target
)
&&
selected
)
{
editor
.
commands
.
setNodeSelection
(
getPos
());
try
{
const
pos
=
getPos
?.()
if
(
typeof
pos
===
'number'
)
{
editor
.
commands
.
setNodeSelection
(
pos
)
}
}
catch
(
e
)
{
console
.
warn
(
'getPos() failed:'
,
e
)
}
// editor.commands.setNodeSelection(getPos());
}
}
};
};
document
.
addEventListener
(
'mousedown'
,
handleClickOutside
);
document
.
addEventListener
(
'mousedown'
,
handleClickOutside
);
...
@@ -192,7 +209,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...
@@ -192,7 +209,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
e
.
stopPropagation
();
e
.
stopPropagation
();
setIsResizing
(
true
);
setIsResizing
(
true
);
editor
.
commands
.
setNodeSelection
(
getPos
());
try
{
const
pos
=
getPos
?.()
if
(
typeof
pos
===
'number'
)
{
editor
.
commands
.
setNodeSelection
(
pos
)
}
}
catch
(
e
)
{
console
.
warn
(
'getPos() failed:'
,
e
)
}
// editor.commands.setNodeSelection(getPos());
const
startWidth
=
node
.
attrs
.
width
||
imgRef
.
current
.
naturalWidth
;
const
startWidth
=
node
.
attrs
.
width
||
imgRef
.
current
.
naturalWidth
;
const
startHeight
=
node
.
attrs
.
height
||
imgRef
.
current
.
naturalHeight
;
const
startHeight
=
node
.
attrs
.
height
||
imgRef
.
current
.
naturalHeight
;
...
@@ -252,7 +277,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...
@@ -252,7 +277,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
window
.
removeEventListener
(
'mousemove'
,
onMouseMove
);
window
.
removeEventListener
(
'mousemove'
,
onMouseMove
);
window
.
removeEventListener
(
'mouseup'
,
onMouseUp
);
window
.
removeEventListener
(
'mouseup'
,
onMouseUp
);
setIsResizing
(
false
);
setIsResizing
(
false
);
editor
.
commands
.
setNodeSelection
(
getPos
());
try
{
const
pos
=
getPos
?.()
if
(
typeof
pos
===
'number'
)
{
editor
.
commands
.
setNodeSelection
(
pos
)
}
}
catch
(
e
)
{
console
.
warn
(
'getPos() failed:'
,
e
)
}
// editor.commands.setNodeSelection(getPos());
editor
.
commands
.
focus
();
editor
.
commands
.
focus
();
};
};
...
@@ -335,7 +368,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
...
@@ -335,7 +368,15 @@ const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, select
ref=
{
wrapperRef
}
ref=
{
wrapperRef
}
onClick=
{
(
e
)
=>
{
onClick=
{
(
e
)
=>
{
e
.
stopPropagation
();
e
.
stopPropagation
();
editor
.
commands
.
setNodeSelection
(
getPos
());
try
{
const
pos
=
getPos
?.()
if
(
typeof
pos
===
'number'
)
{
editor
.
commands
.
setNodeSelection
(
pos
)
}
}
catch
(
e
)
{
console
.
warn
(
'getPos() failed:'
,
e
)
}
// editor.commands.setNodeSelection(getPos());
}
}
}
}
contentEditable=
{
false
}
contentEditable=
{
false
}
data
-
image
-
wrapper
data
-
image
-
wrapper
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment