@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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +57 -66
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +1 -18
- package/dist/cjs/ui/ContextPanel/index.js +1 -8
- package/dist/cjs/utils/document.js +0 -24
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +58 -68
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +1 -18
- package/dist/es2019/ui/ContextPanel/index.js +0 -5
- package/dist/es2019/utils/document.js +0 -20
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +58 -67
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +1 -18
- package/dist/esm/ui/ContextPanel/index.js +0 -5
- package/dist/esm/utils/document.js +0 -22
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +0 -1
- package/dist/types/ui/ContextPanel/index.d.ts +0 -1
- package/dist/types/utils/document.d.ts +0 -5
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +0 -1
- package/dist/types-ts4.5/ui/ContextPanel/index.d.ts +0 -1
- package/dist/types-ts4.5/utils/document.d.ts +0 -5
- package/package.json +3 -7
- package/dist/cjs/ui/ContextPanel/deprecated.js +0 -283
- package/dist/cjs/utils/node-width.js +0 -20
- package/dist/es2019/ui/ContextPanel/deprecated.js +0 -258
- package/dist/es2019/utils/node-width.js +0 -9
- package/dist/esm/ui/ContextPanel/deprecated.js +0 -277
- package/dist/esm/utils/node-width.js +0 -9
- package/dist/types/ui/ContextPanel/deprecated.d.ts +0 -44
- package/dist/types/utils/node-width.d.ts +0 -7
- package/dist/types-ts4.5/ui/ContextPanel/deprecated.d.ts +0 -44
- 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
|
-
};
|