@atlaskit/editor-common 71.0.3 → 72.0.1

package/dist/cjs/ui/Popup/utils.js

@@ -34,7 +34,7 @@ function isTextNode(elem) {
  */
 
 
-function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement) {
+function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow) {
   if (forcePlacement && alignY) {
     return alignY;
   }
@@ -56,7 +56,13 @@ function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forc
       targetHeight = _target$getBoundingCl.height;
 
   var spaceAbove = targetTop - (boundariesTop - boundariesElement.scrollTop);
-  var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight);
+  var spaceBelow = boundariesTop + boundariesHeight - (targetTop + targetHeight); // Force vertical placement to bottom if the space above doesn't accomodate the fitHeight
+
+  if (preventOverflow) {
+    if (spaceAbove <= fitHeight) {
+      return 'bottom';
+    }
+  }
 
   if (spaceBelow >= fitHeight || spaceBelow >= spaceAbove) {
     return 'bottom';
@@ -69,8 +75,9 @@ function getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forc
  */
 
 
-function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement) {
-  if (forcePlacement && alignX) {
+function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow) {
+  // force placement unless preventOverflow is enabled
+  if (forcePlacement && alignX && !preventOverflow) {
     return alignX;
   }
 
@@ -102,8 +109,8 @@ function getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, for
   return 'right';
 }
 
-function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement) {
-  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement)];
+function calculatePlacement(target, boundariesElement, fitWidth, fitHeight, alignX, alignY, forcePlacement, preventOverflow) {
+  return [getVerticalPlacement(target, boundariesElement, fitHeight, alignY, forcePlacement, preventOverflow), getHorizontalPlacement(target, boundariesElement, fitWidth, alignX, forcePlacement, preventOverflow)];
 }
 
 var calculateHorizontalPlacement = function calculateHorizontalPlacement(_ref) {

package/dist/cjs/ui/UnsupportedBlock/index.js

@@ -25,13 +25,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _unsupportedContent = require("../../messages/unsupportedContent");
+var _analytics = require("../../analytics");
 
-var _analytics = require("../../utils/analytics");
+var _unsupportedContent = require("../../messages/unsupportedContent");
 
 var _trackUnsupportedContent = require("../../utils/track-unsupported-content");
 
@@ -43,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), (0, _tokens.token)('color.background.disabled', _colors.N30), (0, _tokens.token)('color.border.disabled', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var blockNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-border-disabled, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui/UnsupportedInline/index.js

@@ -25,13 +25,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _unsupportedContent = require("../../messages/unsupportedContent");
+var _analytics = require("../../analytics");
 
-var _analytics = require("../../utils/analytics");
+var _unsupportedContent = require("../../messages/unsupportedContent");
 
 var _trackUnsupportedContent = require("../../utils/track-unsupported-content");
 
@@ -43,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), (0, _tokens.token)('color.background.disabled', _colors.N30), (0, _tokens.token)('color.border.disabled', _colors.N50), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
+var inlineNodeStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), "var(--ds-background-disabled, ".concat(_colors.N30, ")"), "var(--ds-border-disabled, ".concat(_colors.N50, ")"), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.newLightPalette = exports.newDarkPalette = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _reactIntlNext = require("react-intl-next");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
+// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
+var newLightPalette = (0, _reactIntlNext.defineMessages)({
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#97A0AF': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#00B8D9': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#36B37E': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF5630': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color'
+  },
+  '#FF991F': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color.'
+  },
+  '#6554C0': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#0747A6': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#008DA6': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#006644': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#BF2600': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#403294': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#172B4D': {
+    id: 'fabric.theme.default',
+    defaultMessage: 'Default',
+    description: 'Name of a color'
+  }
+});
+exports.newLightPalette = newLightPalette;
+var darkModeWhite = (0, _reactIntlNext.defineMessages)({
+  '#FFFFFF': {
+    id: 'fabric.theme.dark-gray',
+    defaultMessage: 'Dark gray',
+    description: 'Name of a color'
+  }
+});
+
+var newDarkPalette = _objectSpread(_objectSpread({}, newLightPalette), darkModeWhite);
+
+exports.newDarkPalette = newDarkPalette;

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -21,6 +21,10 @@ var _tokens = require("@atlaskit/tokens");
 
 var _Color = _interopRequireDefault(require("./Color"));
 
