@atlaskit/editor-core 193.11.0 → 193.11.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 +6 -0
- package/dist/cjs/ui/ContentStyles/extension.js +15 -4
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/extension.js +27 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/extension.js +15 -4
- package/dist/esm/version-wrapper.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 193.11.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#93268](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93268) [`1b6c2eb2c1be`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b6c2eb2c1be) - [ux] Always show borders and labels for bodied extensions in new macro UX designs
|
|
8
|
+
|
|
3
9
|
## 193.11.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -9,13 +9,24 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
|
-
var _templateObject, _templateObject2;
|
|
13
|
-
//
|
|
14
|
-
var
|
|
12
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
13
|
+
// Bodied extensions have labels that need to be styled differently
|
|
14
|
+
var baseBodiedExtensionLabelStyles = (0, _react.css)({
|
|
15
|
+
borderBottom: 'none',
|
|
16
|
+
// Needs this exact number otherwise there will be a a noticeable gap
|
|
17
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
18
|
+
top: '-19px'
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
22
|
+
var bodiedExtensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.danger > span > div > .bodied.extension-label {\n border: 1px solid ", ";\n ", "\n }\n\n &:not(.danger).", "\n > span\n > div\n > .bodied.extension-label {\n border: 1px solid ", ";\n ", "\n }\n"])), "var(--ds-border-danger, ".concat(_colors.R400, ")"), baseBodiedExtensionLabelStyles, _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_colors.B400, ")"), baseBodiedExtensionLabelStyles);
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
25
|
+
var extensionLabelStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n ", "\n"])), "var(--ds-background-accent-red-subtler, ".concat(_colors.R200, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")"), bodiedExtensionLabelStyles);
|
|
15
26
|
var dangerOverlayStyles = (0, _react.css)({
|
|
16
27
|
opacity: 0.3,
|
|
17
28
|
backgroundColor: "var(--ds-background-danger-hovered, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")")
|
|
18
29
|
});
|
|
19
30
|
|
|
20
31
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
|
|
21
|
-
var extensionStyles = exports.extensionStyles = (0, _react.css)(
|
|
32
|
+
var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .multiBodiedExtensionView-content-wrap {\n &.danger > span > .multiBodiedExtension--container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .multiBodiedExtension--overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .multiBodiedExtension--container {\n ", "\n }\n }\n .multiBodiedExtension--container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n }\n\n .inlineExtensionView-content-wrap {\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n &.danger > span > .with-danger-overlay {\n // If the macro turned used to turn red before, not setting the background to be transparent will cause the\n // danger state to have two layers of red which we don't want.\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n ", "\n }\n\n .extensionView-content-wrap,\n .multiBodiedExtensionView-content-wrap,\n .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &.inline {\n word-wrap: break-all;\n }\n }\n\n .extensionView-content-wrap .extension-container {\n overflow: hidden;\n }\n\n .bodiedExtensionView-content-wrap\n .extensionView-content-wrap\n .extension-container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n\n [data-mark-type='fragment'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n }\n\n &:first-child {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n }\n }\n\n &:nth-last-of-type(-n + 2):not(:first-of-type) {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n }\n }\n }\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), extensionLabelStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
|
|
@@ -1,7 +1,31 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
3
3
|
import { B400, B50, R200, R400 } from '@atlaskit/theme/colors';
|
|
4
|
-
//
|
|
4
|
+
// Bodied extensions have labels that need to be styled differently
|
|
5
|
+
const baseBodiedExtensionLabelStyles = css({
|
|
6
|
+
borderBottom: 'none',
|
|
7
|
+
// Needs this exact number otherwise there will be a a noticeable gap
|
|
8
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
9
|
+
top: '-19px'
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
13
|
+
const bodiedExtensionLabelStyles = css`
|
|
14
|
+
&.danger > span > div > .bodied.extension-label {
|
|
15
|
+
border: 1px solid ${`var(--ds-border-danger, ${R400})`};
|
|
16
|
+
${baseBodiedExtensionLabelStyles}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:not(.danger).${akEditorSelectedNodeClassName}
|
|
20
|
+
> span
|
|
21
|
+
> div
|
|
22
|
+
> .bodied.extension-label {
|
|
23
|
+
border: 1px solid ${`var(--ds-border-selected, ${B400})`};
|
|
24
|
+
${baseBodiedExtensionLabelStyles}
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
5
29
|
const extensionLabelStyles = css`
|
|
6
30
|
&.danger > span > div > .extension-label {
|
|
7
31
|
background-color: ${`var(--ds-background-accent-red-subtler, ${R200})`};
|
|
@@ -17,6 +41,8 @@ const extensionLabelStyles = css`
|
|
|
17
41
|
color: ${`var(--ds-text-selected, ${B400})`};
|
|
18
42
|
opacity: 1;
|
|
19
43
|
}
|
|
44
|
+
|
|
45
|
+
${bodiedExtensionLabelStyles}
|
|
20
46
|
`;
|
|
21
47
|
const dangerOverlayStyles = css({
|
|
22
48
|
opacity: 0.3,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "193.11.
|
|
2
|
+
export const version = "193.11.2";
|
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
5
5
|
import { B400, B50, R200, R400 } from '@atlaskit/theme/colors';
|
|
6
|
-
//
|
|
7
|
-
var
|
|
6
|
+
// Bodied extensions have labels that need to be styled differently
|
|
7
|
+
var baseBodiedExtensionLabelStyles = css({
|
|
8
|
+
borderBottom: 'none',
|
|
9
|
+
// Needs this exact number otherwise there will be a a noticeable gap
|
|
10
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
11
|
+
top: '-19px'
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
15
|
+
var bodiedExtensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.danger > span > div > .bodied.extension-label {\n border: 1px solid ", ";\n ", "\n }\n\n &:not(.danger).", "\n > span\n > div\n > .bodied.extension-label {\n border: 1px solid ", ";\n ", "\n }\n"])), "var(--ds-border-danger, ".concat(R400, ")"), baseBodiedExtensionLabelStyles, akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(B400, ")"), baseBodiedExtensionLabelStyles);
|
|
16
|
+
|
|
17
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
18
|
+
var extensionLabelStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n ", "\n"])), "var(--ds-background-accent-red-subtler, ".concat(R200, ")"), "var(--ds-text-danger, ".concat(R400, ")"), akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-text-selected, ".concat(B400, ")"), bodiedExtensionLabelStyles);
|
|
8
19
|
var dangerOverlayStyles = css({
|
|
9
20
|
opacity: 0.3,
|
|
10
21
|
backgroundColor: "var(--ds-background-danger-hovered, ".concat(akEditorDeleteBackground, ")")
|
|
11
22
|
});
|
|
12
23
|
|
|
13
24
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
|
|
14
|
-
export var extensionStyles = css(
|
|
25
|
+
export var extensionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .multiBodiedExtensionView-content-wrap {\n &.danger > span > .multiBodiedExtension--container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .multiBodiedExtension--overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .multiBodiedExtension--container {\n ", "\n }\n }\n .multiBodiedExtension--container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n }\n\n .inlineExtensionView-content-wrap {\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n &.danger > span > .with-danger-overlay {\n // If the macro turned used to turn red before, not setting the background to be transparent will cause the\n // danger state to have two layers of red which we don't want.\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n ", "\n }\n\n .extensionView-content-wrap,\n .multiBodiedExtensionView-content-wrap,\n .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &.inline {\n word-wrap: break-all;\n }\n }\n\n .extensionView-content-wrap .extension-container {\n overflow: hidden;\n }\n\n .bodiedExtensionView-content-wrap\n .extensionView-content-wrap\n .extension-container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n\n [data-mark-type='fragment'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n }\n\n &:first-child {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n }\n }\n\n &:nth-last-of-type(-n + 2):not(:first-of-type) {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n }\n }\n }\n"])), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), dangerOverlayStyles, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), extensionLabelStyles, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, blockNodesVerticalMargin, blockNodesVerticalMargin);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "193.11.
|
|
2
|
+
export var version = "193.11.2";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "193.11.
|
|
3
|
+
"version": "193.11.2",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"@atlassian/adf-schema-json": "^1.0.7",
|
|
114
114
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
115
115
|
"@atlassian/link-picker-plugins": "^24.0.0",
|
|
116
|
-
"@atlassian/search-provider": "2.4.
|
|
116
|
+
"@atlassian/search-provider": "2.4.59",
|
|
117
117
|
"@atlassian/ufo": "^0.2.0",
|
|
118
118
|
"@emotion/jest": "^11.8.0",
|
|
119
119
|
"@storybook/addon-knobs": "^5.3.18",
|