Merge pull request #121 from OpenDataEnsemble/feature/formplayer-html-rendering

fix(formplayer): Fix JSONForms cell rendering and add HTML label support

Author: Ndacyayisenga-droid

formulus-formplayer/package.json

@@ -18,15 +18,13 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/dompurify": "^3.0.5",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.126",
     "@types/react": "^19.0.11",
     "@types/react-dom": "^19.0.4",
     "ajv": "^8.17.1",
     "ajv-errors": "^3.0.0",
     "ajv-formats": "^3.0.1",
-    "dompurify": "^3.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",

formulus-formplayer/src/App.tsx

@@ -25,6 +25,7 @@ import FileQuestionRenderer, { fileQuestionTester } from './FileQuestionRenderer
 import AudioQuestionRenderer, { audioQuestionTester } from './AudioQuestionRenderer';
 import GPSQuestionRenderer, { gpsQuestionTester } from './GPSQuestionRenderer';
 import VideoQuestionRenderer, { videoQuestionTester } from './VideoQuestionRenderer';
+import HtmlLabelRenderer, { htmlLabelTester } from './HtmlLabelRenderer';
 import { shellMaterialRenderers } from './material-wrappers';
 
 import ErrorBoundary from './ErrorBoundary';
@@ -172,6 +173,7 @@ export const customRenderers = [
   { tester: audioQuestionTester, renderer: AudioQuestionRenderer },
   { tester: gpsQuestionTester, renderer: GPSQuestionRenderer },
   { tester: videoQuestionTester, renderer: VideoQuestionRenderer },
+  { tester: htmlLabelTester, renderer: HtmlLabelRenderer },
 ];
 
 function App() {
@@ -536,7 +538,7 @@ function App() {
 
   const ajv = new Ajv({
     allErrors: true,
-    strictTypes: false, // Allow custom formats without strict type checking
+    strict: false, // Allow custom keywords like x-formulus-validation
   });
   addErrors(ajv);
   addFormats(ajv);

formulus-formplayer/src/HtmlLabelRenderer.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { RankedTester, rankWith, uiTypeIs, UISchemaElement } from '@jsonforms/core';
+import { withJsonFormsLabelProps } from '@jsonforms/react';
+import { Typography, Box } from '@mui/material';
+
+/**
+ * Simple HTML sanitizer that removes dangerous tags and attributes.
+ */
+const sanitizeHtml = (html: string): string => {
+  // Remove script tags and their content
+  let sanitized = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+  // Remove style tags and their content
+  sanitized = sanitized.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '');
+  // Remove event handlers (onclick, onerror, etc.)
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*[^\s>]+/gi, '');
+  // Remove javascript: URLs
+  sanitized = sanitized.replace(/javascript:/gi, '');
+  // Remove data: URLs in href/src (potential XSS vector)
+  sanitized = sanitized.replace(/\s*href\s*=\s*["']?\s*data:/gi, ' href="');
+  sanitized = sanitized.replace(/\s*src\s*=\s*["']?\s*data:/gi, ' src="');
+
+  return sanitized;
+};
+
+/**
+ * Check if content contains HTML tags
+ */
+const hasHtmlTags = (content: string): boolean => {
+  const htmlTagPattern = /<[a-z][a-z0-9]*(\s+[^>]*)?>/i;
+  return htmlTagPattern.test(content);
+};
+
+interface HtmlLabelProps {
+  text?: string;
+  visible?: boolean;
+  uischema?: UISchemaElement;
+}
+
+/**
+ * Custom Label renderer that supports HTML content.
+ * Detects HTML tags in the label text and renders them safely.
+ */
+const HtmlLabelRenderer: React.FC<HtmlLabelProps> = ({ text, visible, uischema }) => {
+  if (visible === false) {
+    return null;
+  }
+
+  // Check if HTML rendering is enabled via options or if content has HTML tags
+  const options = (uischema as any)?.options || {};
+  const htmlEnabled = options.html === true || options.format === 'html';
+  const contentHasHtml = hasHtmlTags(text || '');
+  const shouldRenderHtml = htmlEnabled || contentHasHtml;
+
+  if (shouldRenderHtml && text) {
+    const sanitized = sanitizeHtml(text);
+    return (
+      <Box sx={{ mb: 2 }}>
+        <Typography
+          variant="body1"
+          component="div"
+          sx={{
+            '& ul, & ol': {
+              pl: 3,
+              my: 1,
+            },
+            '& li': {
+              mb: 0.5,
+            },
+            '& b, & strong': {
+              fontWeight: 700,
+            },
+            '& i, & em': {
+              fontStyle: 'italic',
+            },
+            '& br': {
+              display: 'block',
+              content: '""',
+              mt: 1,
+            },
+          }}
+          dangerouslySetInnerHTML={{ __html: sanitized }}
+        />
+      </Box>
+    );
+  }
+
+  // Plain text rendering
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Typography variant="body1">{text}</Typography>
+    </Box>
+  );
+};
+
+// Tester with high priority to override default label renderer
+export const htmlLabelTester: RankedTester = rankWith(10, uiTypeIs('Label'));
+
+// Use type assertion to satisfy withJsonFormsLabelProps
+export default withJsonFormsLabelProps(HtmlLabelRenderer as React.ComponentType<any>);

formulus-formplayer/src/QuestionShell.tsx

@@ -1,58 +1,51 @@
 import React, { ReactNode } from 'react';
 import { Box, Typography, Alert, Stack, Divider } from '@mui/material';
-import DOMPurify from 'dompurify';
 
 /**
- * Safely renders HTML content by detecting HTML tags and rendering them
- * Uses DOMPurify for robust HTML sanitization and dangerouslySetInnerHTML
- * only when HTML is detected for security.
- *
- * This function is backward compatible - if no HTML tags are detected,
- * content is returned as-is for normal text rendering.
+ * Simple HTML sanitizer that removes dangerous tags and attributes.
+ * This is a lightweight alternative that doesn't require external dependencies.
+ */
+const sanitizeHtml = (html: string): string => {
+  // Remove script tags and their content
+  let sanitized = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+  // Remove style tags and their content
+  sanitized = sanitized.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '');
+  // Remove event handlers (onclick, onerror, etc.)
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+  sanitized = sanitized.replace(/\s*on\w+\s*=\s*[^\s>]+/gi, '');
+  // Remove javascript: URLs
+  sanitized = sanitized.replace(/javascript:/gi, '');
+  // Remove data: URLs in href/src (potential XSS vector)
+  sanitized = sanitized.replace(/\s*href\s*=\s*["']?\s*data:/gi, ' href="');
+  sanitized = sanitized.replace(/\s*src\s*=\s*["']?\s*data:/gi, ' src="');
+
+  return sanitized;
+};
+
+/**
+ * Renders content with basic HTML support.
+ * Detects HTML tags and renders them safely using dangerouslySetInnerHTML.
+ * Falls back to plain text for non-HTML content.
  */
 const renderHtmlContent = (content: string | undefined): React.ReactNode => {
   if (!content) return null;
 
-  // More precise HTML tag detection - looks for actual HTML tags, not just < followed by text
-  // This avoids false positives like "Price < $100" or "x < 5"
-  // Pattern: < followed by a letter (tag name), then optional attributes, then >
+  // Check for HTML tags - looks for < followed by a letter (tag start)
   const htmlTagPattern = /<[a-z][a-z0-9]*(\s+[^>]*)?>/i;
   const hasHtmlTags = htmlTagPattern.test(content);
 
   if (hasHtmlTags) {
-    // Use DOMPurify for robust HTML sanitization
-    // Allows safe HTML tags (strong, em, p, br, ul, ol, li, etc.) but removes dangerous content
-    const sanitized = DOMPurify.sanitize(content, {
-      ALLOWED_TAGS: [
-        'strong',
-        'b',
-        'em',
-        'i',
-        'u',
-        'p',
-        'br',
-        'div',
-        'span',
-        'ul',
-        'ol',
-        'li',
-        'a',
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-      ],
-      ALLOWED_ATTR: ['href', 'target', 'rel'], // Allow href for links, target and rel for security
-      ALLOW_DATA_ATTR: false, // Disable data attributes for security
-      KEEP_CONTENT: true, // Keep text content even if tags are removed
-    });
-
-    return <span dangerouslySetInnerHTML={{ __html: sanitized }} />;
+    try {
+      const sanitized = sanitizeHtml(content);
+      return <span dangerouslySetInnerHTML={{ __html: sanitized }} />;
+    } catch (error) {
+      // If sanitization fails, strip all HTML tags
+      console.error('Error rendering HTML content:', error);
+      return content.replace(/<[^>]*>/g, '');
+    }
   }
 
-  // No HTML tags detected, render as plain text (backward compatible)
+  // No HTML tags detected, render as plain text
   return content;
 };
 

formulus-formplayer/src/SwipeLayoutRenderer.tsx

@@ -123,7 +123,7 @@ const SwipeLayoutRenderer = ({
     >
       <div {...handlers} className="swipelayout_screen">
         {(uischema as any)?.label && <h1>{(uischema as any).label}</h1>}
-        {layouts.length > 0 && (
+        {layouts.length > 0 && layouts[currentPage] && (
           <JsonFormsDispatch
             schema={schema}
             uischema={layouts[currentPage]}

formulus-formplayer/src/material-wrappers.tsx

@@ -1,48 +1,11 @@
 import React from 'react';
 import { isEnumControl, RankedTester, rankWith, ControlProps } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import {
-  MaterialTextControl,
-  materialTextControlTester,
-  MaterialNumberControl,
-  materialNumberControlTester,
-  MaterialIntegerControl,
-  materialIntegerControlTester,
-  MaterialDateControl,
-  materialDateControlTester,
-  MaterialDateTimeControl,
-  materialDateTimeControlTester,
-  MaterialTimeControl,
-  materialTimeControlTester,
-  MaterialEnumControl,
-  materialEnumControlTester,
-  MaterialOneOfEnumControl,
-  materialOneOfEnumControlTester,
-  MaterialRadioGroupControl,
-  materialRadioGroupControlTester,
-} from '@jsonforms/material-renderers';
 import { Card, CardActionArea, CardContent, Typography, Box } from '@mui/material';
 import QuestionShell from './QuestionShell';
 
 type AnyControlProps = ControlProps & { errors?: string };
 
-const wrapWithShell =
-  (Inner: React.ComponentType<any>) =>
-  (props: ControlProps): React.ReactElement => {
-    const { schema, uischema, errors } = props;
-    const label = (uischema as any)?.label || schema.title;
-    const description = schema.description;
-    const required = Boolean(
-      (uischema as any)?.options?.required ?? (schema as any)?.options?.required,
-    );
-
-    return (
-      <QuestionShell title={label} description={description} required={required} error={errors}>
-        <Inner {...(props as any)} />
-      </QuestionShell>
-    );
-  };
-
 const cardEnumControlTester: RankedTester = rankWith(6, isEnumControl);
 
 const CardEnumControl = (props: AnyControlProps) => {
@@ -92,43 +55,11 @@ const CardEnumControl = (props: AnyControlProps) => {
   );
 };
 
+// NOTE: We removed the shell wrappers for text/number/integer/date controls because
+// they interfere with JSONForms' internal cell rendering mechanism.
+// The default materialRenderers handle these controls properly.
+// Only export custom renderers that don't break cell rendering.
 export const shellMaterialRenderers = [
-  {
-    tester: materialTextControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialTextControl)),
-  },
-  {
-    tester: materialNumberControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialNumberControl)),
-  },
-  {
-    tester: materialIntegerControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialIntegerControl)),
-  },
-  {
-    tester: materialDateControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialDateControl)),
-  },
-  {
-    tester: materialDateTimeControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialDateTimeControl)),
-  },
-  {
-    tester: materialTimeControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialTimeControl)),
-  },
-  // Card-style select/oneOf/radio
+  // Card-style enum control - a custom renderer that uses QuestionShell
   { tester: cardEnumControlTester, renderer: withJsonFormsControlProps(CardEnumControl) },
-  {
-    tester: materialEnumControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialEnumControl)),
-  },
-  {
-    tester: materialOneOfEnumControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialOneOfEnumControl)),
-  },
-  {
-    tester: materialRadioGroupControlTester,
-    renderer: withJsonFormsControlProps(wrapWithShell(MaterialRadioGroupControl)),
-  },
 ];