+var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
+
+var _paletteMessagesTokenModeNames = require("./Palettes/paletteMessagesTokenModeNames");
+
 var _styles = require("./styles");
 
 /** @jsx jsx */
@@ -46,7 +50,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === _colors.N0 ? (0, _tokens.token)('color.icon.inverse', _colors.N0) : (0, _tokens.token)('color.icon', _colors.N500);
+  return contrastColor === _colors.N0 ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, ".concat(_colors.N500, ")");
 }
 
 var ColorPalette = function ColorPalette(props) {
@@ -58,7 +62,10 @@ var ColorPalette = function ColorPalette(props) {
       className = props.className,
       formatMessage = props.intl.formatMessage,
       _props$textPalette = props.textPalette,
-      textPalette = _props$textPalette === void 0 ? false : _props$textPalette;
+      textPalette = _props$textPalette === void 0 ? false : _props$textPalette,
+      _props$useSomewhatSem = props.useSomewhatSemanticTextColorNames,
+      useSomewhatSemanticTextColorNames = _props$useSomewhatSem === void 0 ? false : _props$useSomewhatSem;
+  var tokenTheme = (0, _tokens.useThemeObserver)();
 
   var colorsPerRow = _react.default.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
@@ -81,6 +88,17 @@ var ColorPalette = function ColorPalette(props) {
           label = _ref.label,
           border = _ref.border,
           message = _ref.message;
+
+      if (textPalette === true && useSomewhatSemanticTextColorNames) {
+        if (tokenTheme === 'dark') {
+          message = (0, _getColorMessage.default)(_paletteMessagesTokenModeNames.newDarkPalette, value.toUpperCase());
+        }
+
+        if (tokenTheme === 'light') {
+          message = (0, _getColorMessage.default)(_paletteMessagesTokenModeNames.newLightPalette, value.toUpperCase());
+        }
+      }
+
       return (0, _react2.jsx)(_Color.default, {
         key: value,
         value: value,

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -41,8 +41,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _uiReact = require("../../ui-react");
@@ -66,7 +64,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), (0, _tokens.token)('color.border.focused', _colors.B100));
+var focusedMenuItemStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -74,20 +72,20 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), (0, _tokens.token)('color.background.selected', '#6c798f'), (0, _tokens.token)('color.text', '#fff'), focusedMenuItemStyle);
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
     } else {
       return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text', _colors.N900),
-        dark: (0, _tokens.token)('color.text', _colors.DN600)
+        light: "var(--ds-text, ".concat(_colors.N900, ")"),
+        dark: "var(--ds-text, ".concat(_colors.DN600, ")")
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+        light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+        dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-        dark: (0, _tokens.token)('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
       })(theme), (0, _components.themed)({
-        light: (0, _tokens.token)('color.text.disabled', _colors.N70),
-        dark: (0, _tokens.token)('color.text.disabled', _colors.DN80)
+        light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+        dark: "var(--ds-text-disabled, ".concat(_colors.DN80, ")")
       })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };
@@ -272,6 +270,7 @@ function DropdownMenuItem(_ref) {
   }, (0, _react2.jsx)(_menu.CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
+    testId: "dropdown-item__".concat(String(item.content)),
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -283,6 +282,7 @@ function DropdownMenuItem(_ref) {
     },
     "aria-label": item['aria-label'] || String(item.content),
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
     },

package/dist/cjs/ui-menu/ToolbarButton/index.js

@@ -61,6 +61,7 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       ariaHasPopup = props['aria-haspopup'],
       ariaExpanded = props['aria-expanded'],
       ariaPressed = props['aria-pressed'],
