@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/RCEWrapperProps.js

@@ -1,130 +0,0 @@
-/*
- * 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/>.
- */
-import PropTypes from 'prop-types';
-import { trayPropTypes } from './plugins/shared/CanvasContentTray';
-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({
-  // name of the toolbar the items are added to
-  // if this toolbar doesn't exist, it is created
-  // tinymce toolbar config does not
-  // include a key to identify the individual toolbars, just a name
-  // which is translated. This toolbar's name must be translated
-  // in order to be merged correctly.
-  name: PropTypes.string.isRequired,
-  // items added to the toolbar
-  // each is the name of the button some plugin has
-  // 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
-// registered with tinymce. If it does not exist in the
-// default menubar, it will be added.
-PropTypes.shape({
-  // if this is a new menu in the menubar, title is it's label.
-  // if these are items being merged into an existing menu, title is ignored
-  title: PropTypes.string,
-  // items is a space separated list it menu_items
-  // some plugin has registered with tinymce
-  items: PropTypes.string.isRequired
-}));
-export const ltiToolsPropType = PropTypes.arrayOf(PropTypes.shape({
-  // id of the tool
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // is this a favorite tool?
-  favorite: PropTypes.bool,
-  name: PropTypes.string,
-  description: PropTypes.string,
-  icon_url: PropTypes.string,
-  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
-  PropTypes.shape({
-    icon_url: PropTypes.string
-  }), PropTypes.any])
-}));
-export const editorOptionsPropType = PropTypes.shape({
-  // height of the RCE.
-  // if a number interpreted as pixels.
-  // if a string as a CSS value.
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  // entries you want merged into the toolbar. See toolBarPropType above.
-  toolbar: toolbarPropType,
-  // entries you want merged into to the menus. See menuPropType above.
-  // If an entry defines a new menu, tinymce's menubar config option will
-  // be updated for you. In fact, if you provide an editorOptions.menubar value
-  // it will be overwritten.
-  menu: menuPropType,
-  // additional plugins that get merged into the default list of plugins
-  // it is up to you to import the plugin's definition which will
-  // register it and any related toolbar or menu entries with tinymce.
-  plugins: PropTypes.arrayOf(PropTypes.string),
-  // is this RCE readonly?
-  readonly: PropTypes.bool,
-  selector: PropTypes.string,
-  init_instance_callback: PropTypes.func
-});
-export const externalToolsConfigPropType = PropTypes.shape({
-  // List of iframe allow statements to used with LTI iframes.
-  ltiIframeAllowances: PropTypes.arrayOf(PropTypes.string),
-  // Tool id of the LTI tool using the RCE. Used to allow the RCE to launch additional LTI tools from Canvas.
-  containingCanvasLtiToolId: PropTypes.string,
-  // Override URL for LTI resource selection
-  resourceSelectionUrlOverride: PropTypes.string,
-  isA2StudentView: PropTypes.bool,
-  maxMruTools: PropTypes.number
-});
-export const rceWrapperPropTypes = {
-  autosave: PropTypes.shape({
-    enabled: PropTypes.bool,
-    maxAge: PropTypes.number
-  }),
-  canvasOrigin: PropTypes.string,
-  defaultContent: PropTypes.string,
-  editorOptions: editorOptionsPropType,
-  handleUnmount: PropTypes.func,
-  editorView: PropTypes.oneOf([WYSIWYG_VIEW, PRETTY_HTML_EDITOR_VIEW, RAW_HTML_EDITOR_VIEW]),
-  renderKBShortcutModal: PropTypes.bool,
-  id: PropTypes.string,
-  language: PropTypes.string,
-  liveRegion: PropTypes.func.isRequired,
-  ltiTools: ltiToolsPropType,
-  onContentChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onInitted: PropTypes.func,
-  onRemove: PropTypes.func,
-  textareaClassName: PropTypes.string,
-  textareaId: PropTypes.string.isRequired,
-  readOnly: PropTypes.bool,
-  tinymce: PropTypes.object,
-  trayProps: trayPropTypes,
-  toolbar: toolbarPropType,
-  menu: menuPropType,
-  instRecordDisabled: PropTypes.bool,
-  highContrastCSS: PropTypes.arrayOf(PropTypes.string),
-  maxInitRenderedRCEs: PropTypes.number,
-  use_rce_icon_maker: PropTypes.bool,
-  features: PropTypes.objectOf(PropTypes.bool),
-  flashAlertTimeout: PropTypes.number,
-  timezone: PropTypes.string,
-  userCacheKey: PropTypes.string,
-  externalToolsConfig: externalToolsConfigPropType
-};

package/lib/rce/RceHtmlEditor.js

