@atlaskit/editor-common 96.3.5 → 96.3.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 96.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#170382](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170382)
8
+ [`acd14496d28fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/acd14496d28fd) -
9
+ [ux] Update styling for bodied macro in live pages, fix block macro width, and update tests
10
+ - Updated dependencies
11
+
3
12
  ## 96.3.5
4
13
 
5
14
  ### Patch Changes
@@ -69,15 +69,17 @@ function ExtensionWithPluginState(props) {
69
69
  editorAppearance !== 'full-width';
70
70
  var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
71
71
  'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
72
- 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
73
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
72
+ 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody && !showBodiedExtensionRendererView,
73
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
74
74
  'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
75
75
  'with-danger-overlay': showMacroInteractionDesignUpdates,
76
76
  'without-frame': removeBorder
77
77
  }, _styles2.widerLayoutClassName, shouldBreakout));
78
78
  var overflowClassNames = (0, _classnames2.default)('extension-overflow-wrapper', {
79
79
  'with-body': hasBody,
80
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
80
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
81
+ // Adding extra padding for renderer view so users can have a touch target to click on the extension
82
+ 'with-padding-styles': showMacroInteractionDesignUpdates && showBodiedExtensionRendererView
81
83
  });
82
84
  var headerClassNames = (0, _classnames2.default)({
83
85
  'with-children': hasChildren,
@@ -126,6 +128,7 @@ function ExtensionWithPluginState(props) {
126
128
  showBodiedExtensionRendererView: showBodiedExtensionRendererView,
127
129
  setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
128
130
  }), (0, _react2.jsx)("div", {
131
+ "data-testid": "extension-container",
129
132
  ref: handleRef,
130
133
  "data-layout": node.attrs.layout
131
134
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -144,6 +147,7 @@ function ExtensionWithPluginState(props) {
144
147
  return handleMouseEvent(false);
145
148
  }
146
149
  }, (0, _react2.jsx)("div", {
150
+ "data-testid": "extension-overflow-wrapper",
147
151
  className: overflowClassNames,
148
152
  css: _styles2.overflowWrapperStyles
149
153
  }, (0, _react2.jsx)("div", {
@@ -164,9 +168,12 @@ function ExtensionWithPluginState(props) {
164
168
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
165
169
  (0, _react2.jsx)("div", {
166
170
  css: newContentStyles,
167
- className: newContentClassNames
171
+ className: newContentClassNames,
172
+ "data-testid": "extension-new-content"
168
173
  }, (0, _react2.jsx)("div", {
174
+ "data-testid": "extension-content"
169
175
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
176
+ ,
170
177
  css: _styles2.content,
171
178
  ref: handleContentDOMRef
172
179
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -32,8 +32,8 @@ var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault
32
32
  },
33
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
34
34
  '&.with-margin-styles': {
35
- margin: "0 ".concat("var(--ds-space-negative-150, -12px)"),
36
- padding: "0 ".concat("var(--ds-space-150, 12px)")
35
+ margin: "0 ".concat("var(--ds-space-negative-250, -20px)"),
36
+ padding: "0 ".concat("var(--ds-space-250, 20px)")
37
37
  }
38
38
  });
39
39
 
@@ -88,6 +88,10 @@ var contentWrapper = exports.contentWrapper = (0, _react.css)({
88
88
  var overflowWrapperStyles = exports.overflowWrapperStyles = (0, _react.css)({
89
89
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
90
90
  '&.with-margin-styles': {
91
- margin: "0 ".concat("var(--ds-space-negative-150, -12px)")
91
+ margin: "0 ".concat("var(--ds-space-negative-250, -20px)")
92
+ },
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
94
+ '&.with-padding-styles': {
95
+ padding: "var(--ds-space-100, 8px)"
92
96
  }
93
97
  });
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
17
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
18
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
19
19
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
20
- var packageVersion = "96.3.5";
20
+ var packageVersion = "96.3.6";
21
21
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
22
22
  // Remove URL as it has UGC
23
23
  // TODO: Sanitise the URL instead of just removing it
@@ -16,7 +16,7 @@ var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_
16
16
 
17
17
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
18
18
  var smartCardStyles = exports.smartCardStyles = function smartCardStyles() {
19
- return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
19
+ return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
20
20
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
21
21
  (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer',
22
22
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
24
  * @jsx jsx
25
25
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "96.3.5";
27
+ var packageVersion = "96.3.6";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var DropList = /*#__PURE__*/function (_Component) {
@@ -60,8 +60,8 @@ function ExtensionWithPluginState(props) {
60
60
  editorAppearance !== 'full-width';
61
61
  const classNames = classnames('extension-container', 'block', shadowClassNames, {
62
62
  'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
63
- 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
64
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
63
+ 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody && !showBodiedExtensionRendererView,
64
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
65
65
  'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
66
66
  'with-danger-overlay': showMacroInteractionDesignUpdates,
67
67
  'without-frame': removeBorder,
@@ -69,7 +69,9 @@ function ExtensionWithPluginState(props) {
69
69
  });
70
70
  const overflowClassNames = classnames('extension-overflow-wrapper', {
71
71
  'with-body': hasBody,
72
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
72
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
73
+ // Adding extra padding for renderer view so users can have a touch target to click on the extension
74
+ 'with-padding-styles': showMacroInteractionDesignUpdates && showBodiedExtensionRendererView
73
75
  });
74
76
  const headerClassNames = classnames({
75
77
  'with-children': hasChildren,
@@ -124,6 +126,7 @@ function ExtensionWithPluginState(props) {
124
126
  showBodiedExtensionRendererView: showBodiedExtensionRendererView,
125
127
  setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
126
128
  }), jsx("div", {
129
+ "data-testid": "extension-container",
127
130
  ref: handleRef,
128
131
  "data-layout": node.attrs.layout
129
132
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -138,6 +141,7 @@ function ExtensionWithPluginState(props) {
138
141
  onMouseEnter: () => handleMouseEvent(true),
139
142
  onMouseLeave: () => handleMouseEvent(false)
140
143
  }, jsx("div", {
144
+ "data-testid": "extension-overflow-wrapper",
141
145
  className: overflowClassNames,
142
146
  css: overflowWrapperStyles
143
147
  }, jsx("div", {
@@ -158,9 +162,12 @@ function ExtensionWithPluginState(props) {
158
162
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
159
163
  jsx("div", {
160
164
  css: newContentStyles,
161
- className: newContentClassNames
165
+ className: newContentClassNames,
166
+ "data-testid": "extension-new-content"
162
167
  }, jsx("div", {
168
+ "data-testid": "extension-content"
163
169
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
170
+ ,
164
171
  css: content,
165
172
  ref: handleContentDOMRef
166
173
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -25,8 +25,8 @@ export const wrapperStyle = css(wrapperDefault, {
25
25
  },
26
26
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
27
27
  '&.with-margin-styles': {
28
- margin: `0 ${"var(--ds-space-negative-150, -12px)"}`,
29
- padding: `0 ${"var(--ds-space-150, 12px)"}`
28
+ margin: `0 ${"var(--ds-space-negative-250, -20px)"}`,
29
+ padding: `0 ${"var(--ds-space-250, 20px)"}`
30
30
  }
31
31
  });
32
32
 
@@ -81,6 +81,10 @@ export const contentWrapper = css({
81
81
  export const overflowWrapperStyles = css({
82
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
83
83
  '&.with-margin-styles': {
84
- margin: `0 ${"var(--ds-space-negative-150, -12px)"}`
84
+ margin: `0 ${"var(--ds-space-negative-250, -20px)"}`
85
+ },
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
87
+ '&.with-padding-styles': {
88
+ padding: "var(--ds-space-100, 8px)"
85
89
  }
86
90
  });
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "96.3.5";
4
+ const packageVersion = "96.3.6";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // TODO: Sanitise the URL instead of just removing it
@@ -84,6 +84,7 @@ fg('linking_platform_smart_links_in_live_pages') ? 'pointer' : 'auto'};
84
84
  background-color: ${"var(--ds-background-neutral-subtle, #00000000)"};
85
85
  border-radius: ${"var(--ds-border-radius-200, 8px)"};
86
86
  border: 1px solid ${"var(--ds-border, #091E4224)"};
87
+ overflow: hidden;
87
88
  }
88
89
 
89
90
  &.${akEditorSelectedNodeClassName} {
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
13
13
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import Layer from '../Layer';
15
15
  const packageName = "@atlaskit/editor-common";
16
- const packageVersion = "96.3.5";
16
+ const packageVersion = "96.3.6";
17
17
  const halfFocusRing = 1;
18
18
  const dropOffset = '0, 8';
19
19
  class DropList extends Component {
@@ -61,15 +61,17 @@ function ExtensionWithPluginState(props) {
61
61
  editorAppearance !== 'full-width';
62
62
  var classNames = classnames('extension-container', 'block', shadowClassNames, _defineProperty({
63
63
  'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
64
- 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
65
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
64
+ 'with-bodied-border': showMacroInteractionDesignUpdates && hasBody && !showBodiedExtensionRendererView,
65
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
66
66
  'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
67
67
  'with-danger-overlay': showMacroInteractionDesignUpdates,
68
68
  'without-frame': removeBorder
69
69
  }, widerLayoutClassName, shouldBreakout));
70
70
  var overflowClassNames = classnames('extension-overflow-wrapper', {
71
71
  'with-body': hasBody,
72
- 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
72
+ 'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
73
+ // Adding extra padding for renderer view so users can have a touch target to click on the extension
74
+ 'with-padding-styles': showMacroInteractionDesignUpdates && showBodiedExtensionRendererView
73
75
  });
74
76
  var headerClassNames = classnames({
75
77
  'with-children': hasChildren,
@@ -118,6 +120,7 @@ function ExtensionWithPluginState(props) {
118
120
  showBodiedExtensionRendererView: showBodiedExtensionRendererView,
119
121
  setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
120
122
  }), jsx("div", {
123
+ "data-testid": "extension-container",
121
124
  ref: handleRef,
122
125
  "data-layout": node.attrs.layout
123
126
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -136,6 +139,7 @@ function ExtensionWithPluginState(props) {
136
139
  return handleMouseEvent(false);
137
140
  }
138
141
  }, jsx("div", {
142
+ "data-testid": "extension-overflow-wrapper",
139
143
  className: overflowClassNames,
140
144
  css: overflowWrapperStyles
141
145
  }, jsx("div", {
@@ -156,9 +160,12 @@ function ExtensionWithPluginState(props) {
156
160
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
157
161
  jsx("div", {
158
162
  css: newContentStyles,
159
- className: newContentClassNames
163
+ className: newContentClassNames,
164
+ "data-testid": "extension-new-content"
160
165
  }, jsx("div", {
166
+ "data-testid": "extension-content"
161
167
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
168
+ ,
162
169
  css: content,
163
170
  ref: handleContentDOMRef
164
171
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -25,8 +25,8 @@ export var wrapperStyle = css(wrapperDefault, {
25
25
  },
26
26
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
27
27
  '&.with-margin-styles': {
28
- margin: "0 ".concat("var(--ds-space-negative-150, -12px)"),
29
- padding: "0 ".concat("var(--ds-space-150, 12px)")
28
+ margin: "0 ".concat("var(--ds-space-negative-250, -20px)"),
29
+ padding: "0 ".concat("var(--ds-space-250, 20px)")
30
30
  }
31
31
  });
32
32
 
@@ -81,6 +81,10 @@ export var contentWrapper = css({
81
81
  export var overflowWrapperStyles = css({
82
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
83
83
  '&.with-margin-styles': {
84
- margin: "0 ".concat("var(--ds-space-negative-150, -12px)")
84
+ margin: "0 ".concat("var(--ds-space-negative-250, -20px)")
85
+ },
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
87
+ '&.with-padding-styles': {
88
+ padding: "var(--ds-space-100, 8px)"
85
89
  }
86
90
  });
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "96.3.5";
10
+ var packageVersion = "96.3.6";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // TODO: Sanitise the URL instead of just removing it
@@ -10,7 +10,7 @@ export var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
12
12
  export var smartCardStyles = function smartCardStyles() {
13
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, fg('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER,
13
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, fg('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER,
14
14
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
15
15
  fg('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer',
16
16
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
21
21
  import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
22
22
  import Layer from '../Layer';
23
23
  var packageName = "@atlaskit/editor-common";
24
- var packageVersion = "96.3.5";
24
+ var packageVersion = "96.3.6";
25
25
  var halfFocusRing = 1;
26
26
  var dropOffset = '0, 8';
27
27
  var DropList = /*#__PURE__*/function (_Component) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "96.3.5",
3
+ "version": "96.3.6",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -130,7 +130,7 @@
130
130
  "@atlaskit/emoji": "^67.11.0",
131
131
  "@atlaskit/icon": "^23.1.0",
132
132
  "@atlaskit/icon-object": "^6.9.0",
133
- "@atlaskit/link-datasource": "^3.14.0",
133
+ "@atlaskit/link-datasource": "^3.15.0",
134
134
  "@atlaskit/link-picker": "^1.47.0",
135
135
  "@atlaskit/media-card": "^78.15.0",
136
136
  "@atlaskit/media-client": "^28.5.0",
@@ -153,7 +153,7 @@
153
153
  "@atlaskit/spinner": "^16.3.0",
154
154
  "@atlaskit/task-decision": "^17.11.0",
155
155
  "@atlaskit/textfield": "^6.7.0",
156
- "@atlaskit/tmp-editor-statsig": "^2.24.0",
156
+ "@atlaskit/tmp-editor-statsig": "^2.25.0",
157
157
  "@atlaskit/tokens": "^2.4.0",
158
158
  "@atlaskit/tooltip": "^18.9.0",
159
159
  "@atlaskit/width-detector": "^4.3.0",