@qwanyx/ai-editor 1.3.2 → 1.3.4
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.
|
@@ -286,5 +286,5 @@ function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholde
|
|
|
286
286
|
const fullscreenClasses = isFullscreen
|
|
287
287
|
? 'fixed inset-0 z-50'
|
|
288
288
|
: '';
|
|
289
|
-
return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: false, children: (0, jsx_runtime_1.jsxs)("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col overflow-hidden ${fullscreenClasses} ${className}`, style: minHeight && !isFullscreen ? { height: minHeight } : {}, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 overflow-auto", children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none p-4 text-gray-900
|
|
289
|
+
return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: false, children: (0, jsx_runtime_1.jsxs)("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col overflow-hidden ${fullscreenClasses} ${className}`, style: minHeight && !isFullscreen ? { height: minHeight } : {}, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 overflow-y-auto", children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none p-4 text-gray-900" }), placeholder: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-4 text-gray-400 pointer-events-none", children: placeholder }), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalOnChangePlugin_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(InitialContentPlugin, { content: initialContent }), (0, jsx_runtime_1.jsx)(EditorRefPlugin, { editorRef: editorRef }), (0, jsx_runtime_1.jsx)(InsertObjectPlugin_1.InsertObjectPlugin, {}), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {}), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-blue-600", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons animate-spin", children: "sync" }), (0, jsx_runtime_1.jsx)("span", { children: "L'IA travaille..." })] }) }))] })] })] }) }));
|
|
290
290
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { DecoratorNode, DOMConversionMap, DOMExportOutput, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export type ImageFloatType = 'none' | 'left' | 'right';
|
|
4
|
+
export type CaptionPositionType = 'overlay' | 'below' | 'beside';
|
|
5
|
+
export type CaptionAlignType = 'left' | 'center' | 'right';
|
|
4
6
|
export interface ImagePayload {
|
|
5
7
|
src: string;
|
|
6
8
|
altText?: string;
|
|
@@ -10,6 +12,8 @@ export interface ImagePayload {
|
|
|
10
12
|
photographer?: string;
|
|
11
13
|
comment?: string;
|
|
12
14
|
float?: ImageFloatType;
|
|
15
|
+
captionPosition?: CaptionPositionType;
|
|
16
|
+
captionAlign?: CaptionAlignType;
|
|
13
17
|
}
|
|
14
18
|
export type SerializedImageNode = Spread<{
|
|
15
19
|
src: string;
|
|
@@ -20,6 +24,8 @@ export type SerializedImageNode = Spread<{
|
|
|
20
24
|
photographer?: string;
|
|
21
25
|
comment?: string;
|
|
22
26
|
float?: ImageFloatType;
|
|
27
|
+
captionPosition?: CaptionPositionType;
|
|
28
|
+
captionAlign?: CaptionAlignType;
|
|
23
29
|
}, SerializedLexicalNode>;
|
|
24
30
|
export declare class ImageNode extends DecoratorNode<React.ReactElement> {
|
|
25
31
|
__src: string;
|
|
@@ -30,9 +36,11 @@ export declare class ImageNode extends DecoratorNode<React.ReactElement> {
|
|
|
30
36
|
__photographer?: string;
|
|
31
37
|
__comment?: string;
|
|
32
38
|
__float?: ImageFloatType;
|
|
39
|
+
__captionPosition?: CaptionPositionType;
|
|
40
|
+
__captionAlign?: CaptionAlignType;
|
|
33
41
|
static getType(): string;
|
|
34
42
|
static clone(node: ImageNode): ImageNode;
|
|
35
|
-
constructor(src: string, altText?: string, width?: number, height?: number, copyright?: string, photographer?: string, comment?: string, float?: ImageFloatType, key?: NodeKey);
|
|
43
|
+
constructor(src: string, altText?: string, width?: number, height?: number, copyright?: string, photographer?: string, comment?: string, float?: ImageFloatType, captionPosition?: CaptionPositionType, captionAlign?: CaptionAlignType, key?: NodeKey);
|
|
36
44
|
createDOM(): HTMLElement;
|
|
37
45
|
updateDOM(): false;
|
|
38
46
|
setSrc(src: string): void;
|
|
@@ -51,6 +59,10 @@ export declare class ImageNode extends DecoratorNode<React.ReactElement> {
|
|
|
51
59
|
getComment(): string | undefined;
|
|
52
60
|
setFloat(float: ImageFloatType | undefined): void;
|
|
53
61
|
getFloat(): ImageFloatType | undefined;
|
|
62
|
+
setCaptionPosition(captionPosition: CaptionPositionType | undefined): void;
|
|
63
|
+
getCaptionPosition(): CaptionPositionType | undefined;
|
|
64
|
+
setCaptionAlign(captionAlign: CaptionAlignType | undefined): void;
|
|
65
|
+
getCaptionAlign(): CaptionAlignType | undefined;
|
|
54
66
|
static importJSON(serializedNode: SerializedImageNode): ImageNode;
|
|
55
67
|
exportJSON(): SerializedImageNode;
|
|
56
68
|
exportDOM(): DOMExportOutput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/nodes/ImageNode.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EAEP,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/nodes/ImageNode.tsx"],"names":[],"mappings":"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"}
|
package/dist/nodes/ImageNode.js
CHANGED
|
@@ -9,7 +9,7 @@ const lexical_1 = require("lexical");
|
|
|
9
9
|
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
|
|
10
10
|
const react_1 = require("react");
|
|
11
11
|
const EditorModeContext_1 = require("../context/EditorModeContext");
|
|
12
|
-
function ImageComponent({ src, altText, width, height, copyright: initialCopyright, photographer: initialPhotographer, comment: initialComment, float: initialFloat, nodeKey, }) {
|
|
12
|
+
function ImageComponent({ src, altText, width, height, copyright: initialCopyright, photographer: initialPhotographer, comment: initialComment, float: initialFloat, captionPosition: initialCaptionPosition, captionAlign: initialCaptionAlign, nodeKey, }) {
|
|
13
13
|
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
|
|
14
14
|
const { isViewer } = (0, EditorModeContext_1.useEditorMode)();
|
|
15
15
|
const containerRef = (0, react_1.useRef)(null);
|
|
@@ -25,6 +25,8 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
25
25
|
const [displayPhotographer, setDisplayPhotographer] = (0, react_1.useState)(initialPhotographer);
|
|
26
26
|
const [displayComment, setDisplayComment] = (0, react_1.useState)(initialComment);
|
|
27
27
|
const [displayFloat, setDisplayFloat] = (0, react_1.useState)(initialFloat || 'none');
|
|
28
|
+
const [displayCaptionPosition, setDisplayCaptionPosition] = (0, react_1.useState)(initialCaptionPosition || 'overlay');
|
|
29
|
+
const [displayCaptionAlign, setDisplayCaptionAlign] = (0, react_1.useState)(initialCaptionAlign || 'left');
|
|
28
30
|
// Edit form state
|
|
29
31
|
const [editSrc, setEditSrc] = (0, react_1.useState)('');
|
|
30
32
|
const [editAltText, setEditAltText] = (0, react_1.useState)('');
|
|
@@ -32,6 +34,8 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
32
34
|
const [editPhotographer, setEditPhotographer] = (0, react_1.useState)('');
|
|
33
35
|
const [editComment, setEditComment] = (0, react_1.useState)('');
|
|
34
36
|
const [editFloat, setEditFloat] = (0, react_1.useState)('none');
|
|
37
|
+
const [editCaptionPosition, setEditCaptionPosition] = (0, react_1.useState)('overlay');
|
|
38
|
+
const [editCaptionAlign, setEditCaptionAlign] = (0, react_1.useState)('left');
|
|
35
39
|
const startX = (0, react_1.useRef)(0);
|
|
36
40
|
const startWidth = (0, react_1.useRef)(0);
|
|
37
41
|
// Handle click to select (or open fullscreen in viewer mode)
|
|
@@ -101,6 +105,8 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
101
105
|
setEditPhotographer(node.getPhotographer() || '');
|
|
102
106
|
setEditComment(node.getComment() || '');
|
|
103
107
|
setEditFloat(node.getFloat() || 'none');
|
|
108
|
+
setEditCaptionPosition(node.getCaptionPosition() || 'overlay');
|
|
109
|
+
setEditCaptionAlign(node.getCaptionAlign() || 'left');
|
|
104
110
|
}
|
|
105
111
|
});
|
|
106
112
|
setShowMetadataEditor(true);
|
|
@@ -117,6 +123,8 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
117
123
|
node.setPhotographer(editPhotographer || undefined);
|
|
118
124
|
node.setComment(editComment || undefined);
|
|
119
125
|
node.setFloat(editFloat);
|
|
126
|
+
node.setCaptionPosition(editCaptionPosition);
|
|
127
|
+
node.setCaptionAlign(editCaptionAlign);
|
|
120
128
|
}
|
|
121
129
|
});
|
|
122
130
|
// Update display state
|
|
@@ -124,8 +132,10 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
124
132
|
setDisplayPhotographer(editPhotographer || undefined);
|
|
125
133
|
setDisplayComment(editComment || undefined);
|
|
126
134
|
setDisplayFloat(editFloat);
|
|
135
|
+
setDisplayCaptionPosition(editCaptionPosition);
|
|
136
|
+
setDisplayCaptionAlign(editCaptionAlign);
|
|
127
137
|
setShowMetadataEditor(false);
|
|
128
|
-
}, [editor, nodeKey, editSrc, editAltText, editCopyright, editPhotographer, editComment, editFloat]);
|
|
138
|
+
}, [editor, nodeKey, editSrc, editAltText, editCopyright, editPhotographer, editComment, editFloat, editCaptionPosition, editCaptionAlign]);
|
|
129
139
|
// Get float styles
|
|
130
140
|
const getFloatStyles = () => {
|
|
131
141
|
if (displayFloat === 'left') {
|
|
@@ -136,74 +146,101 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
136
146
|
}
|
|
137
147
|
return { margin: '8px 0' };
|
|
138
148
|
};
|
|
149
|
+
// Render metadata content
|
|
150
|
+
const renderMetadataContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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] }))] }));
|
|
139
151
|
return ((0, jsx_runtime_1.jsxs)("span", { ref: containerRef, style: {
|
|
140
|
-
display: 'inline-block',
|
|
152
|
+
display: displayCaptionPosition === 'beside' ? 'inline-flex' : 'inline-block',
|
|
153
|
+
flexDirection: displayCaptionPosition === 'beside' && displayCaptionAlign === 'right' ? 'row-reverse' : 'row',
|
|
154
|
+
gap: displayCaptionPosition === 'beside' ? '12px' : undefined,
|
|
155
|
+
alignItems: displayCaptionPosition === 'beside' ? 'flex-start' : undefined,
|
|
141
156
|
position: 'relative',
|
|
142
157
|
...getFloatStyles(),
|
|
143
|
-
}, onClick: handleClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsx)("img", { ref: imageRef, src: src, alt: altText, title: displayComment || undefined, style: {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
158
|
+
}, onClick: handleClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)("img", { ref: imageRef, src: src, alt: altText, title: displayComment || undefined, style: {
|
|
159
|
+
maxWidth: '100%',
|
|
160
|
+
height: 'auto',
|
|
161
|
+
width: currentWidth ? `${currentWidth}px` : 'auto',
|
|
162
|
+
display: 'block',
|
|
163
|
+
borderRadius: '4px',
|
|
164
|
+
outline: !isViewer && isSelected ? '2px solid #3b82f6' : 'none',
|
|
165
|
+
cursor: 'pointer',
|
|
166
|
+
}, draggable: false }), displayCaptionPosition === 'overlay' && (displayCopyright || displayPhotographer) && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
167
|
+
position: 'absolute',
|
|
168
|
+
bottom: '6px',
|
|
169
|
+
left: displayCaptionAlign === 'right' ? undefined : '6px',
|
|
170
|
+
right: displayCaptionAlign === 'right' ? '6px' : undefined,
|
|
171
|
+
color: 'white',
|
|
172
|
+
fontSize: '9px',
|
|
173
|
+
display: 'flex',
|
|
174
|
+
flexDirection: 'column',
|
|
175
|
+
alignItems: displayCaptionAlign === 'right' ? 'flex-end' : displayCaptionAlign === 'center' ? 'center' : 'flex-start',
|
|
176
|
+
gap: '2px',
|
|
177
|
+
textShadow: '0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5)',
|
|
178
|
+
width: displayCaptionAlign === 'center' ? '100%' : undefined,
|
|
179
|
+
textAlign: displayCaptionAlign,
|
|
180
|
+
}, children: renderMetadataContent() })), !isViewer && isSelected && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
181
|
+
e.stopPropagation();
|
|
182
|
+
openMetadataEditor();
|
|
183
|
+
}, style: {
|
|
184
|
+
position: 'absolute',
|
|
185
|
+
top: '-6px',
|
|
186
|
+
right: '50px',
|
|
187
|
+
width: '24px',
|
|
188
|
+
height: '24px',
|
|
189
|
+
backgroundColor: '#3b82f6',
|
|
190
|
+
border: '2px solid white',
|
|
191
|
+
borderRadius: '4px',
|
|
192
|
+
cursor: 'pointer',
|
|
193
|
+
display: 'flex',
|
|
194
|
+
alignItems: 'center',
|
|
195
|
+
justifyContent: 'center',
|
|
196
|
+
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
197
|
+
}, title: "Modifier les m\u00E9tadonn\u00E9es", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "edit" }) })), ((!isViewer && isSelected) || (isViewer && isHovered)) && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
|
|
198
|
+
e.stopPropagation();
|
|
199
|
+
setShowFullscreen(true);
|
|
200
|
+
}, style: {
|
|
201
|
+
position: 'absolute',
|
|
202
|
+
top: isViewer ? '8px' : '-6px',
|
|
203
|
+
right: isViewer ? '8px' : '20px',
|
|
204
|
+
width: '24px',
|
|
205
|
+
height: '24px',
|
|
206
|
+
backgroundColor: isViewer ? 'rgba(0, 0, 0, 0.6)' : '#3b82f6',
|
|
207
|
+
border: isViewer ? 'none' : '2px solid white',
|
|
208
|
+
borderRadius: isViewer ? '50%' : '4px',
|
|
209
|
+
cursor: 'pointer',
|
|
210
|
+
display: 'flex',
|
|
211
|
+
alignItems: 'center',
|
|
212
|
+
justifyContent: 'center',
|
|
213
|
+
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
214
|
+
}, title: "Voir en plein \u00E9cran", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "fullscreen" }) })), !isViewer && isSelected && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: handleResizeStart, style: {
|
|
215
|
+
position: 'absolute',
|
|
216
|
+
right: '-6px',
|
|
217
|
+
bottom: '-6px',
|
|
218
|
+
width: '12px',
|
|
219
|
+
height: '12px',
|
|
220
|
+
backgroundColor: '#3b82f6',
|
|
221
|
+
borderRadius: '2px',
|
|
222
|
+
cursor: 'se-resize',
|
|
223
|
+
border: '2px solid white',
|
|
224
|
+
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
225
|
+
} }))] }), displayCaptionPosition === 'below' && (displayCopyright || displayPhotographer) && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
226
|
+
marginTop: '4px',
|
|
227
|
+
fontSize: '11px',
|
|
228
|
+
color: '#666',
|
|
157
229
|
display: 'flex',
|
|
158
230
|
flexDirection: 'column',
|
|
231
|
+
alignItems: displayCaptionAlign === 'right' ? 'flex-end' : displayCaptionAlign === 'center' ? 'center' : 'flex-start',
|
|
159
232
|
gap: '2px',
|
|
160
|
-
|
|
161
|
-
}, children:
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}, style: {
|
|
165
|
-
position: 'absolute',
|
|
166
|
-
top: '-6px',
|
|
167
|
-
right: '50px',
|
|
168
|
-
width: '24px',
|
|
169
|
-
height: '24px',
|
|
170
|
-
backgroundColor: '#3b82f6',
|
|
171
|
-
border: '2px solid white',
|
|
172
|
-
borderRadius: '4px',
|
|
173
|
-
cursor: 'pointer',
|
|
233
|
+
width: '100%',
|
|
234
|
+
}, children: renderMetadataContent() })), displayCaptionPosition === 'beside' && (displayCopyright || displayPhotographer) && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
235
|
+
fontSize: '11px',
|
|
236
|
+
color: '#666',
|
|
174
237
|
display: 'flex',
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
}, style: {
|
|
182
|
-
position: 'absolute',
|
|
183
|
-
top: isViewer ? '8px' : '-6px',
|
|
184
|
-
right: isViewer ? '8px' : '20px',
|
|
185
|
-
width: '24px',
|
|
186
|
-
height: '24px',
|
|
187
|
-
backgroundColor: isViewer ? 'rgba(0, 0, 0, 0.6)' : '#3b82f6',
|
|
188
|
-
border: isViewer ? 'none' : '2px solid white',
|
|
189
|
-
borderRadius: isViewer ? '50%' : '4px',
|
|
190
|
-
cursor: 'pointer',
|
|
191
|
-
display: 'flex',
|
|
192
|
-
alignItems: 'center',
|
|
193
|
-
justifyContent: 'center',
|
|
194
|
-
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
195
|
-
}, title: "Voir en plein \u00E9cran", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', color: 'white' }, children: "fullscreen" }) })), !isViewer && isSelected && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: handleResizeStart, style: {
|
|
196
|
-
position: 'absolute',
|
|
197
|
-
right: '-6px',
|
|
198
|
-
bottom: '-6px',
|
|
199
|
-
width: '12px',
|
|
200
|
-
height: '12px',
|
|
201
|
-
backgroundColor: '#3b82f6',
|
|
202
|
-
borderRadius: '2px',
|
|
203
|
-
cursor: 'se-resize',
|
|
204
|
-
border: '2px solid white',
|
|
205
|
-
boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
|
206
|
-
} })), showMetadataEditor && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
238
|
+
flexDirection: 'column',
|
|
239
|
+
alignItems: displayCaptionAlign === 'right' ? 'flex-end' : displayCaptionAlign === 'center' ? 'center' : 'flex-start',
|
|
240
|
+
gap: '2px',
|
|
241
|
+
alignSelf: 'center',
|
|
242
|
+
minWidth: '80px',
|
|
243
|
+
}, children: renderMetadataContent() })), showMetadataEditor && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
207
244
|
position: 'fixed',
|
|
208
245
|
inset: 0,
|
|
209
246
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
@@ -305,7 +342,94 @@ function ImageComponent({ src, altText, width, height, copyright: initialCopyrig
|
|
|
305
342
|
alignItems: 'center',
|
|
306
343
|
justifyContent: 'center',
|
|
307
344
|
gap: '4px',
|
|
308
|
-
}, 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: '
|
|
345
|
+
}, 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: { 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: "subtitles" }), "Position des cr\u00E9dits"] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setEditCaptionPosition('overlay'), style: {
|
|
346
|
+
flex: 1,
|
|
347
|
+
minWidth: 0,
|
|
348
|
+
padding: '10px 8px',
|
|
349
|
+
border: '1px solid',
|
|
350
|
+
borderColor: editCaptionPosition === 'overlay' ? '#3b82f6' : '#d1d5db',
|
|
351
|
+
backgroundColor: editCaptionPosition === 'overlay' ? '#eff6ff' : 'white',
|
|
352
|
+
color: editCaptionPosition === 'overlay' ? '#1d4ed8' : '#374151',
|
|
353
|
+
borderRadius: '6px',
|
|
354
|
+
cursor: 'pointer',
|
|
355
|
+
display: 'flex',
|
|
356
|
+
flexDirection: 'column',
|
|
357
|
+
alignItems: 'center',
|
|
358
|
+
justifyContent: 'center',
|
|
359
|
+
gap: '4px',
|
|
360
|
+
fontSize: '11px',
|
|
361
|
+
}, title: "Sur l'image", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "filter" }), "Sur l'image"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setEditCaptionPosition('below'), style: {
|
|
362
|
+
flex: 1,
|
|
363
|
+
minWidth: 0,
|
|
364
|
+
padding: '10px 8px',
|
|
365
|
+
border: '1px solid',
|
|
366
|
+
borderColor: editCaptionPosition === 'below' ? '#3b82f6' : '#d1d5db',
|
|
367
|
+
backgroundColor: editCaptionPosition === 'below' ? '#eff6ff' : 'white',
|
|
368
|
+
color: editCaptionPosition === 'below' ? '#1d4ed8' : '#374151',
|
|
369
|
+
borderRadius: '6px',
|
|
370
|
+
cursor: 'pointer',
|
|
371
|
+
display: 'flex',
|
|
372
|
+
flexDirection: 'column',
|
|
373
|
+
alignItems: 'center',
|
|
374
|
+
justifyContent: 'center',
|
|
375
|
+
gap: '4px',
|
|
376
|
+
fontSize: '11px',
|
|
377
|
+
}, title: "Sous l'image", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "vertical_align_bottom" }), "Dessous"] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setEditCaptionPosition('beside'), style: {
|
|
378
|
+
flex: 1,
|
|
379
|
+
minWidth: 0,
|
|
380
|
+
padding: '10px 8px',
|
|
381
|
+
border: '1px solid',
|
|
382
|
+
borderColor: editCaptionPosition === 'beside' ? '#3b82f6' : '#d1d5db',
|
|
383
|
+
backgroundColor: editCaptionPosition === 'beside' ? '#eff6ff' : 'white',
|
|
384
|
+
color: editCaptionPosition === 'beside' ? '#1d4ed8' : '#374151',
|
|
385
|
+
borderRadius: '6px',
|
|
386
|
+
cursor: 'pointer',
|
|
387
|
+
display: 'flex',
|
|
388
|
+
flexDirection: 'column',
|
|
389
|
+
alignItems: 'center',
|
|
390
|
+
justifyContent: 'center',
|
|
391
|
+
gap: '4px',
|
|
392
|
+
fontSize: '11px',
|
|
393
|
+
}, title: "\u00C0 c\u00F4t\u00E9 de l'image", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "view_sidebar" }), "\u00C0 c\u00F4t\u00E9"] })] })] }), editCaptionPosition !== 'overlay' && ((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: "format_align_left" }), "Alignement des cr\u00E9dits"] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px', width: '100%' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditCaptionAlign('left'), style: {
|
|
394
|
+
flex: 1,
|
|
395
|
+
minWidth: 0,
|
|
396
|
+
padding: '10px',
|
|
397
|
+
border: '1px solid',
|
|
398
|
+
borderColor: editCaptionAlign === 'left' ? '#3b82f6' : '#d1d5db',
|
|
399
|
+
backgroundColor: editCaptionAlign === 'left' ? '#eff6ff' : 'white',
|
|
400
|
+
color: editCaptionAlign === 'left' ? '#1d4ed8' : '#374151',
|
|
401
|
+
borderRadius: '6px',
|
|
402
|
+
cursor: 'pointer',
|
|
403
|
+
display: 'flex',
|
|
404
|
+
alignItems: 'center',
|
|
405
|
+
justifyContent: 'center',
|
|
406
|
+
}, title: "Gauche", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "format_align_left" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditCaptionAlign('center'), style: {
|
|
407
|
+
flex: 1,
|
|
408
|
+
minWidth: 0,
|
|
409
|
+
padding: '10px',
|
|
410
|
+
border: '1px solid',
|
|
411
|
+
borderColor: editCaptionAlign === 'center' ? '#3b82f6' : '#d1d5db',
|
|
412
|
+
backgroundColor: editCaptionAlign === 'center' ? '#eff6ff' : 'white',
|
|
413
|
+
color: editCaptionAlign === 'center' ? '#1d4ed8' : '#374151',
|
|
414
|
+
borderRadius: '6px',
|
|
415
|
+
cursor: 'pointer',
|
|
416
|
+
display: 'flex',
|
|
417
|
+
alignItems: 'center',
|
|
418
|
+
justifyContent: 'center',
|
|
419
|
+
}, title: "Centre", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "format_align_center" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setEditCaptionAlign('right'), style: {
|
|
420
|
+
flex: 1,
|
|
421
|
+
minWidth: 0,
|
|
422
|
+
padding: '10px',
|
|
423
|
+
border: '1px solid',
|
|
424
|
+
borderColor: editCaptionAlign === 'right' ? '#3b82f6' : '#d1d5db',
|
|
425
|
+
backgroundColor: editCaptionAlign === 'right' ? '#eff6ff' : 'white',
|
|
426
|
+
color: editCaptionAlign === 'right' ? '#1d4ed8' : '#374151',
|
|
427
|
+
borderRadius: '6px',
|
|
428
|
+
cursor: 'pointer',
|
|
429
|
+
display: 'flex',
|
|
430
|
+
alignItems: 'center',
|
|
431
|
+
justifyContent: 'center',
|
|
432
|
+
}, title: "Droite", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "format_align_right" }) })] })] })), (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: {
|
|
309
433
|
padding: '10px 20px',
|
|
310
434
|
border: '1px solid #d1d5db',
|
|
311
435
|
backgroundColor: 'white',
|
|
@@ -375,9 +499,9 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
375
499
|
return 'image';
|
|
376
500
|
}
|
|
377
501
|
static clone(node) {
|
|
378
|
-
return new ImageNode(node.__src, node.__altText, node.__width, node.__height, node.__copyright, node.__photographer, node.__comment, node.__float, node.__key);
|
|
502
|
+
return new ImageNode(node.__src, node.__altText, node.__width, node.__height, node.__copyright, node.__photographer, node.__comment, node.__float, node.__captionPosition, node.__captionAlign, node.__key);
|
|
379
503
|
}
|
|
380
|
-
constructor(src, altText = '', width, height, copyright, photographer, comment, float, key) {
|
|
504
|
+
constructor(src, altText = '', width, height, copyright, photographer, comment, float, captionPosition, captionAlign, key) {
|
|
381
505
|
super(key);
|
|
382
506
|
this.__src = src;
|
|
383
507
|
this.__altText = altText;
|
|
@@ -387,6 +511,8 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
387
511
|
this.__photographer = photographer;
|
|
388
512
|
this.__comment = comment;
|
|
389
513
|
this.__float = float;
|
|
514
|
+
this.__captionPosition = captionPosition;
|
|
515
|
+
this.__captionAlign = captionAlign;
|
|
390
516
|
}
|
|
391
517
|
createDOM() {
|
|
392
518
|
const span = document.createElement('span');
|
|
@@ -452,9 +578,23 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
452
578
|
getFloat() {
|
|
453
579
|
return this.__float;
|
|
454
580
|
}
|
|
581
|
+
setCaptionPosition(captionPosition) {
|
|
582
|
+
const writable = this.getWritable();
|
|
583
|
+
writable.__captionPosition = captionPosition;
|
|
584
|
+
}
|
|
585
|
+
getCaptionPosition() {
|
|
586
|
+
return this.__captionPosition;
|
|
587
|
+
}
|
|
588
|
+
setCaptionAlign(captionAlign) {
|
|
589
|
+
const writable = this.getWritable();
|
|
590
|
+
writable.__captionAlign = captionAlign;
|
|
591
|
+
}
|
|
592
|
+
getCaptionAlign() {
|
|
593
|
+
return this.__captionAlign;
|
|
594
|
+
}
|
|
455
595
|
static importJSON(serializedNode) {
|
|
456
|
-
const { src, altText, width, height, copyright, photographer, comment, float } = serializedNode;
|
|
457
|
-
return $createImageNode({ src, altText, width, height, copyright, photographer, comment, float });
|
|
596
|
+
const { src, altText, width, height, copyright, photographer, comment, float, captionPosition, captionAlign } = serializedNode;
|
|
597
|
+
return $createImageNode({ src, altText, width, height, copyright, photographer, comment, float, captionPosition, captionAlign });
|
|
458
598
|
}
|
|
459
599
|
exportJSON() {
|
|
460
600
|
return {
|
|
@@ -468,6 +608,8 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
468
608
|
photographer: this.__photographer,
|
|
469
609
|
comment: this.__comment,
|
|
470
610
|
float: this.__float,
|
|
611
|
+
captionPosition: this.__captionPosition,
|
|
612
|
+
captionAlign: this.__captionAlign,
|
|
471
613
|
};
|
|
472
614
|
}
|
|
473
615
|
exportDOM() {
|
|
@@ -496,12 +638,12 @@ class ImageNode extends lexical_1.DecoratorNode {
|
|
|
496
638
|
};
|
|
497
639
|
}
|
|
498
640
|
decorate() {
|
|
499
|
-
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 }));
|
|
641
|
+
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, captionPosition: this.__captionPosition, captionAlign: this.__captionAlign, nodeKey: this.__key }));
|
|
500
642
|
}
|
|
501
643
|
}
|
|
502
644
|
exports.ImageNode = ImageNode;
|
|
503
645
|
function $createImageNode(payload) {
|
|
504
|
-
return new ImageNode(payload.src, payload.altText || '', payload.width, payload.height, payload.copyright, payload.photographer, payload.comment, payload.float);
|
|
646
|
+
return new ImageNode(payload.src, payload.altText || '', payload.width, payload.height, payload.copyright, payload.photographer, payload.comment, payload.float, payload.captionPosition, payload.captionAlign);
|
|
505
647
|
}
|
|
506
648
|
function $isImageNode(node) {
|
|
507
649
|
return node instanceof ImageNode;
|