+      ariaKeyShortcuts = props['aria-keyshortcuts'],
       onClick = props.onClick,
       onItemClick = props.onItemClick;
   var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
@@ -106,7 +107,8 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed
+    "aria-pressed": ariaPressed,
+    "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
 
   if (!title) {

package/dist/cjs/utils/analytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SEVERITY = exports.EVENT_TYPE = exports.ACTION_SUBJECT_ID = exports.ACTION_SUBJECT = exports.ACTION = void 0;
+exports.SEVERITY = void 0;
 Object.defineProperty(exports, "UNSUPPORTED_CONTENT_LEVEL_SEVERITY", {
   enumerable: true,
   get: function get() {
@@ -71,42 +71,5 @@ exports.SEVERITY = SEVERITY;
   SEVERITY["BLOCKING"] = "blocking";
 })(SEVERITY || (exports.SEVERITY = SEVERITY = {}));
 
-var EVENT_TYPE;
-exports.EVENT_TYPE = EVENT_TYPE;
-
-(function (EVENT_TYPE) {
-  EVENT_TYPE["TRACK"] = "track";
-  EVENT_TYPE["UI"] = "ui";
-})(EVENT_TYPE || (exports.EVENT_TYPE = EVENT_TYPE = {}));
-
-var ACTION;
-exports.ACTION = ACTION;
-
-(function (ACTION) {
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
-  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
-})(ACTION || (exports.ACTION = ACTION = {}));
-
-var ACTION_SUBJECT;
-exports.ACTION_SUBJECT = ACTION_SUBJECT;
-
-(function (ACTION_SUBJECT) {
-  ACTION_SUBJECT["DOCUMENT"] = "document";
-  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
-})(ACTION_SUBJECT || (exports.ACTION_SUBJECT = ACTION_SUBJECT = {}));
-
-var ACTION_SUBJECT_ID;
-exports.ACTION_SUBJECT_ID = ACTION_SUBJECT_ID;
-
-(function (ACTION_SUBJECT_ID) {
-  ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
-  ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
-  ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
-  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
-  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
-})(ACTION_SUBJECT_ID || (exports.ACTION_SUBJECT_ID = ACTION_SUBJECT_ID = {}));
-
 var analyticsEventKey = 'EDITOR_ANALYTICS_EVENT';
 exports.analyticsEventKey = analyticsEventKey;

package/dist/cjs/utils/builder.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Builder = void 0;
+
+var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var Builder = /*#__PURE__*/function () {
+  function Builder() {
+    (0, _classCallCheck2.default)(this, Builder);
+
+    for (var _len = arguments.length, more = new Array(_len), _key = 0; _key < _len; _key++) {
+      more[_key] = arguments[_key];
+    }
+
+    this.data = [].concat(more) || [];
+  }
+
+  (0, _createClass2.default)(Builder, [{
+    key: "add",
+    value: function add(nextOrTuple) {
+      return (0, _construct2.default)(Builder, [
+      /**
+       * re-cast this to NewPlugin as we've done all the type
+       * safety, dependency checking, narrowing, during
+       * `SafePresetCheck & VerifyPluginDependencies`
+       */
+      nextOrTuple].concat((0, _toConsumableArray2.default)(this.data)));
+    }
+  }]);
+  return Builder;
+}();
+
+exports.Builder = Builder;

package/dist/cjs/utils/compareNodes.js

@@ -5,13 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createCompareNodes = void 0;
+exports.createCompareNodes = exports.ContentType = void 0;
+exports.extractMetaFromTextNode = extractMetaFromTextNode;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _types = require("../types");
 
 var ContentType;
+exports.ContentType = ContentType;
 
 (function (ContentType) {
   ContentType[ContentType["NUMBER"] = 0] = "NUMBER";
@@ -20,7 +22,7 @@ var ContentType;
   ContentType[ContentType["DATE"] = 15] = "DATE";
   ContentType[ContentType["STATUS"] = 20] = "STATUS";
   ContentType[ContentType["LINK"] = 25] = "LINK";
-})(ContentType || (ContentType = {}));
+})(ContentType || (exports.ContentType = ContentType = {}));
 
 function getLinkMark(node) {
   var _node$marks$filter = node.marks.filter(function (mark) {
@@ -30,6 +32,83 @@ function getLinkMark(node) {
       linkMark = _node$marks$filter2[0];
 
   return linkMark || null;
+} // Source: https://stackoverflow.com/questions/12004808/does-javascript-take-local-decimal-separators-into-account
+
+
+function parseLocaleNumber(stringNumber) {
+  if (stringNumber.trim() === '') {
+    return null;
+  }
+
+  var locale = window.navigator.language;
+  var thousandSeparator = Intl.NumberFormat(locale).format(11111).replace(/(?:[0-9\xB2\xB3\xB9\xBC-\xBE\u0660-\u0669\u06F0-\u06F9\u07C0-\u07C9\u0966-\u096F\u09E6-\u09EF\u09F4-\u09F9\u0A66-\u0A6F\u0AE6-\u0AEF\u0B66-\u0B6F\u0B72-\u0B77\u0BE6-\u0BF2\u0C66-\u0C6F\u0C78-\u0C7E\u0CE6-\u0CEF\u0D58-\u0D5E\u0D66-\u0D78\u0DE6-\u0DEF\u0E50-\u0E59\u0ED0-\u0ED9\u0F20-\u0F33\u1040-\u1049\u1090-\u1099\u1369-\u137C\u16EE-\u16F0\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1946-\u194F\u19D0-\u19DA\u1A80-\u1A89\u1A90-\u1A99\u1B50-\u1B59\u1BB0-\u1BB9\u1C40-\u1C49\u1C50-\u1C59\u2070\u2074-\u2079\u2080-\u2089\u2150-\u2182\u2185-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2CFD\u3007\u3021-\u3029\u3038-\u303A\u3192-\u3195\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\uA620-\uA629\uA6E6-\uA6EF\uA830-\uA835\uA8D0-\uA8D9\uA900-\uA909\uA9D0-\uA9D9\uA9F0-\uA9F9\uAA50-\uAA59\uABF0-\uABF9\uFF10-\uFF19]|\uD800[\uDD07-\uDD33\uDD40-\uDD78\uDD8A\uDD8B\uDEE1-\uDEFB\uDF20-\uDF23\uDF41\uDF4A\uDFD1-\uDFD5]|\uD801[\uDCA0-\uDCA9]|\uD802[\uDC58-\uDC5F\uDC79-\uDC7F\uDCA7-\uDCAF\uDCFB-\uDCFF\uDD16-\uDD1B\uDDBC\uDDBD\uDDC0-\uDDCF\uDDD2-\uDDFF\uDE40-\uDE48\uDE7D\uDE7E\uDE9D-\uDE9F\uDEEB-\uDEEF\uDF58-\uDF5F\uDF78-\uDF7F\uDFA9-\uDFAF]|\uD803[\uDCFA-\uDCFF\uDD30-\uDD39\uDE60-\uDE7E\uDF1D-\uDF26\uDF51-\uDF54\uDFC5-\uDFCB]|\uD804[\uDC52-\uDC6F\uDCF0-\uDCF9\uDD36-\uDD3F\uDDD0-\uDDD9\uDDE1-\uDDF4\uDEF0-\uDEF9]|\uD805[\uDC50-\uDC59\uDCD0-\uDCD9\uDE50-\uDE59\uDEC0-\uDEC9\uDF30-\uDF3B]|\uD806[\uDCE0-\uDCF2\uDD50-\uDD59]|\uD807[\uDC50-\uDC6C\uDD50-\uDD59\uDDA0-\uDDA9\uDFC0-\uDFD4]|\uD809[\uDC00-\uDC6E]|\uD81A[\uDE60-\uDE69\uDEC0-\uDEC9\uDF50-\uDF59\uDF5B-\uDF61]|\uD81B[\uDE80-\uDE96]|\uD834[\uDEE0-\uDEF3\uDF60-\uDF78]|\uD835[\uDFCE-\uDFFF]|\uD838[\uDD40-\uDD49\uDEF0-\uDEF9]|\uD83A[\uDCC7-\uDCCF\uDD50-\uDD59]|\uD83B[\uDC71-\uDCAB\uDCAD-\uDCAF\uDCB1-\uDCB4\uDD01-\uDD2D\uDD2F-\uDD3D]|\uD83C[\uDD00-\uDD0C]|\uD83E[\uDFF0-\uDFF9])/g, '');
+  var decimalSeparator = Intl.NumberFormat(locale).format(1.1).replace(/(?:[0-9\xB2\xB3\xB9\xBC-\xBE\u0660-\u0669\u06F0-\u06F9\u07C0-\u07C9\u0966-\u096F\u09E6-\u09EF\u09F4-\u09F9\u0A66-\u0A6F\u0AE6-\u0AEF\u0B66-\u0B6F\u0B72-\u0B77\u0BE6-\u0BF2\u0C66-\u0C6F\u0C78-\u0C7E\u0CE6-\u0CEF\u0D58-\u0D5E\u0D66-\u0D78\u0DE6-\u0DEF\u0E50-\u0E59\u0ED0-\u0ED9\u0F20-\u0F33\u1040-\u1049\u1090-\u1099\u1369-\u137C\u16EE-\u16F0\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1946-\u194F\u19D0-\u19DA\u1A80-\u1A89\u1A90-\u1A99\u1B50-\u1B59\u1BB0-\u1BB9\u1C40-\u1C49\u1C50-\u1C59\u2070\u2074-\u2079\u2080-\u2089\u2150-\u2182\u2185-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2CFD\u3007\u3021-\u3029\u3038-\u303A\u3192-\u3195\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\uA620-\uA629\uA6E6-\uA6EF\uA830-\uA835\uA8D0-\uA8D9\uA900-\uA909\uA9D0-\uA9D9\uA9F0-\uA9F9\uAA50-\uAA59\uABF0-\uABF9\uFF10-\uFF19]|\uD800[\uDD07-\uDD33\uDD40-\uDD78\uDD8A\uDD8B\uDEE1-\uDEFB\uDF20-\uDF23\uDF41\uDF4A\uDFD1-\uDFD5]|\uD801[\uDCA0-\uDCA9]|\uD802[\uDC58-\uDC5F\uDC79-\uDC7F\uDCA7-\uDCAF\uDCFB-\uDCFF\uDD16-\uDD1B\uDDBC\uDDBD\uDDC0-\uDDCF\uDDD2-\uDDFF\uDE40-\uDE48\uDE7D\uDE7E\uDE9D-\uDE9F\uDEEB-\uDEEF\uDF58-\uDF5F\uDF78-\uDF7F\uDFA9-\uDFAF]|\uD803[\uDCFA-\uDCFF\uDD30-\uDD39\uDE60-\uDE7E\uDF1D-\uDF26\uDF51-\uDF54\uDFC5-\uDFCB]|\uD804[\uDC52-\uDC6F\uDCF0-\uDCF9\uDD36-\uDD3F\uDDD0-\uDDD9\uDDE1-\uDDF4\uDEF0-\uDEF9]|\uD805[\uDC50-\uDC59\uDCD0-\uDCD9\uDE50-\uDE59\uDEC0-\uDEC9\uDF30-\uDF3B]|\uD806[\uDCE0-\uDCF2\uDD50-\uDD59]|\uD807[\uDC50-\uDC6C\uDD50-\uDD59\uDDA0-\uDDA9\uDFC0-\uDFD4]|\uD809[\uDC00-\uDC6E]|\uD81A[\uDE60-\uDE69\uDEC0-\uDEC9\uDF50-\uDF59\uDF5B-\uDF61]|\uD81B[\uDE80-\uDE96]|\uD834[\uDEE0-\uDEF3\uDF60-\uDF78]|\uD835[\uDFCE-\uDFFF]|\uD838[\uDD40-\uDD49\uDEF0-\uDEF9]|\uD83A[\uDCC7-\uDCCF\uDD50-\uDD59]|\uD83B[\uDC71-\uDCAB\uDCAD-\uDCAF\uDCB1-\uDCB4\uDD01-\uDD2D\uDD2F-\uDD3D]|\uD83C[\uDD00-\uDD0C]|\uD83E[\uDFF0-\uDFF9])/g, '');
+  var maybeANumber = Number(stringNumber.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
+  var isANumber = !Number.isNaN(maybeANumber);
+
+  if (!isANumber) {
+    return null;
+  }
+
+  return maybeANumber;
+}
+
+function extractFirstWordFromString(text) {
+  // Firefox is the only browser that doesn't support it
+  if (!Intl || !Intl.Segmenter) {
+    // If the Segment API is not available
+    // let's fallback to a dumb way to extract the first word.
+    // However, this method doesn't cover some languages like Japanase
+    var firstEmptySpace = text.indexOf(' ');
+    var firstWord = firstEmptySpace !== -1 ? text.substring(0, firstEmptySpace) : text;
+    return firstWord;
+  }
+
+  var languageSegment = new Intl.Segmenter(window.navigator.language, {
+    granularity: 'word'
+  });
+  var segmentsIterator = languageSegment.segment(text);
+
+  if (!segmentsIterator) {
+    return text;
+  }
+
+  var segmentsArray = Array.from(segmentsIterator);
+
+  if (segmentsArray.length === 0) {
+    return text;
+  }
+
+  return segmentsArray[0].segment;
+}
+
+function extractMetaFromTextNode(textNode) {
+  // treat as a link if contain a link
+  var linkMark = getLinkMark(textNode);
+
+  if (linkMark) {
+    var value = textNode.text || '';
+    return {
+      type: ContentType.LINK,
+      value: value
+    };
+  }
+
+  var text = textNode.text || '';
+  var firstWord = extractFirstWordFromString(text);
+  var maybeANumber = parseLocaleNumber(firstWord);
+
+  if (maybeANumber !== null) {
+    return {
+      type: ContentType.NUMBER,
+      value: maybeANumber
+    };
+  }
+
+  return {
+    type: ContentType.TEXT,
+    value: firstWord
+  };
 }
 
 function getMetaFromNode(node, options) {
@@ -78,41 +157,15 @@ function getMetaFromNode(node, options) {
 
     case 'text':
       {
-        // treat as a link if contain a link
-        var linkMark = getLinkMark(firstChild);
-
-        if (linkMark) {
-          var value = firstChild.text || '';
-          return {
-            type: ContentType.LINK,
-            value: value
-          };
-        }
-
-        var text = firstChild.text || '';
-        var firstEmptySpace = text.indexOf(' ');
-        var firstWord = firstEmptySpace !== -1 ? text.substring(0, firstEmptySpace) : text;
-        var maybeANumber = Number.parseFloat(firstWord);
-
-        if (!Number.isNaN(maybeANumber)) {
-          return {
-            type: ContentType.NUMBER,
-            value: maybeANumber
-          };
-        }
-
-        return {
-          type: ContentType.TEXT,
-          value: firstWord
-        };
+        return extractMetaFromTextNode(firstChild);
       }
 
     case 'status':
       {
-        var _text = firstChild.attrs.text;
+        var text = firstChild.attrs.text;
         return {
           type: ContentType.STATUS,
-          value: _text
+          value: text
         };
       }
 
@@ -128,11 +181,11 @@ function getMetaFromNode(node, options) {
     case 'mention':
       {
         // TODO: Check what should be the fallback when mention does not have a text
-        var _text2 = firstChild.attrs.text || '';
+        var _text = firstChild.attrs.text || '';
 
         return {
           type: ContentType.MENTION,
-          value: _text2.toLowerCase()
+          value: _text.toLowerCase()
         };
       }