@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/StatusBar.js

@@ -1,380 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { arrayOf, bool, func, number, oneOf, string } from 'prop-types';
-import { StyleSheet, css } from 'aphrodite';
-import keycode from 'keycode';
-import { Button, IconButton, CondensedButton } from '@instructure/ui-buttons';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { Badge } from '@instructure/ui-badge';
-import { InstUISettingsProvider } from '@instructure/emotion';
-import { Text } from '@instructure/ui-text';
-import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconA11yLine, IconKeyboardShortcutsLine, IconMiniArrowEndLine, IconFullScreenLine, IconExitFullScreenLine } from '@instructure/ui-icons';
-import formatMessage from '../format-message';
-import ResizeHandle from './ResizeHandle';
-import { FS_ENABLED } from '../util/fullscreenHelpers';
-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
-
-/* eslint-disable react/no-unused-prop-types */
-
-StatusBar.propTypes = {
-  id: string.isRequired,
-  rceIsFullscreen: bool,
-  onChangeView: func.isRequired,
-  path: arrayOf(string),
-  wordCount: number,
-  editorView: oneOf([WYSIWYG_VIEW, PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW]),
-  onResize: func,
-  // react-draggable onDrag handler.
-  onKBShortcutModalOpen: func.isRequired,
-  onA11yChecker: func.isRequired,
-  onFullscreen: func.isRequired,
-  preferredHtmlEditor: oneOf([PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW]),
-  readOnly: bool,
-  a11yBadgeColor: string,
-  a11yErrorsCount: number,
-  onWordcountModalOpen: func.isRequired,
-  disabledPlugins: arrayOf(string)
-};
-StatusBar.defaultProps = {
-  a11yBadgeColor: '#0374B5',
-  a11yErrorsCount: 0,
-  disabledPlugins: []
-};
-/* eslint-enable react/no-unused-prop-types */
-// 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", {
-      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",
-    fontSize: "24px"
-  }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("text", {
-    textAnchor: "middle",
-    x: "12px",
-    y: "18px",
-    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);
-  const statusBarRef = useRef(null);
-  useEffect(() => {
-    const buttons = findFocusable(statusBarRef.current);
-    setFocusedBtnId(buttons[0].getAttribute('data-btn-id'));
-    buttons[0].setAttribute('tabIndex', '0');
-  }, []);
-  useEffect(() => {
-    // the kbshortcut and a11y checker buttons are hidden when in html view
-    // 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
-    // and prevent JAWS from reading the aria-describedby element when switching back to RCE view
-
-
-    const timerid = setTimeout(() => {
-      setIncludeEdtrDesc(!isHtmlView());
-    }, 100);
-    return () => clearTimeout(timerid);
-  }, [props.editorView]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  function isAvailable(plugin) {
-    return !props.disabledPlugins.includes(plugin);
-  }
-
-  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) {
-      newFocusedIndex = (focusedIndex + buttons.length - 1) % buttons.length;
-    } 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"
-    }, renderPathString(props));
-  }
-
-  function renderA11yButton() {
-    const a11y = formatMessage('Accessibility Checker');
-    const button = /*#__PURE__*/React.createElement(IconButton, {
-      "data-btn-id": "rce-a11y-btn",
-      color: "primary",
-      title: a11y,
-      tabIndex: tabIndexForBtn('rce-a11y-btn'),
-      onClick: event => {
-        event.target.focus();
-        props.onA11yChecker();
-      },
-      onFocus: () => setFocusedBtnId('rce-a11y-btn'),
-      screenReaderLabel: a11y,
-      withBackground: false,
-      withBorder: false
-    }, /*#__PURE__*/React.createElement(IconA11yLine, null));
-
-    if (props.a11yErrorsCount <= 0) {
-      return button;
-    }
-
-    return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
-      theme: {
-        componentOverrides: {
-          Badge: {
-            colorPrimary: props.a11yBadgeColor
-          }
-        }
-      }
-    }, /*#__PURE__*/React.createElement(Badge, {
-      count: props.a11yErrorsCount,
-      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');
-    return /*#__PURE__*/React.createElement(View, {
-      "data-testid": "html-editor-message"
-    }, /*#__PURE__*/React.createElement(Button, {
-      "data-btn-id": "rce-editormessage-btn",
-      margin: "0 small",
-      title: message,
-      color: "secondary",
-      size: "small",
-      tabIndex: tabIndexForBtn('rce-editormessage-btn'),
-      onClick: event => {
-        event.target.focus();
-        props.onChangeView(props.editorView === PRETTY_HTML_EDITOR_VIEW ? RAW_HTML_EDITOR_VIEW : PRETTY_HTML_EDITOR_VIEW);
-      },
-      onFocus: () => setFocusedBtnId('rce-editormessage-btn')
-    }, label));
-  }
-
-  function renderIconButtons() {
-    if (isHtmlView()) return null;
-    const kbshortcut = formatMessage('View keyboard shortcuts');
-    return /*#__PURE__*/React.createElement(View, {
-      display: "inline-block",
-      padding: "0 x-small"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      "data-btn-id": "rce-kbshortcut-btn",
-      color: "primary",
-      "aria-haspopup": "dialog",
-      title: kbshortcut,
-      tabIndex: tabIndexForBtn('rce-kbshortcut-btn'),
-      onClick: event => {
-        event.target.focus(); // FF doesn't focus buttons on click
-
-        props.onKBShortcutModalOpen();
-      },
-      onFocus: () => setFocusedBtnId('rce-kbshortcut-btn'),
-      screenReaderLabel: kbshortcut,
-      withBackground: false,
-      withBorder: false
-    }, /*#__PURE__*/React.createElement(IconKeyboardShortcutsLine, null)), !props.readOnly && isAvailable('ally_checker') && renderA11yButton());
-  }
-
-  function renderWordCount() {
-    if (isHtmlView()) return null;
-    const wordCount = formatMessage(`{count, plural,
-         =0 {0 words}
-        one {1 word}
-      other {# words}
-    }`, {
-      count: props.wordCount
-    });
-    return /*#__PURE__*/React.createElement(View, {
-      display: "inline-block",
-      padding: "0 small",
-      "data-testid": "status-bar-word-count"
-    }, /*#__PURE__*/React.createElement(CondensedButton, {
-      "data-btn-id": "rce-wordcount-btn",
-      color: "primary",
-      onClick: props.onWordcountModalOpen,
-      tabIndex: tabIndexForBtn('rce-wordcount-btn'),
-      title: formatMessage('View word and character counts')
-    }, wordCount));
-  }
-
-  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');
-    const toggleToHtmlTip = formatMessage('Click or shift-click for the html editor.');
-    const descText = isHtmlView() ? toggleToRich : toggleToHtml;
-    const titleText = isHtmlView() ? toggleToRich : toggleToHtmlTip;
-    return /*#__PURE__*/React.createElement(View, {
-      display: "inline-block",
-      padding: "0 0 0 x-small"
-    }, !props.readOnly && /*#__PURE__*/React.createElement(IconButton, {
-      "data-btn-id": "rce-edit-btn",
-      color: "primary",
-      onClick: event => {
-        props.onChangeView(isHtmlView() ? WYSIWYG_VIEW : getHtmlEditorView(event));
-      },
-      onKeyUp: event => {
-        if (props.editorView === WYSIWYG_VIEW && event.shiftKey && event.keyCode === 79) {
-          const html_view = preferredHtmlEditor() === RAW_HTML_EDITOR_VIEW ? PRETTY_HTML_EDITOR_VIEW : RAW_HTML_EDITOR_VIEW;
-          props.onChangeView(html_view);
-        }
-      },
-      onFocus: () => setFocusedBtnId('rce-edit-btn'),
-      title: titleText,
-      tabIndex: tabIndexForBtn('rce-edit-btn'),
-      "aria-describedby": includeEdtrDesc ? 'edit-button-desc' : undefined,
-      screenReaderLabel: descText,
-      withBackground: false,
-      withBorder: false
-    }, emptyTagIcon()), includeEdtrDesc && /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'none'
-      },
-      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",
-      color: "primary",
-      title: fullscreen,
-      tabIndex: tabIndexForBtn('rce-fullscreen-btn'),
-      onClick: event => {
-        event.target.focus();
-        props.onFullscreen();
-      },
-      onFocus: () => setFocusedBtnId('rce-fullscreen-btn'),
-      screenReaderLabel: fullscreen,
-      withBackground: false,
-      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, {
-      "data-btn-id": "rce-resize-handle",
-      onDrag: props.onResize,
-      tabIndex: tabIndexForBtn('rce-resize-handle'),
-      onFocus: () => {
-        setFocusedBtnId('rce-resize-handle');
-      }
-    });
-  }
-
-  const flexJustify = isHtmlView() ? 'end' : 'start';
-  return /*#__PURE__*/React.createElement(Flex, {
-    id: props.id,
-    padding: "x-small 0 x-small x-small",
-    "data-testid": "RCEStatusBar",
-    justifyItems: flexJustify,
-    ref: statusBarRef,
-    onKeyDown: handleKey
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true
-  }, isHtmlView() ? renderHtmlEditorMessage() : renderPath()), /*#__PURE__*/React.createElement(Flex.Item, {
-    role: "toolbar",
-    title: formatMessage('Editor Statusbar')
-  }, renderIconButtons(), /*#__PURE__*/React.createElement("div", {
-    className: css(styles.separator)
-  }), isAvailable('instructure_wordcount') && renderWordCount(), /*#__PURE__*/React.createElement("div", {
-    className: css(styles.separator)
-  }), isAvailable('instructure_html_view') && renderToggleHtml(), isAvailable('instructure_fullscreen') && renderFullscreen(), renderResizeHandle()));
-}
-const styles = StyleSheet.create({
-  separator: {
-    display: 'inline-block',
-    'box-sizing': 'border-box',
-    'border-right': '1px solid #ccc',
-    width: '1px',
-    height: '1.5rem',
-    position: 'relative',
-    top: '.5rem'
-  }
-});

