@atlaskit/editor-core 207.10.1 → 207.11.1
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 +26 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +30 -63
- package/dist/cjs/ui/EditorContentContainer/styles/emoji.js +61 -0
- package/dist/cjs/ui/EditorContentContainer/styles/mentions.js +107 -0
- 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 +29 -155
- package/dist/es2019/ui/EditorContentContainer/styles/emoji.js +74 -0
- package/dist/es2019/ui/EditorContentContainer/styles/mentions.js +115 -0
- 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 +31 -64
- package/dist/esm/ui/EditorContentContainer/styles/emoji.js +53 -0
- package/dist/esm/ui/EditorContentContainer/styles/mentions.js +100 -0
- package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js +147 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -1
- package/dist/types/ui/EditorContentContainer/styles/emoji.d.ts +2 -0
- package/dist/types/ui/EditorContentContainer/styles/mentions.d.ts +3 -0
- package/dist/types/ui/EditorContentContainer/styles/smartCardStyles.d.ts +13 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -1
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/emoji.d.ts +2 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/mentions.d.ts +3 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/smartCardStyles.d.ts +13 -0
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.11.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#159712](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159712)
|
|
8
|
+
[`ed0d352587eaf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed0d352587eaf) -
|
|
9
|
+
refactor emotion styles for emoji and mentions
|
|
10
|
+
- [#157348](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157348)
|
|
11
|
+
[`2745ba38d05fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2745ba38d05fd) -
|
|
12
|
+
Implemented the new manager set selection and hover APIs. This will allow anyone with access to
|
|
13
|
+
the annotations manager the ability to control when/what annotation is selected/hovered.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 207.11.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#159906](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159906)
|
|
21
|
+
[`022ee65a8f41a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/022ee65a8f41a) -
|
|
22
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor smart card CSS
|
|
23
|
+
in static emotion
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
3
29
|
## 207.10.1
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
|
@@ -4,14 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.placeholderStyles = exports.
|
|
7
|
+
exports.placeholderStyles = exports.default = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
12
12
|
var _collab = require("@atlaskit/editor-common/collab");
|
|
13
|
-
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
14
|
-
var _mention = require("@atlaskit/editor-common/mention");
|
|
15
13
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
16
14
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
17
15
|
var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
|
|
@@ -38,6 +36,7 @@ var _codeBlockStyles = require("./styles/codeBlockStyles");
|
|
|
38
36
|
var _codeMarkStyles = require("./styles/codeMarkStyles");
|
|
39
37
|
var _dateStyles = require("./styles/dateStyles");
|
|
40
38
|
var _embedCardStyles = require("./styles/embedCardStyles");
|
|
39
|
+
var _emoji = require("./styles/emoji");
|
|
41
40
|
var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
|
|
42
41
|
var _gridStyles = require("./styles/gridStyles");
|
|
43
42
|
var _indentationStyles = require("./styles/indentationStyles");
|
|
@@ -45,15 +44,17 @@ var _layout = require("./styles/layout");
|
|
|
45
44
|
var _link = require("./styles/link");
|
|
46
45
|
var _list = require("./styles/list");
|
|
47
46
|
var _mediaStyles = require("./styles/mediaStyles");
|
|
47
|
+
var _mentions = require("./styles/mentions");
|
|
48
48
|
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");
|
|
55
56
|
var _whitespaceStyles = require("./styles/whitespaceStyles");
|
|
56
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5
|
|
57
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
57
58
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
58
59
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
59
60
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -62,55 +63,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
62
63
|
* @jsx jsx
|
|
63
64
|
*/
|
|
64
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
65
|
-
var isFirefox =
|
|
66
|
-
var vanillaMentionsStyles = (0, _react2.css)({
|
|
67
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
68
|
-
'.editor-mention-primitive': {
|
|
69
|
-
display: 'inline',
|
|
70
|
-
borderRadius: '20px',
|
|
71
|
-
cursor: 'pointer',
|
|
72
|
-
padding: '0 0.3em 2px 0.23em',
|
|
73
|
-
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
74
|
-
wordBreak: 'break-word',
|
|
75
|
-
background: "var(--ds-background-neutral, #091E420F)",
|
|
76
|
-
border: '1px solid transparent',
|
|
77
|
-
color: "var(--ds-text-subtle, #44546F)",
|
|
78
|
-
'&:hover': {
|
|
79
|
-
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
80
|
-
},
|
|
81
|
-
'&:active': {
|
|
82
|
-
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
86
|
-
'.editor-mention-primitive.mention-restricted': {
|
|
87
|
-
background: 'transparent',
|
|
88
|
-
border: "1px solid ".concat("var(--ds-border-bold, #758195)"),
|
|
89
|
-
color: "var(--ds-text, #172B4D)",
|
|
90
|
-
'&:hover': {
|
|
91
|
-
background: 'transparent'
|
|
92
|
-
},
|
|
93
|
-
'&:active': {
|
|
94
|
-
background: 'transparent'
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
98
|
-
'.editor-mention-primitive.mention-self': {
|
|
99
|
-
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
100
|
-
border: '1px solid transparent',
|
|
101
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
102
|
-
'&:hover': {
|
|
103
|
-
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
104
|
-
},
|
|
105
|
-
'&:active': {
|
|
106
|
-
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
var vanillaSelectionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
|
|
111
|
-
var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _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, #091E420F)", "var(--ds-text-subtle, #44546F)");
|
|
112
|
-
var reactEmojiStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
|
|
113
|
-
var emojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
|
|
66
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
114
67
|
|
|
115
68
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
116
69
|
var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
|
|
@@ -151,13 +104,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
151
104
|
|
|
152
105
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
153
106
|
var contentStyles = function contentStyles() {
|
|
154
|
-
return (0, _react2.css)(
|
|
155
|
-
exposure: false
|
|
156
|
-
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
157
|
-
exposure: false
|
|
158
|
-
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
159
|
-
exposure: false
|
|
160
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
107
|
+
return (0, _react2.css)(_templateObject || (_templateObject = (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 // 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)(_templateObject2 || (_templateObject2 = (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)(_templateObject3 || (_templateObject3 = (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)(_templateObject4 || (_templateObject4 = (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)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
161
108
|
exposure: false
|
|
162
109
|
}) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
163
110
|
exposure: false
|
|
@@ -165,7 +112,7 @@ var contentStyles = function contentStyles() {
|
|
|
165
112
|
exposure: false
|
|
166
113
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
167
114
|
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,
|
|
115
|
+
}) && !(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)(_templateObject5 || (_templateObject5 = (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
116
|
};
|
|
170
117
|
var CommentEditorMargin = 14;
|
|
171
118
|
|
|
@@ -235,7 +182,13 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
235
182
|
ref: ref,
|
|
236
183
|
css: [contentStyles(),
|
|
237
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
238
|
-
(0, _layout.layoutBaseStyles)(), (0,
|
|
185
|
+
(0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') ?
|
|
186
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
187
|
+
_smartCardStyles.smartLinksInLivePagesStyles :
|
|
188
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
189
|
+
_smartCardStyles.smartLinksInLivePagesStylesOld, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') &&
|
|
190
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
191
|
+
_smartCardStyles.linkingVisualRefreshV1Styles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
|
|
239
192
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
240
193
|
_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
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -267,7 +220,21 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
267
220
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
268
221
|
_firstBlockNodeStyles.firstBlockNodeStyles :
|
|
269
222
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
270
|
-
_firstBlockNodeStyles.firstBlockNodeStylesOld
|
|
223
|
+
_firstBlockNodeStyles.firstBlockNodeStylesOld, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
224
|
+
exposure: false
|
|
225
|
+
}) &&
|
|
226
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
227
|
+
_mentions.vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
228
|
+
exposure: false
|
|
229
|
+
}) &&
|
|
230
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
231
|
+
_mentions.vanillaMentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
232
|
+
exposure: false
|
|
233
|
+
}) ?
|
|
234
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
235
|
+
_emoji.vanillaEmojiStyles :
|
|
236
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
237
|
+
_emoji.reactEmojiStyles],
|
|
271
238
|
"data-editor-scroll-container": isScrollable ? 'true' : undefined,
|
|
272
239
|
"data-testid": "editor-content-container",
|
|
273
240
|
style: {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.vanillaEmojiStyles = exports.reactEmojiStyles = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
11
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
+
var _selectionStyles = require("./selectionStyles");
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
14
|
+
|
|
15
|
+
var reactEmojiSelectionStyles = (0, _react.css)({
|
|
16
|
+
borderRadius: '2px'
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
20
|
+
var reactEmojiStyles = exports.reactEmojiStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
21
|
+
display: 'inline-block'
|
|
22
|
+
}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_NODE), (0, _defineProperty2.default)({
|
|
23
|
+
cursor: 'pointer'
|
|
24
|
+
}, "&.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, " > span"), {
|
|
25
|
+
/** needed for selection style to cover custom emoji image properly */
|
|
26
|
+
display: 'flex'
|
|
27
|
+
})), "&.".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
29
|
+
_selectionStyles.blanketSelectionStyles,
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
31
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
33
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles, reactEmojiSelectionStyles]))));
|
|
34
|
+
var vanillaEmojiSelectionStyles = (0, _react.css)({
|
|
35
|
+
borderRadius: '2px'
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// Emoji styles from Emoji vanilla node view
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
40
|
+
var vanillaEmojiStyles = exports.vanillaEmojiStyles = (0, _react.css)({
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
42
|
+
'[data-prosemirror-node-view-type="vanilla"]': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
|
|
43
|
+
display: 'inline-block'
|
|
44
|
+
}), ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
45
|
+
background: 'no-repeat transparent',
|
|
46
|
+
display: 'inline-block',
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
+
height: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
50
|
+
maxHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
51
|
+
cursor: 'pointer',
|
|
52
|
+
verticalAlign: 'middle',
|
|
53
|
+
userSelect: 'all'
|
|
54
|
+
}), "&.".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [vanillaEmojiSelectionStyles,
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
56
|
+
_selectionStyles.blanketSelectionStyles,
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
58
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
60
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles]))
|
|
61
|
+
});
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.vanillaMentionsStyles = exports.vanillaMentionsSelectionStyles = exports.mentionsStyles = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _mention = require("@atlaskit/editor-common/mention");
|
|
11
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
+
var _selectionStyles = require("./selectionStyles");
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
14
|
+
|
|
15
|
+
/* need to specify dark text colour because personal mentions
|
|
16
|
+
(in dark blue) have white text by default */
|
|
17
|
+
var mentionsSelectedColor = (0, _react.css)({
|
|
18
|
+
color: "var(--ds-text-subtle, #44546F)"
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
22
|
+
var mentionsStyles = exports.mentionsStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mention.MentionSharedCssClassName.MENTION_CONTAINER), (0, _defineProperty2.default)({}, "&.".concat(_editorSharedStyles.akEditorSelectedNodeClassName, " [data-mention-id] > span"), [
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
24
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
26
|
+
_selectionStyles.backgroundSelectionStyles, mentionsSelectedColor])), '.danger', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_mention.MentionSharedCssClassName.MENTION_CONTAINER, ".").concat(_editorSharedStyles.akEditorSelectedNodeClassName), {
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
+
'> span > span > span': {
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
30
|
+
boxShadow: "0 0 0 ".concat(_editorSharedStyles.akEditorSelectedBorderSize, "px ").concat(_editorSharedStyles.akEditorDeleteBorder),
|
|
31
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)"
|
|
32
|
+
}
|
|
33
|
+
}), ".".concat(_mention.MentionSharedCssClassName.MENTION_CONTAINER, " > span > span > span"), {
|
|
34
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
35
|
+
color: "var(--ds-text-subtle, #44546F)"
|
|
36
|
+
})));
|
|
37
|
+
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
39
|
+
var vanillaMentionsStyles = exports.vanillaMentionsStyles = (0, _react.css)({
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
41
|
+
'.editor-mention-primitive': {
|
|
42
|
+
display: 'inline',
|
|
43
|
+
borderRadius: '20px',
|
|
44
|
+
cursor: 'pointer',
|
|
45
|
+
padding: '0 0.3em 2px 0.23em',
|
|
46
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
47
|
+
wordBreak: 'break-word',
|
|
48
|
+
background: "var(--ds-background-neutral, #091E420F)",
|
|
49
|
+
border: '1px solid transparent',
|
|
50
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
51
|
+
'&:hover': {
|
|
52
|
+
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
53
|
+
},
|
|
54
|
+
'&:active': {
|
|
55
|
+
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
59
|
+
'.editor-mention-primitive.mention-restricted': {
|
|
60
|
+
background: 'transparent',
|
|
61
|
+
border: "1px solid ".concat("var(--ds-border-bold, #758195)"),
|
|
62
|
+
color: "var(--ds-text, #172B4D)",
|
|
63
|
+
'&:hover': {
|
|
64
|
+
background: 'transparent'
|
|
65
|
+
},
|
|
66
|
+
'&:active': {
|
|
67
|
+
background: 'transparent'
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
71
|
+
'.editor-mention-primitive.mention-self': {
|
|
72
|
+
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
73
|
+
border: '1px solid transparent',
|
|
74
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
75
|
+
'&:hover': {
|
|
76
|
+
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
77
|
+
},
|
|
78
|
+
'&:active': {
|
|
79
|
+
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// This is mentions styles for mentions selection styles based on the vanilla node view
|
|
85
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
86
|
+
var vanillaMentionsSelectionStyles = exports.vanillaMentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
88
|
+
'.danger': {
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
90
|
+
'.editor-mention-primitive': {
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
92
|
+
boxShadow: "0 0 0 ".concat(_editorSharedStyles.akEditorSelectedBorderSize, "px ").concat(_editorSharedStyles.akEditorDeleteBorder),
|
|
93
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}, ".".concat(_editorSharedStyles.akEditorSelectedNodeClassName), {
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
98
|
+
'> .editor-mention-primitive, > .editor-mention-primitive.mention-self, > .editor-mention-primitive.mention-restricted':
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values,
|
|
100
|
+
[
|
|
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.backgroundSelectionStyles,
|
|
105
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
106
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles, mentionsSelectedColor]
|
|
107
|
+
}));
|
|
@@ -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
|
+
}));
|