hocmai-feedback-widget 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -1,5 +1,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 { captureScreenshot } from './utils/screenshot';
-export type { Rect, CaptureProgress } from './utils/screenshot/types';
+export type { FeedbackSubmitHandler } from './context/FeedbackContext';
+export { captureScreenshot, captureScreenshotWithOptions, prewarmCapture, } from './capture';
+export type { Rect, CaptureProgress, CaptureOptions } from './capture/types';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "hocmai-feedback-widget",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
-  "main": "./dist/support-feedback-lib.umd.js",
-  "module": "./dist/support-feedback-lib.es.js",
+  "description": "Feedback/report widget with MathJax-aware screenshot capture (snapdom + embedded fonts).",
+  "module": "./dist/hocmai-feedback-widget.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -13,44 +13,54 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/support-feedback-lib.es.js",
-      "require": "./dist/support-feedback-lib.umd.js"
+      "import": "./dist/hocmai-feedback-widget.mjs"
+    },
+    "./ckeditor": {
+      "types": "./dist/components/CkEditor.d.ts",
+      "import": "./dist/ckeditor.mjs"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "test": "playwright test"
   },
   "dependencies": {
+    "@zumer/snapdom": "^2.12.9",
     "lucide-react": "^0.562.0",
     "modern-screenshot": "^4.6.7",
     "ua-parser-js": "^2.0.7"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@ckeditor/ckeditor5-react": "*",
+    "hocmai-ckeditor-custom": "*",
+    "ckeditor5-classic-with-mathtype": "*"
+  },
+  "peerDependenciesMeta": {
+    "@ckeditor/ckeditor5-react": {
+      "optional": true
+    },
+    "hocmai-ckeditor-custom": {
+      "optional": true
+    },
+    "ckeditor5-classic-with-mathtype": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@playwright/test": "^1.58.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@types/ua-parser-js": "^0.7.39",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "http-server": "^14.1.1",
-    "patch-package": "^8.0.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4"
+    "@playwright/test": "^1.48.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.6.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.2.0"
   }
-}
+}

package/src/App.tsx

@@ -1,75 +1,164 @@
-import { useState } from 'react'
-import { FeedbackProvider, useFeedback } from './context/FeedbackContext';
-import { type FeedbackData } from './components/FeedbackWidget';
-import './App.css'
+import React from 'react';
+import { FeedbackProvider, useFeedback, captureScreenshot, type FeedbackData } from './index';
+import CkEditor from './components/CkEditor';
 
