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