@consilioweb/payload-support 0.8.2 → 0.9.4

package/src/components/RichTextEditor/index.tsx

@@ -0,0 +1,261 @@
+'use client'
+
+import React, { useRef, useCallback, useState, useImperativeHandle, forwardRef, useEffect } from 'react'
+
+export interface RichTextEditorHandle {
+  clear: () => void
+  setContent: (html: string) => void
+  getHtml: () => string
+  getPlainText: () => string
+  focus: () => void
+}
+
+interface Props {
+  initialValue?: string
+  onChange: (html: string, plainText: string) => void
+  placeholder?: string
+  minHeight?: number
+  onFileUpload?: (file: File) => Promise<string | null>
+  borderColor?: string
+  focusBorderColor?: string
+}
+
+export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function RichTextEditor(
+  {
+    initialValue = '',
+    onChange,
+    placeholder = 'Écrivez votre message...',
+    minHeight = 150,
+    onFileUpload,
+    borderColor = '#000',
+    focusBorderColor = '#00E5FF',
+  },
+  ref,
+) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [focused, setFocused] = useState(false)
+  const [isEmpty, setIsEmpty] = useState(!initialValue)
+
+  // Set initial content via ref (avoids React reconciliation issues with contentEditable)
+  useEffect(() => {
+    if (editorRef.current && initialValue) {
+      editorRef.current.innerHTML = initialValue
+      const text = editorRef.current.innerText?.trim() || ''
+      setIsEmpty(!text && !editorRef.current.querySelector('img'))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const emitChange = useCallback(() => {
+    if (!editorRef.current) return
+    const html = editorRef.current.innerHTML
+    const text = editorRef.current.innerText?.trim() || ''
+    const empty = !text && !editorRef.current.querySelector('img')
+    setIsEmpty(empty)
+    onChange(empty ? '' : html, text)
+  }, [onChange])
+
+  const exec = useCallback((command: string, value?: string) => {
+    document.execCommand(command, false, value)
+    editorRef.current?.focus()
+    setTimeout(emitChange, 0)
+  }, [emitChange])
+
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = ''
+        setIsEmpty(true)
+        onChange('', '')
+      }
+    },
+    setContent: (html: string) => {
+      if (editorRef.current) {
+        editorRef.current.innerHTML = html
+        const text = editorRef.current.innerText?.trim() || ''
+        setIsEmpty(!text && !editorRef.current.querySelector('img'))
+        onChange(html, text)
+      }
+    },
+    getHtml: () => editorRef.current?.innerHTML || '',
+    getPlainText: () => editorRef.current?.innerText?.trim() || '',
+    focus: () => editorRef.current?.focus(),
+  }))
+
+  const handleInsertLink = useCallback(() => {
+    const sel = window.getSelection()
+    if (!sel || sel.isCollapsed) {
+      const url = prompt('URL du lien :')
+      if (!url) return
+      const text = prompt('Texte du lien :', url) || url
+      const safeUrl = url.replace(/"/g, '&quot;')
+      const safeText = text.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      document.execCommand('insertHTML', false, `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${safeText}</a>`)
+      editorRef.current?.focus()
+      setTimeout(emitChange, 0)
+    } else {
+      const url = prompt('URL du lien :')
+      if (url) exec('createLink', url)
+    }
+  }, [exec, emitChange])
+
+  const handleImageClick = useCallback(() => {
+    if (onFileUpload) {
+      fileInputRef.current?.click()
+    } else {
+      const url = prompt('URL de l\'image :')
+      if (url) {
+        const safeUrl = url.replace(/"/g, '&quot;')
+        document.execCommand('insertHTML', false, `<img src="${safeUrl}" alt="Image" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`)
+        editorRef.current?.focus()
+        setTimeout(emitChange, 0)
+      }
+    }
+  }, [onFileUpload, emitChange])
+
+  const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || !onFileUpload) return
+    for (const file of Array.from(e.target.files)) {
+      if (!file.type.startsWith('image/')) continue
+      const url = await onFileUpload(file)
+      if (url) {
+        const safeName = file.name.replace(/"/g, '&quot;')
+        document.execCommand('insertHTML', false, `<img src="${url}" alt="${safeName}" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`)
+        editorRef.current?.focus()
+        setTimeout(emitChange, 0)
+      }
+    }
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }, [onFileUpload, emitChange])
+
+  const handlePaste = useCallback(async (e: React.ClipboardEvent) => {
+    if (!onFileUpload) return
+    const items = e.clipboardData?.items
+    if (!items) return
+    for (const item of Array.from(items)) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault()
+        const file = item.getAsFile()
+        if (file) {
+          const url = await onFileUpload(file)
+          if (url) {
+            document.execCommand('insertHTML', false, `<img src="${url}" alt="Image collée" style="max-width:100%;height:auto;border-radius:8px;margin:8px 0;" />`)
+            editorRef.current?.focus()
+            setTimeout(emitChange, 0)
+          }
+        }
+        return
+      }
+    }
+  }, [onFileUpload, emitChange])
+
+  const btn: React.CSSProperties = {
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+    padding: '8px 10px',
+    fontSize: '13px',
+    fontWeight: 700,
+    color: '#555',
+    borderRadius: '5px',
+    lineHeight: 1,
+    minHeight: '44px',
+    minWidth: '44px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+
+  const sep: React.CSSProperties = {
+    width: '1px',
+    height: '18px',
+    background: '#d1d5db',
+    margin: '0 4px',
+    alignSelf: 'center',
+  }
+
+  return (
+    <div style={{ border: `3px solid ${focused ? focusBorderColor : borderColor}`, borderRadius: '12px', overflow: 'hidden', transition: 'border-color 0.15s', background: '#fff' }}>
+      <style>{`
+        .rte-toolbar button:hover { background: #e5e7eb !important; }
+        .rte-editor blockquote { border-left: 4px solid #00E5FF; margin: 8px 0; padding: 8px 16px; background: #f0f9ff; border-radius: 0 6px 6px 0; }
+        .rte-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
+        .rte-editor a { color: #00838f; text-decoration: underline; }
+        .rte-editor ul, .rte-editor ol { margin: 8px 0; padding-left: 24px; }
+        .rte-editor li { margin: 2px 0; }
+        .rte-editor p { margin: 0 0 6px 0; }
+      `}</style>
+
+      {/* Toolbar */}
+      <div className="rte-toolbar" style={{ display: 'flex', alignItems: 'center', gap: '2px', padding: '6px 10px', borderBottom: '2px solid #e5e7eb', backgroundColor: '#f9fafb', flexWrap: 'wrap' }}>
+        <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); exec('bold') }} title="Gras (Ctrl+B)">
+          <strong>B</strong>
+        </button>
+        <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); exec('italic') }} title="Italique (Ctrl+I)">
+          <em style={{ fontStyle: 'italic' }}>I</em>
+        </button>
+        <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); exec('underline') }} title="Souligné (Ctrl+U)">
+          <span style={{ textDecoration: 'underline' }}>S</span>
+        </button>
+        <span style={sep} />
+        <button type="button" style={{ ...btn, fontSize: '16px' }} onMouseDown={(e) => { e.preventDefault(); exec('formatBlock', 'blockquote') }} title="Citation">
+          &ldquo;&rdquo;
+        </button>
+        <button type="button" style={{ ...btn, fontSize: '12px' }} onMouseDown={(e) => { e.preventDefault(); exec('insertUnorderedList') }} title="Liste à puces">
+          &bull; Liste
+        </button>
+        <button type="button" style={{ ...btn, fontSize: '12px' }} onMouseDown={(e) => { e.preventDefault(); exec('insertOrderedList') }} title="Liste numérotée">
+          1. Liste
+        </button>
+        <span style={sep} />
+        <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); handleInsertLink() }} title="Insérer un lien">
+          &#128279;
+        </button>
+        <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); handleImageClick() }} title="Insérer une image">
+          &#128444;&#65039;
+        </button>
+      </div>
+
+      {/* Editor area */}
+      <div style={{ position: 'relative' }}>
+        {isEmpty && (
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: '14px 16px', color: '#9ca3af', fontSize: '14px', pointerEvents: 'none', userSelect: 'none' }}>
+            {placeholder}
+          </div>
+        )}
+        <div
+          ref={editorRef}
+          className="rte-editor"
+          contentEditable
+          suppressContentEditableWarning
+          onInput={emitChange}
+          onFocus={() => setFocused(true)}
+          onBlur={() => { setFocused(false); emitChange() }}
+          onPaste={handlePaste}
+          style={{
+            minHeight: `${minHeight}px`,
+            padding: '14px 16px',
+            fontSize: '14px',
+            lineHeight: 1.6,
+            color: '#1f2937',
+            outline: 'none',
+            overflowY: 'auto',
+          }}
+        />
+      </div>
+
+      {/* Hidden file input for image upload */}
+      {onFileUpload && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      )}
+    </div>
+  )
+})

