@pie-lib/mask-markup 3.1.3 → 4.0.0-next.37

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

@@ -1,212 +0,0 @@
-import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import Choice from '../choice';
-import { choice } from '../../__tests__/utils';
-import Choices from '../index';
-
-// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
-const collectEmotionRules = () => {
-  const rules = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    try {
-      for (const rule of Array.from(sheet.cssRules)) {
-        rules.push(rule.cssText);
-      }
-    } catch (e) {
-      /* inaccessible stylesheet */
-    }
-  }
-  return rules;
-};
-
-// 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('click-to-place into the pool', () => {
-      it('places the selection into the pool when clicking the pool background', () => {
-        const onPlacementClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        const { container } = render(
-          <Choices {...defaultProps} selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onPlacementClick).toHaveBeenCalledWith(undefined);
-      });
-
-      it('does nothing when clicking the pool background with nothing selected', () => {
-        const onPlacementClick = jest.fn();
-        const { container } = render(<Choices {...defaultProps} onPlacementClick={onPlacementClick} />);
-
-        fireEvent.click(container.firstChild);
-
-        expect(onPlacementClick).not.toHaveBeenCalled();
-      });
-
-      it('clicking a specific choice selects it, not the pool background handler', () => {
-        const onPlacementClick = jest.fn();
-        const onSelectClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        render(
-          <Choices
-            {...defaultProps}
-            selectedItem={selectedItem}
-            onSelectClick={onSelectClick}
-            onPlacementClick={onPlacementClick}
-          />,
-        );
-
-        fireEvent.click(screen.getByText('Jumped'));
-
-        expect(onSelectClick).toHaveBeenCalled();
-        expect(onPlacementClick).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  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();
-      });
-    });
-
-    describe('fraction math styling', () => {
-      it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
-        render(<Choice {...defaultProps} />);
-        // The new rule targets mjx-mn digits that sit next to an mjx-mfrac.
-        const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
-        expect(rule).toBeDefined();
-        expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
-        expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
-        expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-      });
-
-      it('keeps the existing mjx-frac 120% rule', () => {
-        render(<Choice {...defaultProps} />);
-        const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
-        expect(rule).toBeDefined();
-        expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
-      });
-    });
-
-    describe('click-to-select', () => {
-      it('selects this choice on click when nothing else is selected', () => {
-        const onSelectClick = jest.fn();
-        const { container } = render(<Choice {...defaultProps} selectedItem={null} onSelectClick={onSelectClick} />);
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('toggles off (calls onSelectClick again) when clicking the already-selected choice', () => {
-        const onSelectClick = jest.fn();
-        const selectedItem = { choice: defaultProps.choice, instanceId: defaultProps.instanceId, fromChoice: true, type: 'MaskBlank' };
-        const { container } = render(
-          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('selects this choice even while a different item is already selected (pool items are never placement targets)', () => {
-        const onSelectClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        const { container } = render(
-          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('does nothing on click when disabled', () => {
-        const onSelectClick = jest.fn();
-        const { container } = render(
-          <Choice {...defaultProps} disabled={true} selectedItem={null} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).not.toHaveBeenCalled();
-      });
-    });
-  });
-});

package/src/choices/choice.jsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-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';
-
-const StyledChoice = styled('span')(({ theme, disabled, selected }) => ({
-  border: `solid 0px ${theme.palette.primary.main}`,
-  margin: theme.spacing(0.5),
-  transform: 'translate(0, 0)',
-  display: 'inline-flex',
-  opacity: selected ? 0.7 : 1,
-  ...(disabled && {}),
-}));
-
-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',
-
-  '&.Mui-disabled': {
-    opacity: 1,
-  },
-}));
-
-const StyledChipLabel = styled('span')(() => ({
-  whiteSpace: 'normal',
-  '& img': {
-    display: 'block',
-    padding: '2px 0',
-  },
-  '& mjx-frac': {
-    fontSize: '120% !important',
-  },
-  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
-    fontSize: '120% !important',
-  },
-}));
-
-export default function Choice({ choice, disabled, instanceId, selectedItem, onSelectClick }) {
-  const rootRef = useRef(null);
-
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: `choice-${choice.id}`,
-    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
-    disabled,
-  });
-
-  useEffect(() => {
-    renderMath(rootRef.current);
-  }, [choice.value]);
-
-  const isSelected = !!selectedItem && selectedItem.fromChoice === true && selectedItem.choice.id === choice.id;
-
-  const handleClick = (e) => {
-    if (disabled) return;
-
-    e.stopPropagation();
-    onSelectClick?.({ choice, instanceId, fromChoice: true, type: DRAG_TYPE });
-  };
-
-  return (
-    <StyledChoice
-      ref={setNodeRef}
-      style={
-        isDragging
-          ? {
-              width: rootRef.current?.offsetWidth || 90, // min-width of chip is 90px, so if we don't have the width, we can use 90px as a fallback
-              height: rootRef.current?.offsetHeight || 32, // min-height of chip is 32px, so if we don't have the height, we can use 32px as a fallback
-            }
-          : {}
-      }
-      disabled={disabled}
-      selected={isSelected}
-      onClick={handleClick}
-      {...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]),
-  selectedItem: PropTypes.object,
-  onSelectClick: PropTypes.func,
-};

