create-crm-tmp 1.1.3 → 2.1.0

package/template/src/components/editor.tsx

@@ -64,9 +64,6 @@ import {
   Code,
   Terminal,
   Table as TableIcon,
-  FileCode,
-  Eye,
-  Pencil,
   Type,
   Quote,
   Indent,
@@ -74,8 +71,16 @@ import {
 } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { commandsToCommandPaletteItems, registerKeyboardShortcuts } from './ui/commands';
-import { Select, Dropdown, Dialog } from './ui/components';
+import { Select, Dialog } from './ui/components';
 import { defaultTheme } from './ui/theme';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
+import { assertImageFileWithinLimit } from '@/lib/editor-image-limits';
+import { uploadEditorImage } from './editor/upload-editor-image';
+import {
+  applyOrderedImageLayoutAfterImport,
+  mergeImgDimensionAttrsIntoStyle,
+} from '@/lib/editor-html-image-dimensions';
 
 type TableConfig = {
   rows?: number;
@@ -83,8 +88,36 @@ type TableConfig = {
   includeHeaders?: boolean;
 };
 
+function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === 'string') {
+        resolve(result);
+      } else {
+        reject(new Error('Impossible de convertir le fichier en data URL'));
+      }
+    };
+    reader.onerror = () =>
+      reject(reader.error ?? new Error('Erreur de lecture du fichier image'));
+    reader.readAsDataURL(file);
+  });
+}
+
+async function imageFileToDataUrl(file: File, maxImageBytes?: number): Promise<string> {
+  if (maxImageBytes !== undefined) {
+    assertImageFileWithinLimit(file, maxImageBytes);
+  }
+  return fileToDataUrl(file);
+}
+
 // Create markdown extension instance
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Lexical duplicate types between packages
 const markdownExt = new MarkdownExtension().configure({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore - Lexical duplicate types between packages
   customTransformers: ALL_MARKDOWN_TRANSFORMERS,
 });
 
@@ -139,16 +172,21 @@ export interface DefaultTemplateRef {
 }
 
 // Hook for image handling logic
-function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null) {
+function useImageHandlers(
+  commands: EditorCommands,
+  editor: LexicalEditor | null,
+  maxImageBytes?: number,
+) {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const toast = useAppToast();
 
   const handlers = useMemo(
     () => ({
       insertFromUrl: () => {
-        const src = prompt('Enter image URL:');
+        const src = prompt("URL de l'image (https://…) :");
         if (!src) return;
-        const alt = prompt('Enter alt text:') || '';
-        const caption = prompt('Enter caption (optional):') || undefined;
+        const alt = prompt('Texte alternatif (accessibilité) :') || '';
+        const caption = prompt('Légende (optionnel) :') || undefined;
         commands.insertImage({ src, alt, caption });
       },
       insertFromFile: () => fileInputRef.current?.click(),
@@ -160,11 +198,19 @@ function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null
           try {
             src = await imageExtension.config.uploadHandler(file);
           } catch (error) {
-            alert('Failed to upload image');
+            // Toast déjà affiché par uploadHandler (signature / collage)
+            console.error('Failed to upload image:', error);
+            e.target.value = '';
             return;
           }
         } else {
-          src = URL.createObjectURL(file);
+          try {
+            src = await imageFileToDataUrl(file, maxImageBytes);
+          } catch (error) {
+            toast.error(devToast("Impossible d'ajouter cette image.", error));
+            e.target.value = '';
+            return;
+          }
         }
         commands.insertImage({ src, alt: file.name, file });
         e.target.value = '';
@@ -177,7 +223,7 @@ function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null
         commands.setImageCaption(newCaption);
       },
     }),
-    [commands],
+    [commands, maxImageBytes, toast],
   );
 
   return { handlers, fileInputRef };
