@pie-lib/mask-markup 2.0.0-beta.1 → 2.0.0-next.0

package/src/__tests__/serialization.test.js

@@ -0,0 +1,54 @@
+import { deserialize } from '../serialization';
+
+describe('serialization', () => {
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi -->`);
+    expect(out.document.nodes[0]).toEqual(expect.objectContaining({ type: 'span' }));
+  });
+
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi --><div>foo</div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+            leaves: [{ text: 'foo' }],
+          }),
+        ],
+      }),
+    );
+  });
+
+  it('deserializes an em', () => {
+    const out = deserialize(`<!-- hi --><div> <em>x</em> </div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+          }),
+          expect.objectContaining({
+            leaves: [
+              {
+                marks: [
+                  {
+                    data: undefined,
+                    type: 'italic',
+                  },
+                ],
+                text: 'x',
+              },
+            ],
+            object: 'text',
+          }),
+          expect.objectContaining({
+            object: 'text',
+          }),
+        ],
+      }),
+    );
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1 @@
+export const choice = (v, id) => ({ label: v, value: v, id });

package/src/__tests__/with-mask.test.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { withMask } from '../with-mask';
+
+describe('WithMask', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    markup: '<p>Foo bar {{0}} over the moon;</p>',
+    value: {
+      0: 'blank',
+    },
+    onChange,
+  };
+
+  const Masked = withMask('foo', (props) => (node) => {
+    const dataset = node.data ? node.data.dataset || {} : {};
+
+    if (dataset.component === 'foo') {
+      return <input type="text" data-testid="masked-input" defaultValue="Foo" onChange={props.onChange} />;
+    }
+  });
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Masked {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders markup content', () => {
+      render(<Masked {...defaultProps} />);
+      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
+    });
+
+    it('renders paragraph content', () => {
+      const { container } = render(<Masked {...defaultProps} />);
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(container.firstChild).toBeInTheDocument();
+      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
+    });
+  });
+
+  describe('onChange handler', () => {
+    it('calls onChange when value changes', async () => {
+      const user = userEvent.setup();
+      render(<Masked {...defaultProps} />);
+
+      const input = screen.queryByTestId('masked-input');
+      if (input) {
+        await user.clear(input);
+        await user.type(input, 'ceva');
+
+        expect(onChange).toHaveBeenCalled();
+      }
+    });
+
+    it('passes event to onChange', async () => {
+      const user = userEvent.setup();
+      render(<Masked {...defaultProps} />);
+
+      const input = screen.queryByTestId('masked-input');
+      if (input) {
+        await user.clear(input);
+        await user.type(input, 'test');
+
+        expect(onChange).toHaveBeenCalled();
+        const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+        expect(lastCall).toHaveProperty('target');
+      }
+    });
+  });
+});

