@elice/material-quiz 1.240715.0-touch.3 → 1.240715.0-touch.5

package/cjs/components/eb-sortable/EbDraggable.js

@@ -19,7 +19,8 @@ const EbDraggable = ({
     attributes,
     listeners,
     setNodeRef,
-    transform
+    transform,
+    isDragging
   } = core.useDraggable({
     id,
     disabled
@@ -34,7 +35,9 @@ const EbDraggable = ({
   return React.createElement("div", Object.assign({
     ref: setNodeRef,
     className: className,
-    style: style
+    style: isDragging ? Object.assign(Object.assign({}, style), {
+      zIndex: 1000
+    }) : style
   }, listeners, attributes), children);
 };
 

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/MaterialQuizAnswerExplanation.js

@@ -8,12 +8,13 @@ var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
 var types = require('@elice/types');
+var wysiwyg = require('@elice/wysiwyg');
 var styled = require('styled-components');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 
 const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
-})(["p{margin:0 !important;}"]);
+})(["p{margin:0 !important;}", ""], wysiwyg.EliceWysiwygEditorTheme.resetMarkdownSSR);
 const StyledAccordion = styled(blocks.Accordion).withConfig({
   componentId: "sc-18kg5i5-1"
 })(["border-radius:8px;overflow:hidden;background-color:", " !important;border-radius:8px;overflow:hidden;& > *:first-child{background-color:", " !important;}& > *:last-child{background-color:", " !important;}"], designTokens.base.color.navy5, designTokens.base.color.navy7, designTokens.base.color.navy7);

package/cjs/components/material-quiz/MaterialQuizInfo.js

@@ -7,6 +7,7 @@ var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
 var markdown = require('@elice/markdown');
+var wysiwyg = require('@elice/wysiwyg');
 var material = require('@mui/material');
 var styled = require('styled-components');
 var QuestionBox = require('../shared/QuestionBox.js');
@@ -18,7 +19,7 @@ var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 //
 const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
   componentId: "sc-1s7jbf9-0"