package/src/components/TicketConversation/components/CodeBlock.tsx

@@ -149,17 +149,21 @@ function SingleCodeBlock({ lang, code }: { lang: string; code: string }) {
 }
 
 /**
- * Renders text with fenced code blocks (```lang ... ```) styled per language.
- * Non-code text is passed through as-is.
+ * Checks if text contains fenced code blocks.
  */
-export function CodeBlockRenderer({ text }: { text: string }) {
-  // Match ```lang\n...\n``` blocks
+export function hasCodeBlocks(text: string): boolean {
+  return /```[\s\S]*?```/.test(text)
+}
+
+/**
+ * Renders the FULL message text, replacing fenced code blocks with styled components.
+ * Use this INSTEAD of rendering msg.body directly when code blocks are present.
+ */
+export function MessageWithCodeBlocks({ text, style }: { text: string; style?: React.CSSProperties }) {
   const parts = text.split(/(```[\s\S]*?```)/g)
-  const hasCodeBlock = parts.some((p) => p.startsWith('```'))
-  if (!hasCodeBlock) return null
 
   return (
-    <>
+    <div style={style}>
       {parts.map((part, i) => {
         if (part.startsWith('```')) {
           const match = part.match(/^```(\w*)\n?([\s\S]*?)```$/)
@@ -169,18 +173,53 @@ export function CodeBlockRenderer({ text }: { text: string }) {
             return <SingleCodeBlock key={i} lang={lang} code={code} />
           }
         }
-        return null
+        // Render plain text parts
+        if (!part) return null
+        return <span key={i} style={{ whiteSpace: 'pre-wrap' }}>{part}</span>
       })}
-    </>
+    </div>
   )
 }
 
 /**
- * For HTML content, parses <pre><code> blocks from the RTE.
- * Also handles ```lang blocks that survived as text in HTML.
+ * Converts HTML to plain text while preserving line breaks from block-level tags.
  */
+function htmlToText(html: string): string {
+  return html
+    // Convert line breaks first (before stripping)
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/(p|div|li|h[1-6]|tr|pre)>/gi, '\n')
+    .replace(/<\/?(ul|ol|table|tbody|thead)[^>]*>/gi, '')
+    // Strip remaining tags
+    .replace(/<[^>]+>/g, '')
+    // Decode common HTML entities
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    // Collapse 3+ newlines into 2
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+/**
+ * For HTML content: strips tags (preserving newlines), then renders with code blocks.
+ */
+export function MessageWithCodeBlocksHtml({ html, style }: { html: string; style?: React.CSSProperties }) {
+  const text = htmlToText(html)
+  if (!hasCodeBlocks(text)) return null
+  return <MessageWithCodeBlocks text={text} style={style} />
+}
+
+// Keep old exports for backwards compat (but they're no longer used in message rendering)
+export function CodeBlockRenderer({ text }: { text: string }) {
+  if (!hasCodeBlocks(text)) return null
+  return <MessageWithCodeBlocks text={text} />
+}
+
 export function CodeBlockRendererHtml({ html }: { html: string }) {
-  // Check for fenced code blocks in raw text within HTML
-  const stripped = html.replace(/<[^>]+>/g, '')
-  return <CodeBlockRenderer text={stripped} />
+  const text = htmlToText(html)
+  return <CodeBlockRenderer text={text} />
 }

package/src/plugin.ts

@@ -115,6 +115,8 @@ export function supportPlugin(config?: SupportPluginConfig): Plugin {
       'support-settings': viewConfig(`${viewsBase}#TicketingSettingsView`, `${bp}/settings`),
       'support-logs': viewConfig(`${viewsBase}#LogsView`, `${bp}/logs`),
       'support-crm': viewConfig(`${viewsBase}#CrmView`, `${bp}/crm`),
+      'support-billing': viewConfig(`${viewsBase}#BillingView`, `${bp}/billing`),
+      'support-import': viewConfig(`${viewsBase}#ImportConversationView`, `/import-conversation`),
     }
 
     if (features.chat) {

package/src/utils/emailTemplate.ts

@@ -75,10 +75,47 @@ export function emailRichContent(html: string, config?: EmailTemplateConfig): st
     })
   }
 
