@modusoperandi/licit 0.14.18 → 1.0.1

package/ui/mathquill-editor/MathQuillEditor.js.flow

@@ -0,0 +1,159 @@
+// @flow
+
+import './czi-mathquill-editor.css';
+import * as MathQuillEditorSymbols from './MathQuillEditorSymbols.js';
+import MathQuillEditorSymbolsPanel from './MathQuillEditorSymbolsPanel.js';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import canUseCSSFont from './../canUseCSSFont.js';
+import cx from 'classnames';
+
+// [FS] IRAD-1061 2020-09-19
+// Now loaded locally, so that it work in closed network as well.
+import type { MathQuillEditorSymbol } from './MathQuillEditorSymbols.js';
+import { MathQuill } from './mathquill-import-kludge.js';
+
+const CSS_CDN_URL =
+  '//cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css';
+const CSS_FONT = 'Symbola';
+
+const MQ = MathQuill.getInterface(2);
+
+(async function () {
+  const fontSupported = await canUseCSSFont(CSS_FONT);
+  if (!fontSupported) {
+    console.info('Add CSS from ', CSS_CDN_URL);
+    // [FS] IRAD-1061 2020-09-19
+    // Now loaded locally, so that it work in closed network as well.
+    //injectStyleSheet(CSS_CDN_URL);
+  }
+  // injectStyleSheet(CSS_CDN_URL);
+})();
+
+class MathQuillElement extends React.Component<any, any> {
+  shouldComponentUpdate(): boolean {
+    return false;
+  }
+
+  render(): React.Element<any> {
+    return (
+      <div
+        className="czi-mathquill-editor-element"
+        dangerouslySetInnerHTML={{ __html: this.props.value }}
+      />
+    );
+  }
+}
+
+class MathQuillEditor extends React.PureComponent<any, any> {
+  props: {
+    value: string,
+    onChange?: ?(latex: string) => void,
+  };
+
+  // MathJax apparently fire 4 edit events on startup.
+  _element = null;
+  _ignoreEditEvents = 4;
+  _mathField = null;
+  _latex = '';
+
+  render(): React.Element<any> {
+    const { value } = this.props;
+    const panels = [
+      MathQuillEditorSymbols.OPERATORS,
+      MathQuillEditorSymbols.STRUCTURE,
+      MathQuillEditorSymbols.SYMBOLS,
+      MathQuillEditorSymbols.TRIG,
+    ].map(this._renderPanel);
+
+    const empty = !value;
+    const className = cx('czi-mathquill-editor', { empty });
+    return (
+      <div className={className}>
+        <div className="czi-mathquill-editor-main">
+          <MathQuillElement ref={this._onElementRef} />
+        </div>
+        <div className="czi-mathquill-editor-side">{panels}</div>
+      </div>
+    );
+  }
+
+  componentDidUpdate(): void {
+    const mathField = this._mathField;
+    if (this._latex !== this.props.value && mathField) {
+      mathField.latex(this.props.value || ' ');
+    }
+  }
+
+  componentDidMount(): void {
+    const config = {
+      autoCommands: 'pi theta sqrt sum',
+      autoOperatorNames: 'sin cos',
+      restrictMismatchedBrackets: true,
+      handlers: {
+        edit: this._onEdit,
+      },
+    };
+
+    const mathField = MQ.MathField(this._element, config);
+    this._mathField = mathField;
+
+    // TODO: Remove this if MathQuill supports `\displaystyle`.
+    const rawLatex = (this.props.value || '').replace(/\\displaystyle/g, '');
+
+    mathField.latex(rawLatex || ' ');
+    mathField.focus();
+    if (rawLatex && !mathField.latex()) {
+      console.error('unable to process latex', rawLatex);
+    }
+  }
+
+  _renderPanel = (
+    symbols: { title: string, symbols: Array<MathQuillEditorSymbol> },
+    ii: number
+  ): React.Element<any> => {
+    return (
+      <MathQuillEditorSymbolsPanel
+        key={`s${ii}`}
+        onSelect={this._onSymbolSelect}
+        symbols={symbols}
+      />
+    );
+  };
+
+  _onSymbolSelect = (symbol: MathQuillEditorSymbol): void => {
+    const { latex, cmd } = symbol;
+    const mathField = this._mathField;
+    if (!mathField || !cmd || !latex) {
+      return;
+    }
+    if (cmd === 'write') {
+      mathField.write(latex);
+    } else if (cmd === 'cmd') {
+      mathField.cmd(latex);
+    }
+    mathField.focus();
+  };
+
+  _onEdit = (mathField: any): void => {
+    if (this._ignoreEditEvents > 0) {
+      this._ignoreEditEvents -= 1;
+      return;
+    }
+
+    const { onChange } = this.props;
+    const latex = mathField.latex();
+    this._latex = latex;
+    onChange && onChange(latex);
+  };
+
+  _onElementRef = (ref: any): void => {
+    if (ref) {
+      this._element = ReactDOM.findDOMNode(ref);
+    } else {
+      this._element = null;
+    }
+  };
+}
+
+export default MathQuillEditor;

