@atlaskit/editor-core 187.24.2 → 187.24.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 187.24.3
+
+### Patch Changes
+
+- [`72e552fe076`](https://bitbucket.org/atlassian/atlassian-frontend/commits/72e552fe076) - [ux] ED-17954: Fix inline node selections for mentions and emojis in iOS. Previously, the visually hidden assistive text would also be shown as a selection in iOS which would often make the selection look larger than the actual node itself.
+- [`048717e2a19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/048717e2a19) - fix janky media toolbar when resize
+
 ## 187.24.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js

@@ -13,5 +13,5 @@ var _templateObject;
 // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-var InlineNodeViewSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _utils.ZERO_WIDTH_SPACE);
+var InlineNodeViewSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n    // Prevent visually hidden assistive text from being selected.\n    & > .assistive {\n      user-select: none;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _reactNodeView.inlineNodeViewClassname, _utils.ZERO_WIDTH_SPACE);
 exports.InlineNodeViewSharedStyles = InlineNodeViewSharedStyles;

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerNextTestId = exports.default = exports.ResizableMediaSingleNext = void 0;
+exports.resizerNextTestId = exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -140,14 +140,14 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
       return dispatch(tr);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSizeInPluginState", function (width) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSizeInPluginState", (0, _throttle.default)(function (width) {
       var _this$props$view2 = _this.props.view,
         state = _this$props$view2.state,
         dispatch = _this$props$view2.dispatch;
       var tr = state.tr;
       tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
-    });
+    }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
       if (_this.isNestedNode() || fullWidthMode) {
         return contentWidth;
@@ -235,9 +235,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
       _this.updateGuidelines();
-      return 0;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", (0, _throttle.default)(function (size, delta) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -264,7 +263,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,
@@ -603,6 +602,5 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }]);
   return ResizableMediaSingleNext;
 }(_react.default.Component);
-exports.ResizableMediaSingleNext = ResizableMediaSingleNext;
 var _default = ResizableMediaSingleNext;
 exports.default = _default;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.24.2";
+var version = "187.24.3";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js

@@ -18,6 +18,10 @@ export const InlineNodeViewSharedStyles = css`
     & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {
       white-space: pre-wrap;
     }
+    // Prevent visually hidden assistive text from being selected.
+    & > .assistive {
+      user-select: none;
+    }
   }
   /** Remove browser deafult selections style. This prevents
     unexpected visual artefacts in Safari when navigating

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -18,7 +18,7 @@ import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
-export class ResizableMediaSingleNext extends React.Component {
+class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "lastSnappedGuidelineKeys", []);
@@ -126,7 +126,7 @@ export class ResizableMediaSingleNext extends React.Component {
       tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
       return dispatch(tr);
     });
-    _defineProperty(this, "updateSizeInPluginState", width => {
+    _defineProperty(this, "updateSizeInPluginState", throttle(width => {
       const {
         state,
         dispatch
@@ -134,7 +134,7 @@ export class ResizableMediaSingleNext extends React.Component {
       const tr = state.tr;
       tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
       if (this.isNestedNode() || fullWidthMode) {
         return contentWidth;
@@ -214,9 +214,8 @@ export class ResizableMediaSingleNext extends React.Component {
       this.updateSizeInPluginState(this.state.size.width);
       // re-calucate guidelines
       this.updateGuidelines();
-      return 0;
     });
-    _defineProperty(this, "handleResize", throttle((size, delta) => {
+    _defineProperty(this, "handleResize", (size, delta) => {
       const {
         width: originalWidth,
         height: originalHeight,
@@ -245,7 +244,7 @@ export class ResizableMediaSingleNext extends React.Component {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
+    });
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
         width: originalWidth,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.24.2";
+export const version = "187.24.3";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js

@@ -7,4 +7,4 @@ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);
+export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > *:not(span[aria-hidden='true'].zeroWidthSpaceContainer) {\n      white-space: pre-wrap;\n    }\n    // Prevent visually hidden assistive text from being selected.\n    & > .assistive {\n      user-select: none;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -29,7 +29,7 @@ import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
-export var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
+var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _inherits(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
   function ResizableMediaSingleNext(props) {
@@ -133,14 +133,14 @@ export var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
       return dispatch(tr);
     });
-    _defineProperty(_assertThisInitialized(_this), "updateSizeInPluginState", function (width) {
+    _defineProperty(_assertThisInitialized(_this), "updateSizeInPluginState", throttle(function (width) {
       var _this$props$view2 = _this.props.view,
         state = _this$props$view2.state,
         dispatch = _this$props$view2.dispatch;
       var tr = state.tr;
       tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
       if (_this.isNestedNode() || fullWidthMode) {
         return contentWidth;
@@ -228,9 +228,8 @@ export var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
       _this.updateGuidelines();
-      return 0;
     });
-    _defineProperty(_assertThisInitialized(_this), "handleResize", throttle(function (size, delta) {
+    _defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -257,7 +256,7 @@ export var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
+    });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.24.2";
+export var version = "187.24.3";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -18,7 +18,7 @@ type State = {
 };
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
-export declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
     constructor(props: ResizableMediaSingleNextProps);
     /**

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -18,7 +18,7 @@ type State = {
 };
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
-export declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
     constructor(props: ResizableMediaSingleNextProps);
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.24.2",
+  "version": "187.24.3",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"