@elice/material-quiz 1.240718.0-trasncript.2 → 1.240718.1

package/cjs/components/material-quiz-edit/MaterialQuizEditContent.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactTransitionGroup = require('react-transition-group');
@@ -22,38 +20,26 @@ var checkTwoDimensionArray = require('./utils/checkTwoDimensionArray.js');
 var randomId = require('./utils/randomId.js');
 var context = require('./context.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var flattenDeep__default = /*#__PURE__*/_interopDefaultCompat(flattenDeep);
-
-var MIN_TEXT_LENGTH = 1;
-var MAX_TEXT_LENGTH = 128;
-var MaterialQuizEditContent = function MaterialQuizEditContent() {
-  var intl$1 = intl.useRawEliceIntl();
-  var _useMaterialQuizEditC = context.useMaterialQuizEditContext(),
-    disabled = _useMaterialQuizEditC.disabled,
-    onFileUploadRequest = _useMaterialQuizEditC.onFileUploadRequest;
-  var _useFormContext = reactHookForm.useFormContext(),
-    control = _useFormContext.control,
-    watch = _useFormContext.watch,
-    setValue = _useFormContext.setValue;
-  var _watch = watch(['optionType', 'optionsDefault', 'answerInfoDefault', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups', 'optionsSetEnabled']),
-    _watch2 = _rollupPluginBabelHelpers.slicedToArray(_watch, 8),
-    watchedOptionType = _watch2[0],
-    watchedOptionInfo = _watch2[1],
-    watchedAnswerInfo = _watch2[2],
-    watchedAnswerHint = _watch2[3],
-    watchedExplanationInfo = _watch2[4],
-    watchedIsAutoGrade = _watch2[5],
-    watchedGroups = _watch2[6],
-    optionsSetEnabled = _watch2[7];
+const MIN_TEXT_LENGTH = 1;
+const MAX_TEXT_LENGTH = 128;
+const MaterialQuizEditContent = () => {
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    disabled,
+    onFileUploadRequest
+  } = context.useMaterialQuizEditContext();
+  const {
+    control,
+    watch,
+    setValue
+  } = reactHookForm.useFormContext();
+  const [watchedOptionType, watchedOptionInfo, watchedAnswerInfo, watchedAnswerHint, watchedExplanationInfo, watchedIsAutoGrade, watchedGroups, optionsSetEnabled] = watch(['optionType', 'optionsDefault', 'answerInfoDefault', 'answerHint', 'explanationInfo', 'isAutoGrade', 'groups', 'optionsSetEnabled']);
   //
   // Change `options` according to `optionType`.
   //
-  React__default.default.useEffect(function () {
-    var get = function get() {
-      var filteredNotMarkdownOptions = watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.filter(function (option) {
+  React.useEffect(() => {
+    const get = () => {
+      const filteredNotMarkdownOptions = watchedOptionInfo === null || watchedOptionInfo === void 0 ? void 0 : watchedOptionInfo.filter(option => {
         var _a;
         return !((_a = option.content) === null || _a === void 0 ? void 0 : _a.includes('![]'));
       });
@@ -82,7 +68,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
             }];
           }
           if (filteredNotMarkdownOptions.length) {
-            return watchedOptionInfo.map(function (e) {
+            return watchedOptionInfo.map(e => {
               var _a;
               if ((_a = e.title) === null || _a === void 0 ? void 0 : _a.length) {
                 return Object.assign(Object.assign({}, e), {
@@ -116,7 +102,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
             }];
           }
           if (filteredNotMarkdownOptions.length) {
-            return watchedOptionInfo.map(function (e) {
+            return watchedOptionInfo.map(e => {
               var _a, _b;
               if (!((_a = e.content) === null || _a === void 0 ? void 0 : _a.includes('![]')) && !((_b = e.title) === null || _b === void 0 ? void 0 : _b.length)) {
                 return Object.assign(Object.assign({}, e), {
@@ -141,16 +127,16 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   //
   // Change `answerInfo` according to `optionType`.
   //
-  React__default.default.useEffect(function () {
-    var get = function get() {
+  React.useEffect(() => {
+    const get = () => {
       switch (watchedOptionType) {
         case types.enums.QuizOptionType.SelectOne:
           if (!Array.isArray(watchedAnswerInfo)) {
             return [0];
           }
           if (checkTwoDimensionArray.checkTwoDimensionArray(watchedAnswerInfo)) {
-            var convertedAnswerInfo = watchedAnswerInfo;
-            return flattenDeep__default.default(convertedAnswerInfo).slice(0, 1);
+            const convertedAnswerInfo = watchedAnswerInfo;
+            return flattenDeep(convertedAnswerInfo).slice(0, 1);
           }
           return watchedAnswerInfo.slice(0, 1);
         case types.enums.QuizOptionType.SelectMultiple:
@@ -159,7 +145,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
             return [0];
           }
           if (checkTwoDimensionArray.checkTwoDimensionArray(watchedAnswerInfo)) {
-            return flattenDeep__default.default(watchedAnswerInfo);
+            return flattenDeep(watchedAnswerInfo);
           }
           return watchedAnswerInfo;
         case types.enums.QuizOptionType.Text:
@@ -177,8 +163,8 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   //
   // Change `answerHint` according to `optionType`.
   //
-  React__default.default.useEffect(function () {
-    var get = function get() {
+  React.useEffect(() => {
+    const get = () => {
       switch (watchedOptionType) {
         case types.enums.QuizOptionType.SelectOne:
         case types.enums.QuizOptionType.SelectMultiple:
@@ -198,8 +184,8 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   //
   // Change `isAutoGrade` according to `optionType`.
   //
-  React__default.default.useEffect(function () {
-    var get = function get() {
+  React.useEffect(() => {
+    const get = () => {
       switch (watchedOptionType) {
         case types.enums.QuizOptionType.SelectOne:
         case types.enums.QuizOptionType.SelectMultiple:
@@ -219,8 +205,8 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   //
   // Change `groups` according to `optionType`.
   //
-  React__default.default.useEffect(function () {
-    var get = function get() {
+  React.useEffect(() => {
+    const get = () => {
       switch (watchedOptionType) {
         case types.enums.QuizOptionType.SelectOne:
         case types.enums.QuizOptionType.SelectMultiple:
@@ -255,7 +241,7 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
    * Input of option info and answer info,
    * according to option type.
    */
-  var Option = React__default.default.useMemo(function () {
+  const Option = React.useMemo(() => {
     switch (watchedOptionType) {
       case types.enums.QuizOptionType.SelectOne:
         return OptionSelectOne.default;
@@ -268,22 +254,21 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
       case types.enums.QuizOptionType.Text:
         return OptionText.default;
       default:
-        return React__default.default.Fragment;
+        return React.Fragment;
     }
   }, [watchedOptionType]);
   /**
    * Render input for quiz title.
    */
-  var renderQuestionTitleInput = function renderQuestionTitleInput() {
-    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsx(blocks.Label, {
+  const renderQuestionTitleInput = () => {
+    return React.createElement(blocks.FormInputVerticalLayout, {
+      label: React.createElement(blocks.Label, {
         size: "small",
-        required: true,
-        children: intl$1.formatMessage({
-          id: 'content.title'
-        })
-      }),
-      input: jsxRuntime.jsx(reactHookForm.Controller, {
+        required: true
+      }, intl$1.formatMessage({
+        id: 'content.title'
+      })),
+      input: React.createElement(reactHookForm.Controller, {
         control: control,
         name: "questionTitle",
         rules: {
@@ -312,11 +297,12 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
             })
           }
         },
-        render: function render(_ref) {
-          var field = _ref.field,
-            fieldState = _ref.fieldState;
+        render: ({
+          field,
+          fieldState
+        }) => {
           var _a;
-          return jsxRuntime.jsx(blocks.Input, Object.assign({
+          return React.createElement(blocks.Input, Object.assign({
             size: "small",
             width: "full",
             minLength: MIN_TEXT_LENGTH,
@@ -334,169 +320,149 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   /**
    * Render input for quiz description.
    */
-  var renderQuestionDescriptionInput = function renderQuestionDescriptionInput() {
-    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsx(blocks.Label, {
-        size: "small",
-        children: intl$1.formatMessage({
-          id: 'content.description.title'
-        })
-      }),
-      input: jsxRuntime.jsx(reactHookForm.Controller, {
+  const renderQuestionDescriptionInput = () => {
+    return React.createElement(blocks.FormInputVerticalLayout, {
+      label: React.createElement(blocks.Label, {
+        size: "small"
+      }, intl$1.formatMessage({
+        id: 'content.description.title'
+      })),
+      input: React.createElement(reactHookForm.Controller, {
         control: control,
         name: "questionDescription",
-        render: function render(_ref2) {
-          var field = _ref2.field;
-          return jsxRuntime.jsx(index.MarkdownEditor, Object.assign({
-            placeholder: intl$1.formatMessage({
-              id: 'content.description.placeholder'
-            }),
-            onFileUploadRequest: onFileUploadRequest
-          }, field));
-        }
+        render: ({
+          field
+        }) => React.createElement(index.MarkdownEditor, Object.assign({
+          placeholder: intl$1.formatMessage({
+            id: 'content.description.placeholder'
+          }),
+          onFileUploadRequest: onFileUploadRequest
+        }, field))
       })
     });
   };
   /**
    * Render input of option type, option info and answer info.
    */
-  var renderOptionInput = function renderOptionInput() {
-    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsx(blocks.Label, {
+  const renderOptionInput = () => {
+    return React.createElement(blocks.FormInputVerticalLayout, {
+      label: React.createElement(blocks.Label, {
         size: "small",
-        required: true,
-        children: intl$1.formatMessage({
-          id: 'content.option.title'
-        })
-      }),
-      input: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(reactHookForm.Controller, {
-          control: control,
-          name: "optionType",
-          render: function render(_ref3) {
-            var field = _ref3.field;
-            return jsxRuntime.jsx(material.Tooltip, {
-              title: disabled && intl$1.formatMessage({
-                id: 'content.option.tooltip.disabled'
-              }),
-              placement: "top-end",
-              children: jsxRuntime.jsxs(material.Stack, {
-                direction: "row",
-                justifyContent: "space-between",
-                marginBottom: "0.5rem",
-                children: [jsxRuntime.jsxs(material.TextField, Object.assign({
-                  select: true,
-                  disabled: disabled
-                }, field, {
-                  onChange: function onChange(event) {
-                    var isTextQuizOption = Number(event.target.value) === types.enums.QuizOptionType.Text;
-                    if (isTextQuizOption) {
-                      setValue('optionsSetEnabled', false);
-                    }
-                    field.onChange(event);
-                  },
-                  children: [jsxRuntime.jsx(material.MenuItem, {
-                    value: types.enums.QuizOptionType.SelectOne,
-                    children: intl$1.formatMessage({
-                      id: 'content.option.select.items.selectOne'
-                    })
-                  }), jsxRuntime.jsx(material.MenuItem, {
-                    value: types.enums.QuizOptionType.SelectMultiple,
-                    children: intl$1.formatMessage({
-                      id: 'content.option.select.items.selectMultiple'
-                    })
-                  }), jsxRuntime.jsx(material.MenuItem, {
-                    value: types.enums.QuizOptionType.SelectMultipleOrder,
-                    children: intl$1.formatMessage({
-                      id: 'content.option.select.items.selectMultipleOrder'
-                    })
-                  }), jsxRuntime.jsx(material.MenuItem, {
-                    value: types.enums.QuizOptionType.Group,
-                    children: intl$1.formatMessage({
-                      id: 'content.option.select.items.group'
-                    })
-                  }), jsxRuntime.jsx(material.MenuItem, {
-                    value: types.enums.QuizOptionType.Text,
-                    children: intl$1.formatMessage({
-                      id: 'content.option.select.items.text'
-                    })
-                  })]
-                })), watchedOptionType !== types.enums.QuizOptionType.Text ? jsxRuntime.jsx(reactHookForm.Controller, {
-                  name: "optionsSetEnabled",
-                  control: control,
-                  render: function render(_ref4) {
-                    var field = _ref4.field;
-                    return jsxRuntime.jsx(material.Tooltip, {
-                      title: disabled ? '' : intl$1.formatMessage({
-                        id: 'content.option.optionsSetEnabled.tooltip'
-                      }),
-                      placement: "top",
-                      children: jsxRuntime.jsx(material.FormControlLabel, {
-                        disabled: disabled,
-                        label: intl$1.formatMessage({
-                          id: 'content.option.optionsSetEnabled.label'
-                        }),
-                        control: jsxRuntime.jsx(material.Switch, Object.assign({}, field, {
-                          checked: field.value
-                        }))
-                      })
-                    });
-                  }
-                }) : null]
-              })
-            });
+        required: true
+      }, intl$1.formatMessage({
+        id: 'content.option.title'
+      })),
+      input: React.createElement(React.Fragment, null, React.createElement(reactHookForm.Controller, {
+        control: control,
+        name: "optionType",
+        render: ({
+          field
+        }) => React.createElement(material.Tooltip, {
+          title: disabled && intl$1.formatMessage({
+            id: 'content.option.tooltip.disabled'
+          }),
+          placement: "top-end"
+        }, React.createElement(material.Stack, {
+          direction: "row",
+          justifyContent: "space-between",
+          marginBottom: "0.5rem"
+        }, React.createElement(material.TextField, Object.assign({
+          select: true,
+          disabled: disabled
+        }, field, {
+          onChange: event => {
+            const isTextQuizOption = Number(event.target.value) === types.enums.QuizOptionType.Text;
+            if (isTextQuizOption) {
+              setValue('optionsSetEnabled', false);
+            }
+            field.onChange(event);
           }
-        }), watchedOptionType !== types.enums.QuizOptionType.Text && optionsSetEnabled ? jsxRuntime.jsxs(material.Alert, {
-          severity: "info",
-          sx: {
-            marginBottom: '1rem'
-          },
-          children: [jsxRuntime.jsx(material.AlertTitle, {
-            children: intl$1.formatMessage({
-              id: 'content.option.alert.randomized.title'
-            })
-          }), intl$1.formatMessage({
-            id: 'content.option.alert.randomized.description'
-          })]
-        }) : null, jsxRuntime.jsx(reactTransitionGroup.Transition, {
-          in: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === types.enums.QuizOptionType.Group,
-          timeout: 0,
-          mountOnEnter: true,
-          unmountOnExit: true,
-          children: jsxRuntime.jsx(material.Box, {
-            marginBottom: "0.5rem",
-            children: jsxRuntime.jsx(blocks.StatusText, {
-              role: "description",
-              preWrap: true,
-              children: intl$1.formatMessage({
-                id: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder ? 'content.option.statusText.dragNDrop' : 'content.option.statusText.dragNDropGroup'
-              })
-            })
+        }), React.createElement(material.MenuItem, {
+          value: types.enums.QuizOptionType.SelectOne,
+          children: intl$1.formatMessage({
+            id: 'content.option.select.items.selectOne'
           })
-        }), jsxRuntime.jsx(Option, {})]
-      })
+        }), React.createElement(material.MenuItem, {
+          value: types.enums.QuizOptionType.SelectMultiple,
+          children: intl$1.formatMessage({
+            id: 'content.option.select.items.selectMultiple'
+          })
+        }), React.createElement(material.MenuItem, {
+          value: types.enums.QuizOptionType.SelectMultipleOrder,
+          children: intl$1.formatMessage({
+            id: 'content.option.select.items.selectMultipleOrder'
+          })
+        }), React.createElement(material.MenuItem, {
+          value: types.enums.QuizOptionType.Group,
+          children: intl$1.formatMessage({
+            id: 'content.option.select.items.group'
+          })
+        }), React.createElement(material.MenuItem, {
+          value: types.enums.QuizOptionType.Text,
+          children: intl$1.formatMessage({
+            id: 'content.option.select.items.text'
+          })
+        })), watchedOptionType !== types.enums.QuizOptionType.Text ? React.createElement(reactHookForm.Controller, {
+          name: "optionsSetEnabled",
+          control: control,
+          render: ({
+            field
+          }) => React.createElement(material.Tooltip, {
+            title: disabled ? '' : intl$1.formatMessage({
+              id: 'content.option.optionsSetEnabled.tooltip'
+            }),
+            placement: "top"
+          }, React.createElement(material.FormControlLabel, {
+            disabled: disabled,
+            label: intl$1.formatMessage({
+              id: 'content.option.optionsSetEnabled.label'
+            }),
+            control: React.createElement(material.Switch, Object.assign({}, field, {
+              checked: field.value
+            }))
+          }))
+        }) : null))
+      }), watchedOptionType !== types.enums.QuizOptionType.Text && optionsSetEnabled ? React.createElement(material.Alert, {
+        severity: "info",
+        sx: {
+          marginBottom: '1rem'
+        }
+      }, React.createElement(material.AlertTitle, null, intl$1.formatMessage({
+        id: 'content.option.alert.randomized.title'
+      })), intl$1.formatMessage({
+        id: 'content.option.alert.randomized.description'
+      })) : null, React.createElement(reactTransitionGroup.Transition, {
+        in: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder || watchedOptionType === types.enums.QuizOptionType.Group,
+        timeout: 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, React.createElement(material.Box, {
+        marginBottom: "0.5rem"
+      }, React.createElement(blocks.StatusText, {
+        role: "description",
+        preWrap: true
+      }, intl$1.formatMessage({
+        id: watchedOptionType === types.enums.QuizOptionType.SelectMultipleOrder ? 'content.option.statusText.dragNDrop' : 'content.option.statusText.dragNDropGroup'
+      })))), React.createElement(Option, null))
     });
   };
   /**
    * Input of answer hint.
    */
-  var renderAnswerHintInput = function renderAnswerHintInput() {
+  const renderAnswerHintInput = () => {
     if (watchedOptionType !== types.enums.QuizOptionType.Text) {
       return null;
     }
-    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsx(blocks.Label, {
-        size: "small",
-        children: intl$1.formatMessage({
-          id: 'content.answerHint.title'
-        })
-      }),
-      description: jsxRuntime.jsx(blocks.Text, {
-        children: intl$1.formatMessage({
-          id: 'content.answerHint.description'
-        })
-      }),
-      input: jsxRuntime.jsx(reactHookForm.Controller, {
+    return React.createElement(blocks.FormInputVerticalLayout, {
+      label: React.createElement(blocks.Label, {
+        size: "small"
+      }, intl$1.formatMessage({
+        id: 'content.answerHint.title'
+      })),
+      description: React.createElement(blocks.Text, null, intl$1.formatMessage({
+        id: 'content.answerHint.description'
+      })),
+      input: React.createElement(reactHookForm.Controller, {
         control: control,
         name: "answerHint",
         rules: {
@@ -519,11 +485,12 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
             })
           }
         },
-        render: function render(_ref5) {
-          var field = _ref5.field,
-            fieldState = _ref5.fieldState;
+        render: ({
+          field,
+          fieldState
+        }) => {
           var _a, _b;
-          return jsxRuntime.jsx(blocks.Input, Object.assign({
+          return React.createElement(blocks.Input, Object.assign({
             size: "small",
             width: "full",
             minLength: MIN_TEXT_LENGTH,
@@ -543,85 +510,70 @@ var MaterialQuizEditContent = function MaterialQuizEditContent() {
   /**
    * Input of explanation info.
    */
-  var renderExplanationInfoInput = function renderExplanationInfoInput() {
-    return jsxRuntime.jsx(blocks.FormInputVerticalLayout, {
-      label: jsxRuntime.jsx(blocks.Label, {
-        size: "small",
-        children: intl$1.formatMessage({
-          id: 'content.explanationInfo.title'
-        })
-      }),
-      description: jsxRuntime.jsx(blocks.Text, {
-        children: intl$1.formatMessage({
-          id: 'content.explanationInfo.description'
-        })
-      }),
-      input: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(reactHookForm.Controller, {
-          control: control,
-          name: "explanationInfo.isEnabled",
-          render: function render(_ref6) {
-            var field = _ref6.field;
-            return jsxRuntime.jsx(blocks.Checkbox, Object.assign({
-              size: "small"
-            }, field, {
-              children: intl$1.formatMessage({
-                id: 'content.explanationInfo.checkbox.label'
-              })
-            }));
+  const renderExplanationInfoInput = () => {
+    return React.createElement(blocks.FormInputVerticalLayout, {
+      label: React.createElement(blocks.Label, {
+        size: "small"
+      }, intl$1.formatMessage({
+        id: 'content.explanationInfo.title'
+      })),
+      description: React.createElement(blocks.Text, null, intl$1.formatMessage({
+        id: 'content.explanationInfo.description'
+      })),
+      input: React.createElement(React.Fragment, null, React.createElement(reactHookForm.Controller, {
+        control: control,
+        name: "explanationInfo.isEnabled",
+        render: ({
+          field
+        }) => React.createElement(blocks.Checkbox, Object.assign({
+          size: "small"
+        }, field), intl$1.formatMessage({
+          id: 'content.explanationInfo.checkbox.label'
+        }))
+      }), React.createElement(reactTransitionGroup.Transition, {
+        in: watchedExplanationInfo.isEnabled,
+        timeout: 0,
+        mountOnEnter: true,
+        unmountOnExit: true
+      }, React.createElement(React.Fragment, null, React.createElement(blocks.Vspace, {
+        height: 1
+      }), React.createElement(reactHookForm.Controller, {
+        control: control,
+        name: "explanationInfo.value",
+        rules: {
+          required: {
+            value: true,
+            message: intl$1.formatMessage({
+              id: 'content.explanationInfo.textarea.placeholder'
+            })
           }
-        }), jsxRuntime.jsx(reactTransitionGroup.Transition, {
-          in: watchedExplanationInfo.isEnabled,
-          timeout: 0,
-          mountOnEnter: true,
-          unmountOnExit: true,
-          children: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [jsxRuntime.jsx(blocks.Vspace, {
-              height: 1
-            }), jsxRuntime.jsx(reactHookForm.Controller, {
-              control: control,
-              name: "explanationInfo.value",
-              rules: {
-                required: {
-                  value: true,
-                  message: intl$1.formatMessage({
-                    id: 'content.explanationInfo.textarea.placeholder'
-                  })
-                }
-              },
-              render: function render(_ref7) {
-                var field = _ref7.field,
-                  fieldState = _ref7.fieldState;
-                var _a;
-                return jsxRuntime.jsxs(blocks.Flex, {
-                  column: true,
-                  children: [fieldState.invalid ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                    children: [jsxRuntime.jsx(blocks.StatusText, {
-                      children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
-                      role: "danger"
-                    }), jsxRuntime.jsx(blocks.Vspace, {
-                      height: 0.5
-                    })]
-                  }) : null, jsxRuntime.jsx(index.MarkdownEditor, Object.assign({
-                    placeholder: intl$1.formatMessage({
-                      id: 'content.explanationInfo.textarea.errorMessage.required'
-                    }),
-                    onFileUploadRequest: onFileUploadRequest
-                  }, field))]
-                });
-              }
-            })]
-          })
-        })]
-      })
+        },
+        render: ({
+          field,
+          fieldState
+        }) => {
+          var _a;
+          return React.createElement(blocks.Flex, {
+            column: true
+          }, fieldState.invalid ? React.createElement(React.Fragment, null, React.createElement(blocks.StatusText, {
+            children: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+            role: "danger"
+          }), React.createElement(blocks.Vspace, {
+            height: 0.5
+          })) : null, React.createElement(index.MarkdownEditor, Object.assign({
+            placeholder: intl$1.formatMessage({
+              id: 'content.explanationInfo.textarea.errorMessage.required'
+            }),
+            onFileUploadRequest: onFileUploadRequest
+          }, field)));
+        }
+      }))))
     });
   };
   //
   //
   //
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput(), renderAnswerHintInput(), renderExplanationInfoInput()]
-  });
+  return React.createElement(React.Fragment, null, renderQuestionTitleInput(), renderQuestionDescriptionInput(), renderOptionInput(), renderAnswerHintInput(), renderExplanationInfoInput());
 };
 
 exports.default = MaterialQuizEditContent;