package/ui/mathquill-editor/MathQuillEditorSymbols.js

@@ -0,0 +1,416 @@
+var bpfrpt_proptype_MathQuillEditorSymbol = {
+  "label": PropTypes.string.isRequired,
+  "latex": PropTypes.string.isRequired,
+  "description": PropTypes.string.isRequired,
+  "cmd": PropTypes.string.isRequired
+};
+var bpfrpt_proptype_SymbolDefination = {
+  // The label shown at the command button.
+  "label": PropTypes.string.isRequired,
+  // The latex to use
+  "latex": PropTypes.string.isRequired,
+  // The mathquill command to perform.
+  // http://docs.mathquill.com/en/latest/Api_Methods/#writelatex_string
+  // "write": Write the given LaTeX at the current cursor position. If the
+  //   cursor does not have focus, writes to last position the cursor occupied
+  //   in the editable field.
+  // "cmd": Enter a LaTeX command at the current cursor position or with the
+  //   current selection. If the cursor does not have focus, it writes it to
+  //   last position the cursor occupied in the editable field.
+  "cmd": PropTypes.oneOf(["cmd", "write"]).isRequired,
+  // the description of the command.
+  "description": PropTypes.string.isRequired
+};
+// It's hard to find a full list of latex symbols that we could use.
+// Here's are some references that might be helpful.
+// https://github.com/mathquill/mathquill/blob/23a0e88c80c79514ffc30ead490bd880306bce2a/src/commands/math/basicSymbols.js
+// http://math.chapman.edu/~jipsen/mathquill/test/MathQuillsymbolsMathJax.html
+// https://inspera.atlassian.net/wiki/spaces/KB/pages/62062830/MathQuill+symbols
+// https://www.rapidtables.com/math/symbols/Basic_Math_Symbols.html
+// https://www.math.uci.edu/~xiangwen/pdf/LaTeX-Math-Symbols.pdf
+
+export var ABSOLUTE = {
+  label: '|x|',
+  latex: '|',
+  description: 'Absolute Value',
+  cmd: 'cmd'
+};
+export var ANGLE = {
+  label: '\\angle',
+  latex: '\\angle',
+  description: 'Angle',
+  cmd: 'write'
+};
+export var APPROX = {
+  label: '\\approx',
+  latex: '\\approx',
+  description: 'Approximation',
+  cmd: 'cmd'
+};
+export var ARCCOS = {
+  label: '\\arccos',
+  latex: '\\arccos',
+  description: 'Arc Cos',
+  cmd: 'write'
+};
+export var ARCSIN = {
+  label: '\\arcsin',
+  latex: '\\arcsin',
+  description: 'Arc Sin',
+  cmd: 'write'
+};
+export var ARCTAN = {
+  label: '\\arctan',
+  latex: '\\arctan',
+  description: 'Arc Tan',
+  cmd: 'write'
+};
+export var ARROWLL = {
+  label: '\\Longleftarrow',
+  latex: '\\Longleftarrow',
+  description: 'Long Left Arrow',
+  cmd: 'write'
+};
+export var ARROWRL = {
+  label: '\\Longrightarrow',
+  latex: '\\Longrightarrow',
+  description: 'Long Right Arrow',
+  cmd: 'write'
+};
+export var ARROWLLR = {
+  label: '\\Longleftrightarrow',
+  latex: '\\Longleftrightarrow',
+  description: 'Long Left Right Arrow',
+  cmd: 'write'
+};
+export var BRACKETS = {
+  label: '[x]',
+  latex: '[',
+  description: 'Brackets',
+  cmd: 'cmd'
+};
+export var CENT = {
+  label: '¢',
+  latex: '¢',
+  description: 'Cent',
+  cmd: 'write'
+};
+export var COS = {
+  label: '\\cos',
+  latex: '\\cos',
+  description: 'Cos',
+  cmd: 'write'
+};
+export var CONG = {
+  label: '\\cong',
+  latex: '\\cong',
+  description: 'Congruent To',
+  cmd: 'write'
+};
+export var CTIMES = {
+  label: '\\otimes',
+  latex: '\\otimes',
+  description: 'Tensor Product',
+  cmd: 'write'
+};
+export var DEGREES = {
+  label: '\\deg',
+  latex: '\\deg',
+  description: 'Degrees',
+  cmd: 'write'
+};
+export var DIVIDE = {
+  label: "\xF7",
+  latex: '\\divide',
+  description: 'Division',
+  cmd: 'cmd'
+};
+export var DOLLAR = {
+  label: '$',
+  latex: '$',
+  description: 'Dollar',
+  cmd: 'write'
+};
+export var DOTM = {
+  label: '\\cdot',
+  latex: '\\cdot',
+  description: 'Dot for Multiplication',
+  cmd: 'write'
+};
+export var EQUAL = {
+  label: '=',
+  latex: '=',
+  description: 'Equal',
+  cmd: 'cmd'
+};
+export var FRAC = {
+  label: '\\frac {x}{y}',
+  latex: '\\frac',
+  description: 'Fraction',
+  cmd: 'cmd'
+};
+export var GT = {
+  label: '>',
+  latex: '>',
+  description: 'Greater Than',
+  cmd: 'cmd'
+};
+export var GTE = {
+  label: '\\ge',
+  latex: '\\ge',
+  description: 'Greater Than or Equal To',
+  cmd: 'cmd'
+};
+export var IMAGINARY = {
+  label: 'i',
+  latex: 'i',
+  description: 'Imaginary Number',
+  cmd: 'write'
+};
+export var INFINITY = {
+  label: '\\infty',
+  latex: '\\infty',
+  description: 'Infinity',
+  cmd: 'write'
+};
+export var INT = {
+  label: '\\int',
+  latex: '\\int',
+  description: 'Integral',
+  cmd: 'cmd'
+};
+export var INTERSECT = {
+  label: '\\cap',
+  latex: '\\cap',
+  description: 'Intersection',
+  cmd: 'write'
+};
+export var INTXY = {
+  label: '\\int_{x}^{y}',
+  latex: '\\int_{x}^{y}',
+  description: 'Integral',
+  cmd: 'write'
+};
+export var LOG_E = {
+  label: '\\log',
+  latex: '\\log',
+  description: 'Log',
+  cmd: 'cmd'
+};
+export var LT = {
+  label: '<',
+  latex: '<',
+  description: 'Less Than',
+  cmd: 'cmd'
+};
+export var LTE = {
+  label: '\\le',
+  latex: 'le',
+  description: 'Less Than or Equal To',
+  cmd: 'cmd'
+};
+export var MINUS = {
+  label: '-',
+  latex: '-',
+  description: 'Subtraction',
+  cmd: 'cmd'
+};
+export var NEQ = {
+  label: '\\neq',
+  latex: '\\neq',
+  description: 'Not Equal',
+  cmd: 'write'
+};
+export var OVERLINE = {
+  label: "\\overline\u3000",
+  latex: '\\overline',
+  description: 'Overline',
+  cmd: 'cmd'
+};
+export var PARENS = {
+  label: '(x)',
+  latex: '(',
+  description: 'Parentheses',
+  cmd: 'cmd'
+};
+export var PERP = {
+  label: '\\perp',
+  latex: '\\perp',
+  description: 'Perpendicular Lines',
+  cmd: 'write'
+};
+export var PHI = {
+  label: '\\phi',
+  latex: '\\phi',
+  description: 'Phi',
+  cmd: 'write'
+};
+export var PI = {
+  label: '\\pi',
+  latex: '\\pi',
+  description: 'Pi',
+  cmd: 'write'
+};
+export var PLUS = {
+  label: '+',
+  latex: '+',
+  description: 'Addition',
+  cmd: 'cmd'
+};
+export var PM = {
+  label: '\\pm',
+  latex: '\\pm',
+  description: 'Plus-Minus',
+  cmd: 'cmd'
+};
+export var POWER = {
+  label: 'x^{y}',
+  latex: '^',
+  description: 'Power',
+  cmd: 'cmd'
+};
+export var SIMEQ = {
+  label: '\\simeq',
+  latex: '\\simeq',
+  description: 'Approximately Equal',
+  cmd: 'write'
+};
+export var SIM = {
+  label: '\\sim',
+  latex: '\\sim',
+  description: 'Similarity',
+  cmd: 'write'
+};
+export var SIN = {
+  label: '\\sin',
+  latex: '\\sin',
+  description: 'Sin',
+  cmd: 'write'
+};
+export var SMALLE = {
+  label: "\u212F",
+  latex: "\u212F",
+  description: 'Script Small E',
+  cmd: 'write'
+};
+export var SQR = {
+  label: 'x^{2}',
+  latex: '^{2}',
+  description: 'Square',
+  cmd: 'write'
+};
+export var SQRT2 = {
+  label: '\\sqrt[x]{y}',
+  latex: '\\sqrt[x]{y}',
+  description: 'Square Root Alt',
+  cmd: 'write'
+};
+export var SQRT = {
+  label: '\\sqrt x',
+  latex: '\\sqrt',
+  description: 'Square Root',
+  cmd: 'cmd'
+};
+export var SUBSCRIPT = {
+  label: 'x_{2}',
+  latex: '_{2}',
+  description: 'Subscript',
+  cmd: 'write'
+};
+export var SUBSET = {
+  label: '\\sub',
+  latex: '\\sub',
+  description: 'Subset',
+  cmd: 'write'
+};
+export var SUBSETEQ = {
+  label: '\\sube',
+  latex: '\\sube',
+  description: 'Subset or Equal',
+  cmd: 'write'
+};
+export var SUM = {
+  label: '\\sum',
+  latex: '\\sum',
+  description: 'Summation',
+  cmd: 'cmd'
+};
+export var SUPERSET = {
+  label: '\\supset',
+  latex: '\\supset',
+  description: 'Superset',
+  cmd: 'write'
+};
+export var SUPERSETEQ = {
+  label: '\\supe',
+  latex: '\\supe',
+  description: 'Superset or Equal',
+  cmd: 'write'
+};
+export var TAN = {
+  label: '\\tan',
+  latex: '\\tan',
+  description: 'Tan',
+  cmd: 'write'
+};
+export var THETA = {
+  label: '\\theta',
+  latex: '\\theta',
+  description: 'Theta',
+  cmd: 'write'
+};
+export var TIMES = {
+  label: '\\times',
+  latex: '\\times',
+  description: 'Multiplication',
+  cmd: 'cmd'
+};
+export var TRIANGLE = {
+  label: '\\bigtriangleup',
+  latex: '\\bigtriangleup',
+  description: 'Triangle',
+  cmd: 'write'
+};
+export var UNDERLINE = {
+  label: "\\underline\u3000",
+  latex: "\\underline",
+  description: 'Underline',
+  cmd: 'cmd'
+};
+export var UNION = {
+  label: '\\cup',
+  latex: '\\cup',
+  description: 'Union',
+  cmd: 'write'
+};
+export var VDASH = {
+  label: '\\vdash',
+  latex: '\\vdash',
+  description: 'Vertical and Dash Line',
+  cmd: 'write'
+};
+export var VERT = {
+  label: '\\vert',
+  latex: '\\vert',
+  description: 'Vertical Line',
+  cmd: 'write'
+};
+export var OPERATORS = {
+  title: 'Operators',
+  symbols: [PLUS, MINUS, TIMES, DOTM, DIVIDE, EQUAL, APPROX, SIM, SIMEQ, CONG, NEQ, PM, LT, GT, LTE, GTE, UNION, INTERSECT, SUBSET, SUBSETEQ, SUPERSET, SUPERSETEQ, VERT, CTIMES]
+};
+export var STRUCTURE = {
+  title: 'Structure',
+  symbols: [SUM, FRAC, PARENS, BRACKETS, SQR, SUBSCRIPT, ABSOLUTE, INTXY, OVERLINE, UNDERLINE, POWER, INT, SQRT, SQRT2, LOG_E]
+};
+export var SYMBOLS = {
+  title: 'Symbols',
+  symbols: [SMALLE, ANGLE, PI, IMAGINARY, DEGREES, THETA, PHI, TRIANGLE, INFINITY, DOLLAR, CENT, VDASH, PERP, ARROWLL, ARROWRL, ARROWLLR]
+};
+export var TRIG = {
+  title: 'Trigonometry',
+  symbols: [SIN, COS, TAN, ARCSIN, ARCCOS, ARCTAN]
+};
+import PropTypes from "prop-types";
+export { bpfrpt_proptype_MathQuillEditorSymbol };
+export { bpfrpt_proptype_SymbolDefination };

