@instructure/canvas-rce 5.14.1 → 5.15.0

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);
   });
 });

package/es/rce/plugins/instructure_color/clickCallback.js

@@ -0,0 +1,82 @@
+/*
+ * 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 React from 'react';
+import { createRoot } from 'react-dom/client';
+import tinycolor from 'tinycolor2';
+import { ColorPopup } from './components/ColorPopup';
+const CONTAINER_ID = 'instructure-color-popup-container';
+export default function (editor) {
+  let container = document.getElementById(CONTAINER_ID);
+  if (container == null) {
+    container = document.createElement('div');
+    container.id = CONTAINER_ID;
+    document.body.appendChild(container);
+  }
+  const handleDismiss = () => {
+    if (container) {
+      container._reactRoot?.unmount();
+      container._reactRoot = null;
+    }
+  };
+  const handleChange = newcolors => {
+    editor.undoManager.transact(() => {
+      if (newcolors.fgcolor) {
+        editor.execCommand('forecolor', false, newcolors.fgcolor);
+      }
+      if (newcolors.bgcolor) {
+        editor.execCommand('hilitecolor', false, newcolors.bgcolor);
+      }
+      if (newcolors.fgcolor || newcolors.bgcolor) {
+        editor.nodeChanged();
+      }
+      handleDismiss();
+    });
+  };
+  if (container?._reactRoot) {
+    handleDismiss();
+    document.removeEventListener('rce-text-block-popup-close', handleDismiss);
+    return;
+  }
+  document.addEventListener('rce-text-block-popup-close', handleDismiss);
+  const defaultTextColor = window.getComputedStyle(editor.getBody()).getPropertyValue('--ic-brand-font-color-dark').toLowerCase();
+  const styl = window.getComputedStyle(editor.selection.getNode());
+  const textColor = tinycolor(styl.getPropertyValue('color')).toHexString();
+  const bgColor_ = tinycolor(styl.getPropertyValue('background-color'));
+  const bgColor = bgColor_.getAlpha() === 1 ? bgColor_.toHexString() : bgColor_.toHex8String();
+  const target = document.querySelector('svg[data-id="color-button"]');
+  const root = createRoot(container);
+  container._reactRoot = root;
+  root.render(/*#__PURE__*/React.createElement(ColorPopup, {
+    tabs: {
+      foreground: {
+        color: textColor,
+        default: defaultTextColor
+      },
+      background: {
+        color: bgColor,
+        default: '#ffffff'
+      },
+      effectiveBgColor: '#ffffff'
+    },
+    open: true,
+    positionTarget: target,
+    onCancel: handleDismiss,
+    onChange: handleChange
+  }));
+}

package/es/rce/plugins/instructure_color/components/ColorPicker.js

