@instructure/canvas-rce 5.10.0 → 5.10.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 5.10.1 - 2023-12-01
+
+### Changed
+- Allow more fields from Canvas media object creation
+- Ensure postMessage works with RCE LTI launches
+
 ## 5.10.0 - 2023-09-26
 
 ### Fixed

package/es/enhance-user-content/enhance_user_content.js

@@ -216,8 +216,16 @@ export function enhanceUserContent() {
           iframeElem.setAttribute('src', addParentFrameContextToUrl(src, containingCanvasLtiToolId));
         }
       });
-    }
+    } // tell LTI tools that they are launching from within the active RCE
+
+
+    unenhanced_elem.querySelectorAll('iframe[src]').forEach(iframeElem => {
+      const src = iframeElem.getAttribute('src');
 
+      if (src.startsWith(canvasOrigin)) {
+        iframeElem.setAttribute('src', src.replace('display=in_rce', 'display=borderless'));
+      }
+    });
     unenhanced_elem.querySelectorAll('a:not(.not_external, .external)').forEach(childLink => {
       if (!isExternalLink(childLink, canvasOrigin)) return;
       if (childLink.tagName === 'IMG' || childLink.querySelectorAll('img').length > 0) return;

package/es/rce/RCEWrapper.js

@@ -2714,67 +2714,9 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      this.forwardPostMessages();
       (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
     };
 
-    this.forwardPostMessages = () => {
-      const windowReferences = [];
-      const rceWindow = this.editor.getWin(); // explicitly assign name for reference by parent window
-
-      rceWindow.name = `${RCEWrapper.editorFrameName}_${this.id}`;
-      rceWindow.addEventListener('message', this.forwardPostMessagesHandler(rceWindow, windowReferences));
-    };
-
-    this.forwardPostMessagesHandler = (rceWindow, windowReferences) => e => {
-      let message;
-
-      try {
-        message = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
-      } catch (err) {
-        // unparseable message may not be meant for our handlers
-        return false;
-      } // NOTE: the code to encode/decode `sourceToolInfo` is duplicated in
-      // the ui/features/post_message_forwarding/index.ts, and
-      // cannot be DRY'd because RCE is in a package
-
-
-      if (e.origin === rceWindow.origin) {
-        const {
-          sourceToolInfo,
-          ...messageWithoutSourceToolInfo
-        } = message;
-        const targetOrigin = sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.origin;
-        const targetWindow = windowReferences[sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.windowId];
-
-        if (!targetOrigin || !targetWindow) {
-          return false;
-        }
-
-        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.postMessage(messageWithoutSourceToolInfo, targetOrigin);
-      } else {
-        // message is from tool, forward to Canvas window
-        // We can't forward the whole `e.source` window in the postMessage,
-        // so we keep a list (`windowReferences`) of all windows we've received
-        // messages from, and include the index into that list as `windowId`
-        let windowId = windowReferences.indexOf(e.source);
-
-        if (windowId === -1) {
-          windowReferences.push(e.source);
-          windowId = windowReferences.length - 1;
-        }
-
-        const newMessage = { ...message,
-          sourceToolInfo: {
-            origin: e.origin,
-            windowId
-          },
-          frameName: rceWindow.name
-        };
-        rceWindow.parent.postMessage(newMessage, rceWindow.origin);
-      }
-    };
-
     this.fixToolbarKeyboardNavigation = () => {
       var _this$_elementRef$cur2;
 
@@ -4257,7 +4199,6 @@ RCEWrapper.defaultProps = {
   canvasOrigin: ''
 };
 RCEWrapper.skinCssInjected = false;
-RCEWrapper.editorFrameName = 'active_rce_frame';
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;

package/es/rce/plugins/instructure_rce_external_tools/lti13-content-items/models/ResourceLinkContentItem.js

@@ -35,7 +35,7 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
 
   buildUrl() {
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
-      display: 'borderless',
+      display: 'in_rce',
       resource_link_lookup_uuid: this.lookup_uuid,
       [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
     });

package/es/rce/plugins/shared/fileTypeUtils.js

@@ -15,7 +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 { parse } from 'url';
+import { format, parse } from 'url';
 import { absoluteToRelativeUrl } from '../../../common/fileUrl';
 import { IconAudioLine, IconDocumentLine, IconMsExcelLine, IconMsPptLine, IconMsWordLine, IconPdfLine, IconVideoLine } from '@instructure/ui-icons';
 import RCEGlobals from '../../RCEGlobals';
@@ -94,13 +94,21 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const type = content_type.replace(/\/.*$/, '');
 
   if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
-    if (!file.url && !file.href) {
-      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
+    const url = parse(`/media_attachments_iframe/${file.id}`, true);
+    url.query.type = type;
+    url.query.embedded = true;
+
+    if (file.uuid && file.contextType == 'User') {
+      url.query.verifier = file.uuid;
+    } else if (file.url || file.href) {
+      const parsed_url = parse(file.url || file.href, true);
+
+      if (parsed_url.query.verifier) {
+        url.query.verifier = parsed_url.query.verifier;
+      }
     }
 
-    const parsed_url = parse(file.url || file.href, true);
-    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
-    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
+    return format(url);
   }
 
   if (file.embedded_iframe_url) {

package/es/rce/transformContent.js

@@ -60,6 +60,14 @@ export function transformRceContentForEditing(inputHtml, options) {
     for (const attributeName of attributeNamesToRemove) {
       element.removeAttribute(attributeName);
     }
+  }); // fixup LTI iframe launches to use the `in_rce` display type
+
+  container.querySelectorAll('iframe[src]').forEach(element => {
+    const src = element.getAttribute('src');
+
+    if (src !== null && src !== void 0 && src.includes('display=borderless')) {
+      element.setAttribute('src', src.replace('display=borderless', 'display=in_rce'));
+    }
   });
   return container.innerHTML;
 }

package/es/sidebar/actions/upload.js

@@ -272,7 +272,9 @@ export function mediaUploadComplete(error, uploadData) {
         media_id: mediaObject.media_object.media_id,
         type: uploadedFile.type,
         title: uploadedFile.title || uploadedFile.name,
-        id: mediaObject.media_object.attachment_id
+        id: mediaObject.media_object.attachment_id,
+        uuid: mediaObject.media_object.uuid,
+        contextType: mediaObject.media_object.context_type
       };
       dispatch(removePlaceholdersFor(uploadedFile.name));
       embedUploadResult(embedData, 'media');

package/lib/enhance-user-content/enhance_user_content.js

@@ -216,8 +216,16 @@ export function enhanceUserContent() {
           iframeElem.setAttribute('src', addParentFrameContextToUrl(src, containingCanvasLtiToolId));
         }
       });
