@instructure/canvas-rce 5.13.2 → 5.13.5

package/es/rce/plugins/shared/Upload/PanelFilter.js

@@ -0,0 +1,144 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - 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 { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { IconButton } from '@instructure/ui-buttons';
+import { Flex } from '@instructure/ui-flex';
+import { IconSearchLine, IconXLine } from '@instructure/ui-icons';
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { TextInput } from '@instructure/ui-text-input';
+import formatMessage from 'format-message';
+import React, { useEffect, useState } from 'react';
+
+function shouldSearch(searchString) {
+  return searchString.length === 0 || searchString.length >= 3;
+}
+
+export default function PanelFilter(_ref) {
+  let {
+    mountNode,
+    onChange,
+    sortValue,
+    searchString,
+    contentType
+  } = _ref;
+  const [pendingSearchString, setPendingSearchString] = useState(searchString);
+  const [searchInputTimer, setSearchInputTimer] = useState(0); // only run on mounting to trigger change to correct contextType
+
+  useEffect(() => {
+    onChange({
+      contentType
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function doSearch(value) {
+    if (shouldSearch(value)) {
+      if (searchInputTimer) {
+        window.clearTimeout(searchInputTimer);
+        setSearchInputTimer(0);
+      }
+
+      onChange({
+        searchString: value
+      });
+    }
+  }
+
+  function handleChangeSearch(value) {
+    setPendingSearchString(value);
+
+    if (searchInputTimer) {
+      window.clearTimeout(searchInputTimer);
+    }
+
+    const tid = window.setTimeout(() => doSearch(value), 250);
+    setSearchInputTimer(tid);
+  }
+
+  function handleClear() {
+    handleChangeSearch('');
+  }
+
+  function renderClearButton() {
+    if (pendingSearchString) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        screenReaderLabel: formatMessage('Clear'),
+        onClick: handleClear,
+        withBorder: false,
+        withBackground: false,
+        size: "small"
+      }, /*#__PURE__*/React.createElement(IconXLine, null));
+    }
+
+    return undefined;
+  }
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    margin: "none xx-large none none",
+    gap: "small",
+    alignItems: "start"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: false,
+    margin: "none none none none"
+  }, /*#__PURE__*/React.createElement(SimpleSelect, {
+    "data-testid": "filter-sort-by",
+    mountNode: mountNode,
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Sort By')),
+    assistiveText: formatMessage('Use arrow keys to navigate options.'),
+    onChange: (e, selection) => {
+      onChange({
+        sortValue: selection.value
+      });
+    },
+    value: sortValue
+  }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "date_added",
+    value: "date_added"
+  }, formatMessage('Date Added')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: "alphabetical",
+    value: "alphabetical"
+  }, formatMessage('Alphabetical')))), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    margin: "none xx-large none none"
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
+    renderBeforeInput: /*#__PURE__*/React.createElement(IconSearchLine, {
+      inline: false
+    }),
+    renderAfterInput: renderClearButton(),
+    messages: [{
+      type: 'hint',
+      text: formatMessage('Enter at least 3 characters to search')
+    }],
+    placeholder: formatMessage('Search'),
+    value: pendingSearchString,
+    onChange: (e, value) => handleChangeSearch(value),
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        doSearch(pendingSearchString);
+      }
+    }
+  })));
+}
+PanelFilter.propTypes = {
+  sortValue: _pt.string.isRequired,
+  searchString: _pt.string.isRequired,
+  contentType: _pt.string.isRequired
+};

package/es/rce/plugins/shared/Upload/UploadFile.js

@@ -28,12 +28,14 @@ import { StoreProvider } from '../StoreContext';
 import Bridge from '../../../../bridge';
 import UploadFileModal from './UploadFileModal';
 import RCEWrapper from '../../../RCEWrapper';
+import { UploadCanvasPanelIds } from '../canvasContentUtils';
 export const UploadFilePanelIds = ['COMPUTER', 'URL'];
+export const FullPanelIds = [...UploadCanvasPanelIds, ...UploadFilePanelIds];
 
 /**
  * Handles uploading data based on what type of data is submitted.
  */