@@ -0,0 +1,294 @@
+import _pt from "prop-types";
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useCallback, useState } from 'react';
+import tinycolor from 'tinycolor2';
+import formatMessage from '../../../../format-message';
+import { Button } from '@instructure/ui-buttons';
+import { ColorPreset, ColorMixer, ColorContrast } from '@instructure/ui-color-picker';
+import { Flex } from '@instructure/ui-flex';
+import { Pill } from '@instructure/ui-pill';
+import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
+import { Tabs } from '@instructure/ui-tabs';
+import { Text } from '@instructure/ui-text';
+import { ToggleDetails } from '@instructure/ui-toggle-details';
+import { View } from '@instructure/ui-view';
+import { isTransparent, getContrastStatus, getDefaultColors } from './colorUtils';
+
+// A custom type constraint that enforces at least one key is present
+
+const ColorPicker = ({
+  tabs,
+  colorsInUse,
+  onCancel,
+  onSave
+}) => {
+  const [currFgColor, setCurrFgColor] = useState(tabs.foreground?.color);
+  const [currBgColor, setCurrBgColor] = useState(isTransparent(tabs.background?.color) ? tabs.effectiveBgColor || '#ffffff' : tabs.background?.color);
+  const [currBorderColor, setCurrBorderColor] = useState(tabs.border?.color);
+  const [activeTab, setActiveTab] = useState(() => {
+    if (tabs.foreground) return 'foreground';
+    if (tabs.background) return 'background';
+    return 'border';
+  });
+  const [defaultColors] = useState(getDefaultColors());
+  const [customForeground, setCustomForeground] = useState(!!tabs.foreground?.color && tabs.foreground.color !== tabs.foreground.default);
+  const [customBackground, setCustomBackground] = useState(!isTransparent(tabs.background?.color) && tabs.background?.color !== tabs.background?.default);
+  const [customBorder, setCustomBorder] = useState(!isTransparent(tabs.border?.color) && tabs.border?.color !== tabs.border?.default);
+  const handleFgColorChange = useCallback(newColor => {
+    setCurrFgColor(newColor);
+  }, []);
+  const handleBgColorChange = useCallback(newColor => {
+    const c = tinycolor(newColor).toHexString();
+    setCurrBgColor(c);
+  }, []);
+  const handleBorderColorChange = useCallback(newColor => {
+    setCurrBorderColor(newColor);
+  }, []);
+  const handleTabChange = useCallback((_event, tabData) => {
+    setActiveTab(tabData.id);
+  }, []);
+  const handleChangePickAColor = useCallback((_e, value) => {
+    const isCustom = value === 'custom';
+    if (activeTab === 'foreground') {
+      setCustomForeground(isCustom);
+      if (!isCustom) {
+        setCurrFgColor(undefined);
+      }
+    } else if (activeTab === 'background') {
+      setCustomBackground(isCustom);
+      if (!isCustom) {
+        setCurrBgColor(undefined);
+      }
+    } else if (activeTab === 'border') {
+      setCustomBorder(isCustom);
+      if (!isCustom) {
+        setCurrBorderColor('#00000000');
+      }
+    }
+  }, [activeTab]);
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+  const handleSubmit = useCallback(() => {
+    setActiveTab(currFgColor ? 'foreground' : 'background');
+    const newcolors = {};
+    if (customForeground && currFgColor) {
+      const c = tinycolor(currFgColor).toHexString();
+      newcolors.fgcolor = c;
+    }
+    if (customBackground && currBgColor) {
+      const c = tinycolor(currBgColor).toHexString();
+      newcolors.bgcolor = c;
+    }
+    if (currBorderColor) {
+      newcolors.bordercolor = customBorder && !isTransparent(currBorderColor) ? currBorderColor : undefined;
+      if (newcolors.bordercolor) {
+        const c = tinycolor(newcolors.bordercolor).toHexString();
+        newcolors.bordercolor = c;
+      }
+    }
+    onSave(newcolors);
+  }, [currBgColor, currBorderColor, currFgColor, customBackground, customBorder, customForeground, onSave]);
+  const getColorPresets = variant => {
+    const defaults = defaultColors;
+    if (tabs.background?.default) {
+      defaults[0] = tabs.background.default;
+    }
+    if (tabs.foreground?.default) {
+      defaults[1] = tabs.foreground.default;
+    }
+    // return only unique colors
+    return [...defaults, ...(colorsInUse?.[variant] || [])].filter((c, i, a) => a.indexOf(c) === i && !isTransparent(c));
+  };
+  const renderColorMixer = (variant, enabled) => {
+    let value = currBgColor;
+    let onSelectColor = handleBgColorChange;
+    if (variant === 'foreground') {
+      value = currFgColor;
+      onSelectColor = handleFgColorChange;
+    }
+    if (variant === 'border') {
+      value = currBorderColor;
+      onSelectColor = handleBorderColorChange;
+    }
+    if (isTransparent(value)) value = '#fff'; // or the ColorMixer will return a transparent color
+
+    return /*#__PURE__*/React.createElement(ColorMixer, {
+      "data-testid": "color-mixer",
+      disabled: !enabled,
+      value: value,
+      withAlpha: false,
+      onChange: onSelectColor,
+      rgbRedInputScreenReaderLabel: formatMessage('Input field for red'),
+      rgbGreenInputScreenReaderLabel: formatMessage('Input field for green'),
+      rgbBlueInputScreenReaderLabel: formatMessage('Input field for blue'),
+      rgbAlphaInputScreenReaderLabel: formatMessage('Input field for alpha'),
+      colorSliderNavigationExplanationScreenReaderLabel: formatMessage("You are on a color slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively"),
+      alphaSliderNavigationExplanationScreenReaderLabel: formatMessage("You are on an alpha slider. To navigate the slider left or right, use the 'A' and 'D' buttons respectively"),
+      colorPaletteNavigationExplanationScreenReaderLabel: formatMessage("You are on a color palette. To navigate on the palette up, left, down or right, use the 'W', 'A', 'S' and 'D' buttons respectively")
+    });
+  };
+  const renderColorPreset = (variant, enabled) => {
+    let currColor = currBgColor;
+    if (variant === 'foreground') currColor = currFgColor || defaultColors[1];
+    if (variant === 'border') currColor = currBorderColor || '#00000000';
+    let onSelectColor = handleBgColorChange;
+    if (variant === 'foreground') onSelectColor = handleFgColorChange;
+    if (variant === 'border') onSelectColor = handleBorderColorChange;
+    return /*#__PURE__*/React.createElement(ColorPreset, {
+      "data-testid": "color-preset",
+      disabled: !enabled,
+      label: formatMessage('Previously chosen colors'),
+      colors: getColorPresets(variant),
+      selected: currColor,
+      onSelect: onSelectColor
+    });
+  };
+
+  // this will only get called if either tabs.foreground or tabs.border is defined
+  const getFirstColor = () => {
+    let firstColor, firstColorLabel;
+    if (activeTab === 'foreground' || activeTab === 'background' && !!tabs.foreground) {
+      firstColor = currFgColor || tabs.foreground?.default || defaultColors[0];
+      firstColorLabel = formatMessage('Color');
+    } else if (activeTab === 'border' || activeTab === 'background' && !!tabs.border) {
+      firstColor = currBorderColor || tabs.border?.default || defaultColors[0];
+      firstColorLabel = formatMessage('Border');
+    }
+    // @ts-expect-error
+    return {
+      firstColor,
+      firstColorLabel
+    };
+  };
+  const renderColorContrastSummary = () => {
+    const {
+      firstColor
+    } = getFirstColor();
+    const ok = getContrastStatus(firstColor, currBgColor || tabs.effectiveBgColor || '#fff');
+    return /*#__PURE__*/React.createElement(Flex, {
+      as: "div",
+      gap: "x-large"
+    }, /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, formatMessage('Color Contrast')), /*#__PURE__*/React.createElement(Pill, {
+      color: ok ? 'success' : 'danger'
+    }, ok ? formatMessage('PASS') : formatMessage('FAIL')));
+  };
+  const renderColorContrast = () => {
+    if (!(tabs.background || tabs.effectiveBgColor)) return null;
+    if (!(tabs.foreground || tabs.border)) return null;
+    if (!currBgColor) return null;
+    const {
+      firstColor,
+      firstColorLabel
+    } = getFirstColor();
+    if (firstColor === null) return null;
+    return /*#__PURE__*/React.createElement(ToggleDetails, {
+      summary: renderColorContrastSummary(),
+      "data-testid": "color-contrast-summary"
+    }, /*#__PURE__*/React.createElement(View, {
+      as: "div",
+      margin: "small 0 0 0"
+    }, /*#__PURE__*/React.createElement(ColorContrast, {
+      "data-testid": "color-contrast",
+      firstColor: firstColor,
+      secondColor: currBgColor || tabs.effectiveBgColor || '#fff',
+      label: formatMessage('Color Contrast Ratio'),
+      successLabel: formatMessage('PASS'),
+      failureLabel: formatMessage('FAIL'),
+      normalTextLabel: formatMessage('Normal text'),
+      largeTextLabel: formatMessage('Large text'),
+      graphicsTextLabel: formatMessage('Graphics text'),
+      firstColorLabel: firstColorLabel,
+      secondColorLabel: formatMessage('Background')
+    })));
+  };
+  const renderTab = variant => {
+    let choosersEnabled = true;
+    if (variant === 'foreground') {
+      choosersEnabled = customForeground;
+    } else if (variant === 'background') {
+      choosersEnabled = customBackground;
+    } else if (variant === 'border') {
+      choosersEnabled = customBorder;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+      as: "div",
+      margin: "0 0 small 0"
+    }, /*#__PURE__*/React.createElement(RadioInputGroup, {
+      layout: "columns",
+      name: "pickcolor",
+      description: formatMessage('Pick a color'),
+      size: "small",
+      value: choosersEnabled ? 'custom' : 'none',
+      onChange: handleChangePickAColor
+    }, /*#__PURE__*/React.createElement(RadioInput, {
+      label: formatMessage('Default'),
+      value: "none"
+    }), /*#__PURE__*/React.createElement(RadioInput, {
+      label: formatMessage('Custom'),
+      value: "custom"
+    }))), renderColorMixer(variant, choosersEnabled), renderColorPreset(variant, choosersEnabled));
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    "data-testid": "color-picker"
+  }, /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "small",
+    "data-mce-component": true
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    onRequestTabChange: handleTabChange
+  }, !!tabs.foreground && /*#__PURE__*/React.createElement(Tabs.Panel, {
+    id: "foreground",
+    renderTitle: formatMessage('Color'),
+    isSelected: activeTab === 'foreground'
+  }, renderTab('foreground')), !!tabs.background && /*#__PURE__*/React.createElement(Tabs.Panel, {
+    id: "background",
+    renderTitle: formatMessage('Background'),
+    isSelected: activeTab === 'background'
+  }, renderTab('background')), !!tabs.border && /*#__PURE__*/React.createElement(Tabs.Panel, {
+    id: "border",
+    renderTitle: formatMessage('Border'),
+    isSelected: activeTab === 'border'
+  }, renderTab('border'))), renderColorContrast()), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    background: "secondary",
+    padding: "small",
+    textAlign: "end"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleCancel
+  }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleSubmit,
+    margin: "0 0 0 small",
+    color: "primary"
+  }, formatMessage('Apply'))));
+};
+ColorPicker.propTypes = {
+  colorsInUse: _pt.shape({
+    foreground: _pt.arrayOf(_pt.string).isRequired,
+    background: _pt.arrayOf(_pt.string).isRequired,
+    border: _pt.arrayOf(_pt.string).isRequired
+  }),
+  onCancel: _pt.func.isRequired,
+  onSave: _pt.func.isRequired
+};
+export { ColorPicker };

