@atlaskit/editor-core 210.2.4 → 210.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/ui/Appearance/Chromeless.js +11 -30
- package/dist/cjs/ui/Appearance/Comment/Comment.js +10 -30
- package/dist/cjs/ui/Appearance/FullPage/FullPage.js +12 -37
- package/dist/cjs/ui/ContentStyles/layout.js +1 -1
- package/dist/cjs/ui/ContextPanel/index.js +3 -10
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +1 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/Chromeless.js +13 -35
- package/dist/es2019/ui/Appearance/Comment/Comment.js +13 -34
- package/dist/es2019/ui/Appearance/FullPage/FullPage.js +12 -39
- package/dist/es2019/ui/ContentStyles/layout.js +1 -2
- package/dist/es2019/ui/ContextPanel/index.js +4 -12
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +1 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/Chromeless.js +12 -31
- package/dist/esm/ui/Appearance/Comment/Comment.js +11 -31
- package/dist/esm/ui/Appearance/FullPage/FullPage.js +13 -38
- package/dist/esm/ui/ContentStyles/layout.js +1 -1
- package/dist/esm/ui/ContextPanel/index.js +4 -11
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +1 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/utils/action.d.ts +1 -1
- package/dist/types-ts4.5/utils/action.d.ts +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 210.2.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`71e4c857f1463`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71e4c857f1463) -
|
|
8
|
+
ED-29096: clean up sharedPluginStateHookMigratorFactory in editor-core
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 210.2.5
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`bfec478c9e91b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfec478c9e91b) -
|
|
16
|
+
Splits platform_editor_preview_panel_linking_exp into one for Jira and one for Confluence and
|
|
17
|
+
switches to editorExperiment util.
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 210.2.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -111,16 +111,6 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
|
|
|
111
111
|
exposure: true
|
|
112
112
|
});
|
|
113
113
|
}, _EditorContentContainer.default, ContentArea);
|
|
114
|
-
var useEditorViewModePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
|
|
115
|
-
return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorViewMode'], function (states) {
|
|
116
|
-
var _states$editorViewMod;
|
|
117
|
-
return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
118
|
-
});
|
|
119
|
-
}, function (pluginInjectionApi) {
|
|
120
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
|
|
121
|
-
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
122
|
-
return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
123
|
-
});
|
|
124
114
|
|
|
125
115
|
/**
|
|
126
116
|
* Render the editor in a chromeless appearance.
|
|
@@ -159,7 +149,10 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
|
|
|
159
149
|
pluginHooks = _this$props.pluginHooks,
|
|
160
150
|
featureFlags = _this$props.featureFlags;
|
|
161
151
|
var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
|
|
162
|
-
var editorViewMode =
|
|
152
|
+
var editorViewMode = (0, _hooks.useSharedPluginStateWithSelector)(_this.props.editorAPI, ['editorViewMode'], function (states) {
|
|
153
|
+
var _states$editorViewMod;
|
|
154
|
+
return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
155
|
+
});
|
|
163
156
|
return (0, _react2.jsx)(_WithFlash.default, {
|
|
164
157
|
animate: maxContentSizeReached
|
|
165
158
|
}, (0, _react2.jsx)(ChromelessEditorContainer, {
|
|
@@ -206,30 +199,18 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
|
|
|
206
199
|
}]);
|
|
207
200
|
}(_react.default.Component);
|
|
208
201
|
(0, _defineProperty2.default)(Editor, "displayName", 'ChromelessEditorAppearance');
|
|
209
|
-
|
|
210
|
-
var
|
|
202
|
+
function RenderWithPluginState(_ref2) {
|
|
203
|
+
var renderChrome = _ref2.renderChrome,
|
|
204
|
+
editorAPI = _ref2.editorAPI;
|
|
205
|
+
var maxContentSizeReached = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['maxContentSize'], function (states) {
|
|
211
206
|
var _states$maxContentSiz;
|
|
212
207
|
return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
|
|
213
208
|
});
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
maxContentSizeReached: maxContentSizeReached
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
|
-
}, function (pluginInjectionApi) {
|
|
220
|
-
var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize']),
|
|
221
|
-
maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
|
|
222
|
-
return {
|
|
223
|
-
maxContentSizeState: maxContentSizeState
|
|
209
|
+
var maxContentSize = maxContentSizeReached === undefined ? undefined : {
|
|
210
|
+
maxContentSizeReached: maxContentSizeReached
|
|
224
211
|
};
|
|
225
|
-
});
|
|
226
|
-
function RenderWithPluginState(_ref2) {
|
|
227
|
-
var renderChrome = _ref2.renderChrome,
|
|
228
|
-
editorAPI = _ref2.editorAPI;
|
|
229
|
-
var _useMaxContentSizePlu = useMaxContentSizePluginState(editorAPI),
|
|
230
|
-
maxContentSizeState = _useMaxContentSizePlu.maxContentSizeState;
|
|
231
212
|
return (0, _react2.jsx)(_react.Fragment, null, renderChrome({
|
|
232
|
-
maxContentSize:
|
|
213
|
+
maxContentSize: maxContentSize
|
|
233
214
|
}));
|
|
234
215
|
}
|
|
235
216
|
function ChromelessEditorContainerNext(_ref3) {
|
|
@@ -118,39 +118,20 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
|
|
|
118
118
|
exposure: true
|
|
119
119
|
});
|
|
120
120
|
}, _EditorContentContainer.default, ContentArea);
|
|
121
|
-
var
|
|
122
|
-
var
|
|
121
|
+
var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
122
|
+
var editorAPI = props.editorAPI;
|
|
123
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
|
|
123
124
|
var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
|
|
124
125
|
return {
|
|
125
|
-
maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState)
|
|
126
|
-
|
|
126
|
+
maxContentSizeReached: !!((_states$maxContentSiz = states.maxContentSizeState) !== null && _states$maxContentSiz !== void 0 && _states$maxContentSiz.maxContentSizeReached),
|
|
127
|
+
primaryToolbarComponentsState: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
127
128
|
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
128
129
|
};
|
|
129
130
|
}),
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
|
|
135
|
-
maxContentSizeReached: maxContentSizeReached
|
|
136
|
-
},
|
|
137
|
-
primaryToolbarState: !primaryToolbarComponents ? undefined : {
|
|
138
|
-
components: primaryToolbarComponents
|
|
139
|
-
},
|
|
140
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
141
|
-
mode: editorViewMode
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
}, function (pluginInjectionApi) {
|
|
145
|
-
return (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
|
|
146
|
-
});
|
|
147
|
-
var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
148
|
-
var editorAPI = props.editorAPI;
|
|
149
|
-
var _useCommentEditorPlug = useCommentEditorPluginsStates(editorAPI),
|
|
150
|
-
maxContentSizeState = _useCommentEditorPlug.maxContentSizeState,
|
|
151
|
-
primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
|
|
152
|
-
editorViewModeState = _useCommentEditorPlug.editorViewModeState;
|
|
153
|
-
var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
|
|
131
|
+
editorViewMode = _useSharedPluginState.editorViewMode,
|
|
132
|
+
primaryToolbarComponentsState = _useSharedPluginState.primaryToolbarComponentsState,
|
|
133
|
+
maxContentSizeReached = _useSharedPluginState.maxContentSizeReached;
|
|
134
|
+
var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarComponentsState);
|
|
154
135
|
var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
|
|
155
136
|
mediaState = _useSharedPluginState2.mediaState;
|
|
156
137
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
@@ -178,7 +159,6 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
|
|
|
178
159
|
pluginHooks = props.pluginHooks,
|
|
179
160
|
featureFlags = props.featureFlags,
|
|
180
161
|
innerRef = props.innerRef;
|
|
181
|
-
var maxContentSizeReached = Boolean(maxContentSizeState === null || maxContentSizeState === void 0 ? void 0 : maxContentSizeState.maxContentSizeReached);
|
|
182
162
|
var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
|
|
183
163
|
var containerElement = _react.default.useRef(null);
|
|
184
164
|
|
|
@@ -305,7 +285,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
|
|
|
305
285
|
'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
|
|
306
286
|
}),
|
|
307
287
|
featureFlags: featureFlags,
|
|
308
|
-
viewMode:
|
|
288
|
+
viewMode: editorViewMode,
|
|
309
289
|
appearance: appearance
|
|
310
290
|
}, customContentComponents && 'before' in customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
|
|
311
291
|
editorView: editorView,
|
|
@@ -69,36 +69,6 @@ var hasCustomComponents = function hasCustomComponents(components) {
|
|
|
69
69
|
}
|
|
70
70
|
return true;
|
|
71
71
|
};
|
|
72
|
-
var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
|
|
73
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
|
|
74
|
-
var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
|
|
75
|
-
return {
|
|
76
|
-
primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
77
|
-
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
78
|
-
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
79
|
-
};
|
|
80
|
-
}),
|
|
81
|
-
interactionState = _useSharedPluginState.interactionState,
|
|
82
|
-
primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
|
|
83
|
-
editorViewMode = _useSharedPluginState.editorViewMode;
|
|
84
|
-
return {
|
|
85
|
-
primaryToolbarState: !primaryToolbarComponents ? undefined : {
|
|
86
|
-
components: primaryToolbarComponents
|
|
87
|
-
},
|
|
88
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
89
|
-
mode: editorViewMode
|
|
90
|
-
},
|
|
91
|
-
interactionState: interactionState
|
|
92
|
-
};
|
|
93
|
-
}, function (pluginInjectionApi) {
|
|
94
|
-
var _sharedState$interact;
|
|
95
|
-
var sharedState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
|
|
96
|
-
return {
|
|
97
|
-
primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
|
|
98
|
-
editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
|
|
99
|
-
interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
|
|
100
|
-
};
|
|
101
|
-
});
|
|
102
72
|
var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
|
|
103
73
|
var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
|
|
104
74
|
var wrapperElementRef = (0, _react.useMemo)(function () {
|
|
@@ -107,11 +77,16 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
|
|
|
107
77
|
var scrollContentContainerRef = (0, _react.useRef)(null);
|
|
108
78
|
var showKeyline = useShowKeyline(scrollContentContainerRef);
|
|
109
79
|
var editorAPI = props.editorAPI;
|
|
110
|
-
var
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
80
|
+
var state = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
|
|
81
|
+
var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
|
|
82
|
+
return {
|
|
83
|
+
primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
84
|
+
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
85
|
+
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
86
|
+
};
|
|
87
|
+
});
|
|
88
|
+
var interactionState = state.interactionState;
|
|
89
|
+
var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, state.primaryToolbarComponents);
|
|
115
90
|
var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
|
|
116
91
|
var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'selectionToolbar.toolbarDocking', {
|
|
117
92
|
disabled: (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin')
|
|
@@ -145,7 +120,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
|
|
|
145
120
|
if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
|
|
146
121
|
primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
|
|
147
122
|
}
|
|
148
|
-
var isEditorToolbarHidden =
|
|
123
|
+
var isEditorToolbarHidden = state.editorViewMode === 'view';
|
|
149
124
|
var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
|
|
150
125
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
151
126
|
exposure: true
|
|
@@ -242,7 +217,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
|
|
|
242
217
|
pluginHooks: props.pluginHooks,
|
|
243
218
|
featureFlags: props.featureFlags,
|
|
244
219
|
isEditorToolbarHidden: isEditorToolbarHidden,
|
|
245
|
-
viewMode:
|
|
220
|
+
viewMode: state.editorViewMode,
|
|
246
221
|
hasHadInteraction: hasHadInteraction
|
|
247
222
|
})));
|
|
248
223
|
};
|
|
@@ -76,5 +76,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
|
|
|
76
76
|
|
|
77
77
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
78
78
|
var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
|
|
79
|
-
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px
|
|
79
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
80
80
|
};
|
|
@@ -178,19 +178,12 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
178
178
|
}
|
|
179
179
|
}]);
|
|
180
180
|
}(_react.default.PureComponent);
|
|
181
|
-
var
|
|
182
|
-
|
|
181
|
+
var SwappableContentArea = exports.SwappableContentArea = (0, _reactIntlNext.injectIntl)(SwappableContentAreaInner);
|
|
182
|
+
function ContextPanel(props) {
|
|
183
|
+
var contextPanelContents = (0, _hooks.useSharedPluginStateWithSelector)(props.editorAPI, ['contextPanel'], function (states) {
|
|
183
184
|
var _states$contextPanelS;
|
|
184
185
|
return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
185
186
|
});
|
|
186
|
-
}, function (pluginInjectionApi) {
|
|
187
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['contextPanel']),
|
|
188
|
-
contextPanelState = _useSharedPluginState.contextPanelState;
|
|
189
|
-
return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
|
|
190
|
-
});
|
|
191
|
-
var SwappableContentArea = exports.SwappableContentArea = (0, _reactIntlNext.injectIntl)(SwappableContentAreaInner);
|
|
192
|
-
function ContextPanel(props) {
|
|
193
|
-
var contextPanelContents = useContextPanelSharedState(props.editorAPI);
|
|
194
187
|
var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
195
188
|
return (0, _react2.jsx)(SwappableContentArea
|
|
196
189
|
// Ignored via go/ees005
|
|
@@ -248,7 +248,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
248
248
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
249
249
|
_smartCardStyles.smartCardStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) &&
|
|
250
250
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
251
|
-
_smartCardStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_controls', 'cohort', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') || (0,
|
|
251
|
+
_smartCardStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_controls', 'cohort', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') || (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true)) &&
|
|
252
252
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
253
253
|
_smartCardStyles.editorControlsSmartCardStyles,
|
|
254
254
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -7,7 +7,7 @@ import React, { Fragment } from 'react';
|
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
|
-
import {
|
|
10
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
11
11
|
import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
|
|
12
12
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
13
|
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
|
|
@@ -96,17 +96,6 @@ ContentArea.displayName = 'ContentArea';
|
|
|
96
96
|
const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
|
|
97
97
|
exposure: true
|
|
98
98
|
}), EditorContentContainer, ContentArea);
|
|
99
|
-
const useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
|
|
100
|
-
return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], states => {
|
|
101
|
-
var _states$editorViewMod;
|
|
102
|
-
return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
103
|
-
});
|
|
104
|
-
}, pluginInjectionApi => {
|
|
105
|
-
const {
|
|
106
|
-
editorViewModeState
|
|
107
|
-
} = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
|
|
108
|
-
return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
109
|
-
});
|
|
110
99
|
|
|
111
100
|
/**
|
|
112
101
|
* Render the editor in a chromeless appearance.
|
|
@@ -141,7 +130,10 @@ export default class Editor extends React.Component {
|
|
|
141
130
|
featureFlags
|
|
142
131
|
} = this.props;
|
|
143
132
|
const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
|
|
144
|
-
const editorViewMode =
|
|
133
|
+
const editorViewMode = useSharedPluginStateWithSelector(this.props.editorAPI, ['editorViewMode'], states => {
|
|
134
|
+
var _states$editorViewMod;
|
|
135
|
+
return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
136
|
+
});
|
|
145
137
|
return jsx(WithFlash, {
|
|
146
138
|
animate: maxContentSizeReached
|
|
147
139
|
}, jsx(ChromelessEditorContainer, {
|
|
@@ -181,33 +173,19 @@ export default class Editor extends React.Component {
|
|
|
181
173
|
}
|
|
182
174
|
}
|
|
183
175
|
_defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
|
|
184
|
-
const useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
|
|
185
|
-
const maxContentSizeReached = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize'], states => {
|
|
186
|
-
var _states$maxContentSiz;
|
|
187
|
-
return states === null || states === void 0 ? void 0 : (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
|
|
188
|
-
});
|
|
189
|
-
return {
|
|
190
|
-
maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
|
|
191
|
-
maxContentSizeReached
|
|
192
|
-
}
|
|
193
|
-
};
|
|
194
|
-
}, pluginInjectionApi => {
|
|
195
|
-
const {
|
|
196
|
-
maxContentSizeState
|
|
197
|
-
} = useSharedPluginState(pluginInjectionApi, ['maxContentSize']);
|
|
198
|
-
return {
|
|
199
|
-
maxContentSizeState
|
|
200
|
-
};
|
|
201
|
-
});
|
|
202
176
|
function RenderWithPluginState({
|
|
203
177
|
renderChrome,
|
|
204
178
|
editorAPI
|
|
205
179
|
}) {
|
|
206
|
-
const {
|
|
207
|
-
|
|
208
|
-
|
|
180
|
+
const maxContentSizeReached = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize'], states => {
|
|
181
|
+
var _states$maxContentSiz;
|
|
182
|
+
return states === null || states === void 0 ? void 0 : (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
|
|
183
|
+
});
|
|
184
|
+
const maxContentSize = maxContentSizeReached === undefined ? undefined : {
|
|
185
|
+
maxContentSizeReached
|
|
186
|
+
};
|
|
209
187
|
return jsx(Fragment, null, renderChrome({
|
|
210
|
-
maxContentSize
|
|
188
|
+
maxContentSize
|
|
211
189
|
}));
|
|
212
190
|
}
|
|
213
191
|
function ChromelessEditorContainerNext({
|
|
@@ -10,7 +10,7 @@ import classnames from 'classnames';
|
|
|
10
10
|
import { useIntl } from 'react-intl-next';
|
|
11
11
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
12
12
|
import Button from '@atlaskit/button/new';
|
|
13
|
-
import {
|
|
13
|
+
import { useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
14
14
|
import messages from '@atlaskit/editor-common/messages';
|
|
15
15
|
import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
|
|
16
16
|
import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
|
|
@@ -121,43 +121,23 @@ const appearance = 'comment';
|
|
|
121
121
|
const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
|
|
122
122
|
exposure: true
|
|
123
123
|
}), EditorContentContainer, ContentArea);
|
|
124
|
-
const
|
|
124
|
+
export const CommentEditorWithIntl = props => {
|
|
125
|
+
const {
|
|
126
|
+
editorAPI
|
|
127
|
+
} = props;
|
|
125
128
|
const {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
} = useSharedPluginStateWithSelector(
|
|
129
|
+
editorViewMode,
|
|
130
|
+
primaryToolbarComponentsState,
|
|
131
|
+
maxContentSizeReached
|
|
132
|
+
} = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], states => {
|
|
130
133
|
var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
|
|
131
134
|
return {
|
|
132
|
-
maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState)
|
|
133
|
-
|
|
135
|
+
maxContentSizeReached: !!((_states$maxContentSiz = states.maxContentSizeState) !== null && _states$maxContentSiz !== void 0 && _states$maxContentSiz.maxContentSizeReached),
|
|
136
|
+
primaryToolbarComponentsState: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
134
137
|
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
135
138
|
};
|
|
136
139
|
});
|
|
137
|
-
|
|
138
|
-
maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
|
|
139
|
-
maxContentSizeReached
|
|
140
|
-
},
|
|
141
|
-
primaryToolbarState: !primaryToolbarComponents ? undefined : {
|
|
142
|
-
components: primaryToolbarComponents
|
|
143
|
-
},
|
|
144
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
145
|
-
mode: editorViewMode
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
}, pluginInjectionApi => {
|
|
149
|
-
return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
|
|
150
|
-
});
|
|
151
|
-
export const CommentEditorWithIntl = props => {
|
|
152
|
-
const {
|
|
153
|
-
editorAPI
|
|
154
|
-
} = props;
|
|
155
|
-
const {
|
|
156
|
-
maxContentSizeState,
|
|
157
|
-
primaryToolbarState: primaryToolbarHookState,
|
|
158
|
-
editorViewModeState
|
|
159
|
-
} = useCommentEditorPluginsStates(editorAPI);
|
|
160
|
-
const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
|
|
140
|
+
const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarComponentsState);
|
|
161
141
|
const {
|
|
162
142
|
mediaState
|
|
163
143
|
} = useSharedPluginState(editorAPI, ['media']);
|
|
@@ -187,7 +167,6 @@ export const CommentEditorWithIntl = props => {
|
|
|
187
167
|
featureFlags,
|
|
188
168
|
innerRef
|
|
189
169
|
} = props;
|
|
190
|
-
const maxContentSizeReached = Boolean(maxContentSizeState === null || maxContentSizeState === void 0 ? void 0 : maxContentSizeState.maxContentSizeReached);
|
|
191
170
|
const showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
|
|
192
171
|
const containerElement = React.useRef(null);
|
|
193
172
|
|
|
@@ -308,7 +287,7 @@ export const CommentEditorWithIntl = props => {
|
|
|
308
287
|
'less-margin': width < akEditorMobileBreakoutPoint
|
|
309
288
|
}),
|
|
310
289
|
featureFlags: featureFlags,
|
|
311
|
-
viewMode:
|
|
290
|
+
viewMode: editorViewMode,
|
|
312
291
|
appearance: appearance
|
|
313
292
|
}, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
|
|
314
293
|
editorView: editorView,
|
|
@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
8
8
|
import { jsx } from '@emotion/react';
|
|
9
9
|
import { IntlProvider } from 'react-intl-next';
|
|
10
10
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
11
|
-
import {
|
|
11
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
12
12
|
import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
|
|
13
13
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
14
14
|
import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
|
|
@@ -53,12 +53,13 @@ const hasCustomComponents = components => {
|
|
|
53
53
|
}
|
|
54
54
|
return true;
|
|
55
55
|
};
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
56
|
+
export const FullPageEditor = props => {
|
|
57
|
+
var _scrollContentContain, _toolbarDockingPositi, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
|
|
58
|
+
const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
|
|
59
|
+
const scrollContentContainerRef = useRef(null);
|
|
60
|
+
const showKeyline = useShowKeyline(scrollContentContainerRef);
|
|
61
|
+
const editorAPI = props.editorAPI;
|
|
62
|
+
const state = useSharedPluginStateWithSelector(editorAPI, ['primaryToolbar', 'interaction', 'editorViewMode'], states => {
|
|
62
63
|
var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
|
|
63
64
|
return {
|
|
64
65
|
primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
@@ -66,36 +67,8 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
|
|
|
66
67
|
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
67
68
|
};
|
|
68
69
|
});
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
components: primaryToolbarComponents
|
|
72
|
-
},
|
|
73
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
74
|
-
mode: editorViewMode
|
|
75
|
-
},
|
|
76
|
-
interactionState
|
|
77
|
-
};
|
|
78
|
-
}, pluginInjectionApi => {
|
|
79
|
-
var _sharedState$interact;
|
|
80
|
-
const sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
|
|
81
|
-
return {
|
|
82
|
-
primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
|
|
83
|
-
editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
|
|
84
|
-
interactionState: sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
|
|
85
|
-
};
|
|
86
|
-
});
|
|
87
|
-
export const FullPageEditor = props => {
|
|
88
|
-
var _scrollContentContain, _toolbarDockingPositi, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
|
|
89
|
-
const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
|
|
90
|
-
const scrollContentContainerRef = useRef(null);
|
|
91
|
-
const showKeyline = useShowKeyline(scrollContentContainerRef);
|
|
92
|
-
const editorAPI = props.editorAPI;
|
|
93
|
-
const {
|
|
94
|
-
editorViewModeState,
|
|
95
|
-
primaryToolbarState: primaryToolbarHookState,
|
|
96
|
-
interactionState
|
|
97
|
-
} = useFullPageEditorPluginsStates(editorAPI);
|
|
98
|
-
const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
|
|
70
|
+
const interactionState = state.interactionState;
|
|
71
|
+
const primaryToolbarState = getPrimaryToolbarComponents(editorAPI, state.primaryToolbarComponents);
|
|
99
72
|
const hasHadInteraction = interactionState !== 'hasNotHadInteraction';
|
|
100
73
|
let toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking', {
|
|
101
74
|
disabled: fg('platform_editor_use_preferences_plugin')
|
|
@@ -130,7 +103,7 @@ export const FullPageEditor = props => {
|
|
|
130
103
|
if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
|
|
131
104
|
primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
|
|
132
105
|
}
|
|
133
|
-
let isEditorToolbarHidden =
|
|
106
|
+
let isEditorToolbarHidden = state.editorViewMode === 'view';
|
|
134
107
|
const {
|
|
135
108
|
customPrimaryToolbarComponents
|
|
136
109
|
} = props;
|
|
@@ -229,7 +202,7 @@ export const FullPageEditor = props => {
|
|
|
229
202
|
pluginHooks: props.pluginHooks,
|
|
230
203
|
featureFlags: props.featureFlags,
|
|
231
204
|
isEditorToolbarHidden: isEditorToolbarHidden,
|
|
232
|
-
viewMode:
|
|
205
|
+
viewMode: state.editorViewMode,
|
|
233
206
|
hasHadInteraction: hasHadInteraction
|
|
234
207
|
})));
|
|
235
208
|
};
|
|
@@ -282,8 +282,7 @@ export const layoutStyles = viewMode => css`
|
|
|
282
282
|
/* Ignored via go/ees007
|
|
283
283
|
TODO: Migrate away from gridSize
|
|
284
284
|
Recommendation: Replace directly with 7px */
|
|
285
|
-
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px
|
|
286
|
-
0;
|
|
285
|
+
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px 0;
|
|
287
286
|
transition: border-color 0.3s ${akEditorSwoopCubicBezier};
|
|
288
287
|
cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
|
|
289
288
|
|
|
@@ -11,7 +11,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
11
11
|
import { injectIntl } from 'react-intl-next';
|
|
12
12
|
import Transition from 'react-transition-group/Transition';
|
|
13
13
|
import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
|
|
14
|
-
import {
|
|
14
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
15
15
|
import { contextPanelMessages } from '@atlaskit/editor-common/messages';
|
|
16
16
|
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
17
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
@@ -155,20 +155,12 @@ class SwappableContentAreaInner extends React.PureComponent {
|
|
|
155
155
|
});
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
|
-
const
|
|
159
|
-
|
|
158
|
+
export const SwappableContentArea = injectIntl(SwappableContentAreaInner);
|
|
159
|
+
export function ContextPanel(props) {
|
|
160
|
+
const contextPanelContents = useSharedPluginStateWithSelector(props.editorAPI, ['contextPanel'], states => {
|
|
160
161
|
var _states$contextPanelS;
|
|
161
162
|
return states === null || states === void 0 ? void 0 : (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
162
163
|
});
|
|
163
|
-
}, pluginInjectionApi => {
|
|
164
|
-
const {
|
|
165
|
-
contextPanelState
|
|
166
|
-
} = useSharedPluginState(pluginInjectionApi, ['contextPanel']);
|
|
167
|
-
return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
|
|
168
|
-
});
|
|
169
|
-
export const SwappableContentArea = injectIntl(SwappableContentAreaInner);
|
|
170
|
-
export function ContextPanel(props) {
|
|
171
|
-
const contextPanelContents = useContextPanelSharedState(props.editorAPI);
|
|
172
164
|
const firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
173
165
|
return jsx(SwappableContentArea
|
|
174
166
|
// Ignored via go/ees005
|
|
@@ -243,7 +243,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
243
243
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
244
244
|
smartCardStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) &&
|
|
245
245
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
246
|
-
smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_controls_patch_15') ||
|
|
246
|
+
smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_controls_patch_15') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) &&
|
|
247
247
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
248
248
|
editorControlsSmartCardStyles,
|
|
249
249
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "210.2.
|
|
2
|
+
export const version = "210.2.5";
|
|
@@ -14,7 +14,7 @@ import React, { Fragment } from 'react';
|
|
|
14
14
|
|
|
15
15
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
16
16
|
import { css, jsx } from '@emotion/react';
|
|
17
|
-
import {
|
|
17
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
18
18
|
import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
|
|
19
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
20
|
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
|
|
@@ -105,16 +105,6 @@ var EditorContainer = componentWithCondition(function () {
|
|
|
105
105
|
exposure: true
|
|
106
106
|
});
|
|
107
107
|
}, EditorContentContainer, ContentArea);
|
|
108
|
-
var useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
|
|
109
|
-
return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], function (states) {
|
|
110
|
-
var _states$editorViewMod;
|
|
111
|
-
return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
112
|
-
});
|
|
113
|
-
}, function (pluginInjectionApi) {
|
|
114
|
-
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
|
|
115
|
-
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
116
|
-
return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
117
|
-
});
|
|
118
108
|
|
|
119
109
|
/**
|
|
120
110
|
* Render the editor in a chromeless appearance.
|
|
@@ -153,7 +143,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
|
|
|
153
143
|
pluginHooks = _this$props.pluginHooks,
|
|
154
144
|
featureFlags = _this$props.featureFlags;
|
|
155
145
|
var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
|
|
156
|
-
var editorViewMode =
|
|
146
|
+
var editorViewMode = useSharedPluginStateWithSelector(_this.props.editorAPI, ['editorViewMode'], function (states) {
|
|
147
|
+
var _states$editorViewMod;
|
|
148
|
+
return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
|
|
149
|
+
});
|
|
157
150
|
return jsx(WithFlash, {
|
|
158
151
|
animate: maxContentSizeReached
|
|
159
152
|
}, jsx(ChromelessEditorContainer, {
|
|
@@ -201,30 +194,18 @@ var Editor = /*#__PURE__*/function (_React$Component) {
|
|
|
201
194
|
}(React.Component);
|
|
202
195
|
_defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
|
|
203
196
|
export { Editor as default };
|
|
204
|
-
|
|
205
|
-
var
|
|
197
|
+
function RenderWithPluginState(_ref2) {
|
|
198
|
+
var renderChrome = _ref2.renderChrome,
|
|
199
|
+
editorAPI = _ref2.editorAPI;
|
|
200
|
+
var maxContentSizeReached = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize'], function (states) {
|
|
206
201
|
var _states$maxContentSiz;
|
|
207
202
|
return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
|
|
208
203
|
});
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
maxContentSizeReached: maxContentSizeReached
|
|
212
|
-
}
|
|
213
|
-
};
|
|
214
|
-
}, function (pluginInjectionApi) {
|
|
215
|
-
var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
|
|
216
|
-
maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
|
|
217
|
-
return {
|
|
218
|
-
maxContentSizeState: maxContentSizeState
|
|
204
|
+
var maxContentSize = maxContentSizeReached === undefined ? undefined : {
|
|
205
|
+
maxContentSizeReached: maxContentSizeReached
|
|
219
206
|
};
|
|
220
|
-
});
|
|
221
|
-
function RenderWithPluginState(_ref2) {
|
|
222
|
-
var renderChrome = _ref2.renderChrome,
|
|
223
|
-
editorAPI = _ref2.editorAPI;
|
|
224
|
-
var _useMaxContentSizePlu = useMaxContentSizePluginState(editorAPI),
|
|
225
|
-
maxContentSizeState = _useMaxContentSizePlu.maxContentSizeState;
|
|
226
207
|
return jsx(Fragment, null, renderChrome({
|
|
227
|
-
maxContentSize:
|
|
208
|
+
maxContentSize: maxContentSize
|
|
228
209
|
}));
|
|
229
210
|
}
|
|
230
211
|
function ChromelessEditorContainerNext(_ref3) {
|
|
@@ -14,7 +14,7 @@ import classnames from 'classnames';
|
|
|
14
14
|
import { useIntl } from 'react-intl-next';
|
|
15
15
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
16
16
|
import Button from '@atlaskit/button/new';
|
|
17
|
-
import {
|
|
17
|
+
import { useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
18
18
|
import messages from '@atlaskit/editor-common/messages';
|
|
19
19
|
import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
|
|
20
20
|
import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
|
|
@@ -110,39 +110,20 @@ var EditorContainer = componentWithCondition(function () {
|
|
|
110
110
|
exposure: true
|
|
111
111
|
});
|
|
112
112
|
}, EditorContentContainer, ContentArea);
|
|
113
|
-
var
|
|
114
|
-
var
|
|
113
|
+
export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
114
|
+
var editorAPI = props.editorAPI;
|
|
115
|
+
var _useSharedPluginState = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
|
|
115
116
|
var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
|
|
116
117
|
return {
|
|
117
|
-
maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState)
|
|
118
|
-
|
|
118
|
+
maxContentSizeReached: !!((_states$maxContentSiz = states.maxContentSizeState) !== null && _states$maxContentSiz !== void 0 && _states$maxContentSiz.maxContentSizeReached),
|
|
119
|
+
primaryToolbarComponentsState: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
119
120
|
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
120
121
|
};
|
|
121
122
|
}),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
|
|
127
|
-
maxContentSizeReached: maxContentSizeReached
|
|
128
|
-
},
|
|
129
|
-
primaryToolbarState: !primaryToolbarComponents ? undefined : {
|
|
130
|
-
components: primaryToolbarComponents
|
|
131
|
-
},
|
|
132
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
133
|
-
mode: editorViewMode
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
}, function (pluginInjectionApi) {
|
|
137
|
-
return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
|
|
138
|
-
});
|
|
139
|
-
export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
140
|
-
var editorAPI = props.editorAPI;
|
|
141
|
-
var _useCommentEditorPlug = useCommentEditorPluginsStates(editorAPI),
|
|
142
|
-
maxContentSizeState = _useCommentEditorPlug.maxContentSizeState,
|
|
143
|
-
primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
|
|
144
|
-
editorViewModeState = _useCommentEditorPlug.editorViewModeState;
|
|
145
|
-
var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
|
|
123
|
+
editorViewMode = _useSharedPluginState.editorViewMode,
|
|
124
|
+
primaryToolbarComponentsState = _useSharedPluginState.primaryToolbarComponentsState,
|
|
125
|
+
maxContentSizeReached = _useSharedPluginState.maxContentSizeReached;
|
|
126
|
+
var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarComponentsState);
|
|
146
127
|
var _useSharedPluginState2 = useSharedPluginState(editorAPI, ['media']),
|
|
147
128
|
mediaState = _useSharedPluginState2.mediaState;
|
|
148
129
|
var intl = useIntl();
|
|
@@ -170,7 +151,6 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
|
170
151
|
pluginHooks = props.pluginHooks,
|
|
171
152
|
featureFlags = props.featureFlags,
|
|
172
153
|
innerRef = props.innerRef;
|
|
173
|
-
var maxContentSizeReached = Boolean(maxContentSizeState === null || maxContentSizeState === void 0 ? void 0 : maxContentSizeState.maxContentSizeReached);
|
|
174
154
|
var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
|
|
175
155
|
var containerElement = React.useRef(null);
|
|
176
156
|
|
|
@@ -297,7 +277,7 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
|
|
|
297
277
|
'less-margin': width < akEditorMobileBreakoutPoint
|
|
298
278
|
}),
|
|
299
279
|
featureFlags: featureFlags,
|
|
300
|
-
viewMode:
|
|
280
|
+
viewMode: editorViewMode,
|
|
301
281
|
appearance: appearance
|
|
302
282
|
}, customContentComponents && 'before' in customContentComponents ? contentComponentClickWrapper(customContentComponents.before) : contentComponentClickWrapper(customContentComponents), jsx(PluginSlot, {
|
|
303
283
|
editorView: editorView,
|
|
@@ -9,7 +9,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
9
9
|
import { jsx } from '@emotion/react';
|
|
10
10
|
import { IntlProvider } from 'react-intl-next';
|
|
11
11
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
12
|
-
import {
|
|
12
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
13
13
|
import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
|
|
14
14
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
15
|
import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
|
|
@@ -59,36 +59,6 @@ var hasCustomComponents = function hasCustomComponents(components) {
|
|
|
59
59
|
}
|
|
60
60
|
return true;
|
|
61
61
|
};
|
|
62
|
-
var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
|
|
63
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
|
|
64
|
-
var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
|
|
65
|
-
return {
|
|
66
|
-
primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
67
|
-
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
68
|
-
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
69
|
-
};
|
|
70
|
-
}),
|
|
71
|
-
interactionState = _useSharedPluginState.interactionState,
|
|
72
|
-
primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
|
|
73
|
-
editorViewMode = _useSharedPluginState.editorViewMode;
|
|
74
|
-
return {
|
|
75
|
-
primaryToolbarState: !primaryToolbarComponents ? undefined : {
|
|
76
|
-
components: primaryToolbarComponents
|
|
77
|
-
},
|
|
78
|
-
editorViewModeState: !editorViewMode ? undefined : {
|
|
79
|
-
mode: editorViewMode
|
|
80
|
-
},
|
|
81
|
-
interactionState: interactionState
|
|
82
|
-
};
|
|
83
|
-
}, function (pluginInjectionApi) {
|
|
84
|
-
var _sharedState$interact;
|
|
85
|
-
var sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
|
|
86
|
-
return {
|
|
87
|
-
primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
|
|
88
|
-
editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
|
|
89
|
-
interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
|
|
90
|
-
};
|
|
91
|
-
});
|
|
92
62
|
export var FullPageEditor = function FullPageEditor(props) {
|
|
93
63
|
var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
|
|
94
64
|
var wrapperElementRef = useMemo(function () {
|
|
@@ -97,11 +67,16 @@ export var FullPageEditor = function FullPageEditor(props) {
|
|
|
97
67
|
var scrollContentContainerRef = useRef(null);
|
|
98
68
|
var showKeyline = useShowKeyline(scrollContentContainerRef);
|
|
99
69
|
var editorAPI = props.editorAPI;
|
|
100
|
-
var
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
70
|
+
var state = useSharedPluginStateWithSelector(editorAPI, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
|
|
71
|
+
var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
|
|
72
|
+
return {
|
|
73
|
+
primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
|
|
74
|
+
interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
75
|
+
editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
|
|
76
|
+
};
|
|
77
|
+
});
|
|
78
|
+
var interactionState = state.interactionState;
|
|
79
|
+
var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, state.primaryToolbarComponents);
|
|
105
80
|
var hasHadInteraction = interactionState !== 'hasNotHadInteraction';
|
|
106
81
|
var toolbarDocking = useSharedPluginStateSelector(editorAPI, 'selectionToolbar.toolbarDocking', {
|
|
107
82
|
disabled: fg('platform_editor_use_preferences_plugin')
|
|
@@ -135,7 +110,7 @@ export var FullPageEditor = function FullPageEditor(props) {
|
|
|
135
110
|
if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
|
|
136
111
|
primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
|
|
137
112
|
}
|
|
138
|
-
var isEditorToolbarHidden =
|
|
113
|
+
var isEditorToolbarHidden = state.editorViewMode === 'view';
|
|
139
114
|
var customPrimaryToolbarComponents = props.customPrimaryToolbarComponents;
|
|
140
115
|
if (editorExperiment('platform_editor_controls', 'variant1', {
|
|
141
116
|
exposure: true
|
|
@@ -232,7 +207,7 @@ export var FullPageEditor = function FullPageEditor(props) {
|
|
|
232
207
|
pluginHooks: props.pluginHooks,
|
|
233
208
|
featureFlags: props.featureFlags,
|
|
234
209
|
isEditorToolbarHidden: isEditorToolbarHidden,
|
|
235
|
-
viewMode:
|
|
210
|
+
viewMode: state.editorViewMode,
|
|
236
211
|
hasHadInteraction: hasHadInteraction
|
|
237
212
|
})));
|
|
238
213
|
};
|
|
@@ -70,5 +70,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
|
|
|
70
70
|
|
|
71
71
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
72
72
|
export var layoutStyles = function layoutStyles(viewMode) {
|
|
73
|
-
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px
|
|
73
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
74
74
|
};
|
|
@@ -20,7 +20,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
20
20
|
import { injectIntl } from 'react-intl-next';
|
|
21
21
|
import Transition from 'react-transition-group/Transition';
|
|
22
22
|
import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
|
|
23
|
-
import {
|
|
23
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
24
24
|
import { contextPanelMessages } from '@atlaskit/editor-common/messages';
|
|
25
25
|
import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
26
26
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
@@ -173,19 +173,12 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
173
173
|
}
|
|
174
174
|
}]);
|
|
175
175
|
}(React.PureComponent);
|
|
176
|
-
var
|
|
177
|
-
|
|
176
|
+
export var SwappableContentArea = injectIntl(SwappableContentAreaInner);
|
|
177
|
+
export function ContextPanel(props) {
|
|
178
|
+
var contextPanelContents = useSharedPluginStateWithSelector(props.editorAPI, ['contextPanel'], function (states) {
|
|
178
179
|
var _states$contextPanelS;
|
|
179
180
|
return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
|
|
180
181
|
});
|
|
181
|
-
}, function (pluginInjectionApi) {
|
|
182
|
-
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['contextPanel']),
|
|
183
|
-
contextPanelState = _useSharedPluginState.contextPanelState;
|
|
184
|
-
return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
|
|
185
|
-
});
|
|
186
|
-
export var SwappableContentArea = injectIntl(SwappableContentAreaInner);
|
|
187
|
-
export function ContextPanel(props) {
|
|
188
|
-
var contextPanelContents = useContextPanelSharedState(props.editorAPI);
|
|
189
182
|
var firstContent = contextPanelContents && contextPanelContents.find(Boolean);
|
|
190
183
|
return jsx(SwappableContentArea
|
|
191
184
|
// Ignored via go/ees005
|
|
@@ -240,7 +240,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
240
240
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
241
241
|
smartCardStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) &&
|
|
242
242
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
243
|
-
smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_controls_patch_15') ||
|
|
243
|
+
smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') && fg('platform_editor_controls_patch_15') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) &&
|
|
244
244
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
245
245
|
editorControlsSmartCardStyles,
|
|
246
246
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "210.2.
|
|
2
|
+
export var version = "210.2.5";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "210.2.
|
|
3
|
+
"version": "210.2.6",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@atlaskit/platform-feature-flags-react": "^0.2.0",
|
|
64
64
|
"@atlaskit/react-ufo": "^4.5.0",
|
|
65
65
|
"@atlaskit/task-decision": "^19.2.0",
|
|
66
|
-
"@atlaskit/tmp-editor-statsig": "^11.
|
|
66
|
+
"@atlaskit/tmp-editor-statsig": "^11.10.0",
|
|
67
67
|
"@atlaskit/tokens": "^6.1.0",
|
|
68
68
|
"@atlaskit/tooltip": "^20.4.0",
|
|
69
69
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"@atlaskit/analytics-listeners": "^9.0.0",
|
|
95
95
|
"@atlaskit/collab-provider": "^11.3.0",
|
|
96
96
|
"@atlaskit/editor-plugin-annotation": "^3.3.0",
|
|
97
|
-
"@atlaskit/editor-plugin-card": "^7.
|
|
97
|
+
"@atlaskit/editor-plugin-card": "^7.7.0",
|
|
98
98
|
"@atlaskit/editor-plugin-list": "^5.1.0",
|
|
99
99
|
"@atlaskit/editor-plugin-paste": "^4.1.0",
|
|
100
100
|
"@atlaskit/link-provider": "^3.7.0",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"@atlaskit/primitives": "^14.12.0",
|
|
107
107
|
"@atlaskit/renderer": "^120.5.0",
|
|
108
108
|
"@atlaskit/section-message": "^8.6.0",
|
|
109
|
-
"@atlaskit/smart-card": "^40.
|
|
109
|
+
"@atlaskit/smart-card": "^40.15.0",
|
|
110
110
|
"@atlaskit/synchrony-test-helpers": "workspace:^",
|
|
111
111
|
"@atlaskit/toggle": "^15.1.0",
|
|
112
112
|
"@atlaskit/util-data-test": "^18.1.0",
|