@atlaskit/editor-core 197.2.1 → 197.2.2

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 (38) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/index.js +2 -2
  3. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +57 -66
  4. package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +1 -18
  5. package/dist/cjs/ui/ContextPanel/index.js +1 -8
  6. package/dist/cjs/utils/document.js +0 -24
  7. package/dist/cjs/version-wrapper.js +1 -1
  8. package/dist/es2019/index.js +1 -1
  9. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +58 -68
  10. package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +1 -18
  11. package/dist/es2019/ui/ContextPanel/index.js +0 -5
  12. package/dist/es2019/utils/document.js +0 -20
  13. package/dist/es2019/version-wrapper.js +1 -1
  14. package/dist/esm/index.js +1 -1
  15. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +58 -67
  16. package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +1 -18
  17. package/dist/esm/ui/ContextPanel/index.js +0 -5
  18. package/dist/esm/utils/document.js +0 -22
  19. package/dist/esm/version-wrapper.js +1 -1
  20. package/dist/types/index.d.ts +1 -1
  21. package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +0 -1
  22. package/dist/types/ui/ContextPanel/index.d.ts +0 -1
  23. package/dist/types/utils/document.d.ts +0 -5
  24. package/dist/types-ts4.5/index.d.ts +1 -1
  25. package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +0 -1
  26. package/dist/types-ts4.5/ui/ContextPanel/index.d.ts +0 -1
  27. package/dist/types-ts4.5/utils/document.d.ts +0 -5
  28. package/package.json +3 -7
  29. package/dist/cjs/ui/ContextPanel/deprecated.js +0 -283
  30. package/dist/cjs/utils/node-width.js +0 -20
  31. package/dist/es2019/ui/ContextPanel/deprecated.js +0 -258
  32. package/dist/es2019/utils/node-width.js +0 -9
  33. package/dist/esm/ui/ContextPanel/deprecated.js +0 -277
  34. package/dist/esm/utils/node-width.js +0 -9
  35. package/dist/types/ui/ContextPanel/deprecated.d.ts +0 -44
  36. package/dist/types/utils/node-width.d.ts +0 -7
  37. package/dist/types-ts4.5/ui/ContextPanel/deprecated.d.ts +0 -44
  38. package/dist/types-ts4.5/utils/node-width.d.ts +0 -7
