@atlaskit/editor-core 187.42.0 → 187.42.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/plugins/media/nodeviews/mediaNodeView/media.js +0 -2
  3. package/dist/cjs/plugins/media/nodeviews/styles.js +4 -4
  4. package/dist/cjs/plugins/media/styles.js +1 -1
  5. package/dist/cjs/version-wrapper.js +1 -1
  6. package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js +0 -2
  7. package/dist/es2019/plugins/media/nodeviews/styles.js +5 -5
  8. package/dist/es2019/plugins/media/styles.js +6 -1
  9. package/dist/es2019/version-wrapper.js +1 -1
  10. package/dist/esm/plugins/media/nodeviews/mediaNodeView/media.js +0 -2
  11. package/dist/esm/plugins/media/nodeviews/styles.js +5 -5
  12. package/dist/esm/plugins/media/styles.js +1 -1
  13. package/dist/esm/version-wrapper.js +1 -1
  14. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 187.42.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
8
+ - [`a29f4f2d43c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a29f4f2d43c) - Fix legacy resizer handle is not highlighted on delete button hover
9
+ - Updated dependencies
10
+
11
+ ## 187.42.3
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 187.42.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/plugins/media/nodeviews/mediaNodeView/media.js CHANGED
@@ -18,7 +18,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
18
18
  var _utils = require("@atlaskit/editor-common/utils");
19
19
  var _analyticsNext = require("@atlaskit/analytics-next");
20
20
  var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
21
- var _ui = require("@atlaskit/editor-common/ui");
22
21
  var _mediaCard = require("@atlaskit/media-card");
23
22
  var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
24
23
  var _react = _interopRequireWildcard(require("react"));
@@ -222,7 +221,6 @@ var MediaNode = /*#__PURE__*/function (_Component) {
222
221
  border: !!borderMark
223
222
  })
224
223
  }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
225
- expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
226
224
  mediaClientConfig: mediaClientConfig,
227
225
  resizeMode: "stretchy-fit",
228
226
  dimensions: maxDimensions,
package/dist/cjs/plugins/media/nodeviews/styles.js CHANGED
@@ -33,9 +33,7 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
33
33
  borderColor: "var(--custom-palette-color)",
34
34
  borderWidth: "".concat(calculatedBorderWidth, "px"),
35
35
  borderStyle: 'solid',
36
- borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
37
- width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
38
- height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
36
+ borderRadius: "".concat(calculatedBorderWidth * 2, "px")
39
37
  }
40
38
  }, (0, _react2.jsx)("div", {
41
39
  css: forcedDimensions,
@@ -43,7 +41,9 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
43
41
  paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
44
42
  },
45
43
  onContextMenuCapture: onContextMenu
46
- }, (0, _react2.jsx)("div", {
44
+ }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
45
+ borderColor: "var(--custom-palette-color)"
46
+ }), (0, _react2.jsx)("div", {
47
47
  css: absoluteDiv
48
48
  }, children)));
49
49
  };
package/dist/cjs/plugins/media/styles.js CHANGED
@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
12
  var _colors = require("@atlaskit/theme/colors");
13
13
  var _mediaCard = require("@atlaskit/media-card");
14
14
  var _templateObject;
15
- var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize handlers */\n .resizer-handle-thumb {\n background: ", " !important;\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n\n .warning {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", " {\n box-shadow: 0 0 0 1px ", " !important;\n }\n\n .resizer-handle-thumb {\n background: ", " !important;\n }\n }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
15
+ var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize legacy handlers */\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n background: ", " !important;\n }\n /* Media resize new handlers */\n .resizer-handle-thumb {\n background: ", " !important;\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n\n .warning {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", " {\n box-shadow: 0 0 0 1px ", " !important;\n }\n\n .resizer-handle-thumb {\n background: ", " !important;\n }\n }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
16
16
 
17
17
  /* `left: unset` above is to work around Chrome bug where rendering a div with
18
18
  * that style applied inside a container that has a scroll, causes any svgs on
package/dist/cjs/version-wrapper.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "187.42.0";
9
+ var version = "187.42.4";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js CHANGED
@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import { withImageLoader } from '@atlaskit/editor-common/utils';
3
3
  import { AnalyticsContext } from '@atlaskit/analytics-next';
4
4
  import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
5
- import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
6
5
  import { Card, CardLoading } from '@atlaskit/media-card';
7
6
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
8
7
  import React, { Component } from 'react';
@@ -161,7 +160,6 @@ export class MediaNode extends Component {
161
160
  }
162
161
  }
163
162
  }, /*#__PURE__*/React.createElement(Card, {
164
- expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
165
163
  mediaClientConfig: mediaClientConfig,
166
164
  resizeMode: "stretchy-fit",
167
165
  dimensions: maxDimensions,
package/dist/es2019/plugins/media/nodeviews/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import React from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
- import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
4
+ import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
5
5
  export const MediaInlineNodeSelector = 'media-inline-node';
6
6
  export const MediaSingleNodeSelector = 'media-single-node';
7
7
  export const figureWrapper = css`
@@ -30,9 +30,7 @@ export const MediaCardWrapper = ({
30
30
  borderColor: `var(--custom-palette-color)`,
31
31
  borderWidth: `${calculatedBorderWidth}px`,
32
32
  borderStyle: 'solid',
33
- borderRadius: `${calculatedBorderWidth * 2}px`,
34
- width: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined,
35
- height: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined
33
+ borderRadius: `${calculatedBorderWidth * 2}px`
36
34
  }
37
35
  }, jsx("div", {
38
36
  css: forcedDimensions,
@@ -40,7 +38,9 @@ export const MediaCardWrapper = ({
40
38
  paddingBottom: `${dimensions.height / dimensions.width * 100}%`
41
39
  },
42
40
  onContextMenuCapture: onContextMenu
43
- }, jsx("div", {
41
+ }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
42
+ borderColor: `var(--custom-palette-color)`
43
+ }), jsx("div", {
44
44
  css: absoluteDiv
45
45
  }, children)));
