@instructure/canvas-rce 5.14.0 → 5.14.2

package/es/rce/contentInsertion.js

@@ -15,18 +15,19 @@
  * 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 classnames from 'classnames';
 import { renderAudio, renderImage, renderLink, renderLinkedImage, renderVideo } from './contentRendering';
 import { cleanUrl, getAnchorElement, isImageFigure, isOnlyTextSelected } from './contentInsertionUtils';
 import { mediaPlayerURLFromFile } from './plugins/shared/fileTypeUtils';
 import { absoluteToRelativeUrl } from '../common/fileUrl';
+
 /** * generic content insertion ** */
+
 // when the editor is hidden, just replace the selected portion of the textarea
 // with the content. branching is for cross-browser
-
 function replaceTextareaSelection(editor, content) {
   const element = editor.getElement();
-
   if ('selectionStart' in element) {
     // mozilla / dom 3.0
     const before = element.value.substr(0, element.selectionStart);
@@ -41,7 +42,6 @@ function replaceTextareaSelection(editor, content) {
     element.value += content;
   }
 }
-
 export function insertContent(editor, content) {
   if (editor.isHidden()) {
     // replaces the textarea selection with the new image. no element returned
@@ -57,66 +57,60 @@ export function insertContent(editor, content) {
       if (editor.iframeElement) {
         editor.iframeElement.scrollIntoView();
       }
-    }, 100); // there's a bug in tinymce where insertContent calls execCommand('mceInsertContent'),
+    }, 100);
+    // there's a bug in tinymce where insertContent calls execCommand('mceInsertContent'),
     // but doesn't correctly forward the second "args" argument. Let's go right for
     // execCommand
     // editor.insertContent(content, {skip_focus: true})
-
     editor.execCommand('mceInsertContent', false, content, {
       skip_focus: true
     });
     return editor.selection.getEnd();
   }
 }
+
 /** * image insertion ** */
 
 function isElemImg(elem) {
   return elem && elem.nodeName.toLowerCase() === 'img';
 }
-
 function isElemAnchor(elem) {
   return elem && elem.nodeName.toLowerCase() === 'a';
 }
+
 /*
   check if we should preserve the parent anchor tag. the criteria is pretty
   strict based on if we have a single image selected with an anchor tag
   surrounding
 */
-
-
 function shouldPreserveImgAnchor(editor) {
   const selection = editor.selection;
   const selectedRange = selection.getRng();
   return isElemImg(selection.getNode()) && isElemAnchor(selectedRange.startContainer) && selectedRange.startContainer === selectedRange.endContainer;
 }
