@atlaskit/editor-core 192.4.6 → 192.5.0
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/.eslintrc.js +4 -0
- package/CHANGELOG.md +12 -0
- package/dist/cjs/ui/Appearance/Comment/Comment.js +2 -2
- package/dist/cjs/ui/Appearance/Comment/Toolbar.js +1 -2
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +108 -12
- package/dist/cjs/ui/ContentStyles/index.js +1 -1
- package/dist/cjs/ui/ContentStyles/layout.js +1 -1
- package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js +12 -4
- package/dist/cjs/ui/ToolbarFeedback/styles.js +50 -9
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/Comment/Comment.js +4 -5
- package/dist/es2019/ui/Appearance/Comment/Toolbar.js +0 -1
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +99 -124
- package/dist/es2019/ui/ContentStyles/index.js +2 -2
- package/dist/es2019/ui/ContentStyles/layout.js +1 -1
- package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js +9 -9
- package/dist/es2019/ui/ToolbarFeedback/styles.js +49 -49
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/Comment/Comment.js +3 -3
- package/dist/esm/ui/Appearance/Comment/Toolbar.js +0 -1
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +108 -12
- package/dist/esm/ui/ContentStyles/index.js +2 -2
- package/dist/esm/ui/ContentStyles/layout.js +1 -1
- package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js +10 -3
- package/dist/esm/ui/ToolbarFeedback/styles.js +50 -8
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-preset.d.ts +4 -0
- package/dist/types/presets/universal.d.ts +4 -0
- package/dist/types/presets/useUniversalPreset.d.ts +4 -0
- package/dist/types/ui/Addon/ClickAreaBlock/index.d.ts +2 -3
- package/dist/types/ui/Addon/ClickAreaInline/index.d.ts +3 -1
- package/dist/types/ui/Appearance/Comment/Toolbar.d.ts +3 -2
- package/dist/types-ts4.5/create-editor/create-preset.d.ts +4 -0
- package/dist/types-ts4.5/presets/universal.d.ts +4 -0
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +4 -0
- package/dist/types-ts4.5/ui/Addon/ClickAreaBlock/index.d.ts +2 -3
- package/dist/types-ts4.5/ui/Addon/ClickAreaInline/index.d.ts +3 -1
- package/dist/types-ts4.5/ui/Appearance/Comment/Toolbar.d.ts +3 -2
- package/package.json +2 -2
package/.eslintrc.js
CHANGED
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 192.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#77861](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77861) [`49524593045e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49524593045e) - [ux] Migrated to using tokens for colours and spacing in editor-core.
|
|
8
|
+
|
|
9
|
+
There are slight changes in spacing where there was a design token close to the current design such as:
|
|
10
|
+
|
|
11
|
+
- Comment padding (14px -> 12px)
|
|
12
|
+
- Layout margin (7px -> 8px)
|
|
13
|
+
- Toolbar margin (at certain widths) (15px -> 16px)
|
|
14
|
+
|
|
3
15
|
## 192.4.6
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -45,9 +45,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
45
45
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
46
46
|
var CommentEditorMargin = 14;
|
|
47
47
|
var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n\n .less-margin .ProseMirror {\n margin: ", " ", "\n ", ";\n }\n\n min-width: 272px;\n /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n height: auto;\n background-color: ", ";\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: ", "px;\n\n max-width: inherit;\n word-wrap: break-word;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, white)", "var(--ds-border, ".concat(_colors.N40, ")"), (0, _constants.borderRadius)());
|
|
48
|
-
var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n overflow-x: ", ";\n line-height: 24px;\n\n /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n .ProseMirror {\n margin: ", "
|
|
48
|
+
var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n overflow-x: ", ";\n line-height: 24px;\n\n /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n .ProseMirror {\n margin: ", ";\n }\n\n .gridParent {\n margin-left: ", "px;\n margin-right: ", "px;\n width: calc(100% + ", "px);\n }\n\n padding: ", ";\n\n ", ";\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden', "var(--ds-space-150, 12px)", CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, "var(--ds-space-250, 20px)", _commonStyles.tableCommentEditorStyles));
|
|
49
49
|
ContentArea.displayName = 'ContentArea';
|
|
50
|
-
var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n justify-content: flex-end;\n align-items: center;\n display: flex;\n padding: ", "
|
|
50
|
+
var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n justify-content: flex-end;\n align-items: center;\n display: flex;\n padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-025, 2px)");
|
|
51
51
|
var Editor = /*#__PURE__*/function (_React$Component) {
|
|
52
52
|
(0, _inherits2.default)(Editor, _React$Component);
|
|
53
53
|
var _super = _createSuper(Editor);
|
|
@@ -5,7 +5,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.mainToolbarCustomComponentsSlotStyle = exports.
|
|
8
|
+
exports.mainToolbarCustomComponentsSlotStyle = exports.MainToolbar = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -17,7 +17,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
|
17
17
|
/** @jsx jsx */
|
|
18
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
20
|
-
var TableControlsPadding = exports.TableControlsPadding = 20;
|
|
21
20
|
var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
|
|
22
21
|
var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
|
|
23
22
|
var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.sidebarArea = exports.positionedOverEditorStyle = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentArea = exports.ScrollContainer = void 0;
|
|
8
|
-
var
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
11
11
|
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
@@ -13,27 +13,83 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
|
13
13
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
14
|
var _ContentStyles = require("../../ContentStyles");
|
|
15
15
|
var _styles = require("../../styles");
|
|
16
|
-
var
|
|
16
|
+
var _ProseMirror;
|
|
17
17
|
var SWOOP_ANIMATION = "0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
|
|
18
18
|
var TOTAL_PADDING = _editorSharedStyles.akEditorGutterPadding * 2;
|
|
19
|
-
var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)(
|
|
20
|
-
|
|
19
|
+
var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)({
|
|
20
|
+
minWidth: '340px',
|
|
21
|
+
height: '100%',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: 'column',
|
|
24
|
+
boxSizing: 'border-box'
|
|
25
|
+
});
|
|
26
|
+
var scrollStyles = (0, _react.css)({
|
|
27
|
+
flexGrow: 1,
|
|
28
|
+
height: '100%',
|
|
29
|
+
overflowY: 'scroll',
|
|
30
|
+
position: 'relative',
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flexDirection: 'column',
|
|
33
|
+
scrollBehavior: 'smooth'
|
|
34
|
+
}, _styles.scrollbarStyles);
|
|
21
35
|
var ScrollContainer = exports.ScrollContainer = (0, _ContentStyles.createEditorContentStyle)(scrollStyles);
|
|
22
36
|
ScrollContainer.displayName = 'ScrollContainer';
|
|
23
37
|
|
|
24
38
|
// transition used to match scrollbar with config panel opening animation
|
|
25
39
|
// only use animation when opening as there is a bug with floating toolbars.
|
|
26
|
-
var positionedOverEditorStyle = exports.positionedOverEditorStyle = (0, _react.css)(
|
|
27
|
-
|
|
28
|
-
|
|
40
|
+
var positionedOverEditorStyle = exports.positionedOverEditorStyle = (0, _react.css)({
|
|
41
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
42
|
+
paddingRight: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
43
|
+
transition: "padding 500ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
|
|
44
|
+
'.fabric-editor-popup-scroll-parent': {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
46
|
+
paddingLeft: "".concat(_editorSharedStyles.akEditorContextPanelWidth, "px"),
|
|
47
|
+
transition: "padding 500ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier)
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
var contentArea = exports.contentArea = (0, _react.css)({
|
|
51
|
+
display: 'flex',
|
|
52
|
+
flexDirection: 'row',
|
|
53
|
+
height: "calc(100% - ".concat(_editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, ")"),
|
|
54
|
+
boxSizing: 'border-box',
|
|
55
|
+
margin: 0,
|
|
56
|
+
padding: 0,
|
|
57
|
+
transition: "padding 0ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier)
|
|
58
|
+
});
|
|
59
|
+
var sidebarArea = exports.sidebarArea = (0, _react.css)({
|
|
60
|
+
height: '100%',
|
|
61
|
+
boxSizing: 'border-box',
|
|
62
|
+
alignSelf: 'flex-end'
|
|
63
|
+
});
|
|
29
64
|
|
|
30
65
|
// initially hide until we have a containerWidth and can properly size them,
|
|
31
66
|
// otherwise they can cause the editor width to extend which is non-recoverable
|
|
32
|
-
var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0, _react.css)(
|
|
67
|
+
var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0, _react.css)({
|
|
68
|
+
'.fabric-editor--full-width-mode': {
|
|
69
|
+
'.pm-table-container, .code-block, .extension-container': {
|
|
70
|
+
display: 'none'
|
|
71
|
+
},
|
|
72
|
+
'.multiBodiedExtension--container': {
|
|
73
|
+
display: 'none'
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
});
|
|
33
77
|
|
|
34
78
|
/* Prevent horizontal scroll on page in full width mode */
|
|
35
79
|
var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
|
|
36
|
-
return (0, _react.css)(
|
|
80
|
+
return (0, _react.css)({
|
|
81
|
+
'.fabric-editor--full-width-mode': {
|
|
82
|
+
'.pm-table-container, .code-block, .extension-container': {
|
|
83
|
+
maxWidth: "".concat(containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, "px")
|
|
84
|
+
},
|
|
85
|
+
'.multiBodiedExtension--container': {
|
|
86
|
+
maxWidth: "".concat(containerWidth - TOTAL_PADDING - _consts.tableMarginFullWidthMode * 2, "px")
|
|
87
|
+
},
|
|
88
|
+
'[data-layout-section]': {
|
|
89
|
+
maxWidth: "".concat(containerWidth - TOTAL_PADDING + _editorSharedStyles.akLayoutGutterOffset * 2, "px")
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
});
|
|
37
93
|
};
|
|
38
94
|
var editorContentAreaStyle = exports.editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
39
95
|
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
@@ -42,7 +98,47 @@ var editorContentAreaStyle = exports.editorContentAreaStyle = function editorCon
|
|
|
42
98
|
return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
|
|
43
99
|
};
|
|
44
100
|
var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
|
|
45
|
-
return (0, _react.css)(
|
|
101
|
+
return (0, _react.css)({
|
|
102
|
+
maxWidth: "".concat(layoutMaxWidth + TOTAL_PADDING, "px")
|
|
103
|
+
});
|
|
46
104
|
};
|
|
47
|
-
var editorContentArea = (0, _react.css)(
|
|
48
|
-
|
|
105
|
+
var editorContentArea = (0, _react.css)({
|
|
106
|
+
lineHeight: '24px',
|
|
107
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
108
|
+
paddingTop: '50px',
|
|
109
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
110
|
+
paddingBottom: '55px',
|
|
111
|
+
height: 'calc( 100% - 105px )',
|
|
112
|
+
width: '100%',
|
|
113
|
+
margin: 'auto',
|
|
114
|
+
flexDirection: 'column',
|
|
115
|
+
flexGrow: 1,
|
|
116
|
+
maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth + TOTAL_PADDING, "px"),
|
|
117
|
+
transition: "max-width ".concat(SWOOP_ANIMATION),
|
|
118
|
+
'& .ProseMirror': (_ProseMirror = {
|
|
119
|
+
flexGrow: 1,
|
|
120
|
+
boxSizing: 'border-box',
|
|
121
|
+
'& > *': {
|
|
122
|
+
clear: 'both'
|
|
123
|
+
}
|
|
124
|
+
}, (0, _defineProperty2.default)(_ProseMirror, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
|
|
125
|
+
clear: 'none'
|
|
126
|
+
}), (0, _defineProperty2.default)(_ProseMirror, '> p:last-child', {
|
|
127
|
+
marginBottom: "var(--ds-space-300, 24px)"
|
|
128
|
+
}), _ProseMirror)
|
|
129
|
+
}, _commonStyles.tableFullPageEditorStyles, {
|
|
130
|
+
'.fabric-editor--full-width-mode': {
|
|
131
|
+
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
132
|
+
width: '100% !important'
|
|
133
|
+
},
|
|
134
|
+
'.fabric-editor-breakout-mark': {
|
|
135
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
136
|
+
marginLeft: 'unset !important',
|
|
137
|
+
transform: 'none !important'
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
var editorContentGutterStyle = exports.editorContentGutterStyle = (0, _react.css)({
|
|
142
|
+
boxSizing: 'border-box',
|
|
143
|
+
padding: "0 ".concat("var(--ds-space-400, 32px)")
|
|
144
|
+
});
|
|
@@ -38,7 +38,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
38
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
39
|
var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", "\n }\n"])), _styles.linkSharedStyle);
|
|
40
40
|
var ruleStyles = function ruleStyles() {
|
|
41
|
-
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", ";\n\n hr {\n cursor: pointer;\n padding: ", " 0;\n margin:
|
|
41
|
+
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", ";\n\n hr {\n cursor: pointer;\n padding: ", " 0;\n margin: ", " 0;\n background-clip: content-box;\n\n &.", " {\n outline: none;\n background-color: ", ";\n }\n }\n }\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
|
|
42
42
|
};
|
|
43
43
|
var mentionsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n &.", " [data-mention-id] > span {\n ", "\n\n /* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n }\n }\n\n .danger {\n .", ".", "\n > span\n > span\n > span {\n box-shadow: 0 0 0 ", "px ", ";\n background-color: ", ";\n }\n .", " > span > span > span {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(_colors.N500, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), "var(--ds-text-subtle, ".concat(_colors.N500, ")"));
|
|
44
44
|
var listsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n li {\n position: relative;\n\n > p:not(:first-child) {\n margin: ", " 0 0 0;\n }\n\n // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n // The following rule resets the first p tag back to its original margin\n // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n > style:first-child + p {\n margin-top: ", ";\n }\n }\n\n &:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n ", "\n }\n }\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
@@ -25,4 +25,4 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
|
25
25
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
26
26
|
var _colors = require("@atlaskit/theme/colors");
|
|
27
27
|
var _templateObject;
|
|
28
|
-
var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " [data-layout-section] {\n // TODO: Migrate away from gridSize\n // Recommendation: Replace directly with 7px\n margin: ", "
|
|
28
|
+
var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror {\n ", " [data-layout-section] {\n // TODO: Migrate away from gridSize\n // Recommendation: Replace directly with 7px\n margin: ", " -", "px 0;\n transition: border-color 0.3s ", ";\n cursor: pointer;\n\n /* Inner cursor located 26px from left */\n [data-layout-column] {\n flex: 1;\n min-width: 0;\n border: ", "px solid\n ", ";\n border-radius: 4px;\n padding: ", "px;\n box-sizing: border-box;\n\n > div {\n > :not(style):first-child,\n > style:first-child + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n margin-top: 0;\n }\n\n > .embedCardView-content-wrap:first-of-type .rich-media-item {\n margin-top: 0;\n }\n\n > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor.-right:first-child\n + .mediaSingleView-content-wrap\n .rich-media-item,\n > style:first-child\n + .ProseMirror-gapcursor.-right\n + .mediaSingleView-content-wrap\n .rich-media-item,\n > .ProseMirror-gapcursor.-right:first-of-type\n + .embedCardView-content-wrap\n .rich-media-item {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child\n + span\n + .mediaSingleView-content-wrap\n .rich-media-item,\n > style:first-child\n + .ProseMirror-gapcursor\n + span\n + .mediaSingleView-content-wrap\n .rich-media-item {\n margin-top: 0;\n }\n\n /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n > [data-node-type='decisionList'] {\n li:first-of-type [data-decision-wrapper] {\n margin-top: 0;\n }\n }\n }\n\n /* 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 [data-layout-content] {\n height: 100%;\n cursor: text;\n }\n }\n\n [data-layout-column] + [data-layout-column] {\n margin-left: ", "px;\n }\n\n @media screen and (max-width: ", "px) {\n [data-layout-column] + [data-layout-column] {\n margin-left: 0;\n }\n }\n\n // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n // https://product-fabric.atlassian.net/browse/DSP-4441\n /* Shows the border when cursor is inside a layout */\n &.selected [data-layout-column],\n &:hover [data-layout-column] {\n border: ", "px solid\n ", ";\n }\n\n &.selected.danger > [data-layout-column] {\n background-color: ", ";\n border-color: ", ";\n }\n\n &.", ":not(.danger) {\n [data-layout-column] {\n ", "\n }\n }\n }\n }\n\n .fabric-editor--full-width-mode .ProseMirror {\n [data-layout-section] {\n .", " {\n margin: 0 ", "px;\n }\n }\n }\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-bold, ".concat(_colors.N80A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-bold, ".concat(_colors.N90A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.ToolbarWithSizeDetector = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _react2 = require("@emotion/react");
|
|
14
14
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
@@ -18,11 +18,19 @@ var _hooks = require("./hooks");
|
|
|
18
18
|
var _Toolbar = require("./Toolbar");
|
|
19
19
|
var _toolbarSize = require("./toolbar-size");
|
|
20
20
|
var _types = require("./types");
|
|
21
|
-
var _templateObject;
|
|
22
|
-
/** @jsx jsx */
|
|
23
21
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
24
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
-
|
|
23
|
+
/** @jsx jsx */
|
|
24
|
+
|
|
25
|
+
var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
|
|
26
|
+
width: '100%',
|
|
27
|
+
position: 'relative'
|
|
28
|
+
}, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
|
|
29
|
+
gridColumn: '1 / 2',
|
|
30
|
+
gridRow: 2,
|
|
31
|
+
width: 'calc(100% - 30px)',
|
|
32
|
+
margin: "0 ".concat("var(--ds-space-200, 16px)")
|
|
33
|
+
}));
|
|
26
34
|
var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
|
|
27
35
|
var ref = /*#__PURE__*/_react.default.createRef();
|
|
28
36
|
var _React$useState = _react.default.useState(undefined),
|
|
@@ -1,19 +1,60 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.wrapper = exports.confirmationText = exports.confirmationPopup = exports.confirmationImg = exports.confirmationHeader = exports.buttonContent = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
7
|
var _react = require("@emotion/react");
|
|
10
8
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
10
|
var _constants = require("@atlaskit/theme/constants");
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var
|
|
11
|
+
var buttonContent = exports.buttonContent = (0, _react.css)({
|
|
12
|
+
display: 'flex',
|
|
13
|
+
height: '24px',
|
|
14
|
+
lineHeight: '24px',
|
|
15
|
+
minWidth: '70px'
|
|
16
|
+
});
|
|
17
|
+
var wrapper = exports.wrapper = (0, _react.css)({
|
|
18
|
+
display: 'flex',
|
|
19
|
+
marginRight: 0
|
|
20
|
+
});
|
|
21
|
+
var confirmationPopup = exports.confirmationPopup = (0, _react.css)({
|
|
22
|
+
background: "var(--ds-surface-overlay, #fff)",
|
|
23
|
+
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
|
|
24
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"),
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'column',
|
|
27
|
+
boxSizing: 'border-box',
|
|
28
|
+
overflow: 'auto',
|
|
29
|
+
maxHeight: 'none',
|
|
30
|
+
height: '410px',
|
|
31
|
+
width: '280px'
|
|
32
|
+
});
|
|
33
|
+
var confirmationText = exports.confirmationText = (0, _react.css)({
|
|
34
|
+
fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
|
|
35
|
+
wordSpacing: '4px',
|
|
36
|
+
lineHeight: '22px',
|
|
37
|
+
color: "var(--ds-text-subtle, ".concat(_colors.N400, ")"),
|
|
38
|
+
marginTop: "var(--ds-space-400, 32px)",
|
|
39
|
+
padding: "var(--ds-space-250, 20px)",
|
|
40
|
+
'& > div': {
|
|
41
|
+
width: '240px'
|
|
42
|
+
},
|
|
43
|
+
'& > div:first-of-type': {
|
|
44
|
+
marginBottom: "var(--ds-space-150, 12px)"
|
|
45
|
+
},
|
|
46
|
+
'& > div:nth-of-type(2)': {
|
|
47
|
+
marginBottom: "var(--ds-space-250, 20px)"
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
var confirmationHeader = exports.confirmationHeader = (0, _react.css)({
|
|
51
|
+
backgroundColor: "var(--ds-background-discovery-bold, ".concat(_colors.P400, ")"),
|
|
52
|
+
height: '100px',
|
|
53
|
+
width: '100%',
|
|
54
|
+
display: 'inline-block'
|
|
55
|
+
});
|
|
56
|
+
var confirmationImg = exports.confirmationImg = (0, _react.css)({
|
|
57
|
+
width: '100px',
|
|
58
|
+
display: 'block',
|
|
59
|
+
margin: "var(--ds-space-250, 24px)".concat(" auto 0 auto")
|
|
60
|
+
});
|
|
@@ -22,7 +22,7 @@ import { createEditorContentStyle } from '../../ContentStyles';
|
|
|
22
22
|
import PluginSlot from '../../PluginSlot';
|
|
23
23
|
import Toolbar from '../../Toolbar';
|
|
24
24
|
import WithFlash from '../../WithFlash';
|
|
25
|
-
import { MainToolbar, mainToolbarCustomComponentsSlotStyle
|
|
25
|
+
import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
|
|
26
26
|
const CommentEditorMargin = 14;
|
|
27
27
|
const commentEditorStyle = css`
|
|
28
28
|
display: flex;
|
|
@@ -54,8 +54,7 @@ const ContentArea = createEditorContentStyle(css`
|
|
|
54
54
|
/** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
|
|
55
55
|
/** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/
|
|
56
56
|
.ProseMirror {
|
|
57
|
-
margin: ${"var(--ds-space-150, 12px)"}
|
|
58
|
-
${CommentEditorMargin}px;
|
|
57
|
+
margin: ${"var(--ds-space-150, 12px)"};
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
.gridParent {
|
|
@@ -64,7 +63,7 @@ const ContentArea = createEditorContentStyle(css`
|
|
|
64
63
|
width: calc(100% + ${CommentEditorMargin - GRID_GUTTER}px);
|
|
65
64
|
}
|
|
66
65
|
|
|
67
|
-
padding: ${
|
|
66
|
+
padding: ${"var(--ds-space-250, 20px)"};
|
|
68
67
|
|
|
69
68
|
${tableCommentEditorStyles};
|
|
70
69
|
`);
|
|
@@ -74,7 +73,7 @@ const secondaryToolbarStyle = css`
|
|
|
74
73
|
justify-content: flex-end;
|
|
75
74
|
align-items: center;
|
|
76
75
|
display: flex;
|
|
77
|
-
padding: ${"var(--ds-space-150, 12px)"}
|
|
76
|
+
padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"};
|
|
78
77
|
`;
|
|
79
78
|
class Editor extends React.Component {
|
|
80
79
|
constructor(props) {
|
|
@@ -4,7 +4,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
4
4
|
import React, { useEffect, useState } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
|
|
7
|
-
export const TableControlsPadding = 20;
|
|
8
7
|
const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
|
|
9
8
|
const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
|
|
10
9
|
position: relative;
|