@qwanyx/ai-editor 1.5.9 → 1.5.11
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionOptionsModal.d.ts","sourceRoot":"","sources":["../../src/components/SectionOptionsModal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAOvC,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACtD,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C;AAgMD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,wBAAwB,
|
|
1
|
+
{"version":3,"file":"SectionOptionsModal.d.ts","sourceRoot":"","sources":["../../src/components/SectionOptionsModal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAOvC,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACtD,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C;AAgMD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,wBAAwB,kDAgX1B;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -204,10 +204,6 @@ function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpd
|
|
|
204
204
|
const [columns, setColumns] = (0, react_1.useState)(content.columns || 2);
|
|
205
205
|
const [columnLines, setColumnLines] = (0, react_1.useState)(content.columnLines || 0);
|
|
206
206
|
const [dropCapEnabled, setDropCapEnabled] = (0, react_1.useState)(content.dropCap?.enabled || false);
|
|
207
|
-
// Ogilvy image options
|
|
208
|
-
const [showImage, setShowImage] = (0, react_1.useState)(content.showImage !== false);
|
|
209
|
-
const [imageWidth, setImageWidth] = (0, react_1.useState)(content.imageWidth || 100);
|
|
210
|
-
const [imageWidthUnit, setImageWidthUnit] = (0, react_1.useState)(content.imageWidthUnit || '%');
|
|
211
207
|
// Ogilvy end comment options
|
|
212
208
|
const [endCommentFontSize, setEndCommentFontSize] = (0, react_1.useState)(content.endCommentFontSize || 14);
|
|
213
209
|
const [endCommentItalic, setEndCommentItalic] = (0, react_1.useState)(content.endCommentItalic || false);
|
|
@@ -228,10 +224,6 @@ function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpd
|
|
|
228
224
|
setColumns(content.columns || 2);
|
|
229
225
|
setColumnLines(content.columnLines || 0);
|
|
230
226
|
setDropCapEnabled(content.dropCap?.enabled || false);
|
|
231
|
-
// Ogilvy image options
|
|
232
|
-
setShowImage(content.showImage !== false);
|
|
233
|
-
setImageWidth(content.imageWidth || 100);
|
|
234
|
-
setImageWidthUnit(content.imageWidthUnit || '%');
|
|
235
227
|
// Ogilvy end comment options
|
|
236
228
|
setEndCommentFontSize(content.endCommentFontSize || 14);
|
|
237
229
|
setEndCommentItalic(content.endCommentItalic || false);
|
|
@@ -261,9 +253,6 @@ function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpd
|
|
|
261
253
|
columns,
|
|
262
254
|
columnLines: columnLines > 0 ? columnLines : undefined,
|
|
263
255
|
dropCap: { ...(content.dropCap || {}), enabled: dropCapEnabled },
|
|
264
|
-
showImage,
|
|
265
|
-
imageWidth,
|
|
266
|
-
imageWidthUnit,
|
|
267
256
|
endCommentFontSize,
|
|
268
257
|
endCommentItalic,
|
|
269
258
|
});
|
|
@@ -289,6 +278,6 @@ function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpd
|
|
|
289
278
|
};
|
|
290
279
|
if (!isOpen)
|
|
291
280
|
return null;
|
|
292
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: styles.overlay, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.dialog, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.header, children: [(0, jsx_runtime_1.jsxs)("h3", { style: styles.headerTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "tune" }), "Options de la section", (0, jsx_runtime_1.jsx)("span", { style: styles.layoutBadge, children: section.layoutType })] }), (0, jsx_runtime_1.jsx)("button", { style: styles.closeButton, onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "close" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.content, children: [section.layoutType === 'ogilvy' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "view_column" }), "Options Ogilvy"] }), (0, jsx_runtime_1.
|
|
281
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: styles.overlay, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.dialog, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.header, children: [(0, jsx_runtime_1.jsxs)("h3", { style: styles.headerTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "tune" }), "Options de la section", (0, jsx_runtime_1.jsx)("span", { style: styles.layoutBadge, children: section.layoutType })] }), (0, jsx_runtime_1.jsx)("button", { style: styles.closeButton, onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "close" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.content, children: [section.layoutType === 'ogilvy' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "view_column" }), "Options Ogilvy"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Colonnes" }), (0, jsx_runtime_1.jsxs)("select", { value: columns, onChange: (e) => setColumns(Number(e.target.value)), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: 2, children: "2 colonnes" }), (0, jsx_runtime_1.jsx)("option", { value: 3, children: "3 colonnes" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Hauteur (lignes)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: columnLines || '', onChange: (e) => setColumnLines(Number(e.target.value) || 0), placeholder: "auto", min: 5, max: 100, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: dropCapEnabled, onChange: (e) => setDropCapEnabled(e.target.checked) }), "Lettrine"] }) }), (0, jsx_runtime_1.jsx)("hr", { style: styles.separator }), (0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "comment" }), "Commentaire de fin"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Taille de la fonte (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: endCommentFontSize, onChange: (e) => setEndCommentFontSize(Number(e.target.value)), min: 8, max: 32, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: endCommentItalic, onChange: (e) => setEndCommentItalic(e.target.checked) }), "Italique"] }) })] })), section.layoutType === 'gallery' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "collections" }), "Options Galerie"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Mode d'affichage" }), (0, jsx_runtime_1.jsxs)("select", { value: galleryLayout, onChange: (e) => setGalleryLayout(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "grid", children: "Grille (hauteur fixe)" }), (0, jsx_runtime_1.jsx)("option", { value: "masonry", children: "Masonry (largeur fixe)" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Hauteur des images (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: imageHeight, onChange: (e) => setImageHeight(Number(e.target.value)), min: 50, max: 800, step: 10, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Alignement" }), (0, jsx_runtime_1.jsxs)("select", { value: galleryAlignment, onChange: (e) => setGalleryAlignment(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "center", children: "Centre" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" }), (0, jsx_runtime_1.jsx)("option", { value: "distribute", children: "Distribuer" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Espacement (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: galleryGap, onChange: (e) => setGalleryGap(Number(e.target.value)), min: 0, max: 50, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: showCaptions, onChange: (e) => setShowCaptions(e.target.checked) }), "Afficher les legendes"] }) }), showCaptions && ((0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Alignement des legendes" }), (0, jsx_runtime_1.jsxs)("select", { value: captionAlign, onChange: (e) => setCaptionAlign(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" })] })] }))] })), (0, jsx_runtime_1.jsx)("hr", { style: styles.separator }), (0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "palette" }), "Apparence"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Couleur de fond" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.colorRow, children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: backgroundColor || '#ffffff', onChange: (e) => setBackgroundColor(e.target.value), style: styles.colorInput }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: backgroundColor, onChange: (e) => setBackgroundColor(e.target.value), placeholder: "transparent", style: { ...styles.input, flex: 1 }, onFocus: handleInputFocus, onBlur: handleInputBlur }), (0, jsx_runtime_1.jsx)("button", { style: styles.resetButton, onClick: () => setBackgroundColor(''), children: "Reset" })] })] }), (0, jsx_runtime_1.jsx)(PaddingEditor_1.PaddingEditor, { value: padding, onChange: setPadding, label: "Padding" })] }), (0, jsx_runtime_1.jsx)("hr", { style: styles.separator }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsxs)("label", { style: styles.label, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: styles.labelIcon, children: "code" }), "Classe CSS"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: className, onChange: (e) => setClassName(e.target.value), placeholder: "ex: my-custom-class", style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.footer, children: [(0, jsx_runtime_1.jsx)("button", { style: { ...styles.button, ...styles.cancelButton }, onClick: onClose, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { style: { ...styles.button, ...styles.saveButton }, onClick: handleSave, children: "Enregistrer" })] })] }) }));
|
|
293
282
|
}
|
|
294
283
|
exports.default = SectionOptionsModal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OgilvyLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/OgilvyLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,
|
|
1
|
+
{"version":3,"file":"OgilvyLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/OgilvyLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,EAGd,MAAM,eAAe,CAAA;AACtB,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA8F9D,wBAAgB,0BAA0B,IAAI,aAAa,CAmB1D;AAyED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,CAAC,aAAa,CAAC,2CA4HrC"}
|
|
@@ -9,7 +9,6 @@ const page_1 = require("../types/page");
|
|
|
9
9
|
const index_1 = require("./index");
|
|
10
10
|
const RichTextEditor_1 = require("../components/RichTextEditor");
|
|
11
11
|
const RichTextViewer_1 = require("../components/RichTextViewer");
|
|
12
|
-
const ImageMetadataDialog_1 = require("../components/ImageMetadataDialog");
|
|
13
12
|
// ============================================
|
|
14
13
|
// Styles
|
|
15
14
|
// ============================================
|
|
@@ -20,34 +19,6 @@ const styles = {
|
|
|
20
19
|
gap: '1.5rem',
|
|
21
20
|
fontFamily: 'Georgia, serif',
|
|
22
21
|
},
|
|
23
|
-
imageContainer: {
|
|
24
|
-
width: '100%',
|
|
25
|
-
position: 'relative',
|
|
26
|
-
},
|
|
27
|
-
image: {
|
|
28
|
-
width: '100%',
|
|
29
|
-
height: 'auto',
|
|
30
|
-
display: 'block',
|
|
31
|
-
},
|
|
32
|
-
imagePlaceholder: {
|
|
33
|
-
width: '100%',
|
|
34
|
-
aspectRatio: '16/9',
|
|
35
|
-
backgroundColor: '#f0f0f0',
|
|
36
|
-
display: 'flex',
|
|
37
|
-
alignItems: 'center',
|
|
38
|
-
justifyContent: 'center',
|
|
39
|
-
color: '#999',
|
|
40
|
-
fontSize: '1rem',
|
|
41
|
-
cursor: 'pointer',
|
|
42
|
-
border: '2px dashed #ccc',
|
|
43
|
-
borderRadius: '4px',
|
|
44
|
-
},
|
|
45
|
-
legend: {
|
|
46
|
-
fontSize: '0.85rem',
|
|
47
|
-
color: '#666',
|
|
48
|
-
marginTop: '0.5rem',
|
|
49
|
-
fontStyle: 'italic',
|
|
50
|
-
},
|
|
51
22
|
titleContainer: {
|
|
52
23
|
textAlign: 'center',
|
|
53
24
|
},
|
|
@@ -89,10 +60,6 @@ const styles = {
|
|
|
89
60
|
fontFamily: 'inherit',
|
|
90
61
|
backgroundColor: 'transparent',
|
|
91
62
|
},
|
|
92
|
-
columnsContainer: {
|
|
93
|
-
display: 'grid',
|
|
94
|
-
gap: '2rem',
|
|
95
|
-
},
|
|
96
63
|
column: {
|
|
97
64
|
lineHeight: 1.7,
|
|
98
65
|
fontSize: '1rem',
|
|
@@ -131,15 +98,13 @@ const styles = {
|
|
|
131
98
|
// ============================================
|
|
132
99
|
function createDefaultOgilvyContent() {
|
|
133
100
|
return {
|
|
134
|
-
image
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
},
|
|
138
|
-
showImage: true,
|
|
101
|
+
// Keep image fields for backward compatibility but not used
|
|
102
|
+
image: { src: '', altText: '' },
|
|
103
|
+
showImage: false,
|
|
139
104
|
imageWidth: 100,
|
|
140
105
|
imageWidthUnit: '%',
|
|
141
|
-
legend: '',
|
|
142
|
-
legendAsterisk: false,
|
|
106
|
+
legend: '',
|
|
107
|
+
legendAsterisk: false,
|
|
143
108
|
title: 'Titre de la section',
|
|
144
109
|
subtitle: 'Sous-titre descriptif',
|
|
145
110
|
bodyText: '',
|
|
@@ -170,65 +135,12 @@ function EditableText({ value, onChange, isEditing, placeholder = 'Cliquez pour
|
|
|
170
135
|
}
|
|
171
136
|
return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, style: combinedStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }));
|
|
172
137
|
}
|
|
173
|
-
function ImageDisplay({ image, isEditing, imageWidth, imageWidthUnit, onClickEdit }) {
|
|
174
|
-
const imageStyle = {
|
|
175
|
-
...styles.image,
|
|
176
|
-
width: `${imageWidth}${imageWidthUnit}`,
|
|
177
|
-
cursor: isEditing ? 'pointer' : 'default',
|
|
178
|
-
};
|
|
179
|
-
if (!image.src) {
|
|
180
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: styles.imagePlaceholder, onClick: onClickEdit, children: isEditing ? 'Cliquez pour ajouter une image' : 'Aucune image' }));
|
|
181
|
-
}
|
|
182
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: { ...styles.imageContainer, width: `${imageWidth}${imageWidthUnit}` }, children: (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.altText || '', style: imageStyle, onClick: onClickEdit }) }));
|
|
183
|
-
}
|
|
184
|
-
function DropCapText({ text, dropCap }) {
|
|
185
|
-
if (!text || !dropCap.enabled) {
|
|
186
|
-
return (0, jsx_runtime_1.jsx)("div", { style: styles.column, children: text });
|
|
187
|
-
}
|
|
188
|
-
const firstChar = text.charAt(0);
|
|
189
|
-
const restOfText = text.slice(1);
|
|
190
|
-
const dropCapStyle = {
|
|
191
|
-
...styles.dropCap,
|
|
192
|
-
fontSize: `${dropCap.fontSize || 3}em`,
|
|
193
|
-
fontFamily: dropCap.fontFamily || 'inherit',
|
|
194
|
-
color: dropCap.color || 'inherit',
|
|
195
|
-
};
|
|
196
|
-
if (dropCap.type === 'icon' && dropCap.iconUrl) {
|
|
197
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: styles.column, children: [(0, jsx_runtime_1.jsx)("img", { src: dropCap.iconUrl, alt: "", style: {
|
|
198
|
-
float: 'left',
|
|
199
|
-
width: `${dropCap.iconSize || 48}px`,
|
|
200
|
-
height: `${dropCap.iconSize || 48}px`,
|
|
201
|
-
marginRight: '0.5em',
|
|
202
|
-
marginTop: '0.1em',
|
|
203
|
-
} }), text] }));
|
|
204
|
-
}
|
|
205
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: styles.column, children: [(0, jsx_runtime_1.jsx)("span", { style: dropCapStyle, children: firstChar }), restOfText] }));
|
|
206
|
-
}
|
|
207
|
-
function Columns({ text, columns, dropCap }) {
|
|
208
|
-
// Pour l'instant, on divise simplement le texte en paragraphes
|
|
209
|
-
// TODO: Intégrer RichTextEditor pour l'édition du corps de texte
|
|
210
|
-
const paragraphs = text.split('\n\n').filter(Boolean);
|
|
211
|
-
// Distribuer les paragraphes dans les colonnes
|
|
212
|
-
const columnTexts = Array(columns).fill('');
|
|
213
|
-
paragraphs.forEach((para, idx) => {
|
|
214
|
-
columnTexts[idx % columns] += (columnTexts[idx % columns] ? '\n\n' : '') + para;
|
|
215
|
-
});
|
|
216
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
217
|
-
...styles.columnsContainer,
|
|
218
|
-
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
219
|
-
}, children: columnTexts.map((colText, idx) => ((0, jsx_runtime_1.jsx)("div", { children: idx === 0 ? ((0, jsx_runtime_1.jsx)(DropCapText, { text: colText, dropCap: dropCap })) : ((0, jsx_runtime_1.jsx)("div", { style: styles.column, children: colText })) }, idx))) }));
|
|
220
|
-
}
|
|
221
138
|
// ============================================
|
|
222
139
|
// Main Layout Component
|
|
223
140
|
// ============================================
|
|
224
141
|
function OgilvyLayout({ section, isEditing, onContentChange, }) {
|
|
225
142
|
const content = section.content;
|
|
226
|
-
// Dialog state - rendered at root level like GalleryLayout
|
|
227
|
-
const [showImageDialog, setShowImageDialog] = (0, react_1.useState)(false);
|
|
228
143
|
// Defaults for backward compatibility
|
|
229
|
-
const showImage = content.showImage !== false;
|
|
230
|
-
const imageWidth = content.imageWidth || 100;
|
|
231
|
-
const imageWidthUnit = content.imageWidthUnit || '%';
|
|
232
144
|
const endCommentFontSize = content.endCommentFontSize || 14;
|
|
233
145
|
const endCommentItalic = content.endCommentItalic || false;
|
|
234
146
|
const updateField = (0, react_1.useCallback)((field, value) => {
|
|
@@ -237,46 +149,33 @@ function OgilvyLayout({ section, isEditing, onContentChange, }) {
|
|
|
237
149
|
[field]: value,
|
|
238
150
|
});
|
|
239
151
|
}, [content, onContentChange]);
|
|
240
|
-
// Handle image save from dialog
|
|
241
|
-
const handleSaveImage = (0, react_1.useCallback)((metadata) => {
|
|
242
|
-
const newImage = {
|
|
243
|
-
src: metadata.src,
|
|
244
|
-
altText: metadata.alt || '',
|
|
245
|
-
title: metadata.title,
|
|
246
|
-
photographer: metadata.photographer,
|
|
247
|
-
copyright: metadata.copyright,
|
|
248
|
-
comment: metadata.comment,
|
|
249
|
-
};
|
|
250
|
-
updateField('image', newImage);
|
|
251
|
-
setShowImageDialog(false);
|
|
252
|
-
}, [updateField]);
|
|
253
152
|
const endCommentStyle = {
|
|
254
153
|
...styles.endComment,
|
|
255
154
|
fontSize: `${endCommentFontSize}px`,
|
|
256
155
|
fontStyle: endCommentItalic ? 'italic' : 'normal',
|
|
257
156
|
};
|
|
258
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [
|
|
157
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.titleContainer, children: [(0, jsx_runtime_1.jsx)(EditableText, { value: content.title, onChange: (v) => updateField('title', v), isEditing: isEditing, placeholder: "Titre", style: styles.title, inputStyle: styles.titleInput, as: "h1" }), (0, jsx_runtime_1.jsx)(EditableText, { value: content.subtitle, onChange: (v) => updateField('subtitle', v), isEditing: isEditing, placeholder: "Sous-titre", style: styles.subtitle, inputStyle: styles.subtitleInput, as: "h2" })] }), (0, jsx_runtime_1.jsxs)("div", { className: content.dropCap.enabled ? 'ogilvy-drop-cap' : '', style: {
|
|
259
158
|
['--drop-cap-size']: `${content.dropCap.fontSize || 3}em`,
|
|
260
159
|
['--drop-cap-color']: content.dropCap.color || 'inherit',
|
|
261
160
|
['--drop-cap-font']: content.dropCap.fontFamily || 'Georgia, serif',
|
|
262
161
|
}, children: [(0, jsx_runtime_1.jsx)("style", { children: `
|
|
263
162
|
.ogilvy-drop-cap .editor-paragraph:first-of-type::first-letter {
|
|
264
|
-
|
|
163
|
+
-webkit-initial-letter: 3;
|
|
164
|
+
initial-letter: 3;
|
|
265
165
|
font-size: var(--drop-cap-size, 3em);
|
|
266
166
|
font-family: var(--drop-cap-font, Georgia, serif);
|
|
267
167
|
color: var(--drop-cap-color, inherit);
|
|
268
|
-
line-height: 0.8;
|
|
269
168
|
margin-right: 0.1em;
|
|
270
|
-
margin-top: 0.1em;
|
|
271
169
|
}
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
170
|
+
/* Fallback for browsers without initial-letter support */
|
|
171
|
+
@supports not (initial-letter: 3) {
|
|
172
|
+
.ogilvy-drop-cap .editor-paragraph:first-of-type::first-letter {
|
|
173
|
+
float: left;
|
|
174
|
+
line-height: 0.8;
|
|
175
|
+
margin-top: 0.1em;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
` }), isEditing ? ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { initialContent: content.bodyText, onChange: (_html, json) => updateField('bodyText', json), placeholder: "Corps du texte...", columns: content.columns, minHeight: content.columnLines ? `calc(${content.columnLines * 1.7}em + 60px)` : "200px", autoGrow: !content.columnLines })) : ((0, jsx_runtime_1.jsx)(RichTextViewer_1.RichTextViewer, { content: content.bodyText, columns: content.columns }))] }), (content.footnote || (isEditing && content.legendAsterisk)) && ((0, jsx_runtime_1.jsx)("div", { style: styles.footnote, children: (0, jsx_runtime_1.jsx)(EditableText, { value: content.footnote || '', onChange: (v) => updateField('footnote', v), isEditing: isEditing, placeholder: "* Note explicative...", style: styles.footnote }) })), (content.endComment || isEditing) && ((0, jsx_runtime_1.jsx)("div", { style: endCommentStyle, children: isEditing ? ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { initialContent: content.endComment || '', onChange: (_html, json) => updateField('endComment', json), placeholder: "Commentaire de fin de section...", minHeight: "80px", autoGrow: true })) : (content.endComment && ((0, jsx_runtime_1.jsx)(RichTextViewer_1.RichTextViewer, { content: content.endComment }))) }))] }));
|
|
280
179
|
}
|
|
281
180
|
// ============================================
|
|
282
181
|
// Register Layout
|
|
@@ -284,7 +183,7 @@ function OgilvyLayout({ section, isEditing, onContentChange, }) {
|
|
|
284
183
|
(0, index_1.registerLayout)({
|
|
285
184
|
type: 'ogilvy',
|
|
286
185
|
name: 'Ogilvy',
|
|
287
|
-
description: '
|
|
186
|
+
description: 'Titre + sous-titre + texte en colonnes avec lettrine',
|
|
288
187
|
icon: '📰',
|
|
289
188
|
component: OgilvyLayout,
|
|
290
189
|
defaultContent: createDefaultOgilvyContent,
|