Merge pull request #2937 from pie-framework/fix/PD-5670

fix(drag-in-the-blank): autofocs for adding choice field, avoid brows…

Author: CarlaCostea

packages/drag-in-the-blank/configure/src/choice.jsx

@@ -8,8 +8,8 @@ import { choiceIsEmpty } from './markupUtils';
 
 const GripIcon = ({ style }) => (
   <span style={style}>
-    <MoreVert style={{ margin: '0 -16px' }}/>
-    <MoreVert/>
+    <MoreVert style={{ margin: '0 -16px' }} />
+    <MoreVert />
   </span>
 );
 
@@ -32,7 +32,11 @@ const StyledChoice = styled('div', {
   cursor: 'grab',
   border: `1px solid ${error ? '#f44336' : '#C0C3CF'}`,
   '& img': {
-    display: 'flex'
+    display: 'flex',
+  },
+  // browser adds extra marrgin for p tags by default
+  '& p': {
+    margin: 0,
   },
   '& mjx-frac': {
     fontSize: '120% !important',
@@ -53,12 +57,7 @@ const StyledDeleteIcon = styled(Delete)(({ theme }) => ({
 
 export const BlankContent = (props) => {
   const { choice, onClick, onRemoveChoice, error, instanceId, disabled } = props;
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    isDragging,
-  } = useDraggable({
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: `choice-${choice.id}-${instanceId || 'default'}`,
     data: {
       type: 'drag-in-the-blank-choice',
@@ -67,7 +66,6 @@ export const BlankContent = (props) => {
       instanceId: instanceId,
     },
     disabled: disabled || choiceIsEmpty(choice),
-
   });
 
   const handleDragStart = (e) => {

packages/drag-in-the-blank/configure/src/choices.jsx

@@ -7,7 +7,7 @@ import { styled } from '@mui/material/styles';
 
 import Choice from './choice';
 import { choiceIsEmpty } from './markupUtils';
-import { renderMath } from "@pie-lib/math-rendering";
+import { renderMath } from '@pie-lib/math-rendering';
 
 const StyledDesign = styled('div')(({ theme }) => ({
   display: 'flex',
@@ -150,9 +150,7 @@ export class Choices extends React.Component {
     } = this.props;
 
     // find the maximum existing id and add 1 to generate the new id so we avoid duplicates
-    const maxId = oldChoices.length > 0
-      ? Math.max(...oldChoices.map(choice => parseInt(choice.id, 10) || 0))
-      : -1;
+    const maxId = oldChoices.length > 0 ? Math.max(...oldChoices.map((choice) => parseInt(choice.id, 10) || 0)) : -1;
     const newId = `${maxId + 1}`;
 
     this.setState(
@@ -243,6 +241,7 @@ export class Choices extends React.Component {
               >
                 <EditableHtml
                   ref={(ref) => (this.focusedNodeRef = ref)}
+                  autoFocus
                   imageSupport={imageSupport}
                   markup={choice.value}
                   pluginProps={pluginProps}