package/ui/mathquill-editor/MathQuillEditorSymbolsPanel.js

@@ -0,0 +1,69 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import renderLaTeXAsHTML from '../renderLaTeXAsHTML.js';
+import './czi-mathquill-editor-symbols-panel.css';
+import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import * as React from 'react';
+var MathQuillEditorSymbolsPanel = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(MathQuillEditorSymbolsPanel, _React$PureComponent);
+  function MathQuillEditorSymbolsPanel() {
+    var _this;
+    _classCallCheck(this, MathQuillEditorSymbolsPanel);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, MathQuillEditorSymbolsPanel, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_renderButton", function (symbol) {
+      var label = symbol.label,
+        latex = symbol.latex,
+        description = symbol.description;
+      var html = renderLaTeXAsHTML(label);
+      var icon = /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: html
+        }
+      });
+      return /*#__PURE__*/React.createElement(CustomButton, {
+        className: "czi-mathquill-editor-symbols-panel-button",
+        icon: icon,
+        key: label + latex,
+        onClick: _this.props.onSelect,
+        title: description,
+        value: symbol
+      });
+    });
+    return _this;
+  }
+  _createClass(MathQuillEditorSymbolsPanel, [{
+    key: "render",
+    value: function render() {
+      var _this$props$symbols = this.props.symbols,
+        title = _this$props$symbols.title,
+        symbols = _this$props$symbols.symbols;
+      var buttons = symbols.map(this._renderButton);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "czi-mathquill-editor-symbols-panel"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "czi-mathquill-editor-symbols-panel-title"
+      }, title), /*#__PURE__*/React.createElement("div", {
+        className: "czi-mathquill-editor-symbols-panel-body"
+      }, buttons));
+    }
+  }]);
+  return MathQuillEditorSymbolsPanel;
+}(React.PureComponent);
+export default MathQuillEditorSymbolsPanel;
+import { bpfrpt_proptype_MathQuillEditorSymbol } from "./MathQuillEditorSymbols.js";

