@contentful/field-editor-markdown 1.1.8 → 1.1.10

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

@@ -18,8 +18,8 @@ import min from 'lodash-es/min';
 import max from 'lodash-es/max';
 import times from 'lodash-es/times';
 import repeat from 'lodash-es/repeat';
-import Markdown from 'markdown-to-jsx';
 import DOMPurify from 'dompurify';
+import Markdown from 'markdown-to-jsx';
 import inRange from 'lodash-es/inRange';
 import isObject from 'lodash-es/isObject';
 import extend from 'lodash-es/extend';
@@ -27,80 +27,6 @@ import isString from 'lodash-es/isString';
 import isFinite from 'lodash-es/isFinite';
 import forEach from 'lodash-es/forEach';
 
-var styles = {
-  root: /*#__PURE__*/css({
-    display: 'flex',
-    zIndex: 10,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    overflow: 'hidden',
-    marginBottom: '-1px',
-    fontSize: tokens.fontSizeM
-  }),
-  tab: /*#__PURE__*/css({
-    cursor: 'pointer',
-    color: tokens.gray700,
-    padding: tokens.spacingXs,
-    minWidth: '70px',
-    border: "1px solid " + tokens.gray400,
-    borderTopLeftRadius: tokens.borderRadiusSmall,
-    borderTopRightRadius: tokens.borderRadiusSmall,
-    marginLeft: tokens.spacingXs,
-    textAlign: 'center',
-    backgroundColor: tokens.gray100,
-    borderBottomColor: tokens.gray100,
-    outline: 'none',
-    '&:focus': {
-      boxShadow: tokens.boxShadowHeavy
-    },
-    transition: "all " + tokens.transitionEasingDefault + " " + tokens.transitionDurationShort
-  }),
-  inactiveTab: /*#__PURE__*/css({
-    background: tokens.gray200,
-    borderBottomColor: tokens.gray400,
-    '&:hover': {
-      background: tokens.gray300
-    }
-  })
-};
-
-function MarkdownTabItem(props) {
-  var _cx;
-
-  return React.createElement("div", {
-    className: cx(styles.tab, (_cx = {}, _cx[styles.inactiveTab] = props.isActive === false, _cx)),
-    onClick: function onClick() {
-      props.onSelect(props.name);
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 13) {
-        props.onSelect(props.name);
-      }
-    },
-    tabIndex: 0,
-    role: "tab",
-    "aria-controls": props.name,
-    "aria-selected": props.isActive === true,
-    "data-test-id": props.testId
-  }, props.children);
-}
-
-function MarkdownTabs(props) {
-  return React.createElement("div", {
-    className: styles.root
-  }, React.createElement(MarkdownTabItem, {
-    name: "editor",
-    onSelect: props.onSelect,
-    isActive: props.active === 'editor',
-    testId: "markdown-tab-md"
-  }, "Editor"), React.createElement(MarkdownTabItem, {
-    name: "preview",
-    onSelect: props.onSelect,
-    isActive: props.active === 'preview',
-    testId: "markdown-tab-preview"
-  }, "Preview"));
-}
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -179,6 +105,80 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var styles = {
+  root: /*#__PURE__*/css({
+    display: 'flex',
+    zIndex: 10,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    overflow: 'hidden',
+    marginBottom: '-1px',
+    fontSize: tokens.fontSizeM
+  }),
+  tab: /*#__PURE__*/css({
+    cursor: 'pointer',
+    color: tokens.gray700,
+    padding: tokens.spacingXs,
+    minWidth: '70px',
+    border: "1px solid " + tokens.gray400,
+    borderTopLeftRadius: tokens.borderRadiusSmall,
+    borderTopRightRadius: tokens.borderRadiusSmall,
+    marginLeft: tokens.spacingXs,
+    textAlign: 'center',
+    backgroundColor: tokens.gray100,
+    borderBottomColor: tokens.gray100,
+    outline: 'none',
+    '&:focus': {
+      boxShadow: tokens.boxShadowHeavy
+    },
+    transition: "all " + tokens.transitionEasingDefault + " " + tokens.transitionDurationShort
+  }),
+  inactiveTab: /*#__PURE__*/css({
+    background: tokens.gray200,
+    borderBottomColor: tokens.gray400,
+    '&:hover': {
+      background: tokens.gray300
+    }
+  })
+};
+
+function MarkdownTabItem(props) {
+  var _cx;
+
+  return React.createElement("div", {
+    className: cx(styles.tab, (_cx = {}, _cx[styles.inactiveTab] = props.isActive === false, _cx)),
+    onClick: function onClick() {
+      props.onSelect(props.name);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === 13) {
+        props.onSelect(props.name);
+      }
+    },
+    tabIndex: 0,
+    role: "tab",
+    "aria-controls": props.name,
+    "aria-selected": props.isActive === true,
+    "data-test-id": props.testId
+  }, props.children);
+}
+
+function MarkdownTabs(props) {
+  return React.createElement("div", {
+    className: styles.root
+  }, React.createElement(MarkdownTabItem, {
+    name: "editor",
+    onSelect: props.onSelect,
+    isActive: props.active === 'editor',
+    testId: "markdown-tab-md"
+  }, "Editor"), React.createElement(MarkdownTabItem, {
+    name: "preview",
+    onSelect: props.onSelect,
+    isActive: props.active === 'preview',
+    testId: "markdown-tab-preview"
+  }, "Preview"));
+}
+
 var _excluded = ["label"],
     _excluded2 = ["label"],
     _excluded3 = ["label"],
