@instructure/canvas-rce 5.2.0 → 5.3.0

package/lib/rce/plugins/instructure_equation/plugin.js

@@ -2,75 +2,114 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _escapeHtml = _interopRequireDefault(require("escape-html"));
 
 var _formatMessage = _interopRequireDefault(require("../../../format-message.js"));
 
-var _clickCallback = _interopRequireDefault(require("./clickCallback.js"));
+var _clickCallback = _interopRequireWildcard(require("./clickCallback.js"));
 
 var _svg = require("@instructure/ui-icons/es/svg");
 
-/*
- * Copyright (C) 2018 - 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/>.
- */
-tinymce.create('tinymce.plugins.InstructureEquation', {
-  init(ed) {
-    ed.ui.registry.addIcon('equation', _svg.IconEquationLine.src);
-    ed.addCommand('instructureEquation', _clickCallback.default.bind(this, ed, document));
-    ed.ui.registry.addMenuItem('instructure_equation', {
-      text: (0, _formatMessage.default)('Equation'),
-      icon: 'equation',
-      onAction: () => ed.execCommand('instructureEquation')
-    });
-    ed.ui.registry.addToggleButton('instructure_equation', {
-      tooltip: (0, _escapeHtml.default)((0, _formatMessage.default)({
-        default: 'Insert Math Equation',
-        description: 'Title for RCE button to insert a math equation'
-      })),
-      onAction: () => ed.execCommand('instructureEquation'),
-      icon: 'equation',
-
-      onSetup(buttonApi) {
-        const toggleActive = eventApi => {
-          buttonApi.setActive(eventApi.element.nodeName.toLowerCase() === 'IMG' && eventApi.element.className === 'equation_image');
-        };
-
-        ed.on('NodeChange', toggleActive);
-        return () => ed.off('NodeChange', toggleActive);
-      }
-
-    });
-    ed.ui.registry.addButton('instructure-equation-options', {
-      onAction() {
-        ed.execCommand('instructureEquation');
-      },
-
-      text: (0, _formatMessage.default)('Edit Equation')
-    });
-    ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
-      items: 'instructure-equation-options',
-      position: 'node',
-      predicate: function (node) {
-        return node.tagName === 'IMG' && node.classList.contains('equation_image') || node.classList.contains('math_equation_latex');
-      },
-      scope: 'node'
-    });
-  }
-
-}); // Register plugin
-
-tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
+var _ENV, _ENV$FEATURES;
+
+function isEquationImage(node) {
+  return node.tagName === 'IMG' && node.classList.contains('equation_image') || node.classList.contains('math_equation_latex');
+}
+
+if ((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.new_equation_editor) {
+  tinymce.create('tinymce.plugins.InstructureEquation', {
+    init(ed) {
+      ed.ui.registry.addIcon('equation', _svg.IconEquationLine.src);
+      ed.addCommand('instructureEquation', _clickCallback.default.bind(this, ed, document));
+      ed.ui.registry.addMenuItem('instructure_equation', {
+        text: (0, _formatMessage.default)('Equation'),
+        icon: 'equation',
+        onAction: () => ed.execCommand('instructureEquation')
+      });
+      ed.ui.registry.addToggleButton('instructure_equation', {
+        tooltip: (0, _escapeHtml.default)((0, _formatMessage.default)({
+          default: 'Insert Math Equation',
+          description: 'Title for RCE button to insert a math equation'
+        })),
+        onAction: () => ed.execCommand('instructureEquation'),
+        icon: 'equation',
+
+        onSetup(buttonApi) {
+          const toggleActive = eventApi => {
+            buttonApi.setActive(isEquationImage(eventApi.element));
+          };
+
+          ed.on('NodeChange', toggleActive);
+          return () => ed.off('NodeChange', toggleActive);
+        }
+
+      });
+      ed.ui.registry.addButton('instructure-equation-options', {
+        onAction() {
+          ed.execCommand('instructureEquation');
+        },
+
+        text: (0, _formatMessage.default)('Edit Equation')
+      });
+      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
+        items: 'instructure-equation-options',
+        position: 'node',
+        predicate: isEquationImage,
+        scope: 'node'
+      });
+    }
+
+  }); // Register plugin
+
+  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
+} else {
+  tinymce.create('tinymce.plugins.InstructureEquation', {
+    init(ed) {
+      ed.ui.registry.addIcon('equation', _svg.IconEquationLine.src);
+      ed.addCommand('instructureEquation', _clickCallback.oldClickCallback.bind(this, ed, document));
+      ed.ui.registry.addMenuItem('instructure_equation', {
+        text: (0, _formatMessage.default)('Equation'),
+        icon: 'equation',
+        onAction: () => ed.execCommand('instructureEquation')
+      });
+      ed.ui.registry.addToggleButton('instructure_equation', {
+        tooltip: (0, _escapeHtml.default)((0, _formatMessage.default)({
+          default: 'Insert Math Equation',
+          description: 'Title for RCE button to insert a math equation'
+        })),
+        onAction: () => ed.execCommand('instructureEquation'),
+        icon: 'equation',
+
+        onSetup(buttonApi) {
+          const toggleActive = eventApi => {
+            buttonApi.setActive(isEquationImage(eventApi.element));
+          };
+
+          ed.on('NodeChange', toggleActive);
+          return () => ed.off('NodeChange', toggleActive);
+        }
+
+      });
+      ed.ui.registry.addButton('instructure-equation-options', {
+        onAction
+        /* buttonApi */
+        () {
+          ed.execCommand('instructureEquation');
+        },
+
+        text: (0, _formatMessage.default)('Edit Equation')
+      });
+      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
+        items: 'instructure-equation-options',
+        position: 'node',
+        predicate: isEquationImage,
+        scope: 'node'
+      });
+    }
+
+  }); // Register plugin
+
+  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
+}

