@instructure/canvas-rce 5.2.0 → 5.3.0

package/lib/translated/ko/modules/rce/plugins/instructure_equation/EquationEditorModal/__tests__/index.test.js

@@ -0,0 +1,352 @@
+/*
+ * 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 from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import EquationEditorModal from "../index.js";
+import { convertLatexToMathMl } from "../../mathlive/index.js";
+import mathml from "../mathml.js";
+
+function defaultProps() {
+  return {
+    editor: {},
+    label: '',
+    onModalDismiss: () => {},
+    onModalClose: () => {},
+    title: '',
+    mountNode: null
+  };
+}
+
+function renderModal(overrideProps = {}) {
+  const props = defaultProps();
+  return render( /*#__PURE__*/React.createElement(EquationEditorModal, Object.assign({}, props, overrideProps)));
+}
+
+jest.mock('../../mathlive', () => ({
+  convertLatexToMarkup: jest.fn().mockReturnValue('<p>Markup content</p>'),
+  convertLatexToMathMl: jest.fn()
+}));
+jest.mock('../mathml', () => ({
+  processNewMathInElem: jest.fn()
+}));
+convertLatexToMathMl.mockReturnValue('<p>MathML content</p>');
+describe('EquationEditorModal', () => {
+  let editor, mockFn;
+  beforeAll(() => {
+    HTMLElement.prototype.getValue = jest.fn().mockImplementation(function () {
+      if (this.tagName === 'MATH-FIELD') {
+        return this.innerHTML;
+      }
+
+      return null;
+    });
+    HTMLElement.prototype.setValue = jest.fn().mockImplementation(function (value) {
+      if (this.tagName === 'MATH-FIELD') {
+        this.innerHTML = value;
+      }
+    });
+  });
+  beforeEach(() => {
+    mockFn = jest.fn();
+    editor = {
+      insertContent: mockFn,
+      selection: {
+        getContent: () => '\\(latexcontent\\)',
+        getNode: () => ({
+          tagName: 'IMG',
+          classList: {
+            contains: str => str === 'equation_image'
+          },
+          src: 'http://canvas.docker/equation_images/%255Csqrt%257Bx%257D'
+        }),
+        getRng: () => ({
+          startContainer: {
+            wholeText: 'text',
+            nodeValue: '\\\\\\((text)\\\\\\)'
+          },
+          startOffset: 0
+        })
+      }
+    };
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('loadExistingFormula()', () => {
+    it('selected content is latex', async () => {
+      renderModal({
+        editor
+      });
+      const mathField = document.body.querySelector('math-field');
+      await waitFor(() => {
+        const value = mathField.getValue();
+        expect(value).toEqual('latexcontent');
+      });
+    });
+    it('selected content is an image', async () => {
+      editor.selection.getContent = () => 'non-latex-content';
+
+      renderModal({
+        editor
+      });
+      const mathField = document.body.querySelector('math-field');
+      await waitFor(() => {
+        const value = mathField.getValue();
+        expect(value).toEqual('\\sqrt{x}');
+      });
+    });
+    describe('selected content is range', () => {
+      beforeEach(() => {
+        editor.selection.getContent = () => 'non-latex-content';
+
+        editor.selection.getNode = () => ({
+          tagName: 'X',
+          classList: {
+            contains: () => false
+          },
+          src: 'http://canvas.docker/equation_images/%255Csqrt%257Bx%257D'
+        });
+
+        document.createRange = () => ({
+          setStart: () => {},
+          setEnd: () => {}
+        });
+      });
+      it('with empty text', async () => {
+        editor.selection.getRng = () => ({
+          startContainer: {
+            wholeText: '',
+            nodeValue: null
+          },
+          startOffset: 0
+        });
+
+        renderModal({
+          editor
+        });
+        const mathField = document.body.querySelector('math-field');
+        await waitFor(() => {
+          const value = mathField.getValue();
+          expect(value).toEqual('');
+        });
+      });
+      it('with a non formula text', async () => {
+        editor.selection.getRng = () => ({
+          startContainer: {
+            wholeText: 'text',
+            nodeValue: 'text'
+          },
+          startOffset: 0
+        });
+
+        renderModal({
+          editor
+        });
+        const mathField = document.body.querySelector('math-field');
+        await waitFor(() => {
+          const value = mathField.getValue();
+          expect(value).toEqual('');
+        });
+      });
+      it('formula text', async () => {
+        editor.selection.getRng = () => ({
+          startContainer: {
+            wholeText: 'hello',
+            nodeValue: '\\\\\\((text)\\\\\\)'
+          },
+          startOffset: 5
+        });
+
+        editor.selection.setRng = jest.fn();
+        renderModal({
+          editor
+        });
+        const mathField = document.body.querySelector('math-field');
+        await waitFor(() => {
+          const value = mathField.getValue();
+          expect(editor.selection.setRng).toHaveBeenCalled();
+          expect(value).toEqual('(text)\\\\');
+        });
+      });
+    });
+  });
+  it('uses editor on modal submit', () => {
+    renderModal({
+      editor,
+      onEquationSubmit: mockFn
+    });
+    const mathField = document.body.querySelector('math-field');
+    mathField.setValue('hello');
+    fireEvent.click(screen.getByText('Done'));
+    expect(mockFn).toHaveBeenCalledWith('hello');
+  });
+  it('not uses editor on modal submit with empty value', () => {
+    renderModal({
+      editor
+    });
+    const mathField = document.body.querySelector('math-field');
+    mathField.setValue('');
+    fireEvent.click(screen.getByText('Done'));
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+  it('uses editor on modal submit on advanced input', () => {
+    renderModal({
+      editor,
+      onEquationSubmit: mockFn
+    });
+    fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+    const textarea = document.body.querySelector('textarea');
+    fireEvent.change(textarea, {
+      target: {
+        value: 'hello'
+      }
+    });
+    fireEvent.click(screen.getByText('Done'));
+    expect(mockFn).toHaveBeenCalledWith('hello');
+  });
+  it('not uses editor on modal submit with empty value on advanced input', () => {
+    renderModal({
+      editor
+    });
+    fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+    const textarea = document.body.querySelector('textarea');
+    fireEvent.change(textarea, {
+      target: {
+        value: ''
+      }
+    });
+    fireEvent.click(screen.getByText('Done'));
+    expect(mockFn).not.toHaveBeenCalled();
+  });
+  it('preserves content from initial to advanced field', () => {
+    renderModal({
+      editor
+    });
+    const mathField = document.body.querySelector('math-field');
+    mathField.setValue('hello');
+    fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+    const textarea = document.body.querySelector('textarea');
+    const newValue = textarea.value;
+    expect(newValue).toEqual('hello');
+  });
+  it('preserves content from advanced to initial field', () => {
+    renderModal({
+      editor
+    });
+    const toggle = screen.getByLabelText('Directly Edit LaTeX');
+    fireEvent.click(toggle);
+    const textarea = document.body.querySelector('textarea');
+    fireEvent.change(textarea, {
+      target: {
+        value: 'hello'
+      }
+    });
+    fireEvent.click(toggle);
+    const mathField = document.body.querySelector('math-field');
+    const newValue = mathField.getValue();
+    expect(newValue).toEqual('hello');
+  });
+  describe('renders preview on advanced view when', () => {
+    it('recovering last formula', async () => {
+      renderModal({
+        editor
+      });
+      const mathField = document.body.querySelector('math-field');
+      await waitFor(() => {
+        const value = mathField.getValue();
+        expect(value).toEqual('latexcontent');
+      });
+      fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+      await waitFor(() => {
+        expect(convertLatexToMathMl).toHaveBeenCalledWith('latexcontent');
+        expect(mathml.processNewMathInElem.mock.calls[0][0]).toMatchInlineSnapshot(`
+          <span
+            data-testid="mathml-preview-element"
+          >
+            <math>
+              <p>
+                MathML content
+              </p>
+            </math>
+          </span>
+        `);
+      });
+    });
+    it('updates formula', () => {
+      renderModal({
+        editor
+      });
+      fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+      const textarea = document.body.querySelector('textarea');
+      fireEvent.change(textarea, {
+        target: {
+          value: 'hello'
+        }
+      });
+      expect(convertLatexToMathMl).toHaveBeenCalledWith('hello');
+      expect(mathml.processNewMathInElem.mock.calls[0][0]).toMatchInlineSnapshot(`
+        <span
+          data-testid="mathml-preview-element"
+        >
+          <math>
+            <p>
+              MathML content
+            </p>
+          </math>
+        </span>
+      `);
+    });
+    it('updates formula with empty string', async () => {
+      convertLatexToMathMl.mockReturnValue('');
+      renderModal({
+        editor
+      });
+      const mathField = document.body.querySelector('math-field');
+      await waitFor(() => {
+        const value = mathField.getValue();
+        expect(value).toEqual('latexcontent');
+      });
+      fireEvent.click(screen.getByLabelText('Directly Edit LaTeX'));
+      const textarea = document.body.querySelector('textarea');
+      fireEvent.change(textarea, {
+        target: {
+          value: ''
+        }
+      });
+      await waitFor(() => {
+        expect(convertLatexToMathMl).toHaveBeenCalledWith('');
+        const previewElement = screen.getByTestId('mathml-preview-element');
+        expect(previewElement.innerHTML).toEqual('');
+      });
+    });
+  });
+  it('calls prop onModalDismiss on modal dismiss', () => {
+    renderModal({
+      onModalDismiss: mockFn
+    });
+    fireEvent.click(screen.getByText('Cancel'));
+    expect(mockFn).toHaveBeenCalled();
+  });
+  it('calls prop onModalDismiss on close button click', () => {
+    renderModal({
+      onModalDismiss: mockFn
+    });
+    fireEvent.click(screen.getByText('Close'));
+    expect(mockFn).toHaveBeenCalled();
+  });
+});

package/lib/translated/ko/modules/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -0,0 +1,338 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * 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 { convertLatexToMathMl } from "../mathlive/index.js";
+import { TextArea } from '@instructure/ui-text-area';
+import { CloseButton, Button } from '@instructure/ui-buttons';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { Heading } from '@instructure/ui-heading';
+import { Modal } from '@instructure/ui-modal';
+import formatMessage from "../../../../format-message.js";
+import EquationEditorToolbar from "../EquationEditorToolbar/index.js";
+import { css } from 'aphrodite';
+import mathml from "./mathml.js";
+import styles from "./styles.js";
+export default class EquationEditorModal extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      advanced: false,
+      workingFormula: ''
+    };
+    this.originalFormula = null;
+    this.previewElement = /*#__PURE__*/React.createRef();
+
+    this.executeCommand = (cmd, advancedCmd) => {
+      if (this.state.advanced) {
+        this.setState(state => ({
+          workingFormula: state.workingFormula + (advancedCmd || cmd)
+        }));
+      } else {
+        this.mathField.insert(cmd, {
+          focus: 'true'
+        });
+      }
+    };
+
+    this.handleEntered = () => {
+      this.loadExistingFormula();
+    };
+
+    this.handleModalCancel = e => {
+      var _this$props$onModalDi, _this$props;
+
+      const element = e.srcElement || e.targetElement; // MathJax Menu clicks closes modal. MathJax doesn't let us to get the menu click event
+      // to use stopPropagation().
+
+      const isMathJaxEvent = element && (element.id === 'MathJax_MenuFrame' || element.classList.contains('MathJax_Menu') || element.classList.contains('MathJax_MenuItem'));
+
+      if (isMathJaxEvent) {
+        return;
+      }
+
+      (_this$props$onModalDi = (_this$props = this.props).onModalDismiss) === null || _this$props$onModalDi === void 0 ? void 0 : _this$props$onModalDi.call(_this$props);
+    };
+
+    this.handleModalDone = () => {
+      const _this$props2 = this.props,
+            onModalDismiss = _this$props2.onModalDismiss,
+            onEquationSubmit = _this$props2.onEquationSubmit;
+      const output = this.state.advanced ? this.state.workingFormula : this.mathField.getValue();
+
+      if (output) {
+        onEquationSubmit(output);
+      }
+
+      onModalDismiss();
+    };
+
+    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.handleOpen = () => {
+      this.originalFormula = null;
+    };
+
+    this.handleFieldRef = node => {
+      this.mathField = node;
+    };
+
+    this.renderFooter = () => {
+      const cancelButton = /*#__PURE__*/React.createElement(Button, {
+        onClick: this.handleModalCancel
+      }, "\uCDE8\uC18C");
+      const doneButton = /*#__PURE__*/React.createElement(Button, {
+        margin: "none none none xx-small",
+        onClick: this.handleModalDone,
+        variant: "primary"
+      }, "\uB9C8\uCE68");
+      return /*#__PURE__*/React.createElement("div", null, cancelButton, doneButton);
+    };
+
+    this.handleRef = node => {
+      this.modalFooter = node;
+    };
+
+    this.render = () => {
+      const _this$props3 = this.props,
+            label = _this$props3.label,
+            onModalClose = _this$props3.onModalClose,
+            title = _this$props3.title,
+            mountNode = _this$props3.mountNode;
+      return /*#__PURE__*/React.createElement(Modal, {
+        label: label,
+        onClose: onModalClose,
+        onDismiss: this.handleModalCancel,
+        onEntered: this.handleEntered,
+        onOpen: this.handleOpen,
+        open: true,
+        mountNode: mountNode,
+        transition: "fade"
+      }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
+        placement: "end",
+        offset: "medium",
+        variant: "icon",
+        onClick: this.handleModalCancel
+      }, "\uB2EB\uAE30"), /*#__PURE__*/React.createElement(Heading, null, title || label)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+        ref: node => {
+          this.modalContent = node;
+        },
+        className: css(styles.mathfieldContainer)
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EquationEditorToolbar, {
+        executeCommand: this.executeCommand
+      })), /*#__PURE__*/React.createElement("div", {
+        className: css(styles.mathFieldContainer),
+        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": "math",
+        "virtual-keyboard-mode": "off",
+        "keypress-sound": "none",
+        "plonk-sound": "none",
+        "math-mode-space": " "
+      })), /*#__PURE__*/React.createElement("div", {
+        className: css(styles.mathFieldContainer),
+        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
+        })
+      })), /*#__PURE__*/React.createElement("div", {
+        className: css(styles.latexToggle)
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        onChange: this.toggleAdvanced,
+        checked: this.state.advanced,
+        label: "Directly Edit LaTeX",
+        variant: "toggle"
+      })), /*#__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
+      })))), /*#__PURE__*/React.createElement(Modal.Footer, {
+        ref: this.handleRef
+      }, this.renderFooter()));
+    };
+  }
+
+  // **************** //
+  // Helper functions //
+  // **************** //
+  currentFormula(nodeValue, cursor) {
+    let leftIndex, rightIndex; // 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 formulae = nodeValue.match(EquationEditorModal.boundaryRegex);
+
+    if (!formulae) {
+      return [void 0, 0, 0];
+    }
+
+    const foundFormula = formulae.find(formula => {
+      leftIndex = nodeValue.indexOf(formula);
+      rightIndex = leftIndex + formula.length;
+      return leftIndex < cursor && cursor < rightIndex && this.selectionIsLatex(formula);
+    });
+    return [foundFormula, leftIndex, rightIndex];
+  }
+
+  insertNewRange(currentFormula, startContainer, leftIndex, rightIndex) {
+    const editor = this.props.editor;
+    const range = document.createRange();
+    range.setStart(startContainer, leftIndex);
+    range.setEnd(startContainer, rightIndex);
+    editor.selection.setRng(range);
+    this.originalFormula = this.selectionToLatex(currentFormula);
+    this.mathField.setValue(this.originalFormula || ' ');
+  }
+
+  loadExistingFormula() {
+    const editor = this.props.editor;
+    const selection = editor.selection.getContent();
+
+    if (selection && this.selectionIsLatex(selection)) {
+      this.originalFormula = this.selectionToLatex(selection);
+      this.mathField.setValue(this.originalFormula || ' ');
+    } else {
+      const selnode = editor.selection.getNode();
+
+      if (selnode.tagName === 'IMG' && selnode.classList.contains('equation_image')) {
+        try {
+          const src = new URL(selnode.src);
+          const encoded_eq = src.pathname.replace(/^\/equation_images\//, '');
+          this.originalFormula = decodeURIComponent(decodeURIComponent(encoded_eq));
+          this.mathField.setValue(this.originalFormula || ' ');
+        } catch (ex) {
+          // probably failed to create the new URL
+          // eslint-disable-next-line no-console
+          console.error(ex);
+        }
+      } else {
+        const editorRange = editor.selection.getRng();
+        const startContainer = editorRange.startContainer;
+        const wholeText = startContainer.wholeText;
+
+        if (wholeText) {
+          const cursor = editorRange.startOffset; // 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 _this$currentFormula = this.currentFormula(nodeValue, cursor),
+                _this$currentFormula2 = _slicedToArray(_this$currentFormula, 3),
+                currentFormula = _this$currentFormula2[0],
+                leftIndex = _this$currentFormula2[1],
+                rightIndex = _this$currentFormula2[2];
+
+          if (currentFormula !== void 0) {
+            this.insertNewRange(currentFormula, startContainer, leftIndex, rightIndex);
+          }
+        }
+      }
+    }
+  }
+
+  selectionIsLatex(selection) {
+    return selection.startsWith('\\(') && selection.endsWith('\\)');
+  }
+
+  selectionToLatex(selection) {
+    return selection.substr(2, selection.length - 4);
+  } // ********* //
+  // Callbacks //
+  // ********* //
+
+
+  setPreviewElementContent() {
+    if (!this.state.advanced) {
+      return;
+    }
+
+    const mathMlContent = convertLatexToMathMl(this.state.workingFormula);
+
+    if (mathMlContent) {
+      this.previewElement.current.innerHTML = `<math>${mathMlContent}</math>`;
+      mathml.processNewMathInElem(this.previewElement.current);
+    } else {
+      this.previewElement.current.innerHTML = '';
+    }
+  }
+
+  componentDidMount() {
+    this.setPreviewElementContent();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.workingFormula !== prevState.workingFormula) {
+      this.setPreviewElementContent();
+    }
+  }
+
+}
+EquationEditorModal.propTypes = {
+  editor: PropTypes.object.isRequired,
+  label: PropTypes.string.isRequired,
+  onModalDismiss: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onEquationSubmit: PropTypes.func.isRequired,
+  title: PropTypes.node,
+  mountNode: PropTypes.string
+};
+EquationEditorModal.boundaryRegex = /\\\((.+?)\\\)/g;
+EquationEditorModal.defaultProps = {
+  title: null,
+  mountNode: null
+};