@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/instructure_equation/mathlive/index.js

@@ -1,22 +1,173 @@
 /*
- * 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/>.
+* Copyright (c) 2017 - present Arno Gourdol. All rights reserved.
+
+* Permission is hereby granted, free of charge, to any person obtaining a
+* copy of this software and associated documentation files (the "Software"),
+* to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense,
+* and/or sell copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following conditions:
+
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+* DEALINGS IN THE SOFTWARE.
  */
-const mathliveCss = require('mathlive/dist/mathlive-fonts.css');
 
+// TODO: restore import after switch from webpack to rslib
+// import mathliveCss from 'mathlive/dist/mathlive-fonts.css'
+
+const mathliveCss = `
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_AMS;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_AMS-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Caligraphic;
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Caligraphic;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Fraktur;
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/KaTeX_Fraktur-Bold.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Fraktur;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Fraktur-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Main;
+  font-style: italic;
+  font-weight: 700;
+  src: url(fonts/KaTeX_Main-BoldItalic.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Main;
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/KaTeX_Main-Bold.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Main;
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Main-Italic.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Main;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Main-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Math;
+  font-style: italic;
+  font-weight: 700;
+  src: url(fonts/KaTeX_Math-BoldItalic.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Math;
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Math-Italic.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: "KaTeX_SansSerif";
+  font-style: normal;
+  font-weight: 700;
+  src: url(fonts/KaTeX_SansSerif-Bold.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: "KaTeX_SansSerif";
+  font-style: italic;
+  font-weight: 400;
+  src: url(fonts/KaTeX_SansSerif-Italic.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: "KaTeX_SansSerif";
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_SansSerif-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Script;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Script-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Size1;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Size1-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Size2;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Size2-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Size3;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Size3-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Size4;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Size4-Regular.woff2) format("woff2");
+}
+@font-face {
+  font-display: "swap";
+  font-family: KaTeX_Typewriter;
+  font-style: normal;
+  font-weight: 400;
+  src: url(fonts/KaTeX_Typewriter-Regular.woff2) format("woff2");
+}
+:root {
+  --ML__static-fonts: true;
+}
+`;
 const cssRules = `.ML__popover {
   /* Override this so it shows up on top of dialogs */
   z-index: 20000 !important;

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -17,16 +15,17 @@
  * 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 formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
+// @ts-expect-error
 import { IconEquationLine } from '@instructure/ui-icons/es/svg';
 import tinymce from 'tinymce';
-
 function isEquationImage(node) {
   return node.tagName === 'IMG' && node.classList.contains('equation_image') || node.classList.contains('math_equation_latex');
-} // Register plugin
-
+}
 
+// Register plugin
 tinymce.PluginManager.add('instructure_equation', function (ed) {
   ed.ui.registry.addIcon('equation', IconEquationLine.src);
   ed.addCommand('instructureEquation', () => clickCallback(ed, document));
@@ -42,22 +41,20 @@ tinymce.PluginManager.add('instructure_equation', function (ed) {
     }),
     onAction: () => ed.execCommand('instructureEquation'),
     icon: 'equation',
-
     onSetup(buttonApi) {
+      // @ts-expect-error
       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() {
+    onAction(/* buttonApi */
+    ) {
       ed.execCommand('instructureEquation');
     },
-
     text: formatMessage('Edit Equation')
   });
   ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {

package/es/rce/plugins/instructure_fullscreen/plugin.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2022 - present Instructure, Inc.
  *
@@ -17,6 +15,7 @@
  * 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 tinymce from 'tinymce';
 import formatMessage from '../../../format-message';
 import bridge from '../../../bridge';
@@ -29,22 +28,18 @@ tinymce.PluginManager.add('instructure_fullscreen', function (editor) {
     text: formatMessage('Fullscreen'),
     icon: 'fullscreen',
     onAction: () => editor.execCommand('instructureFullscreen'),
-
     onSetup(api) {
       api.setDisabled(!!document[FS_ELEMENT]);
       return () => undefined;
     }
-
   });
   editor.ui.registry.addMenuItem('instructure_exit_fullscreen', {
     text: formatMessage('Exit Fullscreen'),
     icon: 'fullscreen_exit',
     onAction: () => editor.execCommand('instructureFullscreen'),
-
     onSetup(api) {
       api.setDisabled(!document[FS_ELEMENT]);
       return () => undefined;
     }
-
   });
 });

package/es/rce/plugins/instructure_html_view/clickCallback.js

@@ -15,6 +15,7 @@
  * 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 bridge from '../../../bridge';
 export default function () {
   bridge.activeEditor().toggleView();

package/es/rce/plugins/instructure_html_view/plugin.js

@@ -15,23 +15,24 @@
  * 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 formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
-import tinymce from 'tinymce'; // Register plugin
+import tinymce from 'tinymce';
 
+// Register plugin
 tinymce.PluginManager.add('instructure_html_view', function (ed) {
   // Register commands
-  ed.addCommand('instructureHtmlView', () => clickCallback()); // Register menu items
+  ed.addCommand('instructureHtmlView', () => clickCallback());
 
+  // Register menu items
   ed.ui.registry.addMenuItem('instructure_html_view', {
     text: formatMessage('HTML Editor'),
     icon: 'htmlview',
     onAction: () => ed.execCommand('instructureHtmlView'),
-
     onSetup(api) {
       api.setDisabled(false);
       return () => undefined;
     }
-
   });
 });

package/es/rce/plugins/instructure_icon_maker/clickCallback.js

@@ -15,6 +15,7 @@
  * 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 ReactDOM from 'react-dom';
 import bridge from '../../../bridge';
@@ -24,18 +25,15 @@ export const LIST_ICON_MAKER = 'list_icon_maker_icons';
 export const EDIT_ICON_MAKER = 'edit_icon_maker_icon';
 export const ICONS_TRAY_CONTAINER_ID = 'instructure-rce-icons-tray-container';
 export default function (ed, document, type) {
-  return import('./components/IconMakerTray').then(_ref => {
-    let {
-      IconMakerTray
-    } = _ref;
+  return import('./components/IconMakerTray').then(({
+    IconMakerTray
+  }) => {
     let container = document.querySelector(`#${ICONS_TRAY_CONTAINER_ID}`);
     const trayProps = bridge.trayProps.get(ed);
