@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/translated/hy/modules/rce/RCEWrapper.js

@@ -37,6 +37,7 @@ import editorLanguage from './editorLanguage';
 import normalizeLocale from './normalizeLocale';
 import { sanitizePlugins } from './sanitizePlugins';
 import { getCanvasUrl } from './getCanvasUrl';
+import RCEGlobals from './RCEGlobals';
 import indicate from '../common/indicate';
 import bridge from '../bridge';
 import CanvasContentTray, { trayPropTypes } from './plugins/shared/CanvasContentTray';
@@ -3658,7 +3659,7 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       // document. We need this so that click events get captured properly by instui
       // focus-trapping components, so they properly ignore trapping focus on click.
 
-      editor.on('click', () => window.top.document.body.click(), true);
+      editor.on('click', () => window.document.body.click(), true);
       editor.on('Cut Paste Change input Undo Redo', debounce(this.handleInputChange, 1000));
       this.announceContextToolbars(editor);
 
@@ -3681,27 +3682,24 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     };
 
     this._toggleFullscreen = event => {
+      const isTinyFullscreen = event.state;
+      const fullscreenState = {
+        isTinyFullscreen
+      };
       const header = document.getElementById('header');
 
       if (header) {
-        if (event.state) {
-          this.setState({
-            fullscreenState: {
-              headerDisp: header.style.display,
-              isTinyFullscreen: true
-            }
-          });
+        if (isTinyFullscreen) {
+          fullscreenState.headerDisp = header.style.display;
           header.style.display = 'none';
         } else {
           header.style.display = this.state.fullscreenState.headerDisp;
-          this.setState({
-            fullscreenState: {
-              isTinyFullscreen: false
-            }
-          });
         }
-      } // if we're leaving fullscreen, remove event listeners on the fullscreen element
+      }
 
+      this.setState({
+        fullscreenState
+      }); // if we're leaving fullscreen, remove event listeners on the fullscreen element
 
       if (!document[FS_ELEMENT] && this.state.fullscreenElem) {
         this.state.fullscreenElem.removeEventListener('fullscreenchange', this._toggleFullscreen);
@@ -3995,6 +3993,11 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
       alertIdValue = 0;
     };
 
+    // Set up some limited global state that can be referenced
+    // as needed in RCE's components and function / plugin definitions
+    // Not intended to be dynamically changed!
+    RCEGlobals.setFeatures(this.getRequiredFeatureStatuses());
+    RCEGlobals.setConfig(this.getRequiredConfigValues());
     this.editor = null; // my tinymce editor instance
 
     this.language = normalizeLocale(this.props.language); // interface consistent with editorBox
@@ -4051,6 +4054,27 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
     });
   }
 
