hocmai-feedback-widget 0.2.0 → 0.2.2

package/README.md

@@ -1,144 +1,179 @@
-# 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)**.
 
-## 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.
+> Phiên bản `0.2.2`. API tương thích ngược với `0.2.1` — nâng cấp chỉ cần đổi version, không phải sửa code sử dụng.
 
-## Installation
+## Vì sao có bản này
+
+Bộ chụp ở các bản trước tự viết một "layered canvas renderer": quét toàn bộ DOM bằng
+`getBoundingClientRect()` (treo khi có hàng nghìn node `<mjx-*>`) và chỉ render được math dạng **SVG**.
+Nhưng app render công thức bằng **MathJax v3 CHTML** (HTML + web-font riêng) nên ảnh bị **treo** và
+**trắng / mất công thức**.
+
+Bản này thay bộ chụp bằng [**snapdom**](https://github.com/zumerlab/snapdom) + các kỹ thuật:
+
+- **Prune off-screen**: chỉ clone phần tử trong vùng nhìn thấy → nhanh (~2s) dù trang cao hàng chục nghìn px.
+- **Nhúng font MathJax CHTML thành data-URI** trước khi chụp → công thức render đủ **ngay lần đầu** (hết lỗi `____`).
+- **Hâm nóng lúc mở form** (nền, trong khi người dùng gõ mô tả) → lúc bấm chụp chỉ còn 1 lượt nhanh.
+- **Fallback** `modern-screenshot` + **timeout** cứng (mặc định 20s) → không bao giờ treo vô hạn.
+
+## Cài đặt
 
-### Via NPM/Yarn
 ```bash
 npm install hocmai-feedback-widget
-# or
+# hoặc
 yarn add hocmai-feedback-widget
 ```
 
-### 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
-   ```
+Peer deps bắt buộc: `react`, `react-dom` (>=16.8).
 
-## Usage
+Peer deps **tùy chọn** (chỉ khi dùng `isCkEditor`, xem mục [CKEditor](#trình-soạn-thảo-ckeditor-isckeditor)):
+`@ckeditor/ckeditor5-react@^41.2.0`, `hocmai-ckeditor-custom`, `ckeditor5-classic-with-mathtype@1.0.0`.
 
-### 1. Wrap your application
-Wrap your root component (or the section of the app that needs feedback) with `FeedbackProvider`.
+> Cài qua tarball/local khi phát triển: `npm pack` rồi `yarn add ./hocmai-feedback-widget-0.2.2.tgz`.
 
+## Dùng nhanh
+
+### 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() {
+function App({ Component, pageProps }) {
   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
+    // data.listImage: mảng URL ảnh đã upload
+    // data.deviceInfo, data.errorType, data.errorDescription, data.idQuestion...
+    await api.post('/questionReport/studentReport', data);
   };
 
   return (
     <FeedbackProvider onSubmit={handleSubmit} themeColor="#3b82f6">
-      <YourAppContent />
+      <Component {...pageProps} />
     </FeedbackProvider>
   );
 }
 ```
 
-### 2. Trigger Feedback Form
-Use the `useFeedback` hook anywhere in your child components to open the widget for a specific item.
-
+### 2. Mở form từ component con bằng `useFeedback`
 ```tsx
 import { useFeedback } from 'hocmai-feedback-widget';
 
-const QuestionItem = ({ id, content }) => {
+const QuestionItem = ({ question }) => {
   const { openFeedback } = useFeedback();
-
   return (
-    <div className="card">
-      <p>{content}</p>
-      <button 
-        onClick={() => openFeedback(id, { questionIdChild: 'optional-child-id', ...otherContext })}
-      >
-        Report Error
-      </button>
-    </div>
+    <button onClick={() => openFeedback(question.id, { questionIdChild: question.childId })}>
+      Báo lỗi
+    </button>
   );
 };
 ```
 
-### 3. Standalone Component
-If you need a single widget instance and manage state manually (legacy mode):
+### 3. Chụp màn hình trực tiếp (tùy chọn)
+```ts
+import { captureScreenshot, captureScreenshotWithOptions } from 'hocmai-feedback-widget';
 
-```tsx
-import { FeedbackWidget } from 'hocmai-feedback-widget';
-
-<FeedbackWidget 
-  questionId="123"
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  onSubmit={handleSubmit}
-  isEnableCaptureFull={true}
-  isEnableCaptureElement={true}
-/>
+const png = await captureScreenshot();                            // toàn viewport
+const region = await captureScreenshot({ x, y, width, height });  // 1 vùng (toạ độ viewport)
+const tuned = await captureScreenshotWithOptions(undefined, { scale: 2, timeoutMs: 30000 });
 ```
 
-## Props & Configuration
+## API
 
-### 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. |
+### `FeedbackProvider`
+| Prop | Kiểu | Mặc định | Mô tả |
+|------|------|----------|-------|
+| `onSubmit` | `(data: FeedbackData) => Promise<void>` | (bắt buộc) | Gọi khi gửi báo lỗi. |
+| `themeColor` | `string` | `#3b82f6` | Màu chủ đạo nút/viền. |
+| `isCkEditor` | `boolean` | `false` | Dùng CKEditor (rich-text) cho ô mô tả thay vì textarea. |
+| `children` | `ReactNode` | — | Nội dung app. |
 
-### FeedbackData Interface
+### `useFeedback()`
+- `openFeedback(questionId, contextData?)` — mở form. `contextData.questionIdChild` sẽ tự điền ô "ID câu hỏi con".
+- `closeFeedback()` — đóng form.
+- `isOpen`, `activeQuestionId` — trạng thái hiện tại.
+
+### `FeedbackData`
 ```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 bật isCkEditor
+  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. |
+### `FeedbackWidget` (dùng độc lập, không qua Provider)
+| Prop | Kiểu | Mặc định | Mô tả |
+|------|------|----------|-------|
+| `questionId` | `string \| number` | (bắt buộc) | ID câu hỏi. |
+| `onSubmit` | `function` | (bắt buộc) | Nhận `FeedbackData`. |
+| `contextData` | `object` | — | Dữ liệu kèm theo (vd `questionIdChild`). |
+| `themeColor` | `string` | `#3b82f6` | Màu chủ đạo. |
+| `isOpen` / `onClose` / `onOpen` | — | — | Điều khiển hiển thị thủ công. |
+| `isEnableCaptureFull` | `boolean` | `true` | Bật nút "Toàn màn hình". |
+| `isEnableCaptureElement` | `boolean` | `true` | Bật nút "Chọn vùng". |
+| `isCkEditor` | `boolean` | `false` | Dùng CKEditor cho ô mô tả. |
+| `uploadUrl` | `string` | endpoint LCMS mặc định | Nơi upload ảnh `{ base64 }` → trả `{ file_url }`. |
+
+### Tiện ích chụp
+- `captureScreenshot(cropRect?, onProgress?) => Promise<string | null>` — trả PNG data-URL (hoặc `null` nếu thất bại).
+- `captureScreenshotWithOptions(cropRect, options)` — `options`: `{ scale?, backgroundColor?, timeoutMs?, excludeSelectors?, onProgress? }`.
+- `prewarmCapture()` — hâm nóng font/cache (tự gọi khi form mở).
+- Types: `Rect`, `CaptureProgress`, `CaptureOptions`.
+
+## Trình soạn thảo CKEditor (`isCkEditor`)
+
+Mặc định ô mô tả là textarea. Muốn dùng **CKEditor (kèm MathType)**, bật `isCkEditor` **và truyền component
+editor** qua prop `descriptionEditor`. Editor nằm ở **entry phụ** `hocmai-feedback-widget/ckeditor`.
+
+> Vì sao tách rời? Để **core widget không phụ thuộc CKEditor** — app không dùng CKEditor vẫn build bình
+> thường, không cần cài deps CKEditor. Chỉ ai dùng `descriptionEditor` mới cần cài.
+
+```tsx
+import { FeedbackProvider } from 'hocmai-feedback-widget';
+import CkEditor from 'hocmai-feedback-widget/ckeditor';
+
+<FeedbackProvider onSubmit={handleSubmit} isCkEditor descriptionEditor={CkEditor}>
+  <App />
+</FeedbackProvider>
+```
+
+**Khi dùng `descriptionEditor`/`hocmai-feedback-widget/ckeditor`, phải cài thêm:**
+```bash
+yarn add @ckeditor/ckeditor5-react hocmai-ckeditor-custom ckeditor5-classic-with-mathtype
+```
+
+> ⚠️ **Xung đột phiên bản:** `hocmai-ckeditor-custom` là build kiểu cũ → phải dùng `@ckeditor/ckeditor5-react`
+> đời cũ (v5/v6), **KHÔNG** dùng latest (v11 cần `ckeditor5>=46`). Nên **copy đúng version** của 3 package
+> này từ project gốc đang chạy CKEditor. Build này đã chứa sẵn core nên **không cần** `@ckeditor/ckeditor5-core` riêng.
+
+> ⚠️ Khi bật CKEditor, `errorDescription` là **HTML** (không phải text thuần) — backend cần xử lý phù hợp.
+
+> Bạn cũng có thể truyền editor của riêng mình cho `descriptionEditor` (component nhận props
+> `{ handleContent, contentQuestion, error, placeholder, uploadUrl }` — xem type `CkEditorProps`).
+
+## Cơ chế chụp & giới hạn
+
+- Mặc định chụp **vùng viewport** (hoặc vùng crop), không phải toàn trang → nhanh kể cả trang dài.
+- UI của chính widget tự bị loại khỏi ảnh (qua thuộc tính `data-hsa-report-ui`).
+- `scale` mặc định theo thiết bị, bị giới hạn bởi kích thước canvas tối đa của trình duyệt (16384px/cạnh).
+- An toàn SSR (không chạm `window`/`document` lúc import).
+
+## Phát triển
+
+```bash
+npm install
+npm run dev        # dev harness: 60 câu nhiều công thức MathJax CHTML
+npm run typecheck  # kiểm tra kiểu
+npm run test       # Playwright: chụp nhanh + không trắng + đúng vùng + cuộn
+npm run build      # build dist (esm .mjs + umd .cjs + .d.ts)
+```
+
+## Migrate từ `hocmai-feedback-widget@0.2.1`
+Chỉ cần nâng version — API `FeedbackProvider`/`useFeedback`/`FeedbackData` giữ nguyên. Không phải sửa code sử dụng. (Bản này thêm tùy chọn `isCkEditor` và `uploadUrl`.)
 
 ## License
 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;
@@ -20,6 +21,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,5 +1,6 @@
 import { default as React, ReactNode } from 'react';
 import { FeedbackData } from '../components/FeedbackWidget';
+import { CkEditorProps } from '../components/CkEditor';
 interface FeedbackContextType {
     openFeedback: (questionId: string | number, contextData?: any) => void;
     closeFeedback: () => void;
@@ -11,6 +12,10 @@ interface FeedbackProviderProps {
     children: ReactNode;
     onSubmit: (data: FeedbackData) => Promise<void>;
     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 {};