@contentful/field-editor-markdown 1.0.1 → 1.0.5

package/dist/field-editor-markdown.esm.js

@@ -7,7 +7,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { css, cx } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 import { ConstraintsUtils, CharCounter, CharValidation, FieldConnector, ModalDialogLauncher } from '@contentful/field-editor-shared';
-import { Menu, Button, Tooltip, Flex, Paragraph, TextLink, ModalContent, Heading, Form, FormControl, TextInput, ModalControls, Text, Radio, Checkbox, EntityList } from '@contentful/f36-components';
+import { Menu, Button, Tooltip, IconButton, Flex, Paragraph, TextLink, ModalContent, Heading, Form, FormControl, TextInput, ModalControls, Text, Radio, Checkbox, EntityList } from '@contentful/f36-components';
 import { AssetIcon, ChevronDownIcon, MoreHorizontalIcon, HeadingIcon, FormatBoldIcon, FormatItalicIcon, QuoteIcon, ListBulletedIcon, ListNumberedIcon, LinkIcon, CodeIcon, HorizontalRuleIcon, ChevronRightIcon, ChevronLeftIcon } from '@contentful/f36-icons';
 import transform from 'lodash-es/transform';
 import throttle from 'lodash-es/throttle';
@@ -446,24 +446,20 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  var button = React.createElement(Button, Object.assign({}, otherProps, {
+  return React.createElement(Tooltip, {
+    className: styles$1.tooltip,
+    placement: tooltipPlace,
+    content: tooltip
+  }, React.createElement(IconButton, Object.assign({}, otherProps, {
     ref: ref,
     className: cx(styles$1.button, className),
     isDisabled: isDisabled,
     onClick: onClick,
     variant: variant,
-    size: "small"
-  }), children);
-
-  if (tooltip) {
-    return React.createElement(Tooltip, {
-      className: styles$1.tooltip,
-      placement: tooltipPlace,
-      content: tooltip
-    }, button);
-  }
-
-  return button;
+    size: "small",
+    icon: children,
+    "aria-label": tooltip
+  })));
 });
 ToolbarButton.displayName = 'ToolbarButton';
 
@@ -672,7 +668,8 @@ function DefaultMarkdownToolbar(props) {
     testId: "markdown-action-button-zen",
     variant: "secondary",
     onClick: props.actions.openZenMode,
-    className: styles$1.zenButton
+    className: styles$1.zenButton,
+    tooltip: "Expand"
   }, React.createElement(Zen, {
     label: "Expand",
     className: styles$1.icon
@@ -691,18 +688,20 @@ function ZenMarkdownToolbar(props) {
     onSelectExisting: props.actions.linkExistingMedia,
     onAddNew: props.actions.addNewMedia,
     canAddNew: props.canUploadAssets
-  }), React.createElement(Button, {
+  }), React.createElement(IconButton, {
     testId: "markdown-action-button-zen-close",
     variant: "secondary",
     size: "small",
     className: cx(styles$1.zenButton, styles$1.zenButtonPressed),
     onClick: function onClick() {
       props.actions.closeZenMode();
-    }
-  }, React.createElement(Zen, {
-    label: "Collapse",
-    className: styles$1.icon
-  })))));
+    },
+    icon: React.createElement(Zen, {
+      label: "Collapse",
+      className: styles$1.icon
+    }),
+    "aria-label": "Collapse"
+  }))));
 }
 var MarkdownToolbar = /*#__PURE__*/React.memo(function (props) {
   if (props.mode === 'zen') {
@@ -3586,6 +3585,18 @@ function fileNameToTitle(str) {
   return normalizeWhiteSpace(removeExtension(str).replace(/_/g, ' '));
 }
 
+function replaceAssetDomain(fileUrl) {
+  var assetDomainMap = {
+    images: 'images.ctfassets.net',
+    assets: 'assets.ctfassets.net',
+    downloads: 'downloads.ctfassets.net',
+    videos: 'videos.ctfassets.net'
+  };
+  return fileUrl.replace(/(images|assets|downloads|videos).contentful.com/, function (_, p1) {
+    return assetDomainMap[p1];
+  });
+}
+
 function makeAssetLink(asset, _ref) {
   var localeCode = _ref.localeCode,
       fallbackCode = _ref.fallbackCode,
@@ -3597,10 +3608,11 @@ function makeAssetLink(asset, _ref) {
 
   if (isObject(file) && file.url) {
     var title = get(asset, ['fields', 'title', localeCode]) || get(asset, ['fields', 'title', fallbackCode || '']) || get(asset, ['fields', 'title', defaultLocaleCode]) || fileNameToTitle(file.fileName);
+    var fileUrl = replaceAssetDomain(file.url);
     return {
       title: title,
       asset: asset,
-      url: file.url,
+      url: fileUrl,
       // is normally localized and we should not warn about this file
       isLocalized: Boolean(localizedFile),
       // was fallback value used
@@ -3608,7 +3620,7 @@ function makeAssetLink(asset, _ref) {
       // it means we used a default locale - we filter empty values
       isFallback: Boolean(fallbackFile),
       // todo: tranform using fromHostname
-      asMarkdown: "![" + title + "](" + file.url + ")"
+      asMarkdown: "![" + title + "](" + fileUrl + ")"
     };
   } else {
     return null;