@atlaskit/editor-core 207.10.1 → 207.11.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/CHANGELOG.md +13 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +10 -3
- package/dist/cjs/ui/EditorContentContainer/styles/smartCardStyles.js +155 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +10 -5
- package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js +219 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +11 -4
- package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js +147 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/smartCardStyles.d.ts +13 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/smartCardStyles.d.ts +13 -0
- package/package.json +2 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.11.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#159906](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159906)
|
|
8
|
+
[`022ee65a8f41a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/022ee65a8f41a) -
|
|
9
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor smart card CSS
|
|
10
|
+
in static emotion
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 207.10.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -49,6 +49,7 @@ var _paragraphStyles = require("./styles/paragraphStyles");
|
|
|
49
49
|
var _resizerStyles = require("./styles/resizerStyles");
|
|
50
50
|
var _rule = require("./styles/rule");
|
|
51
51
|
var _shadowStyles = require("./styles/shadowStyles");
|
|
52
|
+
var _smartCardStyles = require("./styles/smartCardStyles");
|
|
52
53
|
var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
|
|
53
54
|
var _textColorStyles = require("./styles/textColorStyles");
|
|
54
55
|
var _unsupportedStyles = require("./styles/unsupportedStyles");
|
|
@@ -151,7 +152,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
151
152
|
|
|
152
153
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
153
154
|
var contentStyles = function contentStyles() {
|
|
154
|
-
return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n
|
|
155
|
+
return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
155
156
|
exposure: false
|
|
156
157
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
157
158
|
exposure: false
|
|
@@ -165,7 +166,7 @@ var contentStyles = function contentStyles() {
|
|
|
165
166
|
exposure: false
|
|
166
167
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
167
168
|
exposure: false
|
|
168
|
-
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles,
|
|
169
|
+
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
169
170
|
};
|
|
170
171
|
var CommentEditorMargin = 14;
|
|
171
172
|
|
|
@@ -235,7 +236,13 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
235
236
|
ref: ref,
|
|
236
237
|
css: [contentStyles(),
|
|
237
238
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
238
|
-
(0, _layout.layoutBaseStyles)(), (0,
|
|
239
|
+
(0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') ?
|
|
240
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
241
|
+
_smartCardStyles.smartLinksInLivePagesStyles :
|
|
242
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
243
|
+
_smartCardStyles.smartLinksInLivePagesStylesOld, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') &&
|
|
244
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
245
|
+
_smartCardStyles.linkingVisualRefreshV1Styles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
|
|
239
246
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
240
247
|
_dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
|
|
241
248
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.smartLinksInLivePagesStylesOld = exports.smartLinksInLivePagesStyles = exports.smartCardStyles = exports.linkingVisualRefreshV1Styles = exports.SmartCardSharedCssClassName = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _selectionStyles = require("./selectionStyles");
|
|
11
|
+
// eslint-disable-line
|
|
12
|
+
|
|
13
|
+
var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
|
|
14
|
+
var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
|
|
15
|
+
var SmartCardSharedCssClassName = exports.SmartCardSharedCssClassName = {
|
|
16
|
+
INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
|
|
17
|
+
BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
|
|
18
|
+
EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
|
|
19
|
+
DATASOURCE_CONTAINER: 'datasourceView-content-wrap',
|
|
20
|
+
LOADER_WRAPPER: 'loader-wrapper'
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
24
|
+
var smartCardStyles = exports.smartCardStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.INLINE_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
25
|
+
maxWidth: 'calc(100% - 20px)',
|
|
26
|
+
verticalAlign: 'top',
|
|
27
|
+
wordBreak: 'break-all',
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
29
|
+
'.card-with-comment': {
|
|
30
|
+
background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
31
|
+
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
|
|
32
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
|
|
33
|
+
},
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
35
|
+
'.card': (0, _defineProperty2.default)({
|
|
36
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
37
|
+
paddingRight: "var(--ds-space-025, 2px)",
|
|
38
|
+
paddingTop: "var(--ds-space-100, 0.5em)",
|
|
39
|
+
paddingBottom: "var(--ds-space-100, 0.5em)",
|
|
40
|
+
marginBottom: "var(--ds-space-negative-100, -0.5em)"
|
|
41
|
+
}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a:focus"), [
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
43
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
45
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles])
|
|
46
|
+
}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), [
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
48
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
50
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles]), ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
|
|
51
|
+
// EDM-1717: box-shadow Safari fix start
|
|
52
|
+
zIndex: 1,
|
|
53
|
+
position: 'relative'
|
|
54
|
+
}), '&.danger', (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
|
|
55
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
|
|
56
|
+
// EDM-1717: box-shadow Safari fix start
|
|
57
|
+
zIndex: 2
|
|
58
|
+
// EDM-1717: box-shadow Safari fix end
|
|
59
|
+
}))), ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
60
|
+
display: 'block',
|
|
61
|
+
margin: '0.75rem 0 0',
|
|
62
|
+
maxWidth: "".concat(8 * 95, "px")
|
|
63
|
+
}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), [
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
65
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
67
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles, {
|
|
68
|
+
borderRadius: "var(--ds-border-radius-200, 8px)"
|
|
69
|
+
}]), '&.danger', (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
70
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
71
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
|
|
72
|
+
}))), ".".concat(SmartCardSharedCssClassName.DATASOURCE_CONTAINER, ".").concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
73
|
+
maxWidth: '100%',
|
|
74
|
+
display: 'flex',
|
|
75
|
+
justifyContent: 'center'
|
|
76
|
+
}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
|
|
77
|
+
cursor: 'pointer',
|
|
78
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
79
|
+
borderRadius: "var(--ds-border-radius-200, 8px)",
|
|
80
|
+
border: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
81
|
+
overflow: 'hidden'
|
|
82
|
+
}), '&.ak-editor-selected-node', (0, _defineProperty2.default)({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), [
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
84
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
85
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
86
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles, {
|
|
87
|
+
'input::selection': {
|
|
88
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
89
|
+
},
|
|
90
|
+
'input::-moz-selection': {
|
|
91
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
92
|
+
}
|
|
93
|
+
}])), '&.danger', (0, _defineProperty2.default)({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
|
|
94
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
|
|
95
|
+
}))), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
96
|
+
cursor: 'pointer',
|
|
97
|
+
'&::after': {
|
|
98
|
+
transition: 'box-shadow 0s'
|
|
99
|
+
}
|
|
100
|
+
}), "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), [
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
102
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
104
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles]), '&.danger', {
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
106
|
+
'.media-card-frame::after': {
|
|
107
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
108
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important"),
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
110
|
+
background: "var(--ds-background-danger, #FFECEB)".concat(" !important")
|
|
111
|
+
},
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
113
|
+
'.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
|
|
114
|
+
background: "var(--ds-border-danger, #E2483D)"
|
|
115
|
+
}
|
|
116
|
+
})), ".".concat(FLOATING_TOOLBAR_LINKPICKER_CLASSNAME), {
|
|
117
|
+
padding: 0
|
|
118
|
+
}));
|
|
119
|
+
|
|
120
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
121
|
+
var smartLinksInLivePagesStyles = exports.smartLinksInLivePagesStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
122
|
+
cursor: 'text',
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
124
|
+
a: {
|
|
125
|
+
cursor: 'pointer'
|
|
126
|
+
}
|
|
127
|
+
})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
128
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
129
|
+
a: {
|
|
130
|
+
cursor: 'pointer'
|
|
131
|
+
}
|
|
132
|
+
})));
|
|
133
|
+
|
|
134
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
135
|
+
var smartLinksInLivePagesStylesOld = exports.smartLinksInLivePagesStylesOld = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
136
|
+
cursor: 'pointer',
|
|
137
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
138
|
+
a: {
|
|
139
|
+
cursor: 'auto'
|
|
140
|
+
}
|
|
141
|
+
})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
143
|
+
a: {
|
|
144
|
+
cursor: 'auto'
|
|
145
|
+
}
|
|
146
|
+
})));
|
|
147
|
+
|
|
148
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
149
|
+
var linkingVisualRefreshV1Styles = exports.linkingVisualRefreshV1Styles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
|
|
150
|
+
// EDM-11991: Fix list plugin adding padding to ADS AvatarGroup
|
|
151
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
152
|
+
'ul, ol': {
|
|
153
|
+
paddingLeft: 'inherit'
|
|
154
|
+
}
|
|
155
|
+
}));
|
|
@@ -14,7 +14,7 @@ import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/edi
|
|
|
14
14
|
import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
15
15
|
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
|
|
16
16
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
17
|
-
import { GRID_GUTTER,
|
|
17
|
+
import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
|
|
18
18
|
import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
|
|
19
19
|
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
20
20
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
@@ -50,6 +50,7 @@ import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRef
|
|
|
50
50
|
import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
|
|
51
51
|
import { ruleStyles } from './styles/rule';
|
|
52
52
|
import { shadowStyles } from './styles/shadowStyles';
|
|
53
|
+
import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
|
|
53
54
|
import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
|
|
54
55
|
import { textColorStyles } from './styles/textColorStyles';
|
|
55
56
|
import { unsupportedStyles } from './styles/unsupportedStyles';
|
|
@@ -415,9 +416,7 @@ const contentStyles = () => css`
|
|
|
415
416
|
|
|
416
417
|
${annotationStyles}
|
|
417
418
|
|
|
418
|
-
${smartCardStyles
|
|
419
|
-
|
|
420
|
-
${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}
|
|
419
|
+
${smartCardStyles}
|
|
421
420
|
|
|
422
421
|
${embedCardStyles}
|
|
423
422
|
|
|
@@ -562,7 +561,13 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
562
561
|
ref: ref,
|
|
563
562
|
css: [contentStyles(),
|
|
564
563
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
565
|
-
layoutBaseStyles(),
|
|
564
|
+
layoutBaseStyles(), fg('linking_platform_smart_links_in_live_pages') ?
|
|
565
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
566
|
+
smartLinksInLivePagesStyles :
|
|
567
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
568
|
+
smartLinksInLivePagesStylesOld, fg('platform-linking-visual-refresh-v1') &&
|
|
569
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
570
|
+
linkingVisualRefreshV1Styles, editorExperiment('platform_editor_vanilla_dom', true) &&
|
|
566
571
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
567
572
|
dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
|
|
568
573
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
import { css } from '@emotion/react'; // eslint-disable-line
|
|
2
|
+
|
|
3
|
+
import { boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
4
|
+
export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
|
|
5
|
+
export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
|
|
6
|
+
export const SmartCardSharedCssClassName = {
|
|
7
|
+
INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
|
|
8
|
+
BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
|
|
9
|
+
EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
|
|
10
|
+
DATASOURCE_CONTAINER: 'datasourceView-content-wrap',
|
|
11
|
+
LOADER_WRAPPER: 'loader-wrapper'
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
15
|
+
export const smartCardStyles = css({
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
17
|
+
[`.${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER}`]: {
|
|
18
|
+
maxWidth: 'calc(100% - 20px)',
|
|
19
|
+
verticalAlign: 'top',
|
|
20
|
+
wordBreak: 'break-all',
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
22
|
+
'.card-with-comment': {
|
|
23
|
+
background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
24
|
+
borderBottom: `2px solid ${"var(--ds-border-accent-yellow, #B38600)"}`,
|
|
25
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
|
|
26
|
+
},
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
+
'.card': {
|
|
29
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
30
|
+
paddingRight: "var(--ds-space-025, 2px)",
|
|
31
|
+
paddingTop: "var(--ds-space-100, 0.5em)",
|
|
32
|
+
paddingBottom: "var(--ds-space-100, 0.5em)",
|
|
33
|
+
marginBottom: "var(--ds-space-negative-100, -0.5em)",
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
35
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus`]: [
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
37
|
+
boxShadowSelectionStyles,
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
39
|
+
hideNativeBrowserTextSelectionStyles]
|
|
40
|
+
},
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
42
|
+
[`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: [
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
44
|
+
boxShadowSelectionStyles,
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
46
|
+
hideNativeBrowserTextSelectionStyles],
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: {
|
|
49
|
+
// EDM-1717: box-shadow Safari fix start
|
|
50
|
+
zIndex: 1,
|
|
51
|
+
position: 'relative'
|
|
52
|
+
},
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
54
|
+
'&.danger': {
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
56
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a`]: {
|
|
57
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`,
|
|
58
|
+
// EDM-1717: box-shadow Safari fix start
|
|
59
|
+
zIndex: 2
|
|
60
|
+
// EDM-1717: box-shadow Safari fix end
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
65
|
+
[`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
|
|
66
|
+
display: 'block',
|
|
67
|
+
margin: '0.75rem 0 0',
|
|
68
|
+
maxWidth: `${8 * 95}px`,
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
70
|
+
[`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: [
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
72
|
+
boxShadowSelectionStyles,
|
|
73
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
74
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
75
|
+
borderRadius: "var(--ds-border-radius-200, 8px)"
|
|
76
|
+
}],
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
78
|
+
'&.danger': {
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
80
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
82
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"} !important`
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
87
|
+
[`.${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
|
|
88
|
+
maxWidth: '100%',
|
|
89
|
+
display: 'flex',
|
|
90
|
+
justifyContent: 'center',
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
92
|
+
[`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: {
|
|
93
|
+
cursor: 'pointer',
|
|
94
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
95
|
+
borderRadius: "var(--ds-border-radius-200, 8px)",
|
|
96
|
+
border: `1px solid ${"var(--ds-border, #091E4224)"}`,
|
|
97
|
+
overflow: 'hidden'
|
|
98
|
+
},
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
100
|
+
'&.ak-editor-selected-node': {
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
102
|
+
[`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: [
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
104
|
+
boxShadowSelectionStyles,
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
106
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
107
|
+
'input::selection': {
|
|
108
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
109
|
+
},
|
|
110
|
+
'input::-moz-selection': {
|
|
111
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
112
|
+
}
|
|
113
|
+
}]
|
|
114
|
+
},
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
116
|
+
'&.danger': {
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
118
|
+
[`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`]: {
|
|
119
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"}`
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
124
|
+
[`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
126
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
127
|
+
cursor: 'pointer',
|
|
128
|
+
'&::after': {
|
|
129
|
+
transition: 'box-shadow 0s'
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
133
|
+
[`&.ak-editor-selected-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: [
|
|
134
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
135
|
+
boxShadowSelectionStyles,
|
|
136
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
137
|
+
hideNativeBrowserTextSelectionStyles],
|
|
138
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
139
|
+
'&.danger': {
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
141
|
+
'.media-card-frame::after': {
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
143
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-danger, #E2483D)"} !important`,
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
145
|
+
background: `${"var(--ds-background-danger, #FFECEB)"} !important`
|
|
146
|
+
},
|
|
147
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
148
|
+
'.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
|
|
149
|
+
background: "var(--ds-border-danger, #E2483D)"
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
154
|
+
[`.${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME}`]: {
|
|
155
|
+
padding: 0
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
160
|
+
export const smartLinksInLivePagesStyles = css({
|
|
161
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
162
|
+
[`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
|
|
163
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
164
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
165
|
+
cursor: 'text',
|
|
166
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
167
|
+
a: {
|
|
168
|
+
cursor: 'pointer'
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
173
|
+
[`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
|
|
174
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
175
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
176
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
177
|
+
a: {
|
|
178
|
+
cursor: 'pointer'
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
185
|
+
export const smartLinksInLivePagesStylesOld = css({
|
|
186
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
187
|
+
[`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
|
|
188
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
189
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
190
|
+
cursor: 'pointer',
|
|
191
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
192
|
+
a: {
|
|
193
|
+
cursor: 'auto'
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
198
|
+
[`.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER}`]: {
|
|
199
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
200
|
+
[`.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div`]: {
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
202
|
+
a: {
|
|
203
|
+
cursor: 'auto'
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
210
|
+
export const linkingVisualRefreshV1Styles = css({
|
|
211
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
212
|
+
[`.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER}`]: {
|
|
213
|
+
// EDM-11991: Fix list plugin adding padding to ADS AvatarGroup
|
|
214
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
215
|
+
'ul, ol': {
|
|
216
|
+
paddingLeft: 'inherit'
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "207.
|
|
2
|
+
export const version = "207.11.0";
|
|
@@ -16,7 +16,7 @@ import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/edi
|
|
|
16
16
|
import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
17
17
|
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
|
|
18
18
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
19
|
-
import { GRID_GUTTER,
|
|
19
|
+
import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
|
|
20
20
|
import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
|
|
21
21
|
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
22
22
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
@@ -52,6 +52,7 @@ import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRef
|
|
|
52
52
|
import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
|
|
53
53
|
import { ruleStyles } from './styles/rule';
|
|
54
54
|
import { shadowStyles } from './styles/shadowStyles';
|
|
55
|
+
import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
|
|
55
56
|
import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
|
|
56
57
|
import { textColorStyles } from './styles/textColorStyles';
|
|
57
58
|
import { unsupportedStyles } from './styles/unsupportedStyles';
|
|
@@ -145,7 +146,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
145
146
|
|
|
146
147
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
147
148
|
var contentStyles = function contentStyles() {
|
|
148
|
-
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n
|
|
149
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, listsSharedStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
149
150
|
exposure: false
|
|
150
151
|
}) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
151
152
|
exposure: false
|
|
@@ -159,7 +160,7 @@ var contentStyles = function contentStyles() {
|
|
|
159
160
|
exposure: false
|
|
160
161
|
}) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
161
162
|
exposure: false
|
|
162
|
-
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles
|
|
163
|
+
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
163
164
|
};
|
|
164
165
|
var CommentEditorMargin = 14;
|
|
165
166
|
|
|
@@ -229,7 +230,13 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
229
230
|
ref: ref,
|
|
230
231
|
css: [contentStyles(),
|
|
231
232
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
232
|
-
layoutBaseStyles(),
|
|
233
|
+
layoutBaseStyles(), fg('linking_platform_smart_links_in_live_pages') ?
|
|
234
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
235
|
+
smartLinksInLivePagesStyles :
|
|
236
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
237
|
+
smartLinksInLivePagesStylesOld, fg('platform-linking-visual-refresh-v1') &&
|
|
238
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
239
|
+
linkingVisualRefreshV1Styles, editorExperiment('platform_editor_vanilla_dom', true) &&
|
|
233
240
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
234
241
|
dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
|
|
235
242
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { css } from '@emotion/react'; // eslint-disable-line
|
|
3
|
+
|
|
4
|
+
import { boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
5
|
+
export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
|
|
6
|
+
export var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
|
|
7
|
+
export var SmartCardSharedCssClassName = {
|
|
8
|
+
INLINE_CARD_CONTAINER: 'inlineCardView-content-wrap',
|
|
9
|
+
BLOCK_CARD_CONTAINER: 'blockCardView-content-wrap',
|
|
10
|
+
EMBED_CARD_CONTAINER: 'embedCardView-content-wrap',
|
|
11
|
+
DATASOURCE_CONTAINER: 'datasourceView-content-wrap',
|
|
12
|
+
LOADER_WRAPPER: 'loader-wrapper'
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
16
|
+
export var smartCardStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.INLINE_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty({
|
|
17
|
+
maxWidth: 'calc(100% - 20px)',
|
|
18
|
+
verticalAlign: 'top',
|
|
19
|
+
wordBreak: 'break-all',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
21
|
+
'.card-with-comment': {
|
|
22
|
+
background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
23
|
+
borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, #B38600)"),
|
|
24
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)"
|
|
25
|
+
},
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
27
|
+
'.card': _defineProperty({
|
|
28
|
+
paddingLeft: "var(--ds-space-025, 2px)",
|
|
29
|
+
paddingRight: "var(--ds-space-025, 2px)",
|
|
30
|
+
paddingTop: "var(--ds-space-100, 0.5em)",
|
|
31
|
+
paddingBottom: "var(--ds-space-100, 0.5em)",
|
|
32
|
+
marginBottom: "var(--ds-space-negative-100, -0.5em)"
|
|
33
|
+
}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a:focus"), [
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
35
|
+
boxShadowSelectionStyles,
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
37
|
+
hideNativeBrowserTextSelectionStyles])
|
|
38
|
+
}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), [
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
40
|
+
boxShadowSelectionStyles,
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
42
|
+
hideNativeBrowserTextSelectionStyles]), ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
|
|
43
|
+
// EDM-1717: box-shadow Safari fix start
|
|
44
|
+
zIndex: 1,
|
|
45
|
+
position: 'relative'
|
|
46
|
+
}), '&.danger', _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > a"), {
|
|
47
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
|
|
48
|
+
// EDM-1717: box-shadow Safari fix start
|
|
49
|
+
zIndex: 2
|
|
50
|
+
// EDM-1717: box-shadow Safari fix end
|
|
51
|
+
}))), ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), _defineProperty(_defineProperty({
|
|
52
|
+
display: 'block',
|
|
53
|
+
margin: '0.75rem 0 0',
|
|
54
|
+
maxWidth: "".concat(8 * 95, "px")
|
|
55
|
+
}, "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), [
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
57
|
+
boxShadowSelectionStyles,
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
59
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
60
|
+
borderRadius: "var(--ds-border-radius-200, 8px)"
|
|
61
|
+
}]), '&.danger', _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
63
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important")
|
|
64
|
+
}))), ".".concat(SmartCardSharedCssClassName.DATASOURCE_CONTAINER, ".").concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty({
|
|
65
|
+
maxWidth: '100%',
|
|
66
|
+
display: 'flex',
|
|
67
|
+
justifyContent: 'center'
|
|
68
|
+
}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
|
|
69
|
+
cursor: 'pointer',
|
|
70
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
71
|
+
borderRadius: "var(--ds-border-radius-200, 8px)",
|
|
72
|
+
border: "1px solid ".concat("var(--ds-border, #091E4224)"),
|
|
73
|
+
overflow: 'hidden'
|
|
74
|
+
}), '&.ak-editor-selected-node', _defineProperty({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), [
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
76
|
+
boxShadowSelectionStyles,
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
78
|
+
hideNativeBrowserTextSelectionStyles, {
|
|
79
|
+
'input::selection': {
|
|
80
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
81
|
+
},
|
|
82
|
+
'input::-moz-selection': {
|
|
83
|
+
backgroundColor: "var(--ds-background-selected-hovered, #CCE0FF)"
|
|
84
|
+
}
|
|
85
|
+
}])), '&.danger', _defineProperty({}, ".".concat(DATASOURCE_INNER_CONTAINER_CLASSNAME), {
|
|
86
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
|
|
87
|
+
}))), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
88
|
+
cursor: 'pointer',
|
|
89
|
+
'&::after': {
|
|
90
|
+
transition: 'box-shadow 0s'
|
|
91
|
+
}
|
|
92
|
+
}), "&.ak-editor-selected-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), [
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
94
|
+
boxShadowSelectionStyles,
|
|
95
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
96
|
+
hideNativeBrowserTextSelectionStyles]), '&.danger', {
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
98
|
+
'.media-card-frame::after': {
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
100
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)", " !important"),
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
102
|
+
background: "var(--ds-background-danger, #FFECEB)".concat(" !important")
|
|
103
|
+
},
|
|
104
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
105
|
+
'.richMedia-resize-handle-right::after, .richMedia-resize-handle-left::after': {
|
|
106
|
+
background: "var(--ds-border-danger, #E2483D)"
|
|
107
|
+
}
|
|
108
|
+
})), ".".concat(FLOATING_TOOLBAR_LINKPICKER_CLASSNAME), {
|
|
109
|
+
padding: 0
|
|
110
|
+
}));
|
|
111
|
+
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
113
|
+
export var smartLinksInLivePagesStyles = css(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
114
|
+
cursor: 'text',
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
116
|
+
a: {
|
|
117
|
+
cursor: 'pointer'
|
|
118
|
+
}
|
|
119
|
+
})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
120
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
|
+
a: {
|
|
122
|
+
cursor: 'pointer'
|
|
123
|
+
}
|
|
124
|
+
})));
|
|
125
|
+
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
127
|
+
export var smartLinksInLivePagesStylesOld = css(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
128
|
+
cursor: 'pointer',
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
130
|
+
a: {
|
|
131
|
+
cursor: 'auto'
|
|
132
|
+
}
|
|
133
|
+
})), ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty({}, ".".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div"), {
|
|
134
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
135
|
+
a: {
|
|
136
|
+
cursor: 'auto'
|
|
137
|
+
}
|
|
138
|
+
})));
|
|
139
|
+
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
141
|
+
export var linkingVisualRefreshV1Styles = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER), {
|
|
142
|
+
// EDM-11991: Fix list plugin adding padding to ADS AvatarGroup
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
144
|
+
'ul, ol': {
|
|
145
|
+
paddingLeft: 'inherit'
|
|
146
|
+
}
|
|
147
|
+
}));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "207.
|
|
2
|
+
export var version = "207.11.0";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const DATASOURCE_INNER_CONTAINER_CLASSNAME = "datasourceView-content-inner-wrap";
|
|
2
|
+
export declare const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = "card-floating-toolbar--link-picker";
|
|
3
|
+
export declare const SmartCardSharedCssClassName: {
|
|
4
|
+
INLINE_CARD_CONTAINER: string;
|
|
5
|
+
BLOCK_CARD_CONTAINER: string;
|
|
6
|
+
EMBED_CARD_CONTAINER: string;
|
|
7
|
+
DATASOURCE_CONTAINER: string;
|
|
8
|
+
LOADER_WRAPPER: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const smartCardStyles: import("@emotion/react").SerializedStyles;
|
|
11
|
+
export declare const smartLinksInLivePagesStyles: import("@emotion/react").SerializedStyles;
|
|
12
|
+
export declare const smartLinksInLivePagesStylesOld: import("@emotion/react").SerializedStyles;
|
|
13
|
+
export declare const linkingVisualRefreshV1Styles: import("@emotion/react").SerializedStyles;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const DATASOURCE_INNER_CONTAINER_CLASSNAME = "datasourceView-content-inner-wrap";
|
|
2
|
+
export declare const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = "card-floating-toolbar--link-picker";
|
|
3
|
+
export declare const SmartCardSharedCssClassName: {
|
|
4
|
+
INLINE_CARD_CONTAINER: string;
|
|
5
|
+
BLOCK_CARD_CONTAINER: string;
|
|
6
|
+
EMBED_CARD_CONTAINER: string;
|
|
7
|
+
DATASOURCE_CONTAINER: string;
|
|
8
|
+
LOADER_WRAPPER: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const smartCardStyles: import("@emotion/react").SerializedStyles;
|
|
11
|
+
export declare const smartLinksInLivePagesStyles: import("@emotion/react").SerializedStyles;
|
|
12
|
+
export declare const smartLinksInLivePagesStylesOld: import("@emotion/react").SerializedStyles;
|
|
13
|
+
export declare const linkingVisualRefreshV1Styles: import("@emotion/react").SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "207.
|
|
3
|
+
"version": "207.11.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@atlaskit/task-decision": "^19.2.0",
|
|
65
65
|
"@atlaskit/tmp-editor-statsig": "^5.1.0",
|
|
66
66
|
"@atlaskit/tokens": "^4.9.0",
|
|
67
|
-
"@atlaskit/tooltip": "^20.
|
|
67
|
+
"@atlaskit/tooltip": "^20.1.0",
|
|
68
68
|
"@atlaskit/width-detector": "^5.0.0",
|
|
69
69
|
"@babel/runtime": "^7.0.0",
|
|
70
70
|
"@emotion/react": "^11.7.1",
|
|
@@ -646,10 +646,6 @@
|
|
|
646
646
|
"type": "boolean",
|
|
647
647
|
"referenceOnly": true
|
|
648
648
|
},
|
|
649
|
-
"platform_editor_ed-27630_date_popup_deleted_node": {
|
|
650
|
-
"type": "boolean",
|
|
651
|
-
"referenceOnly": true
|
|
652
|
-
},
|
|
653
649
|
"platform_editor_refactor_view_more": {
|
|
654
650
|
"type": "boolean",
|
|
655
651
|
"referenceOnly": true
|