hocmai-feedback-widget 0.2.1 → 0.2.3

package/README.md

@@ -1,144 +1,109 @@
-# Support Feedback Widget
+# hocmai-feedback-widget
 
-A React library for collecting user feedback with screenshot capabilities, context support, and interactive region cropping.
+Widget báo lỗi câu hỏi kèm chụp ảnh màn hình, tối ưu cho trang nhiều công thức **MathJax CHTML**. ESM, tương thích React ≥ 16.8.
 
-## Features
-- **Context-Aware**: Support for multiple questions/items on a single page.
-- **Screenshot Capture**: Automatic viewport capture with cropping/highlighting.
-- **Auto-Upload**: Screenshots are automatically uploaded to S3 and returned as URLs.
-- **Image Protection**: Prevents right-click/download on sensitive screenshots.
-- **Responsive**: Mobile-friendly "bottom sheet" style on small screens.
-- **Customizable**: Theme colors, context data, and error types.
+## Cài đặt
 
-## Installation
-
-### Via NPM/Yarn
 ```bash
 npm install hocmai-feedback-widget
-# or
-yarn add hocmai-feedback-widget
+# peer deps: react, react-dom
 ```
 
-### Local Installation
-1. Build and pack the project:
-   ```bash
-   npm run build
-   npm pack
-   ```
-2. Install the generated `.tgz` file in your target project:
-   ```bash
-   npm install ./path/to/hocmai-feedback-widget-0.1.0.tgz
-   ```
-
-## Usage
+## Sử dụng
 
-### 1. Wrap your application
-Wrap your root component (or the section of the app that needs feedback) with `FeedbackProvider`.
+### 1. Bọc app bằng `FeedbackProvider`
 
 ```tsx
 import { FeedbackProvider, type FeedbackData } from 'hocmai-feedback-widget';
-// If styles are not automatically injected by your bundler, you might need:
-// import 'hocmai-feedback-widget/dist/style.css';
-
-function App() {
-  const handleSubmit = async (data: FeedbackData) => {
-    // Send data to your API
-    console.log('Feedback submitted:', data);
-    // data.listImage contains URLs of uploaded images
-    // data.deviceInfo contains browser/OS info
-    // data.errorType contains the selected category
-  };
-
-  return (
-    <FeedbackProvider onSubmit={handleSubmit} themeColor="#3b82f6">
-      <YourAppContent />
-    </FeedbackProvider>
-  );
-}
+
+<FeedbackProvider onSubmit={async (data: FeedbackData) => {
+  await api.post('/questionReport/studentReport', data); // data.listImage là URL ảnh đã upload
+}}>
+  <App />
+</FeedbackProvider>
 ```
 
-### 2. Trigger Feedback Form
-Use the `useFeedback` hook anywhere in your child components to open the widget for a specific item.
+`onSubmit` **không bắt buộc** ở Provider — có thể truyền theo từng lần ở `openFeedback` (xem dưới).
+
+### 2. Mở form từ component con bằng `useFeedback`
 
 ```tsx
 import { useFeedback } from 'hocmai-feedback-widget';
 
-const QuestionItem = ({ id, content }) => {
-  const { openFeedback } = useFeedback();
-
-  return (
-    <div className="card">
-      <p>{content}</p>
-      <button 
-        onClick={() => openFeedback(id, { questionIdChild: 'optional-child-id', ...otherContext })}
-      >
-        Report Error
-      </button>
-    </div>
-  );
-};
+const { openFeedback } = useFeedback();
+
+// Dùng onSubmit của Provider:
+openFeedback(questionId, { questionIdChild });
+
+// Hoặc truyền handler riêng cho lần gọi này (ghi đè Provider):
+openFeedback(questionId, { questionIdChild }, async (data) => {
+  await api.post('/questionReport/studentReport', data);
+});
 ```
 
