@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/instructure_paste/plugin.js

@@ -1,174 +0,0 @@
-// @ts-nocheck
-
-/*
- * 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/>.
- */
-import tinymce from 'tinymce';
-import bridge from '../../../bridge';
-import configureStore from '../../../sidebar/store/configureStore';
-import { get as getSession } from '../../../sidebar/actions/session';
-import { uploadToMediaFolder } from '../../../sidebar/actions/upload';
-import doFileUpload from '../shared/Upload/doFileUpload';
-import formatMessage from '../../../format-message';
-import { isAudioOrVideo, isImage } from '../shared/fileTypeUtils';
-import { showFlashAlert } from '../../../common/FlashAlert';
-import { isMicrosoftWordContentInEvent } from '../shared/EventUtils';
-// assume that if there are multiple RCEs on the page,
-// they all talk to the same canvas
-const config = {
-  store: null,
-  session: null,
-  // null: we haven't gotten it yet, false: we don't need it
-  sessionPromise: null
-}; // when UploadFile renders
-// <StoreProvider {...trayProps}>
-//  {contentProps => {
-//     return (
-//       <UploadFileModal
-// The StoreProvider function calls configureStore which creates a new store
-// (We don't seem to have a way to grab an existing store)
-// So the configureStore and getSession logic gets repeated here for the
-// automatic file upload when pasting or dropping a file on the RCE
-
-function initStore(initProps) {
-  if (config.store === null) {
-    config.store = configureStore(initProps);
-  }
-
-  if (config.session === null) {
-    if (initProps.host && initProps.jwt) {
-      config.sessionPromise = getSession(config.store.dispatch, config.store.getState).then(() => {
-        config.session = config.store.getState().session;
-      }).catch(_err => {
-        // eslint-disable-next-line no-console
-        console.error('The Paste plugin failed to get canvas session data.');
-      });
-    } else {
-      // RCEWrapper will keep us from getting here, but we really should do something anyway.
-      config.session = false;
-      config.sessionPromise = Promise.resolve();
-    }
-  }
-
-  return config.store;
-}
-
-tinymce.PluginManager.add('instructure_paste', function (editor) {
-  const store = initStore(bridge.trayProps.get(editor));
-  /**
-   * Starts the file upload (and insertion) process for the given file.
-   *
-   * If usage rights are required, a dialog will be displayed.
-   *
-   * @returns a promise that resolves when the user has made their choice about uploading the file
-   */
-
-  async function requestFileInsertion(file) {
-    // it's very doubtful that we won't have retrieved the session data yet,
-    // since it takes a while for the RCE to initialize, but if we haven't
-    // wait until we do to carry on and finish pasting.
-    await config.sessionPromise;
-
-    if (config.session === null) {
-      // we failed to get the session and don't know if usage rights are required in this course|group
-      // In all probability, the file upload will fail too, but I feel like we have to do something here.
-      showFlashAlert({
-        message: formatMessage('If Usage Rights are required, the file will not publish until enabled in the Files page.'),
-        type: 'info'
-      });
-    } // even though usage rights might be required by the course, canvas has no place
-    // on the user to store it. Only Group and Course.
-
-
-    const requiresUsageRights = config.session.usageRightsRequired && /course|group/.test(bridge.trayProps.get(editor).contextType);
-
-    if (requiresUsageRights) {
-      return doFileUpload(editor, document, {
-        accept: file.type,
-        panels: ['COMPUTER'],
-        preselectedFile: file
-      }).closedPromise;
-    } else {
-      const fileMetaProps = {
-        altText: file.name,
-        contentType: file.type,
-        displayAs: 'embed',
-        isDecorativeImage: false,
-        name: file.name,
-        parentFolderId: 'media',
-        size: file.size,
-        domObject: file
-      };
-      let tabContext = 'documents';
-
-      if (isImage(file.type)) {
-        tabContext = 'images';
-      } else if (isAudioOrVideo(file.type)) {
-        tabContext = 'media';
-      }
-
-      store.dispatch(uploadToMediaFolder(tabContext, fileMetaProps));
-      return 'submitted';
-    }
-  }
-
-  async function handlePasteOrDrop(event) {
-    var _bridge$activeEditor, _bridge$activeEditor$, _editor$rceWrapper;
-
-    const isPaste = event.type === 'paste';
-    const dataTransfer = isPaste ? event.clipboardData : event.dataTransfer;
-    const files = Array.from((dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) || []);
-    const types = (dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) || [];
-    const isAudioVideoDisabled = (_bridge$activeEditor = bridge.activeEditor()) === null || _bridge$activeEditor === void 0 ? void 0 : (_bridge$activeEditor$ = _bridge$activeEditor.props) === null || _bridge$activeEditor$ === void 0 ? void 0 : _bridge$activeEditor$.instRecordDisabled; // delegate to tiny if there aren't any files to handle
-
-    if (!types.includes('Files')) return; // delegate to tiny if there is Microsoft Word content, because it may contain an image
-    // rendering of the content and we don't want to incorrectly paste the image
-    // instead of the actual rich content, which TinyMCE has special handing for
-
-    if (isMicrosoftWordContentInEvent(event)) return; // we're pasting file(s), prevent the default tinymce pasting behavior
-
-    event.preventDefault(); // Ensure the editor has focus, because downstream code requires that it does, and drag-n-drop
-    // events can be started when the editor doesn't have focus.
-
-    if (!editor.hasFocus()) (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : _editor$rceWrapper.focus(); // Checking if we've encountered an issue with file processing for paste events in the browser
-    // Specifically implementing due to this bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1699743
-    // However, there could be other issues that cause this condition so it's a nice safety net regardless
-
-    if (isPaste && files.some(file => file.size === 0)) {
-      showFlashAlert({
-        message: formatMessage('One or more files failed to paste. Please try uploading or dragging and dropping files.'),
-        type: 'error'
-      });
-      return;
-    }
-
-    for (const file of files) {
-      if (isAudioVideoDisabled && isAudioOrVideo(file.type)) {
-        // Skip audio and video files when disabled
-        continue;
-      } // This will finish once the dialog is closed, if one was created, putting this in a loop allows us
-      // to show a dialog for each file without them conflicting.
-      // eslint-disable-next-line no-await-in-loop
-
-
-      await requestFileInsertion(file);
-    }
-  }
-
-  editor.on('paste', handlePasteOrDrop);
-  editor.on('drop', handlePasteOrDrop);
-});

package/lib/rce/plugins/instructure_rce_external_tools/ExternalToolsEnv.js

@@ -1,169 +0,0 @@
-// @ts-nocheck
-
-/*
- * 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/>.
- */
-import RCEWrapper from '../../RCEWrapper';
-
-/**
- * Fallback iframe allowances used when they aren't provided to the editor.
- */
-export const fallbackIframeAllowances = ['geolocation *', 'microphone *', 'camera *', 'midi *', 'encrypted-media *', 'autoplay *', 'clipboard-write *', 'display-capture *'];
-/**
- * Type of the "editor buttons" that come from Canvas.
- *
- * They're actually the available LTI Tool configurations, so we give them a more reasonable name here.
- */
-
-/**
- * Gets the environment information for the external tools dialog for a given tinyMCE editor.
- */
-export function externalToolsEnvFor(editor) {
-  const props = () => {
-    var _ref, _RCEWrapper$getByEdit;
-
-    return (_ref = (_RCEWrapper$getByEdit = RCEWrapper.getByEditor(editor)) === null || _RCEWrapper$getByEdit === void 0 ? void 0 : _RCEWrapper$getByEdit.props) !== null && _ref !== void 0 ? _ref : undefined;
-  };
-
-  let cachedCanvasToolId;
-
-  function nonNullishArray(arr) {
-    return arr === null || arr === void 0 ? void 0 : arr.filter(it => it != null);
-  }
-
-  return {
-    editor: editor !== null && editor !== void 0 ? editor : null,
-
-    get rceWrapper() {
-      var _RCEWrapper$getByEdit2;
-
-      return (_RCEWrapper$getByEdit2 = RCEWrapper.getByEditor(editor)) !== null && _RCEWrapper$getByEdit2 !== void 0 ? _RCEWrapper$getByEdit2 : null;
-    },
-
-    get availableRceLtiTools() {
-      var _nonNullishArray, _props;
-
-      return (_nonNullishArray = nonNullishArray((_props = props()) === null || _props === void 0 ? void 0 : _props.ltiTools)) !== null && _nonNullishArray !== void 0 ? _nonNullishArray : [];
-    },
-
-    /**
-     * Gets information about the context in which the editor is launched.
-     */
-    get contextAssetInfo() {
-      var _props2;
-
-      const trayProps = (_props2 = props()) === null || _props2 === void 0 ? void 0 : _props2.trayProps;
-
-      if (trayProps != null) {
-        var _trayProps$containing;
-
-        const {
-          contextId,
-          contextType
-        } = (_trayProps$containing = trayProps.containingContext) !== null && _trayProps$containing !== void 0 ? _trayProps$containing : trayProps;
-
-        if (contextId != null && contextId.length > 0 && contextType != null && contextType.length > 0) {
-          return {
-            contextType,
-            contextId
-          };
-        }
-      }
-
-      return null;
-    },
-
-    get resourceSelectionUrlOverride() {
-      var _props$externalToolsC, _props3, _props3$externalTools;
-
-      return (_props$externalToolsC = (_props3 = props()) === null || _props3 === void 0 ? void 0 : (_props3$externalTools = _props3.externalToolsConfig) === null || _props3$externalTools === void 0 ? void 0 : _props3$externalTools.resourceSelectionUrlOverride) !== null && _props$externalToolsC !== void 0 ? _props$externalToolsC : null;
-    },
-
-    get ltiIframeAllowPolicy() {
-      var _nonNullishArray2, _props4, _props4$externalTools;
-
-      return ((_nonNullishArray2 = nonNullishArray((_props4 = props()) === null || _props4 === void 0 ? void 0 : (_props4$externalTools = _props4.externalToolsConfig) === null || _props4$externalTools === void 0 ? void 0 : _props4$externalTools.ltiIframeAllowances)) !== null && _nonNullishArray2 !== void 0 ? _nonNullishArray2 : fallbackIframeAllowances).join('; ');
-    },
-
-    get isA2StudentView() {
-      var _props$externalToolsC2, _props5, _props5$externalTools;
-
-      return (_props$externalToolsC2 = (_props5 = props()) === null || _props5 === void 0 ? void 0 : (_props5$externalTools = _props5.externalToolsConfig) === null || _props5$externalTools === void 0 ? void 0 : _props5$externalTools.isA2StudentView) !== null && _props$externalToolsC2 !== void 0 ? _props$externalToolsC2 : false;
-    },
-
-    get maxMruTools() {
-      var _props$externalToolsC3, _props6, _props6$externalTools;
-
-      return (_props$externalToolsC3 = (_props6 = props()) === null || _props6 === void 0 ? void 0 : (_props6$externalTools = _props6.externalToolsConfig) === null || _props6$externalTools === void 0 ? void 0 : _props6$externalTools.maxMruTools) !== null && _props$externalToolsC3 !== void 0 ? _props$externalToolsC3 : 5;
-    },
-
-    get canvasOrigin() {
-      var _props$canvasOrigin, _props7;
-
-      return (_props$canvasOrigin = (_props7 = props()) === null || _props7 === void 0 ? void 0 : _props7.canvasOrigin) !== null && _props$canvasOrigin !== void 0 ? _props$canvasOrigin : window.location.origin;
-    },
-
-    /**
-     * Gets the context id that should be used when launching LTI iframes.
-     */
-    get containingCanvasLtiToolId() {
-      var _props8, _props8$externalTools;
-
-      const propsToolId = (_props8 = props()) === null || _props8 === void 0 ? void 0 : (_props8$externalTools = _props8.externalToolsConfig) === null || _props8$externalTools === void 0 ? void 0 : _props8$externalTools.containingCanvasLtiToolId;
-
-      if (typeof propsToolId === 'string') {
-        return propsToolId;
-      }
-
-      try {
-        if (cachedCanvasToolId === undefined) {
-          // Fall back on localStorage until NQ implements
-          cachedCanvasToolId = window.localStorage.getItem('canvas_tool_id');
-        }
-
-        return cachedCanvasToolId;
-      } catch {
-        return null;
-      }
-    },
-
-    get editorSelection() {
-      var _editor$selection$get, _editor$selection;
-
-      return (_editor$selection$get = editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.getContent()) !== null && _editor$selection$get !== void 0 ? _editor$selection$get : null;
-    },
-
-    get editorContent() {
-      var _editor$getContent;
-
-      return (_editor$getContent = editor === null || editor === void 0 ? void 0 : editor.getContent()) !== null && _editor$getContent !== void 0 ? _editor$getContent : null;
-    },
-
-    insertCode(code) {
-      var _this$rceWrapper;
-
-      (_this$rceWrapper = this.rceWrapper) === null || _this$rceWrapper === void 0 ? void 0 : _this$rceWrapper.insertCode(code);
-    }
-
-  };
-}
-/**
- * Name of the parameter used to indicate to Canvas that it is being loaded in an iframe inside of an
- * LTI tool. It should be set to the global id of the containing tool.
- */
-
-export const PARENT_FRAME_CONTEXT_PARAM = 'parent_frame_context';

package/lib/rce/plugins/instructure_rce_external_tools/RceToolWrapper.js

@@ -1,225 +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/>.
- */
-import { openToolDialogFor } from './dialog-helper';
-import { simpleCache } from '../../../util/simpleCache';
-import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-ignore
-
-import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
-
-/**
- * Helper class for the connection between an external tool registration and a particular TinyMCE instance.
- */
-export class RceToolWrapper {
-  static forEditorEnv(env) {
-    let toolConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : env.availableRceLtiTools;
-    let mruIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : loadMruToolIds();
-    return toolConfigs.map(it => new RceToolWrapper(env, it, mruIds));
-  }
-
-  get editor() {
-    return this.env.editor;
-  }
-
-  constructor(env, toolInfo, mruToolIds) {
-    this.env = env;
-    this.toolInfo = toolInfo;
-    this.iconId = void 0;
-    this.isMruTool = void 0;
-    this.iconId = registerToolIcon(env, toolInfo);
-    this.isMruTool = mruToolIds.includes(String(toolInfo.id));
-  }
-
-  get id() {
-    return String(this.toolInfo.id);
-  }
-
-  get title() {
-    var _this$toolInfo$name;
-
-    return (_this$toolInfo$name = this.toolInfo.name) !== null && _this$toolInfo$name !== void 0 ? _this$toolInfo$name : `Unknown tool (${String(this.toolInfo.id)})`;
-  }
-
-  get description() {
-    return this.toolInfo.description;
-  }
-
-  get favorite() {
-    var _this$toolInfo$favori;
-
-    return (_this$toolInfo$favori = this.toolInfo.favorite) !== null && _this$toolInfo$favori !== void 0 ? _this$toolInfo$favori : false;
-  }
-
-  get image() {
-    var _parseIconValueFor;
-
-    return (_parseIconValueFor = parseIconValueFor(this.toolInfo)) === null || _parseIconValueFor === void 0 ? void 0 : _parseIconValueFor.iconUrl;
-  }
-
-  get width() {
-    return this.toolInfo.width;
-  }
-
-  get height() {
-    return this.toolInfo.height;
-  }
-
-  get use_tray() {
-    return this.toolInfo.use_tray;
-  }
-
-  asToolbarButton() {
-    var _this$iconId;
-
-    return {
-      type: 'button',
-      icon: (_this$iconId = this.iconId) !== null && _this$iconId !== void 0 ? _this$iconId : undefined,
-      tooltip: this.title,
-      onAction: () => this.openDialog()
-    };
-  }
-
-  asMenuItem() {
-    var _this$iconId2;
-
-    return {
-      type: 'menuitem',
-      text: this.title,
-      icon: (_this$iconId2 = this.iconId) !== null && _this$iconId2 !== void 0 ? _this$iconId2 : undefined,
-      onAction: () => this.openDialog()
-    };
-  }
-
-  openDialog() {
-    addMruToolId(this.id, this.env);
-    openToolDialogFor(this);
-  }
-
-}
-export function parseIconValueFor(toolInfo) {
-  const result = {};
-  const canvasIconClass = toolInfo.canvas_icon_class; // URL embedded in canvas_icon_class, which happens in some cases (see MAT-1354)
-
-  if (typeof canvasIconClass === 'object') {
-    const iconUrl = canvasIconClass === null || canvasIconClass === void 0 ? void 0 : canvasIconClass.icon_url;
-
-    if (typeof iconUrl === 'string' && iconUrl !== '') {
-      result.iconUrl = iconUrl;
-    }
-  } // URL at the top level takes precedence
-
-
-  if (typeof toolInfo.icon_url === 'string' && toolInfo.icon_url !== '') {
-    result.iconUrl = toolInfo.icon_url;
-  } // Icon class as string
-
-
-  if (typeof canvasIconClass === 'string' && canvasIconClass !== '') {
-    result.canvasIconClass = canvasIconClass;
-  }
-
-  return result;
-}
-
-function registerToolIcon(env, toolInfo) {
-  if (env.editor == null) return undefined;
-  const iconId = 'lti_tool_' + String(toolInfo.id);
-  const {
-    iconUrl,
-    canvasIconClass
-  } = parseIconValueFor(toolInfo); // We need to strip off the icon- or icon_ prefix from the icon class name to match instui icons
-
-  const iconGlyphName = (canvasIconClass !== null && canvasIconClass !== void 0 ? canvasIconClass : '').replace(/^icon[-_]/, '');
-
-  if (iconUrl != null && iconUrl.length > 0) {
-    // Icon image provided
-    env.editor.ui.registry.addIcon(iconId, svgImageCache.get(iconUrl));
-    return iconId;
-  } else if (iconGlyphName != null && iconGlyphName.length > 0) {
-    // InstUI icon used
-    const instUiIcon = instUiIconsArray.find(it => it.variant === 'Line' && it.glyphName === iconGlyphName);
-
-    if (instUiIcon != null) {
-      env.editor.ui.registry.addIcon(iconId, instUiIcon.src);
-      return iconId;
-    }
-  } // Fallback to default icon
-
-
-  env.editor.ui.registry.addIcon(iconId, IconLtiSolid.src);
-  return iconId;
-}
-
-const svgImageCache = simpleCache(imageUrl => {
-  // Sanitize input against XSS
-  const svg = document.createElement('svg');
-  svg.setAttribute('viewBox', '0 0 16 16');
-  svg.setAttribute('version', '1.1');
-  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  const image = document.createElement('image');
-  image.setAttribute('xlink:href', imageUrl);
-  image.style.width = '100%';
-  image.style.height = '100%';
-  svg.appendChild(image);
-  return svg.outerHTML;
-});
-/**
- * Loads the list of most recently used external tool ids.
- */
-
-export function loadMruToolIds() {
-  let list;
-
-  try {
-    var _window$localStorage$, _window$localStorage;
-
-    list = JSON.parse((_window$localStorage$ = (_window$localStorage = window.localStorage) === null || _window$localStorage === void 0 ? void 0 : _window$localStorage.getItem('ltimru')) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : '[]');
-  } catch (ex) {
-    // eslint-disable-next-line no-console
-    console.warn('Found bad LTI MRU data', ex.message);
-  }
-
-  return Array.isArray(list) ? list.filter(it => it != null).map(it => String(it)) : [];
-}
-/**
- * Loads the list of most recently used external tool ids.
- */
-
-export function storeMruToolIds(toolIds) {
-  try {
-    var _window$localStorage2;
-
-    (_window$localStorage2 = window.localStorage) === null || _window$localStorage2 === void 0 ? void 0 : _window$localStorage2.setItem('ltimru', JSON.stringify(toolIds));
-  } catch (ex) {
-    // eslint-disable-next-line no-console
-    console.warn('Cannot save LTI MRU list', ex.message);
-  }
-}
-export function addMruToolId(toolId, env) {
-  const initialMruToolIds = loadMruToolIds();
-
-  if (!initialMruToolIds.includes(toolId)) {
-    const newToolIds = [toolId, ...initialMruToolIds.slice(0, env.maxMruTools - 1)];
-    storeMruToolIds(newToolIds);
-    return newToolIds;
-  }
-
-  return initialMruToolIds;
-}
-export function buildToolMenuItems(availableTools, viewAllItem) {
-  return [...availableTools.filter(it => it.isMruTool).map(it => it.asMenuItem()).sort((a, b) => a.text.localeCompare(b.text)), viewAllItem];
-}