@atlaskit/editor-core 203.5.0 → 203.6.1

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,25 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 203.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#179495](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179495)
8
+ [`5df4aaaa16713`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5df4aaaa16713) -
9
+ [ux] Fixed resizing issue when layout is stacked on a narrow screen and resizer item gets
10
+ min-width bigger than max-width.
11
+ - [#179438](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179438)
12
+ [`942f24408add6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/942f24408add6) -
13
+ Remove FG
14
+
15
+ ## 203.6.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [#179329](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/179329)
20
+ [`d3944ea7be4f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3944ea7be4f6) -
21
+ [ux] Allowing custom width for editor context panel
22
+
3
23
  ## 203.5.0
4
24
 
5
25
  ### Minor Changes
@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _react = require("@emotion/react");
10
10
  var _styles = require("@atlaskit/editor-common/styles");
11
11
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
13
  var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
14
  var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
@@ -28,11 +27,11 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
28
27
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
29
28
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
30
29
  var expandStyles = exports.expandStyles = function expandStyles() {
31
- return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
30
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
32
31
  expanded: false,
33
32
  focused: false
34
33
  })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]) + "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";") : (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, (0, _experiments.editorExperiment)('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror\n\t\t> .".concat(_styles.expandClassNames.type('expand'), ",\n\t\t.").concat(_styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, "\n\t\t> .").concat(_styles.expandClassNames.type('expand'), " {\n\t\tmargin-left: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t\tmargin-right: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t}"), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
35
34
  expanded: false,
36
35
  focused: false
37
- })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
36
+ })(), _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
38
37
  };
