@instructure/canvas-rce 5.14.1 → 5.14.2

package/es/rce/RCEWrapperProps.js

@@ -15,10 +15,13 @@
  * 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 PropTypes from 'prop-types';
 import { trayPropTypes } from './plugins/shared/CanvasContentTray';
 import { RCEVariantValues } from './RCEVariants';
-import { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar'; // This file contains the prop types for the RCEWrapper component, so that types can be shared without having
+import { PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW, WYSIWYG_VIEW } from './StatusBar';
+
+// This file contains the prop types for the RCEWrapper component, so that types can be shared without having
 // to refactor RCEWrapper.js into typescript.
 
 export const toolbarPropType = PropTypes.arrayOf(PropTypes.shape({
@@ -34,7 +37,8 @@ export const toolbarPropType = PropTypes.arrayOf(PropTypes.shape({
   // registered with tinymce
   items: PropTypes.arrayOf(PropTypes.string).isRequired
 }));
-export const menuPropType = PropTypes.objectOf( // the key is the name of the menu item a plugin has
+export const menuPropType = PropTypes.objectOf(
+// the key is the name of the menu item a plugin has
 // registered with tinymce. If it does not exist in the
 // default menubar, it will be added.
 PropTypes.shape({
@@ -57,7 +61,8 @@ export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
   height: PropTypes.number,
   width: PropTypes.number,
   use_tray: PropTypes.bool,
-  canvas_icon_class: PropTypes.oneOfType([PropTypes.string, // Sometimes this is an object with an icon_url. Not sure why, see MAT-1354
+  canvas_icon_class: PropTypes.oneOfType([PropTypes.string,
+  // Sometimes this is an object with an icon_url. Not sure why, see MAT-1354
   PropTypes.shape({
     icon_url: PropTypes.string
   }), PropTypes.any])

package/es/rce/RceHtmlEditor.js

@@ -24,9 +24,6 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
   const [code, setCode] = useState(props.code);
   const label = formatMessage('html code editor');
   const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
-  useEffect(() => {
-    setCode(beautify.html(props.code)); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   useEffect(() => {
     // INSTUI sets the CodeEditor's surrounding label's
     // display inline-block so it doesn't fill the width
@@ -47,13 +44,13 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
         }
       `;
       document.head.appendChild(stylesheet);
-    } // odds are, this won't change the dir.
-
-
+    }
+    // odds are, this won't change the dir.
     setDir(getComputedStyle(editorRef.current || document.body, null).direction);
   }, [dir, editorRef]);
-  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr'; // setting height on the container keeps the RCE toolbar from jumping
+  const direction = ['ltr', 'rtl'].includes(dir) ? dir : 'ltr';
 
+  // setting height on the container keeps the RCE toolbar from jumping
   return /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     className: "RceHtmlEditor",
@@ -72,7 +69,7 @@ const RceHtmlEditor = /*#__PURE__*/React.forwardRef((props, editorRef) => {
     direction: direction,
     rtlMoveVisually: true,
     height: props.height,
-    value: code,
+    defaultValue: beautify.html(props.code),
     onChange: value => {
       setCode(value);
       props.onChange(value);

package/es/rce/ResizeHandle.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, { useState } from 'react';
 import { func, string, number } from 'prop-types';
 import { DraggableCore } from 'react-draggable';
@@ -40,29 +41,23 @@ export default function ResizeHandle(props) {
       });
     }
   }
-
   function handleFocus(event) {
     var _props$onFocus;
-
     setIsFocused(true);
     (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event);
   }
-
   function handleBlur() {
     setIsFocused(false);
   }
-
   function handleDragStart(_e) {
     setDragging(true);
   }
-
   function handleDragStop(_e) {
     setDragging(false);
   }
-
-  const [dragging, setDragging] = useState(false); // tracking isFocused rather than leveraging instui Focusable
+  const [dragging, setDragging] = useState(false);
+  // tracking isFocused rather than leveraging instui Focusable
   // because Focusable doesn't detect whan ResizeHandle gets focus
-
   const [isFocused, setIsFocused] = useState(false);
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": formatMessage('Drag handle. Use up and down arrows to resize'),

package/es/rce/RestoreAutoSaveModal.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, { useState } from 'react';
 import { bool, func, string } from 'prop-types';
 import { Alert } from '@instructure/ui-alerts';
@@ -26,9 +27,7 @@ import { View } from '@instructure/ui-view';
 import formatMessage from '../format-message';
 export default function RestoreAutoSaveModal(props) {
   const [previewExpanded, setPreviewExpanded] = useState(false);
-
   const toggleLabel = () => previewExpanded ? formatMessage('Click to hide preview') : formatMessage('Click to show preview');
-
   return /*#__PURE__*/React.createElement(Modal, {
     "data-testid": "RCE_RestoreAutoSaveModal",
     "data-mce-component": true,

package/es/rce/ShowOnFocusButton/index.js

@@ -35,27 +35,23 @@ export default class ShowOnFocusButton extends Component {
     this.state = {
       visible: false
     };
-
     this.handleFocus = () => {
       this.setState({
         visible: true
       });
     };
-
     this.handleBlur = () => {
       this.setState({
         visible: false
       });
     };
   }
-
   focus() {
     this.btnRef.focus();
     this.setState({
       visible: true
     });
   }
-
   renderButton() {
     return /*#__PURE__*/React.createElement(IconButton, {
       id: this.props.id,
@@ -74,14 +70,12 @@ export default class ShowOnFocusButton extends Component {
       withBorder: false
     }, this.props.children);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ShowOnFocusButton__wrapper",
       style: this.state.visible ? null : hideStyle
     }, this.renderButton());
   }
-
 }
 ShowOnFocusButton.propTypes = {
   children: oneOfType([node, func]).isRequired,

package/es/rce/StatusBar.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, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { arrayOf, bool, func, number, oneOf, string } from 'prop-types';
@@ -34,10 +35,10 @@ import { FS_ENABLED } from '../util/fullscreenHelpers';
 import { AIWandSVG } from './plugins/shared/ai_tools';
 export const WYSIWYG_VIEW = 'WYSIWYG';
 export const PRETTY_HTML_EDITOR_VIEW = 'PRETTY';
-export const RAW_HTML_EDITOR_VIEW = 'RAW'; // I don't know why eslint is reporting this, the props are all used
+export const RAW_HTML_EDITOR_VIEW = 'RAW';
 
+// I don't know why eslint is reporting this, the props are all used
 /* eslint-disable react/no-unused-prop-types */
-
 StatusBar.propTypes = {
   id: string.isRequired,
   rceIsFullscreen: bool,
@@ -65,24 +66,23 @@ StatusBar.defaultProps = {
   a11yErrorsCount: 0,
   disabledPlugins: []
 };
+
 /* eslint-enable react/no-unused-prop-types */
-// we use the array index because pathname may not be unique
 
+// we use the array index because pathname may not be unique
 /* eslint-disable react/no-array-index-key */
-
 function renderPathString(_ref) {
   let {
     path
   } = _ref;
   return path.reduce((result, pathName, index) => {
-    return result.concat( /*#__PURE__*/React.createElement("span", {
+    return result.concat(/*#__PURE__*/React.createElement("span", {
       key: `${pathName}-${index}`
     }, /*#__PURE__*/React.createElement(Text, null, index > 0 ? /*#__PURE__*/React.createElement(IconMiniArrowEndLine, null) : null, pathName)));
   }, []);
 }
 /* eslint-enable react/no-array-index-key */
 
-
 function emptyTagIcon() {
   return /*#__PURE__*/React.createElement(SVGIcon, {
     viewBox: "0 0 24 24",
@@ -96,13 +96,11 @@ function emptyTagIcon() {
     fontSize: "16"
   }, "</>")));
 }
-
 function findFocusable(el) {
   // eslint-disable-next-line react/no-find-dom-node
   const element = ReactDOM.findDOMNode(el);
   return element ? Array.from(element.querySelectorAll('[tabindex]')) : [];
 }
-
 export default function StatusBar(props) {
   const [focusedBtnId, setFocusedBtnId] = useState(null);
   const [includeEdtrDesc, setIncludeEdtrDesc] = useState(false);
@@ -117,10 +115,9 @@ export default function StatusBar(props) {
     // move focus to the next button over.
     if (isHtmlView() && /rce-kbshortcut-btn|rce-a11y-btn/.test(focusedBtnId)) {
       setFocusedBtnId('rce-edit-btn');
-    } // adding a delay before including the HTML Editor description to wait the focus moves to the RCE
+    }
+    // adding a delay before including the HTML Editor description to wait the focus moves to the RCE
     // and prevent JAWS from reading the aria-describedby element when switching back to RCE view
-
-
     const timerid = setTimeout(() => {
       setIncludeEdtrDesc(!isHtmlView());
     }, 100);
@@ -130,26 +127,21 @@ export default function StatusBar(props) {
   function isAvailable(plugin) {
     return !props.disabledPlugins.includes(plugin);
   }
-
   function isFeature(feature_name) {
     return props.features.includes(feature_name);
   }
-
   function preferredHtmlEditor() {
     if (props.preferredHtmlEditor) return props.preferredHtmlEditor;
     return PRETTY_HTML_EDITOR_VIEW;
   }
-
   function getHtmlEditorView(event) {
     if (!event.shiftKey) return preferredHtmlEditor();
     return preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW ? PRETTY_HTML_EDITOR_VIEW : RAW_HTML_EDITOR_VIEW;
   }
-
   function handleKey(event) {
     const buttons = findFocusable(statusBarRef.current).filter(b => !b.disabled);
     const focusedIndex = buttons.findIndex(b => b.getAttribute('data-btn-id') === focusedBtnId);
     let newFocusedIndex;
-
     if (event.keyCode === keycode.codes.right) {
       newFocusedIndex = (focusedIndex + 1) % buttons.length;
     } else if (event.keyCode === keycode.codes.left) {
@@ -157,20 +149,16 @@ export default function StatusBar(props) {
     } else {
       return;
     }
-
     buttons[newFocusedIndex].focus();
     setFocusedBtnId(buttons[newFocusedIndex].getAttribute('data-btn-id'));
   }
-
   function isHtmlView() {
     return props.editorView !== WYSIWYG_VIEW;
   }
-
   function tabIndexForBtn(itemId) {
     const tabindex = focusedBtnId === itemId ? 0 : -1;
     return tabindex;
   }
-
   function renderPath() {
     return /*#__PURE__*/React.createElement(View, {
       "data-testid": "whole-status-bar-path",
@@ -179,7 +167,6 @@ export default function StatusBar(props) {
       }
     }, renderPathString(props));
   }
-
   function renderA11yButton() {
     const a11y = formatMessage('Accessibility Checker');
     const a11yButtonId = 'rce-a11y-btn';
@@ -197,11 +184,9 @@ export default function StatusBar(props) {
       withBackground: false,
       withBorder: false
     }, /*#__PURE__*/React.createElement(IconA11yLine, null));
-
     if (props.a11yErrorsCount <= 0) {
       return button;
     }
-
     return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
       theme: {
         componentOverrides: {
@@ -215,7 +200,6 @@ export default function StatusBar(props) {
       countUntil: 100
     }, button));
   }
-
   function renderHtmlEditorMessage() {
     const message = props.editorView === PRETTY_HTML_EDITOR_VIEW ? formatMessage('Sadly, the pretty HTML editor is not keyboard accessible. Access the raw HTML editor here.') : formatMessage('Access the pretty HTML editor');
     const label = props.editorView === PRETTY_HTML_EDITOR_VIEW ? formatMessage('Switch to raw HTML Editor') : formatMessage('Switch to pretty HTML Editor');
@@ -238,7 +222,6 @@ export default function StatusBar(props) {
       onFocus: () => setFocusedBtnId('rce-editormessage-btn')
     }, label));
   }
-
   function renderIconButtons() {
     if (isHtmlView()) return null;
     const ai_tools = isFeature('ai_tools');
@@ -257,7 +240,6 @@ export default function StatusBar(props) {
       tabIndex: tabIndexForBtn('rce-ai-btn'),
       onClick: event => {
         event.target.focus(); // FF doesn't focus buttons on click
-
         props.onAI();
       },
       onFocus: () => setFocusedBtnId('rce-ai-btn'),
@@ -279,7 +261,6 @@ export default function StatusBar(props) {
       tabIndex: tabIndexForBtn('rce-kbshortcut-btn'),
       onClick: event => {
         event.target.focus(); // FF doesn't focus buttons on click
-
         props.onKBShortcutModalOpen();
       },
       onFocus: () => setFocusedBtnId('rce-kbshortcut-btn'),
@@ -288,7 +269,6 @@ export default function StatusBar(props) {
       withBorder: false
     }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), a11y_checker && !props.readOnly && isAvailable('ally_checker') && renderA11yButton());
   }
-
   function renderWordCount() {
     if (isHtmlView()) return null;
     const wordCount = formatMessage(`{count, plural,
@@ -312,17 +292,14 @@ export default function StatusBar(props) {
       title: formatMessage('View word and character counts')
     }, wordCount)));
   }
-
   function renderSection3(html_view, fullscreen, resize_handle) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: css(styles.separator)
     }), html_view && renderToggleHtml(), fullscreen && renderFullscreen(), resize_handle && renderResizeHandle());
   }
-
   function descMsg() {
     return preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW ? formatMessage('Shift-O to open the pretty html editor.') : formatMessage('The pretty html editor is not keyboard accessible. Press Shift O to open the raw html editor.');
   }
-
   function renderToggleHtml() {
     const toggleToHtml = formatMessage('Switch to the html editor');
     const toggleToRich = formatMessage('Switch to the rich text editor');
@@ -358,16 +335,13 @@ export default function StatusBar(props) {
       id: "edit-button-desc"
     }, descMsg()));
   }
-
   function renderFullscreen() {
     if (props.readOnly) return null;
     if (!document[FS_ENABLED]) return null;
-
     if (props.editorView === RAW_HTML_EDITOR_VIEW && !('requestFullscreen' in document.body)) {
       // this is safari, which refuses to fullscreen a textarea
       return null;
     }
-
     const fullscreen = props.rceIsFullscreen ? formatMessage('Exit Fullscreen') : formatMessage('Fullscreen');
     return /*#__PURE__*/React.createElement(IconButton, {
       "data-btn-id": "rce-fullscreen-btn",
@@ -384,7 +358,6 @@ export default function StatusBar(props) {
       withBorder: false
     }, props.rceIsFullscreen ? /*#__PURE__*/React.createElement(IconExitFullScreenLine, null) : /*#__PURE__*/React.createElement(IconFullScreenLine, null));
   }
-
   function renderResizeHandle() {
     if (props.rceIsFullscreen) return null;
     return /*#__PURE__*/React.createElement(ResizeHandle, {
@@ -396,7 +369,6 @@ export default function StatusBar(props) {
       }
     });
   }
-
   const flexJustify = isHtmlView() ? 'end' : 'start';
   const html_view = isFeature('html_view') && isAvailable('instructure_html_view');
   const fullscreen = isFeature('fullscreen') && isAvailable('instructure_fullscreen');
@@ -406,7 +378,6 @@ export default function StatusBar(props) {
       componentOverrides: {
         IconButton: {
           secondaryGhostColor: 'rgb(34, 47, 62)' // to match tinymce's button color
-
         }
       }
     }

package/es/rce/alertHandler.js

@@ -28,19 +28,16 @@ export class AlertHandler {
       if (this.alertFunc == null) {
         throw new Error('Tried to alert without alertFunc being set first');
       }
-
       this.alertFunc(alert);
     };
-
     this.alertFunc = alertFunc;
   }
+
   /**
    * Calls the registered alertFunc assuming one has been set, otherwise
    * it throws.
    *
    * @memberof AlertHandler
    */
-
-
 }
 export default new AlertHandler();