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

package/lib/with-mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_mask","_componentize2","_serialization","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","buildLayoutFromMarkup","markup","type","_componentize","componentize","processed","value","deserialize","exports","withMask","renderChildren","_class","_React$Component","_inherits2","WithMask","_super","_classCallCheck2","_createClass2","key","render","_this$props","props","layout","onChange","maskLayout","createElement","React","Component","_defineProperty2","PropTypes","string","object","func"],"sources":["../src/with-mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n    };\n\n    render() {\n      const { markup, layout, value, onChange } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return <Mask layout={maskLayout} value={value} onChange={onChange} renderChildren={renderChildren(this.props)} />;\n    }\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"with-mask.js","names":["_react","_interopRequireDefault","require","_propTypes","_mask","_componentize2","_serialization","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","buildLayoutFromMarkup","exports","markup","type","_componentize","componentize","processed","value","deserialize","document","withMask","renderChildren","_WithMask","_React$Component","WithMask","props","_this","_classCallCheck2","containerRef","React","createRef","_inherits2","_createClass2","key","componentDidUpdate","prevProps","domNode","current","mathElements","querySelectorAll","forEach","el","mjxContainer","querySelector","removeChild","latexCode","getAttribute","innerHTML","removeAttribute","render","_this$props","layout","onChange","elementType","maskLayout","createElement","Component","_defineProperty2","PropTypes","string","object","func","customMarkMarkupComponent"],"sources":["../src/with-mask.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Mask from './mask';\nimport componentize from './componentize';\nimport { deserialize } from './serialization';\n\nexport const buildLayoutFromMarkup = (markup, type) => {\n  const { markup: processed } = componentize(markup, type);\n  const value = deserialize(processed);\n  return value.document;\n};\n\nexport const withMask = (type, renderChildren) => {\n  return class WithMask extends React.Component {\n    static propTypes = {\n      /**\n       * At the start we'll probably work with markup\n       */\n      markup: PropTypes.string,\n      /**\n       * Once we start authoring, it may make sense for use to us layout, which will be a simple js object that maps to `slate.Value`.\n       */\n      layout: PropTypes.object,\n      value: PropTypes.object,\n      onChange: PropTypes.func,\n      customMarkMarkupComponent: PropTypes.func,\n      elementType: PropTypes.string,\n    };\n\n    constructor(props) {\n      super(props);\n      this.containerRef = React.createRef();\n    }\n\n    componentDidUpdate(prevProps) {\n      if (this.props.markup !== prevProps.markup) {\n        const domNode = this.containerRef.current;\n        const mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled=\"true\"]');\n\n        // Clean up for fresh MathJax processing\n        (mathElements || []).forEach((el) => {\n          // Remove the MathJax container to allow for clean updates\n          const mjxContainer = el.querySelector('mjx-container');\n\n          if (mjxContainer) {\n            el.removeChild(mjxContainer);\n          }\n\n          // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly\n          const latexCode = el.getAttribute('data-raw');\n          el.innerHTML = latexCode;\n\n          // Remove the attribute to signal that MathJax should reprocess this element\n          el.removeAttribute('data-math-handled');\n        });\n      }\n    }\n\n    render() {\n      const { markup, layout, value, onChange, elementType } = this.props;\n\n      const maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);\n      return (\n        <Mask\n          containerRef={this.containerRef}\n          elementType={elementType}\n          layout={maskLayout}\n          value={value}\n          onChange={onChange}\n          renderChildren={renderChildren(this.props)}\n        />\n      );\n    }\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/mask-markup",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-next.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -8,25 +8,36 @@
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@pie-lib/drag": "^2.2.1",
-    "@pie-lib/math-rendering": "^2.5.17",
-    "@pie-lib/render-ui": "^4.14.28",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "2.22.3-next.15",
+    "@pie-lib/editable-html": "11.21.3-next.15",
+    "@pie-lib/math-rendering": "3.22.2-next.16",
+    "@pie-lib/render-ui": "4.35.3-next.15",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
-    "escape-html": "^1.0.3",
-    "immutable": ">=3.8.1",
+    "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
-    "react-dnd-html5-backend": "^14.0.2",
-    "slate": "^0.94.1",
-    "slate-html-serializer": "^0.8.13",
-    "slate-hyperscript": "^0.77.0",
-    "slate-prop-types": "^0.5.44",
-    "slate-react": "^0.97.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "slate": "^0.36.2",
+    "slate-html-serializer": "^0.6.12",
+    "slate-prop-types": "^0.4.38",
+    "slate-react": "^0.14.3",
     "to-style": "^1.3.3"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "gitHead": "e0f8f2250addd014938f4a631ab86cafe16b2730",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./src/index.js",
+      "default": "./lib/index.js"
+    },
+    "./esm": "./esm/index.js"
+  }
 }