package/lib/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -73,8 +73,6 @@ var _trayUtils = require("../../shared/trayUtils.js");
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 function VideoOptionsTray(props) {
-  var _ENV, _ENV$FEATURES;
-
   const videoOptions = props.videoOptions,
         onEntered = props.onEntered,
         onExited = props.onExited,
@@ -213,9 +211,7 @@ function VideoOptionsTray(props) {
     });
   }
 
-  const saveDisabled = displayAs === 'embed' && (titleText === '' || videoSize === _ImageEmbedOptions.CUSTOM && !dimensionsState.isValid); //  yes I know ENV shouldn't be used in the sub-package, but it's temporary
-
-  const cc_in_rce_video_tray = !!((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.cc_in_rce_video_tray);
+  const saveDisabled = displayAs === 'embed' && (titleText === '' || videoSize === _ImageEmbedOptions.CUSTOM && !dimensionsState.isValid);
   return /*#__PURE__*/_react.default.createElement(_StoreContext.StoreProvider, trayProps, contentProps => /*#__PURE__*/_react.default.createElement(_uiTray.Tray, {
     key: "video-options-tray",
     "data-mce-component": true,
@@ -228,7 +224,7 @@ function VideoOptionsTray(props) {
     shouldCloseOnDocumentClick: true,
     shouldContainFocus: true,
     shouldReturnFocus: true,
-    size: cc_in_rce_video_tray ? 'regular' : void 0
+    size: "regular"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     direction: "column",
     height: (0, _trayUtils.getTrayHeight)()
@@ -311,7 +307,7 @@ function VideoOptionsTray(props) {
     disabled: displayAs !== 'embed',
     minHeight: minHeight,
     minWidth: minWidth
-  }))), cc_in_rce_video_tray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+  }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
     description: (0, _formatMessage.default)('Closed Captions/Subtitles')

package/lib/rce/plugins/shared/ColorInput.js

@@ -48,7 +48,7 @@ var _formatMessage = _interopRequireDefault(require("../../../format-message.js"
  * 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/>.
  */
-const COLORS = ['#BD3C14', '#FF2717', '#E71F63', '#8F3E97', '#65499D', '#4554A4', '#1770AB', '#0B9BE3', '#06A3B7', '#009688', '#009606', '#8D9900', '#D97900', '#FD5D10', '#F06291', '#111111', '#556572', '#8B969E', '#FFFFFF', null];
+const COLORS = ['#BD3C14', '#FF2717', '#E71F63', '#8F3E97', '#65499D', '#4554A4', '#1770AB', '#0B9BE3', '#06A3B7', '#009688', '#009606', '#8D9900', '#D97900', '#FD5D10', '#F06291', '#111111', '#556572', '#6B7780', '#FFFFFF', null];
 
 const ColorInput = ({
   color,

package/lib/sidebar/actions/media.js

@@ -152,15 +152,10 @@ function updateMediaObject({
 
       throw e;
     });
-
-    if (ENV.FEATURES.cc_in_rce_video_tray) {
-      const ccupdate = state.source.updateClosedCaptions(state, {
-        media_object_id,
-        subtitles
-      });
-      return Promise.all([moupdate, ccupdate]);
-    } else {
-      return moupdate;
-    }
+    const ccupdate = state.source.updateClosedCaptions(state, {
+      media_object_id,
+      subtitles
+    });
+    return Promise.all([moupdate, ccupdate]);
   };
 }

package/lib/translated/ar/modules/index.js

@@ -19,6 +19,7 @@ import normalizeLocale from "./rce/normalizeLocale.js";
 import { renderIntoDiv as render } from "./rce/root.js";
 import { headerFor, originFromHost } from "./sidebar/sources/api.js";
 import getTranslations from "./getTranslations.js";
+import defaultTinymceConfig from "./defaultTinymceConfig.js";
 
 try {
   // In a pretranslated build, this should not result in a network request for a new chunk.
@@ -33,6 +34,7 @@ try {
   console.warn(`could not find canvas-rce language: ${"ar"}`);
 }
 
+export const defaultConfiguration = defaultTinymceConfig;
 export function renderIntoDiv(editorEl, props, cb) {
   normalizeLocale(props.language);
   render(editorEl, props, cb);

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