formulus/android/app/src/main/assets/formplayer_dist/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "./static/css/main.d72c52e9.css",
-    "main.js": "./static/js/main.1ac29e77.js",
+    "main.css": "./static/css/main.c4fc8de5.css",
+    "main.js": "./static/js/main.2d2937a9.js",
     "index.html": "./index.html",
-    "main.d72c52e9.css.map": "./static/css/main.d72c52e9.css.map",
-    "main.1ac29e77.js.map": "./static/js/main.1ac29e77.js.map"
+    "main.c4fc8de5.css.map": "./static/css/main.c4fc8de5.css.map",
+    "main.2d2937a9.js.map": "./static/js/main.2d2937a9.js.map"
   },
   "entrypoints": [
-    "static/css/main.d72c52e9.css",
-    "static/js/main.1ac29e77.js"
+    "static/css/main.c4fc8de5.css",
+    "static/js/main.2d2937a9.js"
   ]
 }

formulus/android/app/src/main/assets/formplayer_dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script src="./formulus-load.js"></script><script defer="defer" src="./static/js/main.1ac29e77.js"></script><link href="./static/css/main.d72c52e9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><script src="./formulus-load.js"></script><script defer="defer" src="./static/js/main.2d2937a9.js"></script><link href="./static/css/main.c4fc8de5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>