@instructure/canvas-rce 5.2.0 → 5.3.0

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/svg/__tests__/index.test.js

@@ -43,7 +43,7 @@ describe('buildSvg()', () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <metadata>
-          {"name":"","alt":"","shape":"circle","size":"large","color":"#000","outlineColor":"#fff","outlineSize":"large","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle"}
+          {"name":"","alt":"","shape":"circle","size":"large","color":"#000","outlineColor":"#fff","outlineSize":"large","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle","encodedImage":"","encodedImageType":"","encodedImageName":""}
         </metadata>
         <svg
           fill="none"
@@ -140,7 +140,7 @@ describe('buildSvg()', () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <metadata>
-          {"name":"","alt":"","shape":"circle","size":"large","color":"#000","outlineColor":"#fff","outlineSize":"large","text":"Hello World!","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle"}
+          {"name":"","alt":"","shape":"circle","size":"large","color":"#000","outlineColor":"#fff","outlineSize":"large","text":"Hello World!","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle","encodedImage":"","encodedImageType":"","encodedImageName":""}
         </metadata>
         <svg
           fill="none"

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/svg/__tests__/metadata.test.js

@@ -30,7 +30,7 @@ describe('buildMetadata() / parseMetadata()', () => {
     const metadata = buildMetadata(settings);
     expect(metadata).toMatchInlineSnapshot(`
       <metadata>
-        {"name":"","alt":"","shape":"triangle","size":"small","color":"#f0f","outlineColor":null,"outlineSize":"none","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle"}
+        {"name":"","alt":"","shape":"triangle","size":"small","color":"#f0f","outlineColor":null,"outlineSize":"none","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle","encodedImage":"","encodedImageType":"","encodedImageName":""}
       </metadata>
     `);
     const svg = createSvgElement('svg');

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/svg/__tests__/settings.test.js

@@ -40,6 +40,9 @@ describe('useSvgSettings()', () => {
         shape: 'square',
         size: 'small',
         color: null,
+        encodedImage: '',
+        encodedImageType: '',
+        encodedImageName: '',
         outlineColor: null,
         outlineSize: 'none',
         text: '',
@@ -80,6 +83,9 @@ describe('useSvgSettings()', () => {
           shape: 'square',
           size: 'large',
           color: null,
+          encodedImage: '',
+          encodedImageType: '',
+          encodedImageName: '',
           outlineColor: null,
           outlineSize: 'none',
           text: '',
@@ -141,6 +147,9 @@ describe('useSvgSettings()', () => {
         shape: 'triangle',
         size: 'large',
         color: '#FF2717',
+        encodedImage: '',
+        encodedImageType: '',
+        encodedImageName: '',
         outlineColor: '#06A3B7',
         outlineSize: 'small',
         text: 'Some Text',
@@ -180,6 +189,9 @@ describe('useSvgSettings()', () => {
           shape: 'square',
           size: 'small',
           color: null,
+          encodedImage: '',
+          encodedImageType: '',
+          encodedImageName: '',
           outlineColor: null,
           outlineSize: 'none',
           text: '',
@@ -200,6 +212,9 @@ describe('useSvgSettings()', () => {
           shape: 'square',
           size: 'small',
           color: null,
+          encodedImage: '',
+          encodedImageType: '',
+          encodedImageName: '',
           outlineColor: null,
           outlineSize: 'none',
           text: '',

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/svg/constants.js

@@ -27,7 +27,10 @@ export const DEFAULT_SETTINGS = {
   textSize: 'small',
   textColor: null,
   textBackgroundColor: null,
-  textPosition: 'middle'
+  textPosition: 'middle',
+  encodedImage: '',
+  encodedImageType: '',
+  encodedImageName: ''
 };
 export const DEFAULT_OPTIONS = {
   isPreview: false

package/lib/translated/ar/modules/rce/plugins/instructure_buttons/svg/settings.js

@@ -1,4 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 /*
@@ -19,7 +18,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { useState, useEffect, useReducer } from 'react';
-import { DEFAULT_SETTINGS } from "../svg/constants.js";
+import { svgSettings as svgSettingsReducer, defaultState } from "../reducers/svgSettings.js";
 const TYPE = 'image/svg+xml';
 export const statuses = {
   ERROR: 'error',
@@ -27,7 +26,7 @@ export const statuses = {
   IDLE: 'idle'
 };
 export function useSvgSettings(editor, editing) {
-  const _useReducer = useReducer((state, changes) => _objectSpread(_objectSpread({}, state), changes), DEFAULT_SETTINGS),
+  const _useReducer = useReducer(svgSettingsReducer, defaultState),
         _useReducer2 = _slicedToArray(_useReducer, 2),
         settings = _useReducer2[0],
         dispatch = _useReducer2[1];

package/lib/translated/ar/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();
+  });
+});