-
     const handleUnmount = () => {
       ReactDOM.unmountComponentAtNode(container);
       ed.focus(false);
     };
-
     if (!container) {
       container = document.createElement('div');
       container.id = ICONS_TRAY_CONTAINER_ID;
@@ -46,8 +44,7 @@ export default function (ed, document, type) {
       // that closes and opens the tray to indicate a mode change to the user
       handleUnmount();
     }
-
-    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, () => /*#__PURE__*/React.createElement(IconMakerTray, {
+    ReactDOM.render(/*#__PURE__*/React.createElement(StoreProvider, trayProps, () => /*#__PURE__*/React.createElement(IconMakerTray, {
       editor: ed,
       editing: type === EDIT_ICON_MAKER,
       onUnmount: handleUnmount,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ColorSection.js

@@ -15,6 +15,7 @@
  * 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 { Flex } from '@instructure/ui-flex';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -22,58 +23,53 @@ import { ColorInput } from '../../../shared/ColorInput';
 import formatMessage from '../../../../../format-message';
 const OUTLINE_SIZES = ['none', 'small', 'medium', 'large'];
 export const COLOR_SECTION_ID = 'icons-tray-color-section';
-
 const getColorSection = () => document.querySelector(`#${COLOR_SECTION_ID}`);
-
-export const ColorSection = _ref => {
-  let {
-    settings,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Flex, {
-    as: "section",
-    direction: "column",
-    id: COLOR_SECTION_ID,
-    justifyItems: "space-between",
-    padding: "0 small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(ColorInput, {
-    color: settings.color,
-    label: formatMessage('Icon Color'),
-    name: "icon-color",
-    onChange: color => onChange({
-      color
-    }),
-    popoverMountNode: getColorSection
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    assistiveText: formatMessage('Use arrow keys to select an outline size.'),
-    id: "icon-outline-size",
-    mountNode: getColorSection,
-    onChange: (e, option) => onChange({
-      outlineSize: option.value
-    }),
-    renderLabel: formatMessage('Outline Size'),
-    value: settings.outlineSize
-  }, OUTLINE_SIZES.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `outline-size-${size}`,
-    key: `outline-size-${size}`,
-    value: size
-  }, OUTLINE_SIZE_DESCRIPTION[size] || '')))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(ColorInput, {
-    color: settings.outlineColor,
-    label: formatMessage('Outline Color'),
-    name: "icon-outline",
-    onChange: outlineColor => onChange({
-      outlineColor
-    }),
-    popoverMountNode: getColorSection,
-    requireColor: true
-  })));
-};
+export const ColorSection = ({
+  settings,
+  onChange
+}) => /*#__PURE__*/React.createElement(Flex, {
+  as: "section",
+  direction: "column",
+  id: COLOR_SECTION_ID,
+  justifyItems: "space-between",
+  padding: "0 small"
+}, /*#__PURE__*/React.createElement(Flex.Item, {
+  padding: "small"
+}, /*#__PURE__*/React.createElement(ColorInput, {
+  color: settings.color,
+  label: formatMessage('Icon Color'),
+  name: "icon-color",
+  onChange: color => onChange({
+    color
+  }),
+  popoverMountNode: getColorSection
+})), /*#__PURE__*/React.createElement(Flex.Item, {
+  padding: "small"
+}, /*#__PURE__*/React.createElement(SimpleSelect, {
+  assistiveText: formatMessage('Use arrow keys to select an outline size.'),
+  id: "icon-outline-size",
+  mountNode: getColorSection,
+  onChange: (e, option) => onChange({
+    outlineSize: option.value
+  }),
+  renderLabel: formatMessage('Outline Size'),
+  value: settings.outlineSize
+}, OUTLINE_SIZES.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+  id: `outline-size-${size}`,
+  key: `outline-size-${size}`,
+  value: size
+}, OUTLINE_SIZE_DESCRIPTION[size] || '')))), /*#__PURE__*/React.createElement(Flex.Item, {
+  padding: "small"
+}, /*#__PURE__*/React.createElement(ColorInput, {
+  color: settings.outlineColor,
+  label: formatMessage('Outline Color'),
+  name: "icon-outline",
+  onChange: outlineColor => onChange({
+    outlineColor
+  }),
+  popoverMountNode: getColorSection,
+  requireColor: true
+})));
 const OUTLINE_SIZE_DESCRIPTION = {
   none: formatMessage('None'),
   small: formatMessage('Small'),

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/CreateIconMakerForm.js

@@ -15,22 +15,22 @@
  * 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 { Header } from './Header';
 import { ShapeSection } from './ShapeSection';
 import { ColorSection } from './ColorSection';
 import { TextSection } from './TextSection';
 import { ImageSection } from './ImageSection';
-export const CreateIconMakerForm = _ref => {
-  let {
-    settings,
-    dispatch,
-    editor,
-    editing,
-    allowNameChange,
-    nameRef,
-    canvasOrigin
-  } = _ref;
+export const CreateIconMakerForm = ({
+  settings,
+  dispatch,
+  editor,
+  editing,
+  allowNameChange,
+  nameRef,
+  canvasOrigin
+}) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     settings: settings,
     onChange: dispatch,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Footer.js

@@ -15,6 +15,7 @@
  * 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 { Button } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
@@ -22,17 +23,16 @@ import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import formatMessage from '../../../../../format-message';
 import { ConditionalTooltip } from '../../../shared/ConditionalTooltip';
-export const Footer = _ref => {
-  let {
-    disabled,
-    onCancel,
-    onSubmit,
-    replaceAll,
-    onReplaceAllChanged,
-    editing,
-    isModified,
-    applyRef
-  } = _ref;
+export const Footer = ({
+  disabled,
+  onCancel,
+  onSubmit,
+  replaceAll,
+  onReplaceAllChanged,
+  editing,
+  isModified,
+  applyRef
+}) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, editing && /*#__PURE__*/React.createElement(View, {
     as: "div",
     padding: "medium"

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Group.js

@@ -15,15 +15,15 @@
  * 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 { ToggleGroup } from '@instructure/ui-toggle-details';
 import formatMessage from '../../../../../format-message';
-export function Group(_ref) {
-  let {
-    children,
-    summary,
-    ...props
-  } = _ref;
+export function Group({
+  children,
+  summary,
+  ...props
+}) {
   return /*#__PURE__*/React.createElement(ToggleGroup, Object.assign({
     background: "default",
     border: false,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js

@@ -15,6 +15,7 @@
  * 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, { useEffect } from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
@@ -28,7 +29,6 @@ import { IconQuestionLine } from '@instructure/ui-icons';
 import { FormFieldLabel } from '@instructure/ui-form-field';
 import { decode } from '../../svg/utils';
 import useDebouncedValue from '../../utils/useDebouncedValue';
-
 const getAltTextLabel = () => /*#__PURE__*/React.createElement(Flex, {
   alignItems: "center",
   margin: "0 0 small 0"
@@ -49,15 +49,13 @@ const getAltTextLabel = () => /*#__PURE__*/React.createElement(Flex, {
   size: "small",
   screenReaderLabel: formatMessage('Toggle tooltip')
 }))));
-
-export const Header = _ref => {
-  let {
-    settings,
-    onChange,
-    allowNameChange,
-    nameRef,
-    editing
-  } = _ref;
+export const Header = ({
+  settings,
+  onChange,
+  allowNameChange,
+  nameRef,
+  editing
+}) => {
   const originalName = settings.originalName;
   const [name, setName] = useDebouncedValue(settings.name, n => onChange({
     name: n