@pie-lib/config-ui 12.0.0-next.0 → 12.1.0-next.0

package/src/choice-configuration/index.jsx

@@ -6,14 +6,14 @@ import ActionDelete from '@mui/icons-material/Delete';
 import ArrowRight from '@mui/icons-material/SubdirectoryArrowRight';
 import IconButton from '@mui/material/IconButton';
 import { InputContainer } from '@pie-lib/render-ui';
-// import EditableHtml from '@pie-lib/editable-html';
+// import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import { InputCheckbox, InputRadio } from '../inputs';
 import FeedbackMenu from './feedback-menu';
 
 // - mathquill error window not defined
 let EditableHtml;
 if (typeof window !== 'undefined') {
-  EditableHtml = require('@pie-lib/editable-html')['default'];
+  EditableHtml = require('@pie-lib/editable-html-tip-tap')['default'];
 }
 
 const StyledEditorHolder = styled('div')(({ theme }) => ({
@@ -38,7 +38,6 @@ const EditableHtmlContainer = ({
   uploadSoundSupport,
   mathMlOptions = {},
 }) => {
-
   return (
     <InputContainer label={label} className={className}>
       <StyledEditorHolder>
@@ -288,81 +287,75 @@ export class ChoiceConfiguration extends React.Component {
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
 
     return (
-        <StyledTopRow>
-          {index > 0 && (
-            <StyledIndex type="title">
-              {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
-            </StyledIndex>
-          )}
-
-          <StyledToggle>
-            <InputToggle
-              onChange={this.onCheckedChange}
-              label={!noLabels ? 'Correct' : ''}
-              checked={!!data.correct}
-              error={noCorrectAnswerError}
-            />
-          </StyledToggle>
-
-          <StyledMiddleColumn>
-              <EditableHtmlContainer
-                label={!noLabels ? 'Label' : ''}
-                value={data.label}
-                onChange={this.onLabelChange}
-                imageSupport={imageSupport}
-                disableImageAlignmentButtons={disableImageAlignmentButtons}
-                disabled={disabled}
-                spellCheck={spellCheck}
-                nonEmpty={nonEmpty}
-                pluginOpts={pluginOpts}
-                toolbarOpts={toolbarOpts}
-                error={error}
-                uploadSoundSupport={uploadSoundSupport}
-                mathMlOptions={mathMlOptions}
-                maxImageWidth={maxImageWidth}
-                maxImageHeight={maxImageHeight}
-              />
-            {error && <StyledErrorText>{error}</StyledErrorText>}
-
-            {allowFeedBack && (
-              <Feedback
-                {...data.feedback}
-                correct={data.correct}
-                defaults={defaultFeedback}
-                onChange={this.onFeedbackValueChange}
-                toolbarOpts={toolbarOpts}
-              />
-            )}
-          </StyledMiddleColumn>
+      <StyledTopRow>
+        {index > 0 && (
+          <StyledIndex type="title">
+            {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
+          </StyledIndex>
+        )}
+
+        <StyledToggle>
+          <InputToggle
+            onChange={this.onCheckedChange}
+            label={!noLabels ? 'Correct' : ''}
+            checked={!!data.correct}
+            error={noCorrectAnswerError}
+          />
+        </StyledToggle>
+
+        <StyledMiddleColumn>
+          <EditableHtmlContainer
+            label={!noLabels ? 'Label' : ''}
+            value={data.label}
+            onChange={this.onLabelChange}
+            imageSupport={imageSupport}
+            disableImageAlignmentButtons={disableImageAlignmentButtons}
+            disabled={disabled}
+            spellCheck={spellCheck}
+            nonEmpty={nonEmpty}
+            pluginOpts={pluginOpts}
+            toolbarOpts={toolbarOpts}
+            error={error}
+            uploadSoundSupport={uploadSoundSupport}
+            mathMlOptions={mathMlOptions}
+            maxImageWidth={maxImageWidth}
+            maxImageHeight={maxImageHeight}
+          />
+          {error && <StyledErrorText>{error}</StyledErrorText>}
 
           {allowFeedBack && (
-            <StyledFeedback>
-              <InputContainer label={!noLabels ? 'Feedback' : ''}>
-                <StyledFeedbackIcon>
-                  <FeedbackMenu
-                    onChange={this.onFeedbackTypeChange}
-                    value={data.feedback}
-                  />
-                </StyledFeedbackIcon>
-              </InputContainer>
-            </StyledFeedback>
-          )}
-
-          {allowDelete && (
-            <StyledDelete>
-              <InputContainer label={!noLabels ? 'Delete' : ''}>
-                <StyledDeleteIcon>
-                  <IconButton
-                    aria-label="delete"
-                    onClick={onDelete}
-                    size="large">
-                    <ActionDelete />
-                  </IconButton>
-                </StyledDeleteIcon>
-              </InputContainer>
-            </StyledDelete>
+            <Feedback
+              {...data.feedback}
+              correct={data.correct}
+              defaults={defaultFeedback}
+              onChange={this.onFeedbackValueChange}
+              toolbarOpts={toolbarOpts}
+            />
           )}
-        </StyledTopRow>
+        </StyledMiddleColumn>
+
+        {allowFeedBack && (
+          <StyledFeedback>
+            <InputContainer label={!noLabels ? 'Feedback' : ''}>
+              <StyledFeedbackIcon>
+                <FeedbackMenu onChange={this.onFeedbackTypeChange} value={data.feedback} />
+              </StyledFeedbackIcon>
+            </InputContainer>
+          </StyledFeedback>
+        )}
+
+        {allowDelete && (
+          <StyledDelete>
+            <InputContainer label={!noLabels ? 'Delete' : ''}>
+              <StyledDeleteIcon>
+                <IconButton aria-label="delete" onClick={onDelete} size="large">
+                  <ActionDelete />
+                </IconButton>
+              </StyledDeleteIcon>
+            </InputContainer>
+          </StyledDelete>
+        )}
+      </StyledTopRow>
     );
   }
 }

package/src/feedback-config/__tests__/feedback-selector.test.jsx

@@ -4,15 +4,11 @@ import React from 'react';
 import { FeedbackSelector } from '../feedback-selector';
 
 // Mock the editable-html component to avoid window dependencies in tests
-jest.mock('@pie-lib/editable-html', () => {
+jest.mock('@pie-lib/editable-html-tip-tap', () => {
   return {
     __esModule: true,
     default: ({ markup, onChange }) => (
-      <textarea
-        data-testid="editable-html"
-        defaultValue={markup || ''}
-        onChange={(e) => onChange(e.target.value)}
-      />
+      <textarea data-testid="editable-html" defaultValue={markup || ''} onChange={(e) => onChange(e.target.value)} />
     ),
   };
 });
@@ -21,13 +17,7 @@ describe('feedback-selector', () => {
   let onChange;
 
   const renderComponent = (feedback = { type: 'default', default: 'hi' }) => {
-    return render(
-      <FeedbackSelector
-        label={'Feedback'}
-        onChange={onChange}
-        feedback={feedback}
-      />
-    );
+    return render(<FeedbackSelector label={'Feedback'} onChange={onChange} feedback={feedback} />);
   };
 
   beforeEach(() => {

package/src/feedback-config/feedback-selector.jsx

@@ -1,16 +1,15 @@
-//import EditableHTML from '@pie-lib/editable-html';
+//import EditableHTML from '@pie-lib/editable-html-tip-tap';
 import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import Group from './group';
 
-
 // - mathquill error window not defined
 let EditableHtml;
 let StyledEditableHTML;
 if (typeof window !== 'undefined') {
-  EditableHtml = require('@pie-lib/editable-html')['default'];
+  EditableHtml = require('@pie-lib/editable-html-tip-tap')['default'];
   StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
     fontFamily: theme.typography.fontFamily,
   }));
@@ -87,10 +86,7 @@ export class FeedbackSelector extends React.Component {
 
     return (
       <StyledFeedbackSelector>
-        <StyledInputContainer
-          label={label}
-          extraClasses={{ label: { transform: 'translateY(-20%)' } }}
-        >
+        <StyledInputContainer label={label} extraClasses={{ label: { transform: 'translateY(-20%)' } }}>
           <StyledGroup
             keys={feedbackKeys}
             label={label}