@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -1,323 +0,0 @@
-/*
- * Copyright (C) 2021 - 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, useEffect, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { Flex } from '@instructure/ui-flex';
-import { View } from '@instructure/ui-view';
-import { Alert } from '@instructure/ui-alerts';
-import { Spinner } from '@instructure/ui-spinner';
-import { Preview } from './CreateIconMakerForm/Preview';
-import { CreateIconMakerForm } from './CreateIconMakerForm';
-import { Footer } from './CreateIconMakerForm/Footer';
-import { buildStylesheet, buildSvg } from '../svg';
-import { statuses, useSvgSettings } from '../svg/settings';
-import { defaultState, actions } from '../reducers/svgSettings';
-import { FixedContentTray } from '../../shared/FixedContentTray';
-import { useStoreProps } from '../../shared/StoreContext';
-import formatMessage from '../../../../format-message';
-import addIconMakerAttributes from '../utils/addIconMakerAttributes';
-import { validIcon } from '../utils/iconValidation';
-import { IconMakerFormHasChanges } from '../utils/IconMakerFormHasChanges';
-import bridge from '../../../../bridge';
-import { shouldIgnoreClose } from '../utils/IconMakerClose';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
-const INVALID_MESSAGE = formatMessage('One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image');
-const UNSAVED_CHANGES_MESSAGE = formatMessage('You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?');
-
-function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    background: "primary"
-  }, settings.error && /*#__PURE__*/React.createElement(Alert, {
-    variant: "error",
-    margin: "small",
-    timeout: 10000,
-    onDismiss: onAlertDismissal,
-    renderCloseButtonLabel: "Close"
-  }, settings.error), /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "medium medium small"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "row"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h2"
-  }, title)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    color: "primary",
-    onClick: onClose,
-    onKeyDown: onKeyDown,
-    "data-testid": "icon-maker-close-button",
-    screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(Preview, {
-    settings: settings
-  }))));
-}
-
-function renderBody(settings, dispatch, editor, editing, allowNameChange, nameRef, canvasOrigin, isLoading) {
-  return isLoading() ? /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "center"
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    renderTitle: formatMessage('Loading...'),
-    size: "large"
-  })) : /*#__PURE__*/React.createElement(CreateIconMakerForm, {
-    settings: settings,
-    dispatch: dispatch,
-    editor: editor,
-    editing: editing,
-    allowNameChange: allowNameChange,
-    nameRef: nameRef,
-    canvasOrigin: canvasOrigin
-  });
-}
-
-function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef, isModified) {
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    background: "primary"
-  }, /*#__PURE__*/React.createElement(Footer, {
-    disabled: status === statuses.LOADING,
-    onCancel: onClose,
-    onSubmit: () => handleSubmit({
-      replaceFile: replaceAll
-    }),
-    replaceAll: replaceAll,
-    onReplaceAllChanged: setReplaceAll,
-    editing: editing,
-    applyRef: applyRef,
-    isModified: isModified
-  }));
-}
-
-export function IconMakerTray(_ref) {
-  let {
-    editor,
-    onUnmount,
-    editing,
-    canvasOrigin
-  } = _ref;
-  const nameRef = useRef();
-  const applyRef = useRef();
-  const [isOpen, setIsOpen] = useState(true);
-  const [replaceAll, setReplaceAll] = useState(false);
-  const title = editing ? formatMessage('Edit Icon') : formatMessage('Create Icon');
-  const [settings, settingsStatus, dispatch] = useSvgSettings(editor, editing, canvasOrigin);
-  const [status, setStatus] = useState(statuses.IDLE);
-  const [initialSettings, setInitialSettings] = useState({ ...defaultState
-  });
-  const isModified = useRef(false);
-  const [mountNode, setMountNode] = useState(instuiPopupMountNode());
-  const handleFullscreenChange = useCallback(() => {
-    setMountNode(instuiPopupMountNode());
-  }, []); // These useRef objects are needed because when the tray is closed using the escape key
-  // objects created by useState are not available, causing the comparison between
-  // initialSettings and settings to behave unexpectedly
-
-  const initialSettingsRef = useRef(initialSettings);
-  const settingsRef = useRef(settings);
-  const statusRef = useRef(status);
-  settingsRef.current = useMemo(() => settings, [settings]);
-  statusRef.current = useMemo(() => status, [status]);
-  initialSettingsRef.current = useMemo(() => initialSettings, [initialSettings]);
-  useEffect(() => {
-    var _editor$rceWrapper, _editor$rceWrapper$_e, _editor$rceWrapper$_e2;
-
-    editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper = editor.rceWrapper) === null || _editor$rceWrapper === void 0 ? void 0 : (_editor$rceWrapper$_e = _editor$rceWrapper._elementRef) === null || _editor$rceWrapper$_e === void 0 ? void 0 : (_editor$rceWrapper$_e2 = _editor$rceWrapper$_e.current) === null || _editor$rceWrapper$_e2 === void 0 ? void 0 : _editor$rceWrapper$_e2.addEventListener('fullscreenchange', handleFullscreenChange);
-    return () => {
-      var _editor$rceWrapper2, _editor$rceWrapper2$_, _editor$rceWrapper2$_2;
-
-      editor === null || editor === void 0 ? void 0 : (_editor$rceWrapper2 = editor.rceWrapper) === null || _editor$rceWrapper2 === void 0 ? void 0 : (_editor$rceWrapper2$_ = _editor$rceWrapper2._elementRef) === null || _editor$rceWrapper2$_ === void 0 ? void 0 : (_editor$rceWrapper2$_2 = _editor$rceWrapper2$_.current) === null || _editor$rceWrapper2$_2 === void 0 ? void 0 : _editor$rceWrapper2$_2.removeEventListener('fullscreenchange', handleFullscreenChange);
-    };
-  }, [editor, handleFullscreenChange]);
-  useEffect(() => {
-    const formHasChanges = new IconMakerFormHasChanges(initialSettingsRef.current, settingsRef.current);
-    isModified.current = formHasChanges.hasChanges();
-  }, [settings, initialSettings]);
-  const storeProps = useStoreProps();
-
-  const onClose = event => {
-    if (shouldIgnoreClose(event === null || event === void 0 ? void 0 : event.target, editor === null || editor === void 0 ? void 0 : editor.id)) return;
-    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // RCE already uses browser's confirm dialog for unsaved changes
-    // Its use here in the Icon Maker tray keeps that consistency
-    // eslint-disable-next-line no-restricted-globals, no-alert
-
-    if (isModified.current && !confirm(UNSAVED_CHANGES_MESSAGE)) {
-      return;
-    }
-
-    setIsOpen(false);
-  };
-
-  const isLoading = () => status === statuses.LOADING;
-
-  const onKeyDown = event => {
-    var _applyRef$current, _nameRef$current;
-
-    if (event.keyCode !== 9) return;
-    event.preventDefault();
-    event.shiftKey ? (_applyRef$current = applyRef.current) === null || _applyRef$current === void 0 ? void 0 : _applyRef$current.focus() : (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();
-  };
-
-  useEffect(() => {
-    setReplaceAll(false);
-  }, [settings.name]);
-  useEffect(() => {
-    if (validIcon(settings)) {
-      dispatch({
-        type: actions.SET_ERROR,
-        payload: null
-      });
-      setStatus(statuses.IDLE);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [settings.color, settings.textColor, settings.text, settings.textSize, settings.textBackgroundColor, settings.textPosition, settings.imageSettings, settings.outlineColor, settings.outlineSize, settings.name]);
-
-  const handleSubmit = _ref2 => {
-    let {
-      replaceFile = false
-    } = _ref2;
-    setStatus(statuses.LOADING);
-
-    if (!validIcon(settings)) {
-      dispatch({
-        type: actions.SET_ERROR,
-        payload: INVALID_MESSAGE
-      });
-      setStatus(statuses.ERROR);
-      return;
-    }
-
-    const svg = buildSvg(settings, {
-      isPreview: false
-    });
-    svg.appendChild(buildStylesheet());
-    return storeProps.startIconMakerUpload({
-      name: `${settings.name || formatMessage('untitled')}.svg`,
-      domElement: svg
-    }, {
-      onDuplicate: replaceFile && 'overwrite'
-    }).then(writeIconToRCE).then(() => setIsOpen(false)).catch(err => {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      setStatus(statuses.ERROR);
-    });
-  };
-
-  const writeIconToRCE = _ref3 => {
-    let {
-      url,
-      display_name
-    } = _ref3;
-    const {
-      alt,
-      isDecorative,
-      externalStyle,
-      externalWidth,
-      externalHeight
-    } = settings;
-    const imageAttributes = {
-      alt_text: alt,
-      display_name,
-      height: externalHeight,
-      isDecorativeImage: isDecorative,
-      src: url,
-      // React wants this to be an object but we are just
-      // passing along a string here. Using the style attribute
-      // with all caps makes React ignore this fact
-      STYLE: externalStyle,
-      // DON'T CHANGE BEFORE READING COMMENT ABOVE
-      width: externalWidth
-    }; // Mark the image as an icon maker icon.
-
-    addIconMakerAttributes(imageAttributes);
-    bridge.embedImage(imageAttributes);
-  };
-
-  const defaultImageSettings = () => {
-    return {
-      mode: '',
-      image: '',
-      imageName: '',
-      icon: '',
-      iconFillColor: '#000000',
-      cropperSettings: null
-    };
-  };
-
-  const replaceInitialSettings = () => {
-    const name = editing ? settings.name : undefined;
-    const textPosition = editing ? settings.textPosition : defaultState.textPosition;
-    const imageSettings = settings.imageSettings || defaultImageSettings();
-    setInitialSettings({
-      name,
-      alt: editing ? settings.alt : defaultState.alt,
-      shape: editing ? settings.shape : defaultState.shape,
-      size: settings.size,
-      color: settings.color,
-      outlineSize: settings.outlineSize,
-      outlineColor: settings.outlineColor,
-      text: settings.text,
-      textSize: settings.textSize,
-      textColor: settings.textColor,
-      textBackgroundColor: settings.textBackgroundColor,
-      textPosition,
-      imageSettings
-    });
-  };
-
-  useEffect(() => {
-    setStatus(settingsStatus);
-    replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [settingsStatus]);
-
-  const handleAlertDismissal = () => dispatch({
-    type: actions.SET_ERROR,
-    payload: null
-  });
-
-  return /*#__PURE__*/React.createElement(FixedContentTray, {
-    title: title,
-    isOpen: isOpen,
-    onDismiss: onClose,
-    onUnmount: onUnmount,
-    mountNode: mountNode,
-    renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
-    renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, canvasOrigin, isLoading),
-    renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef, isModified.current),
-    bodyAs: "form",
-    shouldJoinBodyAndFooter: true
-  });
-}
-IconMakerTray.propTypes = {
-  editor: PropTypes.object.isRequired,
-  onUnmount: PropTypes.func,
-  editing: PropTypes.bool,
-  canvasOrigin: PropTypes.string.isRequired
-};
-IconMakerTray.defaultProps = {
-  onUnmount: () => {},
-  editing: false
-};

package/lib/rce/plugins/instructure_icon_maker/components/SavedIconMakerList.js

@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2021 - 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 PropTypes from 'prop-types';
-import { View } from '@instructure/ui-view';
-import Images, { RCSImageCollectionType } from '../../instructure_image/Images';
-import { ICON_MAKER_ICONS } from '../svg/constants';
-
-const SavedIconMakerList = props => {
-  const {
-    sortBy,
-    searchString,
-    onImageEmbed,
-    canvasOrigin,
-    fetchInitialImages,
-    fetchNextImages,
-    contextType
-  } = { ...props
-  };
-  const {
-    files,
-    bookmark,
-    isLoading,
-    hasMore
-  } = props.images[contextType];
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Images, {
-    fetchInitialImages: () => fetchInitialImages({
-      category: ICON_MAKER_ICONS
-    }),
-    fetchNextImages: () => fetchNextImages({
-      category: ICON_MAKER_ICONS
-    }),
-    contextType: contextType,
-    images: {
-      [contextType]: {
-        files,
-        bookmark,
-        hasMore,
-        isLoading
-      }
-    },
-    canvasOrigin: canvasOrigin,
-    sortBy: sortBy,
-    searchString: searchString,
-    onImageEmbed: onImageEmbed,
-    isIconMaker: true
-  }));
-};
-/* eslint-disable react/no-unused-prop-types */
-
-
-SavedIconMakerList.propTypes = {
-  sortBy: PropTypes.shape({
-    sort: PropTypes.oneOf(['date_added', 'alphabetical']).isRequired,
-    order: PropTypes.oneOf(['asc', 'desc']).isRequired
-  }),
-  images: RCSImageCollectionType.isRequired,
-  contextType: PropTypes.string.isRequired,
-  searchString: PropTypes.string,
-  onImageEmbed: PropTypes.func,
-  canvasOrigin: PropTypes.string,
-  fetchInitialImages: PropTypes.func,
-  fetchNextImages: PropTypes.func
-};
-SavedIconMakerList.defaultProps = {
-  sortBy: {
-    sort: 'date_added',
-    order: 'desc'
-  },
-  searchString: '',
-  onImageEmbed: () => {}
-};
-/* eslint-enable react/no-unused-prop-types */
-
-export default SavedIconMakerList;

