@pie-lib/editable-html 13.0.12 → 13.0.14-beta.1

package/lib/shared/alert-dialog.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var StyledDialogTitle = (0, _styles.styled)(_material.DialogTitle)(function () {
+  return {
+    fontSize: 'max(1.25rem, 18px)'
+  };
+});
+var StyledDialogContentText = (0, _styles.styled)(_material.DialogContentText)(function () {
+  return {
+    fontSize: 'max(1rem, 14px)'
+  };
+});
+var AlertDialog = function AlertDialog(_ref) {
+  var text = _ref.text,
+    title = _ref.title,
+    onClose = _ref.onClose,
+    onConfirm = _ref.onConfirm,
+    open = _ref.open,
+    onCloseText = _ref.onCloseText,
+    onConfirmText = _ref.onConfirmText,
+    disableAutoFocus = _ref.disableAutoFocus,
+    disableEnforceFocus = _ref.disableEnforceFocus,
+    disableRestoreFocus = _ref.disableRestoreFocus;
+  return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
+    open: open,
+    disableAutoFocus: disableAutoFocus,
+    disableEnforceFocus: disableEnforceFocus,
+    disableRestoreFocus: disableRestoreFocus,
+    onClose: onClose
+  }, title && /*#__PURE__*/_react["default"].createElement(StyledDialogTitle, null, title), text && /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(StyledDialogContentText, null, text)), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, onClose && /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    onClick: onClose,
+    color: "primary"
+  }, onCloseText), onConfirm && /*#__PURE__*/_react["default"].createElement(_material.Button, {
+    autoFocus: true,
+    onClick: onConfirm,
+    color: "primary"
+  }, onConfirmText)));
+};
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false
+};
+AlertDialog.propTypes = {
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  title: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onConfirm: _propTypes["default"].func,
+  open: _propTypes["default"].bool,
+  onConfirmText: _propTypes["default"].string,
+  onCloseText: _propTypes["default"].string,
+  disableAutoFocus: _propTypes["default"].bool,
+  disableEnforceFocus: _propTypes["default"].bool,
+  disableRestoreFocus: _propTypes["default"].bool
+};
+var _default = exports["default"] = AlertDialog;
+//# sourceMappingURL=alert-dialog.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "13.0.12",
+  "version": "13.0.14-beta.1",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -15,11 +15,11 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.1.3",
-    "@pie-lib/math-input": "^8.1.1",
-    "@pie-lib/math-rendering": "^5.1.0",
-    "@pie-lib/math-toolbar": "^3.0.9",
-    "@pie-lib/render-ui": "^7.0.2",
+    "@pie-lib/drag": "^4.0.2",
+    "@pie-lib/math-input-mathlive": "^1.1.5-beta.1",
+    "@pie-lib/math-rendering": "^5.0.2",
+    "@pie-lib/math-toolbar": "^3.0.11-beta.1",
+    "@pie-lib/render-ui": "^6.1.0",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b422e915ca538d0fdc66e6583140c53a7df8ebfa",
+  "gitHead": "433bcb776c2975739e7417f133d31cd996164116",
   "scripts": {}
 }

package/src/editor.jsx