package/src/choices/index.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { findKey } from 'lodash-es';
-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 })),
-    value: PropTypes.object,
-    choicePosition: PropTypes.string.isRequired,
-    instanceId: PropTypes.string, // Added for drag isolation
-    selectedItem: PropTypes.object,
-    onSelectClick: PropTypes.func,
-    onPlacementClick: PropTypes.func,
-  };
-
-  getStyleForWrapper = () => {
-    const { choicePosition } = this.props;
-
-    switch (choicePosition) {
-      case 'above':
-        return {
-          margin: '0 0 40px 0',
-        };
-
-      case 'below':
-        return {
-          margin: '40px 0 0 0',
-        };
-
-      case 'right':
-        return {
-          margin: '0 0 0 40px',
-        };
-
-      default:
-        return {
-          margin: '0 40px 0 0',
-        };
-    }
-  };
-
-  handlePoolClick = () => {
-    const { disabled, selectedItem, onPlacementClick } = this.props;
-
-    if (disabled) return;
-
-    if (selectedItem) {
-      // `undefined` targetId means "the choice board" — drag-in-the-blank.jsx's
-      // commitPlacement routes it to removing the item from wherever it currently is.
-      onPlacementClick?.(undefined);
-    }
-
-    // Pool background clicked with nothing selected: nothing to place.
-  };
-
-  render() {
-    const { disabled, duplicates, choices, value, instanceId, selectedItem, onSelectClick } = this.props;
-    const filteredChoices = choices.filter((c) => {
-      if (duplicates === true) {
-        return true;
-      }
-      const foundChoice = findKey(value, (v) => v === c.id);
-      return foundChoice === undefined;
-    });
-    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
-
-    return (
-      <div style={elementStyle} onClick={this.handlePoolClick}>
-        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
-          {filteredChoices.map((c, index) => (
-            <Choice
-              key={`${c.value}-${index}`}
-              disabled={disabled}
-              choice={c}
-              instanceId={instanceId}
-              selectedItem={selectedItem}
-              onSelectClick={onSelectClick}
-            />
-          ))}
-        </DragDroppablePlaceholder>
-      </div>
-    );
-  }
-}

package/src/componentize.js

@@ -1,13 +0,0 @@
-const REGEX = /\{\{(\d+)\}\}/g;
-
-export default (s, t) => {
-  if (!s) {
-    return { markup: '' };
-  }
-
-  const markup = s.replace(REGEX, (match, g) => {
-    return `<span data-component="${t}" data-id="${g}"></span>`;
-  });
-
-  return { markup };
-};