@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/components/input/HtmlInputField.tsx

@@ -6,13 +6,13 @@
  * - HTML preview mode and help system
  * - HTML sanitization for security
  * - Data binding support for dynamic content
- * - Full serialization support via ModelView
+ * - Full serialization support via factory pattern
  * - Consistent Material-UI styling
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement, useState } from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   TextField,
@@ -23,7 +23,6 @@ import {
   Alert,
   ButtonGroup,
   Divider,
-  Paper
 } from '@mui/material';
 import {
   FormatBold as BoldIcon,
@@ -34,21 +33,29 @@ import {
   VisibilityOff as EditIcon,
   Help as HelpIcon
 } from '@mui/icons-material';
-import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
-import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../hooks';
 import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
-import { ModelView } from '../base/ModelView';
-
-type HtmlInputFieldViewProps = ModelProps<HtmlInputFieldModel> & {
-  /** Change handler */
+import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
+import { ViewProps } from '../shared/viewProps';
+
+export interface HtmlInputFieldProps extends ViewProps {
+  // Component-specific props from HtmlInputFieldModel
+  label?: string;
+  value?: string;
+  required?: boolean;
+  disabled?: boolean;
+  error?: string;
+  helperText?: string;
+  placeholder?: string;
+  rows?: number;
+  maxLength?: number;
+  showPreview?: boolean;
+  showHelp?: boolean;
+  // Additional props for enhanced functionality
   onChange?: (value: string) => void;
-  /** Focus handler */
   onFocus?: () => void;
-};
-
-export interface HtmlInputFieldProps extends HtmlInputFieldViewProps, WithDataBinding {}
+}
 
 // View component - handles the actual rendering
 function HtmlInputFieldView({
@@ -57,300 +64,170 @@ function HtmlInputFieldView({
   onChange,
   onFocus,
   required = false,
-  placeholder = '',
-  multiline = true,
-  rows = 4,
   disabled = false,
+  error,
+  helperText,
+  placeholder,
+  rows = 4,
+  maxLength,
+  showPreview = true,
+  showHelp = false,
   ...restProps
-}: HtmlInputFieldViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
-  const [showPreview, setShowPreview] = useState(false);
-  const [showHelp, setShowHelp] = useState(false);
+}: HtmlInputFieldProps) {
+  const [previewMode, setPreviewMode] = useState(false);
+  const [showHelpText, setShowHelpText] = useState(false);
 
-  // Return empty state if no onChange handler
-  if (!onChange) {
-    return (
-      <Paper
-        {...htmlProps}
-        {...styleProps}
-        variant="outlined"
-        sx={{
-          p: 3,
-          textAlign: 'center',
-          opacity: 0.6,
-          ...styleProps.sx
-        }}
-      >
-        <Typography variant="body2" color="text.secondary">
-          No onChange handler provided for {label}
-        </Typography>
-      </Paper>
-    );
-  }
-
-  // Sanitize HTML content using default configuration
-  const sanitizeHtmlContent = (htmlContent: string) => {
-    return sanitizeHtml(htmlContent);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event.target.value);
   };
 
-  // Handle text formatting
-  const insertFormatting = (openTag: string, closeTag: string) => {
-    const textarea = document.getElementById(`html-textfield-${label}`) as HTMLTextAreaElement;
-    if (textarea) {
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const selectedText = value.substring(start, end);
-      
-      let newText;
-      if (selectedText) {
-        // Wrap selected text
-        newText = value.substring(0, start) + openTag + selectedText + closeTag + value.substring(end);
-      } else {
-        // Insert tags at cursor position
-        newText = value.substring(0, start) + openTag + closeTag + value.substring(start);
-      }
-      
-      onChange(newText);
-      
-      // Set cursor position after the opening tag
-      setTimeout(() => {
-        const newPosition = selectedText ? end + openTag.length + closeTag.length : start + openTag.length;
-        textarea.setSelectionRange(newPosition, newPosition);
-        textarea.focus();
-      }, 0);
+  const insertTag = (tag: string, hasClosing = true) => {
+    if (disabled) return;
+    
+    const textarea = document.activeElement as HTMLTextAreaElement;
+    if (!textarea || textarea.tagName !== 'TEXTAREA') return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = value.substring(start, end);
+    
+    let insertText = '';
+    if (hasClosing) {
+      insertText = `<${tag}>${selectedText}</${tag}>`;
+    } else {
+      insertText = `<${tag}>`;
     }
-  };
 
-  const formatButtons = [
-    { icon: BoldIcon, tooltip: 'Bold', openTag: '<b>', closeTag: '</b>' },
-    { icon: ItalicIcon, tooltip: 'Italic', openTag: '<i>', closeTag: '</i>' },
-    { icon: UnderlineIcon, tooltip: 'Underline', openTag: '<u>', closeTag: '</u>' },
-    { icon: CodeIcon, tooltip: 'Code', openTag: '<code>', closeTag: '</code>' }
-  ];
+    const newValue = value.substring(0, start) + insertText + value.substring(end);
+    onChange?.(newValue);
+    
+    // Set cursor position after insertion
+    setTimeout(() => {
+      if (hasClosing && !selectedText) {
+        const newPos = start + tag.length + 2;
+        textarea.setSelectionRange(newPos, newPos);
+      }
+    }, 0);
+  };
 
-  const helpContent = (
-    <Alert severity="info" sx={{ mt: 1 }}>
-      <Typography variant="body2" gutterBottom>
-        <strong>Supported HTML tags:</strong>
-      </Typography>
-      <Typography variant="body2" component="div">
-        • <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code> - Bold text<br/>
-        • <code>&lt;i&gt;</code> or <code>&lt;em&gt;</code> - Italic text<br/>
-        • <code>&lt;u&gt;</code> - Underlined text<br/>
-        • <code>&lt;code&gt;</code> - Code formatting<br/>
-        • <code>&lt;br&gt;</code> - Line break<br/>
-        • <code>&lt;span style="color: red"&gt;</code> - Colored text
-      </Typography>
-    </Alert>
-  );
+  const sanitizedHtml = sanitizeHtml(value || '', {
+    allowedTags: ['b', 'i', 'u', 'strong', 'em', 'p', 'br', 'code', 'pre', 'span', 'div'],
+    allowedAttributes: {
+      '*': ['style', 'class']
+    }
+  });
 
   return (
-    <Box
-      {...htmlProps}
-      {...styleProps}
-      sx={{ mb: 2, ...styleProps.sx }}
-    >
+    <Box {...restProps}>
       {/* Toolbar */}
-      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, gap: 1 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, flexWrap: 'wrap', gap: 1 }}>
         <Typography variant="body2" color="text.secondary">
-          {label} {required && '*'}
+          {label}
+          {required && <span style={{ color: 'error.main' }}> *</span>}
         </Typography>
         
         <Box sx={{ flexGrow: 1 }} />
         
-        {/* Formatting buttons */}
-        <ButtonGroup size="small" variant="outlined">
-          {formatButtons.map(({ icon: Icon, tooltip, openTag, closeTag }) => (
-            <Tooltip key={tooltip} title={tooltip}>
-              <IconButton
-                size="small"
-                onClick={() => insertFormatting(openTag, closeTag)}
-                disabled={disabled}
-                sx={{ p: 0.5 }}
-              >
-                <Icon fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          ))}
+        <ButtonGroup size="small" disabled={disabled || previewMode}>
+          <Tooltip title="Bold">
+            <IconButton onClick={() => insertTag('b')}>
+              <BoldIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Italic">
+            <IconButton onClick={() => insertTag('i')}>
+              <ItalicIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Underline">
+            <IconButton onClick={() => insertTag('u')}>
+              <UnderlineIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Code">
+            <IconButton onClick={() => insertTag('code')}>
+              <CodeIcon />
+            </IconButton>
+          </Tooltip>
         </ButtonGroup>
 
-        <Divider orientation="vertical" flexItem />
-
-        {/* Preview toggle */}
-        <Tooltip title={showPreview ? "Edit HTML" : "Preview HTML"}>
-          <IconButton
-            size="small"
-            onClick={() => setShowPreview(!showPreview)}
-            color={showPreview ? "primary" : "default"}
-            disabled={disabled}
-            sx={{ p: 0.5 }}
-          >
-            {showPreview ? <EditIcon fontSize="small" /> : <PreviewIcon fontSize="small" />}
-          </IconButton>
-        </Tooltip>
-
-        {/* Help toggle */}
-        <Tooltip title="HTML Help">
-          <IconButton
-            size="small"
-            onClick={() => setShowHelp(!showHelp)}
-            color={showHelp ? "primary" : "default"}
-            disabled={disabled}
-            sx={{ p: 0.5 }}
-          >
-            <HelpIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
+        {showPreview && (
+          <Tooltip title={previewMode ? "Edit Mode" : "Preview Mode"}>
+            <IconButton onClick={() => setPreviewMode(!previewMode)} disabled={disabled}>
+              {previewMode ? <EditIcon /> : <PreviewIcon />}
+            </IconButton>
+          </Tooltip>
+        )}
+
+        {showHelp && (
+          <Tooltip title="HTML Help">
+            <IconButton onClick={() => setShowHelpText(!showHelpText)}>
+              <HelpIcon />
+            </IconButton>
+          </Tooltip>
+        )}
       </Box>
 
-      {/* Help content */}
-      <Collapse in={showHelp}>
-        {helpContent}
+      {/* Help Text */}
+      <Collapse in={showHelpText}>
+        <Alert severity="info" sx={{ mb: 2 }}>
+          <Typography variant="body2">
+            Supported HTML tags: &lt;b&gt;, &lt;i&gt;, &lt;u&gt;, &lt;strong&gt;, &lt;em&gt;, &lt;p&gt;, &lt;br&gt;, &lt;code&gt;, &lt;pre&gt;
+          </Typography>
+        </Alert>
       </Collapse>
 
-      {/* Input field or preview */}
-      {showPreview ? (
+      {/* Input/Preview Area */}
+      {previewMode ? (
         <Box
           sx={{
             border: 1,
             borderColor: 'divider',
             borderRadius: 1,
             p: 2,
-            minHeight: multiline ? `${rows * 1.5}em` : '1.5em',
+            minHeight: rows * 24,
             backgroundColor: 'background.paper'
           }}
         >
-          <Typography variant="body2" color="text.secondary" gutterBottom>
-            HTML Preview:
-          </Typography>
-          <Box
-            sx={{
-              '& code': {
-                backgroundColor: 'action.hover',
-                padding: '2px 4px',
-                borderRadius: 0.5,
-                fontFamily: 'monospace'
-              }
-            }}
-          >
-            <SafeSpan html={sanitizeHtmlContent(value)} placeholder="No content" />
-          </Box>
+          <SafeSpan 
+            html={sanitizedHtml} 
+            placeholder="No content to preview"
+          />
         </Box>
       ) : (
         <TextField
-          id={`html-textfield-${label}`}
+          fullWidth
+          multiline
+          rows={rows}
           value={value}
-          onChange={(e) => {
-            const sanitizedValue = sanitizeHtmlContent(e.target.value);
-            onChange(sanitizedValue);
-          }}
+          onChange={handleChange}
           onFocus={onFocus}
           placeholder={placeholder}
-          multiline={multiline}
-          rows={multiline ? rows : undefined}
-          fullWidth
-          variant="outlined"
-          required={required}
           disabled={disabled}
-          {...otherProps}
+          error={!!error}
+          helperText={error || helperText || (maxLength ? `${value.length}/${maxLength}` : undefined)}
+          inputProps={{
+            maxLength,
+          }}
+          sx={{
+            '& .MuiInputBase-input': {
+              fontFamily: 'monospace',
+              fontSize: '0.875rem'
+            }
+          }}
         />
       )}
     </Box>
   );
 }
 
-// Main component with data binding support and serialization capability
-export class HtmlInputField extends ModelView<HtmlInputFieldProps, HtmlInputFieldModel> {
-  // Component self-declaration for serialization
-  static readonly tagName = 'HtmlInputField';
-  static readonly version = '1.0.0';
-  
-  // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
-    return <HtmlInputField {...jsonData} />;
-  }
-  
-  // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
-    return {
-      label: this.props.label,
-      value: this.props.value,
-      required: this.props.required,
-      placeholder: this.props.placeholder,
-      multiline: this.props.multiline,
-      rows: this.props.rows,
-      disabled: this.props.disabled,
-      // Event handlers don't serialize
-    };
-  }
-
-  // HtmlInputField component renders traditional props view
-  protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
-    return <HtmlInputFieldView {...restProps} />;
-  }
-
-  // HtmlInputField component renders data-bound view
-  protected renderWithDataBinding(): React.ReactElement {
-    return <HtmlInputFieldWithDataBinding {...this.props} />;
-  }
-}
-
-// Helper component to handle data binding with hooks (since we can't use hooks in class components)
-function HtmlInputFieldWithDataBinding(props: HtmlInputFieldProps) {
-  const { dataSource, bindingOptions, ...restProps } = props;
-
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...htmlInputFieldProps } = useDataBinding<HtmlInputFieldModel>(
-    dataSource!,
-    restProps as Partial<HtmlInputFieldModel>,
-    HtmlInputFieldModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-
-  // Show loading state
-  if (loading) {
-    return (
-      <Paper
-        variant="outlined"
-        sx={{
-          p: 3,
-          textAlign: 'center'
-        }}
-      >
-        <Typography variant="body2">Loading HtmlInputField...</Typography>
-        <Typography variant="caption" color="text.secondary">
-          Loading HTML input field from data source...
-        </Typography>
-      </Paper>
-    );
-  }
-
-  if (error) {
-    console.error('Error loading HtmlInputField:', error);
-    if (process.env.NODE_ENV !== 'production') {
-      return (
-        <Paper
-          variant="outlined"
-          sx={{
-            p: 3,
-            textAlign: 'center',
-            borderColor: 'error.main'
-          }}
-        >
-          <Typography variant="body2" color="error">
-            Error loading HtmlInputField: {error.message}
-          </Typography>
-        </Paper>
-      );
-    }
-    return null;
-  }
-
-  return <HtmlInputFieldView {...htmlInputFieldProps} />;
-}
-
-// Mark as QwickApp component
-(HtmlInputField as any)[QWICKAPP_COMPONENT] = true;
+// Create the serializable HtmlInputField component using the factory
+export const HtmlInputField: SerializableComponent<HtmlInputFieldProps> = createSerializableView<HtmlInputFieldProps>({
+  tagName: 'HtmlInputField',
+  version: '1.0.0',
+  role: 'view',
+  View: HtmlInputFieldView,
+  // HtmlInputField component uses default react-children strategy
+});
 
 export default HtmlInputField;