@@ -1,142 +0,0 @@
-/*
- * Copyright (C) 2020 - 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, { useCallback, useEffect, useRef, useState } from 'react';
-import { func, string } from 'prop-types';
-import formatMessage from '../format-message';
-import { CodeEditor } from '@instructure/ui-code-editor';
-import beautify from 'js-beautify';
-const RceHtmlEditor = /*#__PURE__*/React.forwardRef((_ref, editorRef) => {
-  let {
-    onFocus,
-    ...props
-  } = _ref;
-  const [code, setCode] = useState(props.code);
-  const label = formatMessage('html code editor');
-  const [dir, setDir] = useState(getComputedStyle(document.body, null).direction);
-  const [codeMirrorEditorDiv, setCodeMirrorEditorDiv] = useState(null);
-  useEffect(() => {
-    ;
-
-    (async () => {
-      const p = new Promise(resolve => {
-        const timerid = setInterval(() => {
-          // scoping querySelector to the container div makes sure we're targeting this CodeEditor
-          // The CodeMirror docs (https://codemirror.net/doc/manual.html#styling)
-          // say this is the element we use to set the editor's height
-          const editor = editorRef.current.querySelector('.CodeMirror');
-
-          if (editor) {
-            clearInterval(timerid);
-            setCodeMirrorEditorDiv(editor);
-            resolve();
-          }
-        }, 60);
-      });
-      await p;
-    })();
-  }, [editorRef]);
-  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
-    // of its container unless there's wide content.
-    // Override that.
-    // It would be nice to use webpack's style-loader
-    // but babel doesn't copy css files to its output
-    // dir, and the instui babel plugin mangles class names
-    // the simplest approach is to manually inject the stylesheet
-    if (!document.getElementById('RceHtmlEditorStyle')) {
-      const stylesheet = document.createElement('style');
-      stylesheet.setAttribute('id', 'RceHtmlEditorStyle');
-      stylesheet.setAttribute('type', 'text/css');
-      stylesheet.textContent = `
-        .RceHtmlEditor label {
-          display: block;
-          margin-bottom: 0;  /* get rid of the margin on CodeEditor's label */
-        }
-      `;
-      document.head.appendChild(stylesheet);
-    } // odds are, this won't change the dir.
-
-
-    setDir(getComputedStyle(editorRef.current || document.body, null).direction);
-  }, [dir, editorRef]);
-  useEffect(() => {
-    if (codeMirrorEditorDiv) {
-      codeMirrorEditorDiv.CodeMirror.setSize(null, props.height);
-      codeMirrorEditorDiv.style.margin = '0';
-      codeMirrorEditorDiv.style.border = '0';
-    }
-  }, [codeMirrorEditorDiv, props.height]);
-  const isFocused = useRef(false); // move cursor to the top of the html code when the editor is focused for the first time
-
-  const handleFocus = useCallback((editor, event) => {
-    if (!isFocused.current) {
-      editor.setCursor(0, 0);
-      isFocused.current = true;
-    }
-
-    onFocus(event);
-  }, [onFocus]); // setting height on the container keeps the RCE toolbar from jumping
-
-  return /*#__PURE__*/React.createElement("div", {
-    ref: editorRef,
-    className: "RceHtmlEditor",
-    style: {
-      height: props.height,
-      overflow: 'hidden',
-      textAlign: 'start'
-    }
-  }, /*#__PURE__*/React.createElement(CodeEditor, {
-    label: label,
-    language: "html",
-    options: {
-      lineNumbers: true,
-      lineWrapping: true,
-      autofocus: false,
-      spellcheck: true,
-      extraKeys: {
-        Tab: false,
-        'Shift-Tab': false
-      },
-      screenReaderLabel: label,
-      direction: dir,
-      rtlMoveVisually: true
-    },
-    value: code,
-    onChange: value => {
-      setCode(value);
-      props.onChange(value);
-    },
-    onFocus: handleFocus
-  }));
-});
-RceHtmlEditor.propTypes = {
-  code: string.isRequired,
-  height: string,
-  onChange: func,
-  onFocus: func
-};
-RceHtmlEditor.defaultProps = {
-  height: 'auto',
-  onChange: _value => {},
-  onFocus: () => {}
-};
-export default RceHtmlEditor;

package/lib/rce/ResizeHandle.js

