@pie-lib/math-input 0.1.0 → 0.1.1-next.0

package/src/keys/trigonometry.ts

@@ -1,25 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/keys/trigonometry.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import { mkSet } from './utils';
-
-const set = mkSet('trigonometry');
-
-export const sin = set({ name: 'sine', label: 'sin', command: '\\sin', latex: '\\sin' });
-
-export const cos = set({ name: 'cosine', label: 'cos', command: '\\cos', latex: '\\cos' });
-
-export const tan = set({ name: 'tanget', label: 'tan', command: '\\tan', latex: '\\tan' });
-
-export const sec = set({ name: 'secant', label: 'sec', command: '\\sec', latex: '\\sec' });
-
-export const csc = set({ name: 'cosecant', label: 'csc', command: '\\csc', latex: '\\csc' });
-
-export const cot = set({ name: 'cotangent', label: 'cot', command: '\\cot', latex: '\\cot' });

package/src/keys/utils.ts

@@ -1,76 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/keys/utils.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import { flatten, times } from 'lodash-es';
-
-export const mkSet = (category) => (o) => ({ ...o, category });
-
-export const toArray = (o) => Object.keys(o).map((k) => o[k]);
-
-export const toKey = (category) => (v) => {
-  if (typeof v === 'string') {
-    return {
-      name: v,
-      label: v,
-      category,
-      write: v,
-    };
-  } else {
-    return {
-      ...v,
-      category,
-    };
-  }
-};
-
-export const transformToKeySetStructure = (data = []) => {
-  const structure = [];
-
-  times(5, () => structure.push([]));
-
-  let ln = data.length;
-  let i = 0;
-  let j = 0;
-
-  while (j < ln) {
-    structure[i++].push(data[j++]);
-
-    if (i === 5) {
-      i = 0;
-    }
-  }
-
-  return structure;
-};
-
-const latexAndNameDontExist = (base) => (k) => {
-  const flattened = flatten(base);
-  const latexExists = flattened.some((b) => b.latex === k.latex);
-  const nameExists = flattened.some((b) => b.name === k.name);
-
-  return !latexExists && !nameExists;
-};
-
-export const extendKeySet = (base = [], keySetData = []) => {
-  keySetData = keySetData.filter(latexAndNameDontExist(base));
-
-  const final = [];
-
-  times(5 - base.length, () => base.push([]));
-  times(5, () => final.push([]));
-
-  const extra = transformToKeySetStructure(keySetData);
-
-  for (let i = 0; i < 5; i++) {
-    final[i] = [...base[i], ...extra[i]];
-  }
-
-  return final;
-};

package/src/keys/vars.ts

@@ -1,29 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/keys/vars.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import { mkSet } from './utils';
-
-const set = mkSet('vars');
-
-export const x = set({
-  name: 'X',
-  latex: 'x',
-  write: 'x',
-});
-export const y = set({
-  name: 'Y',
-  latex: 'y',
-  write: 'y',
-});
-export const theta = set({
-  name: 'Theta',
-  latex: '\\theta',
-  write: '\\theta',
-});

package/src/math-input.tsx