-    }
+    } // tell LTI tools that they are launching from within the active RCE
+
+
+    unenhanced_elem.querySelectorAll('iframe[src]').forEach(iframeElem => {
+      const src = iframeElem.getAttribute('src');
 
+      if (src.startsWith(canvasOrigin)) {
+        iframeElem.setAttribute('src', src.replace('display=in_rce', 'display=borderless'));
+      }
+    });
     unenhanced_elem.querySelectorAll('a:not(.not_external, .external)').forEach(childLink => {
       if (!isExternalLink(childLink, canvasOrigin)) return;
       if (childLink.tagName === 'IMG' || childLink.querySelectorAll('img').length > 0) return;

package/lib/rce/RCEWrapper.js

@@ -2714,67 +2714,9 @@ class RCEWrapper extends React.Component {
 
       this.checkAccessibility();
       this.fixToolbarKeyboardNavigation();
-      this.forwardPostMessages();
       (_this$props$onInitted = (_this$props = this.props).onInitted) === null || _this$props$onInitted === void 0 ? void 0 : _this$props$onInitted.call(_this$props, editor);
     };
 
-    this.forwardPostMessages = () => {
-      const windowReferences = [];
-      const rceWindow = this.editor.getWin(); // explicitly assign name for reference by parent window
-
-      rceWindow.name = `${RCEWrapper.editorFrameName}_${this.id}`;
-      rceWindow.addEventListener('message', this.forwardPostMessagesHandler(rceWindow, windowReferences));
-    };
-
-    this.forwardPostMessagesHandler = (rceWindow, windowReferences) => e => {
-      let message;
-
-      try {
-        message = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
-      } catch (err) {
-        // unparseable message may not be meant for our handlers
-        return false;
-      } // NOTE: the code to encode/decode `sourceToolInfo` is duplicated in
-      // the ui/features/post_message_forwarding/index.ts, and
-      // cannot be DRY'd because RCE is in a package
-
-
-      if (e.origin === rceWindow.origin) {
-        const {
-          sourceToolInfo,
-          ...messageWithoutSourceToolInfo
-        } = message;
-        const targetOrigin = sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.origin;
-        const targetWindow = windowReferences[sourceToolInfo === null || sourceToolInfo === void 0 ? void 0 : sourceToolInfo.windowId];
-
-        if (!targetOrigin || !targetWindow) {
-          return false;
-        }
-
-        targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.postMessage(messageWithoutSourceToolInfo, targetOrigin);
-      } else {
-        // message is from tool, forward to Canvas window
-        // We can't forward the whole `e.source` window in the postMessage,
-        // so we keep a list (`windowReferences`) of all windows we've received
-        // messages from, and include the index into that list as `windowId`
-        let windowId = windowReferences.indexOf(e.source);
-
-        if (windowId === -1) {
-          windowReferences.push(e.source);
-          windowId = windowReferences.length - 1;
-        }
-
-        const newMessage = { ...message,
-          sourceToolInfo: {
-            origin: e.origin,
-            windowId
-          },
-          frameName: rceWindow.name
-        };
-        rceWindow.parent.postMessage(newMessage, rceWindow.origin);
-      }
-    };
-
     this.fixToolbarKeyboardNavigation = () => {
       var _this$_elementRef$cur2;
 
@@ -4257,7 +4199,6 @@ RCEWrapper.defaultProps = {
   canvasOrigin: ''
 };
 RCEWrapper.skinCssInjected = false;
-RCEWrapper.editorFrameName = 'active_rce_frame';
 
 function mergeMenuItems(standard, custom) {
   var _custom$trim;

package/lib/rce/plugins/instructure_rce_external_tools/lti13-content-items/models/ResourceLinkContentItem.js

@@ -35,7 +35,7 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
 
   buildUrl() {
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
-      display: 'borderless',
+      display: 'in_rce',
       resource_link_lookup_uuid: this.lookup_uuid,
       [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
     });

package/lib/rce/plugins/shared/fileTypeUtils.js

@@ -15,7 +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 { parse } from 'url';
+import { format, parse } from 'url';
 import { absoluteToRelativeUrl } from '../../../common/fileUrl';
 import { IconAudioLine, IconDocumentLine, IconMsExcelLine, IconMsPptLine, IconMsWordLine, IconPdfLine, IconVideoLine } from '@instructure/ui-icons';
 import RCEGlobals from '../../RCEGlobals';
@@ -94,13 +94,21 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const type = content_type.replace(/\/.*$/, '');
 
   if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
-    if (!file.url && !file.href) {
-      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
+    const url = parse(`/media_attachments_iframe/${file.id}`, true);
+    url.query.type = type;
+    url.query.embedded = true;
+
+    if (file.uuid && file.contextType == 'User') {
+      url.query.verifier = file.uuid;
+    } else if (file.url || file.href) {
+      const parsed_url = parse(file.url || file.href, true);
+
+      if (parsed_url.query.verifier) {
+        url.query.verifier = parsed_url.query.verifier;
+      }
     }
 
-    const parsed_url = parse(file.url || file.href, true);
-    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
-    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
+    return format(url);
   }
 
   if (file.embedded_iframe_url) {

package/lib/rce/transformContent.js

@@ -60,6 +60,14 @@ export function transformRceContentForEditing(inputHtml, options) {
     for (const attributeName of attributeNamesToRemove) {
       element.removeAttribute(attributeName);
     }
+  }); // fixup LTI iframe launches to use the `in_rce` display type
+
+  container.querySelectorAll('iframe[src]').forEach(element => {
+    const src = element.getAttribute('src');
+
+    if (src !== null && src !== void 0 && src.includes('display=borderless')) {
+      element.setAttribute('src', src.replace('display=borderless', 'display=in_rce'));
+    }
   });
   return container.innerHTML;
 }

package/lib/sidebar/actions/upload.js

@@ -272,7 +272,9 @@ export function mediaUploadComplete(error, uploadData) {
         media_id: mediaObject.media_object.media_id,
         type: uploadedFile.type,
         title: uploadedFile.title || uploadedFile.name,
-        id: mediaObject.media_object.attachment_id
+        id: mediaObject.media_object.attachment_id,
+        uuid: mediaObject.media_object.uuid,
+        contextType: mediaObject.media_object.context_type
       };
       dispatch(removePlaceholdersFor(uploadedFile.name));
       embedUploadResult(embedData, 'media');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/canvas-rce",
-  "version": "5.10.0",
+  "version": "5.10.1",
   "description": "A component wrapping Canvas's usage of Tinymce",
   "main": "es/index.js",
   "scripts": {

package/canvas/README.md

@@ -1,84 +0,0 @@
-# Canvas Rich Content Editor
-
-The Canvas LMS Rich Content Editor extracted in it's own npm package for use
-across multiple services. In the canvas ecosystem, this npm module is used
-in pair with a running `canvas-rce-api` microservice.
-
-Some features require a running instance of the `canvas-rce-api`,
-but you do not need that instance in order to
-do development on `canvas-rce`. (see [docs/development.md](docs/development.md))
-
-The first customer of the `canvas-rce` is the `canvas-lms` LMS so documentation
-and references throughout documentation might reflect and assume the use of
-`canvas-lms`.
-
-## Install and setup
-
-As a published npm module, you can add canvas-rce to your node project by doing
-the following:
-
-```bash
-npm install canvas-rce --save
-```
-
-For guidance on how `canvas-rce` is used within canvas, please reference
-the [canvas-lms use of canvas-rce](https://github.com/instructure/canvas-lms/tree/stable/ui/shared/rce)
-to get an idea on how to incorporate it into your project. Pay
-special attention to the `RichContentEditor.js` and `serviceRCELoader.js`.
-
-Outside of canvas, the `CanvasRce` React component is your entry point.
-_Work is ongoing to make the props to `CanvasRce` more rational.
-Please be patient._
-
-## Tests
-
-While canvas consumes the es modules build of the rce,
-Jest tests are run against the commonjs build, so make sure you've built the
-commonjs assets before running tests:
-
-```bash
-yarn build:canvas
-yarn test:jest
-```
-
-There are still legacy mocha tests run with `yarn test:mocha`. `yarn test` runs them all.
-
-### test debugging hints
-
-```
-yarn test:jest:debug path/to/__test__/file.test.js
-```
-
-will break and wait for you to attach a debugger (e.g. `chrome://inspect/#devices`).
-
-Similarly, for mocha tests
-
-```
-yarn test:mocha:debug path/to/test/file.test.js
-```
-
-Both those commands may include a `--watch` argument to keep the process alive
-while you iterate.
-
-## Polyfills
-
-This project makes use of modern JavaScript APIs like Promise, Object.assign,
-Array.prototype.includes, etc. which are present in modern
-browsers but may not be present in old browsers like IE 11. In order to not
-send unnecessarily large and duplicated code bundles to the browser, consumers
-are expected to have already globally polyfilled those APIs.
-Canvas only supports modern browsers and the rce has not been tested
-in older browsers like IE. If you need suggestions for how to include
-polyfills in your
-own app, you can just put this in your html above the script that includes
-canvas-rce:
-
-```
-<script src="https://cdn.polyfill.io/v2/polyfill.min.js?rum=0"></script>
-```
-
-(See: https://polyfill.io/v2/docs/ for more info)
-
-## Development
-
-See [DEVELOPMENT.md](./DEVELOPMENT.md)