package/lib/rce/__mocks__/_mockCryptoEs.js

@@ -1,124 +0,0 @@
-/*
- * Copyright (C) 2023 - 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/>.
- */
-export default {
-  lib: {
-    Base: {},
-    WordArray: {},
-    BufferedBlockAlgorithm: {},
-    Hasher: {},
-    Cipher: {},
-    StreamCipher: {},
-    BlockCipherMode: {},
-    BlockCipher: {},
-    CipherParams: {},
-    SerializableCipher: {},
-    PasswordBasedCipher: {}
-  },
-  x64: {
-    Word: {},
-    WordArray: {}
-  },
-  enc: {
-    Hex: {},
-    Latin1: {},
-    Utf8: {
-      parse: () => {}
-    },
-    Utf16: {},
-    Utf16BE: {},
-    Utf16LE: {},
-    Base64: {},
-    Base64url: {}
-  },
-  algo: {
-    HMAC: {},
-    MD5: {},
-    SHA1: {},
-    SHA224: {},
-    SHA256: {},
-    SHA384: {},
-    SHA512: {},
-    SHA3: {},
-    RIPEMD160: {},
-    PBKDF2: {},
-    EvpKDF: {},
-    AES: {},
-    DES: {},
-    TripleDES: {},
-    Rabbit: {},
-    RabbitLegacy: {},
-    RC4: {},
-    RC4Drop: {},
-    Blowfish: {}
-  },
-  mode: {
-    CBC: {},
-    CFB: {},
-    CTR: {},
-    CTRGladman: {},
-    ECB: {},
-    OFB: {}
-  },
-  pad: {
-    Pkcs7: {},
-    AnsiX923: {},
-    Iso10126: {},
-    Iso97971: {},
-    NoPadding: {},
-    ZeroPadding: {}
-  },
-  format: {
-    OpenSSL: {},
-    Hex: {}
-  },
-  kdf: {
-    OpenSSL: {}
-  },
-  MD5: {},
-  HmacMD5: {},
-  SHA1: {},
-  HmacSHA1: {},
-  SHA224: {},
-  HmacSHA224: {},
-  SHA256: {},
-  HmacSHA256: {},
-  SHA384: {},
-  HmacSHA384: {},
-  SHA512: {},
-  HmacSHA512: {},
-  SHA3: {},
-  HmacSHA3: {},
-  RIPEMD160: {},
-  HmacRIPEMD160: {},
-  PBKDF2: {},
-  EvpKDF: {},
-  AES: {},
-  DES: {},
-  TripleDES: {},
-  Rabbit: {},
-  RabbitLegacy: {},
-  RC4: {
-    encrypt: () => {},
-    decrypt: () => {}
-  },
-  RC4Drop: {
-    encrypt: () => {},
-    decrypt: () => {}
-  },
-  Blowfish: {}
-};