package/lib/rce/plugins/instructure_icon_maker/plugin.js

@@ -1,110 +0,0 @@
-// @ts-nocheck
-
-/*
- * Copyright (C) 2021 - 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 bridge from '../../../bridge';
-import formatMessage from '../../../format-message';
-import { isOKToLink } from '../../contentInsertionUtils';
-import clickCallback, { CREATE_ICON_MAKER, EDIT_ICON_MAKER, LIST_ICON_MAKER } from './clickCallback';
-import registerEditToolbar from './registerEditToolbar';
-import tinymce from 'tinymce';
-
-function getMenuItems() {
-  return [{
-    text: formatMessage('Create Icon Maker Icon'),
-    value: 'instructure_create_icon_maker'
-  }, {
-    text: formatMessage('Saved Icon Maker Icons'),
-    value: 'instructure_list_icon_maker'
-  }];
-}
-
-function handleOptionSelected(ed, value) {
-  switch (value) {
-    case 'instructure_create_icon_maker':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForIconMakerPlugin', false, CREATE_ICON_MAKER);
-      break;
-
-    case 'instructure_list_icon_maker':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForIconMakerPlugin', false, LIST_ICON_MAKER);
-      break;
-
-    case 'instructure_edit_icon_maker':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForIconMakerPlugin', false, EDIT_ICON_MAKER);
-      break;
-  }
-} // Register plugin
-
-
-tinymce.PluginManager.add('instructure_icon_maker', function (ed) {
-  // Register tray control command
-  ed.addCommand('instructureTrayForIconMakerPlugin', (_ui, type) => {
-    if (type === LIST_ICON_MAKER) {
-      bridge.showTrayForPlugin(type, ed.id);
-    } else {
-      clickCallback(ed, document, type);
-    }
-  }); // Register menu items
-
-  ed.ui.registry.addNestedMenuItem('instructure_icon_maker', {
-    text: formatMessage('Icon Maker Icons'),
-    icon: 'buttons',
-    getSubmenuItems: () => getMenuItems().map(item => ({
-      type: 'menuitem',
-      text: item.text,
-      onAction: () => handleOptionSelected(ed, item.value),
-      onSetup: api => {
-        api.setDisabled(!isOKToLink(ed.selection.getContent()));
-        return () => {};
-      }
-    }))
-  }); // Register button
-
-  ed.ui.registry.addMenuButton('instructure_icon_maker', {
-    tooltip: formatMessage('Icon Maker Icons'),
-    icon: 'buttons',
-    fetch: callback => callback(getMenuItems().map(item => ({
-      type: 'menuitem',
-      text: item.text,
-      value: item.value,
-      onAction: () => handleOptionSelected(ed, item.value)
-    }))),
-
-    onSetup(api) {
-      function handleNodeChange(_e) {
-        api.setDisabled(!isOKToLink(ed.selection.getContent()));
-      }
-
-      setTimeout(handleNodeChange);
-      ed.on('NodeChange', handleNodeChange);
-      return () => {
-        ed.off('NodeChange', handleNodeChange);
-      };
-    }
-
-  }); // Register context toolbar for editing existing icon maker icons
-
-  registerEditToolbar(ed, api => {
-    if (!api.isDisabled()) {
-      handleOptionSelected(ed, 'instructure_edit_icon_maker');
-    }
-  });
-});