@pie-lib/math-toolbar 3.0.10 → 3.0.11-beta.10

package/src/__tests__/math-preview.test.js

@@ -2,6 +2,45 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import MathPreview from '../math-preview';
 
+/** Every rule emotion has injected so far, as CSSStyleRule objects. */
+const injectedRules = () =>
+  Array.from(document.querySelectorAll('style[data-emotion]'))
+    .flatMap((tag) => (tag.sheet ? Array.from(tag.sheet.cssRules) : []))
+    .filter((rule) => rule.selectorText);
+
+/**
+ * The `.ML__latex` rule that actually applies to `element`.
+ *
+ * Matching with `element.matches` rather than string comparison means the
+ * assertions cover the selector too: a rule written as `& > .ML__latex` would
+ * not match the nested markup MathLive emits, and these tests would fail.
+ */
+const mathLiveRuleFor = (element) =>
+  injectedRules().find((rule) => rule.selectorText.includes('.ML__latex') && element.matches(rule.selectorText));
+
+/**
+ * Stand in for MathLive's `convertLatexToMarkup` output, which is
+ * `<span class="ML__latex">...</span>` nested inside `mf.Static`'s holder span.
+ * MathLive does not load under jsdom, so the markup is added by hand.
+ */
+const addStaticMarkup = (container, depth = 1) => {
+  let parent = container.firstChild;
+
+  for (let i = 1; i < depth; i += 1) {
+    const wrapper = document.createElement('span');
+
+    parent.appendChild(wrapper);
+    parent = wrapper;
+  }
+
+  const markup = document.createElement('span');
+
+  markup.className = 'ML__latex';
+  parent.appendChild(markup);
+
+  return markup;
+};
+
 describe('MathPreview', () => {
   const defaultProps = {
     latex: 'sqrt(5)',
@@ -15,4 +54,30 @@ describe('MathPreview', () => {
     const { container } = render(<MathPreview {...defaultProps} />);
     expect(container.firstChild).toBeInTheDocument();
   });
+
+  describe('MathLive static markup', () => {
+    it('is outlined and padded when not selected', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
+      const rule = mathLiveRuleFor(addStaticMarkup(container));
+
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 1px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('5px');
+    });
+
+    it('drops its outline and padding when selected, so only the container border shows', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected />);
+      const rule = mathLiveRuleFor(addStaticMarkup(container));
+
+      expect(rule).toBeDefined();
+      expect(rule.style.getPropertyValue('border')).toEqual('solid 0px lightgrey');
+      expect(rule.style.getPropertyValue('padding')).toEqual('0px');
+    });
+
+    it('is styled at any depth below the container, not just as a direct child', () => {
+      const { container } = render(<MathPreview {...defaultProps} isSelected={false} />);
+
+      expect(mathLiveRuleFor(addStaticMarkup(container, 3))).toBeDefined();
+    });
+  });
 });

package/src/done-button.jsx

@@ -4,20 +4,16 @@ import IconButton from '@mui/material/IconButton';
 import Check from '@mui/icons-material/Check';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
 
