Add Custom HTML Component to Form Builder

- Introduced a new 'customHtml' component in FormBuilderComponents.vue, allowing users to create custom designs using HTML, CSS, and JavaScript.
- Enhanced ComponentPreview.vue to render the custom HTML component with appropriate props for live preview functionality.
- Updated FormBuilderFieldSettingsModal.vue to include configuration options for the custom HTML component, such as HTML, CSS, and JavaScript content, as well as settings for preview mode and script allowance.
- Implemented safe and full HTML preview methods to ensure secure rendering of custom content.
- Added relevant icons and descriptions for the custom HTML component in the form builder, improving user experience and clarity.

assets/js/formkit-custom.js

@@ -4,6 +4,7 @@ import MaskText from "~/components/formkit/TextMask.vue";
 import FileDropzone from "~/components/formkit/FileDropzone.vue";
 import Switch from "~/components/formkit/Switch.vue";
 import SearchSelect from "~/components/formkit/SearchSelect.vue";
+import CustomHtml from "~/components/formkit/CustomHtml.vue";
 
 export default {
   otp: createInput(OneTimePassword, {
@@ -21,4 +22,7 @@ export default {
   searchSelect: createInput(SearchSelect, {
     props: ["options", "placeholder"],
   }),
+  customHtml: createInput(CustomHtml, {
+    props: ["htmlContent", "cssContent", "jsContent", "allowScripts", "previewMode", "showInPreview"],
+  }),
 };

components/ComponentPreview.vue

@@ -627,6 +627,24 @@
       </div>
     </div>
 
+    <!-- Custom HTML Component -->
+    <div v-else-if="component.type === 'customHtml'" class="py-2">
+      <FormKit 
+        :id="`preview-${component.id}`" 
+        type="customHtml" 
+        :name="component.props.name"
+        :label="component.props.label"
+        :help="component.props.help"
+        :htmlContent="component.props.htmlContent"
+        :cssContent="component.props.cssContent"
+        :jsContent="component.props.jsContent"
+        :allowScripts="component.props.allowScripts"
+        :previewMode="component.props.previewMode"
+        :showInPreview="component.props.showInPreview"
+        :readonly="component.props.readonly || !isPreview"
+      />
+    </div>
+
     <!-- Unknown Component Type Fallback -->
     <div v-else class="p-4 border border-dashed border-gray-300 rounded">
       <div class="text-gray-500">Unknown component type: {{ component.type }}</div>

components/FormBuilderComponents.vue

@@ -732,6 +732,78 @@ const availableComponents = [
     icon: 'material-symbols:horizontal-rule',
     description: 'Horizontal divider line',
     defaultProps: {}
+  },
+  {
+    type: 'customHtml',
+    name: 'Custom HTML',
+    category: 'Layout',
+    icon: 'material-symbols:code',
+    description: 'Custom HTML with CSS and JavaScript',
+    defaultProps: {
+      label: 'Custom HTML Component',
+      name: 'custom_html',
+      help: 'Create custom designs using HTML, CSS, and JavaScript',
+      htmlContent: `<div class="custom-component">
+  <h3>Custom HTML Component</h3>
+  <p>Edit this HTML to create your custom design.</p>
+  <button onclick="alert('Hello from custom HTML!')">Click me!</button>
+</div>`,
+      cssContent: `.custom-component {
+  padding: 20px;
+  border: 2px solid #3b82f6;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  text-align: center;
+}
+
+.custom-component h3 {
+  color: #1e40af;
+  margin-bottom: 10px;
+}
+
+.custom-component button {
+  background: #3b82f6;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.custom-component button:hover {
+  background: #2563eb;
+}`,
+      jsContent: `// Custom JavaScript for this component
+// You can access the component element via 'this.element'
+// Available functions:
+// - this.element: The HTML element of this component
+// - this.getValue(): Get form values
+// - this.setValue(name, value): Set form field values
+
+console.log('Custom HTML component initialized');
+
+// Example: Add click handler
+const buttons = this.element.querySelectorAll('button');
+buttons.forEach(button => {
+  button.addEventListener('click', function(e) {
+    e.preventDefault();
+    console.log('Custom button clicked!');
+  });
+});`,
+      allowScripts: true,
+      previewMode: 'safe', // 'safe' or 'advanced'
+      width: '100%',
+      gridColumn: 'span 12',
+      showInPreview: true,
+      // Conditional Logic Properties
+      conditionalLogic: {
+        enabled: false,
+        conditions: [],
+        action: 'show',
+        operator: 'and'
+      }
+    }
   }
 ];
 

components/FormBuilderFieldSettingsModal.vue

@@ -1575,6 +1575,136 @@ if (name && email) {
                     </div>
                   </div>
                 </template>
+
+                <!-- Custom HTML Configuration -->
+                <template v-if="component.type === 'customHtml'">
+                  <div class="space-y-6">
+                    <!-- HTML Content -->
+                    <div class="space-y-4">
+                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">HTML Content</h5>
+                      
+                      <FormKit
+                        type="textarea"
+                        label="HTML Code"
+                        name="htmlContent"
+                        v-model="configModel.htmlContent"
+                        help="Enter your custom HTML code here"
+                        :classes="{ 
+                          outer: 'field-wrapper',
+                          input: 'font-mono text-sm min-h-[120px]'
+                        }"
+                        placeholder="<div>Your custom HTML here...</div>"
+                        rows="6"
+                      />
+                    </div>
+
+                    <!-- CSS Content -->
+                    <div class="space-y-4">
+                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">CSS Styles</h5>
+                      
+                      <FormKit
+                        type="textarea"
+                        label="CSS Code"
+                        name="cssContent"
+                        v-model="configModel.cssContent"
+                        help="Enter your custom CSS styles here"
+                        :classes="{ 
+                          outer: 'field-wrapper',
+                          input: 'font-mono text-sm min-h-[100px]'
+                        }"
+                        placeholder=".my-class { color: blue; }"
+                        rows="5"
+                      />
+                    </div>
+
+                    <!-- JavaScript Content -->
+                    <div class="space-y-4">
+                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">JavaScript Code</h5>
+                      
+                      <FormKit
+                        type="textarea"
+                        label="JavaScript Code"
+                        name="jsContent"
+                        v-model="configModel.jsContent"
+                        help="Enter your custom JavaScript code here"
+                        :classes="{ 
+                          outer: 'field-wrapper',
+                          input: 'font-mono text-sm min-h-[100px]'
+                        }"
+                        placeholder="console.log('Hello from custom HTML!');"
+                        rows="5"
+                      />
+                    </div>
+
+                    <!-- Settings -->
+                    <div class="space-y-4">
+                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Component Settings</h5>
+                      
+                      <div class="grid grid-cols-2 gap-4">
+                        <FormKit
+                          type="select"
+                          label="Preview Mode"
+                          name="previewMode"
+                          v-model="configModel.previewMode"
+                          help="Choose how to render the HTML content"
+                          :options="[
+                            { label: 'Safe Mode (No Scripts)', value: 'safe' },
+                            { label: 'Advanced Mode (Full HTML)', value: 'advanced' }
+                          ]"
+                          :classes="{ outer: 'field-wrapper' }"
+                        />
+
+                        <FormKit
+                          type="switch"
+                          label="Allow Scripts"
+                          name="allowScripts"
+                          v-model="configModel.allowScripts"
+                          help="Enable JavaScript execution (Advanced mode only)"
+                          :classes="{ outer: 'field-wrapper' }"
+                        />
+                      </div>
+
+                      <FormKit
+                        type="switch"
+                        label="Show in Preview"
+                        name="showInPreview"
+                        v-model="configModel.showInPreview"
+                        help="Display this component in form preview mode"
+                        :classes="{ outer: 'field-wrapper' }"
+                      />
+                    </div>
+
+                    <!-- Preview Area -->
+                    <div class="space-y-4">
+                      <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Live Preview</h5>
+                      
+                      <div class="preview-container border border-gray-200 rounded-lg p-4 bg-gray-50 min-h-[100px]">
+                        <div v-if="configModel.htmlContent" class="custom-html-preview" ref="previewContainer">
+                          <!-- Safe preview - just show the HTML without scripts -->
+                          <div v-html="getFullHtmlPreview(configModel.htmlContent, configModel.cssContent)"></div>
+                        </div>
+                        <div v-else class="text-gray-500 text-center py-8">
+                          <Icon name="material-symbols:code" class="w-8 h-8 mx-auto mb-2 text-gray-300" />
+                          <p class="text-sm">No HTML content to preview</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Security Notice -->
+                    <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
+                      <div class="flex items-start">
+                        <Icon name="material-symbols:security" class="w-5 h-5 text-yellow-600 mr-2 mt-0.5" />
+                        <div>
+                          <h4 class="font-medium text-sm text-yellow-800 mb-1">Security Notice</h4>
+                          <p class="text-xs text-yellow-700">
+                            Custom HTML components can contain arbitrary code. In Safe Mode, scripts and event handlers are disabled. 
+                            Use Advanced Mode only with trusted content and enable "Allow Scripts" carefully.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </template>
               </div>
             </div>
           </div>
