@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -1,321 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { TextArea } from '@instructure/ui-text-area';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Checkbox } from '@instructure/ui-checkbox';
-import { Heading } from '@instructure/ui-heading';
-import { Modal } from '@instructure/ui-modal';
-import { Flex } from '@instructure/ui-flex';
-import { debounce } from '@instructure/debounce';
-import { ConditionalTooltip } from '../../shared/ConditionalTooltip';
-import formatMessage from '../../../../format-message';
-import MemoizedEquationEditorToolbar from '../EquationEditorToolbar';
-import { containsAdvancedSyntax } from './advancedOnlySyntax';
-import * as advancedPreference from './advancedPreference';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-import { css } from 'aphrodite';
-import Mathml, { MathJaxDirective } from '../../../../enhance-user-content/mathml';
-import styles from './styles';
-import RCEGlobals from '../../../RCEGlobals'; // Import the <math-field> container and all
-// the relevant math fonts from mathlive
-
-import '../mathlive';
-import { insertTextIntoLatexTextarea } from './latexTextareaUtil';
-export default class EquationEditorModal extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      advanced: this.props.openAdvanced || !!this.props.originalLatex.advancedOnly,
-      workingFormula: this.props.originalLatex.latex || ''
-    };
-    this.previewElement = /*#__PURE__*/React.createRef();
-    this.advancedEditor = /*#__PURE__*/React.createRef();
-
-    this.executeCommand = (cmd, advancedCmd) => {
-      if (this.state.advanced) {
-        var _this$advancedEditor$;
-
-        const insertionText = advancedCmd || cmd;
-        const textarea = (_this$advancedEditor$ = this.advancedEditor.current) === null || _this$advancedEditor$ === void 0 ? void 0 : _this$advancedEditor$._textarea;
-
-        if (textarea) {
-          insertTextIntoLatexTextarea(textarea, insertionText);
-          this.setState({
-            workingFormula: textarea.value
-          });
-        }
-      } else {
-        this.mathField.insert(cmd, {
-          focus: 'true'
-        });
-      }
-    };
-
-    this.handleModalCancel = () => {
-      this.props.onModalDismiss();
-    };
-
-    this.handleModalDone = () => {
-      const {
-        onModalDismiss,
-        onEquationSubmit
-      } = this.props;
-      const output = this.state.advanced ? this.state.workingFormula : this.mathField.getValue();
-
-      if (output) {
-        onEquationSubmit(output);
-      }
-
-      onModalDismiss();
-    };
-
-    this.renderMathInAdvancedPreview = debounce(() => {
-      if (this.previewElement.current) {
-        this.previewElement.current.innerHTML = String.raw`\(${this.state.workingFormula}\)`;
-        this.mathml.processNewMathInElem(this.previewElement.current);
-      }
-    }, EquationEditorModal.debounceRate, {
-      leading: false,
-      trailing: true
-    });
-
-    this.toggleAdvanced = () => {
-      this.setState(state => {
-        if (state.advanced) {
-          this.mathField.setValue(state.workingFormula || '');
-          return {
-            advanced: false,
-            workingFormula: ''
-          };
-        } else {
-          return {
-            advanced: true,
-            workingFormula: this.mathField.getValue()
-          };
-        }
-      });
-      this.setPreviewElementContent();
-    };
-
-    this.toggleAndUpdatePreference = () => {
-      this.toggleAdvanced();
-      advancedPreference.isSet() ? advancedPreference.remove() : advancedPreference.set();
-    };
-
-    this.registerBasicEditorListener = () => {
-      const basicEditor = document.querySelector('math-field');
-      basicEditor.addEventListener('input', e => {
-        if (this.advancedModeOnly(e.target.value)) {
-          this.toggleAdvanced();
-          this.setState({
-            workingFormula: e.target.value
-          });
-        }
-      });
-    };
-
-    this.handleFieldRef = node => {
-      this.mathField = node;
-    };
-
-    this.renderFooter = () => {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        "data-testid": "equation-editor-modal-cancel",
-        onClick: this.handleModalCancel
-      }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
-        "data-testid": "equation-editor-modal-done",
-        margin: "none none none xx-small",
-        onClick: this.handleModalDone,
-        color: "primary"
-      }, formatMessage('Done')));
-    };
-
-    this.renderToggle = () => {
-      const lockToggle = this.state.advanced && this.advancedModeOnly(this.state.workingFormula);
-      return /*#__PURE__*/React.createElement(ConditionalTooltip, {
-        condition: lockToggle,
-        renderTip: formatMessage('This equation cannot be rendered in Basic View.'),
-        on: ['hover', 'focus']
-      }, /*#__PURE__*/React.createElement(Checkbox, {
-        onChange: this.toggleAndUpdatePreference,
-        checked: this.state.advanced,
-        label: formatMessage('Directly Edit LaTeX'),
-        variant: "toggle",
-        disabled: lockToggle,
-        "data-testid": "advanced-toggle"
-      }));
-    };
-
-    this.render = () => {
-      var _RCEGlobals$getFeatur;
-
-      const {
-        onModalClose
-      } = this.props;
-      return /*#__PURE__*/React.createElement(Modal, {
-        "data-mce-component": true,
-        label: formatMessage('Equation Editor'),
-        mountNode: instuiPopupMountNode,
-        onClose: onModalClose,
-        onDismiss: this.handleModalCancel,
-        open: true,
-        transition: "fade",
-        shouldCloseOnDocumentClick: false
-      }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
-        "data-testid": "equation-editor-modal-close",
-        placement: "end",
-        offset: "medium",
-        color: "primary",
-        onClick: this.handleModalCancel,
-        screenReaderLabel: formatMessage('Close')
-      }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Equation Editor'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
-        className: css(styles.mathfieldContainer)
-      }, /*#__PURE__*/React.createElement(MemoizedEquationEditorToolbar, {
-        executeCommand: this.executeCommand
-      }), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: this.state.advanced ? 'none' : null
-        }
-      }, /*#__PURE__*/React.createElement("math-field", {
-        style: {
-          padding: '0.5em',
-          overflow: 'auto',
-          border: 'solid 1px',
-          borderRadius: '4px'
-        },
-        ref: this.handleFieldRef,
-        "default-mode": "inline-math",
-        "virtual-keyboard-mode": "off",
-        "keypress-sound": "none",
-        "plonk-sound": "none",
-        "math-mode-space": " ",
-        "data-testid": "math-field"
-      })), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: this.state.advanced ? null : 'none'
-        }
-      }, /*#__PURE__*/React.createElement(TextArea, {
-        style: {
-          height: '5.1rem',
-          overflowY: 'auto',
-          lineHeight: '1.7rem'
-        },
-        label: "",
-        value: this.state.workingFormula,
-        onChange: e => this.setState({
-          workingFormula: e.target.value
-        }),
-        ref: this.advancedEditor,
-        "data-testid": "advanced-editor"
-      })), /*#__PURE__*/React.createElement("div", {
-        className: css(styles.latexToggle)
-      }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderToggle()))), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: this.state.advanced ? null : 'none',
-          marginTop: '1em'
-        }
-      }, /*#__PURE__*/React.createElement("span", {
-        "data-testid": "mathml-preview-element",
-        ref: this.previewElement,
-        className: (_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.explicit_latex_typesetting ? MathJaxDirective.Process : null
-      })))), /*#__PURE__*/React.createElement(Modal.Footer, null, this.renderFooter()));
-    };
-
-    this.mathml = new Mathml(RCEGlobals.getFeatures(), RCEGlobals.getConfig());
-  }
-
-  // **************** //
-  // Helper functions //
-  // **************** //
-  insertNewRange() {
-    const {
-      editor,
-      originalLatex
-    } = this.props;
-    const {
-      startContainer,
-      leftIndex,
-      rightIndex
-    } = originalLatex;
-    if (!startContainer) return;
-    const range = document.createRange();
-    range.setStart(startContainer, leftIndex);
-    range.setEnd(startContainer, rightIndex);
-    editor.selection.setRng(range);
-  }
-
-  advancedModeOnly(latex) {
-    const normalizedLatex = latex.replace(/\s+/, '');
-    return containsAdvancedSyntax(normalizedLatex);
-  } // ********* //
-  // Callbacks //
-  // ********* //
-
-
-  setPreviewElementContent() {
-    if (this.state.workingFormula) {
-      this.renderMathInAdvancedPreview();
-    } else {
-      this.previewElement.current.innerHTML = '';
-    }
-  }
-
-  componentDidMount() {
-    this.registerBasicEditorListener();
-    this.setPreviewElementContent();
-    this.stubMacros();
-    if (!this.state.advanced) this.mathField.setValue(this.state.workingFormula);
-    this.insertNewRange();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.state.workingFormula !== prevState.workingFormula) {
-      this.setPreviewElementContent();
-    }
-  }
-
-  stubMacros() {
-    var _this$mathField;
-
-    // Mathlive's macros exist for a different use case;
-    // we don't intend for our users to utilize them.
-    // This effectively disables all of them to prevent
-    // weird behaviors that users don't expect.
-    (_this$mathField = this.mathField) === null || _this$mathField === void 0 ? void 0 : _this$mathField.setOptions({
-      macros: {}
-    });
-  }
-
-}
-EquationEditorModal.debounceRate = 1000;
-EquationEditorModal.propTypes = {
-  editor: PropTypes.object.isRequired,
-  onModalDismiss: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired,
-  onEquationSubmit: PropTypes.func.isRequired,
-  originalLatex: PropTypes.shape({
-    latex: PropTypes.string,
-    advancedOnly: PropTypes.bool,
-    startContainer: PropTypes.element,
-    leftIndex: PropTypes.number,
-    rightIndex: PropTypes.number
-  }).isRequired,
-  openAdvanced: PropTypes.bool.isRequired
-};

