@atlaskit/editor-core 201.3.0 → 201.3.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 +24 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
- package/dist/cjs/ui/Appearance/FullPage/MainToolbar.js +2 -3
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +18 -24
- package/dist/cjs/ui/ContentStyles/layout.js +8 -3
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
- package/dist/es2019/ui/Appearance/FullPage/MainToolbar.js +3 -5
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +17 -23
- package/dist/es2019/ui/ContentStyles/layout.js +39 -4
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
- package/dist/esm/ui/Appearance/FullPage/MainToolbar.js +3 -4
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +17 -23
- package/dist/esm/ui/ContentStyles/layout.js +9 -4
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -0
- package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +2 -1
- package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -0
- package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +2 -1
- package/docs/1-legacy-editor.tsx +2 -2
- package/package.json +15 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 201.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#163855](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163855)
|
|
8
|
+
[`893dd8380fd30`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/893dd8380fd30) -
|
|
9
|
+
[ux] Cleaned up FF platform.confluence.frontend.narrow-full-page-editor-toolbar
|
|
10
|
+
- [#163761](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163761)
|
|
11
|
+
[`c011236dc90ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c011236dc90ec) -
|
|
12
|
+
NOISSUE: removes soft deleted examples from editor-core
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 201.3.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#162554](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162554)
|
|
20
|
+
[`bb0f938202ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb0f938202ca0) -
|
|
21
|
+
[ux] Advanced layout responsiveness in Editor
|
|
22
|
+
- [#162782](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162782)
|
|
23
|
+
[`c0ff2fca39e86`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c0ff2fca39e86) -
|
|
24
|
+
fix context panel issue with editor container size
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 201.3.0
|
|
4
28
|
|
|
5
29
|
### Minor Changes
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
|
|
8
|
+
exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _reactIntlNext = require("react-intl-next");
|
|
@@ -25,6 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
25
25
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
26
26
|
|
|
27
27
|
var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
28
|
+
var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
|
|
28
29
|
var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
29
30
|
var _contentAreaRef$curre;
|
|
30
31
|
var theme = (0, _react2.useTheme)();
|
|
@@ -46,15 +47,19 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
46
47
|
};
|
|
47
48
|
}, []);
|
|
48
49
|
return (0, _react2.jsx)("div", {
|
|
49
|
-
css: [
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
51
|
-
_StyledComponents.contentAreaContainerTypeInlineSize :
|
|
50
|
+
css: [
|
|
52
51
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
53
52
|
_StyledComponents.contentArea,
|
|
54
53
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
55
54
|
props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar],
|
|
56
55
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
57
56
|
ref: containerRef
|
|
57
|
+
}, (0, _react2.jsx)("div", {
|
|
58
|
+
css:
|
|
59
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
60
|
+
(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? _StyledComponents.contentAreaWrapper : _StyledComponents.contentAreaWrapperNoStyles,
|
|
61
|
+
"data-testid": EDITOR_CONTAINER,
|
|
62
|
+
"data-editor-container": (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 'true' : 'false'
|
|
58
63
|
}, (0, _react2.jsx)(_StyledComponents.ScrollContainer
|
|
59
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
60
65
|
, {
|
|
@@ -97,7 +102,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
97
102
|
containerElement: scrollContainerRef.current,
|
|
98
103
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
99
104
|
wrapperElement: props.wrapperElement
|
|
100
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
|
|
105
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), (0, _react2.jsx)("div", {
|
|
101
106
|
css: _StyledComponents.sidebarArea
|
|
102
107
|
}, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
|
|
103
108
|
editorAPI: props.editorAPI,
|
|
@@ -16,8 +16,7 @@ var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAK
|
|
|
16
16
|
// box-shadow is overriden by the mainToolbar
|
|
17
17
|
var mainToolbarWithKeyline = (0, _react.css)({
|
|
18
18
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
19
|
-
boxShadow:
|
|
20
|
-
"0 ".concat(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
|
|
19
|
+
boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"
|
|
21
20
|
});
|
|
22
21
|
var mainToolbarTwoLineStyle = function mainToolbarTwoLineStyle() {
|
|
23
22
|
var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
|
|
@@ -40,7 +39,7 @@ var mainToolbar = function mainToolbar() {
|
|
|
40
39
|
alignItems: 'center',
|
|
41
40
|
boxShadow: 'none',
|
|
42
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
43
|
-
borderBottom:
|
|
42
|
+
borderBottom: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
44
43
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
45
44
|
transition: "box-shadow 200ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
46
45
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -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.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.
|
|
7
|
+
exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaWrapperNoStyles = exports.contentAreaWrapper = exports.contentAreaHeightNoToolbar = exports.contentArea = exports.ScrollContainer = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
@@ -61,29 +61,23 @@ var contentArea = exports.contentArea = function contentArea() {
|
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
65
|
-
var
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
// The browser should apply the bewlo properties to the element.
|
|
82
|
-
// However, for reasons that goes beyond my knowledge.
|
|
83
|
-
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
84
|
-
contain: 'layout style inline-size'
|
|
85
|
-
});
|
|
86
|
-
};
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
65
|
+
var contentAreaWrapper = exports.contentAreaWrapper = (0, _react.css)({
|
|
66
|
+
width: '100%',
|
|
67
|
+
containerType: 'inline-size',
|
|
68
|
+
containerName: 'editor-area',
|
|
69
|
+
// Chrome 129 Regression!
|
|
70
|
+
// By the spec, when the container-type: inline-size is used
|
|
71
|
+
// The browser should apply the bewlo properties to the element.
|
|
72
|
+
// However, for reasons that goes beyond my knowledge.
|
|
73
|
+
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
74
|
+
contain: 'layout style inline-size'
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
78
|
+
var contentAreaWrapperNoStyles = exports.contentAreaWrapperNoStyles = (0, _react.css)({
|
|
79
|
+
display: 'contents'
|
|
80
|
+
});
|
|
87
81
|
|
|
88
82
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
89
83
|
var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react.css)({
|
|
@@ -25,7 +25,7 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
|
25
25
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
26
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
27
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
28
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
28
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
29
29
|
var isPreRelease2 = function isPreRelease2() {
|
|
30
30
|
return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
|
|
31
31
|
};
|
|
@@ -41,10 +41,15 @@ var layoutColumnStyles = function layoutColumnStyles() {
|
|
|
41
41
|
(0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
42
42
|
(0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
|
|
43
43
|
};
|
|
44
|
+
var layoutSectionStyles = function layoutSectionStyles() {
|
|
45
|
+
return (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
46
|
+
(0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
47
|
+
(0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t"])), _styles.columnLayoutSharedStyle);
|
|
48
|
+
};
|
|
44
49
|
|
|
45
50
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
46
51
|
var layoutBorderStyles = function layoutBorderStyles(viewMode) {
|
|
47
|
-
return (0, _react.css)(
|
|
52
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, isPreRelease2() ?
|
|
48
53
|
/* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
|
|
49
54
|
see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
|
|
50
55
|
*/
|
|
@@ -53,5 +58,5 @@ var layoutBorderStyles = function layoutBorderStyles(viewMode) {
|
|
|
53
58
|
|
|
54
59
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
55
60
|
var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
|
|
56
|
-
return (0, _react.css)(
|
|
61
|
+
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\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.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, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".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}"));
|
|
57
62
|
};
|
|
@@ -13,8 +13,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
13
13
|
import { ClickAreaBlock } from '../../Addon';
|
|
14
14
|
import { ContextPanel } from '../../ContextPanel';
|
|
15
15
|
import PluginSlot from '../../PluginSlot';
|
|
16
|
-
import { contentArea,
|
|
16
|
+
import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, contentAreaWrapperNoStyles, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
|
|
17
17
|
export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
18
|
+
export const EDITOR_CONTAINER = 'ak-editor-container';
|
|
18
19
|
const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
19
20
|
var _contentAreaRef$curre;
|
|
20
21
|
const theme = useTheme();
|
|
@@ -34,15 +35,19 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
34
35
|
}
|
|
35
36
|
}), []);
|
|
36
37
|
return jsx("div", {
|
|
37
|
-
css: [
|
|
38
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
39
|
-
contentAreaContainerTypeInlineSize :
|
|
38
|
+
css: [
|
|
40
39
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
41
40
|
contentArea,
|
|
42
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
43
42
|
props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
44
43
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
45
44
|
ref: containerRef
|
|
45
|
+
}, jsx("div", {
|
|
46
|
+
css:
|
|
47
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
48
|
+
fg('platform_editor_breakout_use_css') ? contentAreaWrapper : contentAreaWrapperNoStyles,
|
|
49
|
+
"data-testid": EDITOR_CONTAINER,
|
|
50
|
+
"data-editor-container": fg('platform_editor_breakout_use_css') ? 'true' : 'false'
|
|
46
51
|
}, jsx(ScrollContainer
|
|
47
52
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
48
53
|
, {
|
|
@@ -85,7 +90,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
85
90
|
containerElement: scrollContainerRef.current,
|
|
86
91
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
87
92
|
wrapperElement: props.wrapperElement
|
|
88
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
|
|
93
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
|
|
89
94
|
css: sidebarArea
|
|
90
95
|
}, props.contextPanel || jsx(ContextPanel, {
|
|
91
96
|
editorAPI: props.editorAPI,
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier,
|
|
3
|
+
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
|
|
6
6
|
|
|
7
7
|
// box-shadow is overriden by the mainToolbar
|
|
8
8
|
const mainToolbarWithKeyline = css({
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
10
|
-
boxShadow:
|
|
11
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
12
|
-
`0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"}`
|
|
10
|
+
boxShadow: `${"var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"}`
|
|
13
11
|
});
|
|
14
12
|
const mainToolbarTwoLineStyle = () => {
|
|
15
13
|
const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
|
|
@@ -35,7 +33,7 @@ const mainToolbar = () => {
|
|
|
35
33
|
alignItems: 'center',
|
|
36
34
|
boxShadow: 'none',
|
|
37
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
38
|
-
borderBottom:
|
|
36
|
+
borderBottom: `1px solid ${"var(--ds-border, #091E4224)"}`,
|
|
39
37
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
40
38
|
transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
|
|
41
39
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -52,29 +52,23 @@ export const contentArea = () => {
|
|
|
52
52
|
});
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
56
|
-
export const
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
// The browser should apply the bewlo properties to the element.
|
|
73
|
-
// However, for reasons that goes beyond my knowledge.
|
|
74
|
-
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
75
|
-
contain: 'layout style inline-size'
|
|
76
|
-
});
|
|
77
|
-
};
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
56
|
+
export const contentAreaWrapper = css({
|
|
57
|
+
width: '100%',
|
|
58
|
+
containerType: 'inline-size',
|
|
59
|
+
containerName: 'editor-area',
|
|
60
|
+
// Chrome 129 Regression!
|
|
61
|
+
// By the spec, when the container-type: inline-size is used
|
|
62
|
+
// The browser should apply the bewlo properties to the element.
|
|
63
|
+
// However, for reasons that goes beyond my knowledge.
|
|
64
|
+
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
65
|
+
contain: 'layout style inline-size'
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
69
|
+
export const contentAreaWrapperNoStyles = css({
|
|
70
|
+
display: 'contents'
|
|
71
|
+
});
|
|
78
72
|
|
|
79
73
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
80
74
|
export const contentAreaHeightNoToolbar = css({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
|
-
import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
3
|
+
import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
4
4
|
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
5
5
|
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
6
6
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
@@ -73,6 +73,42 @@ css`
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
`;
|
|
76
|
+
const layoutSectionStyles = () => fg('platform_editor_advanced_layouts_breakout_resizing') ?
|
|
77
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
78
|
+
css`
|
|
79
|
+
${columnLayoutResponsiveSharedStyle};
|
|
80
|
+
.layout-section-container [data-layout-section] {
|
|
81
|
+
> .ProseMirror-widget {
|
|
82
|
+
flex: none;
|
|
83
|
+
display: contents !important;
|
|
84
|
+
|
|
85
|
+
&[data-blocks-drag-handle-container] div {
|
|
86
|
+
display: contents !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&[data-blocks-drop-target-container] {
|
|
90
|
+
display: block !important;
|
|
91
|
+
margin: ${"var(--ds-space-negative-050, -4px)"};
|
|
92
|
+
|
|
93
|
+
[data-drop-target-for-element] {
|
|
94
|
+
position: absolute;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
& + [data-layout-column] {
|
|
99
|
+
margin: 0;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
> [data-layout-column] {
|
|
104
|
+
margin: 0;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
` :
|
|
108
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
109
|
+
css`
|
|
110
|
+
${columnLayoutSharedStyle}
|
|
111
|
+
`;
|
|
76
112
|
|
|
77
113
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
78
114
|
const layoutBorderStyles = viewMode => css`
|
|
@@ -106,8 +142,7 @@ see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
|
|
|
106
142
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
107
143
|
export const layoutStyles = viewMode => css`
|
|
108
144
|
.ProseMirror {
|
|
109
|
-
${
|
|
110
|
-
|
|
145
|
+
${layoutSectionStyles()}
|
|
111
146
|
[data-layout-section] {
|
|
112
147
|
// TODO: Migrate away from gridSize
|
|
113
148
|
// Recommendation: Replace directly with 7px
|
|
@@ -202,7 +237,7 @@ export const layoutStyles = viewMode => css`
|
|
|
202
237
|
}
|
|
203
238
|
}
|
|
204
239
|
|
|
205
|
-
${editorExperiment('nested-dnd', true) && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
|
|
240
|
+
${editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
|
|
206
241
|
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + 8}px 0;
|
|
207
242
|
}`}
|
|
208
243
|
`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "201.3.
|
|
2
|
+
export const version = "201.3.2";
|
|
@@ -13,8 +13,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
13
13
|
import { ClickAreaBlock } from '../../Addon';
|
|
14
14
|
import { ContextPanel } from '../../ContextPanel';
|
|
15
15
|
import PluginSlot from '../../PluginSlot';
|
|
16
|
-
import { contentArea,
|
|
16
|
+
import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, contentAreaWrapperNoStyles, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
|
|
17
17
|
export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
18
|
+
export var EDITOR_CONTAINER = 'ak-editor-container';
|
|
18
19
|
var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
19
20
|
var _contentAreaRef$curre;
|
|
20
21
|
var theme = useTheme();
|
|
@@ -36,15 +37,19 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
36
37
|
};
|
|
37
38
|
}, []);
|
|
38
39
|
return jsx("div", {
|
|
39
|
-
css: [
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
41
|
-
contentAreaContainerTypeInlineSize :
|
|
40
|
+
css: [
|
|
42
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
43
42
|
contentArea,
|
|
44
43
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
45
44
|
props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
46
45
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
47
46
|
ref: containerRef
|
|
47
|
+
}, jsx("div", {
|
|
48
|
+
css:
|
|
49
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
50
|
+
fg('platform_editor_breakout_use_css') ? contentAreaWrapper : contentAreaWrapperNoStyles,
|
|
51
|
+
"data-testid": EDITOR_CONTAINER,
|
|
52
|
+
"data-editor-container": fg('platform_editor_breakout_use_css') ? 'true' : 'false'
|
|
48
53
|
}, jsx(ScrollContainer
|
|
49
54
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
50
55
|
, {
|
|
@@ -87,7 +92,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
87
92
|
containerElement: scrollContainerRef.current,
|
|
88
93
|
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
89
94
|
wrapperElement: props.wrapperElement
|
|
90
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
|
|
95
|
+
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
|
|
91
96
|
css: sidebarArea
|
|
92
97
|
}, props.contextPanel || jsx(ContextPanel, {
|
|
93
98
|
editorAPI: props.editorAPI,
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
|
-
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier,
|
|
4
|
+
import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
|
|
7
7
|
|
|
8
8
|
// box-shadow is overriden by the mainToolbar
|
|
9
9
|
var mainToolbarWithKeyline = css({
|
|
10
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
11
|
-
boxShadow:
|
|
12
|
-
"0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
|
|
11
|
+
boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"
|
|
13
12
|
});
|
|
14
13
|
var mainToolbarTwoLineStyle = function mainToolbarTwoLineStyle() {
|
|
15
14
|
var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
|
|
@@ -32,7 +31,7 @@ var mainToolbar = function mainToolbar() {
|
|
|
32
31
|
alignItems: 'center',
|
|
33
32
|
boxShadow: 'none',
|
|
34
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
35
|
-
borderBottom:
|
|
34
|
+
borderBottom: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
36
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
37
36
|
transition: "box-shadow 200ms ".concat(akEditorSwoopCubicBezier),
|
|
38
37
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -56,29 +56,23 @@ export var contentArea = function contentArea() {
|
|
|
56
56
|
});
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
60
|
-
export var
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
// The browser should apply the bewlo properties to the element.
|
|
77
|
-
// However, for reasons that goes beyond my knowledge.
|
|
78
|
-
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
79
|
-
contain: 'layout style inline-size'
|
|
80
|
-
});
|
|
81
|
-
};
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
60
|
+
export var contentAreaWrapper = css({
|
|
61
|
+
width: '100%',
|
|
62
|
+
containerType: 'inline-size',
|
|
63
|
+
containerName: 'editor-area',
|
|
64
|
+
// Chrome 129 Regression!
|
|
65
|
+
// By the spec, when the container-type: inline-size is used
|
|
66
|
+
// The browser should apply the bewlo properties to the element.
|
|
67
|
+
// However, for reasons that goes beyond my knowledge.
|
|
68
|
+
// Chrome 129 broke that behavior, and now we need to make it explicity.
|
|
69
|
+
contain: 'layout style inline-size'
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
73
|
+
export var contentAreaWrapperNoStyles = css({
|
|
74
|
+
display: 'contents'
|
|
75
|
+
});
|
|
82
76
|
|
|
83
77
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
84
78
|
export var contentAreaHeightNoToolbar = css({
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
3
3
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
|
-
import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
5
|
+
import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
7
7
|
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
8
8
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
@@ -24,10 +24,15 @@ var layoutColumnStyles = function layoutColumnStyles() {
|
|
|
24
24
|
css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
25
25
|
css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
|
|
26
26
|
};
|
|
27
|
+
var layoutSectionStyles = function layoutSectionStyles() {
|
|
28
|
+
return fg('platform_editor_advanced_layouts_breakout_resizing') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
29
|
+
css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
30
|
+
css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
|
|
31
|
+
};
|
|
27
32
|
|
|
28
33
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
29
34
|
var layoutBorderStyles = function layoutBorderStyles(viewMode) {
|
|
30
|
-
return css(
|
|
35
|
+
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, isPreRelease2() ?
|
|
31
36
|
/* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
|
|
32
37
|
see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
|
|
33
38
|
*/
|
|
@@ -36,5 +41,5 @@ var layoutBorderStyles = function layoutBorderStyles(viewMode) {
|
|
|
36
41
|
|
|
37
42
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
38
43
|
export var layoutStyles = function layoutStyles(viewMode) {
|
|
39
|
-
return css(
|
|
44
|
+
return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\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.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, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".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}"));
|
|
40
45
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "201.3.
|
|
2
|
+
export var version = "201.3.2";
|
|
@@ -39,6 +39,7 @@ interface FullPageEditorContentAreaProps {
|
|
|
39
39
|
isEditorToolbarHidden?: boolean;
|
|
40
40
|
}
|
|
41
41
|
export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
|
|
42
|
+
export declare const EDITOR_CONTAINER = "ak-editor-container";
|
|
42
43
|
export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>>, "key" | "children" | keyof FullPageEditorContentAreaProps | "forwardedRef"> & React.RefAttributes<any>> & {
|
|
43
44
|
WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>;
|
|
44
45
|
};
|
|
@@ -14,7 +14,8 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
|
|
|
14
14
|
typographyTheme?: "typography" | "typography-adg3" | "typography-modernized" | "typography-refreshed" | undefined;
|
|
15
15
|
} | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const contentArea: () => import("@emotion/react").SerializedStyles;
|
|
17
|
-
export declare const
|
|
17
|
+
export declare const contentAreaWrapper: import("@emotion/react").SerializedStyles;
|
|
18
|
+
export declare const contentAreaWrapperNoStyles: import("@emotion/react").SerializedStyles;
|
|
18
19
|
export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
|
|
19
20
|
export declare const sidebarArea: import("@emotion/react").SerializedStyles;
|
|
20
21
|
export declare const editorContentAreaHideContainer: import("@emotion/react").SerializedStyles;
|
|
@@ -41,6 +41,7 @@ interface FullPageEditorContentAreaProps {
|
|
|
41
41
|
isEditorToolbarHidden?: boolean;
|
|
42
42
|
}
|
|
43
43
|
export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
|
|
44
|
+
export declare const EDITOR_CONTAINER = "ak-editor-container";
|
|
44
45
|
export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>>, "key" | "children" | keyof FullPageEditorContentAreaProps | "forwardedRef"> & React.RefAttributes<any>> & {
|
|
45
46
|
WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>;
|
|
46
47
|
};
|
|
@@ -14,7 +14,8 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
|
|
|
14
14
|
typographyTheme?: "typography" | "typography-adg3" | "typography-modernized" | "typography-refreshed" | undefined;
|
|
15
15
|
} | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const contentArea: () => import("@emotion/react").SerializedStyles;
|
|
17
|
-
export declare const
|
|
17
|
+
export declare const contentAreaWrapper: import("@emotion/react").SerializedStyles;
|
|
18
|
+
export declare const contentAreaWrapperNoStyles: import("@emotion/react").SerializedStyles;
|
|
18
19
|
export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
|
|
19
20
|
export declare const sidebarArea: import("@emotion/react").SerializedStyles;
|
|
20
21
|
export declare const editorContentAreaHideContainer: import("@emotion/react").SerializedStyles;
|
package/docs/1-legacy-editor.tsx
CHANGED
|
@@ -252,9 +252,9 @@ ${code`
|
|
|
252
252
|
${(
|
|
253
253
|
<Example
|
|
254
254
|
packageName="@atlaskit/editor-core"
|
|
255
|
-
Component={require('../examples/1-basic').default}
|
|
255
|
+
Component={require('../examples/1-basic-composable-editor').default}
|
|
256
256
|
title="Basic"
|
|
257
|
-
source={require('!!raw-loader!../examples/1-basic')}
|
|
257
|
+
source={require('!!raw-loader!../examples/1-basic-composable-editor')}
|
|
258
258
|
/>
|
|
259
259
|
)}
|
|
260
260
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "201.3.
|
|
3
|
+
"version": "201.3.2",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
44
44
|
"@atlaskit/analytics-next-stable-react-context": "1.0.1",
|
|
45
45
|
"@atlaskit/button": "^20.3.0",
|
|
46
|
-
"@atlaskit/editor-common": "^94.
|
|
46
|
+
"@atlaskit/editor-common": "^94.19.0",
|
|
47
47
|
"@atlaskit/editor-json-transformer": "^8.21.0",
|
|
48
48
|
"@atlaskit/editor-plugin-quick-insert": "1.7.0",
|
|
49
49
|
"@atlaskit/editor-plugins": "^5.6.0",
|
|
@@ -51,11 +51,11 @@
|
|
|
51
51
|
"@atlaskit/editor-shared-styles": "^3.2.0",
|
|
52
52
|
"@atlaskit/emoji": "^67.9.0",
|
|
53
53
|
"@atlaskit/icon": "^22.24.0",
|
|
54
|
-
"@atlaskit/media-card": "^78.
|
|
54
|
+
"@atlaskit/media-card": "^78.13.0",
|
|
55
55
|
"@atlaskit/mention": "^23.3.0",
|
|
56
56
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
57
57
|
"@atlaskit/task-decision": "^17.11.0",
|
|
58
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
58
|
+
"@atlaskit/tmp-editor-statsig": "^2.14.0",
|
|
59
59
|
"@atlaskit/tokens": "^2.2.0",
|
|
60
60
|
"@atlaskit/tooltip": "^18.9.0",
|
|
61
61
|
"@atlaskit/width-detector": "^4.3.0",
|
|
@@ -99,13 +99,13 @@
|
|
|
99
99
|
"@atlaskit/smart-card": "^30.2.0",
|
|
100
100
|
"@atlaskit/synchrony-test-helpers": "^2.5.0",
|
|
101
101
|
"@atlaskit/toggle": "^13.4.0",
|
|
102
|
-
"@atlaskit/util-data-test": "^17.
|
|
102
|
+
"@atlaskit/util-data-test": "^17.13.0",
|
|
103
103
|
"@atlaskit/visual-regression": "*",
|
|
104
104
|
"@atlassian/adf-schema-json": "^1.22.0",
|
|
105
105
|
"@atlassian/feature-flags-test-utils": "*",
|
|
106
|
-
"@atlassian/search-provider": "2.4.
|
|
106
|
+
"@atlassian/search-provider": "2.4.165",
|
|
107
107
|
"@emotion/jest": "^11.8.0",
|
|
108
|
-
"@storybook/addon-knobs": "^
|
|
108
|
+
"@storybook/addon-knobs": "^6.4.0",
|
|
109
109
|
"@testing-library/react": "^12.1.5",
|
|
110
110
|
"@testing-library/react-hooks": "^8.0.1",
|
|
111
111
|
"@types/diff": "^5.0.2",
|
|
@@ -175,9 +175,6 @@
|
|
|
175
175
|
"type": "boolean",
|
|
176
176
|
"referenceOnly": "true"
|
|
177
177
|
},
|
|
178
|
-
"platform.confluence.frontend.narrow-full-page-editor-toolbar": {
|
|
179
|
-
"type": "boolean"
|
|
180
|
-
},
|
|
181
178
|
"platform_editor_core_increase_full_page_guttering": {
|
|
182
179
|
"type": "boolean"
|
|
183
180
|
},
|
|
@@ -318,6 +315,10 @@
|
|
|
318
315
|
"platform_editor_disable_rerender_tracking_jira": {
|
|
319
316
|
"type": "boolean"
|
|
320
317
|
},
|
|
318
|
+
"platform_editor_ed-25557_lnv_add_ssr_placeholder": {
|
|
319
|
+
"type": "boolean",
|
|
320
|
+
"referenceOnly": true
|
|
321
|
+
},
|
|
321
322
|
"platform_editor_replace_finddomnode_in_common": {
|
|
322
323
|
"type": "boolean",
|
|
323
324
|
"referenceOnly": true
|
|
@@ -334,6 +335,10 @@
|
|
|
334
335
|
"type": "boolean",
|
|
335
336
|
"referenceOnly": true
|
|
336
337
|
},
|
|
338
|
+
"platform_editor_use_nested_table_pm_nodes": {
|
|
339
|
+
"type": "boolean",
|
|
340
|
+
"referenceOnly": true
|
|
341
|
+
},
|
|
337
342
|
"platform_editor_inline_resize_media_to_edge": {
|
|
338
343
|
"type": "boolean",
|
|
339
344
|
"referenceOnly": true
|