package/es/rce/plugins/instructure_color/components/ColorPopup.js

@@ -0,0 +1,67 @@
+import _pt from "prop-types";
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { Popover } from '@instructure/ui-popover';
+import { ColorPicker } from './ColorPicker';
+import formatMessage from '../../../../format-message';
+const ColorPopup = ({
+  tabs,
+  open,
+  positionTarget,
+  onCancel,
+  onChange
+}) => {
+  const [recreateKey, setRecreateKey] = useState(0);
+  const handleHideContent = useCallback(() => {
+    onCancel();
+    setRecreateKey(Date.now());
+  }, [onCancel]);
+  const handleSubmit = useCallback(newcolors => {
+    onChange(newcolors);
+  }, [onChange]);
+  const handleKey = useCallback(e => {
+    if (e.key === 'Escape') {
+      onCancel();
+    }
+  }, [onCancel]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    key: recreateKey,
+    isShowingContent: open,
+    onHideContent: handleHideContent,
+    on: "click",
+    positionTarget: positionTarget,
+    screenReaderLabel: formatMessage('Color popup'),
+    shouldContainFocus: true,
+    shouldReturnFocus: true,
+    shouldCloseOnDocumentClick: true
+  }, /*#__PURE__*/React.createElement("div", {
+    onKeyDown: handleKey
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    tabs: tabs,
+    onCancel: onCancel,
+    onSave: handleSubmit
+  })));
+};
+ColorPopup.propTypes = {
+  open: _pt.bool.isRequired,
+  onCancel: _pt.func.isRequired,
+  onChange: _pt.func.isRequired
+};
+export { ColorPopup };

