@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/plugins/instructure_rce_external_tools/jquery/jquery.dropdownList.js

@@ -1,5 +1,4 @@
-// @ts-nocheck
-
+/// <reference types="jquery" />
 /*
  * Copyright (C) 2011 - present Instructure, Inc.
  *
@@ -17,7 +16,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 $ from 'jquery';
+
 /**
  * TL;DR: Remove this file when possible.
  *
@@ -28,145 +27,140 @@ import $ from 'jquery';
  * Once that file has been axed, then this file should be able to be removed.
  */
 
-// Simple dropdown list.  Takes the list of attributes specified in "options" and displays them
-// in a menu anchored to the selected element.
-$.fn.dropdownList = Object.assign(function (options) {
-  if (this.length) {
-    var _this$offset, _this$outerHeight, _$div$offset$left, _$div$offset, _$div$width, _$$width;
-
-    let $div = $('#instructure_dropdown_list');
-
-    if (options === 'hide' || options === 'remove' || $div.data('current_dropdown_initiator') === this[0]) {
-      $div.remove().data('current_dropdown_initiator', null);
-      return this;
-    }
-
-    options = $.extend({}, $.fn.dropdownList.defaults, options);
-    let $list = $div.children('div.list');
-
-    if (!$list.length) {
-      $div = $("<div id='instructure_dropdown_list'><div class='list ui-widget-content'></div></div>").appendTo('body');
-      $(document).mousedown(event => {
-        if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
-          $div.hide().data('current_dropdown_initiator', null);
-        }
-      }).mouseup(event => {
-        if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
-          $div.hide();
-          setTimeout(() => {
-            $div.data('current_dropdown_initiator', null);
-          }, 100);
-        }
-      }).add(this).add($div).keydown(event => {
-        if ($div.data('current_dropdown_initiator')) {
-          const $current = $div.find('.ui-state-hover,.ui-state-active');
+;
+(function (global) {
+  // @ts-expect-error
+  const $ = global.jQuery || global.$;
+  if (!$) {
+    return;
+  }
 
-          if (event.keyCode === 38) {
-            // up
-            if ($current.length && $current.prev().length) {
-              $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').prev().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
+  // Simple dropdown list.  Takes the list of attributes specified in "options" and displays them
+  // in a menu anchored to the selected element.
+  $.fn.dropdownList = Object.assign(
+  // @ts-expect-error
+  function (options) {
+    if (this.length) {
+      var _this$offset, _this$outerHeight, _$div$offset$left, _$div$offset, _$div$width, _$$width;
+      let $div = $('#instructure_dropdown_list');
+      if (options === 'hide' || options === 'remove' || $div.data('current_dropdown_initiator') === this[0]) {
+        $div.remove().data('current_dropdown_initiator', null);
+        return this;
+      }
+      options = $.extend({}, $.fn.dropdownList.defaults, options);
+      let $list = $div.children('div.list');
+      if (!$list.length) {
+        $div = $("<div id='instructure_dropdown_list'><div class='list ui-widget-content'></div></div>").appendTo('body');
+        $(document).mousedown(event => {
+          if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
+            $div.hide().data('current_dropdown_initiator', null);
+          }
+        }).mouseup(event => {
+          if ($div.data('current_dropdown_initiator') && !$(event.target).closest('#instructure_dropdown_list').length) {
+            $div.hide();
+            setTimeout(() => {
+              $div.data('current_dropdown_initiator', null);
+            }, 100);
+          }
+        }).add(this).add($div).keydown(event => {
+          if ($div.data('current_dropdown_initiator')) {
+            const $current = $div.find('.ui-state-hover,.ui-state-active');
+            if (event.keyCode === 38) {
+              // up
+              if ($current.length && $current.prev().length) {
+                $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').prev().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
+              } else {
+                var _$item;
+                ;
+                (_$item = window.$item) === null || _$item === void 0 ? void 0 : _$item.focus();
+              }
+              return false;
+            } else if (event.keyCode === 40) {
+              // down
+              if (!$current.length) {
+                $div.find('.option:first').addClass('ui-state-hover').removeClass('minimal').find('span').focus();
+              } else if ($current.next().length) {
+                $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').next().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
+              }
+              return false;
+            } else if (event.keyCode === 13 && $current.length) {
+              $current.click();
+              return false;
             } else {
-              var _$item;
-
-              ;
-              (_$item = window.$item) === null || _$item === void 0 ? void 0 : _$item.focus();
-            }
-
-            return false;
-          } else if (event.keyCode === 40) {
-            // down
-            if (!$current.length) {
-              $div.find('.option:first').addClass('ui-state-hover').removeClass('minimal').find('span').focus();
-            } else if ($current.next().length) {
-              $current.removeClass('ui-state-hover ui-state-active').addClass('minimal').next().addClass('ui-state-hover').removeClass('minimal').find('span').focus();
+              $div.hide().data('current_dropdown_initiator', null);
             }
-
-            return false;
-          } else if (event.keyCode === 13 && $current.length) {
-            $current.click();
-            return false;
-          } else {
-            $div.hide().data('current_dropdown_initiator', null);
           }
-        }
-      });
-      $div.find('.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
-      $div.click(_event => {
-        $div.hide().data('current_dropdown_initiator', null);
-      });
-      $list = $div.children('div.list');
-    }
-
-    $div.data('current_dropdown_initiator', this[0]);
-
-    if (options.width) {
-      $div.width(options.width);
-    }
-
-    if (options.height) {
-      $div.find('.list').css('maxHeight', options.height);
-    }
-
-    $list.empty();
-    $.each(options.options, (optionHtml, callback) => {
-      const $option = $("<div class='option minimal' style='cursor: pointer; padding: 2px 5px; overflow: hidden; white-space: nowrap;'>" + "  <span tabindex='-1'>" + optionHtml.toString() + '</span>' + '</div>').appendTo($list);
-
-      function unhoverOtherOptions() {
-        $option.parent().find('div.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
-      }
-
-      if ($.isFunction(callback)) {
-        $option.addClass('ui-state-default').bind({
-          mouseenter() {
-            unhoverOtherOptions();
-            $option.addClass('ui-state-hover').removeClass('minimal');
-          },
-
-          mouseleave: unhoverOtherOptions,
-
-          mousedown(event) {
-            event.preventDefault();
-            unhoverOtherOptions();
-            $option.addClass('ui-state-active').removeClass('minimal');
-          },
-
-          mouseup: unhoverOtherOptions,
-          click: callback
         });
-      } else {
-        $option.addClass('ui-state-disabled').bind({
-          mousedown(event) {
-            event.preventDefault();
-          }
-
+        $div.find('.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
+        $div.click(_event => {
+          $div.hide().data('current_dropdown_initiator', null);
         });
+        $list = $div.children('div.list');
       }
-    });
-    const offset = (_this$offset = this.offset()) !== null && _this$offset !== void 0 ? _this$offset : {
-      top: 0,
-      left: 0
-    };
-    const height = (_this$outerHeight = this.outerHeight()) !== null && _this$outerHeight !== void 0 ? _this$outerHeight : 0;
-    $div.css({
-      whiteSpace: 'nowrap',
-      position: 'absolute',
-      top: offset.top + height,
-      left: offset.left + 5,
-      right: ''
-    }).hide().show(); // this is a fix so that if the dropdown ends up being off the page then move it back in so that it is on the page.
-
-    if (((_$div$offset$left = (_$div$offset = $div.offset()) === null || _$div$offset === void 0 ? void 0 : _$div$offset.left) !== null && _$div$offset$left !== void 0 ? _$div$offset$left : 0) + ((_$div$width = $div.width()) !== null && _$div$width !== void 0 ? _$div$width : 0) > ((_$$width = $(window).width()) !== null && _$$width !== void 0 ? _$$width : 0)) {
-      $div.css({
-        left: '',
-        right: 0
+      $div.data('current_dropdown_initiator', this[0]);
+      if (options.width) {
+        $div.width(options.width);
+      }
+      if (options.height) {
+        $div.find('.list').css('maxHeight', options.height);
+      }
+      $list.empty();
+      $.each(options.options, (optionHtml, callback) => {
+        const $option = $("<div class='option minimal' style='cursor: pointer; padding: 2px 5px; overflow: hidden; white-space: nowrap;'>" + "  <span tabindex='-1'>" + optionHtml.toString() + '</span>' + '</div>').appendTo($list);
+        function unhoverOtherOptions() {
+          $option.parent().find('div.option').removeClass('ui-state-hover ui-state-active').addClass('minimal');
+        }
+        if ($.isFunction(callback)) {
+          $option.addClass('ui-state-default').bind({
+            mouseenter() {
+              unhoverOtherOptions();
+              $option.addClass('ui-state-hover').removeClass('minimal');
+            },
+            mouseleave: unhoverOtherOptions,
+            mousedown(event) {
+              event.preventDefault();
+              unhoverOtherOptions();
+              $option.addClass('ui-state-active').removeClass('minimal');
+            },
+            mouseup: unhoverOtherOptions,
+            click: callback
+          });
+        } else {
+          $option.addClass('ui-state-disabled').bind({
+            mousedown(event) {
+              event.preventDefault();
+            }
+          });
+        }
       });
+      const offset = (_this$offset = this.offset()) !== null && _this$offset !== void 0 ? _this$offset : {
+        top: 0,
+        left: 0
+      };
+      const height = (_this$outerHeight = this.outerHeight()) !== null && _this$outerHeight !== void 0 ? _this$outerHeight : 0;
+      $div.css({
+        whiteSpace: 'nowrap',
+        position: 'absolute',
+        top: offset.top + height,
+        left: offset.left + 5,
+        right: ''
+      }).hide().show();
+
+      // this is a fix so that if the dropdown ends up being off the page then move it back in so that it is on the page.
+      if (((_$div$offset$left = (_$div$offset = $div.offset()) === null || _$div$offset === void 0 ? void 0 : _$div$offset.left) !== null && _$div$offset$left !== void 0 ? _$div$offset$left : 0) + ((_$div$width = $div.width()) !== null && _$div$width !== void 0 ? _$div$width : 0) > ((_$$width = $(window).width()) !== null && _$$width !== void 0 ? _$$width : 0)) {
+        $div.css({
+          left: '',
+          right: 0
+        });
+      }
     }
-  }
-
-  return this;
-}, {
-  defaults: {
-    height: 250,
-    width: 'auto'
-  }
-});
+    return this;
+  }, {
+    defaults: {
+      height: 250,
+      width: 'auto'
+    }
+  });
+  // @ts-expect-error
+})(typeof window !== 'undefined' ? window : this);
+export {};

package/es/rce/plugins/instructure_rce_external_tools/lti11-content-items/RceLti11ContentItem.js

@@ -15,189 +15,194 @@
  * 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 $ from 'jquery';
+
 import { externalToolsEnvFor } from '../ExternalToolsEnv';
 import { emptyAsNull } from '../../../../util/string-util';
 import { addParentFrameContextToUrl } from '../util/addParentFrameContextToUrl';
 import tinymce from 'tinymce';
 import { isStudioContentItemCustomJson, studioAttributesFrom, displayStyleFrom } from '../../shared/StudioLtiSupportUtils';
+function maybeAddPx(value) {
+  if (value == null) return undefined;
+  const strVal = String(value).trim();
+  if (/^\d+$/.test(strVal)) {
+    return strVal + 'px';
+  }
+  return strVal;
+}
 export class RceLti11ContentItem {
   static fromJSON(contentItem) {
     let env = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : externalToolsEnvFor(tinymce.activeEditor);
     return new RceLti11ContentItem(contentItem, env);
   }
-
   constructor(contentItem) {
     let env = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : externalToolsEnvFor(tinymce.activeEditor);
+    this.contentItem = void 0;
+    this.env = void 0;
     this.contentItem = contentItem;
     this.env = env;
   }
-
   get text() {
     return this.contentItem.text;
   }
-
   get isLTI() {
     var _this$contentItem$med;
-
     return LTI_MIME_TYPES.includes((_this$contentItem$med = this.contentItem.mediaType) !== null && _this$contentItem$med !== void 0 ? _this$contentItem$med : '');
   }
-
   get isOverriddenForThumbnail() {
     var _this$contentItem$pla;
-
     return this.isLTI && this.contentItem.thumbnail && ((_this$contentItem$pla = this.contentItem.placementAdvice) === null || _this$contentItem$pla === void 0 ? void 0 : _this$contentItem$pla.presentationDocumentTarget) === 'iframe';
   }
-
   get isImage() {
     var _this$contentItem$med2, _this$contentItem$med3;
-
     return ((_this$contentItem$med2 = this.contentItem.mediaType) === null || _this$contentItem$med2 === void 0 ? void 0 : (_this$contentItem$med3 = _this$contentItem$med2.startsWith) === null || _this$contentItem$med3 === void 0 ? void 0 : _this$contentItem$med3.call(_this$contentItem$med2, 'image')) === true;
   }
-
   get linkClassName() {
     return this.isOverriddenForThumbnail ? 'lti-thumbnail-launch' : '';
   }
-
   get url() {
     var _ref;
-
     return (_ref = this.isLTI ? this.contentItem.canvasURL : this.contentItem.url) === null || _ref === void 0 ? void 0 : _ref.replace(/^(data:text\/html|javascript:)/, '#$1');
   }
-
   get linkTarget() {
     var _this$contentItem, _this$contentItem$pla2, _this$contentItem$pla3;
-
     if (this.isOverriddenForThumbnail) {
       return JSON.stringify(this.contentItem.placementAdvice);
     }
-
     return ((_this$contentItem = this.contentItem) === null || _this$contentItem === void 0 ? void 0 : (_this$contentItem$pla2 = _this$contentItem.placementAdvice) === null || _this$contentItem$pla2 === void 0 ? void 0 : (_this$contentItem$pla3 = _this$contentItem$pla2.presentationDocumentTarget) === null || _this$contentItem$pla3 === void 0 ? void 0 : _this$contentItem$pla3.toLowerCase()) === 'window' ? '_blank' : null;
   }
-
   get docTarget() {
     var _this$contentItem2, _this$contentItem2$pl, _this$contentItem3, _this$contentItem3$pl, _this$contentItem3$pl2;
-
     if (((_this$contentItem2 = this.contentItem) === null || _this$contentItem2 === void 0 ? void 0 : (_this$contentItem2$pl = _this$contentItem2.placementAdvice) === null || _this$contentItem2$pl === void 0 ? void 0 : _this$contentItem2$pl.presentationDocumentTarget) === 'embed' && !this.isImage) {
       return 'text';
     } else if (this.isOverriddenForThumbnail) {
       return 'link';
     }
-
     return (_this$contentItem3 = this.contentItem) === null || _this$contentItem3 === void 0 ? void 0 : (_this$contentItem3$pl = _this$contentItem3.placementAdvice) === null || _this$contentItem3$pl === void 0 ? void 0 : (_this$contentItem3$pl2 = _this$contentItem3$pl.presentationDocumentTarget) === null || _this$contentItem3$pl2 === void 0 ? void 0 : _this$contentItem3$pl2.toLowerCase();
   }
-
   get codePayload() {
     switch (this.docTarget) {
       case 'iframe':
         return this.generateCodePayloadIframe();
-
       case 'embed':
         return this.generateCodePayloadEmbed();
-
       case 'text':
         return this.generateCodePayloadText();
-
       default:
         return this.generateCodePayloadLink();
     }
   }
-
+  get containingCanvasLtiToolId() {
+    return this.env.containingCanvasLtiToolId;
+  }
+  get currentTinyMceSelection() {
+    return this.env.editorSelection;
+  }
   generateCodePayloadIframe() {
-    var _this$env, _this$contentItem$cla, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7, _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
-
-    const studioAttributes = isStudioContentItemCustomJson(this.contentItem.custom) ? studioAttributesFrom(this.contentItem.custom) : null;
-    return $('<div/>').append($('<iframe/>', {
-      src: addParentFrameContextToUrl(this.url, this.containingCanvasLtiToolId),
-      title: this.contentItem.title,
-      allowfullscreen: 'true',
-      webkitallowfullscreen: 'true',
-      mozallowfullscreen: 'true',
-      allow: (_this$env = this.env) === null || _this$env === void 0 ? void 0 : _this$env.ltiIframeAllowPolicy,
-      ...studioAttributes
-    }).addClass((_this$contentItem$cla = this.contentItem.class) !== null && _this$contentItem$cla !== void 0 ? _this$contentItem$cla : '').css({
-      width: (_this$contentItem$pla4 = (_this$contentItem$pla5 = this.contentItem.placementAdvice) === null || _this$contentItem$pla5 === void 0 ? void 0 : _this$contentItem$pla5.displayWidth) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : '',
-      height: (_this$contentItem$pla6 = (_this$contentItem$pla7 = this.contentItem.placementAdvice) === null || _this$contentItem$pla7 === void 0 ? void 0 : _this$contentItem$pla7.displayHeight) !== null && _this$contentItem$pla6 !== void 0 ? _this$contentItem$pla6 : '',
-      display: displayStyleFrom(studioAttributes)
-    }).attr({
-      width: (_this$contentItem$pla8 = (_this$contentItem$pla9 = this.contentItem.placementAdvice) === null || _this$contentItem$pla9 === void 0 ? void 0 : _this$contentItem$pla9.displayWidth) !== null && _this$contentItem$pla8 !== void 0 ? _this$contentItem$pla8 : '',
-      height: (_this$contentItem$pla10 = (_this$contentItem$pla11 = this.contentItem.placementAdvice) === null || _this$contentItem$pla11 === void 0 ? void 0 : _this$contentItem$pla11.displayHeight) !== null && _this$contentItem$pla10 !== void 0 ? _this$contentItem$pla10 : ''
-    })).html();
+    var _addParentFrameContex, _this$contentItem$tit, _this$env, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7;
+    const iframe = document.createElement('iframe');
+    iframe.src = (_addParentFrameContex = addParentFrameContextToUrl(this.url, this.containingCanvasLtiToolId)) !== null && _addParentFrameContex !== void 0 ? _addParentFrameContex : '';
+    iframe.title = (_this$contentItem$tit = this.contentItem.title) !== null && _this$contentItem$tit !== void 0 ? _this$contentItem$tit : '';
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.setAttribute('webkitallowfullscreen', 'true');
+    iframe.setAttribute('mozallowfullscreen', 'true');
+    if (((_this$env = this.env) === null || _this$env === void 0 ? void 0 : _this$env.ltiIframeAllowPolicy) !== undefined) {
+      iframe.setAttribute('allow', this.env.ltiIframeAllowPolicy);
+    } else if (this.isLTI) {
+      iframe.setAttribute('allow', 'microphone; camera; midi');
+    }
+    if (this.contentItem.class) {
+      iframe.className = this.contentItem.class;
+    }
+    const w = maybeAddPx((_this$contentItem$pla4 = (_this$contentItem$pla5 = this.contentItem.placementAdvice) === null || _this$contentItem$pla5 === void 0 ? void 0 : _this$contentItem$pla5.displayWidth) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : undefined);
+    const h = maybeAddPx((_this$contentItem$pla6 = (_this$contentItem$pla7 = this.contentItem.placementAdvice) === null || _this$contentItem$pla7 === void 0 ? void 0 : _this$contentItem$pla7.displayHeight) !== null && _this$contentItem$pla6 !== void 0 ? _this$contentItem$pla6 : undefined);
+    if (w) {
+      iframe.style.width = w;
+      iframe.setAttribute('width', w.replace('px', ''));
+    }
+    if (h) {
+      iframe.style.height = h;
+      iframe.setAttribute('height', h.replace('px', ''));
+    }
+    if (isStudioContentItemCustomJson(this.contentItem.custom)) {
+      const studioAttributes = studioAttributesFrom(this.contentItem.custom);
+      const ds = displayStyleFrom(studioAttributes);
+      if (ds) iframe.style.display = ds;
+      for (const key in studioAttributes) {
+        const val = studioAttributes[key];
+        if (val !== undefined && val !== null) {
+          iframe.setAttribute(key, String(val));
+        }
+      }
+    }
+    const div = document.createElement('div');
+    div.appendChild(iframe);
+    return div.innerHTML;
   }
-
   generateCodePayloadEmbed() {
-    var _this$contentItem$pla12, _this$contentItem$pla13, _this$contentItem$pla14, _this$contentItem$pla15;
-
-    return $('<div/>').append($('<img/>', {
-      src: this.url,
-      alt: this.text
-    }).css({
-      width: (_this$contentItem$pla12 = (_this$contentItem$pla13 = this.contentItem.placementAdvice) === null || _this$contentItem$pla13 === void 0 ? void 0 : _this$contentItem$pla13.displayWidth) !== null && _this$contentItem$pla12 !== void 0 ? _this$contentItem$pla12 : '',
-      height: (_this$contentItem$pla14 = (_this$contentItem$pla15 = this.contentItem.placementAdvice) === null || _this$contentItem$pla15 === void 0 ? void 0 : _this$contentItem$pla15.displayHeight) !== null && _this$contentItem$pla14 !== void 0 ? _this$contentItem$pla14 : ''
-    })).html();
+    var _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
+    const img = document.createElement('img');
+    if (this.url) img.src = this.url;
+    if (this.text) img.alt = this.text;
+    const w = maybeAddPx((_this$contentItem$pla8 = (_this$contentItem$pla9 = this.contentItem.placementAdvice) === null || _this$contentItem$pla9 === void 0 ? void 0 : _this$contentItem$pla9.displayWidth) !== null && _this$contentItem$pla8 !== void 0 ? _this$contentItem$pla8 : undefined);
+    const h = maybeAddPx((_this$contentItem$pla10 = (_this$contentItem$pla11 = this.contentItem.placementAdvice) === null || _this$contentItem$pla11 === void 0 ? void 0 : _this$contentItem$pla11.displayHeight) !== null && _this$contentItem$pla10 !== void 0 ? _this$contentItem$pla10 : undefined);
+    if (w) img.style.width = w;
+    if (h) img.style.height = h;
+    const div = document.createElement('div');
+    div.appendChild(img);
+    return div.innerHTML;
   }
-
   generateCodePayloadText() {
     var _this$text;
-
     return (_this$text = this.text) !== null && _this$text !== void 0 ? _this$text : '';
   }
-
-  get containingCanvasLtiToolId() {
-    return this.env.containingCanvasLtiToolId;
-  }
-
-  get currentTinyMceSelection() {
-    return this.env.editorSelection;
-  }
-
   generateCodePayloadLink() {
-    const $linkContainer = $('<div/>'),
-          $link = $('<a/>', {
-      href: this.url,
-      title: this.contentItem.title,
-      target: this.linkTarget
-    });
-
-    if (this.linkClassName) {
-      $link.addClass(this.linkClassName);
-    }
-
-    $linkContainer.append($link);
-
-    if (this.contentItem.thumbnail) {
+    const div = document.createElement('div');
+    const a = document.createElement('a');
+    if (this.url) a.href = this.url;
+    if (this.contentItem.title) a.title = this.contentItem.title;
+    if (this.linkTarget) a.target = this.linkTarget;
+    if (this.linkClassName) a.className = this.linkClassName;
+    div.appendChild(a);
+    if (this.contentItem.thumbnail && this.contentItem.thumbnail['@id']) {
       var _this$contentItem$thu, _this$contentItem$thu2;
-
-      $link.append($('<img />', {
-        src: this.contentItem.thumbnail['@id'],
-        height: (_this$contentItem$thu = this.contentItem.thumbnail.height) !== null && _this$contentItem$thu !== void 0 ? _this$contentItem$thu : 48,
-        width: (_this$contentItem$thu2 = this.contentItem.thumbnail.width) !== null && _this$contentItem$thu2 !== void 0 ? _this$contentItem$thu2 : 48,
-        alt: this.text
-      }));
-    } else if (emptyAsNull(this.currentTinyMceSelection) != null && $link[0] != null) {
+      const img = document.createElement('img');
+      img.src = this.contentItem.thumbnail['@id'];
+      const h = maybeAddPx((_this$contentItem$thu = this.contentItem.thumbnail.height) !== null && _this$contentItem$thu !== void 0 ? _this$contentItem$thu : 48);
+      const w = maybeAddPx((_this$contentItem$thu2 = this.contentItem.thumbnail.width) !== null && _this$contentItem$thu2 !== void 0 ? _this$contentItem$thu2 : 48);
+      if (h) img.style.height = h;
+      if (w) img.style.width = w;
+      if (this.text) img.alt = this.text;
+      a.appendChild(img);
+    } else if (emptyAsNull(this.currentTinyMceSelection) != null && a != null) {
       var _this$currentTinyMceS;
-
-      $link[0].innerHTML = (_this$currentTinyMceS = this.currentTinyMceSelection) !== null && _this$currentTinyMceS !== void 0 ? _this$currentTinyMceS : '';
+      a.innerHTML = (_this$currentTinyMceS = this.currentTinyMceSelection) !== null && _this$currentTinyMceS !== void 0 ? _this$currentTinyMceS : '';
     } else {
-      var _this$generateLinkHtm;
-
       // don't inject tool provided content into the page HTML
-      $link.text((_this$generateLinkHtm = this.generateLinkHtml()) !== null && _this$generateLinkHtm !== void 0 ? _this$generateLinkHtm : '');
+      const linkHtml = this.generateLinkHtml();
+      if (linkHtml) a.textContent = linkHtml;
     }
-
-    return $linkContainer.html();
+    return div.innerHTML;
   }
-
   generateLinkHtml() {
     var _ref2, _emptyAsNull, _this$contentItem$tex, _this$contentItem4, _this$contentItem4$ti;
-
     return (_ref2 = (_emptyAsNull = emptyAsNull(this.currentTinyMceSelection)) !== null && _emptyAsNull !== void 0 ? _emptyAsNull : emptyAsNull((_this$contentItem$tex = this.contentItem.text) === null || _this$contentItem$tex === void 0 ? void 0 : _this$contentItem$tex.trim())) !== null && _ref2 !== void 0 ? _ref2 : (_this$contentItem4 = this.contentItem) === null || _this$contentItem4 === void 0 ? void 0 : (_this$contentItem4$ti = _this$contentItem4.title) === null || _this$contentItem4$ti === void 0 ? void 0 : _this$contentItem4$ti.trim();
   }
-
 }
 const LTI_MIME_TYPES = ['application/vnd.ims.lti.v1.ltilink', 'application/vnd.ims.lti.v1.launch+json'];
+
 /**
  * Declare the global tinyMCE information used to pass editor context around in Canvas.
  *
  * Eventually, this should be moved into packages/canvas-rce.
+ */
+
+/**
+ * Interface for content items that come from external tool resource selection.
+ *
+ * Note that this interface may not be exhaustive, but provides types for the portion of ContentItem used by Canvas.
+ * Additionally, there are some extra properties present here used by canvas
+ *
+ * See https://www.imsglobal.org/spec/lti-dl/v2p0#content-item-types
+ * and https://www.imsglobal.org/lti/model/mediatype/application/vnd/ims/lti/v1/contentitems%2Bjson/index.html
+ * and https://www.imsglobal.org/lti/model/mediatype/application/vnd/ims/lti/v1/contentitems%2Bjson/context.json
  */

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

@@ -15,6 +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/>.
  */
+
 export function isContentItemThumbnailJson(input) {
   return typeof input === 'object' && typeof input.url === 'string';
 }