hocmai-feedback-widget 0.2.0 → 0.2.2

package/src/capture/index.ts

@@ -0,0 +1,362 @@
+import { snapdom } from '@zumer/snapdom';
+import { domToPng } from 'modern-screenshot';
+import type { Rect, CaptureOptions, CaptureProgress } from './types';
+import { REPORT_UI_ATTR } from './types';
+import { getCaptureCapabilities, clampScale } from './device-detection';
+import { ensureReadyForCapture } from './fonts';
+import { inlineMathJaxFonts } from './mathjax-fonts';
+
+export type { Rect, CaptureProgress, CaptureOptions } from './types';
+
+const DEFAULT_TIMEOUT = 20000;
+const DEFAULT_BG = '#ffffff';
+
+/** Region to keep, expressed in document (CSS) coordinates. */
+interface Region {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+function scrollOffset() {
+  return {
+    x: window.scrollX || window.pageXOffset || 0,
+    y: window.scrollY || window.pageYOffset || 0,
+  };
+}
+
+function viewportSize() {
+  const w =
+    window.visualViewport?.width ||
+    document.documentElement.clientWidth ||
+    window.innerWidth;
+  const h =
+    window.visualViewport?.height ||
+    document.documentElement.clientHeight ||
+    window.innerHeight;
+  return { w, h };
+}
+
+/** Target rectangle in viewport (client) coordinates — used to prune off-screen nodes. */
+interface ViewportRect {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+function regionToViewportRect(cropRect?: Rect): ViewportRect {
+  if (cropRect) {
+    return {
+      top: cropRect.y,
+      bottom: cropRect.y + cropRect.height,
+      left: cropRect.x,
+      right: cropRect.x + cropRect.width,
+    };
+  }
+  const vp = viewportSize();
+  return { top: 0, bottom: vp.h, left: 0, right: vp.w };
+}
+
+/**
+ * The key to speed on formula-heavy pages: prune any element whose box lies fully
+ * outside the target region. snapdom/modern-screenshot skip a filtered node's whole
+ * subtree, so cloning ~900 nodes instead of ~26,000 turns a 27s capture into ~1.5s.
+ * Also drops the widget's own UI (selectors). getBoundingClientRect is cheap relative
+ * to the per-node clone + getComputedStyle cost it avoids.
+ */
+function makePruneFilter(keep: ViewportRect, selectors: string[], buffer = 150) {
+  return (node: Node): boolean => {
+    if (!(node instanceof Element)) return true;
+    for (const sel of selectors) {
+      if (node.matches?.(sel)) return false;
+    }
+    const r = node.getBoundingClientRect();
+    // Keep zero-size nodes (often layout wrappers / not yet measured).
+    if (r.width === 0 && r.height === 0) return true;
+    if (r.bottom < keep.top - buffer) return false;
+    if (r.top > keep.bottom + buffer) return false;
+    if (r.right < keep.left - buffer) return false;
+    if (r.left > keep.right + buffer) return false;
+    return true;
+  };
+}
+
+/** A crop rect is in viewport coords; convert it (or the whole viewport) to document coords. */
+function resolveRegion(cropRect?: Rect): Region {
+  const scroll = scrollOffset();
+  if (cropRect) {
+    return {
+      x: scroll.x + cropRect.x,
+      y: scroll.y + cropRect.y,
+      w: cropRect.width,
+      h: cropRect.height,
+    };
+  }
+  const vp = viewportSize();
+  return { x: scroll.x, y: scroll.y, w: vp.w, h: vp.h };
+}
+
+function excludeSelectors(extra?: string[]): string[] {
+  return [`[${REPORT_UI_ATTR}]`, ...(extra ?? [])];
+}
+
+function withTimeout<T>(promise: Promise<T>, ms: number, label: string): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(
+      () => reject(new Error(`${label} timed out after ${ms}ms`)),
+      ms
+    );
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (err) => {
+        clearTimeout(timer);
+        reject(err);
+      }
+    );
+  });
+}
+
+function isBlankDataUrl(dataUrl: string | null): boolean {
+  return !dataUrl || dataUrl.length < 2000;
+}
+
+/**
+ * Crop a region (document CSS coords) out of a full-page canvas.
+ * Scale factors are derived from the real canvas size vs the captured element's
+ * scroll size, so we never have to guess the renderer's internal multiplier.
+ */
+function cropFromCanvas(
+  source: HTMLCanvasElement,
+  root: HTMLElement,
+  region: Region,
+  backgroundColor: string
+): string | null {
+  const scroll = scrollOffset();
+  const rootRect = root.getBoundingClientRect();
+  const rootDocLeft = rootRect.left + scroll.x;
+  const rootDocTop = rootRect.top + scroll.y;
+
+  const contentWidth = root.scrollWidth || rootRect.width || 1;
+  const contentHeight = root.scrollHeight || rootRect.height || 1;
+  const scaleX = source.width / contentWidth;
+  const scaleY = source.height / contentHeight;
+
+  // Region relative to the captured element, in source-canvas pixels.
+  const srcX = (region.x - rootDocLeft) * scaleX;
+  const srcY = (region.y - rootDocTop) * scaleY;
+  const srcW = region.w * scaleX;
+  const srcH = region.h * scaleY;
+
+  const out = document.createElement('canvas');
+  out.width = Math.max(1, Math.round(srcW));
+  out.height = Math.max(1, Math.round(srcH));
+  const ctx = out.getContext('2d', { alpha: false });
+  if (!ctx) return null;
+
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, 0, out.width, out.height);
+  ctx.drawImage(source, srcX, srcY, srcW, srcH, 0, 0, out.width, out.height);
+
+  try {
+    return out.toDataURL('image/png');
+  } catch (err) {
+    console.warn('[report-widget] canvas export failed (possibly tainted):', err);
+    return null;
+  } finally {
+    out.width = 0;
+    out.height = 0;
+  }
+}
+
+// Deterministically inline MathJax CHTML fonts as data-URI @font-face so any
+// capture renders formulas immediately (no async font-fetch race). Idempotent;
+// runs when the report form OPENS (via prewarmCapture), overlapping with the
+// user typing, so the click-to-capture is fast. See mathjax-fonts.ts.
+let warmPromise: Promise<void> | null = null;
+function warmOnce(): Promise<void> {
+  if (warmPromise) return warmPromise;
+  warmPromise = (async () => {
+    try {
+      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(
+        (c) => !c.querySelector('svg')
+      );
+      if (!hasChtmlMath) return;
+      const vp = viewportSize();
+      const keep: ViewportRect = { top: 0, bottom: vp.h, left: 0, right: vp.w };
+      try {
+        await snapdom.toCanvas(document.body, {
+          embedFonts: true,
+          dpr: 1,
+          scale: 1,
+          filter: makePruneFilter(keep, [`[${REPORT_UI_ATTR}]`]),
+        });
+      } catch {
+        /* warm errors are non-fatal */
+      }
+    } catch {
+      // Non-fatal: the real capture still runs (may fall back to embedFonts).
+    }
+  })();
+  return warmPromise;
+}
+
+/** Prepare fonts for capture (call when the report form opens). */
+export function prewarmCapture(): Promise<void> {
+  return warmOnce();
+}
+
+/** Tier 1: snapdom clones only the on-screen subtree (fonts embedded), then we crop. */
+async function captureWithSnapdom(
+  region: Region,
+  keepRect: ViewportRect,
+  scale: number,
+  backgroundColor: string,
+  selectors: string[]
+): Promise<string | null> {
+  const root = document.body;
+  const canvas = await snapdom.toCanvas(root, {
+    embedFonts: true,
+    dpr: 1,
+    scale,
+    backgroundColor,
+    filter: makePruneFilter(keepRect, selectors),
+  });
+  return cropFromCanvas(canvas, root, region, backgroundColor);
+}
+
+/** Tier 2: modern-screenshot renders the region directly via an offset transform. */
+async function captureWithModernScreenshot(
+  region: Region,
+  scale: number,
+  backgroundColor: string,
+  selectors: string[]
+): Promise<string | null> {
+  const root = document.body;
+  const rect = root.getBoundingClientRect();
+  // Offset of the region within the captured root, in the root's own coords.
+  const offsetX = region.x - (rect.left + (window.scrollX || 0));
+  const offsetY = region.y - (rect.top + (window.scrollY || 0));
+  // modern-screenshot already clips to width/height, so we must NOT prune
+  // off-screen nodes (that drops content that ends up inside the region after
+  // the transform). Only exclude the widget's own UI.
+  const uiFilter = (node: Node): boolean => {
+    if (!(node instanceof Element)) return true;
+    for (const sel of selectors) {
+      if (node.matches?.(sel)) return false;
+    }
+    return true;
+  };
+  return domToPng(root, {
+    width: region.w,
+    height: region.h,
+    scale,
+    backgroundColor,
+    filter: uiFilter,
+    style: {
+      transform: `translate(${-offsetX}px, ${-offsetY}px)`,
+      transformOrigin: 'top left',
+    },
+  });
+}
+
+/**
+ * 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 async function captureScreenshot(
+  cropRect?: Rect,
+  onProgress?: (progress: CaptureProgress) => void
+): Promise<string | null> {
+  const options: CaptureOptions = {};
+  return captureScreenshotWithOptions(cropRect, { ...options, onProgress });
+}
+
+export async function captureScreenshotWithOptions(
+  cropRect: Rect | undefined,
+  options: CaptureOptions
+): Promise<string | null> {
+  const {
+    backgroundColor = DEFAULT_BG,
+    timeoutMs = DEFAULT_TIMEOUT,
+    excludeSelectors: extraSelectors,
+    onProgress,
+  } = options;
+
+  const report = (progress: CaptureProgress) => onProgress?.(progress);
+  const selectors = excludeSelectors(extraSelectors);
+
+  report({ phase: 'preparing', progress: 10, message: 'Đang chuẩn bị...' });
+  await ensureReadyForCapture();
+
+  const region = resolveRegion(cropRect);
+  const keepRect = regionToViewportRect(cropRect);
+  const caps = getCaptureCapabilities();
+  const root = document.body;
+  const desired = options.scale ?? caps.recommendedScale;
+  const scale = clampScale(
+    desired,
+    root.scrollWidth || region.w,
+    root.scrollHeight || region.h,
+    caps.maxCanvasSize
+  );
+
+  // Font inlining (idempotent; normally already done from open-time prewarm so
+  // this is instant) — makes any capture render formulas with no font race.
+  await warmOnce();
+
+  // Tier 1: snapdom + off-screen prune (fast — clones only viewport nodes — and
+  // renders CHTML reliably). The warm pass on form-open means this is a single
+  // fast pass at click time.
+  try {
+    report({ phase: 'rendering', progress: 50, message: 'Đang chụp...' });
+    const result = await withTimeout(
+      captureWithSnapdom(region, keepRect, scale, backgroundColor, selectors),
+      timeoutMs,
+      'snapdom capture'
+    );
+    if (!isBlankDataUrl(result)) {
+      report({ phase: 'done', progress: 100, message: 'Hoàn tất' });
+      return result;
+    }
+    console.warn('[report-widget] snapdom returned blank result, falling back');
+  } catch (err) {
+    console.warn('[report-widget] snapdom capture failed, falling back:', err);
+  }
+
+  // Tier 2: modern-screenshot (no off-screen prune) — viewport-direct, reliable
+  // fallback if snapdom returns blank.
+  const regionScale = clampScale(desired, region.w, region.h, caps.maxCanvasSize);
+  try {
+    report({ phase: 'rendering', progress: 80, message: 'Đang chụp (dự phòng)...' });
+    const result = await withTimeout(
+      captureWithModernScreenshot(region, regionScale, backgroundColor, selectors),
+      timeoutMs,
+      'modern-screenshot capture'
+    );
+    if (!isBlankDataUrl(result)) {
+      report({ phase: 'done', progress: 100, message: 'Hoàn tất' });
+      return result;
+    }
+  } catch (err) {
+    console.error('[report-widget] modern-screenshot capture failed:', err);
+  }
+
+  console.error('[report-widget] all capture methods failed');
+  return null;
+}

package/src/capture/mathjax-fonts.ts

@@ -0,0 +1,143 @@
+import { REPORT_UI_ATTR } from './types';
+
+/**
+ * The blank-first-capture bug: MathJax CHTML glyphs are drawn with MathJax web
+ * fonts loaded from a (cross-origin) CDN. snapdom inlines those fonts into its
+ * snapshot only after an async fetch, so the first capture is blank and only a
+ * later one is complete.
+ *
+ * Fix: deterministically fetch the MathJax font files ONCE and inject them back
+ * into the document as @font-face rules whose src is a data: URI. After that,
+ * snapdom finds already-inlined fonts (no fetch needed) and the very first
+ * capture renders every formula. Display is unchanged — these rules only add a
+ * data-URI source for the same font families MathJax already uses.
+ */
+
+interface FontFaceInfo {
+  family: string;
+  weight: string;
+  style: string;
+  url: string;
+  format?: string;
+}
+
+const STYLE_ID = 'hsa-report-mathjax-fonts';
+
+function bufferToBase64(buf: ArrayBuffer): string {
+  let binary = '';
+  const bytes = new Uint8Array(buf);
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode.apply(
+      null,
+      bytes.subarray(i, i + chunk) as unknown as number[]
+    );
+  }
+  return btoa(binary);
+}
+
+/** Collect @font-face rules that belong to MathJax from readable stylesheets. */
+function collectMathJaxFontFaces(): FontFaceInfo[] {
+  const faces: FontFaceInfo[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | null = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue; // cross-origin stylesheet — not readable
+    }
+    if (!rules) continue;
+    for (const rule of Array.from(rules)) {
+      if (typeof CSSFontFaceRule !== 'undefined' && rule instanceof CSSFontFaceRule) {
+        const family = rule.style
+          .getPropertyValue('font-family')
+          .replace(/["']/g, '')
+          .trim();
+        if (!/MJX|MathJax/i.test(family)) continue;
+        const srcText = rule.style.getPropertyValue('src');
+        const m = srcText.match(
+          /url\(\s*["']?([^"')]+)["']?\s*\)(?:\s*format\(\s*["']?([^"')]+)["']?\s*\))?/
+        );
+        if (!m) continue;
+        let url: string;
+        try {
+          url = new URL(m[1], sheet.href || window.location.href).href;
+        } catch {
+          continue;
+        }
+        faces.push({
+          family,
+          weight: rule.style.getPropertyValue('font-weight') || 'normal',
+          style: rule.style.getPropertyValue('font-style') || 'normal',
+          url,
+          format: m[2],
+        });
+      }
+    }
+  }
+  return faces;
+}
+
+let inlinePromise: Promise<void> | null = null;
+
+/**
+ * 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 function inlineMathJaxFonts(): Promise<void> {
+  if (inlinePromise) return inlinePromise;
+  inlinePromise = (async () => {
+    if (document.getElementById(STYLE_ID)) return;
+    const faces = collectMathJaxFontFaces();
+    if (faces.length === 0) return; // SVG output or no math → nothing to do
+
+    // De-duplicate by URL (many faces can share files).
+    const byUrl = new Map<string, FontFaceInfo[]>();
+    for (const f of faces) {
+      const list = byUrl.get(f.url) ?? [];
+      list.push(f);
+      byUrl.set(f.url, list);
+    }
+
+    const cssBlocks = await Promise.all(
+      Array.from(byUrl.entries()).map(async ([url, group]) => {
+        try {
+          const res = await fetch(url, { mode: 'cors' });
+          if (!res.ok) return '';
+          const buf = await res.arrayBuffer();
+          const b64 = bufferToBase64(buf);
+          const fmt = group[0].format || (url.includes('woff2') ? 'woff2' : 'woff');
+          const mime = fmt === 'woff2' ? 'font/woff2' : 'font/woff';
+          const dataUri = `url(data:${mime};base64,${b64}) format("${fmt}")`;
+          return group
+            .map(
+              (f) =>
+                `@font-face{font-family:"${f.family}";font-style:${f.style};font-weight:${f.weight};font-display:block;src:${dataUri};}`
+            )
+            .join('');
+        } catch {
+          return '';
+        }
+      })
+    );
+
+    const css = cssBlocks.join('');
+    if (!css) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    // NOT marked with REPORT_UI_ATTR on purpose: the capture must keep these
+    // @font-face rules. (We only exclude visible widget UI via that attr.)
+    void REPORT_UI_ATTR;
+    style.textContent = css;
+    document.head.appendChild(style);
+
+    // Make sure the browser has parsed/loaded them before we capture.
+    try {
+      await (document as Document & { fonts?: { ready?: Promise<unknown> } }).fonts?.ready;
+    } catch {
+      /* ignore */
+    }
+  })();
+  return inlinePromise;
+}

