@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/ca/modules/rce/plugins/instructure_icon_maker/utils/__tests__/IconMakerFormHasChanges.test.js

@@ -0,0 +1,328 @@
+/*
+ * 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/>.
+ */
+import { IconMakerFormHasChanges } from '../IconMakerFormHasChanges';
+import { Shape } from '../../svg/shape';
+import { Size } from '../../svg/constants';
+describe('detect if icon maker form has changes', () => {
+  let initialSettings, currentSettings;
+  let imFormHasChanges;
+  beforeEach(() => {
+    initialSettings = initializeSettings();
+    currentSettings = initializeSettings();
+  });
+  describe('hasNameChange', () => {
+    it('returns false if names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if names do not match exactly', () => {
+      currentSettings.name = 'new-file-name.svg';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasAltChange', () => {
+    it('returns false if alt texts match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasAltChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if alt texts do not match exactly', () => {
+      currentSettings.alt = 'new alt text';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasAltChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasShapeNameChange', () => {
+    it('returns false if shape names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if shape names do not match exactly', () => {
+      currentSettings.shape = Shape.Diamond;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasShapeSizeChange', () => {
+    it('returns false if shape sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if shape sizes do not match exactly', () => {
+      currentSettings.size = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasShapeSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasColorNameChange', () => {
+    it('returns false if color names match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if color names do not match exactly', () => {
+      currentSettings.color = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(true);
+    });
+    it('returns false if both color names are null', () => {
+      initialSettings.color = null;
+      currentSettings.color = null;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if one color is null and the other is a valid color', () => {
+      initialSettings.color = null;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasColorNameChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasOutlineSizeChange', () => {
+    it('returns false if color outline sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if color outline sizes do not match exactly', () => {
+      currentSettings.outlineSize = 'medium';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasOutlineColorChange', () => {
+    it('returns false if outline colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if outline colors do not match exactly', () => {
+      currentSettings.outlineColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasOutlineColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextChange', () => {
+    it('returns false if text entries match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text entries do not match exactly', () => {
+      currentSettings.text = 'text-has-changed';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextSizeChange', () => {
+    it('returns false if text sizes match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextSizeChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text sizes do not match exactly', () => {
+      currentSettings.textSize = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextSizeChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextColorChange', () => {
+    it('returns false if text colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text colors do not match exactly', () => {
+      currentSettings.textColor = Color.Red;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextBackgroundColorChange', () => {
+    it('returns false if text background colors match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextBackgroundColorChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text background colors do not match exactly', () => {
+      currentSettings.textBackgroundColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextBackgroundColorChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasTextPositionChange', () => {
+    it('returns false if text positions match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextPositionChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if text positions do not match exactly', () => {
+      currentSettings.textPosition = 'below';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasTextPositionChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasImageSettingsChange', () => {
+    it('returns false if image settings match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasImageSettingsChange();
+      expect(result).toBe(false);
+    });
+    it('returns true if image settings do not match exactly', () => {
+      currentSettings.imageSettings.iconFillColor = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasImageSettingsChange();
+      expect(result).toBe(true);
+    });
+  });
+  describe('hasChanges', () => {
+    it('returns false if all properties match exactly', () => {
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(false);
+    });
+    it('returns true if imageSettings property is not an exact match', () => {
+      currentSettings.imageSettings.iconFillColor = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textPosition property is not an exact match', () => {
+      currentSettings.textPosition = 'below';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textBackgroundColor property is not an exact match', () => {
+      currentSettings.textBackgroundColor = Color.Yellow;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textColor property is not an exact match', () => {
+      currentSettings.textColor = Color.Red;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if textSize property is not an exact match', () => {
+      currentSettings.textSize = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if text property is not an exact match', () => {
+      currentSettings.text = 'text-has-changed';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if outlineColor property is not an exact match', () => {
+      currentSettings.outlineColor = Color.Green;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if outlineSize property is not an exact match', () => {
+      currentSettings.outlineSize = 'medium';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if color property is not an exact match', () => {
+      currentSettings.color = Color.Black;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if size property is not an exact match', () => {
+      currentSettings.size = Size.ExtraLarge;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if shape property is not an exact match', () => {
+      currentSettings.shape = Shape.Diamond;
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if alt property is not an exact match', () => {
+      currentSettings.alt = 'new alt text';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+    it('returns true if name property is not an exact match', () => {
+      currentSettings.name = 'new name';
+      imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
+      const result = imFormHasChanges.hasChanges();
+      expect(result).toBe(true);
+    });
+  });
+});
+const Color = {
+  Black: '#000000',
+  White: '#FFFFFF',
+  Yellow: '#FFFF00',
+  Green: '#00FF00',
+  Red: '#FF0000'
+};
+
+function initializeSettings() {
+  return {
+    name: 'file1',
+    alt: 'alt text',
+    size: Size.Medium,
+    shape: Shape.Circle,
+    color: Color.White,
+    outlineSize: 'none',
+    outlineColor: Color.Yellow,
+    text: '',
+    textSize: Size.Small,
+    textColor: Color.Green,
+    textBackgroundColor: Color.Red,
+    textPosition: 'middle',
+    imageSettings: {
+      cropperSettings: null,
+      icon: {
+        label: 'Art Icon'
+      },
+      iconFillColor: Color.White,
+      image: 'Art Icon',
+      mode: 'SingleColor'
+    }
+  };
+}

package/lib/translated/ca/modules/rce/plugins/instructure_icon_maker/utils/__tests__/round.test.js

@@ -0,0 +1,31 @@
+/*
+ * 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/>.
+ */
+import round from '../round';
+describe('round', () => {
+  it('rounds to the specified number of decimal places', () => {
+    expect(`${round(12.3456, 2)}`).toEqual('12.35');
+    expect(`${round(12.3456, 0)}`).toEqual('12');
+    expect(`${round(12.5, 0)}`).toEqual('13');
+    expect(`${round(12.34, 5)}`).toEqual('12.34');
+  });
+  it('throws when given a bad arguments', () => {
+    expect(() => round(12.34, -1)).toThrow();
+    expect(() => round('junk', 2)).toThrow();
+    expect(() => round(12.34, 'x')).toThrow();
+  });
+});

package/lib/translated/ca/modules/rce/plugins/instructure_icon_maker/utils/round.js

@@ -0,0 +1,25 @@
+/*
+ * 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/>.
+ */
+export default function round(number) {
+  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');
+  if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');
+  const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;
+  if (Number.isNaN(val)) throw new Error('the first arguments must be a number');
+  return val === 0 ? 0 : val; // prevent round(-0) from returning -0
+}

package/lib/translated/ca/modules/rce/plugins/instructure_image/ImageList/Image.js

@@ -70,7 +70,7 @@ export default function Image(_ref) {
     constrain: "cover",
     draggable: true,
     height: "6rem",
-    inline: false,
+    display: "block",
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     src: image.thumbnail_url,

package/lib/translated/ca/modules/rce/plugins/instructure_image/ImageList/index.js

@@ -30,7 +30,7 @@ export default function ImageList(_ref) {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true
+    wrap: "wrap"
   }, images.map((image, index) => {
     let focusRef = null;
 

package/lib/translated/ca/modules/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -126,7 +126,7 @@ export default function ImageOptionsTray(props) {
     } finally {
       setShowUrlField(isValidURL ? isExternalUrl(url) : true);
     }
-  }, []);
+  }, [url]);
   const messagesForSize = [];
 
   if (imageSize !== CUSTOM) {
@@ -157,19 +157,19 @@ export default function ImageOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, "Opcions d'imatge")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, "Tanca")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: "Tanca"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",

package/lib/translated/ca/modules/rce/plugins/instructure_image/Images/index.js

@@ -68,7 +68,7 @@ export default function Images(props) {
     onImageClick: props.onImageEmbed
   })), loader.isLoading && /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
-    grow: true
+    shouldGrow: true
   }, /*#__PURE__*/React.createElement(LoadingIndicator, {
     loader: loader
   })), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(Flex.Item, {

package/lib/translated/ca/modules/rce/plugins/instructure_links/components/CollectionPanel.js

@@ -50,7 +50,9 @@ export default function CollectionPanel(props) {
     onLinkClick: props.onLinkClick,
     suppressRenderEmpty: props.suppressRenderEmpty,
     contextType: props.contextType,
-    searchString: props.searchString
+    searchString: props.searchString,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   })));
 }
 CollectionPanel.propTypes = {
@@ -68,9 +70,12 @@ CollectionPanel.propTypes = {
   newPageLinkExpanded: bool,
   toggleNewPageForm: func,
   onChangeAccordion: func.isRequired,
-  selectedAccordionIndex: string
+  selectedAccordionIndex: string,
+  editing: bool,
+  onEditClick: func
 };
 CollectionPanel.defaultProps = {
   renderNewPageLink: false,
-  suppressRenderEmpty: false
+  suppressRenderEmpty: false,
+  editing: false
 };

package/lib/translated/ca/modules/rce/plugins/instructure_links/components/Link.js

@@ -1,3 +1,5 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -16,7 +18,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useState } from 'react';
-import { func, oneOf, string } from 'prop-types';
+import { bool, func, oneOf, string } from 'prop-types';
 import { linkShape } from './propTypes';
 import formatMessage from '../../../../format-message';
 import { renderLink as renderLinkHtml } from '../../../contentRendering';
@@ -27,47 +29,14 @@ import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
 import { Focusable } from '@instructure/ui-focusable';
-import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconDragHandleLine, IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconAnnouncementLine, IconPublishSolid, IconUnpublishedSolid, IconDocumentLine } from '@instructure/ui-icons';
-
-function IconBlank() {
-  return /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "IconBlank",
-    viewBox: "0 0 1920 1920"
-  }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }));
-}
-
-function getIcon(type) {
-  switch (type) {
-    case 'assignments':
-      return IconAssignmentLine;
-
-    case 'discussions':
-      return IconDiscussionLine;
-
-    case 'modules':
-      return IconModuleLine;
-
-    case 'quizzes':
-      return IconQuizLine;
-
-    case 'announcements':
-      return IconAnnouncementLine;
-
-    case 'wikiPages':
-      return IconDocumentLine;
-
-    case 'navigation':
-      return IconBlank;
-
-    default:
-      return IconDocumentLine;
-  }
-}
-
+import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@instructure/ui-icons';
+import RCEGlobals from '../../../RCEGlobals';
+import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
+  var _RCEGlobals$getFeatur;
+
+  const internalLink = { ...props.link
+  };
   const [isHovering, setIsHovering] = useState(false);
   const {
     title,
@@ -75,7 +44,18 @@ export default function Link(props) {
     date,
     date_type
   } = props.link;
-  const Icon = getIcon(props.type);
+  const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+
+  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements) {
+    var _context;
+
+    internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
+
+    const publishable = !_includesInstanceProperty(_context = ['navigation', 'announcements']).call(_context, type);
+    internalLink['data-published'] = publishable ? published : null;
+  }
+
+  const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
 
@@ -83,8 +63,11 @@ export default function Link(props) {
     if (date === 'multiple') {
       dateString = "Data de lliurament: Dates m\xFAltiples";
     } else {
+      var _RCEGlobals$getConfig;
+
       // Uses user locale and timezone
-      const when = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+      const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
 
       switch (date_type) {
         case 'todo':
@@ -115,7 +98,14 @@ export default function Link(props) {
 
   function handleLinkClick(e) {
     e.preventDefault();
-    props.onClick(props.link);
+
+    if (props.editing) {
+      props.onEditClick({ ...internalLink,
+        type
+      });
+    } else {
+      props.onClick(internalLink);
+    }
   }
 
   function handleLinkKey(e) {
@@ -126,7 +116,7 @@ export default function Link(props) {
   }
 
   function handleDragStart(e) {
-    dragHtml(e, renderLinkHtml(props.link, props.link.title));
+    dragHtml(e, renderLinkHtml(internalLink, internalLink.title));
   }
 
   function handleDragEnd(_e) {
@@ -139,7 +129,7 @@ export default function Link(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-Link",
-    draggable: true,
+    draggable: !props.editing,
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     onMouseEnter: handleHover,
@@ -152,7 +142,7 @@ export default function Link(props) {
       focused
     } = _ref;
     return /*#__PURE__*/React.createElement(View, {
-      focused: focused,
+      withFocusOutline: focused,
       focusPosition: "inset",
       position: "relative",
       as: "div",
@@ -174,23 +164,24 @@ export default function Link(props) {
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       margin: "0 xx-small 0 0",
       size: "1.125rem"
-    }, isHovering ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
+    }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
       size: "x-small",
       inline: false
     }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-      grow: true,
-      shrink: true
+      shouldGrow: true,
+      shouldShrink: true
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0"
     }, /*#__PURE__*/React.createElement(Text, {
       color: color
     }, /*#__PURE__*/React.createElement(Icon, {
       size: "x-small",
-      inline: false
+      inline: false,
+      "data-type": type
     }))), /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0",
-      grow: true,
-      shrink: true,
+      shouldGrow: true,
+      shouldShrink: true,
       textAlign: "start"
     }, /*#__PURE__*/React.createElement(View, {
       as: "div",
@@ -213,5 +204,7 @@ Link.propTypes = {
   type: oneOf(['assignments', 'discussions', 'modules', 'quizzes', 'announcements', 'wikiPages', 'navigation']).isRequired,
   onClick: func.isRequired,
   describedByID: string.isRequired,
-  elementRef: func
+  elementRef: func,
+  editing: bool,
+  onEditClick: func
 };