@instructure/canvas-rce 5.2.0 → 5.3.0

package/lib/translated/nb-x-k12/modules/rce/RCEWrapper.js

@@ -38,6 +38,7 @@ import indicatorRegion from "./indicatorRegion.js";
 import editorLanguage from "./editorLanguage.js";
 import normalizeLocale from "./normalizeLocale.js";
 import { sanitizePlugins } from "./sanitizeEditorOptions.js";
+import { getCanvasUrl } from "./getCanvasUrl.js";
 import indicate from "../common/indicate.js";
 import bridge from "../bridge/index.js";
 import CanvasContentTray, { trayPropTypes } from "./plugins/shared/CanvasContentTray.js";
@@ -4021,6 +4022,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
       // eslint-disable-next-line no-console
       console.error('Failed initializing a11y checker', err);
     });
+    this.canvasUrl = getCanvasUrl(this.props.trayProps);
   } // getCode and setCode naming comes from tinyMCE
   // kind of strange but want to be consistent
 
@@ -4258,19 +4260,8 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
   }
 
   insertMathEquation(tex) {
-    const ed = this.mceInstance();
-    const docSz = parseFloat(ed.dom.doc.defaultView.getComputedStyle(ed.dom.doc.body).getPropertyValue('font-size')) || 1;
-    const sel = ed.selection.getNode();
-    const imgSz = sel ? parseFloat(ed.dom.doc.defaultView.getComputedStyle(sel).getPropertyValue('font-size')) || 1 : docSz;
-    const url = `/equation_images/${encodeURIComponent(encodeURIComponent(tex))}?scale=${imgSz / docSz}`; // if I simply create the html string, xsslint fails jenkins
-
-    const img = document.createElement('img');
-    img.setAttribute('alt', `LaTeX: ${tex}`);
-    img.setAttribute('title', tex);
-    img.setAttribute('class', 'equation_image');
-    img.setAttribute('data-equation-content', tex);
-    img.setAttribute('src', url);
-    this.insertCode(img.outerHTML);
+    const editor = this.mceInstance();
+    return this.canvasUrl.then(domain => contentInsertion.insertEquation(editor, tex, domain));
   }
 
   removePlaceholders(name) {

package/lib/translated/nb-x-k12/modules/rce/contentInsertion.js

@@ -100,6 +100,25 @@ export function insertImage(editor, image) {
 
   return insertContent(editor, content);
 }
+export async function insertEquation(editor, latex, canvasUrl) {
+  const docSz = parseFloat(editor.dom.doc.defaultView.getComputedStyle(editor.dom.doc.body).getPropertyValue('font-size')) || 1;
+  const sel = editor.selection.getNode();
+  const imgSz = sel ? parseFloat(editor.dom.doc.defaultView.getComputedStyle(sel).getPropertyValue('font-size')) || 1 : docSz;
+  let url = `/equation_images/${encodeURIComponent(encodeURIComponent(latex))}?scale=${imgSz / docSz}`;
+
+  if (canvasUrl) {
+    url = canvasUrl + url;
+  } // if I simply create the html string, xsslint fails jenkins
+
+
+  const img = document.createElement('img');
+  img.setAttribute('alt', `LaTeX: ${latex}`);
+  img.setAttribute('title', latex);
+  img.setAttribute('class', 'equation_image');
+  img.setAttribute('data-equation-content', latex);
+  img.setAttribute('src', url);
+  return insertContent(editor, img.outerHTML);
+}
 /** * link insertion ** */
 // checks if there's an existing anchor containing the cursor
 

package/lib/translated/nb-x-k12/modules/rce/getCanvasUrl.js

@@ -0,0 +1,27 @@
+/*
+ * 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 RceApiSource from "../sidebar/sources/api.js";
+export async function getCanvasUrl(props) {
+  if (!props || !props.jwt || !props.host) {
+    return null;
+  }
+
+  const source = new RceApiSource(props);
+  const session = await source.getSession();
+  return session.canvasUrl;
+}

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/CreateButtonForm.js

@@ -17,7 +17,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * 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, { useReducer, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View } from '@instructure/ui-view';
 import { useStoreProps } from "../../../shared/StoreContext.js";
 import { useSvgSettings, statuses } from "../../svg/settings.js";
@@ -97,7 +97,8 @@ export const CreateButtonForm = ({
   }), /*#__PURE__*/React.createElement(ImageSection, {
     editor: editor,
     settings: settings,
-    onChange: dispatch
+    onChange: dispatch,
+    editing: editing
   }), /*#__PURE__*/React.createElement(Footer, {
     disabled: status === statuses.LOADING,
     onCancel: onClose,

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/ImageSection.js

@@ -17,9 +17,10 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * 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, { useReducer, useState } from 'react';
+import React, { useReducer, useState, useEffect } from 'react';
 import formatMessage from "../../../../../../format-message.js";
-import reducer, { initialState, modes } from "../../../reducers/imageSection.js";
+import reducer, { actions, initialState, modes } from "../../../reducers/imageSection.js";
+import { actions as svgActions } from "../../../reducers/svgSettings.js";
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { Group } from "../Group.js";
@@ -33,7 +34,11 @@ import { Heading } from '@instructure/ui-heading';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { TruncateText } from '@instructure/ui-truncate-text';
 import { View } from '@instructure/ui-view';
-export const ImageSection = () => {
+export const ImageSection = ({
+  settings,
+  onChange,
+  editing
+}) => {
   const _useState = useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         openCropModal = _useState2[0],
@@ -47,6 +52,40 @@ export const ImageSection = () => {
   const allowedModes = {
     [modes.courseImages.type]: Course
   };
+  useEffect(() => {
+    if (editing) {
+      dispatch({
+        type: actions.SET_IMAGE.type,
+        payload: settings.encodedImage
+      });
+    }
+  }, [settings.encodedImage]);
+  useEffect(() => {
+    if (editing) {
+      dispatch({
+        type: actions.SET_IMAGE_NAME.type,
+        payload: settings.encodedImageName
+      });
+    }
+  }, [settings.encodedImageName]);
+  useEffect(() => {
+    onChange({
+      type: svgActions.SET_ENCODED_IMAGE,
+      payload: state.image
+    });
+  }, [state.image]);
+  useEffect(() => {
+    onChange({
+      type: svgActions.SET_ENCODED_IMAGE_TYPE,
+      payload: state.mode
+    });
+  }, [state.mode]);
+  useEffect(() => {
+    onChange({
+      type: svgActions.SET_ENCODED_IMAGE_NAME,
+      payload: state.imageName
+    });
+  }, [state.imageName]);
   return /*#__PURE__*/React.createElement(Group, {
     as: "section",
     defaultExpanded: true,

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageSection/__tests__/ImageSection.test.js

@@ -85,11 +85,15 @@ jest.mock('../../../../../shared/StoreContext', () => {
 });
 describe('ImageSection', () => {
   const defaultProps = {
-    editor: {}
+    settings: {},
+    editing: false,
+    editor: {},
+    onChange: jest.fn()
   };
 
   const subject = overrides => render( /*#__PURE__*/React.createElement(ImageSection, _objectSpread(_objectSpread({}, defaultProps), overrides)));
 
+  afterEach(() => jest.clearAllMocks());
   it('renders the image mode selector', () => {
     const _subject = subject(),
           getByText = _subject.getByText;
@@ -150,6 +154,63 @@ describe('ImageSection', () => {
         await flushPromises();
         expect(getByTestId('selected-image-preview')).toHaveStyle('backgroundImage: url(data:image/png;base64,asdfasdfjksdf==)');
       });
+      it('dispatches an action to update parent state image', async () => {
+        await flushPromises();
+        expect(defaultProps.onChange).toHaveBeenCalledWith({
+          type: 'SetEncodedImage',
+          payload: 'data:image/png;base64,asdfasdfjksdf=='
+        });
+      });
+      it('dispatches an action to update parent state image type', async () => {
+        await flushPromises();
+        expect(defaultProps.onChange).toHaveBeenCalledWith({
+          type: 'SetEncodedImageType',
+          payload: 'Course'
+        });
+      });
+      it('dispatches an action to update parent state image name', async () => {
+        await flushPromises();
+        expect(defaultProps.onChange).toHaveBeenCalledWith({
+          type: 'SetEncodedImageName',
+          payload: 'grid.png'
+        });
+      });
+    });
+  });
+  describe('when editing mode', () => {
+    it('sets the image name', async () => {
+      const _subject4 = subject({
+        editing: true
+      }),
+            getByText = _subject4.getByText,
+            rerender = _subject4.rerender;
+
+      rerender( /*#__PURE__*/React.createElement(ImageSection, _objectSpread(_objectSpread({}, defaultProps), {
+        settings: {
+          encodedImage: 'data:image/jpg;base64,asdfasdfjksdf==',
+          encodedImageType: 'Course',
+          encodedImageName: 'banana.jpg'
+        },
+        editing: true
+      })));
+      expect(getByText('banana.jpg')).toBeInTheDocument();
+    });
+    it('sets the image preview', async () => {
+      const _subject5 = subject({
+        editing: true
+      }),
+            getByTestId = _subject5.getByTestId,
+            rerender = _subject5.rerender;
+
+      rerender( /*#__PURE__*/React.createElement(ImageSection, _objectSpread(_objectSpread({}, defaultProps), {
+        settings: {
+          encodedImage: 'data:image/jpg;base64,asdfasdfjksdf==',
+          encodedImageType: 'Course',
+          encodedImageName: 'banana.jpg'
+        },
+        editing: true
+      })));
+      expect(getByTestId('selected-image-preview')).toHaveStyle('backgroundImage: url(data:image/jpg;base64,asdfasdfjksdf==)');
     });
   });
 });

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/__tests__/CreateButtonForm.test.js

@@ -78,7 +78,7 @@ describe('<CreateButtonForm />', () => {
               xmlns="http://www.w3.org/2000/svg"
             >
               <metadata>
-                {"name":"","alt":"","shape":"square","size":"small","color":null,"outlineColor":null,"outlineSize":"none","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle"}
+                {"name":"","alt":"","shape":"square","size":"small","color":null,"outlineColor":null,"outlineSize":"none","text":"","textSize":"small","textColor":null,"textBackgroundColor":null,"textPosition":"middle","encodedImage":"","encodedImageType":"course","encodedImageName":""}
               </metadata>
               <svg
                 fill="none"

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/reducers/__tests__/svgSettings.test.js

@@ -0,0 +1,58 @@
+/*
+ * 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 { svgSettings } from "../svgSettings.js";
+describe('svgSettings()', () => {
+  let initialState = {};
+
+  const subject = action => svgSettings(initialState, action);
+
+  it('handles "SetEncodedImage" actions', () => {
+    const nextState = subject({
+      type: 'SetEncodedImage',
+      payload: "data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=="
+    });
+    expect(nextState).toMatchObject({
+      encodedImage: "data:text/plain;base64,SGVsbG8sIFdvcmxkIQ=="
+    });
+  });
+  it('handles "SetEncodedImageType" actions', () => {
+    const nextState = subject({
+      type: 'SetEncodedImageType',
+      payload: "course"
+    });
+    expect(nextState.encodedImageType).toEqual("course");
+  });
+  it('handles "SetEncodedImageName" actions', () => {
+    const nextState = subject({
+      type: 'SetEncodedImageName',
+      payload: "banana.jpg"
+    });
+    expect(nextState.encodedImageName).toEqual("banana.jpg");
+  });
+  describe('with an unrecognized action', () => {
+    beforeEach(() => initialState = {
+      encodedImage: 'some encodedImage'
+    });
+    it('does not modify the state', () => {
+      const nextState = subject({
+        type: 'FooBar'
+      });
+      expect(nextState).toMatchObject(initialState);
+    });
+  });
+});

package/lib/translated/nb-x-k12/modules/rce/plugins/instructure_buttons/reducers/svgSettings.js

@@ -0,0 +1,47 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+/*
+ * 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 { DEFAULT_SETTINGS } from "../svg/constants.js";
+export const defaultState = DEFAULT_SETTINGS;
+export const actions = {
+  SET_ENCODED_IMAGE: 'SetEncodedImage',
+  SET_ENCODED_IMAGE_TYPE: 'SetEncodedImageType',
+  SET_ENCODED_IMAGE_NAME: 'SetEncodedImageName'
+};
+export const svgSettings = (state, action) => {
+  switch (action.type) {
+    case actions.SET_ENCODED_IMAGE:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        encodedImage: action.payload
+      });
+
+    case actions.SET_ENCODED_IMAGE_TYPE:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        encodedImageType: action.payload
+      });
+
+    case actions.SET_ENCODED_IMAGE_NAME:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        encodedImageName: action.payload
+      });
+
+    default:
+      return _objectSpread(_objectSpread({}, state), action);
+  }
+};

package/lib/translated/nb-x-k12/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/nb-x-k12/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/nb-x-k12/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/nb-x-k12/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/nb-x-k12/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];