-export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, source) {
+export const handleSubmit = function (editor, accept, selectedPanel, uploadData, storeProps, _source) {
   let afterInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => undefined;
   Bridge.focusEditor(RCEWrapper.getByEditor(editor)); // necessary since it blurred when the modal opened
 
@@ -116,6 +118,8 @@ export function UploadFile(_ref) {
     panels,
     onDismiss,
     requireA11yAttributes = true,
+    forBlockEditorUse = false,
+    uploading = false,
     trayProps,
     canvasOrigin,
     onSubmit = handleSubmit,
@@ -158,7 +162,9 @@ export function UploadFile(_ref) {
     accept: accept,
     modalBodyWidth: modalBodyWidth,
     modalBodyHeight: modalBodyHeight,
-    requireA11yAttributes: requireA11yAttributes
+    requireA11yAttributes: requireA11yAttributes,
+    forBlockEditorUse: forBlockEditorUse,
+    uploading: uploading
   }));
 }
 UploadFile.propTypes = {
@@ -166,6 +172,8 @@ UploadFile.propTypes = {
   label: _pt.string.isRequired,
   panels: _pt.array,
   requireA11yAttributes: _pt.bool,
+  forBlockEditorUse: _pt.bool,
+  uploading: _pt.bool,
   trayProps: _pt.object,
   canvasOrigin: _pt.string
 };

package/es/rce/plugins/shared/Upload/UploadFileModal.js

@@ -29,6 +29,8 @@ import RceApiSource from '../../../../rcs/api';
 import ImageOptionsForm from '../ImageOptionsForm';
 import UsageRightsSelectBox from './UsageRightsSelectBox';
 import { View } from '@instructure/ui-view';
+import { UploadCanvasPanelIds, CanvasPanelTitles } from '../canvasContentUtils';
+const CanvasContentPanel = /*#__PURE__*/React.lazy(() => import('./CanvasContentPanel'));
 const ComputerPanel = /*#__PURE__*/React.lazy(() => import('./ComputerPanel'));
 const UrlPanel = /*#__PURE__*/React.lazy(() => import('./UrlPanel'));
 
@@ -51,6 +53,7 @@ function shouldBeDisabled(_ref, selectedPanel, usageRightNotSet) {
       return !fileUrl;
 
     default:
+      if (UploadCanvasPanelIds.includes(selectedPanel)) return !fileUrl;
       return false;
     // When in doubt, don't disable (but we shouldn't get here either)
   }
@@ -72,7 +75,9 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     accept,
     modalBodyWidth,
     modalBodyHeight,
-    requireA11yAttributes = true
+    requireA11yAttributes = true,
+    forBlockEditorUse = false,
+    uploading = false
   } = _ref2;
   const [theFile, setFile] = useState(preselectedFile);
   const [error, setError] = useState(null);
@@ -103,6 +108,11 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setDisplayAs(event.target.value);
   }
 
+  const handleRequestTabChange = index => {
+    setSelectedPanel(panels[index]);
+    setFileUrl('');
+  };
+
   const submitDisabled = shouldBeDisabled({
     fileUrl,
     theFile,
@@ -119,6 +129,11 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     host: trayProps.host,
     canvasOrigin
   });
+
+  if (forBlockEditorUse && !['COMPUTER', 'URL'].includes(selectedPanel)) {
+    requireA11yAttributes = false;
+  }
+
   return /*#__PURE__*/React.createElement(Modal, {
     "data-mce-component": true,
     as: "form",
@@ -130,7 +145,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onSubmit: e => {
       e.preventDefault();
 
-      if (submitDisabled) {
+      if (submitDisabled || uploading) {
         return false;
       }
 
@@ -160,7 +175,7 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       let {
         index
       } = _ref3;
-      return setSelectedPanel(panels[index]);
+      return handleRequestTabChange(index);
     }
   }, panels.map(panel => {
     switch (panel) {
@@ -177,7 +192,6 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
             size: "large"
           })
         }, /*#__PURE__*/React.createElement(ComputerPanel, {
-          editor: editor,
           theFile: theFile,
           setFile: setFile,
           setError: setError,
@@ -205,9 +219,28 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           fileUrl: fileUrl,
           setFileUrl: setFileUrl
         })));
-    }
 
-    return null;
+      default:
+        if (UploadCanvasPanelIds.includes(panel)) {
+          return /*#__PURE__*/React.createElement(Tabs.Panel, {
+            key: panel,
+            renderTitle: () => CanvasPanelTitles[panel],
+            isSelected: selectedPanel === panel
+          }, /*#__PURE__*/React.createElement(Suspense, {
+            fallback: /*#__PURE__*/React.createElement(Spinner, {
+              renderTitle: formatMessage('Loading'),
+              size: "large"
+            })
+          }, /*#__PURE__*/React.createElement(CanvasContentPanel, {
+            trayProps: trayProps,
+            canvasOrigin: canvasOrigin,
+            plugin: panel,
+            setFileUrl: setFileUrl
+          })));
+        }
+
+        return null;
+    }
   })), // We shouldn't show the accordions until the session data is loaded.
   Object.keys(contentProps.session || {}).length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, selectedPanel === 'COMPUTER' && requiresUsageRights && /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -245,28 +278,31 @@ const UploadFileModal = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     handleAltTextChange: handleAltTextChange,
     handleIsDecorativeChange: handleIsDecorativeChange,
     handleDisplayAsChange: handleDisplayAsChange,