-// Reusable Question Component
-const QuestionItem = ({ id, content }: { id: string | number, content: string }) => {
-  const { openFeedback } = useFeedback();
-  const [selected, setSelected] = useState(false);
+declare global {
+  interface Window {
+    MathJax?: {
+      typesetPromise?: (els?: Element[]) => Promise<void>;
+      startup?: { promise?: Promise<unknown> };
+    };
+  }
+}
 
-  return (
-    <div className="card" style={{ padding: '20px', border: '1px solid #e5e7eb', marginBottom: '16px', borderRadius: '8px', background: 'white', textAlign: 'left' }}>
-      <h3 style={{ marginTop: 0 }}>Question {id}</h3>
-      <p>{content}</p>
+// A pile of formula-heavy questions, mirroring the host app's MathJax CHTML usage.
+const FORMULAS = [
+  String.raw`\(\displaystyle \int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}\)`,
+  String.raw`\(\displaystyle \sum_{n=1}^{\infty}\frac{1}{n^2} = \frac{\pi^2}{6}\)`,
+  String.raw`\(\displaystyle \frac{d}{dx}\left[\frac{\sin x}{1+\cos x}\right]\)`,
+  String.raw`\(\displaystyle x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\)`,
+  String.raw`\(\displaystyle \lim_{x\to 0}\frac{\sin x}{x} = 1\)`,
+  String.raw`\(\displaystyle \binom{n}{k} = \frac{n!}{k!(n-k)!}\)`,
+  String.raw`\(\displaystyle \begin{pmatrix} a & b \\ c & d \end{pmatrix}^{-1}\)`,
+  String.raw`\(\displaystyle \sqrt[3]{\frac{a^2+b^2}{c^2}}\)`,
+];
 
-      <div style={{ display: 'flex', gap: '10px', marginTop: '12px' }}>
-        <button
-          onClick={() => setSelected(!selected)}
-          style={{ background: selected ? '#dbeafe' : '#f3f4f6', color: selected ? '#1d4ed8' : '#374151' }}
-        >
-          {selected ? 'Selected' : 'Select'}
-        </button>
+const Question: React.FC<{ id: number }> = ({ id }) => {
+  const { openFeedback } = useFeedback();
+  const f1 = FORMULAS[id % FORMULAS.length];
+  const f2 = FORMULAS[(id + 3) % FORMULAS.length];
 
-        <button
-          onClick={() => openFeedback(id, { source: 'QuestionItem', contentSnippet: content.slice(0, 20) })}
-          style={{ background: 'transparent', border: '1px solid #fecaca', color: '#dc2626' }}
-        >
-          Báo lỗi (Feedback)
-        </button>
+  return (
+    <div
+      data-question-id={id}
+      style={{
+        border: '1px solid #e5e7eb',
+        borderRadius: 8,
+        padding: 16,
+        margin: '12px 0',
+        background: '#fff',
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <strong>Câu {id}</strong>
+        <button onClick={() => openFeedback(id)}>Báo lỗi</button>
+      </div>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: `Cho biểu thức ${f1}. Tính giá trị của ${f2} và chứng minh kết quả.`,
+        }}
+      />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        {['A', 'B', 'C', 'D'].map((opt, i) => (
+          <label key={opt} style={{ display: 'flex', gap: 8 }}>
+            <input type="radio" name={`q-${id}`} />
+            <span
+              dangerouslySetInnerHTML={{
+                __html: `${opt}. ${FORMULAS[(id + i) % FORMULAS.length]}`,
+              }}
+            />
+          </label>
+        ))}
       </div>
     </div>
   );
 };
 
-function AppContent() {
-  const [count, setCount] = useState(0);
-
+// Mirror the host app's fixed full-screen watermark overlay (position:fixed; inset:0; z-index:10).
+const Watermark: React.FC = () => {
+  const cols = 4;
+  const rows = 6;
+  const items = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      items.push(
+        <div
+          key={`wm-${r}-${c}`}
+          style={{
+            position: 'absolute',
+            left: `${(c / cols) * 100 + 100 / cols / 2}%`,
+            top: `${(r / rows) * 100 + 100 / rows / 2}%`,
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            fontSize: '20px',
+            fontWeight: 700,
+            color: 'rgba(0,0,0,0.06)',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            letterSpacing: '4px',
+          }}
+        >
+          HOCMAI.VN
+        </div>
+      );
+    }
+  }
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
-      <h1>Exam System Demo (Multi-Question)</h1>
-      <p style={{ marginBottom: '2rem' }}>
-        Support Package integrated via <code>FeedbackProvider</code>.
-      </p>
-
-      <img
-        style={{ width: '48px', height: '48px', borderRadius: '50%', background: '#1d4ed8', marginLeft: '8px', objectFit: 'cover', }}
-        src='https://cdn2.thecatapi.com/images/MTY3ODIyMQ.jpg'
-      />
-      <QuestionItem id="101" content="What is the capital of Vietnam?" />
-      <QuestionItem id="102" content="Calculate the area of a circle with radius 5." />
-      <QuestionItem id="103" content="Who wrote 'Truyen Kieu'?" />
-
-      <div style={{ marginTop: '40px', padding: '20px', background: '#f9fafb', borderRadius: '8px' }}>
-        <button onClick={() => setCount(c => c + 1)}>Global Counter: {count}</button>
-      </div>
+    <div style={{ position: 'fixed', inset: 0, zIndex: 10, overflow: 'hidden', pointerEvents: 'none' }} aria-hidden>
+      {items}
     </div>
-  )
-}
+  );
+};
 