@@ -2027,7 +2157,8 @@ const getComponentIcon = (type) => {
     'info-display': 'heroicons:information-circle',
     'dynamic-list': 'heroicons:list-bullet',
     'repeating-table': 'heroicons:table-cells',
-    'repeating-group': 'heroicons:list-bullet'
+    'repeating-group': 'heroicons:list-bullet',
+    'customHtml': 'material-symbols:code'
   }
   return icons[type] || 'heroicons:square-3-stack-3d'
 }
@@ -2064,7 +2195,8 @@ const getComponentTypeName = (type) => {
     'info-display': 'Information Display',
     'dynamic-list': 'Dynamic List',
     'repeating-table': 'Data Table',
-    'repeating-group': 'Repeating Group'
+    'repeating-group': 'Repeating Group',
+    'customHtml': 'Custom HTML'
   }
   return names[type] || 'Form Field'
 }
@@ -2101,7 +2233,8 @@ const getComponentDescription = (type) => {
     'info-display': 'Read-only information display in organized format',
     'dynamic-list': 'Dynamic list for displaying and managing items',
     'repeating-table': 'Structured table for collecting multiple records with forms',
-    'repeating-group': 'Collect multiple entries of the same data structure'
+    'repeating-group': 'Collect multiple entries of the same data structure',
+    'customHtml': 'Create custom designs using HTML, CSS, and JavaScript'
   }
   return descriptions[type] || 'Configure this form field'
 }
