@openzeppelin/ui-components 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ErrorMessage-D4BAP8iw.cjs +281 -0
- package/dist/ErrorMessage-D4BAP8iw.cjs.map +1 -0
- package/dist/ErrorMessage-DyO9ZWWz.js +170 -0
- package/dist/ErrorMessage-DyO9ZWWz.js.map +1 -0
- package/dist/code-editor-BKEEXGxt.d.cts +122 -0
- package/dist/code-editor-BKEEXGxt.d.cts.map +1 -0
- package/dist/code-editor-CxxSe1o8.d.ts +122 -0
- package/dist/code-editor-CxxSe1o8.d.ts.map +1 -0
- package/dist/code-editor.cjs +132 -0
- package/dist/code-editor.cjs.map +1 -0
- package/dist/code-editor.d.cts +122 -0
- package/dist/code-editor.d.ts +122 -0
- package/dist/code-editor.js +129 -0
- package/dist/code-editor.js.map +1 -0
- package/dist/{index-CrEkH28U.d.cts → index-DDdy06qO.d.ts} +8 -124
- package/dist/index-DDdy06qO.d.ts.map +1 -0
- package/dist/{index-CYn57Ffl.d.ts → index-DfQJGBqH.d.cts} +13 -129
- package/dist/index-DfQJGBqH.d.cts.map +1 -0
- package/dist/index.cjs +268 -584
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -121
- package/dist/index.d.ts +11 -127
- package/dist/index.js +196 -482
- package/dist/index.js.map +1 -1
- package/package.json +8 -3
- package/dist/index-CYn57Ffl.d.ts.map +0 -1
- package/dist/index-CrEkH28U.d.cts.map +0 -1
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Control, FieldValues, Path } from "react-hook-form";
|
|
3
|
+
|
|
4
|
+
//#region src/components/fields/CodeEditorField.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* CodeEditorField component properties
|
|
8
|
+
*/
|
|
9
|
+
interface CodeEditorFieldProps<TFieldValues extends FieldValues = FieldValues> {
|
|
10
|
+
/**
|
|
11
|
+
* Unique identifier for the field
|
|
12
|
+
*/
|
|
13
|
+
id: string;
|
|
14
|
+
/**
|
|
15
|
+
* Optional CSS class name for the container
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Field name for form control
|
|
20
|
+
*/
|
|
21
|
+
name: Path<TFieldValues>;
|
|
22
|
+
/**
|
|
23
|
+
* React Hook Form control object
|
|
24
|
+
*/
|
|
25
|
+
control: Control<TFieldValues>;
|
|
26
|
+
/**
|
|
27
|
+
* Field label
|
|
28
|
+
*/
|
|
29
|
+
label?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Helper text displayed below the field
|
|
32
|
+
*/
|
|
33
|
+
helperText?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Placeholder text when empty
|
|
36
|
+
*/
|
|
37
|
+
placeholder?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Programming language for syntax highlighting
|
|
40
|
+
*/
|
|
41
|
+
language?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Editor theme
|
|
44
|
+
*/
|
|
45
|
+
theme?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Editor height
|
|
48
|
+
*/
|
|
49
|
+
height?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Editor maximum height (with scrollbar for overflow)
|
|
52
|
+
*/
|
|
53
|
+
maxHeight?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Content size threshold for disabling syntax highlighting (default: 5000 chars)
|
|
56
|
+
*/
|
|
57
|
+
performanceThreshold?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the field is required
|
|
60
|
+
*/
|
|
61
|
+
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Whether the field is disabled
|
|
64
|
+
*/
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Whether the field is read-only
|
|
68
|
+
*/
|
|
69
|
+
readOnly?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Custom validation function for code values
|
|
72
|
+
*/
|
|
73
|
+
validateCode?: (value: string) => boolean | string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* CodeEditorField provides syntax-highlighted code editing with form integration.
|
|
77
|
+
*
|
|
78
|
+
* Features:
|
|
79
|
+
* - Syntax highlighting via @uiw/react-textarea-code-editor
|
|
80
|
+
* - React Hook Form integration with Controller
|
|
81
|
+
* - Configurable language support (JSON, TypeScript, etc.)
|
|
82
|
+
* - Performance optimizations with smart highlighting
|
|
83
|
+
* - Constrained height with automatic scrolling
|
|
84
|
+
* - Design system styling integration
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* <CodeEditorField
|
|
89
|
+
* id="contractAbi"
|
|
90
|
+
* name="contractSchema"
|
|
91
|
+
* control={control}
|
|
92
|
+
* label="Contract ABI"
|
|
93
|
+
* language="json"
|
|
94
|
+
* placeholder="Paste your ABI JSON here..."
|
|
95
|
+
* />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
declare function CodeEditorField<TFieldValues extends FieldValues = FieldValues>({
|
|
99
|
+
id,
|
|
100
|
+
name,
|
|
101
|
+
control,
|
|
102
|
+
label,
|
|
103
|
+
helperText,
|
|
104
|
+
placeholder,
|
|
105
|
+
language,
|
|
106
|
+
theme,
|
|
107
|
+
height,
|
|
108
|
+
maxHeight,
|
|
109
|
+
performanceThreshold,
|
|
110
|
+
required,
|
|
111
|
+
disabled,
|
|
112
|
+
readOnly,
|
|
113
|
+
validateCode,
|
|
114
|
+
className
|
|
115
|
+
}: CodeEditorFieldProps<TFieldValues>): React.ReactElement;
|
|
116
|
+
declare namespace CodeEditorField {
|
|
117
|
+
var displayName: string;
|
|
118
|
+
}
|
|
119
|
+
//# sourceMappingURL=CodeEditorField.d.ts.map
|
|
120
|
+
//#endregion
|
|
121
|
+
export { CodeEditorField, CodeEditorFieldProps };
|
|
122
|
+
//# sourceMappingURL=code-editor-CxxSe1o8.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-editor-CxxSe1o8.d.ts","names":[],"sources":["../src/components/fields/CodeEditorField.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAUA;AAAqC,UAApB,oBAAoB,CAAA,qBAAsB,WAAtB,GAAoC,WAApC,CAAA,CAAA;;;;MAc7B,MAAA;;;;EA2FQ,SAAA,CAAA,EAAA,MAAe;EAAA;;;MAC7B,EA5FM,IA4FN,CA5FW,YA4FX,CAAA;;;;SAIA,EA3FS,OA2FT,CA3FiB,YA2FjB,CAAA;;;;OAIA,CAAA,EAAA,MAAA;;;;YAIA,CAAA,EAAA,MAAA;;;;aAIsB,CAAA,EAAA,MAAA;;;;EAjBR,QAAA,CAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAA,qCAAqC,cAAc;;;;;;;;;;;;;;;;;GAiBhE,qBAAqB,gBAAgB,KAAA,CAAM;kBAjB9B,eAAA"}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
const require_ErrorMessage = require('./ErrorMessage-D4BAP8iw.cjs');
|
|
2
|
+
let _uiw_react_textarea_code_editor = require("@uiw/react-textarea-code-editor");
|
|
3
|
+
_uiw_react_textarea_code_editor = require_ErrorMessage.__toESM(_uiw_react_textarea_code_editor);
|
|
4
|
+
let _uiw_react_textarea_code_editor_nohighlight = require("@uiw/react-textarea-code-editor/nohighlight");
|
|
5
|
+
_uiw_react_textarea_code_editor_nohighlight = require_ErrorMessage.__toESM(_uiw_react_textarea_code_editor_nohighlight);
|
|
6
|
+
let react = require("react");
|
|
7
|
+
react = require_ErrorMessage.__toESM(react);
|
|
8
|
+
let react_hook_form = require("react-hook-form");
|
|
9
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
10
|
+
|
|
11
|
+
//#region src/components/fields/CodeEditorField.tsx
|
|
12
|
+
/**
|
|
13
|
+
* CodeEditorField provides syntax-highlighted code editing with form integration.
|
|
14
|
+
*
|
|
15
|
+
* Features:
|
|
16
|
+
* - Syntax highlighting via @uiw/react-textarea-code-editor
|
|
17
|
+
* - React Hook Form integration with Controller
|
|
18
|
+
* - Configurable language support (JSON, TypeScript, etc.)
|
|
19
|
+
* - Performance optimizations with smart highlighting
|
|
20
|
+
* - Constrained height with automatic scrolling
|
|
21
|
+
* - Design system styling integration
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <CodeEditorField
|
|
26
|
+
* id="contractAbi"
|
|
27
|
+
* name="contractSchema"
|
|
28
|
+
* control={control}
|
|
29
|
+
* label="Contract ABI"
|
|
30
|
+
* language="json"
|
|
31
|
+
* placeholder="Paste your ABI JSON here..."
|
|
32
|
+
* />
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
function CodeEditorField({ id, name, control, label, helperText, placeholder = "", language = "json", theme = "light", height = "200px", maxHeight = "400px", performanceThreshold = 5e3, required = false, disabled = false, readOnly = false, validateCode, className }) {
|
|
36
|
+
function extractPixelValue(val, fallback) {
|
|
37
|
+
if (typeof val === "number") return val;
|
|
38
|
+
const match = typeof val === "string" ? val.match(/^(\d+)\s*px$/) : null;
|
|
39
|
+
if (match) return parseInt(match[1], 10);
|
|
40
|
+
return fallback;
|
|
41
|
+
}
|
|
42
|
+
const minHeightNum = extractPixelValue(height, 200);
|
|
43
|
+
const maxHeightNum = extractPixelValue(maxHeight, 400);
|
|
44
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
45
|
+
className,
|
|
46
|
+
children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
47
|
+
htmlFor: id,
|
|
48
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
49
|
+
children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
50
|
+
className: "text-destructive ml-1",
|
|
51
|
+
children: "*"
|
|
52
|
+
})]
|
|
53
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.Controller, {
|
|
54
|
+
name,
|
|
55
|
+
control,
|
|
56
|
+
rules: {
|
|
57
|
+
required: required ? "This field is required" : false,
|
|
58
|
+
validate: { validCode: (value) => {
|
|
59
|
+
if (!validateCode || !value) return true;
|
|
60
|
+
const validation = validateCode(value);
|
|
61
|
+
if (typeof validation === "string") return validation;
|
|
62
|
+
if (validation === false) return "Invalid code format";
|
|
63
|
+
return true;
|
|
64
|
+
} }
|
|
65
|
+
},
|
|
66
|
+
render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => {
|
|
67
|
+
const shouldDisableHighlighting = (value || "").length > performanceThreshold;
|
|
68
|
+
const EditorComponent = shouldDisableHighlighting ? _uiw_react_textarea_code_editor_nohighlight.default : _uiw_react_textarea_code_editor.default;
|
|
69
|
+
const handleChange = (event) => {
|
|
70
|
+
onChange(event.target.value);
|
|
71
|
+
};
|
|
72
|
+
const handleBlur = () => {
|
|
73
|
+
onBlur();
|
|
74
|
+
};
|
|
75
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
76
|
+
className: "space-y-2",
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
79
|
+
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",
|
|
80
|
+
style: {
|
|
81
|
+
maxHeight: `${maxHeightNum}px`,
|
|
82
|
+
overflow: "auto",
|
|
83
|
+
overflowX: "hidden",
|
|
84
|
+
minHeight: `${minHeightNum}px`,
|
|
85
|
+
resize: "vertical"
|
|
86
|
+
},
|
|
87
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditorComponent, {
|
|
88
|
+
id,
|
|
89
|
+
value: value || "",
|
|
90
|
+
language,
|
|
91
|
+
placeholder,
|
|
92
|
+
onChange: handleChange,
|
|
93
|
+
onBlur: handleBlur,
|
|
94
|
+
padding: 12,
|
|
95
|
+
minHeight: minHeightNum,
|
|
96
|
+
"data-color-mode": theme,
|
|
97
|
+
disabled,
|
|
98
|
+
readOnly,
|
|
99
|
+
"data-testid": `${id}-code-editor${shouldDisableHighlighting ? "-no-highlight" : ""}`,
|
|
100
|
+
className: "text-sm placeholder:text-muted-foreground",
|
|
101
|
+
style: {
|
|
102
|
+
fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace",
|
|
103
|
+
fontSize: "14px",
|
|
104
|
+
border: "none",
|
|
105
|
+
backgroundColor: "transparent",
|
|
106
|
+
width: "100%",
|
|
107
|
+
wordWrap: "break-word",
|
|
108
|
+
whiteSpace: "pre-wrap",
|
|
109
|
+
overflowWrap: "break-word"
|
|
110
|
+
}
|
|
111
|
+
})
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ErrorMessage.ErrorMessage, {
|
|
114
|
+
error,
|
|
115
|
+
id: `${id}-error`
|
|
116
|
+
}),
|
|
117
|
+
helperText && !error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
118
|
+
className: "text-sm text-muted-foreground",
|
|
119
|
+
id: `${id}-helper`,
|
|
120
|
+
children: helperText
|
|
121
|
+
})
|
|
122
|
+
]
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
})]
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
CodeEditorField.displayName = "CodeEditorField";
|
|
129
|
+
|
|
130
|
+
//#endregion
|
|
131
|
+
exports.CodeEditorField = CodeEditorField;
|
|
132
|
+
//# sourceMappingURL=code-editor.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-editor.cjs","names":["Controller","CodeEditorNoHighlight","CodeEditor","ErrorMessage"],"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,4CAAC;EAAe;aACb,SACC,4CAAC;GAAM,SAAS;GAAI,WAAU;cAC3B,OACA,YAAY,2CAAC;IAAK,WAAU;cAAwB;KAAQ;IACvD,EAGV,2CAACA;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,4BAA4BC,sDAAwBC;IAG5E,MAAM,gBAAgB,UAAwD;AAC5E,cAAS,MAAM,OAAO,MAAM;;IAI9B,MAAM,mBAAyB;AAC7B,aAAQ;;AAGV,WACE,4CAAC;KAAI,WAAU;;MACb,2CAAC;OACC,WAAU;OACV,OAAO;QACL,WAAW,GAAG,aAAa;QAC3B,UAAU;QACV,WAAW;QACX,WAAW,GAAG,aAAa;QAC3B,QAAQ;QACT;iBAED,2CAAC;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,2CAACC;OAAoB;OAAO,IAAI,GAAG,GAAG;QAAW;MAEhD,cAAc,CAAC,SACd,2CAAC;OAAE,WAAU;OAAgC,IAAI,GAAG,GAAG;iBACpD;QACC;;MAEF;;IAGV;GACE;;AAIV,gBAAgB,cAAc"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Control, FieldValues, Path } from "react-hook-form";
|
|
3
|
+
|
|
4
|
+
//#region src/components/fields/CodeEditorField.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* CodeEditorField component properties
|
|
8
|
+
*/
|
|
9
|
+
interface CodeEditorFieldProps<TFieldValues extends FieldValues = FieldValues> {
|
|
10
|
+
/**
|
|
11
|
+
* Unique identifier for the field
|
|
12
|
+
*/
|
|
13
|
+
id: string;
|
|
14
|
+
/**
|
|
15
|
+
* Optional CSS class name for the container
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Field name for form control
|
|
20
|
+
*/
|
|
21
|
+
name: Path<TFieldValues>;
|
|
22
|
+
/**
|
|
23
|
+
* React Hook Form control object
|
|
24
|
+
*/
|
|
25
|
+
control: Control<TFieldValues>;
|
|
26
|
+
/**
|
|
27
|
+
* Field label
|
|
28
|
+
*/
|
|
29
|
+
label?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Helper text displayed below the field
|
|
32
|
+
*/
|
|
33
|
+
helperText?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Placeholder text when empty
|
|
36
|
+
*/
|
|
37
|
+
placeholder?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Programming language for syntax highlighting
|
|
40
|
+
*/
|
|
41
|
+
language?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Editor theme
|
|
44
|
+
*/
|
|
45
|
+
theme?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Editor height
|
|
48
|
+
*/
|
|
49
|
+
height?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Editor maximum height (with scrollbar for overflow)
|
|
52
|
+
*/
|
|
53
|
+
maxHeight?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Content size threshold for disabling syntax highlighting (default: 5000 chars)
|
|
56
|
+
*/
|
|
57
|
+
performanceThreshold?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the field is required
|
|
60
|
+
*/
|
|
61
|
+
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Whether the field is disabled
|
|
64
|
+
*/
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Whether the field is read-only
|
|
68
|
+
*/
|
|
69
|
+
readOnly?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Custom validation function for code values
|
|
72
|
+
*/
|
|
73
|
+
validateCode?: (value: string) => boolean | string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* CodeEditorField provides syntax-highlighted code editing with form integration.
|
|
77
|
+
*
|
|
78
|
+
* Features:
|
|
79
|
+
* - Syntax highlighting via @uiw/react-textarea-code-editor
|
|
80
|
+
* - React Hook Form integration with Controller
|
|
81
|
+
* - Configurable language support (JSON, TypeScript, etc.)
|
|
82
|
+
* - Performance optimizations with smart highlighting
|
|
83
|
+
* - Constrained height with automatic scrolling
|
|
84
|
+
* - Design system styling integration
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* <CodeEditorField
|
|
89
|
+
* id="contractAbi"
|
|
90
|
+
* name="contractSchema"
|
|
91
|
+
* control={control}
|
|
92
|
+
* label="Contract ABI"
|
|
93
|
+
* language="json"
|
|
94
|
+
* placeholder="Paste your ABI JSON here..."
|
|
95
|
+
* />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
declare function CodeEditorField<TFieldValues extends FieldValues = FieldValues>({
|
|
99
|
+
id,
|
|
100
|
+
name,
|
|
101
|
+
control,
|
|
102
|
+
label,
|
|
103
|
+
helperText,
|
|
104
|
+
placeholder,
|
|
105
|
+
language,
|
|
106
|
+
theme,
|
|
107
|
+
height,
|
|
108
|
+
maxHeight,
|
|
109
|
+
performanceThreshold,
|
|
110
|
+
required,
|
|
111
|
+
disabled,
|
|
112
|
+
readOnly,
|
|
113
|
+
validateCode,
|
|
114
|
+
className
|
|
115
|
+
}: CodeEditorFieldProps<TFieldValues>): React.ReactElement;
|
|
116
|
+
declare namespace CodeEditorField {
|
|
117
|
+
var displayName: string;
|
|
118
|
+
}
|
|
119
|
+
//# sourceMappingURL=CodeEditorField.d.ts.map
|
|
120
|
+
//#endregion
|
|
121
|
+
export { CodeEditorField, CodeEditorFieldProps };
|
|
122
|
+
//# sourceMappingURL=code-editor-BKEEXGxt.d.cts.map
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Control, FieldValues, Path } from "react-hook-form";
|
|
3
|
+
|
|
4
|
+
//#region src/components/fields/CodeEditorField.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* CodeEditorField component properties
|
|
8
|
+
*/
|
|
9
|
+
interface CodeEditorFieldProps<TFieldValues extends FieldValues = FieldValues> {
|
|
10
|
+
/**
|
|
11
|
+
* Unique identifier for the field
|
|
12
|
+
*/
|
|
13
|
+
id: string;
|
|
14
|
+
/**
|
|
15
|
+
* Optional CSS class name for the container
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Field name for form control
|
|
20
|
+
*/
|
|
21
|
+
name: Path<TFieldValues>;
|
|
22
|
+
/**
|
|
23
|
+
* React Hook Form control object
|
|
24
|
+
*/
|
|
25
|
+
control: Control<TFieldValues>;
|
|
26
|
+
/**
|
|
27
|
+
* Field label
|
|
28
|
+
*/
|
|
29
|
+
label?: string;
|
|
30
|
+
/**
|
|
31
|
+
* Helper text displayed below the field
|
|
32
|
+
*/
|
|
33
|
+
helperText?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Placeholder text when empty
|
|
36
|
+
*/
|
|
37
|
+
placeholder?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Programming language for syntax highlighting
|
|
40
|
+
*/
|
|
41
|
+
language?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Editor theme
|
|
44
|
+
*/
|
|
45
|
+
theme?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Editor height
|
|
48
|
+
*/
|
|
49
|
+
height?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Editor maximum height (with scrollbar for overflow)
|
|
52
|
+
*/
|
|
53
|
+
maxHeight?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Content size threshold for disabling syntax highlighting (default: 5000 chars)
|
|
56
|
+
*/
|
|
57
|
+
performanceThreshold?: number;
|
|
58
|
+
/**
|
|
59
|
+
* Whether the field is required
|
|
60
|
+
*/
|
|
61
|
+
required?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Whether the field is disabled
|
|
64
|
+
*/
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Whether the field is read-only
|
|
68
|
+
*/
|
|
69
|
+
readOnly?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Custom validation function for code values
|
|
72
|
+
*/
|
|
73
|
+
validateCode?: (value: string) => boolean | string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* CodeEditorField provides syntax-highlighted code editing with form integration.
|
|
77
|
+
*
|
|
78
|
+
* Features:
|
|
79
|
+
* - Syntax highlighting via @uiw/react-textarea-code-editor
|
|
80
|
+
* - React Hook Form integration with Controller
|
|
81
|
+
* - Configurable language support (JSON, TypeScript, etc.)
|
|
82
|
+
* - Performance optimizations with smart highlighting
|
|
83
|
+
* - Constrained height with automatic scrolling
|
|
84
|
+
* - Design system styling integration
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* <CodeEditorField
|
|
89
|
+
* id="contractAbi"
|
|
90
|
+
* name="contractSchema"
|
|
91
|
+
* control={control}
|
|
92
|
+
* label="Contract ABI"
|
|
93
|
+
* language="json"
|
|
94
|
+
* placeholder="Paste your ABI JSON here..."
|
|
95
|
+
* />
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
declare function CodeEditorField<TFieldValues extends FieldValues = FieldValues>({
|
|
99
|
+
id,
|
|
100
|
+
name,
|
|
101
|
+
control,
|
|
102
|
+
label,
|
|
103
|
+
helperText,
|
|
104
|
+
placeholder,
|
|
105
|
+
language,
|
|
106
|
+
theme,
|
|
107
|
+
height,
|
|
108
|
+
maxHeight,
|
|
109
|
+
performanceThreshold,
|
|
110
|
+
required,
|
|
111
|
+
disabled,
|
|
112
|
+
readOnly,
|
|
113
|
+
validateCode,
|
|
114
|
+
className
|
|
115
|
+
}: CodeEditorFieldProps<TFieldValues>): React.ReactElement;
|
|
116
|
+
declare namespace CodeEditorField {
|
|
117
|
+
var displayName: string;
|
|
118
|
+
}
|
|
119
|
+
//# sourceMappingURL=CodeEditorField.d.ts.map
|
|
120
|
+
//#endregion
|
|
121
|
+
export { CodeEditorField, CodeEditorFieldProps };
|
|
122
|
+
//# sourceMappingURL=code-editor-CxxSe1o8.d.ts.map
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { t as ErrorMessage } from "./ErrorMessage-DyO9ZWWz.js";
|
|
2
|
+
import CodeEditor from "@uiw/react-textarea-code-editor";
|
|
3
|
+
import CodeEditorNoHighlight from "@uiw/react-textarea-code-editor/nohighlight";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { Controller } from "react-hook-form";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
|
|
8
|
+
//#region src/components/fields/CodeEditorField.tsx
|
|
9
|
+
/**
|
|
10
|
+
* CodeEditorField provides syntax-highlighted code editing with form integration.
|
|
11
|
+
*
|
|
12
|
+
* Features:
|
|
13
|
+
* - Syntax highlighting via @uiw/react-textarea-code-editor
|
|
14
|
+
* - React Hook Form integration with Controller
|
|
15
|
+
* - Configurable language support (JSON, TypeScript, etc.)
|
|
16
|
+
* - Performance optimizations with smart highlighting
|
|
17
|
+
* - Constrained height with automatic scrolling
|
|
18
|
+
* - Design system styling integration
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <CodeEditorField
|
|
23
|
+
* id="contractAbi"
|
|
24
|
+
* name="contractSchema"
|
|
25
|
+
* control={control}
|
|
26
|
+
* label="Contract ABI"
|
|
27
|
+
* language="json"
|
|
28
|
+
* placeholder="Paste your ABI JSON here..."
|
|
29
|
+
* />
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
function CodeEditorField({ id, name, control, label, helperText, placeholder = "", language = "json", theme = "light", height = "200px", maxHeight = "400px", performanceThreshold = 5e3, required = false, disabled = false, readOnly = false, validateCode, className }) {
|
|
33
|
+
function extractPixelValue(val, fallback) {
|
|
34
|
+
if (typeof val === "number") return val;
|
|
35
|
+
const match = typeof val === "string" ? val.match(/^(\d+)\s*px$/) : null;
|
|
36
|
+
if (match) return parseInt(match[1], 10);
|
|
37
|
+
return fallback;
|
|
38
|
+
}
|
|
39
|
+
const minHeightNum = extractPixelValue(height, 200);
|
|
40
|
+
const maxHeightNum = extractPixelValue(maxHeight, 400);
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
42
|
+
className,
|
|
43
|
+
children: [label && /* @__PURE__ */ jsxs("label", {
|
|
44
|
+
htmlFor: id,
|
|
45
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
46
|
+
children: [label, required && /* @__PURE__ */ jsx("span", {
|
|
47
|
+
className: "text-destructive ml-1",
|
|
48
|
+
children: "*"
|
|
49
|
+
})]
|
|
50
|
+
}), /* @__PURE__ */ jsx(Controller, {
|
|
51
|
+
name,
|
|
52
|
+
control,
|
|
53
|
+
rules: {
|
|
54
|
+
required: required ? "This field is required" : false,
|
|
55
|
+
validate: { validCode: (value) => {
|
|
56
|
+
if (!validateCode || !value) return true;
|
|
57
|
+
const validation = validateCode(value);
|
|
58
|
+
if (typeof validation === "string") return validation;
|
|
59
|
+
if (validation === false) return "Invalid code format";
|
|
60
|
+
return true;
|
|
61
|
+
} }
|
|
62
|
+
},
|
|
63
|
+
render: ({ field: { onChange, onBlur, value }, fieldState: { error } }) => {
|
|
64
|
+
const shouldDisableHighlighting = (value || "").length > performanceThreshold;
|
|
65
|
+
const EditorComponent = shouldDisableHighlighting ? CodeEditorNoHighlight : CodeEditor;
|
|
66
|
+
const handleChange = (event) => {
|
|
67
|
+
onChange(event.target.value);
|
|
68
|
+
};
|
|
69
|
+
const handleBlur = () => {
|
|
70
|
+
onBlur();
|
|
71
|
+
};
|
|
72
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
73
|
+
className: "space-y-2",
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ jsx("div", {
|
|
76
|
+
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",
|
|
77
|
+
style: {
|
|
78
|
+
maxHeight: `${maxHeightNum}px`,
|
|
79
|
+
overflow: "auto",
|
|
80
|
+
overflowX: "hidden",
|
|
81
|
+
minHeight: `${minHeightNum}px`,
|
|
82
|
+
resize: "vertical"
|
|
83
|
+
},
|
|
84
|
+
children: /* @__PURE__ */ jsx(EditorComponent, {
|
|
85
|
+
id,
|
|
86
|
+
value: value || "",
|
|
87
|
+
language,
|
|
88
|
+
placeholder,
|
|
89
|
+
onChange: handleChange,
|
|
90
|
+
onBlur: handleBlur,
|
|
91
|
+
padding: 12,
|
|
92
|
+
minHeight: minHeightNum,
|
|
93
|
+
"data-color-mode": theme,
|
|
94
|
+
disabled,
|
|
95
|
+
readOnly,
|
|
96
|
+
"data-testid": `${id}-code-editor${shouldDisableHighlighting ? "-no-highlight" : ""}`,
|
|
97
|
+
className: "text-sm placeholder:text-muted-foreground",
|
|
98
|
+
style: {
|
|
99
|
+
fontFamily: "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace",
|
|
100
|
+
fontSize: "14px",
|
|
101
|
+
border: "none",
|
|
102
|
+
backgroundColor: "transparent",
|
|
103
|
+
width: "100%",
|
|
104
|
+
wordWrap: "break-word",
|
|
105
|
+
whiteSpace: "pre-wrap",
|
|
106
|
+
overflowWrap: "break-word"
|
|
107
|
+
}
|
|
108
|
+
})
|
|
109
|
+
}),
|
|
110
|
+
/* @__PURE__ */ jsx(ErrorMessage, {
|
|
111
|
+
error,
|
|
112
|
+
id: `${id}-error`
|
|
113
|
+
}),
|
|
114
|
+
helperText && !error && /* @__PURE__ */ jsx("p", {
|
|
115
|
+
className: "text-sm text-muted-foreground",
|
|
116
|
+
id: `${id}-helper`,
|
|
117
|
+
children: helperText
|
|
118
|
+
})
|
|
119
|
+
]
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
})]
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
CodeEditorField.displayName = "CodeEditorField";
|
|
126
|
+
|
|
127
|
+
//#endregion
|
|
128
|
+
export { CodeEditorField };
|
|
129
|
+
//# sourceMappingURL=code-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-editor.js","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"}
|