@@ -1,283 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.content = exports.SwappableContentArea = void 0;
9
- exports.default = ContextPanel;
10
- exports.shouldPanelBePositionedOverEditor = exports.panel = void 0;
11
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
14
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
17
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
18
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
- var _react = _interopRequireWildcard(require("react"));
21
- var _react2 = require("@emotion/react");
22
- var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
23
- var _ui = require("@atlaskit/editor-common/ui");
24
- var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
25
- var _utils = require("@atlaskit/editor-prosemirror/utils");
26
- var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
27
- var _colors = require("@atlaskit/theme/colors");
28
- var _document = require("../../utils/document");
29
- var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"));
30
- var _excluded = ["actions"];
31
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
32
- 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 && Object.prototype.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; }
33
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
34
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
35
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
36
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
37
- * @jsxRuntime classic
38
- * @jsx jsx
39
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
40
- var ANIM_SPEED_MS = 500;
41
- var EDITOR_WIDTH = _editorSharedStyles.akEditorDefaultLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
42
- var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
43
- var FULLWIDTH_MODE = 'full-width';
44
- var WIDE_MODE = 'wide';
45
- var absolutePanelStyles = (0, _react2.css)({
46
- position: 'absolute',
47
- right: 0,
48
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
49
- height: "calc(100% - ".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), ")")
50
- });
51
- var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
52
- var tableNodeSchema = editorView.state.schema.nodes.table;
53
- var findResult = (0, _utils.findChildrenByType)(editorView.state.doc, tableNodeSchema);
54
- return findResult.length > 0;
55
- };
56
- var shouldPanelBePositionedOverEditor = exports.shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth, editorView) {
57
- var lineLength = editorWidth.lineLength,
58
- _editorWidth$containe = editorWidth.containerWidth,
59
- containerWidth = _editorWidth$containe === void 0 ? 0 : _editorWidth$containe,
60
- contentBreakoutModes = editorWidth.contentBreakoutModes;
61
- var editorNotFullWidth = !(lineLength && lineLength > _editorSharedStyles.akEditorDefaultLayoutWidth);
62
- var hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
63
- var hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
64
- if (!editorView) {
65
- return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
66
- } else {
67
- // when custom table width feature flag is on,
68
- // there are scenarios when a table has attr layout default, but width is in full-width or very wide
69
- // but in this case we still want the shouldPanelBePositionedOverEditor return false
70
- // previous logic is returning false when table layout default
71
- // but when custom table width feature flag is one, we want to return false whenever there is a table in the doc
72
- var isTableInDoc = checkTableExistsInDoc(editorView);
73
- return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
74
- }
75
- };
76
- var panelHidden = (0, _react2.css)({
77
- width: 0
78
- });
79
-
80
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
81
- var panel = exports.panel = (0, _react2.css)({
82
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
83
- width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
84
- height: '100%',
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
86
- transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(_editorSharedStyles.akEditorSwoopCubicBezier),
87
- overflow: 'hidden',
88
- boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
89
- });
90
-
91
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
92
- var content = exports.content = (0, _react2.css)({
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
94
- transition: "width 600ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
95
- boxSizing: 'border-box',
96
- padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-200, 16px)", " 0px"),
97
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
98
- width: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
99
- height: '100%',
100
- overflowY: 'auto'
101
- });
102
- var SwappableContentArea = exports.SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
103
- (0, _inherits2.default)(SwappableContentArea, _React$PureComponent);
104
- var _super = _createSuper(SwappableContentArea);
105
- function SwappableContentArea() {
106
- var _this;
107
- (0, _classCallCheck2.default)(this, SwappableContentArea);
108
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
109
- args[_key] = arguments[_key];
110
- }
111
- _this = _super.call.apply(_super, [this].concat(args));
112
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
113
- mounted: false,
114
- currentPluginContent: undefined
115
- });
116
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusEditor", function () {
117
- var editorView = _this.props.editorView;
118
- if (editorView && !editorView.hasFocus()) {
119
- var _editorView$focus;
120
- (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 || _editorView$focus.call(editorView);
121
- }
122
- });
123
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showPluginContent", function () {
124
- var pluginContent = _this.props.pluginContent;
125
- var currentPluginContent = _this.state.currentPluginContent;
126
- if (!currentPluginContent) {
127
- return;
128
- }
129
- return (0, _react2.jsx)(_Transition.default, {
130
- timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
131
- in: !!pluginContent,
132
- mountOnEnter: true,
133
- unmountOnExit: true,
134
- onExited: function onExited() {
135
- return _this.unsetPluginContent();
136
- }
137
- }, currentPluginContent);
138
- });
139
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showProvidedContent", function (isVisible) {
140
- var children = _this.props.children;
141
- if (!children) {
142
- return;
143
- }
144
- return (0, _react2.jsx)(_Transition.default, {
145
- timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
146
- in: isVisible,
147
- mountOnEnter: true,
148
- unmountOnExit: true,
149
- onExiting: _this.focusEditor
150
- }, children);
151
- });
152
- return _this;
153
- }
154
- (0, _createClass2.default)(SwappableContentArea, [{
155
- key: "unsetPluginContent",
156
- value: function unsetPluginContent() {
157
- this.setState({
158
- currentPluginContent: undefined
159
- });
160
- }
161
- }, {
162
- key: "componentDidMount",
163
- value: function componentDidMount() {
164
- // use this to trigger an animation
165
- this.setState({
166
- mounted: true
167
- });
168
- }
169
- }, {
170
- key: "render",
171
- value: function render() {
172
- var _this2 = this;
173
- var _this$props = this.props,
174
- editorWidth = _this$props.editorWidth,
175
- editorView = _this$props.editorView;
176
- var width = _editorSharedStyles.akEditorContextPanelWidth;
177
- var userVisible = !!this.props.visible;
178
- var visible = userVisible || !!this.state.currentPluginContent;
179
- return (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
180
- var broadcastWidth = _ref.broadcastWidth,
181
- broadcastPosition = _ref.broadcastPosition,
182
- positionedOverEditor = _ref.positionedOverEditor;
183
- var contextPanelWidth = visible ? width : 0;
184
- var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
185
- broadcastWidth(contextPanelWidth);
186
- (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
187
- return (0, _react2.jsx)("div", {
188
- css: [panel, !visible && panelHidden,
189
- /**
190
- * Only use absolute position for panel when screen size is wide enough
191
- * to accommodate breakout content and editor is not in wide mode.
192
- */
193
- newPosition && absolutePanelStyles],
194
- "data-testid": "context-panel-panel",
195
- "aria-labelledby": "context-panel-title",
196
- role: "dialog"
197
- }, (0, _react2.jsx)("div", {
198
- "data-testid": "context-panel-content",
199
- css: [content, !visible && panelHidden]
200
- }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
201
- });
202
- }
203
- }], [{
204
- key: "getDerivedStateFromProps",
205
- value: function getDerivedStateFromProps(props, state) {
206
- if (props.pluginContent !== state.currentPluginContent) {
207
- return _objectSpread(_objectSpread({}, state), {}, {
208
- currentPluginContent: props.pluginContent
209
- });
210
- }
211
- return null;
212
- }
213
- }]);
214
- return SwappableContentArea;
215
- }(_react.default.PureComponent); // TODO: ED-17837 We have this workaround because we do
216
- // not have access to the pluginInjectionApi at this location.
217
- // It might be that we need to inject the pluginInjectionApi
218
- // via context so that we can use it in this file (similar to
219
- // WithEditorActions). To be investigated further.
220
- // @ts-ignore
221
- var widthPluginKey = {
222
- key: 'widthPlugin$',
223
- getState: function getState(state) {
224
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
225
- return state['widthPlugin$'];
226
- }
227
- };
228
-
229
- // @ts-ignore
230
- var contextPanelPluginKey = {
231
- key: 'contextPanelPluginKey$',
232
- getState: function getState(state) {
233
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
234
- return state['contextPanelPluginKey$'];
235
- }
236
- };
237
- function ContextPanelWithActions(_ref2) {
238
- var actions = _ref2.actions,
239
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
240
- var eventDispatcher = actions._privateGetEventDispatcher();
241
- var editorView = actions._privateGetEditorView();
242
- var _useContext = (0, _react.useContext)(_ui.WidthContext),
243
- width = _useContext.width;
244
- if (!eventDispatcher) {
245
- return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({
246
- editorView: editorView
247
- }, props));
248
- }
249
- return (
250
- // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
251
- // This error was introduced after upgrading to TypeScript 5
252
- (0, _react2.jsx)(_withPluginState.WithPluginState, {
253
- eventDispatcher: eventDispatcher,
254
- plugins: {
255
- contextPanel: contextPanelPluginKey,
256
- widthState: widthPluginKey
257
- },
258
- render: function render(_ref3) {
259
- var contextPanel = _ref3.contextPanel,
260
- widthState = _ref3.widthState;
261
- var firstContent = contextPanel && contextPanel.contents.find(Boolean);
262
- var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
263
- containerWidth: width,
264
- contentBreakoutModes: editorView ? (0, _document.getChildBreakoutModes)(editorView.state.doc, editorView.state.schema) : []
265
- });
266
- return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, props, {
267
- editorView: editorView,
268
- pluginContent: firstContent,
269
- editorWidth: editorWidth
270
- }));
271
- }
272
- })
273
- );
274
- }
275
- function ContextPanel(props) {
276
- return (0, _react2.jsx)(_WithEditorActions.default, {
277
- render: function render(actions) {
278
- return (0, _react2.jsx)(ContextPanelWithActions, (0, _extends2.default)({
279
- actions: actions
280
- }, props));
281
- }
282
- });
283
- }
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.getBreakoutMode = void 0;
7
- Object.defineProperty(exports, "getParentNodeWidth", {
8
- enumerable: true,
9
- get: function get() {
10
- return _nodeWidth.getParentNodeWidth;
11
- }
12
- });
13
- var _nodeWidth = require("@atlaskit/editor-common/node-width");
14
- /**
15
- * Returns the breakout mode of a given node
16
- */
17
- var getBreakoutMode = exports.getBreakoutMode = function getBreakoutMode(node, breakout) {
18
- var breakoutMark = breakout && breakout.isInSet(node.marks);
19
- return breakoutMark ? breakoutMark.attrs.mode : node.attrs.layout;
20
- };
@@ -1,258 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
- /**
4
- * @jsxRuntime classic
5
- * @jsx jsx
6
- */
7
- import React, { useContext } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { css, jsx } from '@emotion/react';
11
- import Transition from 'react-transition-group/Transition';
12
- import { ContextPanelConsumer, WidthContext } from '@atlaskit/editor-common/ui';
13
- import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
14
- import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
15
- import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
16
- import { N30 } from '@atlaskit/theme/colors';
17
- import { getChildBreakoutModes } from '../../utils/document';
18
- import WithEditorActions from '../WithEditorActions';
19
- const ANIM_SPEED_MS = 500;
20
- const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
21
- const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
22
- const FULLWIDTH_MODE = 'full-width';
23
- const WIDE_MODE = 'wide';
24
- const absolutePanelStyles = css({
25
- position: 'absolute',
26
- right: 0,
27
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
28
- height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()})`
29
- });
30
- const checkTableExistsInDoc = editorView => {
31
- const tableNodeSchema = editorView.state.schema.nodes.table;
32
- let findResult = findChildrenByType(editorView.state.doc, tableNodeSchema);
33
- return findResult.length > 0;
34
- };
35
- export const shouldPanelBePositionedOverEditor = (editorWidth, panelWidth, editorView) => {
36
- const {
37
- lineLength,
38
- containerWidth = 0,
39
- contentBreakoutModes
40
- } = editorWidth;
41
- const editorNotFullWidth = !(lineLength && lineLength > akEditorDefaultLayoutWidth);
42
- const hasSpaceForPanel = !contentBreakoutModes.length && containerWidth >= panelWidth * 2 + EDITOR_WIDTH;
43
- const hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
44
- if (!editorView) {
45
- return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
46
- } else {
47
- // when custom table width feature flag is on,
48
- // there are scenarios when a table has attr layout default, but width is in full-width or very wide
49
- // but in this case we still want the shouldPanelBePositionedOverEditor return false
50
- // previous logic is returning false when table layout default
51
- // but when custom table width feature flag is one, we want to return false whenever there is a table in the doc
52
- const isTableInDoc = checkTableExistsInDoc(editorView);
53
- return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel) && !isTableInDoc;
54
- }
55
- };
56
- const panelHidden = css({
57
- width: 0
58
- });
59
-
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
61
- export const panel = css({
62
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
63
- width: `${akEditorContextPanelWidth}px`,
64
- height: '100%',
65
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
66
- transition: `width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier}`,
67
- overflow: 'hidden',
68
- boxShadow: `inset 2px 0 0 0 ${`var(--ds-border, ${N30})`}`
69
- });
70
-
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
72
- export const content = css({
73
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
74
- transition: `width 600ms ${akEditorSwoopCubicBezier}`,
75
- boxSizing: 'border-box',
76
- padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-200, 16px)"} 0px`,
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
78
- width: `${akEditorContextPanelWidth}px`,
79
- height: '100%',
80
- overflowY: 'auto'
81
- });
82
- export class SwappableContentArea extends React.PureComponent {
83
- constructor(...args) {
84
- super(...args);
85
- _defineProperty(this, "state", {
86
- mounted: false,
87
- currentPluginContent: undefined
88
- });
89
- _defineProperty(this, "focusEditor", () => {
90
- const {
91
- editorView
92
- } = this.props;
93
- if (editorView && !editorView.hasFocus()) {
94
- var _editorView$focus;
95
- (_editorView$focus = editorView.focus) === null || _editorView$focus === void 0 ? void 0 : _editorView$focus.call(editorView);
96
- }
97
- });
98
- _defineProperty(this, "showPluginContent", () => {
99
- const {
100
- pluginContent
101
- } = this.props;
102
- const {
103
- currentPluginContent
104
- } = this.state;
105
- if (!currentPluginContent) {
106
- return;
107
- }
108
- return jsx(Transition, {
109
- timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
110
- in: !!pluginContent,
111
- mountOnEnter: true,
112
- unmountOnExit: true,
113
- onExited: () => this.unsetPluginContent()
114
- }, currentPluginContent);
115
- });
116
- _defineProperty(this, "showProvidedContent", isVisible => {
117
- const {
118
- children
119
- } = this.props;
120
- if (!children) {
121
- return;
122
- }
123
- return jsx(Transition, {
124
- timeout: this.state.mounted ? ANIM_SPEED_MS : 0,
125
- in: isVisible,
126
- mountOnEnter: true,
127
- unmountOnExit: true,
128
- onExiting: this.focusEditor
129
- }, children);
130
- });
131
- }
132
- static getDerivedStateFromProps(props, state) {
133
- if (props.pluginContent !== state.currentPluginContent) {
134
- return {
135
- ...state,
136
- currentPluginContent: props.pluginContent
137
- };
138
- }
139
- return null;
140
- }
141
- unsetPluginContent() {
142
- this.setState({
143
- currentPluginContent: undefined
144
- });
145
- }
146
- componentDidMount() {
147
- // use this to trigger an animation
148
- this.setState({
149
- mounted: true
150
- });
151
- }
152
- render() {
153
- const {
154
- editorWidth,
155
- editorView
156
- } = this.props;
157
- const width = akEditorContextPanelWidth;
158
- const userVisible = !!this.props.visible;
159
- const visible = userVisible || !!this.state.currentPluginContent;
160
- return jsx(ContextPanelConsumer, null, ({
161
- broadcastWidth,
162
- broadcastPosition,
163
- positionedOverEditor
164
- }) => {
165
- const contextPanelWidth = visible ? width : 0;
166
- const newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width, editorView) : false;
167
- broadcastWidth(contextPanelWidth);
168
- (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
169
- return jsx("div", {
170
- css: [panel, !visible && panelHidden,
171
- /**
172
- * Only use absolute position for panel when screen size is wide enough
173
- * to accommodate breakout content and editor is not in wide mode.
174
- */
175
- newPosition && absolutePanelStyles],
176
- "data-testid": "context-panel-panel",
177
- "aria-labelledby": "context-panel-title",
178
- role: "dialog"
179
- }, jsx("div", {
180
- "data-testid": "context-panel-content",
181
- css: [content, !visible && panelHidden]
182
- }, this.showPluginContent() || this.showProvidedContent(userVisible)));
183
- });
184
- }
185
- }
186
-
187
- // TODO: ED-17837 We have this workaround because we do
188
- // not have access to the pluginInjectionApi at this location.
189
- // It might be that we need to inject the pluginInjectionApi
190
- // via context so that we can use it in this file (similar to
191
- // WithEditorActions). To be investigated further.
192
-
193
- // @ts-ignore
194
- const widthPluginKey = {
195
- key: 'widthPlugin$',
196
- getState: state => {
197
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
198
- return state['widthPlugin$'];
199
- }
200
- };
201
-
202
- // @ts-ignore
203
- const contextPanelPluginKey = {
204
- key: 'contextPanelPluginKey$',
205
- getState: state => {
206
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
207
- return state['contextPanelPluginKey$'];
208
- }
209
- };
210
- function ContextPanelWithActions({
211
- actions,
212
- ...props
213
- }) {
214
- const eventDispatcher = actions._privateGetEventDispatcher();
215
- const editorView = actions._privateGetEditorView();
216
- const {
217
- width
218
- } = useContext(WidthContext);
219
- if (!eventDispatcher) {
220
- return jsx(SwappableContentArea, _extends({
221
- editorView: editorView
222
- }, props));
223
- }
224
- return (
225
- // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
226
- // This error was introduced after upgrading to TypeScript 5
227
- jsx(WithPluginState, {
228
- eventDispatcher: eventDispatcher,
229
- plugins: {
230
- contextPanel: contextPanelPluginKey,
231
- widthState: widthPluginKey
232
- },
233
- render: ({
234
- contextPanel,
235
- widthState
236
- }) => {
237
- const firstContent = contextPanel && contextPanel.contents.find(Boolean);
238
- const editorWidth = {
239
- ...widthState,
240
- containerWidth: width,
241
- contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
242
- };
243
- return jsx(SwappableContentArea, _extends({}, props, {
244
- editorView: editorView,
245
- pluginContent: firstContent,
246
- editorWidth: editorWidth
247
- }));
248
- }
249
- })
250
- );
251
- }
252
- export default function ContextPanel(props) {
253
- return jsx(WithEditorActions, {
254
- render: actions => jsx(ContextPanelWithActions, _extends({
255
- actions: actions
256
- }, props))
257
- });
258
- }
@@ -1,9 +0,0 @@
1
- export { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
2
-
3
- /**
4
- * Returns the breakout mode of a given node
5
- */
6
- export const getBreakoutMode = (node, breakout) => {
7
- const breakoutMark = breakout && breakout.isInSet(node.marks);
8
- return breakoutMark ? breakoutMark.attrs.mode : node.attrs.layout;
9
- };