-### 3. Standalone Component
-If you need a single widget instance and manage state manually (legacy mode):
+### 3. (Tùy chọn) Rich-text editor cho ô mô tả — `isCkEditor`
+
+Bật `isCkEditor` **và** truyền `descriptionEditor` (editor đóng gói sẵn ở entry phụ):
 
 ```tsx
-import { FeedbackWidget } from 'hocmai-feedback-widget';
-
-<FeedbackWidget 
-  questionId="123"
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  onSubmit={handleSubmit}
-  isEnableCaptureFull={true}
-  isEnableCaptureElement={true}
-/>
+import { FeedbackProvider } from 'hocmai-feedback-widget';
+import CkEditor from 'hocmai-feedback-widget/ckeditor';
+
+<FeedbackProvider onSubmit={handleSubmit} isCkEditor descriptionEditor={CkEditor}>
+  <App />
+</FeedbackProvider>
+```
+
+Phải cài thêm các peer deps (chỉ khi dùng CKEditor):
+
+```bash
+yarn add @ckeditor/ckeditor5-react hocmai-ckeditor-custom ckeditor5-classic-with-mathtype
 ```
 
-## Props & Configuration
+### 4. (Tùy chọn) Chụp màn hình trực tiếp
+
+```ts
+import { captureScreenshot } from 'hocmai-feedback-widget';
+
+const png = await captureScreenshot();                            // toàn viewport
+const region = await captureScreenshot({ x, y, width, height });  // 1 vùng (toạ độ viewport)
+```
 
-### FeedbackProvider
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `onSubmit` | `(data: FeedbackData) => Promise<void>` | Yes | Callback when feedback is sent. |
-| `themeColor` | `string` | No | Primary color for buttons/highlights. Default: `#3b82f6`. |
-| `children` | `ReactNode` | Yes | Your application content. |
+## API
+
+**`FeedbackProvider`**
+
+| Prop | Kiểu | Mô tả |
+|------|------|-------|
+| `onSubmit` | `(data: FeedbackData) => Promise<void> \| void` | Tùy chọn. Handler mặc định khi gửi. |
+| `isCkEditor` | `boolean` | Dùng rich-text editor cho ô mô tả (cần `descriptionEditor`). |
+| `descriptionEditor` | `ComponentType` | Editor truyền vào, vd `import CkEditor from 'hocmai-feedback-widget/ckeditor'`. |
+| `themeColor` | `string` | Màu chủ đạo (mặc định `#3b82f6`). |
+
+**`useFeedback()`** → `{ openFeedback, closeFeedback, isOpen, activeQuestionId }`
+- `openFeedback(questionId, contextData?, onSubmit?)` — mở form; `onSubmit?` ghi đè handler của Provider cho lần này.
+
+**`FeedbackData`**
 
-### FeedbackData Interface
 ```ts
-interface FeedbackData {
-    idQuestion: string | number;
-    idChildQuestion?: string | number;
-    errorDescription: string;
-    errorType: string;
-    listImage: string[]; // Array of image URLs
-    deviceInfo: {
-        device: string;
-        os: string;
-        browser: string;
-        screen: string;
-        userAgent: string;
-    };
-    contextData?: any;
+{
+  idQuestion: string | number;
+  idChildQuestion?: string | number;
+  errorType: string;        // incorrect_content | display_error | missing_data | technical_issue | other
+  errorDescription: string; // text; là HTML nếu dùng CKEditor
+  listImage: string[];      // URL ảnh đã upload (tối đa 3)
+  deviceInfo: { os; osVersion; browser; browserVersion; deviceType };
+  contextData?: any;
 }
 ```
 
-### useFeedback Hook
-Returns an object with:
-- `openFeedback(questionId: string | number, contextData?: any)`: Opens the form. `contextData` can include `questionIdChild` which will pre-fill the child question ID field.
-- `closeFeedback()`: Closes the form.
-
-### FeedbackWidget Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `questionId` | `string \| number` | Required | Main ID of the item being reported. |
-| `onSubmit` | `function` | Required | Async callback receiving `FeedbackData`. |
-| `contextData` | `object` | - | Additional data passed to `FeedbackData`. |
-| `themeColor` | `string` | `#3b82f6` | Theme color. |
-| `isOpen` | `boolean` | - | Control visibility manually. |
-| `onClose` | `function` | - | Callback when closed. |
-| `isEnableCaptureFull` | `boolean` | `true` | Enable full screen capture button. |
-| `isEnableCaptureElement` | `boolean` | `true` | Enable crop/element capture button. |
+## Lưu ý
+
+- **onSubmit** ưu tiên: handler theo lần gọi → handler ở Provider → không có thì chỉ cảnh báo (không crash).
+- **CKEditor**: `hocmai-ckeditor-custom` là build kiểu cũ → dùng `@ckeditor/ckeditor5-react` đời cũ (v5/v6), **không** dùng latest. Nên copy đúng version từ project gốc. Build này đã chứa core, **không cần** cài `@ckeditor/ckeditor5-core`.
+- Khi dùng CKEditor, `errorDescription` trả về là **HTML** — backend cần xử lý phù hợp.
+- Core **không** phụ thuộc CKEditor: app không dùng `isCkEditor` vẫn build bình thường, không cần cài deps CKEditor.
+- An toàn **SSR** (không chạm `window`/`document` lúc import).
 
 ## License