package/es/rce/plugins/instructure_color/components/colorUtils.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import conversions, { contrast } from '@instructure/ui-color-utils';
+import tinycolor from 'tinycolor2';
+const isTransparent = color => {
+  if (!color) {
+    return true;
+  }
+  const c = tinycolor(color);
+  return c.isValid() && c.getAlpha() === 0;
+};
+
+// the following is copied from the INSTUI ColorContrast component
+// a function to handle this will eventually be exported
+// from @instructure/ui-color-utils
+const INSTUIcalcBlendedColor = (c1, c2) => {
+  const alpha = 1 - (1 - c1.a) * (1 - c2.a);
+  return {
+    r: c2.r * c2.a / alpha + c1.r * c1.a * (1 - c2.a) / alpha,
+    g: c2.g * c2.a / alpha + c1.g * c1.a * (1 - c2.a) / alpha,
+    b: c2.b * c2.a / alpha + c1.b * c1.a * (1 - c2.a) / alpha,
+    a: 1
+  };
+};
+const INSTUIcalcContrast = (firstColor, secondColor) => {
+  const c1RGBA = conversions.colorToRGB(firstColor);
+  const c2RGBA = conversions.colorToRGB(secondColor);
+  const c1OnWhite = INSTUIcalcBlendedColor({
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  }, c1RGBA);
+  const c2OnC1OnWhite = INSTUIcalcBlendedColor(c1OnWhite, c2RGBA);
+  return contrast(conversions.colorToHex8(c1OnWhite), conversions.colorToHex8(c2OnC1OnWhite), 2);
+};
+const getContrastStatus = (color1, color2) => {
+  return INSTUIcalcContrast(color1, color2) >= 4.5;
+};
+const getDefaultColors = () => {
+  const fontcolor = window.getComputedStyle(document.documentElement).getPropertyValue('--ic-brand-font-color-dark') || '#000000';
+  return [fontcolor.toLowerCase(), '#ffffff'];
+};
+export { getContrastStatus, isTransparent, getDefaultColors };

