@instructure/canvas-rce 5.11.1 → 5.12.2

package/lib/rce/plugins/shared/DimensionsInput/index.js

@@ -1,161 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 { bool, func, number, shape, string } from 'prop-types';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { FormFieldGroup } from '@instructure/ui-form-field';
-import { IconLockLine } from '@instructure/ui-icons';
-import { Flex } from '@instructure/ui-flex';
-import { Text } from '@instructure/ui-text';
-import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
-import formatMessage from '../../../../format-message';
-import DimensionInput from './DimensionInput';
-export { default as useDimensionsState } from './useDimensionsState';
-
-const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
-  let result = {
-    text: formatMessage('Aspect ratio will be preserved'),
-    type: 'hint'
-  };
-
-  if (dimensionsState.usePercentageUnits) {
-    if (!dimensionsState.isNumeric) {
-      result = {
-        text: formatMessage('Percentage must be a number'),
-        type: 'error'
-      };
-    } else if (!dimensionsState.isAtLeastMinimums) {
-      result = {
-        text: formatMessage('Must be at least {percentage}%', {
-          percentage: minPercentage
-        }),
-        type: 'error'
-      };
-    }
-  } else if (!dimensionsState.isNumeric) {
-    result = {
-      text: formatMessage('Width and height must be numbers'),
-      type: 'error'
-    };
-  } else if (!dimensionsState.isAtLeastMinimums) {
-    result = {
-      text: formatMessage('Must be at least {width} x {height}px', {
-        width: minWidth,
-        height: minHeight
-      }),
-      type: 'error'
-    };
-  }
-
-  return result;
-};
-
-export default function DimensionsInput(props) {
-  const {
-    dimensionsState,
-    minHeight,
-    minWidth,
-    minPercentage,
-    hidePercentage
-  } = props;
-
-  const handleDimensionTypeChange = e => {
-    dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
-  };
-
-  const message = getMessage(dimensionsState, minWidth, minHeight, minPercentage);
-  return /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, hidePercentage ? /*#__PURE__*/React.createElement(Text, {
-    weight: "bold"
-  }, formatMessage('Custom width and height (Pixels)')) : /*#__PURE__*/React.createElement(RadioInputGroup, {
-    "data-testid": "dimension-type",
-    name: "dimension-type",
-    description: formatMessage('Dimension Type'),
-    onChange: handleDimensionTypeChange,
-    value: dimensionsState.usePercentageUnits ? 'percentage' : 'pixels'
-  }, /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Pixels'),
-    value: "pixels"
-  }), /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Percentage'),
-    value: "percentage"
-  }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Dimensions')),
-    messages: [message]
-  }, /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "start",
-    direction: "row",
-    "data-testid": "input-number-container"
-  }, dimensionsState.usePercentageUnits ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldShrink: true,
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(DimensionInput, {
-    dimensionState: dimensionsState.percentageState,
-    label: formatMessage('Percentage')
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "x-small small"
-  }, "%")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(DimensionInput, {
-    dimensionState: dimensionsState.widthState,
-    label: formatMessage('Width'),
-    minValue: minWidth
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "x-small small"
-  }, /*#__PURE__*/React.createElement(IconLockLine, null)), /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(DimensionInput, {
-    dimensionState: dimensionsState.heightState,
-    label: formatMessage('Height'),
-    minValue: minHeight
-  })))))));
-}
-DimensionsInput.propTypes = {
-  dimensionsState: shape({
-    heightState: shape({
-      addOffset: func.isRequired,
-      inputValue: string.isRequired,
-      setInputValue: func.isRequired
-    }).isRequired,
-    isNumeric: bool.isRequired,
-    usePercentageUnits: bool.isRequired,
-    setUsePercentageUnits: func.isRequired,
-    widthState: shape({
-      addOffset: func.isRequired,
-      inputValue: string.isRequired,
-      setInputValue: func.isRequired
-    }).isRequired,
-    percentageState: shape({
-      addOffset: func.isRequired,
-      inputValue: string.isRequired,
-      setInputValue: func.isRequired
-    }).isRequired
-  }),
-  minHeight: number.isRequired,
-  minWidth: number.isRequired,
-  minPercentage: number.isRequired,
-  hidePercentage: bool
-};
-DimensionsInput.defaultProps = {
-  hidePercentage: false
-};