46
46
  };
package/dist/es2019/plugins/media/styles.js CHANGED
@@ -141,7 +141,12 @@ export const mediaStyles = css`
141
141
  box-shadow: 0 0 0 1px
142
142
  ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
143
143
  }
144
- /* Media resize handlers */
144
+ /* Media resize legacy handlers */
145
+ .richMedia-resize-handle-right::after,
146
+ .richMedia-resize-handle-left::after {
147
+ background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
148
+ }
149
+ /* Media resize new handlers */
145
150
  .resizer-handle-thumb {
146
151
  background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
147
152
  }
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.42.0";
2
+ export const version = "187.42.4";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/esm/plugins/media/nodeviews/mediaNodeView/media.js CHANGED
@@ -12,7 +12,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
12
12
  import { withImageLoader } from '@atlaskit/editor-common/utils';
13
13
  import { AnalyticsContext } from '@atlaskit/analytics-next';
14
14
  import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
15
- import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
16
15
  import { Card, CardLoading } from '@atlaskit/media-card';
17
16
  import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
18
17
  import React, { Component } from 'react';
@@ -210,7 +209,6 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
210
209
  border: !!borderMark
211
210
  })
212
211
  }, /*#__PURE__*/React.createElement(Card, {
213
- expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
214
212
  mediaClientConfig: mediaClientConfig,
215
213
  resizeMode: "stretchy-fit",
216
214
  dimensions: maxDimensions,
package/dist/esm/plugins/media/nodeviews/styles.js CHANGED
@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3;
3
3
  /** @jsx jsx */
4
4
  import React from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
- import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
6
+ import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
7
7
  export var MediaInlineNodeSelector = 'media-inline-node';
8
8
  export var MediaSingleNodeSelector = 'media-single-node';
9
9
  export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n"])));
@@ -23,9 +23,7 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
23
23
  borderColor: "var(--custom-palette-color)",
24
24
  borderWidth: "".concat(calculatedBorderWidth, "px"),
25
25
  borderStyle: 'solid',
26
- borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
27
- width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
28
- height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
26
+ borderRadius: "".concat(calculatedBorderWidth * 2, "px")
29
27
  }
30
28
  }, jsx("div", {
31
29
  css: forcedDimensions,
@@ -33,7 +31,9 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
33
31
  paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
34
32
  },
35
33
  onContextMenuCapture: onContextMenu
36
- }, jsx("div", {
34
+ }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
35
+ borderColor: "var(--custom-palette-color)"
36
+ }), jsx("div", {
37
37
  css: absoluteDiv
38
38
  }, children)));
39
39
  };
package/dist/esm/plugins/media/styles.js CHANGED
@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
5
5
  import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
6
6
  import { N60, B200, Y500 } from '@atlaskit/theme/colors';
7
7
  import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
8
- export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize handlers */\n .resizer-handle-thumb {\n background: ", " !important;\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n\n .warning {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", " {\n box-shadow: 0 0 0 1px ", " !important;\n }\n\n .resizer-handle-thumb {\n background: ", " !important;\n }\n }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
8
+ export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ProseMirror {\n ", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .media-extended-resize-experience[layout^='wrap-'] {\n // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n // to prevent scroll bar\n overflow: visible !important;\n }\n\n & [layout^='wrap-'] + [layout^='wrap-'] {\n clear: none;\n & + p,\n & + div[class^='fabric-editor-align'],\n & + ul,\n & + ol,\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n clear: both !important;\n }\n & .", " {\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n .mediaSingleView-content-wrap[layout^='wrap-'] {\n max-width: 100%;\n // overwrite default Prosemirror setting making it clear: both\n clear: inherit;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-left'] {\n float: left;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right'] {\n float: right;\n }\n\n .mediaSingleView-content-wrap[layout='wrap-right']\n + .mediaSingleView-content-wrap[layout='wrap-left'] {\n clear: both;\n }\n\n /* Larger margins for resize handlers when at depth 0 of the document */\n & > .mediaSingleView-content-wrap {\n .richMedia-resize-handle-right {\n margin-right: -", "px;\n }\n .richMedia-resize-handle-left {\n margin-left: -", "px;\n }\n }\n }\n\n .richMedia-resize-handle-right,\n .richMedia-resize-handle-left {\n display: flex;\n flex-direction: column;\n\n /* vertical align */\n justify-content: center;\n }\n\n .richMedia-resize-handle-right {\n align-items: flex-end;\n padding-right: ", ";\n margin-right: -", "px;\n }\n\n .richMedia-resize-handle-left {\n align-items: flex-start;\n padding-left: ", ";\n margin-left: -", "px;\n }\n\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n content: ' ';\n display: flex;\n width: 3px;\n height: 64px;\n\n border-radius: 6px;\n }\n\n .", ":hover .richMedia-resize-handle-left::after,\n .", ":hover .richMedia-resize-handle-right::after {\n background: ", ";\n }\n\n .", " .richMedia-resize-handle-right::after,\n .", " .richMedia-resize-handle-left::after,\n .", " .richMedia-resize-handle-right:hover::after,\n .", " .richMedia-resize-handle-left:hover::after,\n .", ".is-resizing .richMedia-resize-handle-right::after,\n .", ".is-resizing .richMedia-resize-handle-left::after {\n background: ", ";\n }\n\n .__resizable_base__ {\n left: unset !important;\n width: auto !important;\n height: auto !important;\n }\n\n /* Danger when top level node for smart cards / inline links */\n .danger > div > div > .media-card-frame,\n .danger > span > a {\n background-color: ", ";\n box-shadow: 0px 0px 0px ", "px\n ", ";\n transition: background-color 0s, box-shadow 0s;\n }\n /* Danger when nested node or common */\n .danger {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* Media single video player */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n /* New file experience */\n .", " .", " {\n box-shadow: 0 0 0 1px\n ", " !important;\n }\n /* Media resize legacy handlers */\n .richMedia-resize-handle-right::after,\n .richMedia-resize-handle-left::after {\n background: ", " !important;\n }\n /* Media resize new handlers */\n .resizer-handle-thumb {\n background: ", " !important;\n }\n\n /* Smart cards */\n div div .media-card-frame,\n .inlineCardView-content-wrap > span > a {\n background-color: ", "; /* R75 with 50% opactiy */\n transition: background-color 0s;\n }\n\n div div .media-card-frame::after {\n box-shadow: none;\n }\n }\n\n .warning {\n /* Media single */\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", "::after {\n border: 1px solid ", ";\n }\n\n .", " .", " {\n box-shadow: 0 0 0 1px ", " !important;\n }\n\n .resizer-handle-thumb {\n background: ", " !important;\n }\n }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
9
9
 
10
10
  /* `left: unset` above is to work around Chrome bug where rendering a div with
11
11
  * that style applied inside a container that has a scroll, causes any svgs on
package/dist/esm/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.42.0";
2
+ export var version = "187.42.4";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.42.0",
3
+ "version": "187.42.4",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,8 +54,8 @@
54
54
  "@atlaskit/checkbox": "^12.6.0",
55
55
  "@atlaskit/code": "^14.6.0",
56
56
  "@atlaskit/date": "^0.10.0",
57
- "@atlaskit/datetime-picker": "^12.9.0",
58
- "@atlaskit/editor-common": "^74.59.0",
57
+ "@atlaskit/datetime-picker": "^12.10.0",
58
+ "@atlaskit/editor-common": "^75.0.0",
59
59
  "@atlaskit/editor-json-transformer": "^8.10.0",
60
60
  "@atlaskit/editor-markdown-transformer": "^5.2.5",
61
61
  "@atlaskit/editor-palette": "1.5.1",
@@ -79,7 +79,7 @@
79
79
  "@atlaskit/editor-plugin-list": "^1.2.0",
80
80
  "@atlaskit/editor-plugin-placeholder": "^0.1.0",
81
81
  "@atlaskit/editor-plugin-rule": "^0.1.0",
82
- "@atlaskit/editor-plugin-table": "^2.14.0",
82
+ "@atlaskit/editor-plugin-table": "^3.0.0",
83
83
  "@atlaskit/editor-plugin-text-formatting": "^0.4.0",
84
84
  "@atlaskit/editor-plugin-type-ahead": "^0.3.0",
85
85
  "@atlaskit/editor-plugin-unsupported-content": "^0.2.0",
@@ -93,12 +93,12 @@
93
93
  "@atlaskit/icon": "^21.12.0",
94
94
  "@atlaskit/locale": "^2.5.0",
95
95
  "@atlaskit/logo": "^13.14.0",
96
- "@atlaskit/media-card": "^76.2.0",
96
+ "@atlaskit/media-card": "^77.0.0",
97
97
  "@atlaskit/media-client": "^24.0.0",
98
98
  "@atlaskit/media-common": "^9.0.0",
99
99
  "@atlaskit/media-filmstrip": "^47.0.0",
100
100
  "@atlaskit/media-picker": "^66.2.0",
101
- "@atlaskit/media-ui": "^24.0.0",
101
+ "@atlaskit/media-ui": "^25.0.0",
102
102
  "@atlaskit/media-viewer": "^48.0.0",
103
103
  "@atlaskit/mention": "^22.1.0",
104
104
  "@atlaskit/menu": "^1.10.0",
@@ -152,10 +152,10 @@
152
152
  "@af/integration-testing": "*",
153
153
  "@af/visual-regression": "*",
154
154
  "@atlaskit/code": "^14.6.0",
155
- "@atlaskit/collab-provider": "9.12.2",
155
+ "@atlaskit/collab-provider": "9.12.3",
156
156
  "@atlaskit/dropdown-menu": "^11.13.0",
157
157
  "@atlaskit/editor-extension-dropbox": "^0.4.0",
158
- "@atlaskit/editor-plugin-table": "^2.14.0",
158
+ "@atlaskit/editor-plugin-table": "^3.0.0",
159
159
  "@atlaskit/flag": "^15.2.0",
160
160
  "@atlaskit/icon-object": "^6.3.0",
161
161
  "@atlaskit/inline-dialog": "^13.6.0",
@@ -181,7 +181,7 @@
181
181
  "@atlassian/editor-extension-link-create": "^0.1.0",
182
182
  "@atlassian/feature-flags-test-utils": "^0.1.1",
183
183
  "@atlassian/link-picker-plugins": "^23.0.0",
184
- "@atlassian/search-provider": "2.4.6",
184
+ "@atlassian/search-provider": "2.4.7",
185
185
  "@atlassian/ufo": "^0.2.0",
186
186
  "@emotion/jest": "^11.8.0",
187
187
  "@storybook/addon-knobs": "^5.3.18",
@@ -280,4 +280,4 @@
280
280
  "referenceOnly": "true"
281
281
  }
282
282
  }
283
- }
283
+ }