@@ -1170,7 +1170,7 @@ const StyledSlateEditor = styled('div')(() => ({
     backgroundColor: color.background(),
   },
   '& table:not([border="1"]) tr': {
-    borderTop: `1px solid ${color.tableGridLight()}`,
+    borderTop: '1px solid #dfe2e5',
     // TODO perhaps secondary color for background, for now disable
     // '&:nth-child(2n)': {
     //   backgroundColor: '#f6f8fa'
@@ -1181,7 +1181,7 @@ const StyledSlateEditor = styled('div')(() => ({
     textAlign: 'center',
   },
   '& table:not([border="1"]) td, th': {
-    border: `1px solid ${color.tableGridLight()}`,
+    border: '1px solid #dfe2e5',
   },
   '&.showParagraph': {
     // a div that has a div after it

package/src/plugins/respArea/math-templated/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { mq } from '@pie-lib/math-input';
+import { mq } from '@pie-lib/math-input-mathlive';
 
 const StyledSpanContainer = styled('span')(() => ({
   display: 'inline-flex',

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/src/__tests__/editor-utils.test.js

@@ -1,162 +0,0 @@
-import { buildSizeStyle, valueToSize } from '../editor';
-
-describe('Editor Utilities', () => {
-  describe('valueToSize', () => {
-    it('returns undefined for falsy values', () => {
-      expect(valueToSize(null)).toBeUndefined();
-      expect(valueToSize(undefined)).toBeUndefined();
-      expect(valueToSize('')).toBeUndefined();
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('converts number to px string', () => {
-      expect(valueToSize(100)).toBe('100px');
-      expect(valueToSize(50)).toBe('50px');
-    });
-
-    it('returns undefined for percentage strings', () => {
-      expect(valueToSize('100%')).toBeUndefined();
-      expect(valueToSize('50%')).toBeUndefined();
-    });
-
-    it('preserves valid CSS unit strings', () => {
-      expect(valueToSize('100px')).toBe('100px');
-      expect(valueToSize('10vh')).toBe('10vh');
-      expect(valueToSize('50vw')).toBe('50vw');
-      expect(valueToSize('9ch')).toBe('9ch');
-      expect(valueToSize('2em')).toBe('2em');
-    });
-
-    it('preserves calc() expressions', () => {
-      expect(valueToSize('calc(10em + 42px)')).toBe('calc(10em + 42px)');
-      expect(valueToSize('calc(100% - 20px)')).toBe('calc(100% - 20px)');
-    });
-
-    it('converts numeric strings to px', () => {
-      expect(valueToSize('100')).toBe('100px');
-      expect(valueToSize('50')).toBe('50px');
-    });
-
-    it('handles invalid numeric strings', () => {
-      const result = valueToSize('invalid');
-      expect(isNaN(result)).toBe(true);
-    });
-  });
-
-  describe('buildSizeStyle', () => {
-    it('builds style with numeric width', () => {
-      const result = buildSizeStyle({ width: 100 });
-      expect(result).toEqual({
-        width: '100px',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('returns undefined for percentage values', () => {
-      const result = buildSizeStyle({ height: '100%', width: '100%' });
-      expect(result).toEqual({
-        width: undefined,
-        height: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with numeric height', () => {
-      const result = buildSizeStyle({ height: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: '100px',
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with minHeight', () => {
-      const result = buildSizeStyle({ minHeight: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: '100px',
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with maxHeight', () => {
-      const result = buildSizeStyle({ maxHeight: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: '100px',
-      });
-    });
-
-    it('builds style with calc() expression', () => {
-      const result = buildSizeStyle({ width: 'calc(10em + 42px)' });
-      expect(result).toEqual({
-        width: 'calc(10em + 42px)',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with ch unit', () => {
-      const result = buildSizeStyle({ width: '9ch' });
-      expect(result).toEqual({
-        width: '9ch',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with no size props', () => {
-      const result = buildSizeStyle({});
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with multiple size constraints', () => {
-      const result = buildSizeStyle({
-        width: 500,
-        minWidth: 300,
-        maxWidth: 700,
-        height: 400,
-        minHeight: 200,
-        maxHeight: 600,
-      });
-      expect(result).toEqual({
-        width: '500px',
-        minWidth: '300px',
-        maxWidth: '700px',
-        height: '400px',
-        minHeight: '200px',
-        maxHeight: '600px',
-      });
-    });
-  });
-});

package/src/__tests__/serialization.test.js

@@ -1,290 +0,0 @@
-import { htmlToValue, TEXT_RULE } from '../serialization';
-
-jest.mock('../plugins/math', () => ({
-  serialization: {
-    serialize: jest.fn((o, c) => {
-      return undefined;
-    }),
-    deserialize: jest.fn((el, next) => {
-      return undefined;
-    }),
-  },
-}));
-
-describe('TEXT_RULE', () => {
-  const mkBr = (previousSibling) => {
-    return {
-      remove: jest.fn(),
-      previousSibling,
-      replaceWith: (foo) => {
-        previousSibling.textContent = previousSibling.textContent.replace(/(<br>)|(<\/br>)/g, foo);
-      },
-      normalize: jest.fn().mockReturnThis(),
-      tagName: 'br',
-    };
-  };
-
-  const mkTextNode = (textContent = '') => ({
-    nodeName: '#text',
-    textContent,
-    normalize: jest.fn().mockReturnThis(),
-  });
-
-  const mkEl = (querySelectorAllResult) => ({
-    querySelectorAll: jest.fn().mockReturnValue(querySelectorAllResult),
-    normalize: jest.fn().mockReturnThis(),
-  });
-
-  describe('deserialize', () => {
-    it('if no previous text node, no error is thrown', () => {
-      const br = mkBr();
-      const el = mkEl([br]);
-      expect(() => TEXT_RULE.deserialize(el)).not.toThrow();
-    });
-  });
-});
-
-describe('htmlToValue', () => {
-  it('converts', () => {
-    const expected = {
-      object: 'value',
-      document: {
-        object: 'document',
-        data: {},
-        nodes: [
-          {
-            object: 'block',
-            type: 'div',
-            isVoid: false,
-            data: {
-              attributes: {},
-            },
-            nodes: [
-              {
-                object: 'block',
-                type: 'paragraph',
-                isVoid: false,
-                data: {
-                  attributes: {},
-                },
-                nodes: [
-                  {
-                    object: 'text',
-                    leaves: [
-                      {
-                        object: 'leaf',
-                        text: 'foo',
-                        marks: [],
-                      },
-                    ],
-                  },
-                  {
-                    object: 'inline',
-                    type: 'image',
-                    isVoid: true,
-                    data: {
-                      src: 'blah.jpg',
-                      width: null,
-                      height: null,
-                      margin: '',
-                      justifyContent: '',
-                      alignment: null,
-                      alt: null,
-                    },
-                    nodes: [
-                      {
-                        object: 'text',
-                        leaves: [
-                          {
-                            object: 'leaf',
-                            text: '',
-                            marks: [],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                  {
-                    object: 'text',
-                    leaves: [
-                      {
-                        object: 'leaf',
-                        text: 'bar',
-                        marks: [],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    };
-    const html = `<div><p>foo<img src="blah.jpg"/>bar</p></div>`;
-    const v = htmlToValue(html);
-
-    expect(v.toJSON()).toEqual(expected);
-  });
-
-  it('does not break', () => {
-    /*
-     More than 12 iterations of the same kind would previously break the input. Here we have 16 text nodes, and now it works.
-     */
-    const expected = {
-      object: 'value',
-      document: {
-        object: 'document',
-        data: {},
-        nodes: [
-          {
-            object: 'block',
-            type: 'div',
-            isVoid: false,
-            data: { attributes: {} },
-            nodes: [
-              {
-                object: 'text',
-                leaves: [
-                  {
-                    object: 'leaf',
-                    text: 'Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    };
-    const html =
-      '<div>Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em></div>';
-    const v = htmlToValue(html);
-
-    expect(v.toJSON()).toEqual(expected);
-  });
-});

package/src/__tests__/utils.js

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export function classObject() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = value;
-  }
-  return out;
-}
-
-export function mockComponents() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = class extends React.Component {
-      render() {
-        return <div data-mock-component="true">{value}</div>;
-      }
-    };
-  }
-  return out;
-}
-
-export function mockIconButton() {
-  jest.mock('@mui/material/IconButton', () => {
-    return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
-  });
-}
-export function mockMathInput() {
-  jest.mock('@pie-lib/math-input', () => ({
-    addBrackets: jest.fn((s) => s),
-    removeBrackets: jest.fn((s) => s),
-    ...mockComponents('Keypad', 'MathQuillInput', 'EditableMathInput', 'HorizontalKeypad'),
-  }));
-}

package/src/plugins/image/__tests__/component.test.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Block, Data } from 'slate';
-import { Component } from '../component';
-
-describe('Image Component', () => {
-  const createImageNode = (dataProps = {}) => {
-    return Block.fromJSON({
-      type: 'image',
-      data: Data.create({
-        width: 50,
-        height: 50,
-        src: 'test-image.jpg',
-        ...dataProps,
-      }),
-    });
-  };
-
-  const createMockEditor = () => ({
-    value: {},
-    change: jest.fn(),
-  });
-
-  const defaultClasses = {
-    active: 'active',
-    loading: 'loading',
-    pendingDelete: 'pendingDelete',
-  };
-
-  const defaultProps = {
-    node: createImageNode(),
-    editor: createMockEditor(),
-    classes: defaultClasses,
-    onDelete: jest.fn(),
-  };
-
-  it('renders correctly with default props', () => {
-    const { container } = render(<Component {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders image with correct dimensions', () => {
-    const { container } = render(<Component {...defaultProps} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-  });
-
-  it('renders with custom width and height', () => {
-    const node = createImageNode({ width: 100, height: 200 });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-  });
-
-  it('renders with loading class when loading', () => {
-    const node = createImageNode({ loading: true });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders with active class when active', () => {
-    const node = createImageNode({ active: true });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('handles image with source', () => {
-    const node = createImageNode({ src: 'test-image.jpg' });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    const img = container.querySelector('img');
-    expect(img).toHaveAttribute('src', 'test-image.jpg');
-  });
-});