@pie-lib/mask-markup 3.0.4-next.33 → 3.0.4-next.34

package/src/__tests__/mask.test.js

@@ -0,0 +1,381 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import Mask from '../mask';
+
+describe('Mask', () => {
+  // Don't mock renderChildren - let the component render naturally
+  const onChange = jest.fn();
+  const defaultProps = {
+    onChange,
+    layout: {
+      nodes: [
+        {
+          object: 'text',
+          leaves: [
+            {
+              text: 'Foo',
+            },
+          ],
+        },
+      ],
+    },
+    value: {},
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Mask {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders text content', () => {
+      render(<Mask {...defaultProps} />);
+      expect(screen.getByText('Foo')).toBeInTheDocument();
+    });
+
+    it('renders a paragraph element', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              {
+                type: 'p',
+                nodes: [
+                  {
+                    object: 'text',
+                    leaves: [
+                      {
+                        text: 'Foo',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(screen.getByText('Foo')).toBeInTheDocument();
+    });
+
+    it('renders nested div and paragraph', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  attributes: {},
+                },
+                nodes: [
+                  {
+                    type: 'p',
+                    data: {
+                      attributes: {},
+                    },
+                    nodes: [
+                      {
+                        object: 'text',
+                        leaves: [
+                          {
+                            text: 'Foo',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      expect(container.querySelector('div')).toBeInTheDocument();
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(screen.getByText('Foo')).toBeInTheDocument();
+    });
+
+    it('renders text with italic marks', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              {
+                leaves: [{ text: 'Foo ' }],
+                object: 'text',
+              },
+              {
+                leaves: [
+                  {
+                    marks: [
+                      {
+                        data: undefined,
+                        type: 'italic',
+                      },
+                    ],
+                    text: 'x',
+                  },
+                ],
+                object: 'text',
+              },
+              {
+                leaves: [{ text: ' bar' }],
+                object: 'text',
+              },
+            ],
+            object: 'block',
+            type: 'div',
+          }}
+        />,
+      );
+
+      // Text "Foo " is split with spaces, use regex
+      expect(screen.getByText(/Foo/)).toBeInTheDocument();
+      expect(screen.getByText('x')).toBeInTheDocument();
+      expect(screen.getByText(/bar/)).toBeInTheDocument();
+      // Check for italic/em element
+      const em = container.querySelector('em, i');
+      expect(em).toBeInTheDocument();
+      expect(em.textContent).toBe('x');
+    });
+
+    it('renders tbody without extra space', () => {
+      const da = () => ({ data: { attributes: {} } });
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          layout={{
+            nodes: [
+              {
+                type: 'table',
+                ...da(),
+                nodes: [
+                  {
+                    type: 'tbody',
+                    ...da(),
+                    nodes: [
+                      {
+                        object: 'text',
+                        leaves: [{ text: ' ' }],
+                      },
+                      { type: 'tr', ...da(), nodes: [] },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      expect(container.querySelector('table')).toBeInTheDocument();
+      expect(container.querySelector('tbody')).toBeInTheDocument();
+      expect(container.querySelector('tr')).toBeInTheDocument();
+    });
+  });
+
+  describe('spacer rendering for DnD components', () => {
+    it('adds spacers before and after DnD blank components', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid="blank-component">Blank</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  dataset: { component: 'blank' },
+                  attributes: {},
+                },
+                nodes: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Check that renderChildren was called and spacers are present
+      // Count all children in the container - should be: spacer + blank + spacer = 3 elements
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(3);
+      expect(screen.getByTestId('blank-component')).toBeInTheDocument();
+    });
+
+    it('does not add spacers for non-DnD components', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        return <span data-testid="regular-component">Regular</span>;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  attributes: {},
+                },
+                nodes: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should not have spacers - only the regular component
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(screen.getByTestId('regular-component')).toBeInTheDocument();
+    });
+
+    it('adds spacers regardless of parent node type', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid="blank-in-td">Blank in TD</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          elementType="drag-in-the-blank"
+          layout={{
+            nodes: [
+              {
+                type: 'table',
+                data: { attributes: {} },
+                nodes: [
+                  {
+                    type: 'tbody',
+                    data: { attributes: {} },
+                    nodes: [
+                      {
+                        type: 'tr',
+                        data: { attributes: {} },
+                        nodes: [
+                          {
+                            type: 'td',
+                            data: { attributes: {} },
+                            nodes: [
+                              {
+                                type: 'div',
+                                data: {
+                                  dataset: { component: 'blank' },
+                                  attributes: {},
+                                },
+                                nodes: [],
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should have spacers even inside td element
+      const td = container.querySelector('td');
+      expect(td.childNodes.length).toBe(3); // spacer + blank + spacer
+      expect(screen.getByTestId('blank-in-td')).toBeInTheDocument();
+    });
+
+    it('does not add spacers for text content', () => {
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          elementType="drag-in-the-blank"
+          layout={{
+            nodes: [
+              {
+                object: 'text',
+                leaves: [
+                  {
+                    text: 'Some text',
+                  },
+                ],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should not have spacers for plain text - just text node
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(1);
+      expect(maskContainer.childNodes[0].nodeType).toBe(Node.TEXT_NODE);
+      expect(screen.getByText('Some text')).toBeInTheDocument();
+    });
+
+    it('handles multiple DnD components with correct spacer placement', () => {
+      const mockRenderChildren = jest.fn((n) => {
+        if (n.data?.dataset?.component === 'blank') {
+          return <span data-testid={`blank-${n.data.testId}`}>Blank</span>;
+        }
+        return null;
+      });
+
+      const { container } = render(
+        <Mask
+          {...defaultProps}
+          renderChildren={mockRenderChildren}
+          layout={{
+            nodes: [
+              {
+                type: 'div',
+                data: {
+                  dataset: { component: 'blank' },
+                  attributes: {},
+                  testId: '1',
+                },
+                nodes: [],
+              },
+              {
+                type: 'div',
+                data: {
+                  dataset: { component: 'blank' },
+                  attributes: {},
+                  testId: '2',
+                },
+                nodes: [],
+              },
+            ],
+          }}
+        />,
+      );
+
+      // Should have 2 spacers per component = 4 spacers + 2 blanks = 6 total children
+      const maskContainer = container.firstChild;
+      expect(maskContainer.childNodes.length).toBe(6);
+      expect(screen.getByTestId('blank-1')).toBeInTheDocument();
+      expect(screen.getByTestId('blank-2')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,97 @@
+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 }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
+  margin: theme.spacing(0.5),
+  transform: 'translate(0, 0)',
+  display: 'inline-flex',
+  ...(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',
+  },
+}));
+
+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,
+  });
+
+  useEffect(() => {
+    renderMath(rootRef.current);
+  }, [choice.value]);
+
+  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]),
+};