package/src/choices/__tests__/index.test.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import Choice from '../choice';
+import { choice } from '../../__tests__/utils';
+import Choices from '../index';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+describe('index', () => {
+  describe('Choices', () => {
+    const defaultProps = {
+      disabled: false,
+      choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
+      choicePosition: 'below',
+      instanceId: 'test-instance',
+    };
+
+    it('renders correctly with default props', () => {
+      const { container } = render(<Choices {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(screen.getByText('Jumped')).toBeInTheDocument();
+      expect(screen.getByText('Laughed')).toBeInTheDocument();
+      expect(screen.getByText('Spoon')).toBeInTheDocument();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      const { container } = render(<Choices {...defaultProps} disabled={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders without duplicates', () => {
+      const { container } = render(<Choices {...defaultProps} duplicates={undefined} value={{ 0: '0', 1: '1' }} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with duplicates', () => {
+      const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Choice', () => {
+    const defaultProps = {
+      disabled: false,
+      choice: choice('Label', '1'),
+      instanceId: 'test-instance',
+    };
+
+    describe('render', () => {
+      it('renders correctly with default props', () => {
+        const { container } = render(<Choice {...defaultProps} />);
+        expect(container.firstChild).toBeInTheDocument();
+        expect(screen.getByText('Label')).toBeInTheDocument();
+      });
+
+      it('renders correctly with disabled prop as true', () => {
+        const { container } = render(<Choice {...defaultProps} disabled={true} />);
+        expect(container.firstChild).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/choices/choice.jsx

@@ -1,96 +1,97 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { DragSource } from '@pie-lib/drag';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import classnames from 'classnames';
-import ReactDOM from 'react-dom';
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
 import { renderMath } from '@pie-lib/math-rendering';
+import { color } from '@pie-lib/render-ui';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-class BlankContentComp extends React.Component {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    connectDragSource: PropTypes.func
-  };
+const StyledChoice = styled('span')(({ theme, disabled }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
+  margin: theme.spacing(0.5),
+  transform: 'translate(0, 0)',
+  display: 'inline-flex',
+  ...(disabled && {}),
+}));
 
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.white(),
+  border: `1px solid ${color.text()}`,
+  color: color.text(),
+  alignItems: 'center',
+  display: 'inline-flex',
+  height: 'initial',
+  minHeight: '32px',
+  fontSize: 'inherit',
+  whiteSpace: 'pre-wrap',
+  maxWidth: '374px',
+  // Added for touch devices, for image content.
+  // This will prevent the context menu from appearing and not allowing other interactions with the image.
+  // If interactions with the image in the token will be requested we should handle only the context Menu.
+  pointerEvents: 'none',
+  borderRadius: '3px',
+  paddingTop: '12px',
+  paddingBottom: '12px',
 
-  render() {
-    const { connectDragSource, choice, classes, disabled } = this.props;
-
-    return connectDragSource(
-      <span className={classnames(classes.choice, disabled && classes.disabled)}>
-        <Chip
-          ref={ref => {
-            //eslint-disable-next-line
-            this.rootRef = ReactDOM.findDOMNode(ref);
-          }}
-          className={classes.chip}
-          label={
-            <span
-              className={classes.chipLabel}
-              ref={ref => {
-                if (ref) {
-                  ref.innerHTML = choice.value || ' ';
-                }
-              }}
-            >
-              {' '}
-            </span>
-          }
-          variant={disabled ? 'outlined' : undefined}
-        />
-      </span>,
-      {}
-    );
-  }
-}
-
-export const BlankContent = withStyles(theme => ({
-  choice: {
-    border: `solid 0px ${theme.palette.primary.main}`
+  '&.Mui-disabled': {
+    opacity: 1,
   },
-  chip: {
-    alignItems: 'center',
-    display: 'inline-flex',
-    height: 'initial',
-    minHeight: '32px',
-    fontSize: 'inherit',
-    whiteSpace: 'pre-wrap',
-    maxWidth: '374px',
-    margin: '4px'
+}));
+
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
   },
-  chipLabel: {
-    whiteSpace: 'pre-wrap',
-    '& img': {
-      display: 'block',
-      padding: '2px 0'
-    }
+  '& mjx-frac': {
+    fontSize: '120% !important',
   },
-  disabled: {}
-}))(BlankContentComp);
+}));
 
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled;
-  },
-  beginDrag(props) {
-    return {
-      choice: props.choice,
-      instanceId: props.instanceId
-    };
-  }
-};
+export default function Choice({ choice, disabled, instanceId }) {
+  const rootRef = useRef(null);
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
+    disabled,
+  });
 
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-}))(BlankContent);
+  useEffect(() => {
+    renderMath(rootRef.current);
+  }, [choice.value]);
 
-export default DragDropTile;
+  return (
+    <StyledChoice
+      ref={setNodeRef}
+      style={
+        isDragging
+          ? {
+              width: rootRef.current?.offsetWidth,
+              height: rootRef.current?.offsetHeight,
+            }
+          : {}
+      }
+      disabled={disabled}
+      {...listeners}
+      {...attributes}
+    >
+      <StyledChip
+        clickable={false}
+        disabled={disabled}
+        ref={rootRef}
+        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}
+      />
+    </StyledChoice>
+  );
+}
+
+Choice.propTypes = {
+  choice: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/choices/index.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import findKey from 'lodash/findKey';
 import Choice from './choice';
+import { DragDroppablePlaceholder } from '@pie-lib/drag';
 
 export default class Choices extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
     duplicates: PropTypes.bool,
-    choices: PropTypes.arrayOf(
-      PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })
-    ),
+    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
     value: PropTypes.object,