-    hideDimensions: true
+    hideDimensions: true,
+    forBlockEditorUse: forBlockEditorUse
   }))))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onDismiss
   }, formatMessage('Close')), "\xA0", /*#__PURE__*/React.createElement(Button, {
     color: "primary",
     type: "submit",
-    disabled: submitDisabled
-  }, formatMessage('Submit'))));
+    disabled: submitDisabled || uploading
+  }, uploading ? formatMessage('Submitting...') : formatMessage('Submit'))));
 });
 UploadFileModal.propTypes = {
-  editor: object.isRequired,
+  editor: object,
   contentProps: object,
   trayProps: object,
   canvasOrigin: string,
   onSubmit: func,
   onDismiss: func.isRequired,
-  panels: arrayOf(oneOf(['COMPUTER', 'URL'])),
+  panels: arrayOf(oneOf(['COMPUTER', 'URL', ...UploadCanvasPanelIds])),
   label: string.isRequired,
   accept: oneOfType([arrayOf(string), string]),
   modalBodyWidth: number,
   modalBodyHeight: number,
   requireA11yAttributes: bool,
+  forBlockEditorUse: bool,
+  uploading: bool,
   preselectedFile: object // JS File
 
 };

package/es/rce/plugins/shared/Upload/UsageRightsSelectBox.js

@@ -21,25 +21,6 @@ import formatMessage from '../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { View } from '@instructure/ui-view';
 import { TextInput } from '@instructure/ui-text-input';
-const CONTENT_OPTIONS = [{
-  display: formatMessage('Choose usage rights...'),
-  value: 'choose'
-}, {
-  display: formatMessage('I hold the copyright'),
-  value: 'own_copyright'
-}, {
-  display: formatMessage('I have obtained permission to use this file.'),
-  value: 'used_by_permission'
-}, {
-  display: formatMessage('The material is in the public domain'),
-  value: 'public_domain'
-}, {
-  display: formatMessage('The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws'),
-  value: 'fair_use'
-}, {
-  display: formatMessage('The material is licensed under Creative Commons'),
-  value: 'creative_commons'
-}];
 
 const ShowCreativeCommonsOptions = _ref => {
   let {
@@ -96,6 +77,25 @@ const UsageRightsSelectBox = _ref3 => {
   const showCreativeCommonsOptions = usageRight === 'creative_commons';
   const [licenseOptions, setLicenseOptions] = React.useState([]);
   const [showMessage, setShowMessage] = React.useState(showMessageProp);
+  const CONTENT_OPTIONS = [{
+    display: formatMessage('Choose usage rights...'),
+    value: 'choose'
+  }, {
+    display: formatMessage('I hold the copyright'),
+    value: 'own_copyright'
+  }, {
+    display: formatMessage('I have obtained permission to use this file.'),
+    value: 'used_by_permission'
+  }, {
+    display: formatMessage('The material is in the public domain'),
+    value: 'public_domain'
+  }, {
+    display: formatMessage('The material is subject to an exception - e.g. fair use, the right to quote, or others under applicable copyright laws'),
+    value: 'fair_use'
+  }, {
+    display: formatMessage('The material is licensed under Creative Commons'),
+    value: 'creative_commons'
+  }];
   React.useEffect(() => {
     function getUsageRightsOptions() {
       fetch(apiUrl()).then(res => res.text()).then(res => setLicenseOptions(JSON.parse(res))).catch(() => {});
@@ -161,7 +161,7 @@ const UsageRightsSelectBox = _ref3 => {
 UsageRightsSelectBox.propTypes = {
   usageRightsState: PropTypes.shape({
     ccLicense: PropTypes.string,
-    usageRight: PropTypes.oneOf(Object.values(CONTENT_OPTIONS).map(o => o.value)),
+    usageRight: PropTypes.oneOf(['choose', 'own_copyright', 'used_by_permission', 'public_domain', 'fair_use', 'creative_commons']),
     copyrightHolder: PropTypes.string
   }),
   setUsageRightsState: PropTypes.func,

package/es/rce/plugins/shared/Upload/index.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (C) 2024 - 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 { UploadFilePanelIds, handleSubmit, UploadFile } from './UploadFile';
+export { UploadFilePanelIds, handleSubmit, UploadFile };

package/es/rce/plugins/shared/ai_tools/AIResponseModal.js

@@ -0,0 +1,70 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - 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 from 'react';
+import formatMessage from '../../../../format-message';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Heading } from '@instructure/ui-heading';
+import { Modal } from '@instructure/ui-modal';
+
+const AIResponseModal = _ref => {
+  let {
+    open,
+    html,
+    onClose,
+    onInsert,
+    onReplace
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Modal, {
+    open: open,
+    onDismiss: onClose,
+    size: "medium",
+    label: formatMessage('AI Response')
+  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onClose,
+    placement: "end",
+    offset: "medium",
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: "h3"
+  }, "AI Response")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  })), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose,
+    margin: "medium 0 0 0"
+  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Button, {
+    onClick: onReplace,
+    margin: "medium 0 0 medium"
+  }, formatMessage('Replace')), /*#__PURE__*/React.createElement(Button, {
+    onClick: onInsert,
+    color: "primary",
+    margin: "medium 0 0 medium"
+  }, formatMessage('Insert'))));
+};
+
+AIResponseModal.propTypes = {
+  open: _pt.bool.isRequired,
+  html: _pt.string.isRequired,
+  onClose: _pt.func.isRequired,
+  onInsert: _pt.func.isRequired,
+  onReplace: _pt.func.isRequired
+};
+export { AIResponseModal };