-const StyledIconButton = styled(IconButton)(({ hideBackground }) => ({
+const StyledIconButton = styled(IconButton)(({ theme, hideBackground }) => ({
   verticalAlign: 'top',
   width: '28px',
   height: '28px',
   color: '#00bb00',
   ...(hideBackground && {
-    // `--pie-white` inverts with the scheme where `common.white` did not, so the
-    // button keeps reading as raised against the toolbar instead of staying a
-    // white chip on a dark surface.
-    backgroundColor: color.white(),
+    backgroundColor: theme.palette.common.white,
     '&:hover': {
-      backgroundColor: color.backgroundDark(),
+      backgroundColor: theme.palette.grey[200],
     },
   }),
   '& .MuiIconButton-label': {

package/src/editor-and-pad.jsx

@@ -9,7 +9,7 @@ import { isEqual } from 'lodash-es';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 
-import { HorizontalKeypad, mq, updateSpans } from '@pie-lib/math-input';
+import { HorizontalKeypad, mq, updateSpans } from '@pie-lib/math-input-mathlive';
 import { color } from '@pie-lib/render-ui';
 import { markFractionBaseSuperscripts } from './utils';
 
@@ -340,8 +340,11 @@ export class EditorAndPad extends React.Component {
 
     if (this.input && regexMatch && regexMatch?.length) {
       try {
-        this.input.mathField.__controller.cursor.insLeftOf(this.input.mathField.__controller.cursor.parent[-1].parent);
-        this.input.mathField.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 8 }));
+        // Undo the empty fraction the editor just created after a digit.
+        // MathQuill needed cursor surgery via `__controller`; MathLive has no
+        // such internals, so use the public delete command. `keystroke` accepts
+        // the MathQuill name and maps it to the engine's selector.
+        this.input.keystroke('Backspace');
       } catch (e) {
         // eslint-disable-next-line no-console
         console.error(e.toString());
@@ -353,10 +356,13 @@ export class EditorAndPad extends React.Component {
     onChange(latex);
   };
 
-  /** Only render if the mathquill instance's latex is different
+  /** Only render if the editor's latex is different
    * or the keypad state changed from one state to the other (shown / hidden) */
   shouldComponentUpdate(nextProps, nextState) {
-    const inputIsDifferent = this.input.mathField.latex() !== nextProps.latex;
+    // `this.input` is set via a ref, and the underlying math engine loads
+    // asynchronously, so neither is guaranteed to exist on early renders.
+    // Treat "not ready" as different, so the first real render is not skipped.
+    const inputIsDifferent = !this.input || this.input.latex() !== nextProps.latex;
     log('[shouldComponentUpdate] ', 'inputIsDifferent: ', inputIsDifferent);
 
     if (!isEqual(this.props.error, nextProps.error)) {

package/src/math-preview.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 import debug from 'debug';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { mq } from '@pie-lib/math-input';
+import { mq } from '@pie-lib/math-input-mathlive';
 import { markFractionBaseSuperscripts } from './utils';
 
 const { commonMqFontStyles, longdivStyles, supsubStyles } = mq.CommonMqStyles;
 
 const log = debug('@pie-lib:math-toolbar:math-preview');
 
-const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
+const MathPreviewContainer = styled('div')(({ theme, isSelected, outlineOnWrapper }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   position: 'relative',
@@ -19,6 +19,16 @@ const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
   '& > .mq-math-mode': {
     border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
   },
+  '& .ML__latex': {
+    border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
+    padding: isSelected ? '0px' : '5px',
+  },
+  ...(!outlineOnWrapper && {
+    '&:not(:has(.ML__latex))': {
+      border: isSelected ? 'solid 0px lightgrey' : 'solid 1px lightgrey',
+      padding: isSelected ? '0px' : '5px',
+    },
+  }),
   '& > .mq-focused': {
     outline: 'none',
     boxShadow: 'none',
@@ -114,9 +124,10 @@ const MathPreviewContainer = styled('div')(({ theme, isSelected }) => ({
   '& span[data-prime="true"]': {
     fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
   },
-  ...(isSelected && {
-    border: `solid 1px ${theme.palette.primary.main}`,
-  }),
+  ...(isSelected &&
+    !outlineOnWrapper && {
+      border: `solid 1px ${theme.palette.primary.main}`,
+    }),
 }));
 
 const InsideOverlay = styled('span')({
@@ -131,6 +142,7 @@ export class RawMathPreview extends React.Component {
   static propTypes = {
     latex: PropTypes.string,
     isSelected: PropTypes.bool,
+    outlineOnWrapper: PropTypes.bool,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
   };
@@ -147,10 +159,10 @@ export class RawMathPreview extends React.Component {
   }
 
   render() {
-    const { isSelected, onFocus, onBlur, latex } = this.props;
+    const { isSelected, outlineOnWrapper, onFocus, onBlur, latex } = this.props;
     log('[render] latex: ', latex);
     return (
-      <MathPreviewContainer isSelected={isSelected}>
+      <MathPreviewContainer isSelected={isSelected} outlineOnWrapper={outlineOnWrapper}>
         {' '}
         <InsideOverlay />
         <mq.Static latex={latex} onFocus={onFocus} onBlur={onBlur} />

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.