@@ -203,7 +203,7 @@ var Zen = function Zen(_ref) {
   var label = _ref.label,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -217,7 +217,7 @@ var Strikethrough = function Strikethrough(_ref2) {
   var label = _ref2.label,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -231,7 +231,7 @@ var Indent = function Indent(_ref3) {
   var label = _ref3.label,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -245,7 +245,7 @@ var Dedent = function Dedent(_ref4) {
   var label = _ref4.label,
       rest = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -259,7 +259,7 @@ var Cubes = function Cubes(_ref5) {
   var label = _ref5.label,
       rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 18,
     height: 14,
     viewBox: "0 0 2304 1792"
@@ -273,7 +273,7 @@ var Table = function Table(_ref6) {
   var label = _ref6.label,
       rest = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -287,7 +287,7 @@ var SpecialChar = function SpecialChar(_ref7) {
   var label = _ref7.label,
       rest = _objectWithoutPropertiesLoose(_ref7, _excluded7);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -301,7 +301,7 @@ var OrgLinks = function OrgLinks(_ref8) {
   var label = _ref8.label,
       rest = _objectWithoutPropertiesLoose(_ref8, _excluded8);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -315,7 +315,7 @@ var Undo = function Undo(_ref9) {
   var label = _ref9.label,
       rest = _objectWithoutPropertiesLoose(_ref9, _excluded9);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -329,7 +329,7 @@ var Redo = function Redo(_ref10) {
   var label = _ref10.label,
       rest = _objectWithoutPropertiesLoose(_ref10, _excluded10);
 
-  return React.createElement("svg", Object.assign({
+  return React.createElement("svg", _extends({
     width: 14,
     height: 14,
     viewBox: "0 0 1792 1792"
@@ -365,7 +365,7 @@ var HeadingSelector = function HeadingSelector(props) {
 
 var InsertLinkSelector = function InsertLinkSelector(props) {
   if (props.canAddNew) {
-    return React.createElement(MultipleMediaContextMenu, Object.assign({}, props));
+    return React.createElement(MultipleMediaContextMenu, _extends({}, props));
   } else {
     return React.createElement(Button, {
       isDisabled: props.disabled,
@@ -450,7 +450,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: styles$1.tooltip,
     placement: tooltipPlace,
     content: tooltip
-  }, React.createElement(IconButton, Object.assign({}, otherProps, {
+  }, React.createElement(IconButton, _extends({}, otherProps, {
     ref: ref,
     className: cx(styles$1.button, className),
     isDisabled: isDisabled,
@@ -649,7 +649,7 @@ function DefaultMarkdownToolbar(props) {
     className: styles$1.root
   }, React.createElement(Flex, {
     justifyContent: "space-between"
-  }, React.createElement(Flex, null, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(ToolbarButton, {
+  }, React.createElement(Flex, null, React.createElement(MainButtons, _extends({}, props)), React.createElement(ToolbarButton, {
     isDisabled: props.disabled,
     testId: "markdown-action-button-toggle-additional",
     tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
@@ -676,14 +676,14 @@ function DefaultMarkdownToolbar(props) {
   })))), showAdditional && React.createElement(Flex, {
     justifyContent: "space-between",
     marginTop: "spacingXs"
-  }, React.createElement(Flex, null, React.createElement(AdditionalButtons, Object.assign({}, props)))));
+  }, React.createElement(Flex, null, React.createElement(AdditionalButtons, _extends({}, props)))));
 }
 function ZenMarkdownToolbar(props) {
   return React.createElement("div", {
     className: styles$1.root
   }, React.createElement(Flex, {
     justifyContent: "space-between"
-  }, React.createElement(Flex, null, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(AdditionalButtons, Object.assign({}, props))), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
+  }, React.createElement(Flex, null, React.createElement(MainButtons, _extends({}, props)), React.createElement(AdditionalButtons, _extends({}, props))), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
     disabled: props.disabled,
     onSelectExisting: props.actions.linkExistingMedia,
     onAddNew: props.actions.addNewMedia,
@@ -705,10 +705,10 @@ function ZenMarkdownToolbar(props) {
 }
 var MarkdownToolbar = /*#__PURE__*/React.memo(function (props) {
   if (props.mode === 'zen') {
-    return React.createElement(ZenMarkdownToolbar, Object.assign({}, props));
+    return React.createElement(ZenMarkdownToolbar, _extends({}, props));
   }
 
-  return React.createElement(DefaultMarkdownToolbar, Object.assign({}, props));
+  return React.createElement(DefaultMarkdownToolbar, _extends({}, props));
 });
 MarkdownToolbar.displayName = 'MarkdownToolbar';
 
@@ -1879,6 +1879,14 @@ var openCheatsheetModal = function openCheatsheetModal(dialogs) {
   });
 };
 
+// This code will replace '&' with '&' only inside the href attribute of the mailto link.
+// Otherwise the mailto link will not work correctly
+var replaceMailtoAmp = function replaceMailtoAmp(string) {
+  return string.replace(/href="mailto:[^"]*&/g, function (match) {
+    return match.replace(/&/g, '&');
+  });
+};
+
 var _excluded$2 = ["Embedly", "children"];
 
 var _templateObject$1;
@@ -1910,7 +1918,7 @@ function MarkdownLink(props) {
     });
   }
 
-  return React.createElement("a", Object.assign({}, rest, {
+  return React.createElement("a", _extends({}, rest, {
     target: "_blank",
     rel: "noopener noreferrer"
   }), children);
@@ -1925,7 +1933,7 @@ var MarkdownPreview = /*#__PURE__*/React.memo(function (props) {
   // https://github.com/cure53/DOMPurify/blob/main/src/tags.js#L3-L121
 
   var cleanHTML = React.useMemo(function () {
-    return DOMPurify.sanitize(props.value);
+    return replaceMailtoAmp(DOMPurify.sanitize(props.value));
   }, [props.value]);
   return React.createElement("div", {
     className: className,
@@ -2065,11 +2073,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -2080,8 +2086,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -2186,11 +2193,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -2367,13 +2372,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -2685,14 +2689,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -4459,7 +4468,7 @@ function MarkdownEditorConnected(props) {
         setValue = _ref.setValue,
         externalReset = _ref.externalReset;
     // on external change reset component completely and init with initial value again
-    return React.createElement(MarkdownEditor, Object.assign({}, props, {
+    return React.createElement(MarkdownEditor, _extends({}, props, {
       key: "markdown-editor-" + externalReset,
       initialValue: value,
       disabled: disabled,