package/es/rce/plugins/instructure_color/plugin.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2024 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import tinymce from 'tinymce';
+import formatMessage from '../../../format-message';
+import clickCallback from './clickCallback';
+tinymce.PluginManager.add('instructure_color', function (editor) {
+  editor.addCommand('launch_instructure_color', () => {
+    clickCallback(editor);
+  });
+  editor.ui.registry.addMenuItem('instructure_color', {
+    text: formatMessage('Color'),
+    icon: 'color',
+    onAction() {
+      editor.execCommand('launch_instructure_color');
+    }
+  });
+  editor.ui.registry.addButton('instructure_color', {
+    onAction() {
+      editor.execCommand('launch_instructure_color');
+    },
+    icon: 'color',
+    tooltip: formatMessage('Color')
+  });
+});

package/es/rce/plugins/instructure_condensed_buttons/core/ListUtils.js

@@ -4,13 +4,12 @@
  * For LGPL see License.txt in the project root for license information.
  * For commercial licenses see https://www.tiny.cloud/
  */
-const isChildOfBody = (editor, node) => !!editor.$.contains(editor.getBody(), node);
 
+const isChildOfBody = (editor, node) => !!editor.$.contains(editor.getBody(), node);
 export const isTableCellNode = node => node && /^(TH|TD)$/.test(node.nodeName);
 export const isListNode = editor => node => node && /^(OL|UL|DL)$/.test(node.nodeName) && isChildOfBody(editor, node);
 export function listStyleForSelectionOfEditor(editor) {
   const listElm = editor.dom.getParent(editor.selection.getNode(), 'ol,ul');
-
   if (listElm) {
     return {
       // This is not type safe, but the above getParent selector enforces that this will be
@@ -21,4 +20,12 @@ export function listStyleForSelectionOfEditor(editor) {
   } else {
     return undefined;
   }
-}
+}
+
+/**
+ * Valid values of the "list-style-type" property.
+ *
+ * NOTE: Not all these types are supported by the RCE. For that, see `ListStyleTypeValue`
+ *
+ * From https://www.w3schools.com/cssref/pr_list-style-type.php
+ */

package/es/rce/plugins/instructure_condensed_buttons/plugin.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 registerAlignmentButton from './ui/alignment-button';
 import registerIndentOutdentButton from './ui/indent-outdent-button';
 import registerListButton from './ui/list-button';

package/es/rce/plugins/instructure_condensed_buttons/ui/alignment-button.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 formatMessage from '../../../../format-message';
 import { toolbarIconHelperFor } from '../../../../util/tinymce-plugin-util';
 export default function (editor) {
@@ -47,14 +48,12 @@ export default function (editor) {
     }))),
     onSetup: api => {
       const iconHelper = toolbarIconHelperFor(editor, alignButtonLabel);
-
       function nodeChangeHandler() {
         const activeAlignment = alignToolbarButtons.find(b => editor.formatter.match(b.name));
         const icon = activeAlignment ? activeAlignment.icon : 'align-left';
         api.setActive(!!activeAlignment);
         iconHelper.updateIcon(icon);
       }
-
       nodeChangeHandler();
       editor.on('NodeChange', nodeChangeHandler);
       return () => editor.off('NodeChange', nodeChangeHandler);