package/lib/rce/plugins/instructure_equation/EquationEditorModal/latexTextareaUtil.js

@@ -1,116 +0,0 @@
-/*
- * Copyright (C) 2023 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import { performTextEditActionOnTextarea } from '../../../../util/textarea-editing-util';
-/**
- * Inserts text into a textarea for editing LaTeX, handling selection and focus management.
- *
- * Ultimately, this should be refactored out into a React component.
- *
- * @param textarea
- * @param insertionText
- */
-
-export function insertTextIntoLatexTextarea(textarea, insertionText) {
-  var _textarea$value, _textarea$selectionSt, _textarea$selectionEn;
-
-  const currentText = (_textarea$value = textarea === null || textarea === void 0 ? void 0 : textarea.value) !== null && _textarea$value !== void 0 ? _textarea$value : '';
-  const selStart = (_textarea$selectionSt = textarea === null || textarea === void 0 ? void 0 : textarea.selectionStart) !== null && _textarea$selectionSt !== void 0 ? _textarea$selectionSt : currentText.length;
-  const selEnd = (_textarea$selectionEn = textarea === null || textarea === void 0 ? void 0 : textarea.selectionEnd) !== null && _textarea$selectionEn !== void 0 ? _textarea$selectionEn : selStart;
-  textarea.focus();
-  planInsertTextIntoLatexTextarea({
-    insertionText,
-    currentText,
-    selStart,
-    selEnd
-  }).forEach(action => performTextEditActionOnTextarea(textarea, action));
-}
-export function planInsertTextIntoLatexTextarea(args) {
-  const {
-    insertionText
-  } = args;
-  const {
-    currentText,
-    selStart,
-    selEnd
-  } = args;
-  const selectedText = currentText.substring(selStart, selEnd); // Look for parameters ([] or {}) in the command text, because we'll want to wrap the current selection in the
-  // command in that case
-
-  const singleParamParts = insertionText.match( // Match both [] and {}
-  /^(.*?\{)\s*(}.*)$|^(.*?\[)\s*(].*)$/);
-  const doubleParamParts = insertionText.match( // Match two sets of [] and/or {}
-  /^(?:(.*?\{)\s*(}.*?)|(.*?\[)\s*(].*?))(?:(.*?\{)\s*(}.*?)|(.*?\[)\s*(].*))$/ //   1         2      3         4         5         6      7         8
-  );
-
-  if (doubleParamParts) {
-    var _ref, _m$, _ref2, _m$2, _ref3, _m$3, _ref4, _m$4;
-
-    const m = doubleParamParts;
-    const before = (_ref = (_m$ = m[1]) !== null && _m$ !== void 0 ? _m$ : m[3]) !== null && _ref !== void 0 ? _ref : '';
-    const middle = ((_ref2 = (_m$2 = m[2]) !== null && _m$2 !== void 0 ? _m$2 : m[4]) !== null && _ref2 !== void 0 ? _ref2 : '') + ((_ref3 = (_m$3 = m[5]) !== null && _m$3 !== void 0 ? _m$3 : m[7]) !== null && _ref3 !== void 0 ? _ref3 : '');
-    const after = (_ref4 = (_m$4 = m[6]) !== null && _m$4 !== void 0 ? _m$4 : m[8]) !== null && _ref4 !== void 0 ? _ref4 : '';
-
-    if (selectedText.length) {
-      // When there is a selection with a double-parameter command, the selection should fill the first parameter
-      // and the cursor should be be placed in the second parameter
-      return [{
-        action: 'insert',
-        text: before + selectedText + middle
-      }, {
-        action: 'wrapSelection',
-        before: '',
-        after
-      }];
-    } else {
-      return [{
-        action: 'wrapSelection',
-        before,
-        after: middle + after
-      }];
-    }
-  } else if (singleParamParts) {
-    var _singleParamParts$, _singleParamParts$2;
-
-    const before = (_singleParamParts$ = singleParamParts[1]) !== null && _singleParamParts$ !== void 0 ? _singleParamParts$ : singleParamParts[3];
-    const after = (_singleParamParts$2 = singleParamParts[2]) !== null && _singleParamParts$2 !== void 0 ? _singleParamParts$2 : singleParamParts[4];
-
-    if (selectedText.length) {
-      // When there is a selection and only a single parameter, the selection should be used as the parameter
-      // and the cursor placed at the end of the command
-      return [{
-        action: 'insert',
-        text: before + selectedText + after
-      }];
-    } else {
-      // When there is no selection and any number of parameters, the cursor should be placed within the
-      // first parameter
-      return [{
-        action: 'wrapSelection',
-        before,
-        after
-      }];
-    }
-  } else {
-    // If there aren't parameters, the command should replace the selection, and the cursor should be placed
-    // and the end of the command
-    return [{
-      action: 'insert',
-      text: insertionText
-    }];
-  }
-}

