@atlaskit/editor-core 205.1.5 → 205.1.7
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 +18 -0
- package/dist/cjs/ui/ContentStyles/date.js +34 -1
- package/dist/cjs/ui/ContentStyles/index.js +60 -9
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/date.js +33 -0
- package/dist/es2019/ui/ContentStyles/index.js +74 -3
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/date.js +33 -0
- package/dist/esm/ui/ContentStyles/index.js +61 -10
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-universal-preset.d.ts +48 -44
- package/dist/types/presets/universal.d.ts +48 -44
- package/dist/types/presets/useUniversalPreset.d.ts +48 -44
- package/dist/types/ui/ContentStyles/date.d.ts +1 -0
- package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +57 -44
- package/dist/types-ts4.5/presets/universal.d.ts +57 -44
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +57 -44
- package/dist/types-ts4.5/ui/ContentStyles/date.d.ts +1 -0
- package/package.json +9 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 205.1.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#134341](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134341)
|
|
8
|
+
[`e53990137fb56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e53990137fb56) -
|
|
9
|
+
ED-27338: converts editor date node to vanilla js
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 205.1.6
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#134205](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134205)
|
|
17
|
+
[`7751c880c8ebf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7751c880c8ebf) -
|
|
18
|
+
Refactor mentions node view to vanilla javascript.
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 205.1.5
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -4,11 +4,44 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.dateStyles = void 0;
|
|
7
|
+
exports.dateVanillaStyles = exports.dateStyles = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
12
|
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
14
|
+
var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)({
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
16
|
+
"[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date']": {
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
18
|
+
'.date-lozenger-container': {
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
20
|
+
'span': {
|
|
21
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
22
|
+
color: "var(--ds-text, #172B4D)",
|
|
23
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
24
|
+
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
|
|
25
|
+
margin: '0 1px',
|
|
26
|
+
position: 'relative',
|
|
27
|
+
transition: 'background 0.3s',
|
|
28
|
+
whiteSpace: 'nowrap',
|
|
29
|
+
cursor: 'unset',
|
|
30
|
+
'&:hover': {
|
|
31
|
+
backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
32
|
+
},
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
34
|
+
'&.date-node-color-red': {
|
|
35
|
+
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
|
|
36
|
+
color: "var(--ds-text-accent-red, #AE2E24)",
|
|
37
|
+
'&:hover': {
|
|
38
|
+
backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
13
46
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
14
47
|
var dateStyles = exports.dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tline-height: initial;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " > span {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t}\n\t}\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));
|
|
@@ -35,7 +35,7 @@ var _media = require("./media");
|
|
|
35
35
|
var _panel2 = require("./panel");
|
|
36
36
|
var _status = require("./status");
|
|
37
37
|
var _tasksAndDecisions = require("./tasks-and-decisions");
|
|
38
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
38
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
39
39
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
40
40
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
41
41
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -52,10 +52,55 @@ var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_temp
|
|
|
52
52
|
var ruleStyles = function ruleStyles() {
|
|
53
53
|
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
|
|
54
54
|
};
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
var vanillaMentionsStyles = (0, _react2.css)({
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
57
|
+
'.editor-mention-primitive': {
|
|
58
|
+
display: 'inline',
|
|
59
|
+
borderRadius: '20px',
|
|
60
|
+
cursor: 'pointer',
|
|
61
|
+
padding: '0 0.3em 2px 0.23em',
|
|
62
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
63
|
+
wordBreak: 'break-word',
|
|
64
|
+
background: "var(--ds-background-neutral, #091E420F)",
|
|
65
|
+
border: '1px solid transparent',
|
|
66
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
67
|
+
'&:hover': {
|
|
68
|
+
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
69
|
+
},
|
|
70
|
+
'&:active': {
|
|
71
|
+
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
75
|
+
'.editor-mention-primitive.mention-restricted': {
|
|
76
|
+
background: 'transparent',
|
|
77
|
+
border: "1px solid ".concat("var(--ds-border-bold, #758195)"),
|
|
78
|
+
color: "var(--ds-text, #172B4D)",
|
|
79
|
+
'&:hover': {
|
|
80
|
+
background: 'transparent'
|
|
81
|
+
},
|
|
82
|
+
'&:active': {
|
|
83
|
+
background: 'transparent'
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
87
|
+
'.editor-mention-primitive.mention-self': {
|
|
88
|
+
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
89
|
+
border: '1px solid transparent',
|
|
90
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
91
|
+
'&:hover': {
|
|
92
|
+
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
93
|
+
},
|
|
94
|
+
'&:active': {
|
|
95
|
+
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
var vanillaSelectionStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (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 (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)");
|
|
100
|
+
var mentionsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (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 (in dark blue) have white text by default */\n 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)");
|
|
101
|
+
var listsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
102
|
+
var reactEmojiStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (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]));
|
|
103
|
+
var emojiStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (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]));
|
|
59
104
|
|
|
60
105
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
61
106
|
var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
|
|
@@ -82,8 +127,8 @@ var placeholderOverflowStyles = (0, _react2.css)({
|
|
|
82
127
|
textOverflow: 'ellipsis'
|
|
83
128
|
}
|
|
84
129
|
});
|
|
85
|
-
var firstBlockNodeStyles = (0, _react2.css)(
|
|
86
|
-
var firstBlockNodeStylesNew = (0, _react2.css)(
|
|
130
|
+
var firstBlockNodeStyles = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
131
|
+
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
87
132
|
|
|
88
133
|
/**
|
|
89
134
|
* fix layout issue of first block node
|
|
@@ -101,9 +146,15 @@ var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBl
|
|
|
101
146
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
102
147
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
103
148
|
var contentStyles = function contentStyles(props) {
|
|
104
|
-
return (0, _react2.css)(
|
|
149
|
+
return (0, _react2.css)(_templateObject10 || (_templateObject10 = (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: 52px;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
105
150
|
theme: props.theme
|
|
106
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(
|
|
151
|
+
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (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)(_templateObject12 || (_templateObject12 = (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)(_templateObject13 || (_templateObject13 = (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, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
152
|
+
exposure: false
|
|
153
|
+
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
154
|
+
exposure: false
|
|
155
|
+
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
156
|
+
exposure: false
|
|
157
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject14 || (_templateObject14 = (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);
|
|
107
158
|
};
|
|
108
159
|
var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
109
160
|
return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
@@ -2,6 +2,39 @@
|
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
4
4
|
import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
6
|
+
export const dateVanillaStyles = css({
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
8
|
+
"[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date']": {
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
10
|
+
'.date-lozenger-container': {
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
12
|
+
'span': {
|
|
13
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
14
|
+
color: "var(--ds-text, #172B4D)",
|
|
15
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
16
|
+
padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
|
|
17
|
+
margin: '0 1px',
|
|
18
|
+
position: 'relative',
|
|
19
|
+
transition: 'background 0.3s',
|
|
20
|
+
whiteSpace: 'nowrap',
|
|
21
|
+
cursor: 'unset',
|
|
22
|
+
'&:hover': {
|
|
23
|
+
backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
24
|
+
},
|
|
25
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
26
|
+
'&.date-node-color-red': {
|
|
27
|
+
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
|
|
28
|
+
color: "var(--ds-text-accent-red, #AE2E24)",
|
|
29
|
+
'&:hover': {
|
|
30
|
+
backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
|
|
5
38
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
6
39
|
export const dateStyles = css`
|
|
7
40
|
.${DateSharedCssClassName.DATE_CONTAINER} {
|
|
@@ -29,7 +29,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
|
|
|
29
29
|
import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
|
|
30
30
|
import { aiPanelStyles } from './ai-panels';
|
|
31
31
|
import { codeBlockStyles } from './code-block';
|
|
32
|
-
import { dateStyles } from './date';
|
|
32
|
+
import { dateStyles, dateVanillaStyles } from './date';
|
|
33
33
|
import { expandStyles } from './expand';
|
|
34
34
|
import { extensionStyles } from './extension';
|
|
35
35
|
import { layoutStyles } from './layout';
|
|
@@ -60,6 +60,67 @@ const ruleStyles = () => css`
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
`;
|
|
63
|
+
const vanillaMentionsStyles = css({
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
65
|
+
'.editor-mention-primitive': {
|
|
66
|
+
display: 'inline',
|
|
67
|
+
borderRadius: '20px',
|
|
68
|
+
cursor: 'pointer',
|
|
69
|
+
padding: '0 0.3em 2px 0.23em',
|
|
70
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
71
|
+
wordBreak: 'break-word',
|
|
72
|
+
background: "var(--ds-background-neutral, #091E420F)",
|
|
73
|
+
border: '1px solid transparent',
|
|
74
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
75
|
+
'&:hover': {
|
|
76
|
+
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
77
|
+
},
|
|
78
|
+
'&:active': {
|
|
79
|
+
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
83
|
+
'.editor-mention-primitive.mention-restricted': {
|
|
84
|
+
background: 'transparent',
|
|
85
|
+
border: `1px solid ${"var(--ds-border-bold, #758195)"}`,
|
|
86
|
+
color: "var(--ds-text, #172B4D)",
|
|
87
|
+
'&:hover': {
|
|
88
|
+
background: 'transparent'
|
|
89
|
+
},
|
|
90
|
+
'&:active': {
|
|
91
|
+
background: 'transparent'
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
95
|
+
'.editor-mention-primitive.mention-self': {
|
|
96
|
+
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
97
|
+
border: '1px solid transparent',
|
|
98
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
99
|
+
'&:hover': {
|
|
100
|
+
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
101
|
+
},
|
|
102
|
+
'&:active': {
|
|
103
|
+
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
const vanillaSelectionStyles = css`
|
|
108
|
+
.danger {
|
|
109
|
+
.editor-mention-primitive {
|
|
110
|
+
box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
|
|
111
|
+
background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackgroundWithOpacity})`};
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.${akEditorSelectedNodeClassName} > .editor-mention-primitive,
|
|
116
|
+
.${akEditorSelectedNodeClassName} > .editor-mention-primitive.mention-self,
|
|
117
|
+
.${akEditorSelectedNodeClassName} > .editor-mention-primitive.mention-restricted {
|
|
118
|
+
${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background])}
|
|
119
|
+
/* need to specify dark text colour because personal mentions
|
|
120
|
+
(in dark blue) have white text by default */
|
|
121
|
+
color: ${"var(--ds-text-subtle, #44546F)"}
|
|
122
|
+
}
|
|
123
|
+
`;
|
|
63
124
|
const mentionsStyles = css`
|
|
64
125
|
.${MentionSharedCssClassName.MENTION_CONTAINER} {
|
|
65
126
|
&.${akEditorSelectedNodeClassName} [data-mention-id] > span {
|
|
@@ -353,7 +414,16 @@ const contentStyles = props => css`
|
|
|
353
414
|
${gapCursorStyles};
|
|
354
415
|
${panelStyles()}
|
|
355
416
|
${mentionsStyles}
|
|
356
|
-
${editorExperiment('platform_editor_vanilla_dom', true
|
|
417
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
418
|
+
exposure: false
|
|
419
|
+
}) && vanillaMentionsStyles}
|
|
420
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
421
|
+
exposure: false
|
|
422
|
+
}) && vanillaSelectionStyles}
|
|
423
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
424
|
+
exposure: false
|
|
425
|
+
}) ? emojiStyles : reactEmojiStyles}
|
|
426
|
+
${emojiStyles}
|
|
357
427
|
${tasksAndDecisionsStyles}
|
|
358
428
|
${gridStyles}
|
|
359
429
|
${linkStyles}
|
|
@@ -368,7 +438,8 @@ const contentStyles = props => css`
|
|
|
368
438
|
${annotationSharedStyles()}
|
|
369
439
|
${smartCardStyles()}
|
|
370
440
|
${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}
|
|
371
|
-
${
|
|
441
|
+
${editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null}
|
|
442
|
+
${dateStyles}
|
|
372
443
|
${embedCardStyles()}
|
|
373
444
|
${unsupportedStyles}
|
|
374
445
|
${resizerStyles}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "205.1.
|
|
2
|
+
export const version = "205.1.7";
|
|
@@ -4,5 +4,38 @@ var _templateObject;
|
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
5
|
import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
8
|
+
export var dateVanillaStyles = css({
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
10
|
+
"[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date']": {
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
12
|
+
'.date-lozenger-container': {
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
14
|
+
'span': {
|
|
15
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
16
|
+
color: "var(--ds-text, #172B4D)",
|
|
17
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
18
|
+
padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
|
|
19
|
+
margin: '0 1px',
|
|
20
|
+
position: 'relative',
|
|
21
|
+
transition: 'background 0.3s',
|
|
22
|
+
whiteSpace: 'nowrap',
|
|
23
|
+
cursor: 'unset',
|
|
24
|
+
'&:hover': {
|
|
25
|
+
backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
26
|
+
},
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
+
'&.date-node-color-red': {
|
|
29
|
+
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
|
|
30
|
+
color: "var(--ds-text-accent-red, #AE2E24)",
|
|
31
|
+
'&:hover': {
|
|
32
|
+
backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
7
40
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
8
41
|
export var dateStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\t.", " {\n\t\t\tline-height: initial;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " > span {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t.", "\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t}\n\t}\n"])), DateSharedCssClassName.DATE_CONTAINER, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), DateSharedCssClassName.DATE_CONTAINER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
4
4
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
5
5
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -31,7 +31,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
|
|
|
31
31
|
import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
|
|
32
32
|
import { aiPanelStyles } from './ai-panels';
|
|
33
33
|
import { codeBlockStyles } from './code-block';
|
|
34
|
-
import { dateStyles } from './date';
|
|
34
|
+
import { dateStyles, dateVanillaStyles } from './date';
|
|
35
35
|
import { expandStyles } from './expand';
|
|
36
36
|
import { extensionStyles } from './extension';
|
|
37
37
|
import { layoutStyles } from './layout';
|
|
@@ -44,10 +44,55 @@ export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplat
|
|
|
44
44
|
var ruleStyles = function ruleStyles() {
|
|
45
45
|
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ruleSharedStyles(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
|
|
46
46
|
};
|
|
47
|
-
var
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
var vanillaMentionsStyles = css({
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
49
|
+
'.editor-mention-primitive': {
|
|
50
|
+
display: 'inline',
|
|
51
|
+
borderRadius: '20px',
|
|
52
|
+
cursor: 'pointer',
|
|
53
|
+
padding: '0 0.3em 2px 0.23em',
|
|
54
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
55
|
+
wordBreak: 'break-word',
|
|
56
|
+
background: "var(--ds-background-neutral, #091E420F)",
|
|
57
|
+
border: '1px solid transparent',
|
|
58
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
59
|
+
'&:hover': {
|
|
60
|
+
background: "var(--ds-background-neutral-hovered, #091E4224)"
|
|
61
|
+
},
|
|
62
|
+
'&:active': {
|
|
63
|
+
background: "var(--ds-background-neutral-pressed, #091E424F)"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
67
|
+
'.editor-mention-primitive.mention-restricted': {
|
|
68
|
+
background: 'transparent',
|
|
69
|
+
border: "1px solid ".concat("var(--ds-border-bold, #758195)"),
|
|
70
|
+
color: "var(--ds-text, #172B4D)",
|
|
71
|
+
'&:hover': {
|
|
72
|
+
background: 'transparent'
|
|
73
|
+
},
|
|
74
|
+
'&:active': {
|
|
75
|
+
background: 'transparent'
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
79
|
+
'.editor-mention-primitive.mention-self': {
|
|
80
|
+
background: "var(--ds-background-brand-bold, #0C66E4)",
|
|
81
|
+
border: '1px solid transparent',
|
|
82
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
83
|
+
'&:hover': {
|
|
84
|
+
background: "var(--ds-background-brand-bold-hovered, #0055CC)"
|
|
85
|
+
},
|
|
86
|
+
'&:active': {
|
|
87
|
+
background: "var(--ds-background-brand-bold-pressed, #09326C)"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
var vanillaSelectionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
|
|
92
|
+
var mentionsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 (in dark blue) have white text by default */\n 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"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
|
|
93
|
+
var listsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
|
|
94
|
+
var reactEmojiStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
|
|
95
|
+
var emojiStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
|
|
51
96
|
|
|
52
97
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
53
98
|
export var placeholderStyles = css({
|
|
@@ -74,8 +119,8 @@ var placeholderOverflowStyles = css({
|
|
|
74
119
|
textOverflow: 'ellipsis'
|
|
75
120
|
}
|
|
76
121
|
});
|
|
77
|
-
var firstBlockNodeStyles = css(
|
|
78
|
-
var firstBlockNodeStylesNew = css(
|
|
122
|
+
var firstBlockNodeStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
|
|
123
|
+
var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
|
|
79
124
|
|
|
80
125
|
/**
|
|
81
126
|
* fix layout issue of first block node
|
|
@@ -93,9 +138,15 @@ export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
|
|
|
93
138
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
94
139
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
95
140
|
var contentStyles = function contentStyles(props) {
|
|
96
|
-
return css(
|
|
141
|
+
return css(_templateObject10 || (_templateObject10 = _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: 52px;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
97
142
|
theme: props.theme
|
|
98
|
-
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(
|
|
143
|
+
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
144
|
+
exposure: false
|
|
145
|
+
}) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
146
|
+
exposure: false
|
|
147
|
+
}) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
148
|
+
exposure: false
|
|
149
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _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);
|
|
99
150
|
};
|
|
100
151
|
export var createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
101
152
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "205.1.
|
|
2
|
+
export var version = "205.1.7";
|