@@ -124,23 +124,33 @@ var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function
124
124
  }, {
125
125
  key: "render",
126
126
  value: function render() {
127
- var _this2 = this;
128
- var width = _editorSharedStyles.akEditorContextPanelWidth;
127
+ var _this$props$customWid,
128
+ _this2 = this;
129
+ var width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : _editorSharedStyles.akEditorContextPanelWidth;
129
130
  var userVisible = !!this.props.visible;
130
131
  var visible = userVisible || !!this.state.currentPluginContent;
131
132
  var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
133
+ var customPanelWidthStyles = (0, _react2.css)({
134
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
135
+ width: "".concat(this.props.customWidth, "px"),
136
+ overflowX: 'hidden'
137
+ });
132
138
  return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
133
139
  var broadcastWidth = _ref.broadcastWidth;
134
140
  var contextPanelWidth = visible ? width : 0;
135
141
  broadcastWidth(contextPanelWidth);
136
142
  return (0, _react2.jsx)("div", {
137
- css: [panel, !visible && panelHidden],
143
+ css: [panel,
144
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
145
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
138
146
  "data-testid": "context-panel-panel",
139
147
  "aria-labelledby": "context-panel-title",
140
148
  role: "dialog"
141
149
  }, (0, _react2.jsx)("div", {
142
150
  "data-testid": "context-panel-content",
143
- css: [content, hasPadding && paddingStyles, !visible && panelHidden]
151
+ css: [content, hasPadding && paddingStyles,
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
153
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
144
154
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
145
155
  });
146
156
  }
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "203.5.0";
8
+ var version = exports.version = "203.6.1";
@@ -2,7 +2,6 @@
2
2
  import { css } from '@emotion/react';
3
3
  import { BreakoutCssClassName, expandClassNames, sharedExpandStyles } from '@atlaskit/editor-common/styles';
4
4
  import { akEditorSelectedBorder, akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
5
- import { fg } from '@atlaskit/platform-feature-flags';
6
5
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
6
  const EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
8
7
  const EXPAND_ICON_COLOR = () => css({
@@ -80,7 +79,6 @@ export const expandStyles = () => css`
80
79
  })()}
81
80
  cursor: text;
82
81
  padding-top: 0px;
83
- ${fg('platform_editor_drag_and_drop_expand_style_fix') && `overflow-x: clip;`}
84
82
  }
85
83
 
86
84
  .${expandClassNames.titleInput} {
@@ -112,23 +112,33 @@ export class SwappableContentArea extends React.PureComponent {
112
112
  });
113
113
  }
114
114
  render() {
115
- const width = akEditorContextPanelWidth;
115
+ var _this$props$customWid;
116
+ const width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : akEditorContextPanelWidth;
116
117
  const userVisible = !!this.props.visible;
117
118
  const visible = userVisible || !!this.state.currentPluginContent;
118
119
  const hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
120
+ const customPanelWidthStyles = css({
121
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
122
+ width: `${this.props.customWidth}px`,
123
+ overflowX: 'hidden'
124
+ });
119
125
  return jsx(ContextPanelConsumer, null, ({
120
126
  broadcastWidth
121
127
  }) => {
122
128
  const contextPanelWidth = visible ? width : 0;
123
129
  broadcastWidth(contextPanelWidth);
124
130
  return jsx("div", {
125
- css: [panel, !visible && panelHidden],
131
+ css: [panel,
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
133
+ this.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
126
134
  "data-testid": "context-panel-panel",
127
135
  "aria-labelledby": "context-panel-title",
128
136
  role: "dialog"
129
137
  }, jsx("div", {
130
138
  "data-testid": "context-panel-content",
131
- css: [content, hasPadding && paddingStyles, !visible && panelHidden]
139
+ css: [content, hasPadding && paddingStyles,
140
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
141
+ this.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
132
142
  }, this.showPluginContent() || this.showProvidedContent(userVisible)));
133
143
  });
134
144
  }
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "203.5.0";
2
+ export const version = "203.6.1";
@@ -4,7 +4,6 @@ var _templateObject, _templateObject2;
4
4
  import { css } from '@emotion/react';
5
5
  import { BreakoutCssClassName, expandClassNames, sharedExpandStyles } from '@atlaskit/editor-common/styles';
6
6
  import { akEditorSelectedBorder, akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
8
  var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
10
9
  var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
@@ -22,11 +21,11 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
22
21
  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
23
22
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
24
23
  export var expandStyles = function expandStyles() {
25
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
24
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
26
25
  expanded: false,
27
26
  focused: false
28
27
  })(), expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, editorExperiment('nested-dnd', true) ? getSelectionStyles([SelectionStyle.Blanket]) + "border: ".concat(akEditorSelectedBorder, ";") : getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, expandClassNames.type('expand'), BreakoutCssClassName.BREAKOUT_MARK_DOM, expandClassNames.type('expand'), akLayoutGutterOffset, akLayoutGutterOffset, editorExperiment('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror\n\t\t> .".concat(expandClassNames.type('expand'), ",\n\t\t.").concat(BreakoutCssClassName.BREAKOUT_MARK_DOM, "\n\t\t> .").concat(expandClassNames.type('expand'), " {\n\t\tmargin-left: -").concat(akLayoutGutterOffset + 8, "px;\n\t\tmargin-right: -").concat(akLayoutGutterOffset + 8, "px;\n\t}"), expandClassNames.content, sharedExpandStyles.contentStyles({
29
28
  expanded: false,
30
29
  focused: false
31
- })(), fg('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", expandClassNames.titleInput, sharedExpandStyles.titleInputStyles(), expandClassNames.titleContainer, sharedExpandStyles.titleContainerStyles(), expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), expandClassNames.inputContainer, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
30
+ })(), expandClassNames.titleInput, sharedExpandStyles.titleInputStyles(), expandClassNames.titleContainer, sharedExpandStyles.titleContainerStyles(), expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), expandClassNames.inputContainer, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
32
31
  };
@@ -119,23 +119,33 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
119
119
  }, {
120
120
  key: "render",
121
121
  value: function render() {
122
- var _this2 = this;
123
- var width = akEditorContextPanelWidth;
122
+ var _this$props$customWid,
123
+ _this2 = this;
124
+ var width = (_this$props$customWid = this.props.customWidth) !== null && _this$props$customWid !== void 0 ? _this$props$customWid : akEditorContextPanelWidth;
124
125
  var userVisible = !!this.props.visible;
125
126
  var visible = userVisible || !!this.state.currentPluginContent;
126
127
  var hasPadding = this.props.hasPadding === undefined ? true : this.props.hasPadding;
128
+ var customPanelWidthStyles = css({
129
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @repo/internal/react/no-class-components
130
+ width: "".concat(this.props.customWidth, "px"),
131
+ overflowX: 'hidden'
132
+ });
127
133
  return jsx(ContextPanelConsumer, null, function (_ref) {
128
134
  var broadcastWidth = _ref.broadcastWidth;
129
135
  var contextPanelWidth = visible ? width : 0;
130
136
  broadcastWidth(contextPanelWidth);
131
137
  return jsx("div", {
132
- css: [panel, !visible && panelHidden],
138
+ css: [panel,
139
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
140
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden],
133
141
  "data-testid": "context-panel-panel",
134
142
  "aria-labelledby": "context-panel-title",
135
143
  role: "dialog"
136
144
  }, jsx("div", {
137
145
  "data-testid": "context-panel-content",
138
- css: [content, hasPadding && paddingStyles, !visible && panelHidden]
146
+ css: [content, hasPadding && paddingStyles,
147
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage
148
+ _this2.props.customWidth && customPanelWidthStyles, !visible && panelHidden]
139
149
  }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
140
150
  });
141
151
  }
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "203.5.0";
2
+ export var version = "203.6.1";
@@ -12,6 +12,7 @@ export type Props = {
12
12
  editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>]> | undefined;
13
13
  children?: React.ReactElement;
14
14
  hasPadding?: boolean;
15
+ customWidth?: number;
15
16
  };
16
17
  export declare const panel: import("@emotion/react").SerializedStyles;
17
18
  export declare const content: import("@emotion/react").SerializedStyles;
@@ -14,6 +14,7 @@ export type Props = {
14
14
  ]> | undefined;
15
15
  children?: React.ReactElement;
16
16
  hasPadding?: boolean;
17
+ customWidth?: number;
17
18
  };
18
19
  export declare const panel: import("@emotion/react").SerializedStyles;
19
20
  export declare const content: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "203.5.0",
3
+ "version": "203.6.1",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -55,8 +55,8 @@
55
55
  "@atlaskit/mention": "^23.4.0",
56
56
  "@atlaskit/platform-feature-flags": "^0.3.0",
57
57
  "@atlaskit/task-decision": "^17.11.0",
58
- "@atlaskit/tmp-editor-statsig": "^2.26.0",
59
- "@atlaskit/tokens": "^2.4.0",
58
+ "@atlaskit/tmp-editor-statsig": "^2.27.0",
59
+ "@atlaskit/tokens": "^2.5.0",
60
60
  "@atlaskit/tooltip": "^19.0.0",
61
61
  "@atlaskit/width-detector": "^4.3.0",
62
62
  "@babel/runtime": "^7.0.0",
@@ -103,7 +103,7 @@
103
103
  "@atlaskit/visual-regression": "*",
104
104
  "@atlassian/adf-schema-json": "^1.22.0",
105
105
  "@atlassian/feature-flags-test-utils": "*",
106
- "@atlassian/search-provider": "3.0.9",
106
+ "@atlassian/search-provider": "3.0.10",
107
107
  "@emotion/jest": "^11.8.0",
108
108
  "@storybook/addon-knobs": "^6.4.0",
109
109
  "@testing-library/react": "^12.1.5",
@@ -199,9 +199,6 @@
199
199
  "type": "boolean",
200
200
  "referenceOnly": true
201
201
  },
202
- "platform_editor_drag_and_drop_expand_style_fix": {
203
- "type": "boolean"
204
- },
205
202
  "platform_editor_media_batch_updates": {
206
203
  "type": "boolean",
207
204
  "referenceOnly": true
@@ -357,6 +354,10 @@
357
354
  "type": "boolean",
358
355
  "referenceOnly": true
359
356
  },
357
+ "platform_editor_advanced_layouts_post_fix_patch_2": {
358
+ "type": "boolean",
359
+ "referenceOnly": true
360
+ },
360
361
  "platform_editor_plugin_selection_marker_bugfix": {
361
362
  "type": "boolean",
362
363
  "referenceOnly": true