-MIT
+MIT

package/dist/capture/device-detection.d.ts

@@ -0,0 +1,13 @@
+export interface CaptureCapabilities {
+    /** Largest canvas dimension (px) the device can reliably allocate. */
+    maxCanvasSize: number;
+    /** Recommended pixel multiplier before clamping to maxCanvasSize. */
+    recommendedScale: number;
+}
+export declare function isIOSSafari(): boolean;
+export declare function getCaptureCapabilities(): CaptureCapabilities;
+/**
+ * Clamp a desired scale so neither dimension of the captured element exceeds
+ * the device's max canvas size. Keeps capture from silently failing on big pages.
+ */
+export declare function clampScale(desiredScale: number, contentWidth: number, contentHeight: number, maxCanvasSize: number): number;

package/dist/capture/fonts.d.ts

@@ -0,0 +1,4 @@
+/** Wait until MathJax has finished its initial typeset so formulas have laid out. */
+export declare function waitForMathJax(): Promise<void>;
+/** Resolve once the page is ready for a faithful snapshot. */
+export declare function ensureReadyForCapture(): Promise<void>;

package/dist/capture/index.d.ts

@@ -0,0 +1,14 @@
+import { Rect, CaptureOptions, CaptureProgress } from './types';
+export type { Rect, CaptureProgress, CaptureOptions } from './types';
+/** Prepare fonts for capture (call when the report form opens). */
+export declare function prewarmCapture(): Promise<void>;
+/**
+ * Capture a screenshot of the current viewport, or of `cropRect` (viewport coords).
+ *
+ * Signature is drop-in compatible with hocmai-feedback-widget's captureScreenshot.
+ * Strategy: snapdom (fonts embedded → MathJax CHTML renders correctly, single DOM
+ * clone → no O(N) layout thrash) with a modern-screenshot fallback. Always bounded
+ * by a timeout so it can never hang the UI.
+ */
+export declare function captureScreenshot(cropRect?: Rect, onProgress?: (progress: CaptureProgress) => void): Promise<string | null>;
+export declare function captureScreenshotWithOptions(cropRect: Rect | undefined, options: CaptureOptions): Promise<string | null>;

package/dist/capture/mathjax-fonts.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Fetch MathJax fonts and inject them as data-URI @font-face. Idempotent and
+ * cached. No-op if there are no MathJax CHTML font faces (e.g. SVG output).
+ */
+export declare function inlineMathJaxFonts(): Promise<void>;

package/dist/capture/types.d.ts

@@ -0,0 +1,25 @@
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type CapturePhase = 'preparing' | 'rendering' | 'cropping' | 'exporting' | 'done';
+export interface CaptureProgress {
+    phase: CapturePhase;
+    progress: number;
+    message: string;
+}
+export interface CaptureOptions {
+    /** Output pixel multiplier. Defaults to a device-aware value, capped by max canvas size. */
+    scale?: number;
+    /** Background fill for the exported PNG. Default '#ffffff'. */
+    backgroundColor?: string;
+    /** Hard timeout so a capture can never hang the UI. Default 20000ms. */
+    timeoutMs?: number;
+    /** CSS selectors to exclude from the capture (the widget's own UI is always excluded). */
+    excludeSelectors?: string[];
+    onProgress?: (progress: CaptureProgress) => void;
+}
+/** Attribute used to tag the widget's own DOM so it never appears in screenshots. */
+export declare const REPORT_UI_ATTR = "data-hsa-report-ui";

