create-crm-tmp 2.0.0 → 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,6 +88,30 @@ 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
@@ -143,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(),
@@ -164,11 +198,19 @@ function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null
           try {
             src = await imageExtension.config.uploadHandler(file);
           } catch (error) {
+            // 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 = '';
@@ -181,7 +223,7 @@ function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null
         commands.setImageCaption(newCaption);
       },
     }),
-    [commands],
+    [commands, maxImageBytes, toast],
   );
 
   return { handlers, fileInputRef };
@@ -268,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>
         </>
       ) : (
         <>
@@ -406,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,
@@ -589,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">
@@ -722,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);
@@ -752,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);
       },
@@ -774,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],
   );
@@ -803,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' }}>
@@ -823,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');
 
@@ -860,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,4 +1,4 @@
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface EmailTemplateProps {
   firstName: string;
@@ -29,7 +29,7 @@ export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+          dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
         />
       )}
     </div>

package/template/src/components/global-search.tsx

@@ -110,9 +110,7 @@ export function GlobalSearch() {
 
   const hasResults =
     filteredPages.length > 0 ||
-    (crmResults &&
-      (crmResults.contacts.length > 0 ||
-        crmResults.companies.length > 0));
+    (crmResults && (crmResults.contacts.length > 0 || crmResults.companies.length > 0));
 
   const navigate = useCallback(
     (href: string) => {
@@ -169,7 +167,7 @@ export function GlobalSearch() {
   return (
     <div ref={containerRef} className="relative hidden w-full max-w-xl sm:block">
       <div className="relative">
-        <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Search aria-hidden="true" className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
         <input
           ref={inputRef}
           type="text"
@@ -182,8 +180,8 @@ export function GlobalSearch() {
             if (query.trim().length > 0) setIsOpen(true);
           }}
           onKeyDown={handleKeyDown}
-          placeholder="Rechercher Gold Blessing"
-          className="w-full rounded-lg border border-border bg-muted py-2 pr-4 pl-9 text-sm text-foreground transition-colors outline-none placeholder:text-muted-foreground focus:border-primary/40 focus:bg-background focus:ring-1 focus:ring-primary/40"
+          placeholder="Rechercher..."
+          className="border-border bg-muted text-foreground placeholder:text-muted-foreground focus-visible:border-primary/40 focus-visible:bg-background focus-visible:ring-primary/40 w-full rounded-lg border py-2 pr-4 pl-9 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
           role="combobox"
           aria-expanded={showDropdown}
           aria-controls="global-search-results"
@@ -200,13 +198,13 @@ export function GlobalSearch() {
         <div
           id="global-search-results"
           role="listbox"
-          className="absolute top-full left-0 z-50 mt-1 max-h-112 w-full overflow-y-auto rounded-xl border border-border bg-popover shadow-(--shadow-dropdown)"
+          className="border-border bg-popover ui-dropdown-enter absolute top-full left-0 z-50 mt-1 max-h-112 w-full overflow-y-auto rounded-xl border shadow-(--shadow-dropdown)"
         >
           {/* Pages */}
           {filteredPages.length > 0 && (
             <div>
               <div className="px-3 pt-3 pb-1">
-                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                   Pages
                 </span>
               </div>
@@ -222,17 +220,19 @@ export function GlobalSearch() {
                     id={`global-search-option-${idx}`}
                     onClick={() => navigate(page.href)}
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm text-popover-foreground transition-colors duration-200 hover:bg-accent',
+                      'text-popover-foreground hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
                       focusedIndex === idx && 'bg-accent',
                     )}
                     role="option"
                     aria-selected={focusedIndex === idx}
                   >
-                    <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <Icon aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
                     <div className="min-w-0 flex-1">
-                      <span className="block truncate font-medium text-popover-foreground">{page.name}</span>
+                      <span className="text-popover-foreground block truncate font-medium">
+                        {page.name}
+                      </span>
                       {page.parentLabel && (
-                        <span className="block truncate text-xs text-muted-foreground">
+                        <span className="text-muted-foreground block truncate text-xs">
                           {page.parentLabel} {'>'} {page.name}
                         </span>
                       )}
@@ -245,7 +245,7 @@ export function GlobalSearch() {
 
           {/* CRM loading */}
           {shouldFetchCRM && crmLoading && !crmResults && (
-            <div className="flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground">
+            <div className="text-muted-foreground flex items-center justify-center gap-2 px-3 py-6 text-sm">
               <Loader2 className="h-4 w-4 animate-spin" />
               Recherche...
             </div>
@@ -257,10 +257,10 @@ export function GlobalSearch() {
               <div
                 className={cn(
                   'px-3 pt-3 pb-1',
-                  filteredPages.length > 0 && 'border-t border-border',
+                  filteredPages.length > 0 && 'border-border border-t',
                 )}
               >
-                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                   Contacts
                 </span>
               </div>
@@ -278,17 +278,17 @@ export function GlobalSearch() {
                     id={`global-search-option-${idx}`}
                     onClick={() => navigate(`/contacts/${contact.id}`)}
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200 hover:bg-accent',
+                      'hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
                       focusedIndex === idx && 'bg-accent',
                     )}
                     role="option"
                     aria-selected={focusedIndex === idx}
                   >
-                    <Users className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <Users aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
                     <div className="min-w-0 flex-1">
-                      <span className="font-medium text-popover-foreground">{name}</span>
+                      <span className="text-popover-foreground font-medium">{name}</span>
                       {(contact.email || contact.phone) && (
-                        <span className="ml-2 truncate text-xs text-muted-foreground">
+                        <span className="text-muted-foreground ml-2 truncate text-xs">
                           {contact.email || contact.phone}
                         </span>
                       )}
@@ -302,8 +302,8 @@ export function GlobalSearch() {
           {/* Entreprises */}
           {crmResults && crmResults.companies.length > 0 && (
             <div>
-              <div className="border-t border-border px-3 pt-3 pb-1">
-                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+              <div className="border-border border-t px-3 pt-3 pb-1">
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                   Entreprises
                 </span>
               </div>
@@ -318,17 +318,19 @@ export function GlobalSearch() {
                     id={`global-search-option-${idx}`}
                     onClick={() => navigate(`/contacts/companies/${company.id}`)}
                     className={cn(
-                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200 hover:bg-accent',
+                      'hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
                       focusedIndex === idx && 'bg-accent',
                     )}
                     role="option"
                     aria-selected={focusedIndex === idx}
                   >
-                    <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <Building2 aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
                     <div className="min-w-0 flex-1">
-                      <span className="font-medium text-popover-foreground">{company.name}</span>
+                      <span className="text-popover-foreground font-medium">{company.name}</span>
                       {company.email && (
-                        <span className="ml-2 truncate text-xs text-muted-foreground">{company.email}</span>
+                        <span className="text-muted-foreground ml-2 truncate text-xs">
+                          {company.email}
+                        </span>
                       )}
                     </div>
                   </button>
@@ -339,15 +341,15 @@ export function GlobalSearch() {
 
           {/* Aucun résultat */}
           {!crmLoading && !hasResults && query.trim().length > 0 && (
-            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+            <div className="text-muted-foreground px-3 py-6 text-center text-sm">
               Aucun résultat pour &quot;{query.trim()}&quot;
             </div>
           )}
 
           {/* Recherche trop courte pour le CRM */}
           {query.trim().length === 1 && filteredPages.length === 0 && (
-            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
-              <FileText className="mx-auto mb-1 h-5 w-5 text-muted-foreground/70" />
+            <div className="text-muted-foreground px-3 py-6 text-center text-sm">
+              <FileText aria-hidden="true" className="text-muted-foreground/70 mx-auto mb-1 h-5 w-5" />
               Tapez au moins 2 caractères pour rechercher dans le CRM
             </div>
           )}