feat: update EditorInput to include onChange prop and adjust styles for better functionality

Author: nicosammito

src/components/form/EditorInput.style.scss

@@ -18,5 +18,6 @@
 
   .cm-line {
     align-self: stretch;
+    padding-left: 0;
   }
 }

src/components/form/EditorInput.tsx

@@ -9,18 +9,19 @@ import {tags as t} from "@lezer/highlight";
 import {hashToColor, mergeComponentProps} from "../../utils";
 import "./EditorInput.style.scss"
 
-export interface EditorInputProps extends InputWrapperProps, ValidationProps<any> {
+export interface EditorInputProps extends Omit<InputWrapperProps, 'onChange'>, ValidationProps<any> {
     language?: StreamLanguage<unknown>
     suggestions?: (context: CompletionContext) => CompletionResult
     extensions?: Extension[]
     disabled?: boolean
     readonly?: boolean
     tokenStyles?: TagStyle[]
+    onChange?: (value: string) => void
 }
 
 export const EditorInput: React.FC<EditorInputProps> = (props) => {
 
-    const {title, right, left, rightType, leftType, language, description, extensions = [], tokenStyles = [], formValidation, ...rest} = props
+    const {title, right, left, rightType, leftType, language, description, extensions = [], tokenStyles = [], formValidation, onChange, ...rest} = props
 
     const internalExtensions: Extension[] = [...extensions, language!]
 
@@ -61,7 +62,10 @@ export const EditorInput: React.FC<EditorInputProps> = (props) => {
                          leftType={leftType}
                          formValidation={formValidation}>
 
-        <CodeMirror extensions={internalExtensions} theme={myTheme} {...mergeComponentProps("editor-input", rest)} basicSetup={{
+        <CodeMirror extensions={internalExtensions} onChange={value => {
+            onChange?.(value)
+            formValidation?.setValue(value)
+        }} theme={myTheme} {...mergeComponentProps("editor-input", rest)} basicSetup={{
             lineNumbers: false,
             foldGutter: false,
             highlightActiveLine: false,

src/components/form/Input.stories.tsx

@@ -387,8 +387,25 @@ export const Select = () => {
 }
 
 export const Editor = () => {
+
+
+    const [inputs, validate] = useForm({
+        initialValues: {
+            editor: undefined
+        },
+        validate: {
+            editor: (value) => {
+                if (!value) return "Please type something"
+                return null
+            }
+        },
+        onSubmit: (values) => {
+            console.log(values)
+        }
+    })
+
     return <Card color={"secondary"} w={"400px"}>
-        <EditorInput placeholder={"sd"} language={StreamLanguage.define({
+        <EditorInput {...inputs.getInputProps("editor")} onChange={() => validate("editor")} placeholder={"sd"} language={StreamLanguage.define({
             token(stream) {
                 if (stream.match(/\{\{\s*(.*?)\s*\}\}/)) {
                     return "keyword";

src/components/form/index.ts

@@ -1,4 +1,5 @@
 export * from "./CheckboxInput"
+export * from "./EditorInput"
 export * from "./EmailInput"
 export * from "./Input"
 export * from "./InputDescription"