hocmai-feedback-widget 0.2.1 → 0.2.3

package/src/components/CropOverlay.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { REPORT_UI_ATTR } from '../capture/types';
 
 export interface Rect {
   x: number;
@@ -18,7 +19,6 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
   const [currentPos, setCurrentPos] = useState({ x: 0, y: 0 });
   const [preventScroll, setPreventScroll] = useState(false);
 
-  // Manage body overflow to prevent scrolling during touch selection
   useEffect(() => {
     if (preventScroll) {
       document.body.style.overflow = 'hidden';
@@ -30,9 +30,6 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
     };
   }, [preventScroll]);
 
-  // Ref for the selection box to calculate rect without render lag if needed, 
-  // but state is fine for React.
-
   const handleMouseDown = (e: React.MouseEvent) => {
     setIsDragging(true);
     setStartPos({ x: e.clientX, y: e.clientY });
@@ -49,14 +46,12 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
     finalizeSelection();
   };
 
-  // Touch events
   const handleTouchStart = (e: React.TouchEvent) => {
-    if (e.touches.length === 1) { // Single touch only
+    if (e.touches.length === 1) {
       setIsDragging(true);
       const touch = e.touches[0];
       setStartPos({ x: touch.clientX, y: touch.clientY });
       setCurrentPos({ x: touch.clientX, y: touch.clientY });
-      // Prevent scrolling while selecting
       setPreventScroll(true);
     }
   };
@@ -70,39 +65,24 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
 
   const handleTouchEnd = () => {
     finalizeSelection();
-    // Restore scrolling
     setPreventScroll(false);
   };
 
   const finalizeSelection = () => {
     if (isDragging) {
       setIsDragging(false);
-
-      // Calculate final rect
       const x = Math.min(startPos.x, currentPos.x);
       const y = Math.min(startPos.y, currentPos.y);
       const width = Math.abs(currentPos.x - startPos.x);
       const height = Math.abs(currentPos.y - startPos.y);
 
-      // Only confirm if width/height is significant (e.g. > 10px) to avoid accidental clicks
+      // Only confirm meaningful selections (avoid accidental clicks).
       if (width > 10 && height > 10) {
-        // We capture viewport coordinates. 
-        // Note: screenshot tool usually captures full page or document body. 
-        // If html-to-image captures document.body, we might need to adjust for scroll.
-        // HOWEVER, our plan is to capture the Viewport mostly. 
-        // Or if we capture Body, we add scrollX/scrollY.
-
-        onConfirm({
-          x,
-          y,
-          width,
-          height
-        });
+        onConfirm({ x, y, width, height });
       }
     }
   };
 
-  // Close on Escape
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onCancel();
@@ -113,12 +93,13 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
 
   return (
     <div
+      {...{ [REPORT_UI_ATTR]: 'true' }}
       style={{
         position: 'fixed',
         inset: 0,
-        zIndex: 99999, // Extremely high z-index
+        zIndex: 99999,
         cursor: 'crosshair',
-        userSelect: 'none'
+        userSelect: 'none',
       }}
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
@@ -127,32 +108,33 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
-      {/* Background Dim - separate div to avoid affecting selection box rendering if simpler */}
-      <div style={{
-        position: 'absolute',
-        inset: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.4)'
-      }} />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        }}
+      />
 
-      {/* Helper Text */}
       {!isDragging && (
-        <div style={{
-          position: 'absolute',
-          top: '20px',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          background: 'rgba(0,0,0,0.8)',
-          color: 'white',
-          padding: '8px 16px',
-          borderRadius: '20px',
-          pointerEvents: 'none',
-          fontSize: '14px'
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            top: '20px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            background: 'rgba(0,0,0,0.8)',
+            color: 'white',
+            padding: '8px 16px',
+            borderRadius: '20px',
+            pointerEvents: 'none',
+            fontSize: '14px',
+          }}
+        >
           Kéo chuột hoặc chạm để chọn vùng chụp ảnh (ESC để hủy)
         </div>
       )}
 