-function App() {
-  const handleFeedbackSubmit = async (data: FeedbackData) => {
-    console.log('Received Feedback via Provider:', data);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+const COUNT = 60;
+
+const App: React.FC = () => {
+  const handleSubmit = async (data: FeedbackData) => {
+    console.log('Feedback submitted (dev):', data);
   };
 
+  React.useEffect(() => {
+    // Typeset all the math, then flag readiness for the Playwright test.
+    const run = async () => {
+      if (window.MathJax?.startup?.promise) {
+        await window.MathJax.startup.promise;
+      }
+      if (window.MathJax?.typesetPromise) {
+        await window.MathJax.typesetPromise();
+      }
+      // Expose for the Playwright capture test.
+      (window as unknown as { __captureScreenshot?: typeof captureScreenshot }).__captureScreenshot =
+        captureScreenshot;
+      document.body.setAttribute('data-math-ready', 'true');
+    };
+    run();
+  }, []);
+
   return (
-    <FeedbackProvider onSubmit={handleFeedbackSubmit}>
-      <AppContent />
+    <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 />
+        <div
+          style={{
+            height: 114,
+            width: '100%',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            zIndex: 20,
+            background: 'linear-gradient(90deg,#1e3a8a,#2563eb)',
+            color: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 700,
+          }}
+        >
+          ĐỀ THI THỬ — header cố định (fixed)
+        </div>
+        <div style={{ maxWidth: 760, margin: '0 auto', padding: 24, paddingTop: 140, fontFamily: 'system-ui, sans-serif' }}>
+          <h1>Đề thi thử (dev harness · {COUNT} câu nhiều công thức)</h1>
+          <p>Trang này tái hiện môi trường MathJax CHTML để kiểm thử chụp màn hình.</p>
+          {Array.from({ length: COUNT }, (_, i) => (
+            <Question key={i + 1} id={i + 1} />
+          ))}
+        </div>
+      </div>
     </FeedbackProvider>
-  )
-}
-
-export default App
-
+  );
+};
 
+export default App;

package/src/capture/device-detection.ts

@@ -0,0 +1,52 @@
+export interface CaptureCapabilities {
+  /** Largest canvas dimension (px) the device can reliably allocate. */
+  maxCanvasSize: number;
+  /** Recommended pixel multiplier before clamping to maxCanvasSize. */
+  recommendedScale: number;
+}
+
+function ua(): string {
+  return (typeof navigator !== 'undefined' ? navigator.userAgent : '').toLowerCase();
+}
+
+export function isIOSSafari(): boolean {
+  const u = ua();
+  const isIOS = /iphone|ipad|ipod/.test(u) ||
+    // iPadOS 13+ reports as desktop Safari with touch support
+    (/macintosh/.test(u) && typeof document !== 'undefined' && 'ontouchend' in document);
+  const isSafari = /safari/.test(u) && !/chrome|crios|crmo|fxios|edgios/.test(u);
+  return isIOS && isSafari;
+}
+
+export function getCaptureCapabilities(): CaptureCapabilities {
+  const u = ua();
+  const isMobile = /iphone|ipod|android.*mobile/.test(u);
+  const isTablet = /ipad|android(?!.*mobile)/.test(u);
+  const deviceMemory = (navigator as { deviceMemory?: number }).deviceMemory ?? 4;
+  const isLowMemory = deviceMemory < 4;
+
+  if (isMobile) {
+    return { maxCanvasSize: 4096, recommendedScale: isLowMemory ? 1 : 1.5 };
+  }
+  if (isTablet) {
+    return { maxCanvasSize: 8192, recommendedScale: 2 };
+  }
+  return { maxCanvasSize: 16384, recommendedScale: 2 };
+}
+
+/**
+ * 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 function clampScale(
+  desiredScale: number,
+  contentWidth: number,
+  contentHeight: number,
+  maxCanvasSize: number
+): number {
+  const maxByWidth = contentWidth > 0 ? maxCanvasSize / contentWidth : desiredScale;
+  const maxByHeight = contentHeight > 0 ? maxCanvasSize / contentHeight : desiredScale;
+  const scale = Math.min(desiredScale, maxByWidth, maxByHeight);
+  // Never go below 0.5 — a tiny screenshot is worse than a slightly-too-big one.
+  return Math.max(0.5, scale);
+}

package/src/capture/fonts.ts

@@ -0,0 +1,34 @@
+interface MathJaxLike {
+  startup?: { promise?: Promise<unknown> };
+  typesetPromise?: () => Promise<unknown>;
+}
+
+function getMathJax(): MathJaxLike | undefined {
+  return (window as unknown as { MathJax?: MathJaxLike }).MathJax;
+}
+
+/** Wait until MathJax has finished its initial typeset so formulas have laid out. */
+export async function waitForMathJax(): Promise<void> {
+  const MJ = getMathJax();
+  if (!MJ) return;
+  try {
+    if (MJ.startup?.promise) {
+      await MJ.startup.promise;
+    }
+  } catch {
+    /* ignore — capture should proceed even if MathJax errored */
+  }
+}
+
+/** Two animation frames: let layout/paint settle before we snapshot. */
+function nextFrames(): Promise<void> {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+/** Resolve once the page is ready for a faithful snapshot. */
+export async function ensureReadyForCapture(): Promise<void> {
+  await waitForMathJax();
+  await nextFrames();
+}