package/ui/mathquill-editor/MathQuillEditorSymbolsPanel.js.flow

@@ -0,0 +1,50 @@
+// @flow
+
+import renderLaTeXAsHTML from '../renderLaTeXAsHTML.js';
+import './czi-mathquill-editor-symbols-panel.css';
+import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import * as React from 'react';
+
+import type {
+  MathQuillEditorSymbol
+} from './MathQuillEditorSymbols.js';
+
+class MathQuillEditorSymbolsPanel extends React.PureComponent<any, any> {
+  props: {
+    onSelect: (symbol: MathQuillEditorSymbol) => void,
+    symbols: {
+      title: string,
+      symbols: Array<MathQuillEditorSymbol>,
+    },
+    title: string,
+  };
+
+  render(): React.Element<any> {
+    const { title, symbols } = this.props.symbols;
+    const buttons = symbols.map(this._renderButton);
+    return (
+      <div className="czi-mathquill-editor-symbols-panel">
+        <div className="czi-mathquill-editor-symbols-panel-title">{title}</div>
+        <div className="czi-mathquill-editor-symbols-panel-body">{buttons}</div>
+      </div>
+    );
+  }
+
+  _renderButton = (symbol: MathQuillEditorSymbol): React.Element<any> => {
+    const { label, latex, description } = symbol;
+    const html = renderLaTeXAsHTML(label);
+    const icon = <span dangerouslySetInnerHTML={{ __html: html }} />;
+    return (
+      <CustomButton
+        className="czi-mathquill-editor-symbols-panel-button"
+        icon={icon}
+        key={label + latex}
+        onClick={this.props.onSelect}
+        title={description}
+        value={symbol}
+      />
+    );
+  };
+}
+
+export default MathQuillEditorSymbolsPanel;