-      {/* Selection Box */}
       {isDragging && (
         <div
           style={{
@@ -163,7 +145,7 @@ const CropOverlay: React.FC<CropOverlayProps> = ({ onConfirm, onCancel }) => {
             height: Math.abs(currentPos.y - startPos.y),
             border: '2px solid #fff',
             backgroundColor: 'rgba(255, 255, 255, 0.1)',
-            boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.5)' // Clever trick to dim outside
+            boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.5)',
           }}
         />
       )}

package/src/components/FeedbackWidget.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import { getDeviceInfo } from '../utils/device';
-import { captureScreenshot, type Rect } from '../utils/screenshot';
+import { captureScreenshot, prewarmCapture, type Rect } from '../capture';
 import { MessageSquarePlus, Crop, Monitor, X, Hash, AlignLeft, Loader2, Image as ImageIcon } from 'lucide-react';
 import CropOverlay from './CropOverlay';
+// Type-only import — erased at build time, so the core bundle has zero CKEditor
+// coupling and apps build without the CKEditor deps. The editor itself is shipped
+// at the subpath `hocmai-feedback-widget/ckeditor` and injected via descriptionEditor.
+import type { CkEditorProps } from './CkEditor';
 
 export interface FeedbackData {
     idQuestion: string | number;
@@ -17,7 +21,8 @@ export interface FeedbackData {
 export interface FeedbackProps {
     questionId: string | number;
     contextData?: Record<string, any>;
-    onSubmit: (data: FeedbackData) => Promise<void>;
+    /** Submit handler. Optional — may be provided per call via openFeedback or at the Provider. */
+    onSubmit?: (data: FeedbackData) => Promise<void> | void;
     themeColor?: string;
     triggerComponent?: React.ReactNode;
     isOpen?: boolean;
@@ -25,8 +30,20 @@ export interface FeedbackProps {
     onClose?: () => void;
     isEnableCaptureFull?: boolean;
     isEnableCaptureElement?: boolean;
+    /** Endpoint that accepts { base64 } and returns { file_url }. */
+    uploadUrl?: string;
+    /** Use the rich-text editor for the description instead of a plain textarea. */
+    isCkEditor?: boolean;
+    /**
+     * Rich-text editor component for the description (used when isCkEditor is true).
+     * Pass the ready-made editor from `hocmai-feedback-widget/ckeditor`, or your own.
+     * Kept as a prop so the core bundle has no CKEditor dependency.
+     */
+    descriptionEditor?: React.ComponentType<CkEditorProps>;
 }
 
+const DEFAULT_UPLOAD_URL = 'https://lcms.icanwork.vn/api/upload-to-s3/upload-image-error-to-s3';
+
 const FeedbackWidget: React.FC<FeedbackProps> = ({
     questionId,
     contextData,
@@ -37,7 +54,10 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
     onOpen,
     onClose,
     isEnableCaptureFull = true,
-    isEnableCaptureElement = true
+    isEnableCaptureElement = true,
+    uploadUrl = DEFAULT_UPLOAD_URL,
+    isCkEditor = false,
+    descriptionEditor: DescriptionEditor,
 }) => {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     const [description, setDescription] = useState('');
@@ -70,6 +90,14 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         }
     }, [isOpen, questionId, contextData]);
 
+    // Warm the snapshot font/image cache while the user fills the form so the
+    // first capture isn't delayed by inlining MathJax web fonts.
+    React.useEffect(() => {
+        if (isOpen) {
+            prewarmCapture().catch(() => { });
+        }
+    }, [isOpen]);
+
     const handleSelectImage = () => {
         if (screenshots.length >= 3) {
             alert('Bạn chỉ có thể chụp tối đa 3 ảnh.');
@@ -101,7 +129,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         };
         reader.readAsDataURL(file);
 
-        // Reset input so same file can be selected again if needed
         event.target.value = '';
     };
 
@@ -118,7 +145,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
     };
 
     const startCapture = async (mode: 'full' | 'crop') => {
-        console.log('click capture', performance.now());
         if (screenshots.length >= 3) {
             alert('Bạn chỉ có thể chụp tối đa 3 ảnh.');
             return;
@@ -126,25 +152,19 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         setIsTempHidden(true); // Hide modal temporarily
 
         if (mode === 'crop') {
-            // Add small delay to ensure modal is gone
             setTimeout(() => setIsSelecting(true), 150);
             return;
         }
 
-        // Full screen capture
         setTimeout(async () => {
             await performCapture();
         }, 150);
     };
 
     const performCapture = async (cropRect?: Rect) => {
-        console.log('performCapture start', performance.now());
         setIsCapturing(true);
         try {
-            // If cropRect is provided, it captures that specific area.
-            // If undefined, it captures the current viewport (default behavior of updated captureScreenshot).
             const shot = await captureScreenshot(cropRect);
-            console.log('performCapture end', performance.now());
             if (shot) {
                 setScreenshots(prev => [...prev, shot as string]);
             } else {
@@ -152,11 +172,12 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
             }
         } catch (err) {
             console.error(err);
+            alert('Không thể chụp ảnh màn hình. Vui lòng thử lại.');
         } finally {
             setIsCapturing(false);
             setIsTempHidden(false); // Re-show modal
         }
-    }
+    };
 
     const handleCropConfirm = (rect: Rect) => {
         setIsSelecting(false);
@@ -176,7 +197,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         if (onClose) onClose();
         setInternalIsOpen(false);
 
-        // Clean up state
         setScreenshots([]);
         setIsSelecting(false);
         setZoomedImage(null);
@@ -210,17 +230,15 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         setIsSubmitting(true);
         try {
             const deviceInfo = getDeviceInfo();
-            // send image (data base64) to server and get URL image return
+            // Upload each screenshot (base64) and collect the returned URLs.
             const listImage = await Promise.all(
                 screenshots.map(async (shot) => {
-                    const response = await fetch('https://lcms.icanwork.vn/api/upload-to-s3/upload-image-error-to-s3', {
+                    const response = await fetch(uploadUrl, {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json'
                         },
-                        body: JSON.stringify({
-                            base64: shot
-                        })
+                        body: JSON.stringify({ base64: shot })
                     });
                     const uploadData = await response.json();
                     return uploadData.file_url;
@@ -236,8 +254,12 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                 contextData
             };
 
-            await onSubmit(feedbackData);
-            handleCloseTrigger(); // Close and reset after success
+            if (onSubmit) {
+                await onSubmit(feedbackData);
+            } else {
+                console.warn('[feedback-widget] Không có onSubmit — bỏ qua gửi. Dữ liệu:', feedbackData);
+            }
+            handleCloseTrigger();
         } catch (error) {
             console.error('Submit feedback failed', error);
         } finally {
@@ -245,9 +267,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         }
     };
 
-    // ... inside component
-
-    // Reduced Styles
     const styles = `
     @keyframes fb-fade-in {
       from { opacity: 0; transform: translateY(10px); }
@@ -268,7 +287,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
       border-radius: 12px;
       width: 280px;
       max-width: 90vw;
-      max-height: 80vh; 
+      max-height: 80vh;
       overflow-y: auto;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
       border: 1px solid #f3f4f6;
@@ -289,7 +308,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
         bottom: 20px !important;
         right: 20px !important;
       }
-      /* Prevent iOS zoom on inputs */
       input, select, textarea {
         font-size: 16px !important;
       }
@@ -298,23 +316,17 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
       .fb-btn-crop {
         display: none !important;
       }
-      /* Enforce 16px font on all mobile/tablet inputs to prevent zoom */
       .fb-widget-modal input,
       .fb-widget-modal select,
       .fb-widget-modal textarea {
         font-size: 16px !important;
       }
     }
-    @media (min-width: 768px) {
-      .fb-btn-upload {
-        
-      }
-    }
   `;
 
     return (
         <>
-            <style id="feedback-widget-styles">{styles}</style>
+            <style id="feedback-widget-styles" data-hsa-report-ui="true">{styles}</style>
 
             {isSelecting && (
                 <CropOverlay onConfirm={handleCropConfirm} onCancel={handleCropCancel} />
@@ -323,6 +335,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
             {/* Zoom Modal */}
             {zoomedImage && (
                 <div
+                    data-hsa-report-ui="true"
                     style={{
                         position: 'fixed',
                         inset: 0,
@@ -357,13 +370,17 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
             )}
 
             {/* Trigger Button */}
-            <div onClick={() => {
-                if (externalIsOpen === undefined) {
-                    handleOpen();
-                } else if (onOpen) {
-                    onOpen();
-                }
-            }} style={{ cursor: 'pointer', display: 'inline-block' }}>
+            <div
+                data-hsa-report-ui="true"
+                onClick={() => {
+                    if (externalIsOpen === undefined) {
+                        handleOpen();
+                    } else if (onOpen) {
+                        onOpen();
+                    }
+                }}
+                style={{ cursor: 'pointer', display: 'inline-block' }}
+            >
                 {triggerComponent || (
                     <button
                         className="fb-widget-trigger"
@@ -394,16 +411,16 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                 )}
             </div>
 
-            {/* ... capturing overlay ... */}
+            {/* Capturing indicator */}
             {isCapturing && (
-                <div style={{ position: 'fixed', top: 20, right: 20, background: 'rgba(0,0,0,0.8)', color: 'white', padding: '8px 12px', borderRadius: '8px', zIndex: 10000, fontWeight: 500, backdropFilter: 'blur(4px)', fontSize: '0.8rem' }}>
+                <div data-hsa-report-ui="true" style={{ position: 'fixed', top: 20, right: 20, background: 'rgba(0,0,0,0.8)', color: 'white', padding: '8px 12px', borderRadius: '8px', zIndex: 10000, fontWeight: 500, backdropFilter: 'blur(4px)', fontSize: '0.8rem' }}>
                     Đang chụp...
                 </div>
             )}
 
             {/* Main Form Popover */}
             {showWidget && !isSelecting && !zoomedImage && (
-                <div className="fb-widget-modal">
+                <div className="fb-widget-modal" data-hsa-report-ui="true">
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <h2 style={{ margin: 0, fontSize: '1rem', fontWeight: 700, color: '#111827' }}>
                             Báo lỗi
@@ -429,7 +446,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                         </button>
                     </div>
 
-                    {/* Form Fields Container */}
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
 
                         {/* Question ID Input */}
@@ -437,12 +453,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                             <label style={{ display: 'block', marginBottom: '2px', fontSize: '0.8rem', fontWeight: 600, color: '#374151' }}>
                                 ID Câu hỏi {contextData?.questionIdChild ? 'bài đọc' : ''} <span style={{ color: '#ef4444' }}>*</span>
                             </label>
-                            <div style={{
-                                position: 'relative',
-                                display: 'flex',
-                                alignItems: 'center',
-                                transition: 'all 0.2s'
-                            }}>
+                            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', transition: 'all 0.2s' }}>
                                 <Hash size={12} style={{
                                     position: 'absolute',
                                     left: '10px',
@@ -487,12 +498,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                             <label style={{ display: 'block', marginBottom: '2px', fontSize: '0.8rem', fontWeight: 600, color: '#374151' }}>
                                 ID Câu hỏi
                             </label>
-                            <div style={{
-                                position: 'relative',
-                                display: 'flex',
-                                alignItems: 'center',
-                                transition: 'all 0.2s'
-                            }}>
+                            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', transition: 'all 0.2s' }}>
                                 <Hash size={12} style={{
                                     position: 'absolute',
                                     left: '10px',
@@ -575,45 +581,53 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                                 </span>
                             </div>
                             <div style={{ position: 'relative' }}>
-                                <div style={{
-                                    position: 'absolute',
-                                    left: '10px',
-                                    top: '8px',
-                                    pointerEvents: 'none'
-                                }}>
+                                {isCkEditor ? null : <div style={{ position: 'absolute', left: '10px', top: '8px', pointerEvents: 'none' }}>
                                     <AlignLeft size={12} style={{
                                         color: focusedField === 'desc' ? themeColor : (errors.description ? '#ef4444' : '#9ca3af'),
                                         transition: 'color 0.2s'
                                     }} />
-                                </div>
-                                <textarea
-                                    value={description}
-                                    onFocus={() => setFocusedField('desc')}
-                                    onBlur={() => setFocusedField(null)}
-                                    onChange={(e) => {
-                                        setDescription(e.target.value);
-                                        if (errors.description) setErrors(prev => ({ ...prev, description: undefined }));
-                                    }}
-                                    maxLength={1000}
-                                    placeholder="Mô tả chi tiết..."
-                                    style={{
-                                        width: '100%',
-                                        minHeight: '80px',
-                                        padding: '6px 10px 6px 28px',
-                                        borderRadius: '6px',
-                                        border: `1px solid ${errors.description ? '#ef4444' : (focusedField === 'desc' ? themeColor : '#e5e7eb')}`,
-                                        boxShadow: focusedField === 'desc' ? `0 0 0 2px ${themeColor}20` : 'none',
-                                        outline: 'none',
-                                        fontSize: '0.85rem',
-                                        color: '#1f2937',
-                                        resize: 'vertical',
-                                        boxSizing: 'border-box',
-                                        transition: 'all 0.2s',
-                                        backgroundColor: '#f9fafb',
-                                        lineHeight: '1.4',
-                                        fontFamily: 'inherit'
-                                    }}
-                                />
+                                </div>}
+                                {isCkEditor && DescriptionEditor ? (
+                                    <DescriptionEditor
+                                        placeholder="Mô tả chi tiết lỗi..."
+                                        contentQuestion={description}
+                                        error={!!errors.description}
+                                        uploadUrl={uploadUrl}
+                                        handleContent={(html: string) => {
+                                            setDescription(html);
+                                            if (errors.description) setErrors(prev => ({ ...prev, description: undefined }));
+                                        }}
+                                    />
+                                ) : (
+                                    <textarea
+                                        value={description}
+                                        onFocus={() => setFocusedField('desc')}
+                                        onBlur={() => setFocusedField(null)}
+                                        onChange={(e) => {
+                                            setDescription(e.target.value);
+                                            if (errors.description) setErrors(prev => ({ ...prev, description: undefined }));
+                                        }}
+                                        maxLength={1000}
+                                        placeholder="Mô tả chi tiết..."
+                                        style={{
+                                            width: '100%',
+                                            minHeight: '80px',
+                                            padding: '6px 10px 6px 28px',
+                                            borderRadius: '6px',
+                                            border: `1px solid ${errors.description ? '#ef4444' : (focusedField === 'desc' ? themeColor : '#e5e7eb')}`,
+                                            boxShadow: focusedField === 'desc' ? `0 0 0 2px ${themeColor}20` : 'none',
+                                            outline: 'none',
+                                            fontSize: '0.85rem',
+                                            color: '#1f2937',
+                                            resize: 'vertical',
+                                            boxSizing: 'border-box',
+                                            transition: 'all 0.2s',
+                                            backgroundColor: '#f9fafb',
+                                            lineHeight: '1.4',
+                                            fontFamily: 'inherit'
+                                        }}
+                                    />
+                                )}
                             </div>
                             {errors.description && (
                                 <span style={{ display: 'block', marginTop: '2px', fontSize: '0.7rem', color: '#ef4444' }}>
@@ -630,7 +644,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                             </label>
                         </div>
 
-                        {/* Thumbnails Grid */}
                         {screenshots.length > 0 && (
                             <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '6px', marginBottom: '8px' }}>
                                 {screenshots.map((shot, index) => (
@@ -710,7 +723,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                                     alignItems: 'center',
                                     gap: '4px',
                                     transition: 'all 0.2s',
-                                    minWidth: '60px' // Prevent squishing
+                                    minWidth: '60px'
                                 }}
                                 onMouseOver={(e) => {
                                     e.currentTarget.style.borderColor = themeColor;
@@ -844,7 +857,6 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                             ) : 'Gửi báo lỗi'}
                         </button>
                     </div>
-                    {/* <p style={{ textAlign: 'center', marginTop: 'auto', color: '#9CA3AF' }}>v0.2.0-rc4</p> */}
                 </div>
             )}
         </>