package/dist/ckeditor.mjs

@@ -0,0 +1,113 @@
+import { jsxs as m, jsx as b } from "react/jsx-runtime";
+import { useRef as f, useState as g } from "react";
+import { CKEditor as R } from "@ckeditor/ckeditor5-react";
+import y from "hocmai-ckeditor-custom";
+import "ckeditor5-classic-with-mathtype/build/translations/vi.js";
+const w = "https://lcms.icanwork.vn/api/upload-to-s3/upload-image-error-to-s3", x = `
+.hsa-ck-wrap .ck-editor { width: 100%; height: 100%; border: none; border-radius: 10px; outline: none; padding: 0; margin: 0; background-color: transparent; }
+.hsa-ck-wrap .ck-toolbar { background-color: transparent !important; border: 1px solid #b2b2b2 !important; border-bottom: none; }
+.hsa-ck-wrap .ck-content { padding: 8px 10px; margin: 0; border: 1px solid #b2b2b2; border-radius: 0 0 6px 6px; outline: none; resize: none; min-height: 120px; }
+.hsa-ck-wrap .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused { box-shadow: none !important; }
+.hsa-ck-wrap .ck.ck-button:not(.ck-disabled):hover, .hsa-ck-wrap a.ck.ck-button:not(.ck-disabled):hover { border-radius: 4px !important; }
+.hsa-ck-wrap.ckstyle-err .ck-toolbar, .hsa-ck-wrap.ckstyle-err .ck-content { border-color: #ef4444 !important; }
+`, T = [
+  "MathType",
+  "ChemType",
+  "heading",
+  "|",
+  "bold",
+  "underline",
+  "italic",
+  "link",
+  "subscript",
+  "superscript",
+  "fontColor",
+  "fontFamily",
+  "fontSize",
+  "bulletedList",
+  "numberedList",
+  "|",
+  "outdent",
+  "indent",
+  "alignment",
+  "|",
+  "imageUpload",
+  "blockQuote",
+  "insertTable",
+  "undo",
+  "redo",
+  "removeFormat"
+];
+function A(s) {
+  return (i) => ({
+    upload: () => new Promise((l, r) => {
+      i.file.then((a) => {
+        const t = new FileReader();
+        t.onload = async () => {
+          try {
+            const d = await (await fetch(s, {
+              method: "POST",
+              headers: { "Content-Type": "application/json", Accept: "*/*" },
+              body: JSON.stringify({ base64: t.result })
+            })).json();
+            l({ default: d.file_url });
+          } catch (o) {
+            r(o);
+          }
+        }, t.onerror = () => r(t.error), t.readAsDataURL(a);
+      }).catch(r);
+    })
+  });
+}
+const S = ({
+  handleContent: s,
+  placeholder: i,
+  contentQuestion: l,
+  error: r,
+  showOnly: a,
+  className: t,
+  disableItem: o,
+  uploadUrl: d = w
+}) => {
+  const k = f(null), [c, u] = g(l ?? ""), h = T.filter(
+    (e) => o ? !o.includes(e) : !0
+  );
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: k,
+      className: `hsa-ck-wrap ${r ? "ckstyle-err" : ""} ${a ? "ckstyle" : ""} ${t ?? ""}`,
+      style: { color: "#000" },
+      children: [
+        /* @__PURE__ */ b("style", { children: x }),
+        /* @__PURE__ */ b(
+          R,
+          {
+            editor: y,
+            config: {
+              toolbar: { items: h },
+              placeholder: i,
+              licenseKey: "MEtLSVRKRXpqd2lSMnNuL3dsYnZHUWozTUpYSjU4NlhjRWtVQ3kzRFR6TlhQVTVBMDJxMWo1V0o3R29LLU1qQXlOREEwTVRNPQ"
+            },
+            data: c == null ? void 0 : c.replaceAll("<mfenced>", "<mfenced separators>"),
+            onReady: (e) => {
+              e.setData(
+                e.getData().replaceAll("<p>&nbsp;</p>", "").replaceAll("<br>&nbsp;", "<br/>")
+              ), a ? e.enableReadOnlyMode("hsa-report-widget") : e.disableReadOnlyMode("hsa-report-widget");
+              const n = e.plugins.get("FileRepository");
+              n && (n.createUploadAdapter = A(d));
+            },
+            onChange: (e, n) => {
+              const p = n.getData();
+              u(p), s(p.replaceAll("<p>&nbsp;</p>", "<br/>"));
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  S as default
+};
+//# sourceMappingURL=ckeditor.mjs.map

package/dist/ckeditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ckeditor.mjs","sources":["../src/components/CkEditor.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { CKEditor } from '@ckeditor/ckeditor5-react';\nimport ClassicEditor from 'hocmai-ckeditor-custom';\nimport 'ckeditor5-classic-with-mathtype/build/translations/vi.js';\n\nexport interface CkEditorProps {\n  /** Called with the editor HTML whenever the content changes. */\n  handleContent: (data: string) => void;\n  placeholder?: string;\n  contentQuestion?: string;\n  error?: boolean;\n  showOnly?: boolean;\n  className?: string;\n  disableItem?: string[];\n  /** Endpoint that accepts { base64 } and returns { file_url } for image uploads. */\n  uploadUrl?: string;\n}\n\nconst DEFAULT_UPLOAD_URL =\n  'https://lcms.icanwork.vn/api/upload-to-s3/upload-image-error-to-s3';\n\n// Style overrides for the CKEditor UI, injected via a <style> tag (self-contained;\n// no Next.js-only CSS-module import).\nconst CKEDITOR_OVERRIDE_CSS = `\n.hsa-ck-wrap .ck-editor { width: 100%; height: 100%; border: none; border-radius: 10px; outline: none; padding: 0; margin: 0; background-color: transparent; }\n.hsa-ck-wrap .ck-toolbar { background-color: transparent !important; border: 1px solid #b2b2b2 !important; border-bottom: none; }\n.hsa-ck-wrap .ck-content { padding: 8px 10px; margin: 0; border: 1px solid #b2b2b2; border-radius: 0 0 6px 6px; outline: none; resize: none; min-height: 120px; }\n.hsa-ck-wrap .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused { box-shadow: none !important; }\n.hsa-ck-wrap .ck.ck-button:not(.ck-disabled):hover, .hsa-ck-wrap a.ck.ck-button:not(.ck-disabled):hover { border-radius: 4px !important; }\n.hsa-ck-wrap.ckstyle-err .ck-toolbar, .hsa-ck-wrap.ckstyle-err .ck-content { border-color: #ef4444 !important; }\n`;\n\nconst TOOLBAR_ITEMS = [\n  'MathType', 'ChemType', 'heading', '|',\n  'bold', 'underline', 'italic', 'link', 'subscript', 'superscript',\n  'fontColor', 'fontFamily', 'fontSize', 'bulletedList', 'numberedList', '|',\n  'outdent', 'indent', 'alignment', '|',\n  'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo', 'removeFormat',\n];\n\n/** Upload an image as base64 and return its URL (fetch — no axios dependency). */\nfunction makeUploadAdapter(uploadUrl: string) {\n  return (loader: { file: Promise<File> }) => ({\n    upload: () =>\n      new Promise((resolve, reject) => {\n        loader.file\n          .then((img) => {\n            const reader = new FileReader();\n            reader.onload = async () => {\n              try {\n                const res = await fetch(uploadUrl, {\n                  method: 'POST',\n                  headers: { 'Content-Type': 'application/json', Accept: '*/*' },\n                  body: JSON.stringify({ base64: reader.result as string }),\n                });\n                const data = await res.json();\n                resolve({ default: data.file_url });\n              } catch (err) {\n                reject(err);\n              }\n            };\n            reader.onerror = () => reject(reader.error);\n            reader.readAsDataURL(img);\n          })\n          .catch(reject);\n      }),\n  });\n}\n\nconst CkEditor = ({\n  handleContent,\n  placeholder,\n  contentQuestion,\n  error,\n  showOnly,\n  className,\n  disableItem,\n  uploadUrl = DEFAULT_UPLOAD_URL,\n}: CkEditorProps) => {\n  const refCkeditor = useRef<HTMLDivElement>(null);\n  const [content, setContent] = useState(contentQuestion ?? '');\n\n  const items = TOOLBAR_ITEMS.filter((item) =>\n    disableItem ? !disableItem.includes(item) : true\n  );\n\n  return (\n    <div\n      ref={refCkeditor}\n      className={`hsa-ck-wrap ${error ? 'ckstyle-err' : ''} ${showOnly ? 'ckstyle' : ''} ${className ?? ''}`}\n      style={{ color: '#000' }}\n    >\n      <style>{CKEDITOR_OVERRIDE_CSS}</style>\n      <CKEditor\n        editor={ClassicEditor}\n        config={{\n          toolbar: { items },\n          placeholder,\n          licenseKey:\n            'MEtLSVRKRXpqd2lSMnNuL3dsYnZHUWozTUpYSjU4NlhjRWtVQ3kzRFR6TlhQVTVBMDJxMWo1V0o3R29LLU1qQXlOREEwTVRNPQ',\n        }}\n        data={content?.replaceAll('<mfenced>', '<mfenced separators>')}\n        onReady={(editor: any) => {\n          editor.setData(\n            editor\n              .getData()\n              .replaceAll('<p>&nbsp;</p>', '')\n              .replaceAll('<br>&nbsp;', '<br/>')\n          );\n          if (showOnly) {\n            editor.enableReadOnlyMode('hsa-report-widget');\n          } else {\n            editor.disableReadOnlyMode('hsa-report-widget');\n          }\n          const fileRepository = editor.plugins.get('FileRepository');\n          if (fileRepository) {\n            fileRepository.createUploadAdapter = makeUploadAdapter(uploadUrl);\n          }\n        }}\n        onChange={(_event: unknown, editor: any) => {\n          const data = editor.getData();\n          setContent(data);\n          handleContent(data.replaceAll('<p>&nbsp;</p>', '<br/>'));\n        }}\n      />\n    </div>\n  );\n};\n\nexport default CkEditor;"],"names":["DEFAULT_UPLOAD_URL","CKEDITOR_OVERRIDE_CSS","TOOLBAR_ITEMS","makeUploadAdapter","uploadUrl","loader","resolve","reject","img","reader","data","err","CkEditor","handleContent","placeholder","contentQuestion","error","showOnly","className","disableItem","refCkeditor","useRef","content","setContent","useState","items","item","jsxs","jsx","CKEditor","ClassicEditor","editor","fileRepository","_event"],"mappings":"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"}

package/dist/components/CkEditor.d.ts

@@ -0,0 +1,14 @@
+export interface CkEditorProps {
+    /** Called with the editor HTML whenever the content changes. */
+    handleContent: (data: string) => void;
+    placeholder?: string;
+    contentQuestion?: string;
+    error?: boolean;
+    showOnly?: boolean;
+    className?: string;
+    disableItem?: string[];
+    /** Endpoint that accepts { base64 } and returns { file_url } for image uploads. */
+    uploadUrl?: string;
+}
+declare const CkEditor: ({ handleContent, placeholder, contentQuestion, error, showOnly, className, disableItem, uploadUrl, }: CkEditorProps) => import("react").JSX.Element;
+export default CkEditor;

package/dist/components/FeedbackWidget.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { getDeviceInfo } from '../utils/device';
+import { CkEditorProps } from './CkEditor';
 export interface FeedbackData {
     idQuestion: string | number;
     idChildQuestion?: string | number;
@@ -12,7 +13,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;
@@ -20,6 +22,16 @@ 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>;
 }
 declare const FeedbackWidget: React.FC<FeedbackProps>;
 export default FeedbackWidget;

package/dist/context/FeedbackContext.d.ts

@@ -1,7 +1,14 @@
 import { default as React, ReactNode } from 'react';
 import { FeedbackData } from '../components/FeedbackWidget';
+import { 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;
@@ -9,8 +16,13 @@ interface FeedbackContextType {
 export declare const useFeedback: () => FeedbackContextType;
 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 declare const FeedbackProvider: React.FC<FeedbackProviderProps>;
 export {};