@elice/material-quiz 1.240716.0 → 1.240718.0-trasncript.0

package/cjs/components/markdown-editor/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { EliceWysiwygEditorProps } from '@elice/wysiwyg';
+export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => React.JSX.Element;

package/cjs/components/markdown-editor/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactUse = require('react-use');
+var wysiwyg = require('@elice/wysiwyg');
+
+const STATE_SYNC_DEBOUNCE_TIME = 50;
+const MarkdownEditor = _a => {
+  var {
+      value,
+      onChange
+    } = _a,
+    props = tslib.__rest(_a, ["value", "onChange"]);
+  const [__value, __setValue] = React.useState(value);
+  reactUse.useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
+  reactUse.useDebounce(() => {
+    if (__value !== value && typeof onChange === 'function') {
+      onChange(__value !== null && __value !== void 0 ? __value : '');
+    }
+  }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
+  return React.createElement(wysiwyg.EliceWysiwygEditor, Object.assign({
+    value: value,
+    onChange: __setValue
+  }, props));
+};
+
+exports.MarkdownEditor = MarkdownEditor;

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

@@ -8,9 +8,9 @@ var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
-var wysiwyg = require('@elice/wysiwyg');
 var material = require('@mui/material');
 var flattenDeep = require('lodash-es/flattenDeep');
+var index = require('../markdown-editor/index.js');
 var OptionGroup = require('./options/options-group/OptionGroup.js');
 var OptionSelectMultiple = require('./options/OptionSelectMultiple.js');
 var OptionSelectMultipleOrder = require('./options/OptionSelectMultipleOrder.js');
@@ -332,7 +332,7 @@ const MaterialQuizEditContent = () => {
         name: "questionDescription",
         render: ({
           field
-        }) => React.createElement(wysiwyg.EliceWysiwygEditor, Object.assign({
+        }) => React.createElement(index.MarkdownEditor, Object.assign({
           placeholder: intl$1.formatMessage({
             id: 'content.description.placeholder'
           }),
@@ -560,7 +560,7 @@ const MaterialQuizEditContent = () => {
             role: "danger"
           }), React.createElement(blocks.Vspace, {
             height: 0.5
-          })) : null, React.createElement(wysiwyg.EliceWysiwygEditor, Object.assign({
+          })) : null, React.createElement(index.MarkdownEditor, Object.assign({
             placeholder: intl$1.formatMessage({
               id: 'content.explanationInfo.textarea.errorMessage.required'
             }),

package/es/components/markdown-editor/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { EliceWysiwygEditorProps } from '@elice/wysiwyg';
+export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => React.JSX.Element;

package/es/components/markdown-editor/index.js

@@ -0,0 +1,26 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useDebounce } from 'react-use';
+import { EliceWysiwygEditor } from '@elice/wysiwyg';
+
+const STATE_SYNC_DEBOUNCE_TIME = 50;
+const MarkdownEditor = _a => {
+  var {
+      value,
+      onChange
+    } = _a,
+    props = __rest(_a, ["value", "onChange"]);
+  const [__value, __setValue] = React.useState(value);
+  useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
+  useDebounce(() => {
+    if (__value !== value && typeof onChange === 'function') {
+      onChange(__value !== null && __value !== void 0 ? __value : '');
+    }
+  }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
+  return React.createElement(EliceWysiwygEditor, Object.assign({
+    value: value,
+    onChange: __setValue
+  }, props));
+};
+
+export { MarkdownEditor };

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

@@ -4,9 +4,9 @@ import { Transition } from 'react-transition-group';
 import { FormInputVerticalLayout, Label, Input, StatusText, Text, Checkbox, Vspace, Flex } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
-import { EliceWysiwygEditor } from '@elice/wysiwyg';
 import { Tooltip, Stack, TextField, MenuItem, FormControlLabel, Switch, Alert, AlertTitle, Box } from '@mui/material';
 import flattenDeep from 'lodash-es/flattenDeep';
+import { MarkdownEditor } from '../markdown-editor/index.js';
 import OptionGroup from './options/options-group/OptionGroup.js';
 import OptionSelectMultiple from './options/OptionSelectMultiple.js';
 import OptionSelectMultipleOrder from './options/OptionSelectMultipleOrder.js';
@@ -328,7 +328,7 @@ const MaterialQuizEditContent = () => {
         name: "questionDescription",
         render: ({
           field
-        }) => React.createElement(EliceWysiwygEditor, Object.assign({
+        }) => React.createElement(MarkdownEditor, Object.assign({
           placeholder: intl.formatMessage({
             id: 'content.description.placeholder'
           }),
@@ -556,7 +556,7 @@ const MaterialQuizEditContent = () => {
             role: "danger"
           }), React.createElement(Vspace, {
             height: 0.5
-          })) : null, React.createElement(EliceWysiwygEditor, Object.assign({
+          })) : null, React.createElement(MarkdownEditor, Object.assign({
             placeholder: intl.formatMessage({
               id: 'content.explanationInfo.textarea.errorMessage.required'
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.240716.0",
+  "version": "1.240718.0-trasncript.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -66,8 +66,8 @@
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
     "@elice/markdown": "^1.240124.0",
-    "@elice/material-shared-types": "1.240716.0",
-    "@elice/material-shared-utils": "1.240716.0",
+    "@elice/material-shared-types": "1.240718.0-trasncript.0",
+    "@elice/material-shared-utils": "1.240718.0-trasncript.0",
     "@elice/mui-system": "^5.240108.1",
     "@elice/types": "^1.240619.0",
     "@elice/wysiwyg": "1.240716.1",
@@ -90,5 +90,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "824db30f6b6377305ae84358cdb33224af59d1f1"
+  "gitHead": "832dc77a5e38ff02e0bfec8905a3a9706b9b9593"
 }