@@ -2129,15 +2262,15 @@ const showField = (fieldName) => {
   if (!props.component) return false
   
   const fieldConfig = {
-    label: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group'],
+    label: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
-    name: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group'],
+    name: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
     placeholder: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'dynamic-list'],
-    help: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group'],
+    help: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'hidden', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
     value: ['heading', 'paragraph', 'hidden'],
-    width: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'heading', 'paragraph', 'form-section', 'info-display', 'dynamic-list', 'repeating-table', 'repeating-group'],
+    width: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'mask', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'otp', 'dropzone', 'button', 'heading', 'paragraph', 'form-section', 'info-display', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
     rows: ['textarea'],
     options: ['select', 'searchSelect', 'checkbox', 'radio'],
-    conditionalLogic: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group'],
+    conditionalLogic: ['text', 'textarea', 'number', 'email', 'password', 'url', 'tel', 'select', 'searchSelect', 'checkbox', 'radio', 'switch', 'date', 'time', 'datetime-local', 'range', 'color', 'file', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml'],
     readonly: ['text', 'number', 'email', 'password', 'textarea', 'mask', 'url', 'tel', 'select', 'searchSelect', 'checkbox', 'radio', 'switch']
   }
   
@@ -2147,7 +2280,7 @@ const showField = (fieldName) => {
 const hasOptions = computed(() => showField('options'))
 const hasSpecificSettings = computed(() => {
   if (!props.component) return false
-  const specificTypes = ['mask', 'otp', 'dropzone', 'range', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group']
+  const specificTypes = ['mask', 'otp', 'dropzone', 'range', 'button', 'form-section', 'dynamic-list', 'repeating-table', 'repeating-group', 'customHtml']
   return specificTypes.includes(props.component.type)
 })
 
@@ -2190,6 +2323,48 @@ const isTextBasedField = computed(() => {
   return ['text', 'textarea', 'email', 'password', 'url', 'tel'].includes(props.component?.type)
 })
 
+// Safe HTML preview for custom HTML component
+const getSafeHtmlPreview = (htmlContent) => {
+  if (!htmlContent) return ''
+  
+  // Remove script tags and event handlers for safe preview
+  return htmlContent
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+    .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '')
+    .replace(/javascript:/gi, '')
+}
+
+// Full HTML preview with CSS included
+const getFullHtmlPreview = (htmlContent, cssContent) => {
+  if (!htmlContent) return ''
+  
+  const safeHtml = getSafeHtmlPreview(htmlContent)
+  
+  if (cssContent) {
+    // Create a unique ID for scoping
+    const previewId = `preview-${Date.now()}`
+    
+    // Scope the CSS to the preview container
+    const scopedCss = cssContent.replace(
+      /([^@{}]+)\s*{/g, 
+      `#${previewId} $1 {`
+    )
+    
+    return `
+      <style>
+        #${previewId} {
+          /* Preview container styles */
+          position: relative;
+        }
+        ${scopedCss}
+      </style>
+      <div id="${previewId}">${safeHtml}</div>
+    `
+  }
+  
+  return safeHtml
+}
+
 // Published processes for button linking
 const publishedProcesses = ref([])
 

components/formkit/CustomHtml.vue

@@ -0,0 +1,231 @@
+<script setup>
+const props = defineProps({
+  context: Object,
+});
+
+const componentRef = ref(null);
+const uniqueId = ref(`custom-html-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
+
+// Get component properties with defaults
+const htmlContent = computed(() => props.context.htmlContent || '<p>No HTML content provided</p>');
+const cssContent = computed(() => props.context.cssContent || '');
+const jsContent = computed(() => props.context.jsContent || '');
+const allowScripts = computed(() => props.context.allowScripts !== false);
+const previewMode = computed(() => props.context.previewMode || 'safe');
+const showInPreview = computed(() => props.context.showInPreview !== false);
+
+// Create scoped CSS with unique ID
+const scopedCss = computed(() => {
+  if (!cssContent.value) return '';
+  
+  // Add scope to CSS rules
+  const scopedRules = cssContent.value.replace(
+    /([^@{}]+)\s*{/g, 
+    `#${uniqueId.value} $1 {`
+  );
+  
+  return `<style scoped>
+#${uniqueId.value} {
+  /* Component container styles */
+  position: relative;
+}
+
+${scopedRules}
+</style>`;
+});
+
+// Safe HTML content (no scripts)
+const safeHtmlContent = computed(() => {
+  if (previewMode.value === 'safe') {
+    // Remove script tags and event handlers for safe mode
+    return htmlContent.value
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '')
+      .replace(/javascript:/gi, '');
+  }
+  return htmlContent.value;
+});
+
+// Execute custom JavaScript in a controlled environment
+const executeCustomScript = () => {
+  if (!allowScripts.value || !jsContent.value || previewMode.value === 'safe') {
+    return;
+  }
+
+  try {
+    // Create a safe execution context
+    const scriptContext = {
+      element: componentRef.value,
+      console: console,
+      
+      // Helper functions for form interaction
+      getValue: (fieldName) => {
+        // Access parent form context if available
+        if (props.context.node && props.context.node.parent) {
+          const formData = props.context.node.parent.value;
+          return formData ? formData[fieldName] : undefined;
+        }
+        return undefined;
+      },
+      
+      setValue: (fieldName, value) => {
+        // Set form field value if parent context available
+        if (props.context.node && props.context.node.parent) {
+          props.context.node.parent.input({ [fieldName]: value }, false);
+        }
+      },
+
+      // Safe DOM methods
+      querySelector: (selector) => componentRef.value?.querySelector(selector),
+      querySelectorAll: (selector) => componentRef.value?.querySelectorAll(selector),
+    };
+
+    // Create function with custom context
+    const scriptFunction = new Function('console', 'element', 'getValue', 'setValue', 'querySelector', 'querySelectorAll', jsContent.value);
+    
+    // Execute with controlled context
+    scriptFunction.call(
+      scriptContext,
+      scriptContext.console,
+      scriptContext.element,
+      scriptContext.getValue,
+      scriptContext.setValue,
+      scriptContext.querySelector,
+      scriptContext.querySelectorAll
+    );
+    
+  } catch (error) {
+    console.warn('Custom HTML script execution error:', error);
+  }
+};
+
+// Watch for changes and re-execute script
+watch([htmlContent, cssContent, jsContent], () => {
+  nextTick(() => {
+    executeCustomScript();
+  });
+});
+
+// Execute script after component is mounted
+onMounted(() => {
+  nextTick(() => {
+    executeCustomScript();
+  });
+});
+
+// Clean up any event listeners when component is unmounted
+onUnmounted(() => {
+  if (componentRef.value) {
+    // Remove any dynamically added event listeners
+    const buttons = componentRef.value.querySelectorAll('button, a, [onclick]');
+    buttons.forEach(el => {
+      el.replaceWith(el.cloneNode(true)); // Remove all event listeners
+    });
+  }
+});
+
+// Don't display anything if showInPreview is false and we're in readonly/preview mode
+const shouldShow = computed(() => {
+  if (!props.context.readonly) return true; // Always show in edit mode
+  return showInPreview.value; // Only show in preview if enabled
+});
+</script>
+
+<template>
+  <div v-if="shouldShow" class="custom-html-wrapper">
+    <!-- Component Label -->
+    <div v-if="context.label && context.label !== 'Custom HTML Component'" class="mb-2">
+      <label class="text-sm font-medium text-gray-700">{{ context.label }}</label>
+    </div>
+    
+    <!-- Help Text -->
+    <div v-if="context.help" class="mb-2 text-xs text-gray-600">
+      {{ context.help }}
+    </div>
+    
+    <!-- Safe Mode Warning (only show in builder mode, not preview) -->
+    <div v-if="!context.readonly && previewMode === 'safe' && (jsContent || htmlContent.includes('on'))" 
+         class="mb-2 p-2 bg-yellow-50 border border-yellow-200 rounded text-xs text-yellow-800">
+      <Icon name="material-symbols:warning-outline" class="w-4 h-4 inline mr-1" />
+      Safe Mode: Scripts and event handlers are disabled for security.
+    </div>
+    
+    <!-- Custom HTML Content Container -->
+    <div 
+      :id="uniqueId"
+      ref="componentRef" 
+      class="custom-html-content"
+      :class="{
+        'readonly-mode': context.readonly,
+        'safe-mode': previewMode === 'safe',
+        'advanced-mode': previewMode === 'advanced'
+      }"
+    >
+      <!-- Inject scoped CSS -->
+      <div v-if="cssContent" v-html="scopedCss"></div>
+      
+      <!-- Render HTML content -->
+      <div v-html="safeHtmlContent"></div>
+    </div>
+    
+    <!-- Development Info (only visible in builder mode, not preview) -->
+    <div v-if="false && !context.readonly && (htmlContent || cssContent || jsContent)" 
+         class="mt-2 p-2 bg-gray-50 border border-gray-200 rounded text-xs text-gray-600">
+      <div class="flex items-center space-x-4">
+        <div v-if="htmlContent">
+          <Icon name="material-symbols:html" class="w-3 h-3 inline mr-1" />
+          HTML: {{ htmlContent.length }} chars
+        </div>
+        <div v-if="cssContent">
+          <Icon name="material-symbols:css" class="w-3 h-3 inline mr-1" />
+          CSS: {{ cssContent.length }} chars
+        </div>
+        <div v-if="jsContent">
+          <Icon name="material-symbols:javascript" class="w-3 h-3 inline mr-1" />
+          JS: {{ jsContent.length }} chars
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.custom-html-wrapper {
+  width: 100%;
+}
+
+.custom-html-content {
+  min-height: 40px;
+  position: relative;
+}
+
+.custom-html-content.readonly-mode {
+  pointer-events: auto; /* Allow interactions in readonly mode for custom HTML */
+}
+
+.custom-html-content.safe-mode {
+  /* Additional safe mode styling if needed */
+}
+
+.custom-html-content.advanced-mode {
+  /* Additional advanced mode styling if needed */
+}
+
+/* Prevent layout issues with custom HTML */
+.custom-html-content :deep(*) {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Ensure images are responsive */
+.custom-html-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Prevent custom HTML from breaking out of container */
+.custom-html-content {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+</style>