@@ -1,129 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/math-input.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import * as mq from './mq';
-import { baseSet } from './keys';
-import KeyPad from './keypad';
-import debug from 'debug';
-
-const log = debug('pie-lib:math-input');
-
-const grey = 'rgba(0, 0, 0, 0.23)';
-
-const MathInputContainer: any = styled('div')(({ theme, focused }) => ({
-  borderRadius: '4px',
-  border: `solid 1px ${focused ? theme.palette.primary.main : grey}`,
-  marginTop: theme.spacing(1),
-  marginBottom: theme.spacing(1),
-  transition: 'border 200ms linear',
-}));
-
-const PadContainer: any = styled('div')({
-  width: '100%',
-  display: 'flex',
-});
-
-const StyledMqInput: any = styled(mq.Input)(({ theme }) => ({
-  width: '100%',
-  border: `solid 0px ${theme.palette.primary.light}`,
-  transition: 'border 200ms linear',
-  padding: theme.spacing(1),
-  '&.mq-focused': {
-    outline: 'none',
-    boxShadow: 'none',
-    border: `solid 0px ${theme.palette.primary.dark}`,
-  },
-}));
-
-export class MathInput extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    keyset: PropTypes.array,
-    displayMode: PropTypes.oneOf(['block', 'block-on-focus']),
-    latex: PropTypes.string,
-    onChange: PropTypes.func,
-  };
-
-  static defaultProps = {
-    keyset: [],
-    displayMode: 'block',
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      focused: false,
-    };
-  }
-
-  keypadPress: any = (key) => {
-    log('[keypadPress] key:', key);
-
-    if (!this.input) {
-      return;
-    }
-
-    if (key.latex && !key.command) {
-      this.input.write(key.latex);
-    } else if (key.write) {
-      this.input.write(key.write);
-    } else if (key.command) {
-      this.input.command(key.command);
-    } else if (key.keystroke) {
-      this.input.keystroke(key.keystroke);
-    }
-  };
-
-  inputFocus: any = () => {
-    this.setState({ focused: true });
-  };
-
-  inputBlur: any = () => {
-    this.setState({ focused: false });
-  };
-
-  changeLatex: any = (l) => {
-    const { onChange } = this.props;
-
-    if (onChange && l !== this.props.latex) {
-      log('[changeLatex]', l, this.props.latex);
-      onChange(l);
-    }
-  };
-
-  render() {
-    const { className, keyset, latex } = this.props;
-    const { focused } = this.state;
-
-    const showKeypad = true; // TODO: add support for different displayModes - displayMode === 'block' || focused;
-
-    return (
-      <MathInputContainer className={className} focused={focused}>
-        <StyledMqInput
-          innerRef={(r) => (this.input = r)}
-          onFocus={this.inputFocus}
-          onBlur={this.inputBlur}
-          latex={latex}
-          onChange={this.changeLatex}
-        />
-        {showKeypad && (
-          <PadContainer>
-            <KeyPad baseSet={baseSet} additionalKeys={keyset} onPress={this.keypadPress} />
-          </PadContainer>
-        )}
-      </MathInputContainer>
-    );
-  }
-}
-
-export default MathInput;

package/src/mq/common-mq-styles.ts

@@ -1,115 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/mq/common-mq-styles.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-export const commonMqFontStyles = {
-  fontFamily: 'MJXZERO, MJXTEX !important',
-  '-webkit-font-smoothing': 'antialiased !important',
-
-  '& .mq-math-mode > span > var': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode span var': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode .mq-nonSymbola': {
-    fontFamily: 'MJXZERO, MJXTEX-I !important',
-  },
-  '& .mq-math-mode > span > var.mq-operator-name': {
-    fontFamily: 'MJXZERO, MJXTEX !important',
-  },
-};
-
-export const longdivStyles = {
-  '& .mq-longdiv-inner': {
-    marginTop: '-1px',
-    marginLeft: '5px !important;',
-
-    '& > .mq-empty': {
-      padding: '0 !important',
-      marginLeft: '0px !important',
-      marginTop: '2px',
-    },
-  },
-
-  '& .mq-math-mode .mq-longdiv': {
-    display: 'inline-flex !important',
-  },
-};
-
-export const supsubStyles = {
-  '& .mq-math-mode sup.mq-nthroot': {
-    fontSize: '70% !important',
-    verticalAlign: '0.5em !important',
-    paddingRight: '0.15em',
-  },
-  '& .mq-math-mode .mq-supsub': {
-    fontSize: '70.7% !important',
-  },
-  '& .mq-supsub ': {
-    fontSize: '70.7%',
-  },
-  '& .mq-math-mode .mq-supsub.mq-sup-only': {
-    verticalAlign: '-0.1em !important',
-
-    '& .mq-sup': {
-      marginBottom: '0px !important',
-    },
-  },
-  /* But when the base is a fraction, move it higher */
-  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
-    verticalAlign: '0.4em !important',
-  },
-
-  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
-    verticalAlign: '0.4em !important',
-  },
-};
-
-export const commonMqKeyboardStyles = {
-  '& *': {
-    ...commonMqFontStyles,
-    ...longdivStyles,
-    '& .mq-math-mode .mq-sqrt-prefix': {
-      top: '0 !important',
-    },
-
-    '& .mq-math-mode .mq-empty': {
-      padding: '9px 1px !important',
-    },
-
-    '& .mq-math-mode .mq-supsub': {
-      fontSize: '70.7% !important',
-    },
-
-    '& .mq-math-mode .mq-sqrt-stem': {
-      marginTop: '-5px',
-      paddingTop: '4px',
-    },
-
-    '& .mq-math-mode .mq-paren': {
-      verticalAlign: 'middle !important',
-    },
-
-    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
-      padding: '0 !important',
-    },
-
-    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
-      padding: '0 !important',
-    },
-  },
-};
-
-export default {
-  commonMqFontStyles,
-  longdivStyles,
-  supsubStyles,
-  commonMqKeyboardStyles,
-};

