@pie-lib/mask-markup 3.0.4-next.31 → 3.0.4-next.32

package/lib/with-mask.js

@@ -1,97 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withMask = exports.buildLayoutFromMarkup = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _mask = _interopRequireDefault(require("./mask"));
-var _componentize2 = _interopRequireDefault(require("./componentize"));
-var _serialization = require("./serialization");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var buildLayoutFromMarkup = exports.buildLayoutFromMarkup = function buildLayoutFromMarkup(markup, type) {
-  var _componentize = (0, _componentize2["default"])(markup, type),
-    processed = _componentize.markup;
-  var value = (0, _serialization.deserialize)(processed);
-  return value.document;
-};
-var withMask = exports.withMask = function withMask(type, renderChildren) {
-  var _WithMask;
-  return _WithMask = /*#__PURE__*/function (_React$Component) {
-    function WithMask(props) {
-      var _this;
-      (0, _classCallCheck2["default"])(this, WithMask);
-      _this = _callSuper(this, WithMask, [props]);
-      _this.containerRef = /*#__PURE__*/_react["default"].createRef();
-      return _this;
-    }
-    (0, _inherits2["default"])(WithMask, _React$Component);
-    return (0, _createClass2["default"])(WithMask, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        if (this.props.markup !== prevProps.markup) {
-          var domNode = this.containerRef.current;
-          var mathElements = domNode && domNode.querySelectorAll('[data-latex][data-math-handled="true"]');
-
-          // Clean up for fresh MathJax processing
-          (mathElements || []).forEach(function (el) {
-            // Remove the MathJax container to allow for clean updates
-            var mjxContainer = el.querySelector('mjx-container');
-            if (mjxContainer) {
-              el.removeChild(mjxContainer);
-            }
-
-            // Update the innerHTML to match the raw LaTeX data, ensuring it is reprocessed correctly
-            var latexCode = el.getAttribute('data-raw');
-            el.innerHTML = latexCode;
-
-            // Remove the attribute to signal that MathJax should reprocess this element
-            el.removeAttribute('data-math-handled');
-          });
-        }
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          markup = _this$props.markup,
-          layout = _this$props.layout,
-          value = _this$props.value,
-          onChange = _this$props.onChange,
-          elementType = _this$props.elementType;
-        var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
-        return /*#__PURE__*/_react["default"].createElement(_mask["default"], {
-          containerRef: this.containerRef,
-          elementType: elementType,
-          layout: maskLayout,
-          value: value,
-          onChange: onChange,
-          renderChildren: renderChildren(this.props)
-        });
-      }
-    }]);
-  }(_react["default"].Component), (0, _defineProperty2["default"])(_WithMask, "propTypes", {
-    /**
-     * At the start we'll probably work with markup
-     */
-    markup: _propTypes["default"].string,
-    /**
-     * 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`.
-     */
-    layout: _propTypes["default"].object,
-    value: _propTypes["default"].object,
-    onChange: _propTypes["default"].func,
-    customMarkMarkupComponent: _propTypes["default"].func,
-    elementType: _propTypes["default"].string
-  }), _WithMask;
-};
-//# sourceMappingURL=with-mask.js.map

package/lib/with-mask.js.map

@@ -1 +0,0 @@
-{"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/src/__tests__/drag-in-the-blank.test.js

@@ -1,111 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,381 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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',
-          }),
-        ],
-      }),
-    );
-  });
-});