@instructure/canvas-rce 5.14.0 → 5.14.2

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

@@ -0,0 +1,84 @@
+/*
+ * 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) {
+  var _container;
+  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) {
+      var _container$_reactRoot;
+      (_container$_reactRoot = container._reactRoot) === null || _container$_reactRoot === void 0 ? void 0 : _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 = container) !== null && _container !== void 0 && _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,299 @@
+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 = _ref => {
+  var _tabs$foreground, _tabs$background, _tabs$background2, _tabs$border, _tabs$foreground2, _tabs$background3, _tabs$background4, _tabs$background5, _tabs$border2, _tabs$border3, _tabs$border4;
+  let {
+    tabs,
+    colorsInUse,
+    onCancel,
+    onSave
+  } = _ref;
+  const [currFgColor, setCurrFgColor] = useState((_tabs$foreground = tabs.foreground) === null || _tabs$foreground === void 0 ? void 0 : _tabs$foreground.color);
+  const [currBgColor, setCurrBgColor] = useState(isTransparent((_tabs$background = tabs.background) === null || _tabs$background === void 0 ? void 0 : _tabs$background.color) ? tabs.effectiveBgColor || '#ffffff' : (_tabs$background2 = tabs.background) === null || _tabs$background2 === void 0 ? void 0 : _tabs$background2.color);
+  const [currBorderColor, setCurrBorderColor] = useState((_tabs$border = tabs.border) === null || _tabs$border === void 0 ? void 0 : _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$foreground2 = tabs.foreground) !== null && _tabs$foreground2 !== void 0 && _tabs$foreground2.color) && tabs.foreground.color !== tabs.foreground.default);
+  const [customBackground, setCustomBackground] = useState(!isTransparent((_tabs$background3 = tabs.background) === null || _tabs$background3 === void 0 ? void 0 : _tabs$background3.color) && ((_tabs$background4 = tabs.background) === null || _tabs$background4 === void 0 ? void 0 : _tabs$background4.color) !== ((_tabs$background5 = tabs.background) === null || _tabs$background5 === void 0 ? void 0 : _tabs$background5.default));
+  const [customBorder, setCustomBorder] = useState(!isTransparent((_tabs$border2 = tabs.border) === null || _tabs$border2 === void 0 ? void 0 : _tabs$border2.color) && ((_tabs$border3 = tabs.border) === null || _tabs$border3 === void 0 ? void 0 : _tabs$border3.color) !== ((_tabs$border4 = tabs.border) === null || _tabs$border4 === void 0 ? void 0 : _tabs$border4.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 => {
+    var _tabs$background6, _tabs$foreground3;
+    const defaults = defaultColors;
+    if ((_tabs$background6 = tabs.background) !== null && _tabs$background6 !== void 0 && _tabs$background6.default) {
+      defaults[0] = tabs.background.default;
+    }
+    if ((_tabs$foreground3 = tabs.foreground) !== null && _tabs$foreground3 !== void 0 && _tabs$foreground3.default) {
+      defaults[1] = tabs.foreground.default;
+    }
+    // return only unique colors
+    return [...defaults, ...((colorsInUse === null || colorsInUse === void 0 ? void 0 : 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) {
+      var _tabs$foreground4;
+      firstColor = currFgColor || ((_tabs$foreground4 = tabs.foreground) === null || _tabs$foreground4 === void 0 ? void 0 : _tabs$foreground4.default) || defaultColors[0];
+      firstColorLabel = formatMessage('Color');
+    } else if (activeTab === 'border' || activeTab === 'background' && !!tabs.border) {
+      var _tabs$border5;
+      firstColor = currBorderColor || ((_tabs$border5 = tabs.border) === null || _tabs$border5 === void 0 ? void 0 : _tabs$border5.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,68 @@
+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 = _ref => {
+  let {
+    tabs,
+    open,
+    positionTarget,
+    onCancel,
+    onChange
+  } = _ref;
+  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);

package/es/rce/plugins/instructure_condensed_buttons/ui/directionality-button.js

@@ -15,12 +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 formatMessage from '../../../../format-message';
 export default function (editor) {
   function defaultDirectionality() {
     return document.dir;
   }
-
   const directionalityMenuItems = [{
     name: 'ltr',
     text: formatMessage('Left-to-Right'),
@@ -32,8 +32,9 @@ export default function (editor) {
     cmd: 'mceDirectionRTL',
     icon: 'rtl'
   }];
-  if (defaultDirectionality() === 'rtl') directionalityMenuItems.reverse(); // Register menu item
+  if (defaultDirectionality() === 'rtl') directionalityMenuItems.reverse();
 
+  // Register menu item
   editor.ui.registry.addNestedMenuItem('directionality', {
     text: formatMessage('Directionality'),
     getSubmenuItems: () => [directionalityMenuItems[0].name, directionalityMenuItems[1].name]

package/es/rce/plugins/instructure_condensed_buttons/ui/indent-outdent-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';
 export default function register(editor) {
   const indentButtons = [{