package/src/capture/types.ts

@@ -0,0 +1,34 @@
+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; // 0-100
+  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 const REPORT_UI_ATTR = 'data-hsa-report-ui';

package/src/ckeditor.d.ts

@@ -0,0 +1,14 @@
+// Ambient declarations for the optional CKEditor peer dependencies, used only by
+// the separate `hocmai-feedback-widget/ckeditor` entry. They are externalized at
+// build time and may not be installed, so we type them loosely here.
+declare module '@ckeditor/ckeditor5-react' {
+  import type { ComponentType } from 'react';
+  export const CKEditor: ComponentType<any>;
+}
+
+declare module 'hocmai-ckeditor-custom' {
+  const ClassicEditor: any;
+  export default ClassicEditor;
+}
+
+declare module 'ckeditor5-classic-with-mathtype/build/translations/vi.js';

package/src/components/CkEditor.tsx

@@ -0,0 +1,130 @@
+import { useRef, useState } from 'react';
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import ClassicEditor from 'hocmai-ckeditor-custom';
+import 'ckeditor5-classic-with-mathtype/build/translations/vi.js';
+
+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;
+}
+
+const DEFAULT_UPLOAD_URL =
+  'https://lcms.icanwork.vn/api/upload-to-s3/upload-image-error-to-s3';
+
+// Style overrides for the CKEditor UI, injected via a <style> tag (self-contained;
+// no Next.js-only CSS-module import).
+const CKEDITOR_OVERRIDE_CSS = `
+.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; }
+`;
+
+const TOOLBAR_ITEMS = [
+  'MathType', 'ChemType', 'heading', '|',
+  'bold', 'underline', 'italic', 'link', 'subscript', 'superscript',
+  'fontColor', 'fontFamily', 'fontSize', 'bulletedList', 'numberedList', '|',
+  'outdent', 'indent', 'alignment', '|',
+  'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo', 'removeFormat',
+];
+
+/** Upload an image as base64 and return its URL (fetch — no axios dependency). */
+function makeUploadAdapter(uploadUrl: string) {
+  return (loader: { file: Promise<File> }) => ({
+    upload: () =>
+      new Promise((resolve, reject) => {
+        loader.file
+          .then((img) => {
+            const reader = new FileReader();
+            reader.onload = async () => {
+              try {
+                const res = await fetch(uploadUrl, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', Accept: '*/*' },
+                  body: JSON.stringify({ base64: reader.result as string }),
+                });
+                const data = await res.json();
+                resolve({ default: data.file_url });
+              } catch (err) {
+                reject(err);
+              }
+            };
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(img);
+          })
+          .catch(reject);
+      }),
+  });
+}
+
+const CkEditor = ({
+  handleContent,
+  placeholder,
+  contentQuestion,
+  error,
+  showOnly,
+  className,
+  disableItem,
+  uploadUrl = DEFAULT_UPLOAD_URL,
+}: CkEditorProps) => {
+  const refCkeditor = useRef<HTMLDivElement>(null);
+  const [content, setContent] = useState(contentQuestion ?? '');
+
+  const items = TOOLBAR_ITEMS.filter((item) =>
+    disableItem ? !disableItem.includes(item) : true
+  );
+
+  return (
+    <div
+      ref={refCkeditor}
+      className={`hsa-ck-wrap ${error ? 'ckstyle-err' : ''} ${showOnly ? 'ckstyle' : ''} ${className ?? ''}`}
+      style={{ color: '#000' }}
+    >
+      <style>{CKEDITOR_OVERRIDE_CSS}</style>
+      <CKEditor
+        editor={ClassicEditor}
+        config={{
+          toolbar: { items },
+          placeholder,
+          licenseKey:
+            'MEtLSVRKRXpqd2lSMnNuL3dsYnZHUWozTUpYSjU4NlhjRWtVQ3kzRFR6TlhQVTVBMDJxMWo1V0o3R29LLU1qQXlOREEwTVRNPQ',
+        }}
+        data={content?.replaceAll('<mfenced>', '<mfenced separators>')}
+        onReady={(editor: any) => {
+          editor.setData(
+            editor
+              .getData()
+              .replaceAll('<p>&nbsp;</p>', '')
+              .replaceAll('<br>&nbsp;', '<br/>')
+          );
+          if (showOnly) {
+            editor.enableReadOnlyMode('hsa-report-widget');
+          } else {
+            editor.disableReadOnlyMode('hsa-report-widget');
+          }
+          const fileRepository = editor.plugins.get('FileRepository');
+          if (fileRepository) {
+            fileRepository.createUploadAdapter = makeUploadAdapter(uploadUrl);
+          }
+        }}
+        onChange={(_event: unknown, editor: any) => {
+          const data = editor.getData();
+          setContent(data);
+          handleContent(data.replaceAll('<p>&nbsp;</p>', '<br/>'));
+        }}
+      />
+    </div>
+  );
+};
+
+export default CkEditor;