@qwanyx/ai-editor 1.1.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/AIEditor.js +37 -34
- package/dist/components/AIToolbar.js +13 -7
- package/dist/components/EditorToolbar.js +85 -82
- package/dist/components/MarkdownPreview.js +8 -5
- package/dist/components/PromptModal.js +13 -10
- package/dist/components/RichTextEditor.js +91 -55
- package/dist/components/RichTextViewer.d.ts +6 -0
- package/dist/components/RichTextViewer.d.ts.map +1 -0
- package/dist/components/RichTextViewer.js +161 -0
- package/dist/hooks/useAIEditor.js +17 -14
- package/dist/hooks/useSelection.js +9 -6
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +33 -9
- package/dist/nodes/ImageLinkNode.js +17 -10
- package/dist/nodes/ImageNode.js +66 -60
- package/dist/nodes/LinkNode.js +13 -6
- package/dist/plugins/ImageLinkPlugin.js +26 -23
- package/dist/plugins/InsertObjectPlugin.js +74 -70
- package/dist/plugins/LinkPlugin.js +16 -13
- package/package.json +2 -3
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.ImageLinkNode = void 0;
|
|
5
|
+
exports.$createImageLinkNode = $createImageLinkNode;
|
|
6
|
+
exports.$isImageLinkNode = $isImageLinkNode;
|
|
7
|
+
exports.$wrapSelectionInImageLink = $wrapSelectionInImageLink;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const lexical_1 = require("lexical");
|
|
4
10
|
// Fullscreen modal component for the image link
|
|
5
11
|
function ImageLinkFullscreen({ url, altText, onClose, }) {
|
|
6
|
-
return (
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
7
13
|
position: 'fixed',
|
|
8
14
|
inset: 0,
|
|
9
15
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
@@ -12,7 +18,7 @@ function ImageLinkFullscreen({ url, altText, onClose, }) {
|
|
|
12
18
|
justifyContent: 'center',
|
|
13
19
|
zIndex: 100000,
|
|
14
20
|
cursor: 'pointer',
|
|
15
|
-
}, onClick: onClose, children: [
|
|
21
|
+
}, onClick: onClose, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
|
|
16
22
|
position: 'absolute',
|
|
17
23
|
top: '20px',
|
|
18
24
|
right: '20px',
|
|
@@ -26,7 +32,7 @@ function ImageLinkFullscreen({ url, altText, onClose, }) {
|
|
|
26
32
|
alignItems: 'center',
|
|
27
33
|
justifyContent: 'center',
|
|
28
34
|
transition: 'background-color 0.2s',
|
|
29
|
-
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer", children:
|
|
35
|
+
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px', color: 'white' }, children: "close" }) }), (0, jsx_runtime_1.jsx)("img", { src: url, alt: altText || '', style: {
|
|
30
36
|
maxWidth: '95vw',
|
|
31
37
|
maxHeight: '95vh',
|
|
32
38
|
objectFit: 'contain',
|
|
@@ -34,7 +40,7 @@ function ImageLinkFullscreen({ url, altText, onClose, }) {
|
|
|
34
40
|
boxShadow: '0 25px 50px rgba(0,0,0,0.5)',
|
|
35
41
|
}, onClick: (e) => e.stopPropagation() })] }));
|
|
36
42
|
}
|
|
37
|
-
|
|
43
|
+
class ImageLinkNode extends lexical_1.ElementNode {
|
|
38
44
|
static getType() {
|
|
39
45
|
return 'image-link';
|
|
40
46
|
}
|
|
@@ -137,14 +143,15 @@ export class ImageLinkNode extends ElementNode {
|
|
|
137
143
|
return true;
|
|
138
144
|
}
|
|
139
145
|
}
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
exports.ImageLinkNode = ImageLinkNode;
|
|
147
|
+
function $createImageLinkNode(payload) {
|
|
148
|
+
return (0, lexical_1.$applyNodeReplacement)(new ImageLinkNode(payload.url, payload.altText, payload.copyright, payload.photographer, payload.comment));
|
|
142
149
|
}
|
|
143
|
-
|
|
150
|
+
function $isImageLinkNode(node) {
|
|
144
151
|
return node instanceof ImageLinkNode;
|
|
145
152
|
}
|
|
146
153
|
// Helper to wrap selection in an image link
|
|
147
|
-
|
|
154
|
+
function $wrapSelectionInImageLink(selection, url, altText, copyright, photographer, comment) {
|
|
148
155
|
const nodes = selection.extract();
|
|
149
156
|
const imageLinkNode = $createImageLinkNode({ url, altText, copyright, photographer, comment });
|
|
150
157
|
if (nodes.length > 0) {
|
package/dist/nodes/ImageNode.js
CHANGED
|
@@ -1,38 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.ImageNode = void 0;
|
|
5
|
+
exports.$createImageNode = $createImageNode;
|
|
6
|
+
exports.$isImageNode = $isImageNode;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const lexical_1 = require("lexical");
|
|
9
|
+
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
|
|
10
|
+
const react_1 = require("react");
|
|
6
11
|
function ImageComponent({ src, altText, width, height, copyright: initialCopyright, photographer: initialPhotographer, comment: initialComment, float: initialFloat, nodeKey, }) {
|
|
7
|
-
const [editor] = useLexicalComposerContext();
|
|
8
|
-
const containerRef = useRef(null);
|
|
9
|
-
const imageRef = useRef(null);
|
|
10
|
-
const [isSelected, setIsSelected] = useState(false);
|
|
11
|
-
const [isResizing, setIsResizing] = useState(false);
|
|
12
|
-
const [showMetadataEditor, setShowMetadataEditor] = useState(false);
|
|
13
|
-
const [showFullscreen, setShowFullscreen] = useState(false);
|
|
14
|
-
const [currentWidth, setCurrentWidth] = useState(width);
|
|
12
|
+
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
|
|
13
|
+
const containerRef = (0, react_1.useRef)(null);
|
|
14
|
+
const imageRef = (0, react_1.useRef)(null);
|
|
15
|
+
const [isSelected, setIsSelected] = (0, react_1.useState)(false);
|
|
16
|
+
const [isResizing, setIsResizing] = (0, react_1.useState)(false);
|
|
17
|
+
const [showMetadataEditor, setShowMetadataEditor] = (0, react_1.useState)(false);
|
|
18
|
+
const [showFullscreen, setShowFullscreen] = (0, react_1.useState)(false);
|
|
19
|
+
const [currentWidth, setCurrentWidth] = (0, react_1.useState)(width);
|
|
15
20
|
// Local state for display (updated after save)
|
|
16
|
-
const [displayCopyright, setDisplayCopyright] = useState(initialCopyright);
|
|
17
|
-
const [displayPhotographer, setDisplayPhotographer] = useState(initialPhotographer);
|
|
18
|
-
const [displayComment, setDisplayComment] = useState(initialComment);
|
|
19
|
-
const [displayFloat, setDisplayFloat] = useState(initialFloat || 'none');
|
|
21
|
+
const [displayCopyright, setDisplayCopyright] = (0, react_1.useState)(initialCopyright);
|
|
22
|
+
const [displayPhotographer, setDisplayPhotographer] = (0, react_1.useState)(initialPhotographer);
|
|
23
|
+
const [displayComment, setDisplayComment] = (0, react_1.useState)(initialComment);
|
|
24
|
+
const [displayFloat, setDisplayFloat] = (0, react_1.useState)(initialFloat || 'none');
|
|
20
25
|
// Edit form state
|
|
21
|
-
const [editSrc, setEditSrc] = useState('');
|
|
22
|
-
const [editAltText, setEditAltText] = useState('');
|
|
23
|
-
const [editCopyright, setEditCopyright] = useState('');
|
|
24
|
-
const [editPhotographer, setEditPhotographer] = useState('');
|
|
25
|
-
const [editComment, setEditComment] = useState('');
|
|
26
|
-
const [editFloat, setEditFloat] = useState('none');
|
|
27
|
-
const startX = useRef(0);
|
|
28
|
-
const startWidth = useRef(0);
|
|
26
|
+
const [editSrc, setEditSrc] = (0, react_1.useState)('');
|
|
27
|
+
const [editAltText, setEditAltText] = (0, react_1.useState)('');
|
|
28
|
+
const [editCopyright, setEditCopyright] = (0, react_1.useState)('');
|
|
29
|
+
const [editPhotographer, setEditPhotographer] = (0, react_1.useState)('');
|
|
30
|
+
const [editComment, setEditComment] = (0, react_1.useState)('');
|
|
31
|
+
const [editFloat, setEditFloat] = (0, react_1.useState)('none');
|
|
32
|
+
const startX = (0, react_1.useRef)(0);
|
|
33
|
+
const startWidth = (0, react_1.useRef)(0);
|
|
29
34
|
// Handle click to select
|
|
30
|
-
const handleClick = useCallback((e) => {
|
|
35
|
+
const handleClick = (0, react_1.useCallback)((e) => {
|
|
31
36
|
e.stopPropagation();
|
|
32
37
|
setIsSelected(true);
|
|
33
38
|
}, []);
|
|
34
39
|
// Click outside to deselect
|
|
35
|
-
useEffect(() => {
|
|
40
|
+
(0, react_1.useEffect)(() => {
|
|
36
41
|
const handleClickOutside = (e) => {
|
|
37
42
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
38
43
|
setIsSelected(false);
|
|
@@ -42,7 +47,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
42
47
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
43
48
|
}, []);
|
|
44
49
|
// Handle resize start
|
|
45
|
-
const handleResizeStart = useCallback((e) => {
|
|
50
|
+
const handleResizeStart = (0, react_1.useCallback)((e) => {
|
|
46
51
|
e.preventDefault();
|
|
47
52
|
e.stopPropagation();
|
|
48
53
|
setIsResizing(true);
|
|
@@ -50,7 +55,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
50
55
|
startWidth.current = imageRef.current?.offsetWidth || currentWidth || 300;
|
|
51
56
|
}, [currentWidth]);
|
|
52
57
|
// Handle resize move
|
|
53
|
-
useEffect(() => {
|
|
58
|
+
(0, react_1.useEffect)(() => {
|
|
54
59
|
if (!isResizing)
|
|
55
60
|
return;
|
|
56
61
|
const handleMouseMove = (e) => {
|
|
@@ -61,7 +66,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
61
66
|
const handleMouseUp = () => {
|
|
62
67
|
setIsResizing(false);
|
|
63
68
|
editor.update(() => {
|
|
64
|
-
const node =
|
|
69
|
+
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
|
|
65
70
|
if (node && $isImageNode(node)) {
|
|
66
71
|
node.setWidth(currentWidth);
|
|
67
72
|
}
|
|
@@ -75,13 +80,13 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
75
80
|
};
|
|
76
81
|
}, [isResizing, editor, nodeKey, currentWidth]);
|
|
77
82
|
// Open metadata editor
|
|
78
|
-
const openMetadataEditor = useCallback(() => {
|
|
83
|
+
const openMetadataEditor = (0, react_1.useCallback)(() => {
|
|
79
84
|
// Use props for src/altText (always current)
|
|
80
85
|
setEditSrc(src);
|
|
81
86
|
setEditAltText(altText);
|
|
82
87
|
// Read other values from node
|
|
83
88
|
editor.getEditorState().read(() => {
|
|
84
|
-
const node =
|
|
89
|
+
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
|
|
85
90
|
if (node && $isImageNode(node)) {
|
|
86
91
|
setEditCopyright(node.getCopyright() || '');
|
|
87
92
|
setEditPhotographer(node.getPhotographer() || '');
|
|
@@ -92,9 +97,9 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
92
97
|
setShowMetadataEditor(true);
|
|
93
98
|
}, [editor, nodeKey, src, altText]);
|
|
94
99
|
// Save metadata
|
|
95
|
-
const saveMetadata = useCallback(() => {
|
|
100
|
+
const saveMetadata = (0, react_1.useCallback)(() => {
|
|
96
101
|
editor.update(() => {
|
|
97
|
-
const node =
|
|
102
|
+
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
|
|
98
103
|
if (node && $isImageNode(node)) {
|
|
99
104
|
if (editSrc)
|
|
100
105
|
node.setSrc(editSrc);
|
|
@@ -122,11 +127,11 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
122
127
|
}
|
|
123
128
|
return { margin: '8px 0' };
|
|
124
129
|
};
|
|
125
|
-
return (
|
|
130
|
+
return ((0, jsx_runtime_1.jsxs)("span", { ref: containerRef, style: {
|
|
126
131
|
display: 'inline-block',
|
|
127
132
|
position: 'relative',
|
|
128
133
|
...getFloatStyles(),
|
|
129
|
-
}, onClick: handleClick, children: [
|
|
134
|
+
}, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("img", { ref: imageRef, src: src, alt: altText, title: displayComment || undefined, style: {
|
|
130
135
|
maxWidth: '100%',
|
|
131
136
|
height: 'auto',
|
|
132
137
|
width: currentWidth ? `${currentWidth}px` : 'auto',
|
|
@@ -134,7 +139,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
134
139
|
borderRadius: '4px',
|
|
135
140
|
outline: isSelected ? '2px solid #3b82f6' : 'none',
|
|
136
141
|
cursor: 'pointer',
|
|
137
|
-
}, draggable: false }), (displayCopyright || displayPhotographer) && (
|
|
142
|
+
}, draggable: false }), (displayCopyright || displayPhotographer) && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
138
143
|
position: 'absolute',
|
|
139
144
|
bottom: '6px',
|
|
140
145
|
left: '6px',
|
|
@@ -144,7 +149,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
144
149
|
flexDirection: 'column',
|
|
145
150
|
gap: '2px',
|
|
146
151
|
textShadow: '0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5)',
|
|
147
|
-
}, children: [displayCopyright && (
|
|
152
|
+
}, children: [displayCopyright && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "copyright" }), displayCopyright] })), displayPhotographer && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "photo_camera" }), displayPhotographer] }))] })), isSelected && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
148
153
|
e.stopPropagation();
|
|
149
154
|
openMetadataEditor();
|
|
150
155
|
}, style: {
|
|
@@ -161,7 +166,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
161
166
|
alignItems: 'center',
|
|
162
167
|
justifyContent: 'center',
|
|
163
168
|
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
164
|
-
}, title: "Modifier les m\u00E9tadonn\u00E9es", children:
|
|
169
|
+
}, title: "Modifier les m\u00E9tadonn\u00E9es", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "edit" }) })), isSelected && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
165
170
|
e.stopPropagation();
|
|
166
171
|
setShowFullscreen(true);
|
|
167
172
|
}, style: {
|
|
@@ -178,7 +183,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
178
183
|
alignItems: 'center',
|
|
179
184
|
justifyContent: 'center',
|
|
180
185
|
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
181
|
-
}, title: "Voir en plein \u00E9cran", children:
|
|
186
|
+
}, title: "Voir en plein \u00E9cran", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "fullscreen" }) })), isSelected && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: handleResizeStart, style: {
|
|
182
187
|
position: 'absolute',
|
|
183
188
|
right: '-6px',
|
|
184
189
|
bottom: '-6px',
|
|
@@ -189,7 +194,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
189
194
|
cursor: 'se-resize',
|
|
190
195
|
border: '2px solid white',
|
|
191
196
|
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
192
|
-
} })), showMetadataEditor && (
|
|
197
|
+
} })), showMetadataEditor && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
193
198
|
position: 'fixed',
|
|
194
199
|
inset: 0,
|
|
195
200
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
@@ -197,14 +202,14 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
197
202
|
alignItems: 'center',
|
|
198
203
|
justifyContent: 'center',
|
|
199
204
|
zIndex: 100000,
|
|
200
|
-
}, onClick: () => setShowMetadataEditor(false), children:
|
|
205
|
+
}, onClick: () => setShowMetadataEditor(false), children: (0, jsx_runtime_1.jsxs)("div", { onClick: (e) => e.stopPropagation(), style: {
|
|
201
206
|
backgroundColor: 'white',
|
|
202
207
|
borderRadius: '12px',
|
|
203
208
|
padding: '24px',
|
|
204
209
|
boxShadow: '0 25px 50px rgba(0,0,0,0.25)',
|
|
205
210
|
minWidth: '360px',
|
|
206
211
|
maxWidth: '450px',
|
|
207
|
-
}, children: [
|
|
212
|
+
}, children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 20px 0', fontSize: '18px', fontWeight: 600, color: '#111827' }, children: "Propri\u00E9t\u00E9s de l'image" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "link" }), "URL de l'image"] }), (0, jsx_runtime_1.jsx)("input", { type: "url", value: editSrc, onChange: (e) => setEditSrc(e.target.value), placeholder: "https://example.com/image.jpg", style: {
|
|
208
213
|
width: '100%',
|
|
209
214
|
padding: '10px 12px',
|
|
210
215
|
border: '1px solid #d1d5db',
|
|
@@ -212,7 +217,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
212
217
|
fontSize: '14px',
|
|
213
218
|
boxSizing: 'border-box',
|
|
214
219
|
outline: 'none',
|
|
215
|
-
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }),
|
|
220
|
+
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "description" }), "Texte alternatif"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: editAltText, onChange: (e) => setEditAltText(e.target.value), placeholder: "Description de l'image", style: {
|
|
216
221
|
width: '100%',
|
|
217
222
|
padding: '10px 12px',
|
|
218
223
|
border: '1px solid #d1d5db',
|
|
@@ -220,7 +225,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
220
225
|
fontSize: '14px',
|
|
221
226
|
boxSizing: 'border-box',
|
|
222
227
|
outline: 'none',
|
|
223
|
-
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }),
|
|
228
|
+
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), (0, jsx_runtime_1.jsx)("hr", { style: { border: 'none', borderTop: '1px solid #e5e7eb', margin: '20px 0' } }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "photo_camera" }), "Photographe"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: editPhotographer, onChange: (e) => setEditPhotographer(e.target.value), placeholder: "Nom du photographe", autoFocus: true, style: {
|
|
224
229
|
width: '100%',
|
|
225
230
|
padding: '10px 12px',
|
|
226
231
|
border: '1px solid #d1d5db',
|
|
@@ -228,7 +233,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
228
233
|
fontSize: '14px',
|
|
229
234
|
boxSizing: 'border-box',
|
|
230
235
|
outline: 'none',
|
|
231
|
-
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }),
|
|
236
|
+
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "copyright" }), "Copyright"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: editCopyright, onChange: (e) => setEditCopyright(e.target.value), placeholder: "Ex: \u00A9 2024 Nom", style: {
|
|
232
237
|
width: '100%',
|
|
233
238
|
padding: '10px 12px',
|
|
234
239
|
border: '1px solid #d1d5db',
|
|
@@ -236,7 +241,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
236
241
|
fontSize: '14px',
|
|
237
242
|
boxSizing: 'border-box',
|
|
238
243
|
outline: 'none',
|
|
239
|
-
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }),
|
|
244
|
+
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '16px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "chat" }), "Commentaire (tooltip)"] }), (0, jsx_runtime_1.jsx)("textarea", { value: editComment, onChange: (e) => setEditComment(e.target.value), placeholder: "Commentaire affich\u00E9 au survol de l'image", rows: 3, style: {
|
|
240
245
|
width: '100%',
|
|
241
246
|
padding: '10px 12px',
|
|
242
247
|
border: '1px solid #d1d5db',
|
|
@@ -246,7 +251,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
246
251
|
boxSizing: 'border-box',
|
|
247
252
|
outline: 'none',
|
|
248
253
|
fontFamily: 'inherit',
|
|
249
|
-
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }),
|
|
254
|
+
}, onFocus: (e) => e.target.style.borderColor = '#3b82f6', onBlur: (e) => e.target.style.borderColor = '#d1d5db' })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '24px' }, children: [(0, jsx_runtime_1.jsxs)("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '6px', fontSize: '14px', fontWeight: 500, color: '#374151' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "wrap_text" }), "Habillage du texte"] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditFloat('none'), style: {
|
|
250
255
|
flex: 1,
|
|
251
256
|
minWidth: 0,
|
|
252
257
|
padding: '12px',
|
|
@@ -261,7 +266,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
261
266
|
alignItems: 'center',
|
|
262
267
|
justifyContent: 'center',
|
|
263
268
|
gap: '4px',
|
|
264
|
-
}, title: "Aucun habillage", children:
|
|
269
|
+
}, title: "Aucun habillage", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px' }, children: "image" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditFloat('left'), style: {
|
|
265
270
|
flex: 1,
|
|
266
271
|
minWidth: 0,
|
|
267
272
|
padding: '12px',
|
|
@@ -276,7 +281,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
276
281
|
alignItems: 'center',
|
|
277
282
|
justifyContent: 'center',
|
|
278
283
|
gap: '4px',
|
|
279
|
-
}, title: "Image \u00E0 gauche", children:
|
|
284
|
+
}, title: "Image \u00E0 gauche", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px' }, children: "west" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditFloat('right'), style: {
|
|
280
285
|
flex: 1,
|
|
281
286
|
minWidth: 0,
|
|
282
287
|
padding: '12px',
|
|
@@ -291,7 +296,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
291
296
|
alignItems: 'center',
|
|
292
297
|
justifyContent: 'center',
|
|
293
298
|
gap: '4px',
|
|
294
|
-
}, title: "Image \u00E0 droite", children:
|
|
299
|
+
}, title: "Image \u00E0 droite", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px' }, children: "east" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '12px', justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setShowMetadataEditor(false), style: {
|
|
295
300
|
padding: '10px 20px',
|
|
296
301
|
border: '1px solid #d1d5db',
|
|
297
302
|
backgroundColor: 'white',
|
|
@@ -300,7 +305,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
300
305
|
fontWeight: 500,
|
|
301
306
|
cursor: 'pointer',
|
|
302
307
|
color: '#374151',
|
|
303
|
-
}, children: "Annuler" }),
|
|
308
|
+
}, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { onClick: saveMetadata, style: {
|
|
304
309
|
padding: '10px 20px',
|
|
305
310
|
border: 'none',
|
|
306
311
|
backgroundColor: '#3b82f6',
|
|
@@ -309,7 +314,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
309
314
|
fontSize: '14px',
|
|
310
315
|
fontWeight: 500,
|
|
311
316
|
cursor: 'pointer',
|
|
312
|
-
}, children: "Enregistrer" })] })] }) })), showFullscreen && (
|
|
317
|
+
}, children: "Enregistrer" })] })] }) })), showFullscreen && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
313
318
|
position: 'fixed',
|
|
314
319
|
inset: 0,
|
|
315
320
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
@@ -318,7 +323,7 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
318
323
|
justifyContent: 'center',
|
|
319
324
|
zIndex: 100000,
|
|
320
325
|
cursor: 'pointer',
|
|
321
|
-
}, onClick: () => setShowFullscreen(false), children: [
|
|
326
|
+
}, onClick: () => setShowFullscreen(false), children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setShowFullscreen(false), style: {
|
|
322
327
|
position: 'absolute',
|
|
323
328
|
top: '20px',
|
|
324
329
|
right: '20px',
|
|
@@ -332,13 +337,13 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
332
337
|
alignItems: 'center',
|
|
333
338
|
justifyContent: 'center',
|
|
334
339
|
transition: 'background-color 0.2s',
|
|
335
|
-
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer", children:
|
|
340
|
+
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px', color: 'white' }, children: "close" }) }), (0, jsx_runtime_1.jsx)("img", { src: src, alt: altText, style: {
|
|
336
341
|
maxWidth: '95vw',
|
|
337
342
|
maxHeight: '95vh',
|
|
338
343
|
objectFit: 'contain',
|
|
339
344
|
borderRadius: '4px',
|
|
340
345
|
boxShadow: '0 25px 50px rgba(0,0,0,0.5)',
|
|
341
|
-
}, onClick: (e) => e.stopPropagation() }), (displayCopyright || displayPhotographer || displayComment) && (
|
|
346
|
+
}, onClick: (e) => e.stopPropagation() }), (displayCopyright || displayPhotographer || displayComment) && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
342
347
|
position: 'absolute',
|
|
343
348
|
bottom: '20px',
|
|
344
349
|
left: '50%',
|
|
@@ -348,9 +353,9 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
348
353
|
textAlign: 'center',
|
|
349
354
|
textShadow: '0 2px 4px rgba(0,0,0,0.8)',
|
|
350
355
|
maxWidth: '80vw',
|
|
351
|
-
}, children: [displayComment && (
|
|
356
|
+
}, children: [displayComment && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '8px', fontSize: '16px' }, children: displayComment })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '16px', justifyContent: 'center', fontSize: '12px', opacity: 0.8 }, children: [displayCopyright && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "copyright" }), displayCopyright] })), displayPhotographer && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "photo_camera" }), displayPhotographer] }))] })] }))] }))] }));
|
|
352
357
|
}
|
|
353
|
-
|
|
358
|
+
class ImageNode extends lexical_1.DecoratorNode {
|
|
354
359
|
static getType() {
|
|
355
360
|
return 'image';
|
|
356
361
|
}
|
|
@@ -476,12 +481,13 @@ export class ImageNode extends DecoratorNode {
|
|
|
476
481
|
};
|
|
477
482
|
}
|
|
478
483
|
decorate() {
|
|
479
|
-
return (
|
|
484
|
+
return ((0, jsx_runtime_1.jsx)(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, copyright: this.__copyright, photographer: this.__photographer, comment: this.__comment, float: this.__float, nodeKey: this.__key }));
|
|
480
485
|
}
|
|
481
486
|
}
|
|
482
|
-
|
|
487
|
+
exports.ImageNode = ImageNode;
|
|
488
|
+
function $createImageNode(payload) {
|
|
483
489
|
return new ImageNode(payload.src, payload.altText || '', payload.width, payload.height, payload.copyright, payload.photographer, payload.comment, payload.float);
|
|
484
490
|
}
|
|
485
|
-
|
|
491
|
+
function $isImageNode(node) {
|
|
486
492
|
return node instanceof ImageNode;
|
|
487
493
|
}
|
package/dist/nodes/LinkNode.js
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.SimpleLinkNode = void 0;
|
|
5
|
+
exports.$createSimpleLinkNode = $createSimpleLinkNode;
|
|
6
|
+
exports.$isSimpleLinkNode = $isSimpleLinkNode;
|
|
7
|
+
exports.$wrapSelectionInSimpleLink = $wrapSelectionInSimpleLink;
|
|
8
|
+
const lexical_1 = require("lexical");
|
|
9
|
+
class SimpleLinkNode extends lexical_1.ElementNode {
|
|
4
10
|
static getType() {
|
|
5
11
|
return 'simple-link';
|
|
6
12
|
}
|
|
@@ -88,14 +94,15 @@ export class SimpleLinkNode extends ElementNode {
|
|
|
88
94
|
return true;
|
|
89
95
|
}
|
|
90
96
|
}
|
|
91
|
-
|
|
92
|
-
|
|
97
|
+
exports.SimpleLinkNode = SimpleLinkNode;
|
|
98
|
+
function $createSimpleLinkNode(payload) {
|
|
99
|
+
return (0, lexical_1.$applyNodeReplacement)(new SimpleLinkNode(payload.url, payload.title));
|
|
93
100
|
}
|
|
94
|
-
|
|
101
|
+
function $isSimpleLinkNode(node) {
|
|
95
102
|
return node instanceof SimpleLinkNode;
|
|
96
103
|
}
|
|
97
104
|
// Helper to wrap selection in a link
|
|
98
|
-
|
|
105
|
+
function $wrapSelectionInSimpleLink(selection, url, title) {
|
|
99
106
|
const nodes = selection.extract();
|
|
100
107
|
const linkNode = $createSimpleLinkNode({ url, title });
|
|
101
108
|
if (nodes.length > 0) {
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.ImageLinkPlugin = ImageLinkPlugin;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
|
|
8
|
+
const lexical_1 = require("lexical");
|
|
9
|
+
const ImageLinkNode_1 = require("../nodes/ImageLinkNode");
|
|
7
10
|
// Fullscreen modal component
|
|
8
11
|
function ImageLinkFullscreenModal({ url, altText, copyright, photographer, comment, onClose, }) {
|
|
9
12
|
// Close on Escape key
|
|
10
|
-
useEffect(() => {
|
|
13
|
+
(0, react_1.useEffect)(() => {
|
|
11
14
|
const handleKeyDown = (e) => {
|
|
12
15
|
if (e.key === 'Escape') {
|
|
13
16
|
onClose();
|
|
@@ -17,7 +20,7 @@ function ImageLinkFullscreenModal({ url, altText, copyright, photographer, comme
|
|
|
17
20
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
18
21
|
}, [onClose]);
|
|
19
22
|
const hasMetadata = copyright || photographer || comment;
|
|
20
|
-
return (
|
|
23
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
21
24
|
position: 'fixed',
|
|
22
25
|
inset: 0,
|
|
23
26
|
backgroundColor: 'rgba(0, 0, 0, 0.9)',
|
|
@@ -27,7 +30,7 @@ function ImageLinkFullscreenModal({ url, altText, copyright, photographer, comme
|
|
|
27
30
|
justifyContent: 'center',
|
|
28
31
|
zIndex: 100000,
|
|
29
32
|
cursor: 'pointer',
|
|
30
|
-
}, onClick: onClose, children: [
|
|
33
|
+
}, onClick: onClose, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
|
|
31
34
|
position: 'absolute',
|
|
32
35
|
top: '20px',
|
|
33
36
|
right: '20px',
|
|
@@ -41,13 +44,13 @@ function ImageLinkFullscreenModal({ url, altText, copyright, photographer, comme
|
|
|
41
44
|
alignItems: 'center',
|
|
42
45
|
justifyContent: 'center',
|
|
43
46
|
transition: 'background-color 0.2s',
|
|
44
|
-
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer (\u00C9chap)", children:
|
|
47
|
+
}, onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)', onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)', title: "Fermer (\u00C9chap)", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '24px', color: 'white' }, children: "close" }) }), (0, jsx_runtime_1.jsx)("img", { src: url, alt: altText || '', title: comment || undefined, style: {
|
|
45
48
|
maxWidth: '95vw',
|
|
46
49
|
maxHeight: hasMetadata ? '85vh' : '95vh',
|
|
47
50
|
objectFit: 'contain',
|
|
48
51
|
borderRadius: '4px',
|
|
49
52
|
boxShadow: '0 25px 50px rgba(0,0,0,0.5)',
|
|
50
|
-
}, onClick: (e) => e.stopPropagation() }), hasMetadata && (
|
|
53
|
+
}, onClick: (e) => e.stopPropagation() }), hasMetadata && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
51
54
|
marginTop: '16px',
|
|
52
55
|
padding: '12px 20px',
|
|
53
56
|
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
@@ -56,22 +59,22 @@ function ImageLinkFullscreenModal({ url, altText, copyright, photographer, comme
|
|
|
56
59
|
flexDirection: 'column',
|
|
57
60
|
gap: '4px',
|
|
58
61
|
maxWidth: '90vw',
|
|
59
|
-
}, onClick: (e) => e.stopPropagation(), children: [photographer && (
|
|
62
|
+
}, onClick: (e) => e.stopPropagation(), children: [photographer && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', color: 'white', fontSize: '14px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', color: '#9ca3af' }, children: "camera_alt" }), photographer] })), copyright && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', color: 'white', fontSize: '14px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', color: '#9ca3af' }, children: "copyright" }), copyright] })), comment && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', color: '#d1d5db', fontSize: '13px', fontStyle: 'italic' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', color: '#9ca3af' }, children: "chat" }), comment] }))] }))] }));
|
|
60
63
|
}
|
|
61
|
-
|
|
62
|
-
const [editor] = useLexicalComposerContext();
|
|
63
|
-
const [fullscreenData, setFullscreenData] = useState(null);
|
|
64
|
+
function ImageLinkPlugin() {
|
|
65
|
+
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
|
|
66
|
+
const [fullscreenData, setFullscreenData] = (0, react_1.useState)(null);
|
|
64
67
|
// Find ImageLinkNode at current selection
|
|
65
|
-
const getImageLinkNodeAtSelection = useCallback(() => {
|
|
68
|
+
const getImageLinkNodeAtSelection = (0, react_1.useCallback)(() => {
|
|
66
69
|
let foundNode = null;
|
|
67
70
|
editor.getEditorState().read(() => {
|
|
68
|
-
const selection =
|
|
69
|
-
if (
|
|
71
|
+
const selection = (0, lexical_1.$getSelection)();
|
|
72
|
+
if ((0, lexical_1.$isRangeSelection)(selection)) {
|
|
70
73
|
const anchorNode = selection.anchor.getNode();
|
|
71
74
|
// Check if we're inside an ImageLinkNode
|
|
72
75
|
let node = anchorNode;
|
|
73
76
|
while (node) {
|
|
74
|
-
if (
|
|
77
|
+
if ((0, ImageLinkNode_1.$isImageLinkNode)(node)) {
|
|
75
78
|
foundNode = node;
|
|
76
79
|
break;
|
|
77
80
|
}
|
|
@@ -85,8 +88,8 @@ export function ImageLinkPlugin() {
|
|
|
85
88
|
return foundNode;
|
|
86
89
|
}, [editor]);
|
|
87
90
|
// Handle Ctrl+Click on ImageLinkNode
|
|
88
|
-
useEffect(() => {
|
|
89
|
-
return editor.registerCommand(CLICK_COMMAND, (event) => {
|
|
91
|
+
(0, react_1.useEffect)(() => {
|
|
92
|
+
return editor.registerCommand(lexical_1.CLICK_COMMAND, (event) => {
|
|
90
93
|
const target = event.target;
|
|
91
94
|
// Check if we clicked on an element inside the editor that is an ImageLinkNode
|
|
92
95
|
const imageLinkNode = getImageLinkNodeAtSelection();
|
|
@@ -103,10 +106,10 @@ export function ImageLinkPlugin() {
|
|
|
103
106
|
return true;
|
|
104
107
|
}
|
|
105
108
|
return false;
|
|
106
|
-
}, COMMAND_PRIORITY_HIGH);
|
|
109
|
+
}, lexical_1.COMMAND_PRIORITY_HIGH);
|
|
107
110
|
}, [editor, getImageLinkNodeAtSelection]);
|
|
108
|
-
const closeFullscreen = useCallback(() => {
|
|
111
|
+
const closeFullscreen = (0, react_1.useCallback)(() => {
|
|
109
112
|
setFullscreenData(null);
|
|
110
113
|
}, []);
|
|
111
|
-
return (
|
|
114
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullscreenData && ((0, jsx_runtime_1.jsx)(ImageLinkFullscreenModal, { url: fullscreenData.url, altText: fullscreenData.altText, copyright: fullscreenData.copyright, photographer: fullscreenData.photographer, comment: fullscreenData.comment, onClose: closeFullscreen })) }));
|
|
112
115
|
}
|