-})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}"]);
+})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}", ""], wysiwyg.EliceWysiwygEditorTheme.resetMarkdownSSR);
 //
 //
 //

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -267,7 +267,7 @@ const MaterialQuizGroup = () => {
       handleAnswerReset
     }
   }, React.createElement(QuestionBox.default, {
-    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title,
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     onNext: onNext,
     isNextActive: isNextActive,
     submitStatus: React.createElement(QuizSubmitStatusText.default, {

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

@@ -7,10 +7,10 @@ var reactHookForm = require('react-hook-form');
 var reactTransitionGroup = require('react-transition-group');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
-var markdown = require('@elice/markdown');
 var types = require('@elice/types');
 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,8 +332,7 @@ const MaterialQuizEditContent = () => {
         name: "questionDescription",
         render: ({
           field
-        }) => React.createElement(markdown.MarkdownEditor, Object.assign({
-          enableFooter: true,
+        }) => React.createElement(index.MarkdownEditor, Object.assign({
           placeholder: intl$1.formatMessage({
             id: 'content.description.placeholder'
           }),
@@ -561,8 +560,7 @@ const MaterialQuizEditContent = () => {
             role: "danger"
           }), React.createElement(blocks.Vspace, {
             height: 0.5
-          })) : null, React.createElement(markdown.MarkdownEditor, Object.assign({
-            enableFooter: true,
+          })) : null, React.createElement(index.MarkdownEditor, Object.assign({
             placeholder: intl$1.formatMessage({
               id: 'content.explanationInfo.textarea.errorMessage.required'
             }),

package/cjs/components/shared/QuizDraggbleOption.js

@@ -45,7 +45,7 @@ const StyledOrder = styled.div.withConfig({
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
 const StyledQuizDraggbleOption = styled(EbDraggable.default).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, ({
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, ({
   role
 }) => {
   switch (role) {

package/es/components/eb-sortable/EbDraggable.js

@@ -15,7 +15,8 @@ const EbDraggable = ({
     attributes,
     listeners,
     setNodeRef,
-    transform
+    transform,
+    isDragging
   } = useDraggable({
     id,
     disabled
@@ -30,7 +31,9 @@ const EbDraggable = ({
   return React.createElement("div", Object.assign({
     ref: setNodeRef,
     className: className,
-    style: style
+    style: isDragging ? Object.assign(Object.assign({}, style), {
+      zIndex: 1000
+    }) : style
   }, listeners, attributes), children);
 };
 

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/MaterialQuizAnswerExplanation.js

@@ -4,12 +4,13 @@ import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
 import { MarkdownSSR } from '@elice/markdown';
 import { enums } from '@elice/types';
+import { EliceWysiwygEditorTheme } from '@elice/wysiwyg';
 import styled from 'styled-components';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
 const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
-})(["p{margin:0 !important;}"]);
+})(["p{margin:0 !important;}", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
 const StyledAccordion = styled(Accordion).withConfig({
   componentId: "sc-18kg5i5-1"
 })(["border-radius:8px;overflow:hidden;background-color:", " !important;border-radius:8px;overflow:hidden;& > *:first-child{background-color:", " !important;}& > *:last-child{background-color:", " !important;}"], base.color.navy5, base.color.navy7, base.color.navy7);

package/es/components/material-quiz/MaterialQuizInfo.js

@@ -3,6 +3,7 @@ import { useMeasure } from 'react-use';
 import { Vspace, Shimmer, IconButton } from '@elice/blocks';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { MarkdownSSR } from '@elice/markdown';
+import { EliceWysiwygEditorTheme } from '@elice/wysiwyg';
 import { styled as styled$1, Modal, Box } from '@mui/material';
 import styled from 'styled-components';
 import QuestionBox from '../shared/QuestionBox.js';
@@ -14,7 +15,7 @@ import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 //
 const StyledMarkdownSSR = styled(MarkdownSSR).withConfig({
   componentId: "sc-1s7jbf9-0"
-})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}"]);
+})([".elicemd--theme-dark{pre{border:0;}table td,table th{border-bottom-color:rgba(255,255,255,0.16);}}", ""], EliceWysiwygEditorTheme.resetMarkdownSSR);
 //
 //
 //

package/es/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -263,7 +263,7 @@ const MaterialQuizGroup = () => {
       handleAnswerReset
     }
   }, React.createElement(QuestionBox, {
-    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title,
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     onNext: onNext,
     isNextActive: isNextActive,
     submitStatus: React.createElement(QuizSubmitStatusText, {

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

@@ -3,10 +3,10 @@ import { useFormContext, Controller } from 'react-hook-form';
 import { Transition } from 'react-transition-group';
 import { FormInputVerticalLayout, Label, Input, StatusText, Text, Checkbox, Vspace, Flex } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
-import { MarkdownEditor } from '@elice/markdown';
 import { enums } from '@elice/types';
 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';
@@ -329,7 +329,6 @@ const MaterialQuizEditContent = () => {
         render: ({
           field
         }) => React.createElement(MarkdownEditor, Object.assign({
-          enableFooter: true,
           placeholder: intl.formatMessage({
             id: 'content.description.placeholder'
           }),
@@ -558,7 +557,6 @@ const MaterialQuizEditContent = () => {
           }), React.createElement(Vspace, {
             height: 0.5
           })) : null, React.createElement(MarkdownEditor, Object.assign({
-            enableFooter: true,
             placeholder: intl.formatMessage({
               id: 'content.explanationInfo.textarea.errorMessage.required'
             }),

package/es/components/shared/QuizDraggbleOption.js

@@ -41,7 +41,7 @@ const StyledOrder = styled.div.withConfig({
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
 const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
   role
 }) => {
   switch (role) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.240715.0-touch.3",
+  "version": "1.240715.0-touch.5",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -36,6 +36,7 @@
     "@elice/material-shared-utils": "*",
     "@elice/mui-system": "^5",
     "@elice/types": "^1",
+    "@elice/wysiwyg": "^1",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6",
@@ -67,10 +68,11 @@
     "@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.240715.0-touch.3",
-    "@elice/material-shared-utils": "1.240715.0-touch.3",
+    "@elice/material-shared-types": "1.240715.0-touch.5",
+    "@elice/material-shared-utils": "1.240715.0-touch.5",
     "@elice/mui-system": "^5.240108.1",
     "@elice/types": "^1.240619.0",
+    "@elice/wysiwyg": "1.240716.1",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
@@ -90,5 +92,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "974b8b856bd216d827c9cb55cb2419247c2788f6"
+  "gitHead": "3b07b7d94b53db047b1866600eb51b52d259ddc7"
 }