+  getRequiredFeatureStatuses() {
+    const {
+      new_equation_editor,
+      new_math_equation_handling,
+      rce_ux_improvements
+    } = this.props.features;
+    return {
+      new_equation_editor,
+      new_math_equation_handling,
+      rce_ux_improvements
+    };
+  }
+
+  getRequiredConfigValues() {
+    return {
+      locale: normalizeLocale(this.props.language),
+      flashAlertTimeout: this.props.flashAlertTimeout,
+      timezone: this.props.timezone
+    };
+  }
+
   getCanvasUrl() {
     if (!this.canvasUrl) this.canvasUrl = getCanvasUrl(this.props.trayProps);
     return this.canvasUrl.then(url => {
@@ -5086,7 +5110,10 @@ let RCEWrapper = (_dec = themeable(theme, styles), _dec(_class = (_class2 = clas
   instRecordDisabled: PropTypes.bool,
   highContrastCSS: PropTypes.arrayOf(PropTypes.string),
   maxInitRenderedRCEs: PropTypes.number,
-  use_rce_icon_maker: PropTypes.bool
+  use_rce_icon_maker: PropTypes.bool,
+  features: PropTypes.objectOf(PropTypes.bool),
+  flashAlertTimeout: PropTypes.number,
+  timezone: PropTypes.string.isRequired
 }, _class2.defaultProps = {
   trayProps: null,
   languages: [{

package/lib/translated/hy/modules/rce/RestoreAutoSaveModal.js

@@ -41,9 +41,10 @@ export default function RestoreAutoSaveModal(props) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
-    variant: "icon",
-    onClick: props.onNo
-  }, "\u0553\u0561\u056F\u0565\u056C"), /*#__PURE__*/React.createElement(Heading, null, "Found auto-saved content")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
+    color: "primary",
+    onClick: props.onNo,
+    screenReaderLabel: "\u0553\u0561\u056F\u0565\u056C"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Found auto-saved content")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
     as: "div",
     margin: "small"
   }, /*#__PURE__*/React.createElement(Alert, {

package/lib/translated/hy/modules/rce/__tests__/RCE.test.js

@@ -19,6 +19,14 @@ import React, { createRef } from 'react';
 import { render, waitFor } from '@testing-library/react';
 import RCE from '../RCE';
 import bridge from '../../bridge';
+const requiredProps = {
+  features: {
+    new_equation_editor: true,
+    new_math_equation_handling: true,
+    rce_ux_improvements: true
+  },
+  timezone: 'America/Denver'
+};
 describe('RCE', () => {
   let target;
   beforeEach(() => {
@@ -33,18 +41,18 @@ describe('RCE', () => {
     bridge.focusEditor(null);
   });
   it('bridges newly rendered editors', async () => {
-    render( /*#__PURE__*/React.createElement(RCE, {
+    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
       textareaId: "textarea3"
-    }), target);
+    }, requiredProps)), target);
     await waitFor(() => expect(bridge.activeEditor().constructor.displayName).toEqual('RCEWrapper'));
   });
   it('supports getCode() and setCode() on its ref', async () => {
     const rceRef = /*#__PURE__*/createRef(null);
-    render( /*#__PURE__*/React.createElement(RCE, {
+    render( /*#__PURE__*/React.createElement(RCE, Object.assign({
       ref: rceRef,
       textareaId: "textarea3",
       defaultContent: "Hello RCE!"
-    }), target);
+    }, requiredProps)), target);
     await waitFor(() => expect(rceRef.current).not.toBeNull());
     expect(rceRef.current.getCode()).toEqual('Hello RCE!');
     rceRef.current.setCode('How sweet.');

package/lib/translated/hy/modules/rce/__tests__/RCEGlobals.test.js

@@ -0,0 +1,68 @@
+/*
+ * 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 RCEGlobals from '../RCEGlobals';
+describe('RCEGlobals', () => {
+  describe('features', () => {
+    const initialFeatures = {
+      new_equation_editor: true,
+      new_math_equation_handling: true
+    };
+    const otherFeatures = {
+      some_other_feature: true
+    };
+    beforeAll(() => {
+      RCEGlobals.setFeatures(initialFeatures);
+      RCEGlobals.setFeatures(otherFeatures);
+    });
+    it('sets the global features exactly once', () => {
+      expect(RCEGlobals._data.features).toEqual(initialFeatures);
+    });
+    it('returns the features', () => {
+      expect(RCEGlobals.getFeatures()).toMatchObject(initialFeatures);
+    });
+    it('does not allow modfication of features directly', () => {
+      expect(() => {
+        RCEGlobals._data.features.another_feature = false;
+      }).toThrow(/object is not extensible/);
+    });
+  });
+  describe('config', () => {
+    const initialConfig = {
+      locale: 'en',
+      timezone: 'America/Denver'
+    };
+    const otherConfig = {
+      somethingElse: true
+    };
+    beforeAll(() => {
+      RCEGlobals.setConfig(initialConfig);
+      RCEGlobals.setConfig(otherConfig);
+    });
+    it('sets the global config exactly once', () => {
+      expect(RCEGlobals._data.config).toEqual(initialConfig);
+    });
+    it('returns the config', () => {
+      expect(RCEGlobals.getConfig()).toMatchObject(initialConfig);
+    });
+    it('does not allow modfication of config directly', () => {
+      expect(() => {
+        RCEGlobals._data.config.more_config = 'abcdefg';
+      }).toThrow(/object is not extensible/);
+    });
+  });
+});

package/lib/translated/hy/modules/rce/__tests__/root.test.js

@@ -32,7 +32,13 @@ describe('RceModule', () => {
       editorOptions: () => {
         return {};
       },
-      textareaId: 'textarea_id'
+      textareaId: 'textarea_id',
+      features: {
+        new_equation_editor: true,
+        new_math_equation_handling: true,
+        rce_ux_improvements: true
+      },
+      timezone: 'America/Denver'
     };
   });
   afterEach(() => {

package/lib/translated/hy/modules/rce/__tests__/userOS.test.js

@@ -0,0 +1,68 @@
+/*
+ * 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 { determineUserOS, determineOSDependentKey } from '../userOS';
+var UserAgent;
+
+(function (UserAgent) {
+  UserAgent["MAC"] = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0";
+  UserAgent["WINDOWS"] = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36";
+  UserAgent["LINUX"] = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36";
+})(UserAgent || (UserAgent = {}));
+
+describe('userOS', () => {
+  let userAgentSpy;
+  beforeAll(() => {
+    userAgentSpy = jest.spyOn(window.navigator, 'userAgent', 'get');
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  describe('when the user is running a Mac OS', () => {
+    beforeEach(() => {
+      userAgentSpy.mockReturnValue(UserAgent.MAC);
+    });
+    it('determineUserOS returns Mac', () => {
+      expect(determineUserOS()).toEqual('Mac');
+    });
+    it('determineOSDependentKey returns the correct value', () => {
+      expect(determineOSDependentKey()).toEqual('OPTION');
+    });
+  });
+  describe('when the user is running a Windows OS', () => {
+    beforeEach(() => {
+      userAgentSpy.mockReturnValue(UserAgent.WINDOWS);
+    });
+    it('determineUserOS returns Windows', () => {
+      expect(determineUserOS()).toEqual('Windows');
+    });
+    it('determineOSDependentKey returns the correct value', () => {
+      expect(determineOSDependentKey()).toEqual('ALT');
+    });
+  });
+  describe('when the user is running something other than Mac or Windows', () => {
+    beforeEach(() => {
+      userAgentSpy.mockReturnValue(UserAgent.LINUX);
+    });
+    it('determineUserOS returns Other', () => {
+      expect(determineUserOS()).toEqual('Other');
+    });
+    it('determineOSDependentKey returns the correct value', () => {
+      expect(determineOSDependentKey()).toEqual('ALT');
+    });
+  });
+});

package/lib/translated/hy/modules/rce/initA11yChecker.js

@@ -15,9 +15,6 @@
  * 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/>.
  */
-//
-// TODO: remove dependency on ENV.url_for_high_contrast
-//
 import { setLocale } from 'tinymce-a11y-checker';
 export default function initA11yChecker(locale) {
   if (locale) {

package/lib/translated/hy/modules/rce/plugins/instructure_documents/components/Link.js

@@ -30,7 +30,10 @@ import dragHtml from '../../../../sidebar/dragHtml';
 import { getIconFromType } from '../../shared/fileTypeUtils';
 import { isPreviewable } from '../../shared/Previewable';
 import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
+import RCEGlobals from '../../../RCEGlobals';
 export default function Link(props) {
+  var _RCEGlobals$getConfig;
+
   const [isHovering, setIsHovering] = useState(false);
   const {
     filename,
@@ -45,7 +48,8 @@ export default function Link(props) {
   const Icon = getIconFromType(content_type);
   const color = published ? 'success' : 'primary'; // Uses user locale and timezone
 
-  const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+  const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+  const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
   const publishedMsg = published ? "\u0570\u0580\u0561\u057A\u0561\u0580\u0561\u056F\u057E\u0561\u056E" : "\u0579\u0570\u0580\u0561\u057A\u0561\u0580\u0561\u056F\u057E\u0561\u056E";
 
   function linkAttrsFromDoc() {

package/lib/translated/hy/modules/rce/plugins/instructure_documents/components/__tests__/Link.test.js

@@ -18,6 +18,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Link from '../Link';
+import RCEGlobals from '../../../../RCEGlobals';
 
 function renderComponent(props) {
   return render( /*#__PURE__*/React.createElement(Link, Object.assign({
@@ -42,10 +43,13 @@ function queryIconByName(elem, name) {
 
 describe('RCE "Documents" Plugin > Document', () => {
   beforeAll(() => {
-    ENV = {
-      // 	UTC/GMT -7 hours
-      TIMEZONE: 'America/Denver'
-    };
+    // UTC/GMT -7 hours
+    RCEGlobals.getConfig = jest.fn().mockReturnValue({
+      timezone: 'America/Denver'
+    });
+  });
+  afterAll(() => {
+    jest.resetAllMocks();
   });
   describe('renders', () => {
     it('the date', () => {

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

@@ -20,6 +20,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import EquationEditorModal from '../index';
 import mathml from '../mathml';
 import advancedPreference from '../advancedPreference';
+import RCEGlobals from '../../../../RCEGlobals';
 jest.useFakeTimers();
 
 const defaultProps = () => {
@@ -76,11 +77,9 @@ jest.mock('../advancedPreference', () => {
 describe('EquationEditorModal', () => {
   let editor, mockFn;
   beforeAll(() => {
-    ENV = {
-      FEATURES: {
-        new_equation_editor: true
-      }
-    };
+    RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+      new_equation_editor: true
+    });
     MathfieldElement.prototype.getValue = jest.fn().mockImplementation(function () {
       if (this.tagName === 'MATH-FIELD') {
         return this.innerHTML;
@@ -94,6 +93,9 @@ describe('EquationEditorModal', () => {
       }
     });
   });
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
   beforeEach(() => {
     mockFn = jest.fn();
     editor = {

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

@@ -79,7 +79,11 @@ export default class EquationEditorModal extends Component {
         return;
       }
 
-      ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      if (this.usedInCanvas()) {
+        // restore the original value
+        ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      }
+
       (_this$props$onModalDi = (_this$props = this.props).onModalDismiss) === null || _this$props$onModalDi === void 0 ? void 0 : _this$props$onModalDi.call(_this$props);
     };
 
@@ -94,7 +98,11 @@ export default class EquationEditorModal extends Component {
         onEquationSubmit(output);
       }
 
-      ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      if (this.usedInCanvas()) {
+        // restore the original value
+        ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      }
+
       onModalDismiss();
     };
 
@@ -145,8 +153,14 @@ export default class EquationEditorModal extends Component {
 
     this.handleOpen = () => {
       this.originalFormula = null;
-      this.hostPageDisablesShortcuts = ENV.disable_keyboard_shortcuts;
-      ENV.disable_keyboard_shortcuts = true;
+
+      if (this.usedInCanvas()) {
+        // store the original value (so it can be restored later)
+        this.hostPageDisablesShortcuts = ENV.disable_keyboard_shortcuts; // And disable keyboard shortcuts while we
+        // are inside the equation editor
+
+        ENV.disable_keyboard_shortcuts = true;
+      }
     };
 
     this.handleFieldRef = node => {
@@ -209,9 +223,10 @@ export default class EquationEditorModal extends Component {
         "data-testid": "equation-editor-modal-close",
         placement: "end",
         offset: "medium",
-        variant: "icon",
-        onClick: this.handleModalCancel
-      }, "\u0553\u0561\u056F\u0565\u056C"), /*#__PURE__*/React.createElement(Heading, null, title || label)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+        color: "primary",
+        onClick: this.handleModalCancel,
+        screenReaderLabel: "\u0553\u0561\u056F\u0565\u056C"
+      }), /*#__PURE__*/React.createElement(Heading, null, title || label)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
         ref: node => {
           this.modalContent = node;
         },
@@ -362,6 +377,10 @@ export default class EquationEditorModal extends Component {
   selectionToLatex(selection) {
     const sansDelimiters = selection.substr(2, selection.length - 4);
     return sansDelimiters.replace(/ /g, '').trim();
+  }
+
+  usedInCanvas() {
+    return ENV && ENV.hasOwnProperty('disable_keyboard_shortcuts');
   } // ********* //
   // Callbacks //
   // ********* //

package/lib/translated/hy/modules/rce/plugins/instructure_equation/EquationEditorModal/mathml.js

@@ -15,7 +15,8 @@
  * 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 $ from 'jquery'; // configure MathJax to use 'color' extension fo LaTeX coding
+import $ from 'jquery';
+import RCEGlobals from '../../../RCEGlobals'; // configure MathJax to use 'color' extension fo LaTeX coding
 
 const localConfig = {
   TeX: {
@@ -53,7 +54,9 @@ const mathml = {
     }
 
     if (!this.isMathJaxLoaded()) {
-      const locale = ENV.LOCALE || 'en'; // signal local config to mathjax as it loads
+      var _RCEGlobals$getConfig;
+
+      const locale = ((_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.locale) || 'en'; // signal local config to mathjax as it loads
 
       window.MathJax = localConfig;
       if (window.MathJaxIsLoading) return;
@@ -62,7 +65,7 @@ const mathml = {
         url: `//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=${configFile}&locale=${locale}`,
         cache: true,
         success: () => {
-          var _ENV, _ENV$FEATURES;
+          var _RCEGlobals$getFeatur;
 
           window.MathJax.Hub.Register.StartupHook('MathMenu Ready', function () {
             // get the mathjax context menu above the rce's equation editor
@@ -73,7 +76,7 @@ const mathml = {
             cb === null || cb === void 0 ? void 0 : cb();
           });
 
-          if ((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.new_math_equation_handling) {
+          if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.new_math_equation_handling) {
             window.MathJax.Hub.Register.MessageHook('Begin PreProcess', function (message) {
               mathImageHelper.catchEquationImages(message[1]);
             });
@@ -146,9 +149,9 @@ const mathml = {
   },
 
   isMathInElement(elem) {
-    var _ENV2, _ENV2$FEATURES, _ENV3, _ENV3$FEATURES;
+    var _RCEGlobals$getFeatur2, _RCEGlobals$getFeatur3;
 
-    if ((_ENV2 = ENV) !== null && _ENV2 !== void 0 && (_ENV2$FEATURES = _ENV2.FEATURES) !== null && _ENV2$FEATURES !== void 0 && _ENV2$FEATURES.new_math_equation_handling) {
+    if ((_RCEGlobals$getFeatur2 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur2 !== void 0 && _RCEGlobals$getFeatur2.new_math_equation_handling) {
       // handle the change from image + hidden mathml to mathjax formatted latex
       if (elem.querySelector('.math_equation_latex,.math_equation_mml')) {
         return true;
@@ -165,7 +168,7 @@ const mathml = {
       }
     }
 
-    if ((_ENV3 = ENV) !== null && _ENV3 !== void 0 && (_ENV3$FEATURES = _ENV3.FEATURES) !== null && _ENV3$FEATURES !== void 0 && _ENV3$FEATURES.new_equation_editor) {
+    if ((_RCEGlobals$getFeatur3 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur3 !== void 0 && _RCEGlobals$getFeatur3.new_equation_editor) {
       return (elem === null || elem === void 0 ? void 0 : elem.getAttribute('data-testid')) === 'mathml-preview-element';
     }
 

package/lib/translated/hy/modules/rce/plugins/instructure_equation/EquationEditorToolbar/index.js

@@ -18,8 +18,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tabs } from '@instructure/ui-tabs';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import buttons from './buttons';
 import MathIcon from '../MathIcon';
 const buttonContainerStyle = {
@@ -62,15 +61,17 @@ function EquationEditorToolbar(props) {
     return /*#__PURE__*/React.createElement("div", {
       style: buttonContainerStyle,
       key: name
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(IconButton, {
       onClick: () => props.executeCommand(command, advancedCommand),
-      icon: icon
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, label, ", LaTeX: ", name)));
+      renderIcon: icon,
+      withBackground: false,
+      withBorder: false,
+      screenReaderLabel: `${label}, LaTeX: ${name}`
+    }));
   }));
 
   return /*#__PURE__*/React.createElement(Tabs, {
     variant: "secondary",
-    size: "medium",
     onRequestTabChange: handleTabChange,
     minHeight: "10rem",
     maxHeight: "10rem",