Standardize sanitizedHTML

GMOD · Mar 23, 2022 · a40c0fc · a40c0fc
1 parent 31c1bc6
commit a40c0fc
Showing 1 changed file with 23 additions and 13 deletions.
diff --git a/plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.js b/plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.js
@@ -37,11 +37,23 @@ import CallbackEditor from './CallbackEditor'
 import ColorEditor from './ColorEditor'
 import JsonEditor from './JsonEditor'
 
+const MyTextField = props => {
+  return (
+    <TextField
+      {...props}
+      helperText={<SanitizedHTML html={props.helperText} />}
+      FormHelperTextProps={{
+        component: 'div',
+      }}
+      fullWidth
+    />
+  )
+}
+
 const StringEditor = observer(({ slot }) => (
-  <TextField
+  <MyTextField
     label={slot.name}
-    helperText={<SanitizedHTML html={slot.description} />}
-    fullWidth
+    helperText={slot.description}
     value={slot.value}
     onChange={evt => slot.set(evt.target.value)}
   />
@@ -50,8 +62,7 @@ const StringEditor = observer(({ slot }) => (
 const TextEditor = observer(({ slot }) => (
   <TextField
     label={slot.name}
-    helperText={<SanitizedHTML html={slot.description} />}
-    fullWidth
+    helperText={slot.description}
     multiline
     value={slot.value}
     onChange={evt => slot.set(evt.target.value)}
@@ -267,9 +278,9 @@ const NumberEditor = observer(({ slot }) => {
     }
   }, [slot, val])
   return (
-    <TextField
+    <MyTextField
       label={slot.name}
-      helperText={<SanitizedHTML html={slot.description} />}
+      helperText={slot.description}
       value={val}
       type="number"
       onChange={evt => setVal(evt.target.value)}
@@ -286,9 +297,9 @@ const IntegerEditor = observer(({ slot }) => {
     }
   }, [slot, val])
   return (
-    <TextField
+    <MyTextField
       label={slot.name}
-      helperText={<SanitizedHTML html={slot.description} />}
+      helperText={slot.description}
       value={val}
       type="number"
       onChange={evt => setVal(evt.target.value)}
@@ -318,20 +329,19 @@ const StringEnumEditor = observer(({ slot, slotSchema }) => {
   ).map(t => t.value)
 
   return (
-    <TextField
+    <MyTextField
       value={slot.value}
       label={slot.name}
       select
-      helperText={<SanitizedHTML html={slot.description} />}
-      fullWidth
+      helperText={slot.description}
       onChange={evt => slot.set(evt.target.value)}
     >
       {choices.map(str => (
         <MenuItem key={str} value={str}>
           {str}
         </MenuItem>
       ))}
-    </TextField>
+    </MyTextField>
   )
 })