-    choicePosition: PropTypes.string.isRequired
+    choicePosition: PropTypes.string.isRequired,
+    instanceId: PropTypes.string, // Added for drag isolation
   };
 
   getStyleForWrapper = () => {
@@ -20,39 +20,49 @@ export default class Choices extends React.Component {
     switch (choicePosition) {
       case 'above':
         return {
-          margin: '0 0 40px 0'
+          margin: '0 0 40px 0',
         };
+
       case 'below':
         return {
-          margin: '40px 0 0 0'
+          margin: '40px 0 0 0',
         };
+
       case 'right':
         return {
-          margin: '0 0 0 40px'
+          margin: '0 0 0 40px',
         };
+
       default:
         return {
-          margin: '0 40px 0 0'
+          margin: '0 40px 0 0',
         };
     }
   };
 
   render() {
-    const { disabled, duplicates, choices, value } = this.props;
-    const filteredChoices = choices.filter(c => {
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
+    const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
       }
-      const foundChoice = findKey(value, v => v === c.id);
+      const foundChoice = findKey(value, (v) => v === c.id);
       return foundChoice === undefined;
     });
-    const elementStyle = this.getStyleForWrapper();
+    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
 
     return (
       <div style={elementStyle}>
-        {filteredChoices.map((c, index) => (
-          <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />
-        ))}
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
+          {filteredChoices.map((c, index) => (
+            <Choice 
+              key={`${c.value}-${index}`} 
+              disabled={disabled} 
+              choice={c} 
+              instanceId={instanceId}
+            />
+          ))}
+        </DragDroppablePlaceholder>
       </div>
     );
   }

package/src/components/__tests__/blank.test.js

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Blank from '../blank';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    transform: null,
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Translate: {
+      toString: jest.fn(() => 'translate3d(0, 0, 0)'),
+    },
+  },
+}));
+
+describe('Blank', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    choice: { value: 'Cow' },
+    isOver: false,
+    dragItem: {},
+    correct: false,
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('displays the value when provided', () => {
+      render(<Blank {...defaultProps} />);
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Blank {...defaultProps} disabled={true} />);
+      // Check that delete button is not present when disabled
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('renders with dragged item preview', () => {
+      render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} />);
+      // Blank component should render
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('shows hover state when isOver is true', () => {
+      const { container } = render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} isOver={true} />);
+      // Component should have hover styling
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('shows correct state when correct is true', () => {
+      const { container } = render(<Blank {...defaultProps} correct={true} />);
+      // Component should indicate correctness
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('delete functionality', () => {
+    it('does not show delete button when disabled', () => {
+      render(<Blank {...defaultProps} disabled={true} />);
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('does not show delete button when no value is set', () => {
+      render(<Blank {...defaultProps} choice={undefined} />);
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+
+    it('shows delete button when value is present and not disabled', () => {
+      render(<Blank {...defaultProps} />);
+      // If delete button is present, it should be clickable
+      const deleteButton = screen.queryByRole('button');
+      if (deleteButton) {
+        expect(deleteButton).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe('dimensions', () => {
+    it('renders with custom dimensions when provided', () => {
+      const { container } = render(
+        <Blank {...defaultProps} emptyResponseAreaHeight={100} emptyResponseAreaWidth={200} />,
+      );
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+    });
+
+    it('renders with min dimensions by default', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      const element = container.firstChild;
+      expect(element).toBeInTheDocument();
+      // Component should have minimum dimensions applied
+    });
+
+    it('handles non-numeric dimension props gracefully', () => {
+      const { container } = render(
+        <Blank {...defaultProps} emptyResponseAreaHeight="non-numeric" emptyResponseAreaWidth="non-numeric" />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('drag and drop', () => {
+    it('accepts drag item when not disabled', () => {
+      render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
+      expect(screen.getByText('Cow')).toBeInTheDocument();
+    });
+
+    it('shows drag preview when dragging over', () => {
+      const { container } = render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
+      expect(container.firstChild).toBeInTheDocument();
+      // Should show visual feedback for drag over
+    });
+  });
+});