hocmai-feedback-widget 0.2.2 → 0.2.4

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export { default as FeedbackWidget } from './components/FeedbackWidget';
 export type { FeedbackData, FeedbackProps } from './components/FeedbackWidget';
 export type { CkEditorProps } from './components/CkEditor';
 export { FeedbackProvider, useFeedback } from './context/FeedbackContext';
+export type { FeedbackSubmitHandler } from './context/FeedbackContext';
 export { captureScreenshot, captureScreenshotWithOptions, prewarmCapture, } from './capture';
 export type { Rect, CaptureProgress, CaptureOptions } from './capture/types';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hocmai-feedback-widget",
   "private": false,
-  "version": "0.2.2",
+  "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",
@@ -41,9 +43,15 @@
     "ckeditor5-classic-with-mathtype": "*"
   },
   "peerDependenciesMeta": {
-    "@ckeditor/ckeditor5-react": { "optional": true },
-    "hocmai-ckeditor-custom": { "optional": true },
-    "ckeditor5-classic-with-mathtype": { "optional": true }
+    "@ckeditor/ckeditor5-react": {
+      "optional": true
+    },
+    "hocmai-ckeditor-custom": {
+      "optional": true
+    },
+    "ckeditor5-classic-with-mathtype": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",

package/src/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FeedbackProvider, useFeedback, captureScreenshot, type FeedbackData } from './index';
+import CkEditor from './components/CkEditor';
 
 declare global {
   interface Window {
@@ -123,7 +124,10 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <FeedbackProvider onSubmit={handleSubmit}>
+    <FeedbackProvider
+      isCkEditor={true}
+      descriptionEditor={CkEditor}
+      onSubmit={handleSubmit}>
       {/* Mirror host app: normal-flow root + fixed overlay watermark + fixed opaque header */}
       <div style={{ width: '100vw', display: 'flex', flexDirection: 'column' }}>
         <Watermark />

package/src/capture/index.ts

@@ -185,23 +185,17 @@ function warmOnce(): Promise<void> {
       await ensureReadyForCapture();
       await inlineMathJaxFonts();
 
-      // In the real app snapdom still needs one throwaway toCanvas before it
-      // renders CHTML glyphs (even with fonts inlined). Do it here — on form
-      // OPEN, overlapping the user typing — so the click-to-capture is a single
-      // fast pass. SVG math doesn't need it.
-      const hasChtmlMath = Array.from(document.querySelectorAll('mjx-container')).some(
+      // snapdom needs one throwaway toCanvas before it renders CHTML glyphs
+      // (even with fonts inlined). It only needs to exercise the CHTML/font path
+      // ONCE — not the whole page — so warm with a single small formula element.
+      // This is far cheaper than a full-body pass (which on a tall page hits the
+      // canvas limit and downscales), keeping form-open light.
+      const chtml = Array.from(document.querySelectorAll('mjx-container')).find(
         (c) => !c.querySelector('svg')
-      );
-      if (!hasChtmlMath) return;
-      const vp = viewportSize();
-      const keep: ViewportRect = { top: 0, bottom: vp.h, left: 0, right: vp.w };
+      ) as HTMLElement | undefined;
+      if (!chtml) return; // SVG math or no math → no priming needed
       try {
-        await snapdom.toCanvas(document.body, {
-          embedFonts: true,
-          dpr: 1,
-          scale: 1,
-          filter: makePruneFilter(keep, [`[${REPORT_UI_ATTR}]`]),
-        });
+        await snapdom.toCanvas(chtml, { embedFonts: true, dpr: 1, scale: 1 });
       } catch {
         /* warm errors are non-fatal */
       }
@@ -309,11 +303,16 @@ export async function captureScreenshotWithOptions(
   const caps = getCaptureCapabilities();
   const root = document.body;
   const desired = options.scale ?? caps.recommendedScale;
+  // Keep ~5% headroom below the hard canvas limit: snapdom measures the element
+  // slightly larger than scrollHeight, and hitting the limit triggers a slow
+  // internal downscale. Staying under it avoids that and keeps the crop mapping
+  // linear.
+  const safeMaxCanvas = Math.floor(caps.maxCanvasSize * 0.95);
   const scale = clampScale(
     desired,
     root.scrollWidth || region.w,
     root.scrollHeight || region.h,
-    caps.maxCanvasSize
+    safeMaxCanvas
   );
 
   // Font inlining (idempotent; normally already done from open-time prewarm so

package/src/components/FeedbackWidget.tsx

@@ -4,7 +4,8 @@ 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.
+// 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 {
@@ -20,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;
@@ -252,7 +254,11 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                 contextData
             };
 
-            await onSubmit(feedbackData);
+            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);
@@ -339,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)}
                 >