package/lib/rce/plugins/instructure_equation/EquationEditorModal/parseLatex.js

@@ -1,91 +0,0 @@
-/*
- * Copyright (C) 2022 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import { containsAdvancedSyntax } from './advancedOnlySyntax';
-// Used to detect inline latex delimited like: \( ... \) OR $$ ... $$
-const BOUNDARY_REGEX = /\\\((.+?)\\\)|\$\$(.+?)\$\$/g;
-export const selectionIsLatex = selection => {
-  return selection.startsWith('\\(') && selection.endsWith('\\)') || selection.startsWith('$$') && selection.endsWith('$$');
-};
-export const cleanLatex = latex => {
-  const sansDelimiters = latex.substr(2, latex.length - 4);
-  return sansDelimiters.replace(/&nbsp;/g, '').trim();
-};
-export const findLatex = (nodeValue, cursor) => {
-  // The range could still contain more than one formulae, so we need to
-  // isolate them and figure out which one the cursor is within.
-  const latexMatches = nodeValue.match(BOUNDARY_REGEX);
-  if (!latexMatches) return {};
-  let leftIndex;
-  let rightIndex;
-  const foundLatex = latexMatches.find(latex => {
-    leftIndex = nodeValue.indexOf(latex);
-    rightIndex = leftIndex + latex.length;
-    return leftIndex < cursor && cursor < rightIndex && selectionIsLatex(latex);
-  });
-  return foundLatex ? {
-    latex: cleanLatex(foundLatex),
-    leftIndex,
-    rightIndex
-  } : {};
-};
-export const parseLatex = editor => {
-  const selection = editor.selection.getContent();
-  const selectionNode = editor.selection.getNode();
-  const editorRange = editor.selection.getRng();
-  const startContainer = editorRange === null || editorRange === void 0 ? void 0 : editorRange.startContainer;
-  const wholeText = startContainer === null || startContainer === void 0 ? void 0 : startContainer.wholeText; // check if selection is inline latex
-
-  if (selection && selectionIsLatex(selection)) {
-    const latex = cleanLatex(selection);
-    return {
-      latex,
-      advancedOnly: containsAdvancedSyntax(latex)
-    };
-  } else if ((selectionNode === null || selectionNode === void 0 ? void 0 : selectionNode.tagName) === 'IMG' && selectionNode !== null && selectionNode !== void 0 && selectionNode.classList.contains('equation_image')) {
-    // check if we launched modal from an equation image
-    try {
-      const src = new URL(selectionNode.src);
-      const encodedLatex = src.pathname.replace(/^\/equation_images\//, '');
-      const latex = decodeURIComponent(decodeURIComponent(encodedLatex));
-      return {
-        latex,
-        advancedOnly: containsAdvancedSyntax(latex)
-      };
-    } catch (ex) {
-      // probably failed to create the new URL
-      return {};
-    }
-  } else if (wholeText) {
-    // check if the cursor was within inline latex when launched
-    // The `wholeText` value is not sufficient, since we could be dealing with
-    // a number of nested ranges. The `nodeValue` is the text in the range in
-    // which we have found the cursor.
-    const nodeValue = startContainer.nodeValue || '';
-    const cursor = editorRange.startOffset;
-    const parsedLatex = findLatex(nodeValue, cursor);
-
-    if (parsedLatex.latex) {
-      parsedLatex.startContainer = startContainer;
-      parsedLatex.advancedOnly = containsAdvancedSyntax(parsedLatex.latex);
-    }
-
-    return parsedLatex;
-  } else {
-    return {};
-  }
-};

package/lib/rce/plugins/instructure_equation/EquationEditorModal/styles.js

@@ -1,46 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License along
- * with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-import { StyleSheet } from 'aphrodite';
-const cssRules = {
-  componentId: 'cpADC',
-  template: function (theme) {
-    return `
-
-#MathJax_MenuFrame {
-    z-index: 10000 !important;
-  }
-`;
-  }
-}.template(); // Applying z-index for MathJax menu inside config shows the element but doesn't user interact with it.
-// Manually adding z-index as head style
-
-const style = document.createElement('style');
-style.appendChild(document.createTextNode(cssRules));
-document.head.appendChild(style);
-export default StyleSheet.create({
-  mathfieldContainer: {
-    all: 'initial'
-  },
-  mathFieldContainer: {
-    width: '100%',
-    position: 'relative'
-  },
-  latexToggle: {
-    marginTop: '0.5em'
-  }
-});