@@ -1,102 +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, { useState } from 'react';
-import { func, string, number } from 'prop-types';
-import { DraggableCore } from 'react-draggable';
-import keycode from 'keycode';
-import { View } from '@instructure/ui-view';
-import { IconDragHandleLine } from '@instructure/ui-icons';
-import DraggingBlocker from './DraggingBlocker';
-import formatMessage from '../format-message';
-const RESIZE_STEP = 16;
-export default function ResizeHandle(props) {
-  function handleKey(event) {
-    if (event.keyCode === keycode.codes.up) {
-      event.preventDefault();
-      event.stopPropagation();
-      props.onDrag(event, {
-        deltaY: -RESIZE_STEP
-      });
-    } else if (event.keyCode === keycode.codes.down) {
-      event.preventDefault();
-      event.stopPropagation();
-      props.onDrag(event, {
-        deltaY: RESIZE_STEP
-      });
-    }
-  }
-
-  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
-  // 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'),
-    title: formatMessage('Resize'),
-    as: "span",
-    borderRadius: "medium",
-    display: "inline-block",
-    withFocusOutline: isFocused,
-    padding: "0 xx-small",
-    position: "relative",
-    role: "button",
-    "data-btn-id": props['data-btn-id'],
-    tabIndex: props.tabIndex,
-    onKeyDown: handleKey,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  }, /*#__PURE__*/React.createElement(DraggableCore, {
-    offsetParent: document.body,
-    onDrag: props.onDrag,
-    onStart: handleDragStart,
-    onStop: handleDragStop
-  }, /*#__PURE__*/React.createElement(View, {
-    cursor: "ns-resize"
-  }, /*#__PURE__*/React.createElement(IconDragHandleLine, null))), /*#__PURE__*/React.createElement(DraggingBlocker, {
-    dragging: dragging
-  }));
-}
-ResizeHandle.propTypes = {
-  onDrag: func,
-  onFocus: func,
-  tabIndex: number,
-  'data-btn-id': string
-};
-ResizeHandle.defaultProps = {
-  onDrag: () => {},
-  tabIndex: -1
-};

package/lib/rce/RestoreAutoSaveModal.js

@@ -1,82 +0,0 @@
-/*
- * Copyright (C) 2020 - 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, { useState } from 'react';
-import { bool, func, string } from 'prop-types';
-import { Alert } from '@instructure/ui-alerts';
-import { Heading } from '@instructure/ui-heading';
-import { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { ToggleGroup } from '@instructure/ui-toggle-details';
-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,
-    label: formatMessage('Restore auto-save?'),
-    open: props.open,
-    shouldCloseOnDocumentClick: false,
-    shouldReturnFocus: true,
-    size: "medium",
-    onDismiss: props.onNo
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "medium",
-    color: "primary",
-    onClick: props.onNo,
-    screenReaderLabel: formatMessage('Close')
-  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Found auto-saved content'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    margin: "small"
-  }, /*#__PURE__*/React.createElement(Alert, {
-    variant: "info",
-    margin: "none"
-  }, formatMessage('Auto-saved content exists. Would you like to load the auto-saved content instead?'))), /*#__PURE__*/React.createElement(ToggleGroup, {
-    summary: formatMessage('Preview'),
-    toggleLabel: toggleLabel,
-    onToggle: (_e, expanded) => {
-      setPreviewExpanded(expanded);
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    dangerouslySetInnerHTML: {
-      __html: props.savedContent
-    },
-    padding: "0 x-small",
-    overflowX: "auto"
-  }))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
-    margin: "0 x-small",
-    onClick: props.onNo
-  }, formatMessage('No')), "\xA0", /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    onClick: props.onYes
-  }, formatMessage('Yes'))));
-}
-RestoreAutoSaveModal.propTypes = {
-  savedContent: string,
-  open: bool.isRequired,
-  onNo: func.isRequired,
-  onYes: func.isRequired
-};
-RestoreAutoSaveModal.defaultProps = {
-  savedContent: ''
-};

package/lib/rce/ShowOnFocusButton/index.js

@@ -1,93 +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 component is a near verbatim copy of
- * canvas-lms/packages/canvas-planner/src/components/ShowOnFocusButton
- * which is necessary until we have a package for sharing components
- * among canvas' sub-packages.
- */
-import React, { Component } from 'react';
-import { func, node, oneOfType, string } from 'prop-types';
-import { IconButton } from '@instructure/ui-buttons';
-const hideStyle = {
-  position: 'absolute',
-  left: '-9999px'
-};
-export default class ShowOnFocusButton extends Component {
-  constructor() {
-    super(...arguments);
-    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,
-      "data-testid": "ShowOnFocusButton__button",
-      color: "primary",
-      "aria-haspopup": "dialog",
-      margin: this.props.margin,
-      ref: btn => {
-        this.btnRef = btn;
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onClick: this.props.onClick,
-      screenReaderLabel: this.props.screenReaderLabel,
-      withBackground: false,
-      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,
-  // func === functional component
-  onClick: func,
-  screenReaderLabel: string.isRequired,
-  margin: string,
-  id: string.isRequired
-};