package/src/mq/custom-elements.tsx

@@ -1,21 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/mq/custom-elements.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-const registerLineBreak = function(MQ) {
-  MQ.registerEmbed('newLine', () => {
-    return {
-      htmlString: '<div class="newLine"></div>',
-      text: () => 'testText',
-      latex: () => '\\embed{newLine}[]',
-    };
-  });
-};
-
-export { registerLineBreak };

package/src/mq/index.ts

@@ -1,15 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/mq/index.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import Input from './input';
-import Static from './static';
-import CommonMqStyles from './common-mq-styles';
-
-export { Input, Static, CommonMqStyles };

package/src/mq/input.tsx

@@ -1,172 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-lib/packages/math-input/src/mq/input.jsx
- * @auto-generated
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import debug from 'debug';
-import { registerLineBreak } from './custom-elements';
-import MathQuill from '@pie-framework/mathquill';
-
-let MQ;
-if (typeof window !== 'undefined') {
-  MQ = MathQuill.getInterface(2);
-
-  if (MQ && MQ.registerEmbed) {
-    registerLineBreak(MQ);
-  }
-}
-
-const log = debug('math-input:mq:input');
-
-const StyledSpan: any = styled('span')({
-  // No specific styles needed, but component is available for future styling
-});
-
-/**
- * Wrapper for MathQuill MQ.MathField.
- */
-export class Input extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    onChange: PropTypes.func,
-    latex: PropTypes.string,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-  };
-
-  componentDidMount() {
-    if (!MQ) {
-      throw new Error('MQ is not defined - but component has mounted?');
-    }
-
-    this.mathField = MQ.MathField(this.input, {
-      handlers: {
-        edit: this.onInputEdit.bind(this),
-      },
-    });
-
-    this.updateLatex();
-  }
-
-  componentDidUpdate() {
-    this.updateLatex();
-  }
-
-  updateLatex() {
-    if (!this.mathField) {
-      return;
-    }
-
-    const { latex } = this.props;
-
-    if (latex !== undefined && latex !== null) {
-      this.mathField.latex(latex);
-    }
-  }
-
-  clear() {
-    this.mathField.latex('');
-
-    return '';
-  }
-
-  blur() {
-    log('blur mathfield');
-    this.mathField.blur();
-  }
-
-  focus() {
-    log('focus mathfield...');
-    this.mathField.focus();
-  }
-
-  command(v) {
-    log('command: ', v);
-    if (Array.isArray(v)) {
-      v.forEach((vv) => {
-        this.mathField.cmd(vv);
-      });
-    } else {
-      this.mathField.cmd(v);
-    }
-
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  keystroke(v) {
-    this.mathField.keystroke(v);
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  write(v) {
-    log('write: ', v);
-    this.mathField.write(v);
-    this.mathField.focus();
-
-    return this.mathField.latex();
-  }
-
-  onInputEdit: any = () => {
-    log('[onInputEdit] ...');
-    const { onChange } = this.props;
-
-    if (!this.mathField) {
-      return;
-    }
-
-    if (onChange) {
-      onChange(this.mathField.latex());
-    }
-  };
-
-  refresh: any = () => {
-    this.blur();
-    this.focus();
-  };
-
-  onKeyPress: any = (event) => {
-    if (event.charCode === 13) {
-      event.preventDefault();
-    }
-  };
-
-  onClick: any = (event) => {
-    const { onClick } = this.props;
-
-    this.refresh();
-    onClick && onClick(event);
-  };
-
-  shouldComponentUpdate(nextProps) {
-    log('next: ', nextProps.latex);
-    log('current: ', this.mathField.latex());
-
-    return nextProps.latex !== this.mathField.latex();
-  }
-
-  render() {
-    const { onFocus, onBlur, className } = this.props;
-
-    return (
-      <StyledSpan
-        className={className}
-        onKeyDown={this.onKeyPress}
-        onClick={this.onClick}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        ref={(r) => (this.input = r)}
-      />
-    );
-  }
-}
-
-export default Input;