-
 export function insertImage(editor, image, canvasOrigin) {
   let content = '';
-
   if (shouldPreserveImgAnchor(editor)) {
     content = renderLinkedImage(editor.selection.getRng().startContainer, image, canvasOrigin);
   } else {
     // render the image, constraining its size on insertion
-    const imgNode = editor.selection.getNode(); // apply selected styles only in course/user images
-
+    const imgNode = editor.selection.getNode();
+    // apply selected styles only in course/user images
     if (isElemImg(imgNode) && !image['data-inst-icon-maker-icon']) {
       const customStyles = imgNode.style;
       const customWidth = imgNode.getAttribute('width');
       const parseStyles = {};
-
       for (let i = 0; i < customStyles.length; ++i) {
         const cssAttribute = customStyles.item(i);
         parseStyles[cssAttribute] = customStyles[cssAttribute];
       }
-
       image.width = customWidth;
       image.style = parseStyles;
     }
-
-    content = renderImage({ ...image
+    content = renderImage({
+      ...image
     }, canvasOrigin);
   }
-
   return insertContent(editor, content);
 }
 export function insertEquation(editor, latex) {
@@ -124,8 +118,9 @@ export function insertEquation(editor, latex) {
   const sel = editor.selection.getNode();
   const imgSz = sel ? parseFloat(editor.dom.doc.defaultView.getComputedStyle(sel).getPropertyValue('font-size')) || 1 : docSz;
   const scale = imgSz / docSz;
-  const url = `/equation_images/${encodeURIComponent(encodeURIComponent(latex))}?scale=${scale}`; // if I simply create the html string, xsslint fails jenkins
+  const url = `/equation_images/${encodeURIComponent(encodeURIComponent(latex))}?scale=${scale}`;
 
+  // if I simply create the html string, xsslint fails jenkins
   const img = document.createElement('img');
   img.setAttribute('alt', `LaTeX: ${latex}`);
   img.setAttribute('title', latex);
@@ -135,41 +130,38 @@ export function insertEquation(editor, latex) {
   img.setAttribute('data-ignore-a11y-check', '');
   return insertContent(editor, img.outerHTML);
 }
+
 /** * link insertion ** */
-// checks if there's an existing anchor containing the cursor
 
+// checks if there's an existing anchor containing the cursor
 function currentLink(editor, link) {
   const cursor = link.selectionDetails && link.selectionDetails.node ? link.selectionDetails.node : editor.selection.getNode(); // This doesn't work in IE 11, but will stop brokeness in other browsers
-
   return editor.dom.getParent(cursor, 'a');
-} // checks if the editor has a current selection (vs. just a cursor position)
-
+}
 
+// checks if the editor has a current selection (vs. just a cursor position)
 function hasSelection(editor) {
   let selection = editor.selection.getContent();
   selection = editor.dom.decode(selection);
   return !!selection && selection !== '';
 }
-
 export function existingContentToLink(editor, link) {
   return !editor.isHidden() && (link && (currentLink(editor, link) || !!link.selectedContent) || hasSelection(editor));
-} // Parses HTML string with support in old browsers because jQuery's parseHTML was added in 1.8.
+}
 
+// Parses HTML string with support in old browsers because jQuery's parseHTML was added in 1.8.
 function parseHTML(htmlString) {
   const tmp = document.implementation.createHTMLDocument();
   tmp.body.innerHTML = htmlString.trim();
   return tmp.body.children;
 }
-
 function selectionIsImg(editor) {
   const selection = editor.selection.getContent();
   return editor.dom.$(parseHTML(selection)).is('img');
 }
-
 export function existingContentToLinkIsImg(editor) {
   return !editor.isHidden() && selectionIsImg(editor);
 }
-
 function decorateLinkWithEmbed(link) {
   const type = link.embed && link.embed.type;
   link.class = classnames(link.class, {
@@ -182,34 +174,31 @@ function decorateLinkWithEmbed(link) {
     inline_disabled: link.embed && link.embed.disableInlinePreview,
     no_preview: link.embed && link.embed.noPreview
   });
-
   if (link.embed.type === 'video' || link.embed.type === 'audio') {
     link.id = `media_comment_${link.embed.id || 'maybe'}`;
   }
 }
-
 export function insertLink(editor, link, canvasOrigin) {
-  const linkAttrs = { ...link
+  const linkAttrs = {
+    ...link
   };
-
   if (linkAttrs.embed) {
     decorateLinkWithEmbed(linkAttrs);
     delete linkAttrs.embed;
   }
-
   return insertUndecoratedLink(editor, linkAttrs, canvasOrigin);
 }
-
 function textForLink(linkProps, editor, anchorElm) {
   // Some actions (like editing the link text in the link tray)
   // require an explicit update to the link text
-  if (linkProps.forceRename) return linkProps.text; // Other actions (link highlighting an existing link and changing
-  // the linked file) should use the anchor text if present
+  if (linkProps.forceRename) return linkProps.text;
 
+  // Other actions (link highlighting an existing link and changing
+  // the linked file) should use the anchor text if present
   return getAnchorText(editor.selection, anchorElm) || linkProps.text;
-} // link edit/create logic based on tinymce/plugins/link/plugin.ts
-
+}
 
+// link edit/create logic based on tinymce/plugins/link/plugin.ts
 function insertUndecoratedLink(editor, linkProps, canvasOrigin) {
   const selectedElm = editor.selection.getNode();
   const anchorElm = getAnchorElement(editor, selectedElm);
@@ -218,8 +207,8 @@ function insertUndecoratedLink(editor, linkProps, canvasOrigin) {
     format: 'text'
   });
   const onlyText = isOnlyTextSelected(selectedContent);
-  const linkText = onlyText && textForLink(linkProps, editor, anchorElm); // only keep the props we want as attributes on the <a>
-
+  const linkText = onlyText && textForLink(linkProps, editor, anchorElm);
+  // only keep the props we want as attributes on the <a>
   const linkAttrs = {
     id: linkProps.id,
     href: absoluteToRelativeUrl(cleanUrl(linkProps.href || linkProps.url), canvasOrigin),
@@ -230,11 +219,9 @@ function insertUndecoratedLink(editor, linkProps, canvasOrigin) {
     'data-course-type': linkProps['data-course-type'],
     'data-published': linkProps['data-published']
   };
-
   if (linkAttrs.target === '_blank') {
     linkAttrs.rel = 'noopener noreferrer';
   }
-
   if (anchorElm && !editor.selection.isCollapsed()) {
     updateLink(editor, anchorElm, linkText, linkAttrs);
   } else if (selectedContent) {
@@ -246,26 +233,21 @@ function insertUndecoratedLink(editor, linkProps, canvasOrigin) {
   } else {
     createLink(editor, selectedElm, linkText, linkAttrs, canvasOrigin);
   }
-
   return editor.selection.getEnd(); // this will be the newly created or updated content
 }
-
 function getAnchorText(selection, anchorElm) {
   return anchorElm ? anchorElm.innerText : selection.getContent({
     format: 'text'
   });
 }
-
 function updateLink(editor, anchorElm, text, linkAttrs) {
   if (text && anchorElm.innerText !== text) {
     anchorElm.innerText = text;
   }
-
   editor.dom.setAttribs(anchorElm, linkAttrs);
   editor.selection.select(anchorElm);
   editor.undoManager.add();
 }
-
 function createLink(editor, selectedElm, text, linkAttrs, canvasOrigin) {
   if (isImageFigure(selectedElm)) {
     linkImageFigure(editor, selectedElm, linkAttrs, canvasOrigin);
@@ -277,17 +259,15 @@ function createLink(editor, selectedElm, text, linkAttrs, canvasOrigin) {
     editor.execCommand('mceInsertLink', false, linkAttrs);
   }
 }
-
 function linkImageFigure(editor, fig, attrs, canvasOrigin) {
   const img = fig.tagName === 'IMG' ? fig : editor.dom.select('img', fig)[0];
-
   if (img) {
     const a = renderLink(attrs, img, canvasOrigin);
     img.parentNode.insertBefore(a, img);
   }
 }
-/* ** video insertion ** */
 
+/* ** video insertion ** */
 
 export function insertVideo(editor, video, canvasOrigin) {
   return insertMedia(editor, video, renderVideo, canvasOrigin);
@@ -295,30 +275,28 @@ export function insertVideo(editor, video, canvasOrigin) {
 export function insertAudio(editor, audio, canvasOrigin) {
   return insertMedia(editor, audio, renderAudio, canvasOrigin);
 }
-
 function insertMedia(editor, media, renderMedia, canvasOrigin) {
   const src = mediaPlayerURLFromFile(media, canvasOrigin);
-
   if (editor.selection.isCollapsed()) {
     var _result;
-
-    let result = insertContent(editor, renderMedia(media, canvasOrigin)); // for some reason, editor.selection.getEnd() returned from
+    let result = insertContent(editor, renderMedia(media, canvasOrigin));
+    // for some reason, editor.selection.getEnd() returned from
     // insertContent is parent paragraph when inserting the
     // media iframe. Look for the iframe with the right
     // src attribute. (Aside: tinymce strips the id or data-*
     // attributes from the iframe, that's why we can't look for those)
+    result = result.querySelector(`iframe[src="${src}"]`);
 
-    result = result.querySelector(`iframe[src="${src}"]`); // When the iframe is inserted, it doesn't allow the media to play
+    // When the iframe is inserted, it doesn't allow the media to play
     // because the wrapping span captures the click events. Setting
     // contentEditable to false disables this behavior.
-
     if ((_result = result) !== null && _result !== void 0 && _result.parentElement) {
       editor.dom.setAttrib(result.parentElement, 'contenteditable', false);
     }
-
     return result;
   } else {
-    return insertLink(editor, { ...media,
+    return insertLink(editor, {
+      ...media,
       href: src
     }, canvasOrigin);
   }

package/es/rce/contentInsertionUtils.js

@@ -34,32 +34,30 @@
  */
 export function cleanUrl(input) {
   let url = input;
-
   if (input) {
     if (input.match(/@/) && !input.match(/\//) && !input.match(/^mailto:/)) {
       url = 'mailto:' + input;
     } else if (!input.match(/^\w+:\/\//) && !input.match(/^(?:mailto|skype|tel):/) && !input.match(/^\//)) {
       url = 'http://' + input;
     }
-
     if (url.indexOf('@') != -1 && url.indexOf('mailto:') != 0 && !url.match(/^http/)) {
       url = 'mailto:' + url;
     }
   }
-
   return url;
-} // given the current selection, find the containing anchor
+}
 
+// given the current selection, find the containing anchor
 export function getAnchorElement(editor, selectedElm) {
   selectedElm = selectedElm || editor.selection.getNode();
-
   if (isImageFigure(selectedElm)) {
     return editor.dom.select('a[href]', selectedElm)[0];
   } else {
     return editor.dom.getParent(selectedElm, 'a[href]');
   }
-} // is the selection only text, or are other elements selected
+}
 
+// is the selection only text, or are other elements selected
 const d = document.createElement('div');
 export function isOnlyTextSelected(html) {
   // this regex-based code is lifted from tinymce's link plugin, but I didn't like it.
@@ -76,10 +74,10 @@ export function isOKToLink(html) {
   if (/(?:<(iframe|audio|video)|data-placeholder-for)/.test(html)) {
     return false;
   }
-
   return true;
 }
 export function isImageFigure(elm) {
-  return elm && elm.nodeName === 'FIGURE' && /\bimage\b/i.test(elm.className) // (elm.nodeName === 'IMG' || (elm.nodeName === 'FIGURE' && /\bimage\b/i.test(elm.className)))
+  return elm && elm.nodeName === 'FIGURE' && /\bimage\b/i.test(elm.className)
+  // (elm.nodeName === 'IMG' || (elm.nodeName === 'FIGURE' && /\bimage\b/i.test(elm.className)))
   ;
 }

package/es/rce/contentRendering.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/>.
  */
+
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { cleanUrl } from './contentInsertionUtils';
@@ -23,31 +24,31 @@ import { VIDEO_SIZE_DEFAULT, AUDIO_PLAYER_SIZE } from './plugins/instructure_rec
 import { mediaPlayerURLFromFile } from './plugins/shared/fileTypeUtils';
 import { prepEmbedSrc, prepLinkedSrc, absoluteToRelativeUrl } from '../common/fileUrl';
 export function renderLink(data, contents, canvasOrigin) {
-  const linkAttrs = { ...data
+  const linkAttrs = {
+    ...data
   };
   linkAttrs.href = prepLinkedSrc(linkAttrs.href || linkAttrs.url);
   delete linkAttrs.url;
-
   if (linkAttrs.href) {
     linkAttrs.href = absoluteToRelativeUrl(cleanUrl(linkAttrs.href), canvasOrigin);
   }
-
   linkAttrs.title = linkAttrs.title || formatMessage('Link');
   const children = contents || linkAttrs.text || linkAttrs.title;
   delete linkAttrs.selectionDetails;
   delete linkAttrs.text;
   linkAttrs.className = linkAttrs.class;
-  delete linkAttrs.class; // renderToStaticMarkup isn't happy with bool attributes
+  delete linkAttrs.class;
 
+  // renderToStaticMarkup isn't happy with bool attributes
   Object.keys(linkAttrs).forEach(attr => {
     if (typeof linkAttrs[attr] === 'boolean') linkAttrs[attr] = linkAttrs[attr].toString();
   });
-  return renderToStaticMarkup( /*#__PURE__*/React.createElement("a", linkAttrs, children));
+  return renderToStaticMarkup(/*#__PURE__*/React.createElement("a", linkAttrs, children));
 }
 export function renderLinkedImage(linkElem, image, canvasOrigin) {
   const linkHref = linkElem.getAttribute('href');
   image.href = prepEmbedSrc(image.href, canvasOrigin);
-  return renderToStaticMarkup( /*#__PURE__*/React.createElement("a", {
+  return renderToStaticMarkup(/*#__PURE__*/React.createElement("a", {
     href: absoluteToRelativeUrl(linkHref, canvasOrigin),
     "data-mce-href": linkHref
   }, constructJSXImageElement(image, canvasOrigin, {
@@ -69,14 +70,11 @@ export function constructJSXImageElement(image, canvasOrigin) {
   } = image;
   const imageSrc = absoluteToRelativeUrl(href || url || src, canvasOrigin);
   let altText = alt_text || title || display_name || '';
-
   if (isDecorativeImage) {
     altText = '';
     otherAttributes.role = 'presentation';
   }
-
   delete otherAttributes.contextType; // react doesn't like these
-
   delete otherAttributes.contextId;
   const ret = /*#__PURE__*/React.createElement("img", Object.assign({
     alt: altText,
@@ -84,7 +82,6 @@ export function constructJSXImageElement(image, canvasOrigin) {
     width: image.width,
     height: image.height
   }, otherAttributes));
-
   if (link && !opts.doNotLink) {
     return /*#__PURE__*/React.createElement("a", {
       href: absoluteToRelativeUrl(link, canvasOrigin),
@@ -92,7 +89,6 @@ export function constructJSXImageElement(image, canvasOrigin) {
       rel: "noopener noreferrer"
     }, ret);
   }
-
   return ret;
 }
 export function renderImage(image, canvasOrigin, opts) {
@@ -133,7 +129,6 @@ export function getMediaId(media) {
 }
 export function updateImage(editor, img, attrs) {
   var _editor$rceWrapper;
-
   // Workaround: When passing empty string to editor.dom.setAttribs it removes the attribute
   img.setAttribute('alt', attrs.altText);
   editor.dom.setAttribs(img, {

package/es/rce/customEvents.js

@@ -15,4 +15,5 @@
  * 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 const VIEW_CHANGE = 'ViewChange'; // Emitted when the RCE view changes (example: WYSIWYG -> RAW)

package/es/rce/editorLanguage.js

@@ -15,8 +15,17 @@
  * 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/>.
  */
+
 // if a locale is absent, we don't expect to receive it from canvas, but we'll
 // treat it the same as how we explicitly use english for Maori.
+
+/**
+ * Mapping of locales to their corresponding TinyMCE language codes.
+ * If a locale is absent, we don't expect to receive it from Canvas,
+ * but we'll treat it the same as how we explicitly use English for Maori.
+ *
+ * @type {Object<string, string | undefined>}
+ */
 const mapping = {
   ar: 'ar_SA',
   bg: 'bg_BG',
@@ -26,7 +35,7 @@ const mapping = {
   da: 'da',
   de: 'de',
   el: 'el',
-  // returning undefined tell tinymce to use it's default (en) strings
+  // returning undefined tells tinymce to use its default (en) strings
   en: undefined,
   // tinymce doesn't have Australian strings, so just pretend it's en-GB
   'en-AU': 'en_GB',
@@ -76,28 +85,31 @@ const mapping = {
   'zh-HK': 'zh_TW',
   'zh-Hans': 'zh_CN',
   'zh-Hant': 'zh_TW'
-}; // still expose it as a method for consistent usage and in case we ever have to
-// add special casing or null interpretation in the future
+};
 
+/**
+ * Function to return the corresponding TinyMCE language code for a given locale.
+ * If the locale is not provided, it will return the default language (English).
+ * If the locale contains underscores, they are replaced with hyphens for compatibility.
+ * If the locale contains a custom variant (e.g., -x-), the base language is used for mapping.
+ *
+ * @param {string} [locale] - The locale string.
+ * @returns {string | undefined} The corresponding TinyMCE language code, or undefined if not found.
+ */
 function editorLanguage(locale) {
   if (!locale) {
     return mapping.en;
   }
-
   if (locale.match('_')) {
     locale = locale.replace('_', '-');
-  } // tinymce won't know about custom locales, use the base one for mapping
-
-
+  }
+  // tinymce won't know about custom locales, use the base one for mapping
   if (locale.match('-x-')) {
     locale = locale.split('-x-')[0];
   }
-
   if (mapping[locale]) {
     return mapping[locale];
   }
-
   return mapping[locale.split('-')[0]];
 }
-
 module.exports = editorLanguage;

package/es/rce/indicatorRegion.js

@@ -15,12 +15,13 @@
  * 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 offset from 'bloody-offset'; // the editor's iframe
 
+import offset from 'bloody-offset';
+
+// the editor's iframe
 function editorIframe(editor) {
   return editor.getContainer().querySelector('iframe');
 }
-
 function box(el) {
   const b = el.getBoundingClientRect();
   return {
@@ -29,12 +30,12 @@ function box(el) {
     width: b.right - b.left,
     height: b.bottom - b.top
   };
-} //
+}
+
+//
 // the shape of the target's sillhouette on the editor's container. have to
 // subtract out the iframe's scroll since the target's position is relative to
 // the iframe's _document_, not its visible window.
-
-
 export default function indicatorRegion(editor, target) {
   let offsetFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : offset;
   const iframe = editorIframe(editor);

package/es/rce/normalizeLocale.js

@@ -15,10 +15,12 @@
  * 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 { getLocaleList } from '../getTranslations'; // keys = "qualified" locales old canvas sent, values = corresponding standard
+
+import { getLocaleList } from '../getTranslations';
+
+// keys = "qualified" locales old canvas sent, values = corresponding standard
 // locales that canvas now sends. old locales absent from this mapping (e.g.
 // pt-BR) didn't change.
-
 const mapping = {
   fa: 'fa-IR',
   uk: 'uk-UA',
@@ -27,7 +29,6 @@ const mapping = {
 };
 export default function normalizeLocale(locale) {
   const recognized = getLocaleList();
-
   if (!locale) {
     // default to english
     return 'en';
@@ -42,6 +43,7 @@ export default function normalizeLocale(locale) {
     locale = locale.split('-x-')[0];
     return normalizeLocale(locale);
   } else if (recognized.indexOf(locale.split('-')[0]) >= 0) {
+    // pass through base locale if recognized
     return locale.split('-')[0];
   } else {
     // default to english for unrecognized locales

package/es/rce/normalizeProps.js

@@ -15,11 +15,13 @@
  * 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 wrapInitCb from './wrapInitCb';
 export default function (props, tinymce) {
   const initialEditorOptions = props.editorOptions(tinymce);
   const editorOptions = wrapInitCb(props.mirroredAttrs, initialEditorOptions);
-  return { // other props, including overrides
+  return {
+    // other props, including overrides
     ...props,
     // enforced values, in addition to props and cannot be overridden by
     // props

package/es/rce/plugins/instructure-ui-icons/plugin.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -17,10 +15,14 @@
  * 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 { IconArrowOpenDownLine, IconAttachMediaLine, IconBoldLine, IconBulletListAlphaLine, IconBulletListCircleOutlineLine, IconBulletListLine, IconBulletListRomanLine, IconBulletListSquareLine, IconClearTextFormattingLine, IconDocumentLine, IconExitFullScreenLine, IconFullScreenLine, IconImageLine, IconIndentLine, IconItalicLine, IconLinkLine, IconLtiLine, IconNumberedListLine, IconOutdentLine, IconRemoveLinkLine, IconStrikethroughLine, IconTextCenteredLine, IconTextDirectionLtrLine, IconTextDirectionRtlLine, IconTextEndLine, IconTextStartLine, IconTextSubscriptLine, IconTextSuperscriptLine, IconUnderlineLine } from '@instructure/ui-icons/es/svg';
+
+import { IconArrowOpenDownLine, IconAttachMediaLine, IconBoldLine, IconBulletListAlphaLine, IconBulletListCircleOutlineLine, IconBulletListLine, IconBulletListRomanLine, IconBulletListSquareLine, IconClearTextFormattingLine, IconDocumentLine, IconExitFullScreenLine, IconFullScreenLine, IconImageLine, IconIndentLine, IconItalicLine, IconLinkLine, IconLtiLine, IconNumberedListLine, IconOutdentLine, IconRemoveLinkLine, IconStrikethroughLine, IconTextCenteredLine, IconTextDirectionLtrLine, IconTextDirectionRtlLine, IconTextEndLine, IconTextStartLine, IconTextSubscriptLine, IconTextSuperscriptLine, IconUnderlineLine
+// @ts-expect-error
+} from '@instructure/ui-icons/es/svg';
 import tinymce from 'tinymce';
 tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
   // the keys here are what tinymce calls it. the values are the svgs from instUI
+
   // there are few things here that are commented out that are things that we
   // might want to have our own icon for but one doesn't exist in @instructure/ui-icons
   const icons = {
@@ -55,6 +57,7 @@ tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
     // that tinyMCE uses that we'd want to match our table icon. So unless we get instUI versions of all
     // those too, it probably makes sense to just use TinyMCE's for everything table related.
     // table: IconTableLine,
+
     // The `tox-icon-*` path ids on these 2 are important. It is what tinyMCE
     // looks for to update the color when you select a new one
     'text-color': {
@@ -75,6 +78,20 @@ tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
         </g>
       </svg>`
     },
+    // the new color UI
+    color: {
+      src: `<svg data-id="color-button" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_13_7929)">
+      <path d="M5.52715 0L4.48118 1.01914L5.82475 2.33149L0.672221 7.36027C-0.224074 8.23479 -0.224074 9.6186 0.672221 10.4931L0.74662 10.5671L5.45129 15.1575C6.34759 16.032 7.7673 16.032 8.6636 15.1575L14.3398 9.61917L14.8636 9.1096L7.61763 2.0397L7.02097 1.45754L6.87072 1.31093L5.52715 0ZM6.87072 3.35205L12.7716 9.1096L11.129 10.7123H2.9859L1.71673 9.47398C1.41797 9.18248 1.41797 8.67234 1.71673 8.38083L6.87072 3.35205ZM15.7593 11.6603L15.1611 12.5342C15.1611 12.5342 14.788 13.1167 14.3398 13.7726C14.1158 14.137 13.967 14.4288 13.8176 14.7931C13.6682 15.1575 13.5185 15.3764 13.5185 15.8137C13.5185 16.9797 14.5642 18 15.7593 18C16.9543 18 18 16.9797 18 15.8137C18 15.3764 17.8503 15.0849 17.7009 14.7205C17.5516 14.3562 17.3281 13.9915 17.1787 13.7C16.8052 13.0441 16.3574 12.4616 16.3574 12.4616L15.7593 11.6603Z" fill="currentColor"/>
+      </g>
+      <defs>
+      <clipPath id="clip0_13_7929">
+      <rect width="18" height="18" fill="white"/>
+      </clipPath>
+      </defs>
+      </svg>
+      `
+    },
     unlink: IconRemoveLinkLine,
     'unordered-list': IconBulletListLine,
     ltr: IconTextDirectionLtrLine,
@@ -117,6 +134,7 @@ tinymce.PluginManager.add('instructure-ui-icons', function (editor) {
     }
   };
   Object.keys(icons).forEach(key => {
+    // @ts-expect-error
     editor.ui.registry.addIcon(key, icons[key].src);
   });
 });