@atlaskit/editor-core 207.6.1 → 207.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +17 -18
- package/dist/cjs/ui/EditorContentContainer/styles/codeBlockStyles.js +216 -0
- package/dist/cjs/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +39 -0
- package/dist/cjs/ui/EditorContentContainer/styles/overflowShadowStyles.js +13 -0
- package/dist/cjs/ui/EditorContentContainer/styles/selectionStyles.js +78 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +13 -57
- package/dist/es2019/ui/EditorContentContainer/styles/codeBlockStyles.js +266 -0
- package/dist/es2019/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +41 -0
- package/dist/es2019/ui/EditorContentContainer/styles/overflowShadowStyles.js +47 -0
- package/dist/es2019/ui/EditorContentContainer/styles/selectionStyles.js +71 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +16 -17
- package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js +208 -0
- package/dist/esm/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +32 -0
- package/dist/esm/ui/EditorContentContainer/styles/overflowShadowStyles.js +6 -0
- package/dist/esm/ui/EditorContentContainer/styles/selectionStyles.js +71 -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/codeBlockStyles.d.ts +14 -0
- package/dist/types/ui/EditorContentContainer/styles/firstBlockNodeStyles.d.ts +2 -0
- package/dist/types/ui/EditorContentContainer/styles/overflowShadowStyles.d.ts +1 -0
- package/dist/types/ui/EditorContentContainer/styles/selectionStyles.d.ts +5 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -1
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeBlockStyles.d.ts +14 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/firstBlockNodeStyles.d.ts +2 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/overflowShadowStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/selectionStyles.d.ts +5 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#157354](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157354)
|
|
8
|
+
[`5d67631c09a7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5d67631c09a7f) -
|
|
9
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor code block CSS
|
|
10
|
+
in static emotion
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 207.6.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -4,15 +4,13 @@ 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
|
-
var _browser = require("@atlaskit/editor-common/browser");
|
|
12
11
|
var _collab = require("@atlaskit/editor-common/collab");
|
|
13
12
|
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
14
13
|
var _mention = require("@atlaskit/editor-common/mention");
|
|
15
|
-
var _panel = require("@atlaskit/editor-common/panel");
|
|
16
14
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
17
15
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
18
16
|
var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
|
|
@@ -26,24 +24,25 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
26
24
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
27
25
|
var _tokens = require("@atlaskit/tokens");
|
|
28
26
|
var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
|
|
29
|
-
var _codeBlock = require("../ContentStyles/code-block");
|
|
30
27
|
var _date = require("../ContentStyles/date");
|
|
31
28
|
var _expand = require("../ContentStyles/expand");
|
|
32
29
|
var _extension = require("../ContentStyles/extension");
|
|
33
|
-
var
|
|
30
|
+
var _panel = require("../ContentStyles/panel");
|
|
34
31
|
var _status = require("../ContentStyles/status");
|
|
35
32
|
var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
|
|
36
33
|
var _aiPanel = require("./styles/ai-panel");
|
|
37
34
|
var _annotationStyles = require("./styles/annotationStyles");
|
|
38
35
|
var _backgroundColorStyles = require("./styles/backgroundColorStyles");
|
|
36
|
+
var _codeBlockStyles = require("./styles/codeBlockStyles");
|
|
39
37
|
var _codeMarkStyles = require("./styles/codeMarkStyles");
|
|
40
38
|
var _embedCardStyles = require("./styles/embedCardStyles");
|
|
39
|
+
var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
|
|
41
40
|
var _layout = require("./styles/layout");
|
|
42
41
|
var _link = require("./styles/link");
|
|
43
42
|
var _mediaStyles = require("./styles/mediaStyles");
|
|
44
43
|
var _resizerStyles = require("./styles/resizerStyles");
|
|
45
44
|
var _rule = require("./styles/rule");
|
|
46
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10
|
|
45
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
47
46
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
48
47
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
49
48
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -98,7 +97,7 @@ var vanillaMentionsStyles = (0, _react2.css)({
|
|
|
98
97
|
});
|
|
99
98
|
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)");
|
|
100
99
|
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)");
|
|
101
|
-
var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (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\
|
|
100
|
+
var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (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\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin);
|
|
102
101
|
var reactEmojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (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
102
|
var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (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]));
|
|
104
103
|
|
|
@@ -135,21 +134,13 @@ var placeholderWrapStyles = (0, _react2.css)({
|
|
|
135
134
|
whiteSpace: 'nowrap'
|
|
136
135
|
}
|
|
137
136
|
});
|
|
138
|
-
var firstBlockNodeStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (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);
|
|
139
|
-
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject7 || (_templateObject7 = (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);
|
|
140
|
-
var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
|
|
141
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
|
|
142
|
-
return firstBlockNodeStylesNew;
|
|
143
|
-
}
|
|
144
|
-
return firstBlockNodeStyles;
|
|
145
|
-
};
|
|
146
137
|
|
|
147
138
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
148
139
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
149
140
|
|
|
150
141
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
151
142
|
var contentStyles = function contentStyles() {
|
|
152
|
-
return (0, _react2.css)(
|
|
143
|
+
return (0, _react2.css)(_templateObject6 || (_templateObject6 = (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\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t", "\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, _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (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)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (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, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
153
144
|
exposure: false
|
|
154
145
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
155
146
|
exposure: false
|
|
@@ -163,7 +154,7 @@ var contentStyles = function contentStyles() {
|
|
|
163
154
|
exposure: false
|
|
164
155
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
165
156
|
exposure: false
|
|
166
|
-
}) && !(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, (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, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles,
|
|
157
|
+
}) && !(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, (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, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (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);
|
|
167
158
|
};
|
|
168
159
|
var CommentEditorMargin = 14;
|
|
169
160
|
|
|
@@ -243,7 +234,15 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
243
234
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
244
235
|
colorMode === 'dark' && _aiPanel.aiPanelDarkStyles,
|
|
245
236
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
246
|
-
viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix
|
|
237
|
+
viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ?
|
|
238
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
239
|
+
_codeBlockStyles.firstCodeBlockWithNoMargin :
|
|
240
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
241
|
+
_codeBlockStyles.firstCodeBlockWithNoMarginOld, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6') ?
|
|
242
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
243
|
+
_firstBlockNodeStyles.firstBlockNodeStyles :
|
|
244
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
245
|
+
_firstBlockNodeStyles.firstBlockNodeStylesOld],
|
|
247
246
|
"data-editor-scroll-container": isScrollable ? 'true' : undefined,
|
|
248
247
|
"data-testid": "editor-content-container",
|
|
249
248
|
style: {
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMargin = exports.codeBlockStyles = exports.CodeBlockSharedCssClassName = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _overflowShadowStyles = require("./overflowShadowStyles");
|
|
11
|
+
var _selectionStyles = require("./selectionStyles");
|
|
12
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
13
|
+
|
|
14
|
+
var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
|
|
15
|
+
CODEBLOCK_CONTAINER: 'code-block',
|
|
16
|
+
CODEBLOCK_START: 'code-block--start',
|
|
17
|
+
CODEBLOCK_END: 'code-block--end',
|
|
18
|
+
CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
|
|
19
|
+
CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
|
|
20
|
+
CODEBLOCK_CONTENT: 'code-content',
|
|
21
|
+
DS_CODEBLOCK: '[data-ds--code--code-block]',
|
|
22
|
+
CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
|
|
23
|
+
CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped'
|
|
24
|
+
};
|
|
25
|
+
var fontSize14px = "".concat(14 / 16, "rem");
|
|
26
|
+
var blockNodesVerticalMargin = '0.75rem';
|
|
27
|
+
var gutterDangerOverlay = (0, _react.css)({
|
|
28
|
+
'&::after': {
|
|
29
|
+
height: '100%',
|
|
30
|
+
content: "''",
|
|
31
|
+
position: 'absolute',
|
|
32
|
+
left: 0,
|
|
33
|
+
top: 0,
|
|
34
|
+
width: '24px',
|
|
35
|
+
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
40
|
+
var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
42
|
+
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
|
|
43
|
+
marginRight: "var(--ds-space-100, 8px)",
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
45
|
+
code: {
|
|
46
|
+
display: 'block',
|
|
47
|
+
wordBreak: 'break-word',
|
|
48
|
+
whiteSpace: 'pre-wrap'
|
|
49
|
+
}
|
|
50
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
|
|
51
|
+
display: 'flex',
|
|
52
|
+
flex: 1,
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
54
|
+
code: {
|
|
55
|
+
flexGrow: 1,
|
|
56
|
+
whiteSpace: 'pre'
|
|
57
|
+
}
|
|
58
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
59
|
+
'--ds--code--bg-color': 'transparent',
|
|
60
|
+
position: 'relative',
|
|
61
|
+
backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
|
|
62
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
64
|
+
margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
|
|
65
|
+
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
67
|
+
minWidth: 48,
|
|
68
|
+
cursor: 'pointer',
|
|
69
|
+
clear: 'both',
|
|
70
|
+
// This is necessary to allow for arrow key navigation in/out of code blocks in Firefox.
|
|
71
|
+
whiteSpace: 'normal',
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
73
|
+
'.code-block-gutter-pseudo-element::before': {
|
|
74
|
+
content: 'attr(data-label)'
|
|
75
|
+
}
|
|
76
|
+
}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_START), {
|
|
77
|
+
position: 'absolute',
|
|
78
|
+
visibility: 'hidden',
|
|
79
|
+
height: '1.5rem',
|
|
80
|
+
top: 0,
|
|
81
|
+
left: 0
|
|
82
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_END), {
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
visibility: 'hidden',
|
|
85
|
+
height: '1.5rem',
|
|
86
|
+
bottom: 0,
|
|
87
|
+
right: 0
|
|
88
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), [
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
90
|
+
_overflowShadowStyles.overflowShadowStyles, {
|
|
91
|
+
position: 'relative',
|
|
92
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
93
|
+
display: 'flex',
|
|
94
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
95
|
+
width: '100%',
|
|
96
|
+
counterReset: 'line',
|
|
97
|
+
overflowX: 'auto',
|
|
98
|
+
backgroundRepeat: 'no-repeat',
|
|
99
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
|
|
100
|
+
backgroundSize: "var(--ds-space-300, 24px)".concat(" 100%,\n\t ", "var(--ds-space-300, 24px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%"),
|
|
101
|
+
backgroundPosition: "0 0,\n\t 0 0,\n 100% 0,\n 100% 0,\n 100% 0,\n 100% 0,\n\t 0 0,\n\t 0 0",
|
|
102
|
+
// Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers.
|
|
103
|
+
overflowY: 'hidden'
|
|
104
|
+
}]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), {
|
|
105
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
106
|
+
position: 'relative',
|
|
107
|
+
width: 'var(--lineNumberGutterWidth, 2rem)',
|
|
108
|
+
padding: "var(--ds-space-100, 8px)",
|
|
109
|
+
flexShrink: 0,
|
|
110
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
111
|
+
fontSize: fontSize14px,
|
|
112
|
+
boxSizing: 'content-box'
|
|
113
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "::before"), {
|
|
114
|
+
content: "'1'",
|
|
115
|
+
visibility: 'hidden',
|
|
116
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
117
|
+
fontSize: fontSize14px,
|
|
118
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
119
|
+
lineHeight: '1.5rem'
|
|
120
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
122
|
+
code: {
|
|
123
|
+
tabSize: 4,
|
|
124
|
+
cursor: 'text',
|
|
125
|
+
color: "var(--ds-text, #172B4D)",
|
|
126
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
127
|
+
margin: "var(--ds-space-100, 8px)",
|
|
128
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
129
|
+
fontSize: fontSize14px,
|
|
130
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
131
|
+
lineHeight: '1.5rem'
|
|
132
|
+
}
|
|
133
|
+
}), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET), {
|
|
134
|
+
pointerEvents: 'none',
|
|
135
|
+
userSelect: 'none',
|
|
136
|
+
width: 'var(--lineNumberGutterWidth, 2rem)',
|
|
137
|
+
left: 0,
|
|
138
|
+
position: 'absolute',
|
|
139
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
140
|
+
fontSize: fontSize14px,
|
|
141
|
+
padding: "0px ".concat("var(--ds-space-100, 8px)"),
|
|
142
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
143
|
+
lineHeight: '1.5rem',
|
|
144
|
+
textAlign: 'right',
|
|
145
|
+
color: "var(--ds-text-subtlest, #505F79)",
|
|
146
|
+
boxSizing: 'content-box'
|
|
147
|
+
})), "li", {
|
|
148
|
+
// if same list item has multiple code blocks we need top margin for all but first
|
|
149
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
150
|
+
'> .code-block': {
|
|
151
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
152
|
+
margin: "".concat(blockNodesVerticalMargin, " 0 0 0")
|
|
153
|
+
},
|
|
154
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
155
|
+
'> .code-block:first-child, > .ProseMirror-gapcursor:first-child + .code-block': {
|
|
156
|
+
marginTop: 0
|
|
157
|
+
},
|
|
158
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
159
|
+
'> div:last-of-type.code-block, > pre:last-of-type.code-block': {
|
|
160
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
161
|
+
marginBottom: blockNodesVerticalMargin
|
|
162
|
+
}
|
|
163
|
+
}), ".code-block.ak-editor-selected-node:not(.danger)", [
|
|
164
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
165
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
166
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
167
|
+
_selectionStyles.blanketSelectionStyles,
|
|
168
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
169
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles]), '.danger.code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
170
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
171
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
|
|
172
|
+
}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
|
|
173
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)",
|
|
174
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
175
|
+
color: "var(--ds-text-danger, #AE2E24)"
|
|
176
|
+
}, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
|
|
177
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
178
|
+
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
|
|
179
|
+
})), '.danger .code-block', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
|
|
180
|
+
backgroundColor: "var(--ds-background-danger, #FFECEB)",
|
|
181
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
182
|
+
color: "var(--ds-text-danger, #AE2E24)"
|
|
183
|
+
}, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
|
|
184
|
+
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
|
|
185
|
+
}))
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
189
|
+
var firstCodeBlockWithNoMargin = exports.firstCodeBlockWithNoMargin = (0, _react.css)({
|
|
190
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
191
|
+
'.ProseMirror': {
|
|
192
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
193
|
+
'.ak-editor-panel__content': {
|
|
194
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
195
|
+
'> .code-block:first-child, > .ProseMirror-widget:first-child + .code-block, > .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block': {
|
|
196
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
|
|
197
|
+
margin: '0!important'
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
204
|
+
var firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMarginOld = (0, _react.css)({
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
206
|
+
'.ProseMirror': {
|
|
207
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
208
|
+
'.ak-editor-panel__content': {
|
|
209
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
210
|
+
'> .code-block:first-child': {
|
|
211
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
|
|
212
|
+
margin: '0!important'
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
});
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.firstBlockNodeStylesOld = exports.firstBlockNodeStyles = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _panel = require("@atlaskit/editor-common/panel");
|
|
11
|
+
var _styles = require("@atlaskit/editor-common/styles");
|
|
12
|
+
var _codeBlockStyles = require("./codeBlockStyles");
|
|
13
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
14
|
+
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
16
|
+
var firstBlockNodeStylesOld = exports.firstBlockNodeStylesOld = (0, _react.css)({
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
18
|
+
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .".concat(_panel.PanelSharedCssClassName.prefix, ", > .").concat(_codeBlockStyles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(_styles.expandClassNames.prefix), {
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
20
|
+
'&:first-child': {
|
|
21
|
+
marginTop: 0
|
|
22
|
+
}
|
|
23
|
+
}), '> hr:first-of-type', {
|
|
24
|
+
marginTop: 0
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
29
|
+
var firstBlockNodeStyles = exports.firstBlockNodeStyles = (0, _react.css)({
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
31
|
+
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .".concat(_panel.PanelSharedCssClassName.prefix, ", > .").concat(_codeBlockStyles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(_styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(_styles.expandClassNames.prefix), {
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
33
|
+
'&:first-child': {
|
|
34
|
+
marginTop: 0
|
|
35
|
+
}
|
|
36
|
+
}), '> hr:first-child, > .ProseMirror-widget:first-child + hr', {
|
|
37
|
+
marginTop: 0
|
|
38
|
+
})
|
|
39
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.overflowShadowStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
+
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
11
|
+
var overflowShadowStyles = exports.overflowShadowStyles = (0, _react.css)({
|
|
12
|
+
backgroundImage: "\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t)\n\t")
|
|
13
|
+
});
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.hideNativeBrowserTextSelectionStyles = exports.boxShadowSelectionStyles = exports.borderSelectionStyles = exports.blanketSelectionStyles = exports.backgroundSelectionStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
+
|
|
10
|
+
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
12
|
+
var hideNativeBrowserTextSelectionStyles = exports.hideNativeBrowserTextSelectionStyles = (0, _react.css)({
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
14
|
+
'&::selection,*::selection': {
|
|
15
|
+
backgroundColor: 'transparent'
|
|
16
|
+
},
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
18
|
+
'&::-moz-selection,*::-moz-selection': {
|
|
19
|
+
backgroundColor: 'transparent'
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
25
|
+
var borderSelectionStyles = exports.borderSelectionStyles = (0, _react.css)({
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
27
|
+
border: "1px solid ".concat("var(--ds-border-selected, #0C66E4)"),
|
|
28
|
+
// Fixes ED-15246: Trello card is visible through a border of a table border
|
|
29
|
+
'&::after': {
|
|
30
|
+
height: '100%',
|
|
31
|
+
content: '"\\00a0"',
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
|
+
background: "var(--ds-border-selected, #0C66E4)",
|
|
34
|
+
position: 'absolute',
|
|
35
|
+
right: -1,
|
|
36
|
+
top: 0,
|
|
37
|
+
bottom: 0,
|
|
38
|
+
width: 1,
|
|
39
|
+
border: 'none',
|
|
40
|
+
display: 'inline-block'
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
46
|
+
var boxShadowSelectionStyles = exports.boxShadowSelectionStyles = (0, _react.css)({
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
|
|
49
|
+
borderColor: 'transparent'
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
54
|
+
var backgroundSelectionStyles = exports.backgroundSelectionStyles = (0, _react.css)({
|
|
55
|
+
backgroundColor: "var(--ds-background-selected, #E9F2FF)"
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
60
|
+
var blanketSelectionStyles = exports.blanketSelectionStyles = (0, _react.css)({
|
|
61
|
+
position: 'relative',
|
|
62
|
+
// Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
|
|
63
|
+
// in Safari. Looks like it's caused by user-select: all in the emoji element
|
|
64
|
+
'-webkit-user-select': 'text',
|
|
65
|
+
'&::before': {
|
|
66
|
+
position: 'absolute',
|
|
67
|
+
content: "''",
|
|
68
|
+
left: 0,
|
|
69
|
+
right: 0,
|
|
70
|
+
top: 0,
|
|
71
|
+
bottom: 0,
|
|
72
|
+
width: '100%',
|
|
73
|
+
pointerEvents: 'none',
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
75
|
+
zIndex: 12,
|
|
76
|
+
backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
|
|
77
|
+
}
|
|
78
|
+
});
|