hocmai-feedback-widget 0.2.1 → 0.2.3

package/src/context/FeedbackContext.tsx

@@ -1,8 +1,20 @@
 import React, { createContext, useContext, useState, type ReactNode } from 'react';
 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;
@@ -20,47 +32,75 @@ 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>;
 }
 
 export const FeedbackProvider: React.FC<FeedbackProviderProps> = ({
   children,
   onSubmit,
-  themeColor
+  themeColor,
+  isCkEditor,
+  descriptionEditor,
 }) => {
   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);
   };
 
   const closeFeedback = () => {
     setIsOpen(false);
-    // Optional: Reset active ID after animation, but keeping it ensures state doesn't flicker during close
+  };
+
+  // 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}
 
-      {/* The Single Global Widget */}
+      {/* The single global widget */}
       {activeQuestionId && (
         <FeedbackWidget
           questionId={activeQuestionId}
           contextData={activeContextData}
-          onSubmit={onSubmit}
+          onSubmit={effectiveOnSubmit}
           themeColor={themeColor}
+          isCkEditor={isCkEditor}
+          descriptionEditor={descriptionEditor}
           isOpen={isOpen}
           onClose={closeFeedback}
-          // We don't need triggerComponent here because triggers are distributed
           triggerComponent={<></>}
         />
       )}
     </FeedbackContext.Provider>
   );
-};
+};

package/src/index.ts

@@ -1,7 +1,13 @@
 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 screenshot utilities
-export { captureScreenshot } from './utils/screenshot';
-export type { Rect, CaptureProgress } from './utils/screenshot/types';
+// Screenshot utilities (MathJax-CHTML aware, snapdom-based)
+export {
+  captureScreenshot,
+  captureScreenshotWithOptions,
+  prewarmCapture,
+} from './capture';
+export type { Rect, CaptureProgress, CaptureOptions } from './capture/types';

package/src/main.tsx

@@ -1,10 +1,8 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </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 />);

package/src/utils/device.ts

@@ -1,22 +1,22 @@
 import { UAParser } from 'ua-parser-js';
 
 export interface DeviceInfo {
-    os: string;
-    osVersion: string;
-    browser: string;
-    browserVersion: string;
-    deviceType: string;
+  os: string;
+  osVersion: string;
+  browser: string;
+  browserVersion: string;
+  deviceType: string;
 }
 
 export const getDeviceInfo = (): DeviceInfo => {
-    const parser = new UAParser();
-    const result = parser.getResult();
+  const parser = new UAParser();
+  const result = parser.getResult();
 
-    return {
-        os: result.os.name || 'unknown',
-        osVersion: result.os.version || 'unknown',
-        browser: result.browser.name || 'unknown',
-        browserVersion: result.browser.version || 'unknown',
-        deviceType: result.device.type || 'desktop', // Default to desktop if empty (common for desktop browsers)
-    };
+  return {
+    os: result.os.name || 'unknown',
+    osVersion: result.os.version || 'unknown',
+    browser: result.browser.name || 'unknown',
+    browserVersion: result.browser.version || 'unknown',
+    deviceType: result.device.type || 'desktop',
+  };
 };