@@ -264,6 +310,10 @@ function FloatingToolbarRenderer() {
           >
             <Type size={14} />
           </button>
+          <div className="bg-border mx-1 h-6 w-px" />
+          <span className="text-muted-foreground px-1.5 text-[11px] leading-6 whitespace-nowrap">
+            Shift + glisser pour garder le ratio
+          </span>
         </>
       ) : (
         <>
@@ -402,15 +452,15 @@ function Toolbar({
   commands,
   hasExtension,
   activeStates,
+  maxImageBytes,
 }: {
   commands: EditorCommands;
   hasExtension: (name: ExtensionNames) => boolean;
   activeStates: EditorStateQueries;
+  maxImageBytes?: number;
 }) {
   const { lexical: editor } = useEditor();
-  const { handlers, fileInputRef } = useImageHandlers(commands, editor);
-  const [showImageDropdown, setShowImageDropdown] = useState(false);
-  const [showAlignDropdown, setShowAlignDropdown] = useState(false);
+  const { handlers, fileInputRef } = useImageHandlers(commands, editor, maxImageBytes);
   const [showTableDialog, setShowTableDialog] = useState(false);
   const [tableConfig, setTableConfig] = useState<TableConfig>({
     rows: 3,
@@ -585,6 +635,35 @@ function Toolbar({
           </div>
         )}
 
+        {/* Image : fichier local ou URL (handlers étaient définis mais non exposés dans la barre) */}
+        {hasExtension('image') && (
+          <div className="lexkit-toolbar-section">
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handlers.handleUpload}
+            />
+            <button
+              type="button"
+              onClick={() => handlers.insertFromFile()}
+              className="lexkit-toolbar-button"
+              title="Insérer une image depuis un fichier"
+            >
+              <Upload size={16} />
+            </button>
+            <button
+              type="button"
+              onClick={() => handlers.insertFromUrl()}
+              className="lexkit-toolbar-button"
+              title="Insérer une image depuis une URL"
+            >
+              <ImageIcon size={16} />
+            </button>
+          </div>
+        )}
+
         {/* Table */}
         {hasExtension('table') && (
           <div className="lexkit-toolbar-section">
@@ -635,13 +714,18 @@ function Toolbar({
             <label htmlFor="table-rows">Rows:</label>
             <input
               id="table-rows"
-              type="number"
-              min="1"
-              max="20"
+              type="text"
+              inputMode="numeric"
               value={tableConfig.rows}
-              onChange={(e) =>
-                setTableConfig((prev) => ({ ...prev, rows: parseInt(e.target.value) || 1 }))
-              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === '' || /^\d+$/.test(value)) {
+                  const num = parseInt(value) || 1;
+                  if (num >= 1 && num <= 20) {
+                    setTableConfig((prev) => ({ ...prev, rows: num }));
+                  }
+                }
+              }}
               className="lexkit-input"
             />
           </div>
@@ -649,13 +733,18 @@ function Toolbar({
             <label htmlFor="table-columns">Columns:</label>
             <input
               id="table-columns"
-              type="number"
-              min="1"
-              max="20"
+              type="text"
+              inputMode="numeric"
               value={tableConfig.columns}
-              onChange={(e) =>
-                setTableConfig((prev) => ({ ...prev, columns: parseInt(e.target.value) || 1 }))
-              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === '' || /^\d+$/.test(value)) {
+                  const num = parseInt(value) || 1;
+                  if (num >= 1 && num <= 20) {
+                    setTableConfig((prev) => ({ ...prev, columns: num }));
+                  }
+                }
+              }}
               className="lexkit-input"
             />
           </div>
@@ -708,11 +797,13 @@ function EditorContent({
   isDark,
   toggleTheme,
   onReady,
+  maxImageBytes,
 }: {
   className?: string;
   isDark: boolean;
   toggleTheme: () => void;
   onReady?: (methods: DefaultTemplateRef) => void;
+  maxImageBytes?: number;
 }) {
   const { commands, hasExtension, activeStates, lexical: editor } = useEditor();
   const commandsRef = useRef<EditorCommands>(commands);
@@ -738,10 +829,46 @@ function EditorContent({
       },
       injectHTML: (content: string) => {
         setTimeout(() => {
-          if (editor) {
-            editor.update(() => {
-              commandsRef.current.importFromHTML(content, { preventFocus: true });
-            });
+          if (!editor) return;
+          const safeContent = typeof content === 'string' ? content.trim() : '';
+          const containsHtmlTag = /<[^>]+>/.test(safeContent);
+          const plainParagraph = `<p>${safeContent
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#39;')
+            .replaceAll('\n', '<br />')}</p>`;
+
+          const contentForImport = !safeContent
+            ? '<p></p>'
+            : containsHtmlTag
+              ? mergeImgDimensionAttrsIntoStyle(safeContent)
+              : plainParagraph;
+
+          const afterImport = () => {
+            if (!containsHtmlTag || !contentForImport.includes('<img')) return;
+            applyOrderedImageLayoutAfterImport(editor, contentForImport);
+          };
+
+          try {
+            const result = commandsRef.current.importFromHTML(contentForImport, {
+              preventFocus: true,
+            }) as Promise<void> | void;
+
+            if (result && typeof (result as Promise<void>).then === 'function') {
+              (result as Promise<void>)
+                .then(afterImport)
+                .catch((error) => {
+                  console.error('Erreur import HTML éditeur, fallback contenu vide:', error);
+                  void commandsRef.current.importFromHTML('<p></p>', { preventFocus: true });
+                });
+            } else {
+              afterImport();
+            }
+          } catch (error) {
+            console.error('Erreur injectHTML éditeur:', error);
+            void commandsRef.current.importFromHTML('<p></p>', { preventFocus: true });
           }
         }, 100);
       },
@@ -760,7 +887,14 @@ function EditorContent({
         }
       },
       getMarkdown: () => commandsRef.current.exportToMarkdown(),
-      getHTML: () => commandsRef.current.exportToHTML(),
+      getHTML: () => {
+        try {
+          const raw = commandsRef.current.exportToHTML() || '';
+          return mergeImgDimensionAttrsIntoStyle(raw);
+        } catch {
+          return commandsRef.current.exportToHTML() || '';
+        }
+      },
     }),
     [editor],
   );
@@ -789,7 +923,12 @@ function EditorContent({
   return (
     <>
       <div className="lexkit-editor-header">
-        <Toolbar commands={commands} hasExtension={hasExtension} activeStates={activeStates} />
+        <Toolbar
+          commands={commands}
+          hasExtension={hasExtension}
+          activeStates={activeStates}
+          maxImageBytes={maxImageBytes}
+        />
       </div>
       <div className="lexkit-editor">
         <div className="flex flex-1 flex-col" style={{ display: 'flex' }}>
@@ -809,23 +948,36 @@ function EditorContent({
 interface DefaultTemplateProps {
   className?: string;
   onReady?: (methods: DefaultTemplateRef) => void;
+  /** Si défini, refuse les images plus lourdes (fichier + collage). */
+  maxImageBytes?: number;
 }
 
 export const Editor = forwardRef<DefaultTemplateRef, DefaultTemplateProps>(
-  ({ className, onReady }, ref) => {
+  ({ className, onReady, maxImageBytes }, ref) => {
     const [editorTheme, setEditorTheme] = useState<'light' | 'dark'>('light');
+    const toast = useAppToast();
 
     const isDark = editorTheme === 'dark';
 
     useEffect(() => {
       imageExtension.configure({
-        uploadHandler: async (file: File) => URL.createObjectURL(file),
+        uploadHandler: async (file: File) => {
+          if (maxImageBytes !== undefined) {
+            assertImageFileWithinLimit(file, maxImageBytes);
+          }
+          try {
+            return await uploadEditorImage(file);
+          } catch {
+            // Fallback: data URL (base64)
+            return imageFileToDataUrl(file, maxImageBytes);
+          }
+        },
         defaultAlignment: 'center',
         resizable: true,
         pasteListener: { insert: true, replace: true },
         debug: false,
       });
-    }, []);
+    }, [maxImageBytes, toast]);
 
     const toggleTheme = () => setEditorTheme(isDark ? 'light' : 'dark');
 
@@ -846,6 +998,7 @@ export const Editor = forwardRef<DefaultTemplateRef, DefaultTemplateProps>(
             isDark={isDark}
             toggleTheme={toggleTheme}
             onReady={handleReady}
+            maxImageBytes={maxImageBytes}
           />
         </Provider>
       </div>

package/template/src/components/email-template.tsx

@@ -1,3 +1,5 @@
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
+
 interface EmailTemplateProps {
   firstName: string;
   signature?: string | null;
@@ -7,7 +9,7 @@ export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
   return (
     <div
       style={{
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
         padding: '20px',
         maxWidth: '600px',
         margin: '0 auto',
@@ -27,7 +29,7 @@ export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: signature }}
+          dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
         />
       )}
     </div>