package/lib/rce/plugins/shared/DimensionsInput/useDimensionsState.js

@@ -1,220 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 { useState } from 'react';
-import { scaleForHeight, scaleForWidth } from '../DimensionUtils';
-
-function normalizedNumber(number) {
-  if (number == null) {
-    return null;
-  }
-
-  return Number.isFinite(number) ? Math.round(number) : NaN;
-}
-
-function parseAsInteger(inputString) {
-  if (inputString.trim() === '') {
-    return null;
-  }
-
-  const number = Number.parseFloat(inputString, 10);
-  return Number.isFinite(number) ? Math.round(number) : NaN;
-}
-
-function inputValueFor(initialNumber) {
-  return Number.isFinite(initialNumber) ? `${initialNumber}` : '';
-}
-
-export default function useDimensionsState(initialDimensions, constraints) {
-  const {
-    appliedHeight,
-    appliedWidth,
-    appliedPercentage,
-    naturalHeight,
-    naturalWidth,
-    usePercentageUnits
-  } = initialDimensions;
-  const {
-    minHeight,
-    minWidth,
-    minPercentage
-  } = constraints;
-  const initialNumericValues = {
-    height: usePercentageUnits ? naturalHeight : appliedHeight || naturalHeight,
-    width: usePercentageUnits ? naturalWidth : appliedWidth || naturalWidth,
-    percentage: appliedPercentage || 100
-  };
-  const [dimensions, setDimensions] = useState({
-    usePercentageUnits,
-    inputHeight: inputValueFor(initialNumericValues.height),
-    inputWidth: inputValueFor(initialNumericValues.width),
-    inputPercentage: inputValueFor(initialNumericValues.percentage),
-    numericHeight: initialNumericValues.height,
-    numericWidth: initialNumericValues.width,
-    numericPercentage: initialNumericValues.percentage
-  });
-  const currentNumericValues = {
-    height: dimensions.numericHeight,
-    width: dimensions.numericWidth,
-    percentage: dimensions.numericPercentage
-  };
-  const dimensionMinimums = {
-    height: minHeight,
-    width: minWidth,
-    percentage: minPercentage
-  };
-  const dimensionScaleFns = {
-    height: scaleForHeight,
-    width: scaleForWidth
-  };
-
-  function updateDimensions(attributes) {
-    setDimensions({ ...dimensions,
-      ...attributes,
-      numericHeight: normalizedNumber(attributes.numericHeight),
-      numericWidth: normalizedNumber(attributes.numericWidth),
-      numericPercentage: normalizedNumber(attributes.numericPercentage)
-    });
-  }
-
-  function scaleDimensions(dimensionName, number, scaleConstraints) {
-    let width, height, percentage;
-
-    if (dimensionName === 'percentage') {
-      width = naturalWidth;
-      height = naturalHeight;
-      percentage = number;
-    } else {
-      const scaleFn = dimensionScaleFns[dimensionName];
-      const scaledDimensions = scaleFn(naturalWidth, naturalHeight, number, scaleConstraints);
-      width = scaledDimensions.width;
-      height = scaledDimensions.height;
-      percentage = initialNumericValues.percentage;
-    }
-
-    return {
-      width,
-      height,
-      percentage
-    };
-  }
-
-  function setNumericDimension(dimensionName, number) {
-    const {
-      height,
-      width,
-      percentage
-    } = scaleDimensions(dimensionName, number, constraints);
-    updateDimensions({
-      numericHeight: height,
-      numericWidth: width,
-      numericPercentage: percentage,
-      inputHeight: inputValueFor(height),
-      inputWidth: inputValueFor(width),
-      inputPercentage: inputValueFor(percentage)
-    });
-  }
-
-  function setDimensionValue(dimensionName, value) {
-    const number = parseAsInteger(value);
-    const {
-      height,
-      width,
-      percentage
-    } = scaleDimensions(dimensionName, number);
-    updateDimensions({
-      numericHeight: height,
-      numericWidth: width,
-      numericPercentage: percentage,
-      inputHeight: dimensionName === 'height' ? value : inputValueFor(height),
-      inputWidth: dimensionName === 'width' ? value : inputValueFor(width),
-      inputPercentage: dimensionName === 'percentage' ? value : inputValueFor(percentage)
-    });
-  }
-
-  function offsetDimension(dimensionName, offset) {
-    const minValue = dimensionMinimums[dimensionName];
-    const initialNumber = initialNumericValues[dimensionName];
-    const numericValue = currentNumericValues[dimensionName];
-
-    if (numericValue != null && !Number.isFinite(numericValue)) {
-      return;
-    }
-
-    const newNumber = numericValue == null ? initialNumber + offset : Math.max(minValue, Math.floor(numericValue + offset));
-    setNumericDimension(dimensionName, newNumber);
-  }
-
-  const widthState = {
-    inputValue: dimensions.inputWidth,
-
-    addOffset(offset) {
-      offsetDimension('width', offset);
-    },
-
-    setInputValue(value) {
-      setDimensionValue('width', value);
-    }
-
-  };
-  const heightState = {
-    inputValue: dimensions.inputHeight,
-
-    addOffset(offset) {
-      offsetDimension('height', offset);
-    },
-
-    setInputValue(value) {
-      setDimensionValue('height', value);
-    }
-
-  };
-  const percentageState = {
-    inputValue: dimensions.inputPercentage,
-
-    addOffset(offset) {
-      offsetDimension('percentage', offset);
-    },
-
-    setInputValue(value) {
-      setDimensionValue('percentage', value);
-    }
-
-  };
-
-  const handleUsePercentageUnitsChange = value => {
-    setDimensions({ ...dimensions,
-      usePercentageUnits: value
-    });
-  };
-
-  const isNumeric = dimensions.usePercentageUnits ? Number.isFinite(dimensions.numericPercentage) : [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
-  const isAtLeastMinimums = dimensions.usePercentageUnits ? dimensions.numericPercentage >= minPercentage : dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
-  return {
-    widthState,
-    heightState,
-    percentageState,
-    isAtLeastMinimums,
-    isNumeric,
-    width: dimensions.numericWidth,
-    height: dimensions.numericHeight,
-    percentage: dimensions.numericPercentage,
-    usePercentageUnits: dimensions.usePercentageUnits,
-    setUsePercentageUnits: handleUsePercentageUnitsChange,
-    isValid: isAtLeastMinimums && isNumeric
-  };
-}

package/lib/rce/plugins/shared/ErrorBoundary.js

@@ -1,54 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 formatMessage from '../../../format-message'; // TODO: a placeholder. Design a better one. See CORE-2826
-
-export default class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    return {
-      hasError: true,
-      error
-    };
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const msg = this.state.error.message ? this.state.error.message : this.state.error.toString();
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          margin: '1rem'
-        }
-      }, /*#__PURE__*/React.createElement("h2", null, formatMessage('Something went wrong.')), /*#__PURE__*/React.createElement("p", null, msg));
-    }
-
-    return this.props.children;
-  }
-
-}
-ErrorBoundary.propTypes = {
-  children: PropTypes.node
-};

package/lib/rce/plugins/shared/EventUtils.js

@@ -1,39 +0,0 @@
-/*
- * Copyright (C) 2022 - 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/>.
- */
-// Microsoft word will include an image of the text being pasted on the clipboard
-// Let's look at the text/html to see if it's word before deciding to paste the image
-// Assumes we've already confirmed that cbdata includes files
-export function isMicrosoftWordContentInEvent(event) {
-  const cbdata = event.type === 'paste' ? event.clipboardData : event.dataTransfer;
-
-  if ((cbdata === null || cbdata === void 0 ? void 0 : cbdata.files[0].type.indexOf('image/')) === 0 && cbdata.types.includes('text/html')) {
-    const html = cbdata.getData('text/html');
-    return isMicrosoftWordContent(html);
-  }
-
-  return false;
-}
-export function isMicrosoftWordContent(html) {
-  if (html) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    return Array.from(doc.documentElement.attributes).some(attr => /schemas[-.]microsoft[-.]com/.test(attr.value)) || /<o:|class="Mso/.test(doc.body.innerHTML || '');
-  }
-
-  return false;
-}