hocmai-feedback-widget 0.2.3 → 0.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hocmai-feedback-widget",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "description": "Feedback/report widget with MathJax-aware screenshot capture (snapdom + embedded fonts).",
   "module": "./dist/hocmai-feedback-widget.mjs",
@@ -22,6 +22,8 @@
   },
   "scripts": {
     "dev": "vite",
+    "clean": "rm -rf dist node_modules/.vite",
+    "prebuild": "npm run clean",
     "build": "vite build",
     "typecheck": "tsc --noEmit",
     "preview": "vite preview",

package/src/components/FeedbackWidget.tsx

@@ -345,8 +345,8 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                         alignItems: 'center',
                         justifyContent: 'center',
                         cursor: 'zoom-out',
-                        animation: 'fb-fade-in 0.2s ease-out',
-                        backdropFilter: 'blur(4px)'
+                        animation: 'fb-fade-in 0.15s ease-out',
+                        willChange: 'opacity'
                     }}
                     onClick={() => setZoomedImage(null)}
                 >
@@ -354,6 +354,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                         src={zoomedImage}
                         alt="Zoomed"
                         draggable={false}
+                        decoding="async"
                         onContextMenu={(e) => e.preventDefault()}
                         style={{
                             maxWidth: '90vw',
@@ -413,7 +414,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
 
             {/* Capturing indicator */}
             {isCapturing && (
-                <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' }}>
+                <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, fontSize: '0.8rem' }}>
                     Đang chụp...
                 </div>
             )}

package/src/context/FeedbackContext.tsx

@@ -39,6 +39,12 @@ interface FeedbackProviderProps {
   isCkEditor?: boolean;
   /** Editor component for the description (from `hocmai-feedback-widget/ckeditor` or your own). */
   descriptionEditor?: React.ComponentType<CkEditorProps>;
+  /** Show the "full screen" capture button. Default true. */
+  isEnableCaptureFull?: boolean;
+  /** Show the "select region" capture button. Default true. */
+  isEnableCaptureElement?: boolean;
+  /** Endpoint that accepts { base64 } and returns { file_url } for image uploads. */
+  uploadUrl?: string;
 }
 
 export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
@@ -47,6 +53,9 @@ export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
   themeColor,
   isCkEditor,
   descriptionEditor,
+  isEnableCaptureFull,
+  isEnableCaptureElement,
+  uploadUrl,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [activeQuestionId, setActiveQuestionId] = useState<string | number | null>(null);
@@ -96,6 +105,9 @@ export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
           themeColor={themeColor}
           isCkEditor={isCkEditor}
           descriptionEditor={descriptionEditor}
+          isEnableCaptureFull={isEnableCaptureFull}
+          isEnableCaptureElement={isEnableCaptureElement}
+          uploadUrl={uploadUrl}
           isOpen={isOpen}
           onClose={closeFeedback}
           triggerComponent={<></>}