@atlaskit/editor-core 215.20.0 → 215.20.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/afm-cc/tsconfig.json +2 -1
- package/afm-jira/tsconfig.json +2 -1
- package/afm-products/tsconfig.json +2 -1
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
- package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +3 -1
- package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +33 -1
- package/dist/cjs/ui/EditorContentContainer/styles/syncBlockStyles.js +16 -10
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
- package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
- package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +4 -2
- package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +32 -0
- package/dist/es2019/ui/EditorContentContainer/styles/syncBlockStyles.js +20 -10
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
- package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
- package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +4 -2
- package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +32 -0
- package/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js +16 -10
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +2 -1
- package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +3 -1
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
- package/package.json +8 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 215.20.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
|
|
8
|
+
[ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
|
|
9
|
+
designs
|
|
10
|
+
- [`0c0f8207e7294`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c0f8207e7294) -
|
|
11
|
+
Added sync block resizing
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 215.20.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`63c5e344d169c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63c5e344d169c) -
|
|
19
|
+
Reduce the VC impact of the editor toolbar
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 215.20.0
|
|
4
23
|
|
|
5
24
|
### Minor Changes
|
package/afm-cc/tsconfig.json
CHANGED
package/afm-jira/tsconfig.json
CHANGED
|
@@ -122,10 +122,6 @@ var tableFullPageEditorStylesNew = (0, _react2.css)({
|
|
|
122
122
|
width: '100%'
|
|
123
123
|
}
|
|
124
124
|
});
|
|
125
|
-
var scrollGutter = (0, _react2.css)({
|
|
126
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
127
|
-
display: 'none'
|
|
128
|
-
});
|
|
129
125
|
var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
|
|
130
126
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
131
127
|
'.fabric-editor--full-width-mode': {
|
|
@@ -217,13 +213,14 @@ var contentAreaHeightNoToolbar = (0, _react2.css)({
|
|
|
217
213
|
var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
218
214
|
var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
|
|
219
215
|
var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
220
|
-
var _contentAreaRef$curre;
|
|
216
|
+
var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
|
|
221
217
|
var theme = (0, _react2.useTheme)();
|
|
222
218
|
var fullWidthMode = props.appearance === 'full-width';
|
|
223
219
|
var maxWidthMode = props.appearance === 'max';
|
|
224
220
|
var scrollContainerRef = (0, _react.useRef)(null);
|
|
225
221
|
var contentAreaRef = (0, _react.useRef)(null);
|
|
226
222
|
var containerRef = (0, _react.useRef)(null);
|
|
223
|
+
var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
|
|
227
224
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
228
225
|
return {
|
|
229
226
|
get scrollContainer() {
|
|
@@ -304,9 +301,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
304
301
|
containerElement: scrollContainerRef.current,
|
|
305
302
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
306
303
|
wrapperElement: props.wrapperElement
|
|
307
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('
|
|
304
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && (0, _react2.jsx)("div", {
|
|
308
305
|
id: "editor-scroll-gutter",
|
|
309
|
-
|
|
306
|
+
style: {
|
|
307
|
+
paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
|
|
308
|
+
},
|
|
310
309
|
"data-vc": "scroll-gutter"
|
|
311
310
|
})))))), (0, _react2.jsx)("div", {
|
|
312
311
|
css: _StyledComponents.sidebarArea
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
7
7
|
._1bahesu3{justify-content:flex-end}
|
|
8
8
|
._1e0c1txw{display:flex}
|
|
9
|
+
._1f38ptqj{container-name:toolbar-container}
|
|
9
10
|
._1pby16oo{z-index:510}
|
|
10
11
|
._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
|
|
11
12
|
._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
|
|
12
13
|
._4cvr1h6o{align-items:center}
|
|
13
14
|
._4t3izwfg{height:2pc}
|
|
15
|
+
._7cca15wb{container-type:inline-size}
|
|
14
16
|
._kqswh2mm{position:relative}
|
|
15
17
|
._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
|
|
@@ -29,6 +29,7 @@ var styles = {
|
|
|
29
29
|
mainToolbarWithKeyline: "_16qs1nax",
|
|
30
30
|
customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
|
|
31
31
|
firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
|
|
32
|
+
firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
|
|
32
33
|
secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
|
|
33
34
|
beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
|
|
34
35
|
};
|
|
@@ -45,7 +46,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
|
|
|
45
46
|
var children = _ref2.children;
|
|
46
47
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
47
48
|
"data-testid": "main-toolbar-first-child-wrapper",
|
|
48
|
-
className: (0, _runtime.ax)([styles.firstChildWrapperOneLine])
|
|
49
|
+
className: (0, _runtime.ax)([styles.firstChildWrapperOneLine, (0, _expValEquals.expValEquals)('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
|
|
49
50
|
}, children);
|
|
50
51
|
};
|
|
51
52
|
var SecondChildWrapper = function SecondChildWrapper(_ref3) {
|
|
@@ -388,7 +388,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
388
388
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
389
389
|
_resizerStyles.pragmaticResizerStylesNew :
|
|
390
390
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
391
|
-
_resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('
|
|
391
|
+
_resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) &&
|
|
392
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
393
|
+
_resizerStyles.pragmaticResizerStylesSyncedBlock, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
392
394
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
393
395
|
_resizerStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
394
396
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticStylesLayoutFirstNodeResizeHandleFix = exports.pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesNew = exports.pragmaticResizerStylesForTooltip = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
|
|
7
|
+
exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticStylesLayoutFirstNodeResizeHandleFix = exports.pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesSyncedBlock = exports.pragmaticResizerStylesNew = exports.pragmaticResizerStylesForTooltip = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
@@ -446,6 +446,38 @@ var pragmaticResizerStylesNew = exports.pragmaticResizerStylesNew = (0, _react.c
|
|
|
446
446
|
}
|
|
447
447
|
});
|
|
448
448
|
|
|
449
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
450
|
+
var pragmaticResizerStylesSyncedBlock = exports.pragmaticResizerStylesSyncedBlock = (0, _react.css)({
|
|
451
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
452
|
+
'.fabric-editor-breakout-mark': {
|
|
453
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
454
|
+
'&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
455
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
456
|
+
'> .pm-breakout-resize-handle-container--left': {
|
|
457
|
+
left: '-20px'
|
|
458
|
+
},
|
|
459
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
460
|
+
'> .pm-breakout-resize-handle-container--right': {
|
|
461
|
+
right: '-20px'
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
465
|
+
'&:has([data-prosemirror-node-name="syncBlock"])': {
|
|
466
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
467
|
+
'> .pm-breakout-resize-handle-container': {
|
|
468
|
+
height: 'calc(100% - 12px)'
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
472
|
+
'&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
473
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
474
|
+
'> .pm-breakout-resize-handle-container': {
|
|
475
|
+
height: 'calc(100% - 2px)'
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
});
|
|
480
|
+
|
|
449
481
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
450
482
|
var pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesWithReducedEditorGutter = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
|
|
451
483
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -8,21 +8,20 @@ exports.syncBlockStyles = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _syncBlock = require("@atlaskit/editor-common/sync-block");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
13
12
|
|
|
14
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
15
14
|
var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)({
|
|
16
15
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
17
|
-
'.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
16
|
+
'.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
18
17
|
position: 'relative',
|
|
19
18
|
cursor: 'pointer',
|
|
20
19
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
21
20
|
marginTop: "var(--ds-space-150, 12px)",
|
|
22
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
23
|
-
marginRight: "-"
|
|
22
|
+
marginRight: "-18px",
|
|
24
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
25
|
-
marginLeft: "-"
|
|
24
|
+
marginLeft: "-18px",
|
|
26
25
|
marginBottom: 0,
|
|
27
26
|
paddingTop: "var(--ds-space-050, 4px)",
|
|
28
27
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
@@ -95,11 +94,18 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
|
|
|
95
94
|
'&::before': {
|
|
96
95
|
border: 'none'
|
|
97
96
|
}
|
|
98
|
-
})), "
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
})), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), (0, _defineProperty2.default)({
|
|
98
|
+
backgroundColor: "var(--ds-background-disabled, #17171708)",
|
|
99
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
100
|
+
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
101
|
+
opacity: 1,
|
|
102
|
+
visibility: 'visible',
|
|
103
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)",
|
|
104
|
+
'&::before': {
|
|
105
|
+
border: 'none'
|
|
102
106
|
}
|
|
107
|
+
})), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.loading, ")"), (0, _defineProperty2.default)({
|
|
108
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
103
109
|
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
104
110
|
opacity: 0,
|
|
105
111
|
visibility: 'hidden'
|
|
@@ -110,10 +116,10 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
|
|
|
110
116
|
opacity: 0,
|
|
111
117
|
visibility: 'hidden'
|
|
112
118
|
})), ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
|
|
113
|
-
padding: '0
|
|
119
|
+
padding: '0 18px',
|
|
114
120
|
cursor: 'text'
|
|
115
121
|
}), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
|
|
116
|
-
padding: '0
|
|
122
|
+
padding: '0 18px'
|
|
117
123
|
}))
|
|
118
124
|
}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
119
125
|
color: "var(--ds-text-subtle, #505258)",
|
|
@@ -113,10 +113,6 @@ const tableFullPageEditorStylesNew = css({
|
|
|
113
113
|
width: '100%'
|
|
114
114
|
}
|
|
115
115
|
});
|
|
116
|
-
const scrollGutter = css({
|
|
117
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
118
|
-
display: 'none'
|
|
119
|
-
});
|
|
120
116
|
const editorContentAreaContainerNestedDndStyle = css({
|
|
121
117
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
122
118
|
'.fabric-editor--full-width-mode': {
|
|
@@ -211,13 +207,14 @@ const contentAreaHeightNoToolbar = css({
|
|
|
211
207
|
export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
212
208
|
export const EDITOR_CONTAINER = 'ak-editor-container';
|
|
213
209
|
const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
214
|
-
var _contentAreaRef$curre;
|
|
210
|
+
var _props$editorAPI, _props$editorAPI$base, _props$editorAPI$base2, _contentAreaRef$curre, _allowScrollGutter$gu;
|
|
215
211
|
const theme = useTheme();
|
|
216
212
|
const fullWidthMode = props.appearance === 'full-width';
|
|
217
213
|
const maxWidthMode = props.appearance === 'max';
|
|
218
214
|
const scrollContainerRef = useRef(null);
|
|
219
215
|
const contentAreaRef = useRef(null);
|
|
220
216
|
const containerRef = useRef(null);
|
|
217
|
+
const allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 ? void 0 : (_props$editorAPI$base = _props$editorAPI.base) === null || _props$editorAPI$base === void 0 ? void 0 : (_props$editorAPI$base2 = _props$editorAPI$base.sharedState.currentState()) === null || _props$editorAPI$base2 === void 0 ? void 0 : _props$editorAPI$base2.allowScrollGutter;
|
|
221
218
|
useImperativeHandle(ref, () => ({
|
|
222
219
|
get scrollContainer() {
|
|
223
220
|
return scrollContainerRef.current;
|
|
@@ -298,9 +295,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
298
295
|
containerElement: scrollContainerRef.current,
|
|
299
296
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
300
297
|
wrapperElement: props.wrapperElement
|
|
301
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('
|
|
298
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
|
|
302
299
|
id: "editor-scroll-gutter",
|
|
303
|
-
|
|
300
|
+
style: {
|
|
301
|
+
paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
|
|
302
|
+
},
|
|
304
303
|
"data-vc": "scroll-gutter"
|
|
305
304
|
})))))), jsx("div", {
|
|
306
305
|
css: sidebarArea
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
7
7
|
._1bahesu3{justify-content:flex-end}
|
|
8
8
|
._1e0c1txw{display:flex}
|
|
9
|
+
._1f38ptqj{container-name:toolbar-container}
|
|
9
10
|
._1pby16oo{z-index:510}
|
|
10
11
|
._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
|
|
11
12
|
._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
|
|
12
13
|
._4cvr1h6o{align-items:center}
|
|
13
14
|
._4t3izwfg{height:2pc}
|
|
15
|
+
._7cca15wb{container-type:inline-size}
|
|
14
16
|
._kqswh2mm{position:relative}
|
|
15
17
|
._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
|
|
@@ -21,6 +21,7 @@ const styles = {
|
|
|
21
21
|
mainToolbarWithKeyline: "_16qs1nax",
|
|
22
22
|
customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
|
|
23
23
|
firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
|
|
24
|
+
firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
|
|
24
25
|
secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
|
|
25
26
|
beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
|
|
26
27
|
};
|
|
@@ -39,7 +40,7 @@ const FirstChildWrapper = ({
|
|
|
39
40
|
}) => {
|
|
40
41
|
return /*#__PURE__*/React.createElement("div", {
|
|
41
42
|
"data-testid": "main-toolbar-first-child-wrapper",
|
|
42
|
-
className: ax([styles.firstChildWrapperOneLine])
|
|
43
|
+
className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
|
|
43
44
|
}, children);
|
|
44
45
|
};
|
|
45
46
|
const SecondChildWrapper = ({
|
|
@@ -50,7 +50,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
|
|
|
50
50
|
import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
|
|
51
51
|
import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
|
|
52
52
|
import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
|
|
53
|
-
import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
|
|
53
|
+
import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
|
|
54
54
|
import { dangerRuleStyles, ruleStyles } from './styles/rule';
|
|
55
55
|
import { scrollbarStyles } from './styles/scrollbarStyles';
|
|
56
56
|
import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
|
|
@@ -384,7 +384,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
384
384
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
385
385
|
pragmaticResizerStylesNew :
|
|
386
386
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
387
|
-
pragmaticResizerStyles : undefined, editorExperiment('
|
|
387
|
+
pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
|
|
388
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
389
|
+
pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
388
390
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
389
391
|
pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
390
392
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -493,6 +493,38 @@ export const pragmaticResizerStylesNew = css({
|
|
|
493
493
|
}
|
|
494
494
|
});
|
|
495
495
|
|
|
496
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
497
|
+
export const pragmaticResizerStylesSyncedBlock = css({
|
|
498
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
499
|
+
'.fabric-editor-breakout-mark': {
|
|
500
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
501
|
+
'&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
502
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
503
|
+
'> .pm-breakout-resize-handle-container--left': {
|
|
504
|
+
left: '-20px'
|
|
505
|
+
},
|
|
506
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
507
|
+
'> .pm-breakout-resize-handle-container--right': {
|
|
508
|
+
right: '-20px'
|
|
509
|
+
}
|
|
510
|
+
},
|
|
511
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
512
|
+
'&:has([data-prosemirror-node-name="syncBlock"])': {
|
|
513
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
514
|
+
'> .pm-breakout-resize-handle-container': {
|
|
515
|
+
height: 'calc(100% - 12px)'
|
|
516
|
+
}
|
|
517
|
+
},
|
|
518
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
519
|
+
'&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
520
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
521
|
+
'> .pm-breakout-resize-handle-container': {
|
|
522
|
+
height: 'calc(100% - 2px)'
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
});
|
|
527
|
+
|
|
496
528
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
497
529
|
export const pragmaticResizerStylesWithReducedEditorGutter = css({
|
|
498
530
|
/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
4
|
-
import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
5
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
6
5
|
export const syncBlockStyles = css({
|
|
7
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -13,9 +12,9 @@ export const syncBlockStyles = css({
|
|
|
13
12
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
14
13
|
marginTop: "var(--ds-space-150, 12px)",
|
|
15
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
16
|
-
marginRight:
|
|
15
|
+
marginRight: `-18px`,
|
|
17
16
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
18
|
-
marginLeft:
|
|
17
|
+
marginLeft: `-18px`,
|
|
19
18
|
marginBottom: 0,
|
|
20
19
|
paddingTop: "var(--ds-space-050, 4px)",
|
|
21
20
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
@@ -113,11 +112,22 @@ export const syncBlockStyles = css({
|
|
|
113
112
|
/* Error state */
|
|
114
113
|
/* In error state sync block should not have hover styles or show the label */
|
|
115
114
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
116
|
-
[
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
115
|
+
[`:has(.${SyncBlockSharedCssClassName.error})`]: {
|
|
116
|
+
backgroundColor: "var(--ds-background-disabled, #17171708)",
|
|
117
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
|
|
118
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
119
|
+
[`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
|
|
120
|
+
opacity: 1,
|
|
121
|
+
visibility: 'visible',
|
|
122
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)",
|
|
123
|
+
'&::before': {
|
|
124
|
+
border: 'none'
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
129
|
+
[`:has(.${SyncBlockSharedCssClassName.loading})`]: {
|
|
130
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
|
|
121
131
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
122
132
|
[`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
|
|
123
133
|
opacity: 0,
|
|
@@ -137,12 +147,12 @@ export const syncBlockStyles = css({
|
|
|
137
147
|
},
|
|
138
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
139
149
|
[`.${BodiedSyncBlockSharedCssClassName.content}`]: {
|
|
140
|
-
padding: '0
|
|
150
|
+
padding: '0 18px',
|
|
141
151
|
cursor: 'text'
|
|
142
152
|
},
|
|
143
153
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
144
154
|
[`.${SyncBlockSharedCssClassName.renderer}`]: {
|
|
145
|
-
padding: '0
|
|
155
|
+
padding: '0 18px'
|
|
146
156
|
}
|
|
147
157
|
}
|
|
148
158
|
},
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "215.
|
|
2
|
+
export const version = "215.20.1";
|
|
@@ -112,10 +112,6 @@ var tableFullPageEditorStylesNew = css({
|
|
|
112
112
|
width: '100%'
|
|
113
113
|
}
|
|
114
114
|
});
|
|
115
|
-
var scrollGutter = css({
|
|
116
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
117
|
-
display: 'none'
|
|
118
|
-
});
|
|
119
115
|
var editorContentAreaContainerNestedDndStyle = css({
|
|
120
116
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
117
|
'.fabric-editor--full-width-mode': {
|
|
@@ -207,13 +203,14 @@ var contentAreaHeightNoToolbar = css({
|
|
|
207
203
|
export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
208
204
|
export var EDITOR_CONTAINER = 'ak-editor-container';
|
|
209
205
|
var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
210
|
-
var _contentAreaRef$curre;
|
|
206
|
+
var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
|
|
211
207
|
var theme = useTheme();
|
|
212
208
|
var fullWidthMode = props.appearance === 'full-width';
|
|
213
209
|
var maxWidthMode = props.appearance === 'max';
|
|
214
210
|
var scrollContainerRef = useRef(null);
|
|
215
211
|
var contentAreaRef = useRef(null);
|
|
216
212
|
var containerRef = useRef(null);
|
|
213
|
+
var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
|
|
217
214
|
useImperativeHandle(ref, function () {
|
|
218
215
|
return {
|
|
219
216
|
get scrollContainer() {
|
|
@@ -294,9 +291,11 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
294
291
|
containerElement: scrollContainerRef.current,
|
|
295
292
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
296
293
|
wrapperElement: props.wrapperElement
|
|
297
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('
|
|
294
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
|
|
298
295
|
id: "editor-scroll-gutter",
|
|
299
|
-
|
|
296
|
+
style: {
|
|
297
|
+
paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
|
|
298
|
+
},
|
|
300
299
|
"data-vc": "scroll-gutter"
|
|
301
300
|
})))))), jsx("div", {
|
|
302
301
|
css: sidebarArea
|
|
@@ -6,10 +6,12 @@
|
|
|
6
6
|
._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
|
|
7
7
|
._1bahesu3{justify-content:flex-end}
|
|
8
8
|
._1e0c1txw{display:flex}
|
|
9
|
+
._1f38ptqj{container-name:toolbar-container}
|
|
9
10
|
._1pby16oo{z-index:510}
|
|
10
11
|
._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
|
|
11
12
|
._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
|
|
12
13
|
._4cvr1h6o{align-items:center}
|
|
13
14
|
._4t3izwfg{height:2pc}
|
|
15
|
+
._7cca15wb{container-type:inline-size}
|
|
14
16
|
._kqswh2mm{position:relative}
|
|
15
17
|
._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
|
|
@@ -21,6 +21,7 @@ var styles = {
|
|
|
21
21
|
mainToolbarWithKeyline: "_16qs1nax",
|
|
22
22
|
customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
|
|
23
23
|
firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
|
|
24
|
+
firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
|
|
24
25
|
secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
|
|
25
26
|
beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
|
|
26
27
|
};
|
|
@@ -37,7 +38,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
|
|
|
37
38
|
var children = _ref2.children;
|
|
38
39
|
return /*#__PURE__*/React.createElement("div", {
|
|
39
40
|
"data-testid": "main-toolbar-first-child-wrapper",
|
|
40
|
-
className: ax([styles.firstChildWrapperOneLine])
|
|
41
|
+
className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
|
|
41
42
|
}, children);
|
|
42
43
|
};
|
|
43
44
|
var SecondChildWrapper = function SecondChildWrapper(_ref3) {
|
|
@@ -51,7 +51,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
|
|
|
51
51
|
import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
|
|
52
52
|
import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
|
|
53
53
|
import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
|
|
54
|
-
import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
|
|
54
|
+
import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
|
|
55
55
|
import { dangerRuleStyles, ruleStyles } from './styles/rule';
|
|
56
56
|
import { scrollbarStyles } from './styles/scrollbarStyles';
|
|
57
57
|
import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
|
|
@@ -380,7 +380,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
380
380
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
381
381
|
pragmaticResizerStylesNew :
|
|
382
382
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
383
|
-
pragmaticResizerStyles : undefined, editorExperiment('
|
|
383
|
+
pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
|
|
384
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
385
|
+
pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
384
386
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
385
387
|
pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
|
|
386
388
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -438,6 +438,38 @@ export var pragmaticResizerStylesNew = css({
|
|
|
438
438
|
}
|
|
439
439
|
});
|
|
440
440
|
|
|
441
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
442
|
+
export var pragmaticResizerStylesSyncedBlock = css({
|
|
443
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
444
|
+
'.fabric-editor-breakout-mark': {
|
|
445
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
446
|
+
'&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
447
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
448
|
+
'> .pm-breakout-resize-handle-container--left': {
|
|
449
|
+
left: '-20px'
|
|
450
|
+
},
|
|
451
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
452
|
+
'> .pm-breakout-resize-handle-container--right': {
|
|
453
|
+
right: '-20px'
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
457
|
+
'&:has([data-prosemirror-node-name="syncBlock"])': {
|
|
458
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
459
|
+
'> .pm-breakout-resize-handle-container': {
|
|
460
|
+
height: 'calc(100% - 12px)'
|
|
461
|
+
}
|
|
462
|
+
},
|
|
463
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
464
|
+
'&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
|
|
465
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
466
|
+
'> .pm-breakout-resize-handle-container': {
|
|
467
|
+
height: 'calc(100% - 2px)'
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
});
|
|
472
|
+
|
|
441
473
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
442
474
|
export var pragmaticResizerStylesWithReducedEditorGutter = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
|
|
443
475
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -2,19 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
5
|
-
import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
6
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
7
6
|
export var syncBlockStyles = css(_defineProperty({
|
|
8
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
9
|
-
'.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
8
|
+
'.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
10
9
|
position: 'relative',
|
|
11
10
|
cursor: 'pointer',
|
|
12
11
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
13
12
|
marginTop: "var(--ds-space-150, 12px)",
|
|
14
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
15
|
-
marginRight: "-"
|
|
14
|
+
marginRight: "-18px",
|
|
16
15
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
17
|
-
marginLeft: "-"
|
|
16
|
+
marginLeft: "-18px",
|
|
18
17
|
marginBottom: 0,
|
|
19
18
|
paddingTop: "var(--ds-space-050, 4px)",
|
|
20
19
|
paddingBottom: "var(--ds-space-050, 4px)",
|
|
@@ -87,11 +86,18 @@ export var syncBlockStyles = css(_defineProperty({
|
|
|
87
86
|
'&::before': {
|
|
88
87
|
border: 'none'
|
|
89
88
|
}
|
|
90
|
-
})), "
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
})), ":has(.".concat(SyncBlockSharedCssClassName.error, ")"), _defineProperty({
|
|
90
|
+
backgroundColor: "var(--ds-background-disabled, #17171708)",
|
|
91
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
92
|
+
}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
93
|
+
opacity: 1,
|
|
94
|
+
visibility: 'visible',
|
|
95
|
+
backgroundColor: "var(--ds-surface, #FFFFFF)",
|
|
96
|
+
'&::before': {
|
|
97
|
+
border: 'none'
|
|
94
98
|
}
|
|
99
|
+
})), ":has(.".concat(SyncBlockSharedCssClassName.loading, ")"), _defineProperty({
|
|
100
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
|
|
95
101
|
}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
96
102
|
opacity: 0,
|
|
97
103
|
visibility: 'hidden'
|
|
@@ -102,10 +108,10 @@ export var syncBlockStyles = css(_defineProperty({
|
|
|
102
108
|
opacity: 0,
|
|
103
109
|
visibility: 'hidden'
|
|
104
110
|
})), ".".concat(BodiedSyncBlockSharedCssClassName.content), {
|
|
105
|
-
padding: '0
|
|
111
|
+
padding: '0 18px',
|
|
106
112
|
cursor: 'text'
|
|
107
113
|
}), ".".concat(SyncBlockSharedCssClassName.renderer), {
|
|
108
|
-
padding: '0
|
|
114
|
+
padding: '0 18px'
|
|
109
115
|
}))
|
|
110
116
|
}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
|
|
111
117
|
color: "var(--ds-text-subtle, #505258)",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "215.
|
|
2
|
+
export var version = "215.20.1";
|
|
@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
9
9
|
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
10
10
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
11
11
|
import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
|
|
12
|
+
import { type BasePlugin } from '@atlaskit/editor-plugins/base';
|
|
12
13
|
import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
|
|
13
14
|
import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
|
|
14
15
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -24,7 +25,7 @@ interface FullPageEditorContentAreaProps {
|
|
|
24
25
|
disabled: boolean | undefined;
|
|
25
26
|
dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
|
|
26
27
|
editorActions: EditorActions | undefined;
|
|
27
|
-
editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin
|
|
28
|
+
editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>, BasePlugin]> | undefined;
|
|
28
29
|
editorDOMElement: ReactElement;
|
|
29
30
|
editorView: EditorView;
|
|
30
31
|
eventDispatcher: EventDispatcher | undefined;
|
|
@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
|
|
|
13
13
|
export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
|
|
14
14
|
export declare const pragmaticResizerStyles: SerializedStyles;
|
|
15
15
|
export declare const pragmaticResizerStylesNew: SerializedStyles;
|
|
16
|
+
export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
|
|
16
17
|
export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;
|
|
@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
|
9
9
|
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
10
10
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
11
11
|
import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
|
|
12
|
+
import { type BasePlugin } from '@atlaskit/editor-plugins/base';
|
|
12
13
|
import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
|
|
13
14
|
import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
|
|
14
15
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
@@ -25,7 +26,8 @@ interface FullPageEditorContentAreaProps {
|
|
|
25
26
|
dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
|
|
26
27
|
editorActions: EditorActions | undefined;
|
|
27
28
|
editorAPI: PublicPluginAPI<[
|
|
28
|
-
OptionalPlugin<ContextPanelPlugin
|
|
29
|
+
OptionalPlugin<ContextPanelPlugin>,
|
|
30
|
+
BasePlugin
|
|
29
31
|
]> | undefined;
|
|
30
32
|
editorDOMElement: ReactElement;
|
|
31
33
|
editorView: EditorView;
|
|
@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
|
|
|
13
13
|
export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
|
|
14
14
|
export declare const pragmaticResizerStyles: SerializedStyles;
|
|
15
15
|
export declare const pragmaticResizerStylesNew: SerializedStyles;
|
|
16
|
+
export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
|
|
16
17
|
export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "215.20.
|
|
3
|
+
"version": "215.20.2",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@atlaskit/analytics-namespaced-context": "^7.2.0",
|
|
45
45
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
46
46
|
"@atlaskit/analytics-next-stable-react-context": "1.0.1",
|
|
47
|
-
"@atlaskit/button": "^23.
|
|
47
|
+
"@atlaskit/button": "^23.7.0",
|
|
48
48
|
"@atlaskit/css": "^0.17.0",
|
|
49
49
|
"@atlaskit/editor-json-transformer": "^8.31.0",
|
|
50
50
|
"@atlaskit/editor-performance-metrics": "^2.1.0",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
66
66
|
"@atlaskit/react-ufo": "^4.15.0",
|
|
67
67
|
"@atlaskit/task-decision": "^19.2.0",
|
|
68
|
-
"@atlaskit/tmp-editor-statsig": "^15.
|
|
68
|
+
"@atlaskit/tmp-editor-statsig": "^15.7.0",
|
|
69
69
|
"@atlaskit/tokens": "^8.4.0",
|
|
70
70
|
"@atlaskit/tooltip": "^20.11.0",
|
|
71
71
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
"@af/visual-regression": "workspace:^",
|
|
95
95
|
"@atlaskit/adf-utils": "^19.26.0",
|
|
96
96
|
"@atlaskit/analytics-listeners": "^9.1.0",
|
|
97
|
-
"@atlaskit/collab-provider": "^14.
|
|
97
|
+
"@atlaskit/collab-provider": "^14.2.0",
|
|
98
98
|
"@atlaskit/editor-plugin-annotation": "^6.3.0",
|
|
99
99
|
"@atlaskit/editor-plugin-card": "^11.5.0",
|
|
100
100
|
"@atlaskit/editor-plugin-list": "^8.2.0",
|
|
@@ -104,19 +104,18 @@
|
|
|
104
104
|
"@atlaskit/media-core": "^37.0.0",
|
|
105
105
|
"@atlaskit/media-integration-test-helpers": "workspace:^",
|
|
106
106
|
"@atlaskit/media-test-helpers": "^39.0.0",
|
|
107
|
-
"@atlaskit/modal-dialog": "^14.
|
|
107
|
+
"@atlaskit/modal-dialog": "^14.8.0",
|
|
108
108
|
"@atlaskit/renderer": "^124.17.0",
|
|
109
|
-
"@atlaskit/section-message": "^8.
|
|
109
|
+
"@atlaskit/section-message": "^8.10.0",
|
|
110
110
|
"@atlaskit/synchrony-test-helpers": "workspace:^",
|
|
111
|
-
"@atlaskit/toggle": "^15.
|
|
111
|
+
"@atlaskit/toggle": "^15.2.0",
|
|
112
112
|
"@atlaskit/util-data-test": "^18.3.0",
|
|
113
113
|
"@atlassian/adf-schema-json": "^1.31.0",
|
|
114
114
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
115
115
|
"@atlassian/search-provider": "^7.0.0",
|
|
116
116
|
"@emotion/jest": "^11.8.0",
|
|
117
117
|
"@storybook/addon-knobs": "^6.4.0",
|
|
118
|
-
"@testing-library/react": "^
|
|
119
|
-
"@testing-library/react-hooks": "^8.0.1",
|
|
118
|
+
"@testing-library/react": "^16.3.0",
|
|
120
119
|
"@types/diff": "^5.0.2",
|
|
121
120
|
"@types/is-number": "^7.0.0",
|
|
122
121
|
"@types/react-transition-group": "^2.0.6",
|