package/lib/rce/__mocks__/styleMock.js

@@ -1,18 +0,0 @@
-/*
- * 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/>.
- */
-module.export = {};

package/lib/rce/__mocks__/tinymceReact.js

@@ -1,55 +0,0 @@
-/*
- * 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/>.
- */
-
-/*
- * This is a mock for the @tinymce/tinymce-react Editor component
- * and the inner tinymce editor object
- * jest.config.js moduleNameMapper has jest load this
- * file in response to
- * import {Editor} from '@tinymce/tinymce-react'
- * in RCEWrapper.js
- */
-import React, { useEffect, useRef } from 'react';
-import FakeEditor from '../__tests__/FakeEditor';
-export function Editor(props) {
-  const editorRef = useRef(null);
-  const textareaRef = useRef(null);
-  const tinymceEditor = useRef(new FakeEditor(props));
-  window.tinymce.editors[0] = tinymceEditor.current;
-  useEffect(() => {
-    tinymceEditor.current.on('change', handleChange);
-    props.onInit && props.onInit({}, tinymceEditor.current); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  function handleChange(event) {
-    var _props$onEditorChange;
-
-    (_props$onEditorChange = props.onEditorChange) === null || _props$onEditorChange === void 0 ? void 0 : _props$onEditorChange.call(props, event.target.value);
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: editorRef
-  }, /*#__PURE__*/React.createElement("textarea", {
-    ref: textareaRef,
-    id: props.id,
-    name: props.textareaName,
-    value: props.initialValue,
-    onInput: handleChange,
-    onChange: handleChange
-  }));
-}

package/lib/rce/alertHandler.js

@@ -1,46 +0,0 @@
-/*
- * Copyright (C) 2019 - 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/>.
- */
-
-/**
- * This class acts as a store/registry of sorts.  This enables us to
- * talk between the UI components of the RCE and the API pieces.
- *
- * @class AlertHandler
- */
-export class AlertHandler {
-  constructor(alertFunc) {
-    this.handleAlert = alert => {
-      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();