+  // Convert markdown fenced code blocks (```lang\ncode\n```) to styled <pre> blocks
+  // Email clients don't run JS so we just use a nice layout, no syntax highlighting
+  function convertFencedCodeBlocks(input: string): string {
+    // Quick check: no backticks, no work to do
+    if (!input.includes('```')) return input
+
+    // Normalize HTML block breaks to newlines so the regex can span paragraphs
+    const normalized = input
+      .replace(/<br\s*\/?>/gi, '\n')
+      .replace(/<\/(p|div)>\s*<(p|div)[^>]*>/gi, '\n')
+      .replace(/<(p|div)[^>]*>/gi, '')
+      .replace(/<\/(p|div)>/gi, '\n')
+
+    return normalized.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, lang, code) => {
+      const cleanCode = escapeHtml((code || '').replace(/\n$/, ''))
+      const label = lang ? lang.trim() : 'code'
+      return `<div style="margin: 16px 0; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; background: #0f172a;">
+        <div style="padding: 6px 14px; background: #1e293b; border-bottom: 1px solid #334155; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;">${escapeHtml(label)}</div>
+        <pre style="margin: 0; padding: 14px 16px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre;"><code style="background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit;">${cleanCode}</code></pre>
+      </div>`
+    })
+      // Re-wrap non-code text chunks in paragraphs (split by our <div> blocks)
+      .split(/(<div style="margin: 16px 0[\s\S]*?<\/div>)/g)
+      .map((chunk) => {
+        if (chunk.startsWith('<div style="margin: 16px 0')) return chunk
+        // Non-code chunk: wrap text lines in <p>
+        return chunk
+          .split('\n')
+          .map((line) => line.trim() ? `<p>${line}</p>` : '')
+          .join('')
+      })
+      .join('')
+  }
+
   let result = html
     // Make relative image URLs absolute
     .replace(/src="\/([^"]+)"/g, `src="${baseUrl}/$1"`)
 
+  // Convert fenced code blocks BEFORE other processing (protects code from HTML styling)
+  result = convertFencedCodeBlocks(result)
+
   // Apply inline styles to elements
   result = styleTag(result, 'blockquote', `border-left: 4px solid ${c.brandColor}; margin: 16px 0; padding: 12px 20px; background: #f0f9fa; border-radius: 0 8px 8px 0;`)
   result = styleTag(result, 'img', 'max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block;')