@@ -348,6 +354,7 @@ const FeedbackWidget: React.FC<FeedbackProps> = ({
                         src={zoomedImage}
                         alt="Zoomed"
                         draggable={false}
+                        decoding="async"
                         onContextMenu={(e) => e.preventDefault()}
                         style={{
                             maxWidth: '90vw',
@@ -407,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>
             )}
@@ -575,15 +582,15 @@ 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>
+                                </div>}
                                 {isCkEditor && DescriptionEditor ? (
                                     <DescriptionEditor
-                                        placeholder="Mô tả chi tiết..."
+                                        placeholder="Mô tả chi tiết lỗi..."
                                         contentQuestion={description}
                                         error={!!errors.description}
                                         uploadUrl={uploadUrl}

package/src/context/FeedbackContext.tsx

@@ -2,8 +2,19 @@ import React, { createContext, useContext, useState, type ReactNode } from 'reac
 import FeedbackWidget, { type FeedbackData } from '../components/FeedbackWidget';
 import type { CkEditorProps } from '../components/CkEditor';
 
+export type FeedbackSubmitHandler = (data: FeedbackData) => Promise<void> | void;
+
 interface FeedbackContextType {
-  openFeedback: (questionId: string | number, contextData?: any) => void;
+  /**
+   * Open the report form.
+   * @param onSubmit optional per-call handler; overrides the Provider's onSubmit
+   *                 for this submission. Lets you handle submit from anywhere.
+   */
+  openFeedback: (
+    questionId: string | number,
+    contextData?: any,
+    onSubmit?: FeedbackSubmitHandler
+  ) => void;
   closeFeedback: () => void;
   isOpen: boolean;
   activeQuestionId: string | number | null;
@@ -21,12 +32,19 @@ export const useFeedback = () => {
 
 interface FeedbackProviderProps {
   children: ReactNode;
-  onSubmit: (data: FeedbackData) => Promise<void>;
+  /** Default submit handler. Optional — you can instead pass one per call via openFeedback. */
+  onSubmit?: FeedbackSubmitHandler;
   themeColor?: string;
   /** Use the rich-text editor for the description instead of a plain textarea. */
   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> = ({
@@ -35,14 +53,25 @@ 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);
   const [activeContextData, setActiveContextData] = useState<any>(undefined);
+  // Per-call submit handler set by openFeedback (stored via updater so React
+  // doesn't treat the function as a state initializer).
+  const [activeOnSubmit, setActiveOnSubmit] = useState<FeedbackSubmitHandler | undefined>(undefined);
 
-  const openFeedback = (questionId: string | number, contextData?: any) => {
+  const openFeedback = (
+    questionId: string | number,
+    contextData?: any,
+    perCallOnSubmit?: FeedbackSubmitHandler
+  ) => {
     setActiveQuestionId(questionId);
     setActiveContextData(contextData);
+    setActiveOnSubmit(() => perCallOnSubmit);
     setIsOpen(true);
   };
 
@@ -50,6 +79,19 @@ export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
     setIsOpen(false);
   };
 
+  // Resolve handler: per-call → Provider → warn (never crash).
+  const effectiveOnSubmit: FeedbackSubmitHandler = async (data) => {
+    const handler = activeOnSubmit ?? onSubmit;
+    if (!handler) {
+      console.warn(
+        '[feedback-widget] Bỏ qua gửi báo lỗi: chưa cung cấp onSubmit (ở FeedbackProvider hoặc openFeedback). Dữ liệu:',
+        data
+      );
+      return;
+    }
+    await handler(data);
+  };
+
   return (
     <FeedbackContext.Provider value={{ openFeedback, closeFeedback, isOpen, activeQuestionId }}>
       {children}
@@ -59,10 +101,13 @@ export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
         <FeedbackWidget
           questionId={activeQuestionId}
           contextData={activeContextData}
-          onSubmit={onSubmit}
+          onSubmit={effectiveOnSubmit}
           themeColor={themeColor}
           isCkEditor={isCkEditor}
           descriptionEditor={descriptionEditor}
+          isEnableCaptureFull={isEnableCaptureFull}
+          isEnableCaptureElement={isEnableCaptureElement}
+          uploadUrl={uploadUrl}
           isOpen={isOpen}
           onClose={closeFeedback}
           triggerComponent={<></>}
@@ -70,4 +115,4 @@ export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
       )}
     </FeedbackContext.Provider>
   );
-};
+};

package/src/index.ts

@@ -2,6 +2,7 @@ export { default as FeedbackWidget } from './components/FeedbackWidget';
 export type { FeedbackData, FeedbackProps } from './components/FeedbackWidget';
 export type { CkEditorProps } from './components/CkEditor';
 export { FeedbackProvider, useFeedback } from './context/FeedbackContext';
+export type { FeedbackSubmitHandler } from './context/FeedbackContext';
 
 // Screenshot utilities (MathJax-CHTML aware, snapdom-based)
 export {

package/src/main.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+// NOTE: No <React.StrictMode> on purpose. In dev, StrictMode double-mounts
+// components, and @ckeditor/ckeditor5-react creates a second editor instance
+// during the remount (its async destroy hasn't finished) — showing TWO editors.
+// The host app runs without StrictMode, so this matches production behaviour.
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);