package/src/__tests__/drag-in-the-blank.test.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import DragInTheBlank from '../drag-in-the-blank';
+
+const markup = `<div>
+  <img src="https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>`;
+const choice = (v, id) => ({ value: v, id });
+
+// Mock DragProvider and DragDroppablePlaceholder to avoid DndContext requirement
+jest.mock('@pie-lib/drag', () => ({
+  DragProvider: ({ children, onDragStart, onDragEnd }) => {
+    // Simple wrapper that doesn't require DndContext
+    return <div data-testid="drag-provider">{children}</div>;
+  },
+  DragDroppablePlaceholder: ({ children, disabled, instanceId }) => {
+    // Simple wrapper that doesn't require useDroppable
+    return <div data-testid="drag-droppable-placeholder">{children}</div>;
+  },
+}));
+
+// Mock @dnd-kit/core components and hooks used by DragInTheBlank and child components
+jest.mock('@dnd-kit/core', () => ({
+  DragOverlay: ({ children }) => <div data-testid="drag-overlay">{children}</div>,
+  closestCenter: jest.fn(),
+  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('DragInTheBlank', () => {
+  const defaultProps = {
+    disabled: false,
+    feedback: {},
+    markup,
+    choices: [
+      choice('Jumped', '0'),
+      choice('Laughed', '1'),
+      choice('Spoon', '2'),
+      choice('Fork', '3'),
+      choice('Bumped', '4'),
+      choice('Smiled', '5'),
+    ],
+
+    value: {
+      0: undefined,
+    },
+  };
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      const { container } = render(<DragInTheBlank {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+      // Check that markup content is rendered
+      expect(screen.getByText(/Hey Diddle Diddle/)).toBeInTheDocument();
+      expect(screen.getByText(/Hey, diddle, diddle,/)).toBeInTheDocument();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      const { container } = render(<DragInTheBlank {...defaultProps} disabled={true} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders correctly with feedback', () => {
+      const { container } = render(
+        <DragInTheBlank
+          {...defaultProps}
+          feedback={{
+            0: {
+              value: 'Jumped',
+              correct: 'Jumped',
+            },
+            1: {
+              value: 'Laughed',
+              correct: 'Laughed',
+            },
+            2: {
+              value: 'Spoon',
+              correct: 'Spoon',
+            },
+          }}
+        />
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import componentize from '../componentize';
+import { deserialize } from '../serialization';
+
+describe('index', () => {
+  describe('componentize', () => {
+    it('should return an array with the appropriate markup', () => {
+      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');
+
+      expect(dropDownMarkup).toEqual({
+        markup:
+          '<span data-component="dropdown" data-id="0"></span> foo <span data-component="dropdown" data-id="1"></span>',
+      });
+    });
+  });
+
+  describe('serialization', () => {
+    it('should have default node a span', () => {
+      expect(deserialize('something')).toEqual(
+        expect.objectContaining({
+          object: 'value',
+          document: {
+            object: 'document',
+            data: {},
+            nodes: [
+              {
+                object: 'block',
+                data: {},
+                isVoid: false,
+                type: 'span',
+                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+});

package/src/__tests__/mask.test.js

@@ -0,0 +1,187 @@
+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();
+    });
+  });
+});

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();
+      });
+    });
+  });
+});