{"version":3,"file":"code-editor.mjs","names":[],"sources":["../src/components/fields/CodeEditorField.tsx"],"sourcesContent":["import CodeEditor from '@uiw/react-textarea-code-editor';\nimport CodeEditorNoHighlight from '@uiw/react-textarea-code-editor/nohighlight';\nimport React from 'react';\nimport { Controller, type Control, type FieldValues, type Path } from 'react-hook-form';\n\nimport { ErrorMessage } from './utils';\n\n/**\n * CodeEditorField component properties\n */\nexport interface CodeEditorFieldProps<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * Unique identifier for the field\n   */\n  id: string;\n\n  /**\n   * Optional CSS class name for the container\n   */\n  className?: string;\n\n  /**\n   * Field name for form control\n   */\n  name: Path<TFieldValues>;\n\n  /**\n   * React Hook Form control object\n   */\n  control: Control<TFieldValues>;\n\n  /**\n   * Field label\n   */\n  label?: string;\n\n  /**\n   * Helper text displayed below the field\n   */\n  helperText?: string;\n\n  /**\n   * Placeholder text when empty\n   */\n  placeholder?: string;\n\n  /**\n   * Programming language for syntax highlighting\n   */\n  language?: string;\n\n  /**\n   * Editor theme\n   */\n  theme?: string;\n\n  /**\n   * Editor height\n   */\n  height?: string;\n\n  /**\n   * Editor maximum height (with scrollbar for overflow)\n   */\n  maxHeight?: string;\n\n  /**\n   * Content size threshold for disabling syntax highlighting (default: 5000 chars)\n   */\n  performanceThreshold?: number;\n\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the field is read-only\n   */\n  readOnly?: boolean;\n\n  /**\n   * Custom validation function for code values\n   */\n  validateCode?: (value: string) => boolean | string;\n}\n\n/**\n * CodeEditorField provides syntax-highlighted code editing with form integration.\n *\n * Features:\n * - Syntax highlighting via @uiw/react-textarea-code-editor\n * - React Hook Form integration with Controller\n * - Configurable language support (JSON, TypeScript, etc.)\n * - Performance optimizations with smart highlighting\n * - Constrained height with automatic scrolling\n * - Design system styling integration\n *\n * @example\n * ```tsx\n * <CodeEditorField\n *   id=\"contractAbi\"\n *   name=\"contractSchema\"\n *   control={control}\n *   label=\"Contract ABI\"\n *   language=\"json\"\n *   placeholder=\"Paste your ABI JSON here...\"\n * />\n * ```\n */\nexport function CodeEditorField<TFieldValues extends FieldValues = FieldValues>({\n  id,\n  name,\n  control,\n  label,\n  helperText,\n  placeholder = '',\n  language = 'json',\n  theme = 'light',\n  height = '200px',\n  maxHeight = '400px',\n  performanceThreshold = 5000,\n  required = false,\n  disabled = false,\n  readOnly = false,\n  validateCode,\n  className,\n}: CodeEditorFieldProps<TFieldValues>): React.ReactElement {\n  // Convert height strings to numbers for native props with robust parsing\n  function extractPixelValue(val: string | number, fallback: number): number {\n    if (typeof val === 'number') return val;\n    const match = typeof val === 'string' ? val.match(/^(\\d+)\\s*px$/) : null;\n    if (match) return parseInt(match[1], 10);\n    return fallback;\n  }\n  const minHeightNum = extractPixelValue(height, 200);\n  const maxHeightNum = extractPixelValue(maxHeight, 400);\n\n  return (\n    <div className={className}>\n      {label && (\n        <label htmlFor={id} className=\"block text-sm font-medium text-foreground mb-2\">\n          {label}\n          {required && <span className=\"text-destructive ml-1\">*</span>}\n        </label>\n      )}\n\n      <Controller\n        name={name}\n        control={control}\n        rules={{\n          required: required ? 'This field is required' : false,\n          // Move validation to onBlur to avoid expensive operations on every keystroke\n          validate: {\n            validCode: (value: string) => {\n              if (!validateCode || !value) return true;\n\n              const validation = validateCode(value);\n              if (typeof validation === 'string') {\n                return validation;\n              }\n              if (validation === false) {\n                return 'Invalid code format';\n              }\n              return true;\n            },\n          },\n        }}\n        render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => {\n          // Check if content is too large for syntax highlighting\n          const contentSize = (value || '').length;\n          const shouldDisableHighlighting = contentSize > performanceThreshold;\n          const EditorComponent = shouldDisableHighlighting ? CodeEditorNoHighlight : CodeEditor;\n\n          // Update form immediately to prevent controlled component conflicts\n          const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n            onChange(event.target.value); // Immediate update for controlled component\n          };\n\n          // Simple blur handler\n          const handleBlur = (): void => {\n            onBlur();\n          };\n\n          return (\n            <div className=\"space-y-2\">\n              <div\n                className=\"w-full rounded-md border border-input bg-background ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed resize-y\"\n                style={{\n                  maxHeight: `${maxHeightNum}px`,\n                  overflow: 'auto',\n                  overflowX: 'hidden', // Prevent horizontal scrolling and expansion\n                  minHeight: `${minHeightNum}px`,\n                  resize: 'vertical',\n                }}\n              >\n                <EditorComponent\n                  id={id}\n                  value={value || ''}\n                  language={language}\n                  placeholder={placeholder}\n                  onChange={handleChange}\n                  onBlur={handleBlur}\n                  padding={12}\n                  minHeight={minHeightNum}\n                  data-color-mode={theme as 'light' | 'dark'}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  data-testid={`${id}-code-editor${shouldDisableHighlighting ? '-no-highlight' : ''}`}\n                  className=\"text-sm placeholder:text-muted-foreground\"\n                  style={{\n                    fontFamily:\n                      'ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace',\n                    fontSize: '14px',\n                    border: 'none',\n                    backgroundColor: 'transparent',\n                    width: '100%',\n                    wordWrap: 'break-word', // Break long words to prevent horizontal overflow\n                    whiteSpace: 'pre-wrap', // Preserve formatting while allowing wrapping\n                    overflowWrap: 'break-word', // Modern CSS property for word breaking\n                  }}\n                />\n              </div>\n\n              <ErrorMessage error={error} id={`${id}-error`} />\n\n              {helperText && !error && (\n                <p className=\"text-sm text-muted-foreground\" id={`${id}-helper`}>\n                  {helperText}\n                </p>\n              )}\n            </div>\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nCodeEditorField.displayName = 'CodeEditorField';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,SAAgB,gBAAgE,EAC9E,IACA,MACA,SACA,OACA,YACA,cAAc,IACd,WAAW,QACX,QAAQ,SACR,SAAS,SACT,YAAY,SACZ,uBAAuB,KACvB,WAAW,OACX,WAAW,OACX,WAAW,OACX,cACA,aACyD;CAEzD,SAAS,kBAAkB,KAAsB,UAA0B;AACzE,MAAI,OAAO,QAAQ,SAAU,QAAO;EACpC,MAAM,QAAQ,OAAO,QAAQ,WAAW,IAAI,MAAM,eAAe,GAAG;AACpE,MAAI,MAAO,QAAO,SAAS,MAAM,IAAI,GAAG;AACxC,SAAO;;CAET,MAAM,eAAe,kBAAkB,QAAQ,IAAI;CACnD,MAAM,eAAe,kBAAkB,WAAW,IAAI;AAEtD,QACE,qBAAC;EAAe;aACb,SACC,qBAAC;GAAM,SAAS;GAAI,WAAU;cAC3B,OACA,YAAY,oBAAC;IAAK,WAAU;cAAwB;KAAQ;IACvD,EAGV,oBAAC;GACO;GACG;GACT,OAAO;IACL,UAAU,WAAW,2BAA2B;IAEhD,UAAU,EACR,YAAY,UAAkB;AAC5B,SAAI,CAAC,gBAAgB,CAAC,MAAO,QAAO;KAEpC,MAAM,aAAa,aAAa,MAAM;AACtC,SAAI,OAAO,eAAe,SACxB,QAAO;AAET,SAAI,eAAe,MACjB,QAAO;AAET,YAAO;OAEV;IACF;GACD,SAAS,EAAE,OAAO,EAAE,UAAU,QAAQ,SAAS,YAAY,EAAE,cAAc;IAGzE,MAAM,6BADe,SAAS,IAAI,SACc;IAChD,MAAM,kBAAkB,4BAA4B,wBAAwB;IAG5E,MAAM,gBAAgB,UAAwD;AAC5E,cAAS,MAAM,OAAO,MAAM;;IAI9B,MAAM,mBAAyB;AAC7B,aAAQ;;AAGV,WACE,qBAAC;KAAI,WAAU;;MACb,oBAAC;OACC,WAAU;OACV,OAAO;QACL,WAAW,GAAG,aAAa;QAC3B,UAAU;QACV,WAAW;QACX,WAAW,GAAG,aAAa;QAC3B,QAAQ;QACT;iBAED,oBAAC;QACK;QACJ,OAAO,SAAS;QACN;QACG;QACb,UAAU;QACV,QAAQ;QACR,SAAS;QACT,WAAW;QACX,mBAAiB;QACP;QACA;QACV,eAAa,GAAG,GAAG,cAAc,4BAA4B,kBAAkB;QAC/E,WAAU;QACV,OAAO;SACL,YACE;SACF,UAAU;SACV,QAAQ;SACR,iBAAiB;SACjB,OAAO;SACP,UAAU;SACV,YAAY;SACZ,cAAc;SACf;SACD;QACE;MAEN,oBAAC;OAAoB;OAAO,IAAI,GAAG,GAAG;QAAW;MAEhD,cAAc,CAAC,SACd,oBAAC;OAAE,WAAU;OAAgC,IAAI,GAAG,GAAG;iBACpD;QACC;;MAEF;;IAGV;GACE;;AAIV,gBAAgB,cAAc"}