@atlaskit/editor-core 208.4.0 → 208.5.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 +28 -0
- package/dist/cjs/create-editor/ReactEditorView/focusEditorElement.js +3 -1
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
- package/dist/cjs/ui/ContentStyles/index.js +12 -2
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +5 -2
- package/dist/cjs/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
- package/dist/cjs/ui/EditorContentContainer/styles/mentions.js +12 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/create-editor/ReactEditorView/focusEditorElement.js +3 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
- package/dist/es2019/ui/ContentStyles/index.js +11 -0
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +6 -3
- package/dist/es2019/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
- package/dist/es2019/ui/EditorContentContainer/styles/mentions.js +11 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/create-editor/ReactEditorView/focusEditorElement.js +3 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +2 -19
- package/dist/esm/ui/ContentStyles/index.js +12 -2
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +6 -3
- package/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.js +57 -6
- package/dist/esm/ui/EditorContentContainer/styles/mentions.js +11 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/mentions.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/mentions.d.ts +1 -0
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 208.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#175370](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/175370)
|
|
8
|
+
[`fb5f9531ef9d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb5f9531ef9d8) -
|
|
9
|
+
[ux] [ED-27956] this PR is adding support for Find with expand titles and updating the search
|
|
10
|
+
match styles behind the experiment `platform_editor_find_and_replace_improvements`
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 208.4.1
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [#176892](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176892)
|
|
21
|
+
[`7c387af73cfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7c387af73cfb2) -
|
|
22
|
+
[ux] Prevent scroll on focus before editor
|
|
23
|
+
- [#176864](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176864)
|
|
24
|
+
[`980fda095ab20`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/980fda095ab20) -
|
|
25
|
+
[ux] Adjust mention styles to use flex centering instead of fixed padding values
|
|
26
|
+
- [#177647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/177647)
|
|
27
|
+
[`422759e00f33d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/422759e00f33d) -
|
|
28
|
+
ED-28282 Clean up platform_editor_fix_table_width_inline_comment
|
|
29
|
+
- Updated dependencies
|
|
30
|
+
|
|
3
31
|
## 208.4.0
|
|
4
32
|
|
|
5
33
|
### Minor Changes
|
|
@@ -55,7 +55,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
|
55
55
|
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
56
56
|
fullWidthMode = _ref.fullWidthMode,
|
|
57
57
|
isEditorToolbarHidden = _ref.isEditorToolbarHidden;
|
|
58
|
-
return [editorContentArea, editorContentAreaProsemirrorStyle,
|
|
58
|
+
return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
59
59
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
60
60
|
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
61
61
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -162,23 +162,6 @@ var editorContentAreaProsemirrorStyle = (0, _react2.css)({
|
|
|
162
162
|
marginBottom: "var(--ds-space-300, 24px)"
|
|
163
163
|
})
|
|
164
164
|
});
|
|
165
|
-
var fullWidthModeBreakoutBlockTableStyle = (0, _react2.css)({
|
|
166
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
167
|
-
'.fabric-editor--full-width-mode': {
|
|
168
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
169
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
170
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
171
|
-
width: '100% !important'
|
|
172
|
-
},
|
|
173
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
174
|
-
'.fabric-editor-breakout-mark': {
|
|
175
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
176
|
-
marginLeft: 'unset !important',
|
|
177
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
178
|
-
transform: 'none !important'
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
});
|
|
182
165
|
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
|
|
183
166
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
184
167
|
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
@@ -410,7 +393,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
410
393
|
editorView: props.editorView,
|
|
411
394
|
editorDisabled: props.disabled
|
|
412
395
|
}, (0, _react2.jsx)("div", {
|
|
413
|
-
css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew,
|
|
396
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
414
397
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
415
398
|
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : (0, _toConsumableArray2.default)(editorContentAreaStyle({
|
|
416
399
|
fullWidthMode: fullWidthMode,
|
|
@@ -100,6 +100,16 @@ var mentionNodeStyles = (0, _react2.css)({
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
});
|
|
103
|
+
|
|
104
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
105
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
106
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
107
|
+
var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = (0, _react2.css)({
|
|
108
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
109
|
+
'.editor-mention-primitive': {
|
|
110
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
111
|
+
}
|
|
112
|
+
});
|
|
103
113
|
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)");
|
|
104
114
|
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)");
|
|
105
115
|
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\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined 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 : '');
|
|
@@ -157,9 +167,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
157
167
|
// Under editor experiment platform_editor_core_static_emotion
|
|
158
168
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
159
169
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
160
|
-
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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.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\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 /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
170
|
+
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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.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\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\t", "\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\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
161
171
|
theme: props.theme
|
|
162
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (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)(_templateObject1 || (_templateObject1 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, 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, (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), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
172
|
+
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (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)(_templateObject1 || (_templateObject1 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, 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, (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), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
163
173
|
exposure: false
|
|
164
174
|
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
165
175
|
exposure: false
|
|
@@ -10,6 +10,7 @@ var _react2 = require("@emotion/react");
|
|
|
10
10
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
14
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
14
15
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
16
|
var _tokens = require("@atlaskit/tokens");
|
|
@@ -186,7 +187,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
186
187
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
187
188
|
_expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
188
189
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
189
|
-
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0,
|
|
190
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0, _expValEquals.expValEquals)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
190
191
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
191
192
|
_findReplaceStyles.findReplaceStylesNew :
|
|
192
193
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -318,7 +319,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
318
319
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
319
320
|
_mentions.mentionNodeStyles,
|
|
320
321
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
321
|
-
_mentions.mentionsSelectionStyles, (0,
|
|
322
|
+
_mentions.mentionsSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') &&
|
|
323
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
324
|
+
_mentions.mentionsStylesMixin_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
322
325
|
exposure: false
|
|
323
326
|
}) ?
|
|
324
327
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -24,15 +24,32 @@ var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
|
|
|
24
24
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
25
25
|
var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
|
|
26
26
|
/** Text match styles */
|
|
27
|
+
|
|
28
|
+
/** Light mode */
|
|
29
|
+
|
|
27
30
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
-
'.search-match': {
|
|
29
|
-
borderRadius:
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
'.search-match-text': {
|
|
32
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
33
|
+
padding: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
34
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
|
|
35
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
36
|
+
color: "var(--ds-text, #172B4D)"
|
|
32
37
|
},
|
|
33
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
34
|
-
'.search-match-selected': {
|
|
35
|
-
backgroundColor: "var(--ds-background-accent-
|
|
39
|
+
'.search-match-text.selected-search-match': {
|
|
40
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
41
|
+
},
|
|
42
|
+
/** Dark mode */
|
|
43
|
+
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
45
|
+
'.search-match-text.search-match-dark': {
|
|
46
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
|
|
47
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
48
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
49
|
+
},
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
51
|
+
'.search-match-text.selected-search-match.search-match-dark': {
|
|
52
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
36
53
|
},
|
|
37
54
|
/** Block match styles */
|
|
38
55
|
|
|
@@ -138,5 +155,39 @@ var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
|
|
|
138
155
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
139
156
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
|
|
140
157
|
}
|
|
158
|
+
},
|
|
159
|
+
/** Expand title match styles */
|
|
160
|
+
|
|
161
|
+
/** Light mode */
|
|
162
|
+
|
|
163
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
164
|
+
'.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
165
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
166
|
+
padding: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
167
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
|
|
168
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
169
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
170
|
+
'.ak-editor-expand__title-input': {
|
|
171
|
+
color: "var(--ds-text, #172B4D)"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
175
|
+
'.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
176
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
177
|
+
},
|
|
178
|
+
/** Dark mode */
|
|
179
|
+
|
|
180
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
181
|
+
'.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
182
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
|
|
183
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
184
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
185
|
+
'.ak-editor-expand__title-input': {
|
|
186
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
190
|
+
'.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
191
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
141
192
|
}
|
|
142
193
|
});
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
|
|
7
|
+
exports.mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _mention = require("@atlaskit/editor-common/mention");
|
|
@@ -85,6 +85,17 @@ var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.css)({
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
|
|
88
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
89
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
90
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
92
|
+
var mentionsStylesMixin_platform_editor_centre_mention_padding = exports.mentionsStylesMixin_platform_editor_centre_mention_padding = (0, _react.css)({
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
94
|
+
'.editor-mention-primitive': {
|
|
95
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
|
|
88
99
|
// This is mentions styles for mentions selection styles based on the vanilla node view
|
|
89
100
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
90
101
|
var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
|
|
@@ -41,7 +41,7 @@ const editorContentAreaStyle = ({
|
|
|
41
41
|
layoutMaxWidth,
|
|
42
42
|
fullWidthMode,
|
|
43
43
|
isEditorToolbarHidden
|
|
44
|
-
}) => [editorContentArea, editorContentAreaProsemirrorStyle,
|
|
44
|
+
}) => [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
45
45
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
46
46
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle(), ...(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
|
|
47
47
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -145,23 +145,6 @@ const editorContentAreaProsemirrorStyle = css({
|
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
});
|
|
148
|
-
const fullWidthModeBreakoutBlockTableStyle = css({
|
|
149
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
150
|
-
'.fabric-editor--full-width-mode': {
|
|
151
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
152
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
153
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
154
|
-
width: '100% !important'
|
|
155
|
-
},
|
|
156
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
157
|
-
'.fabric-editor-breakout-mark': {
|
|
158
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
159
|
-
marginLeft: 'unset !important',
|
|
160
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
161
|
-
transform: 'none !important'
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
148
|
const fullWidthNonChromelessBreakoutBlockTableStyle = css({
|
|
166
149
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
167
150
|
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
@@ -389,7 +372,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
389
372
|
editorView: props.editorView,
|
|
390
373
|
editorDisabled: props.disabled
|
|
391
374
|
}, jsx("div", {
|
|
392
|
-
css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew,
|
|
375
|
+
css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
393
376
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
394
377
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : [
|
|
395
378
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
@@ -109,6 +109,16 @@ const mentionNodeStyles = css({
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
|
+
|
|
113
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
114
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
115
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
116
|
+
const mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
118
|
+
'.editor-mention-primitive': {
|
|
119
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
120
|
+
}
|
|
121
|
+
});
|
|
112
122
|
const vanillaSelectionStyles = css`
|
|
113
123
|
.danger {
|
|
114
124
|
.editor-mention-primitive {
|
|
@@ -413,6 +423,7 @@ const legacyContentStyles = props => css`
|
|
|
413
423
|
${panelStyles()}
|
|
414
424
|
${mentionsStyles}
|
|
415
425
|
${mentionNodeStyles}
|
|
426
|
+
${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
|
|
416
427
|
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
417
428
|
exposure: false
|
|
418
429
|
}) && vanillaSelectionStyles}
|
|
@@ -11,6 +11,7 @@ import { jsx, useTheme } from '@emotion/react';
|
|
|
11
11
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
12
12
|
import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
15
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
15
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
16
17
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
@@ -42,7 +43,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
|
|
|
42
43
|
import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
|
|
43
44
|
import { listsStyles, listsStylesSafariFix } from './styles/list';
|
|
44
45
|
import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
|
|
45
|
-
import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
|
|
46
|
+
import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } from './styles/mentions';
|
|
46
47
|
import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
|
|
47
48
|
import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
|
|
48
49
|
import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
|
|
@@ -181,7 +182,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
181
182
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
182
183
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
183
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
184
|
-
fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons,
|
|
185
|
+
fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
185
186
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
186
187
|
findReplaceStylesNew :
|
|
187
188
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -313,7 +314,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
313
314
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
314
315
|
mentionNodeStyles,
|
|
315
316
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
316
|
-
mentionsSelectionStyles,
|
|
317
|
+
mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
|
|
318
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
319
|
+
mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
317
320
|
exposure: false
|
|
318
321
|
}) ?
|
|
319
322
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -17,15 +17,32 @@ export const findReplaceStyles = css({
|
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
18
|
export const findReplaceStylesNew = css({
|
|
19
19
|
/** Text match styles */
|
|
20
|
+
|
|
21
|
+
/** Light mode */
|
|
22
|
+
|
|
20
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
21
|
-
'.search-match': {
|
|
22
|
-
borderRadius:
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
'.search-match-text': {
|
|
25
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
26
|
+
padding: `${"var(--ds-space-050, 4px)"} 0`,
|
|
27
|
+
border: `1px solid ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
|
|
28
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
29
|
+
color: "var(--ds-text, #172B4D)"
|
|
25
30
|
},
|
|
26
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
27
|
-
'.search-match-selected': {
|
|
28
|
-
backgroundColor: "var(--ds-background-accent-
|
|
32
|
+
'.search-match-text.selected-search-match': {
|
|
33
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
34
|
+
},
|
|
35
|
+
/** Dark mode */
|
|
36
|
+
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
38
|
+
'.search-match-text.search-match-dark': {
|
|
39
|
+
border: `1px solid ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
|
|
40
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
41
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
42
|
+
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
44
|
+
'.search-match-text.selected-search-match.search-match-dark': {
|
|
45
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
29
46
|
},
|
|
30
47
|
/** Block match styles */
|
|
31
48
|
|
|
@@ -159,5 +176,39 @@ export const findReplaceStylesNew = css({
|
|
|
159
176
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
160
177
|
boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}, 0px 0px 0px 4px ${"var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"}, 0px 0px 0px 5px ${"var(--ds-background-accent-yellow-bolder, #946F00)"} !important`
|
|
161
178
|
}
|
|
179
|
+
},
|
|
180
|
+
/** Expand title match styles */
|
|
181
|
+
|
|
182
|
+
/** Light mode */
|
|
183
|
+
|
|
184
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
185
|
+
'.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
186
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
187
|
+
padding: `${"var(--ds-space-050, 4px)"} 0`,
|
|
188
|
+
border: `1px solid ${"var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"}`,
|
|
189
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
190
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
191
|
+
'.ak-editor-expand__title-input': {
|
|
192
|
+
color: "var(--ds-text, #172B4D)"
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
196
|
+
'.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
197
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
198
|
+
},
|
|
199
|
+
/** Dark mode */
|
|
200
|
+
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
202
|
+
'.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
203
|
+
border: `1px solid ${"var(--ds-background-accent-yellow-bolder, #946F00)"}`,
|
|
204
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
206
|
+
'.ak-editor-expand__title-input': {
|
|
207
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
211
|
+
'.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
212
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
162
213
|
}
|
|
163
214
|
});
|
|
@@ -91,6 +91,17 @@ export const mentionNodeStyles = css({
|
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
|
|
94
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
95
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
96
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
98
|
+
export const mentionsStylesMixin_platform_editor_centre_mention_padding = css({
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
100
|
+
'.editor-mention-primitive': {
|
|
101
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
|
|
94
105
|
// This is mentions styles for mentions selection styles based on the vanilla node view
|
|
95
106
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
96
107
|
export const mentionsSelectionStyles = css({
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "208.
|
|
2
|
+
export const version = "208.4.1";
|
|
@@ -45,7 +45,7 @@ var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
|
45
45
|
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
46
46
|
fullWidthMode = _ref.fullWidthMode,
|
|
47
47
|
isEditorToolbarHidden = _ref.isEditorToolbarHidden;
|
|
48
|
-
return [editorContentArea, editorContentAreaProsemirrorStyle,
|
|
48
|
+
return [editorContentArea, editorContentAreaProsemirrorStyle, fullWidthNonChromelessBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
49
49
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
50
50
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat(_toConsumableArray(fg('platform_editor_controls_no_toolbar_space') ? [] : [editorExperiment('platform_editor_controls', 'variant1') &&
|
|
51
51
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -152,23 +152,6 @@ var editorContentAreaProsemirrorStyle = css({
|
|
|
152
152
|
marginBottom: "var(--ds-space-300, 24px)"
|
|
153
153
|
})
|
|
154
154
|
});
|
|
155
|
-
var fullWidthModeBreakoutBlockTableStyle = css({
|
|
156
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
157
|
-
'.fabric-editor--full-width-mode': {
|
|
158
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
159
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
160
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
161
|
-
width: '100% !important'
|
|
162
|
-
},
|
|
163
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
164
|
-
'.fabric-editor-breakout-mark': {
|
|
165
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
166
|
-
marginLeft: 'unset !important',
|
|
167
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
168
|
-
transform: 'none !important'
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
155
|
var fullWidthNonChromelessBreakoutBlockTableStyle = css({
|
|
173
156
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
174
157
|
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
@@ -400,7 +383,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
400
383
|
editorView: props.editorView,
|
|
401
384
|
editorDisabled: props.disabled
|
|
402
385
|
}, jsx("div", {
|
|
403
|
-
css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew,
|
|
386
|
+
css: expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
404
387
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
405
388
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : _toConsumableArray(editorContentAreaStyle({
|
|
406
389
|
fullWidthMode: fullWidthMode,
|
|
@@ -93,6 +93,16 @@ var mentionNodeStyles = css({
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
});
|
|
96
|
+
|
|
97
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
98
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
99
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
100
|
+
var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
102
|
+
'.editor-mention-primitive': {
|
|
103
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
104
|
+
}
|
|
105
|
+
});
|
|
96
106
|
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)");
|
|
97
107
|
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)");
|
|
98
108
|
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\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined 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 : '');
|
|
@@ -150,9 +160,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
150
160
|
// Under editor experiment platform_editor_core_static_emotion
|
|
151
161
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
152
162
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
153
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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.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\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 /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
163
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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.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\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\t", "\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\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
154
164
|
theme: props.theme
|
|
155
|
-
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _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(_templateObject1 || (_templateObject1 = _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)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
165
|
+
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _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(_templateObject1 || (_templateObject1 = _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)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
156
166
|
exposure: false
|
|
157
167
|
}) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
158
168
|
exposure: false
|
|
@@ -11,6 +11,7 @@ import { jsx, useTheme } from '@emotion/react';
|
|
|
11
11
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
12
12
|
import { akEditorGutterPaddingDynamic, editorFontSize } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
14
15
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
15
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
16
17
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
@@ -42,7 +43,7 @@ import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderN
|
|
|
42
43
|
import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles, linkStylesOld } from './styles/link';
|
|
43
44
|
import { listsStyles, listsStylesSafariFix } from './styles/list';
|
|
44
45
|
import { mediaAlignmentStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
|
|
45
|
-
import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles } from './styles/mentions';
|
|
46
|
+
import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding } from './styles/mentions';
|
|
46
47
|
import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
|
|
47
48
|
import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
|
|
48
49
|
import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
|
|
@@ -178,7 +179,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
178
179
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
179
180
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
180
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
181
|
-
fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons,
|
|
182
|
+
fg('platform-visual-refresh-icons') && expandStylesMixin_fg_platform_visual_refresh_icons, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
182
183
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
183
184
|
findReplaceStylesNew :
|
|
184
185
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -310,7 +311,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
310
311
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
311
312
|
mentionNodeStyles,
|
|
312
313
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
313
|
-
mentionsSelectionStyles,
|
|
314
|
+
mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
|
|
315
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
316
|
+
mentionsStylesMixin_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
314
317
|
exposure: false
|
|
315
318
|
}) ?
|
|
316
319
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -17,15 +17,32 @@ export var findReplaceStyles = css({
|
|
|
17
17
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
18
|
export var findReplaceStylesNew = css({
|
|
19
19
|
/** Text match styles */
|
|
20
|
+
|
|
21
|
+
/** Light mode */
|
|
22
|
+
|
|
20
23
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
21
|
-
'.search-match': {
|
|
22
|
-
borderRadius:
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
'.search-match-text': {
|
|
25
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
26
|
+
padding: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
27
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
|
|
28
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
29
|
+
color: "var(--ds-text, #172B4D)"
|
|
25
30
|
},
|
|
26
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
27
|
-
'.search-match-selected': {
|
|
28
|
-
backgroundColor: "var(--ds-background-accent-
|
|
32
|
+
'.search-match-text.selected-search-match': {
|
|
33
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
34
|
+
},
|
|
35
|
+
/** Dark mode */
|
|
36
|
+
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
38
|
+
'.search-match-text.search-match-dark': {
|
|
39
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
|
|
40
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
41
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
42
|
+
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
44
|
+
'.search-match-text.selected-search-match.search-match-dark': {
|
|
45
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
29
46
|
},
|
|
30
47
|
/** Block match styles */
|
|
31
48
|
|
|
@@ -131,5 +148,39 @@ export var findReplaceStylesNew = css({
|
|
|
131
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
132
149
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)", ", 0px 0px 0px 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ", 0px 0px 0px 5px ", "var(--ds-background-accent-yellow-bolder, #946F00)", " !important")
|
|
133
150
|
}
|
|
151
|
+
},
|
|
152
|
+
/** Expand title match styles */
|
|
153
|
+
|
|
154
|
+
/** Light mode */
|
|
155
|
+
|
|
156
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
157
|
+
'.search-match-expand-title > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
158
|
+
borderRadius: "var(--ds-space-050, 4px)",
|
|
159
|
+
padding: "var(--ds-space-050, 4px)".concat(" 0"),
|
|
160
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"),
|
|
161
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
|
|
162
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
163
|
+
'.ak-editor-expand__title-input': {
|
|
164
|
+
color: "var(--ds-text, #172B4D)"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
168
|
+
'.search-match-expand-title.selected-search-match > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
169
|
+
backgroundColor: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)"
|
|
170
|
+
},
|
|
171
|
+
/** Dark mode */
|
|
172
|
+
|
|
173
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
174
|
+
'.search-match-expand-title.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
175
|
+
border: "1px solid ".concat("var(--ds-background-accent-yellow-bolder, #946F00)"),
|
|
176
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-pressed, #533F04)",
|
|
177
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
178
|
+
'.ak-editor-expand__title-input': {
|
|
179
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
183
|
+
'.search-match-expand-title.selected-search-match.search-match-dark > .ak-editor-expand__title-container > .ak-editor-expand__input-container': {
|
|
184
|
+
backgroundColor: "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)"
|
|
134
185
|
}
|
|
135
186
|
});
|
|
@@ -78,6 +78,17 @@ export var mentionNodeStyles = css({
|
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
80
|
|
|
81
|
+
// The feature-gate for this is dependent on the use of refreshed typography - bear this in mind when cleaning up
|
|
82
|
+
// This is currently enforced through statsig prerequisite gates, as per #help-afm recommendation.
|
|
83
|
+
// So it will need to be considered if the typography gates are still in use when this is cleaned up.
|
|
84
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
85
|
+
export var mentionsStylesMixin_platform_editor_centre_mention_padding = css({
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
87
|
+
'.editor-mention-primitive': {
|
|
88
|
+
padding: '1px 0.3em 1px 0.23em'
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
81
92
|
// This is mentions styles for mentions selection styles based on the vanilla node view
|
|
82
93
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
83
94
|
export var mentionsSelectionStyles = css(_defineProperty({
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "208.
|
|
2
|
+
export var version = "208.4.1";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
|
|
2
2
|
export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
|
|
3
|
+
export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
|
|
3
4
|
export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export declare const mentionsStyles: import("@emotion/react").SerializedStyles;
|
|
2
2
|
export declare const mentionNodeStyles: import("@emotion/react").SerializedStyles;
|
|
3
|
+
export declare const mentionsStylesMixin_platform_editor_centre_mention_padding: import("@emotion/react").SerializedStyles;
|
|
3
4
|
export declare const mentionsSelectionStyles: import("@emotion/react").SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "208.
|
|
3
|
+
"version": "208.5.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@atlaskit/editor-performance-metrics": "^2.1.0",
|
|
52
52
|
"@atlaskit/editor-plugin-quick-insert": "^2.6.0",
|
|
53
53
|
"@atlaskit/editor-plugin-user-preferences": "^0.2.0",
|
|
54
|
-
"@atlaskit/editor-plugins": "^9.
|
|
54
|
+
"@atlaskit/editor-plugins": "^9.4.0",
|
|
55
55
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
56
56
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
57
57
|
"@atlaskit/emoji": "^69.3.0",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@atlaskit/platform-feature-flags-react": "^0.2.0",
|
|
64
64
|
"@atlaskit/react-ufo": "^3.14.0",
|
|
65
65
|
"@atlaskit/task-decision": "^19.2.0",
|
|
66
|
-
"@atlaskit/tmp-editor-statsig": "^8.
|
|
66
|
+
"@atlaskit/tmp-editor-statsig": "^8.3.0",
|
|
67
67
|
"@atlaskit/tokens": "^5.4.0",
|
|
68
68
|
"@atlaskit/tooltip": "^20.3.0",
|
|
69
69
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -555,9 +555,6 @@
|
|
|
555
555
|
"confluence_team_presence_scroll_to_pointer": {
|
|
556
556
|
"type": "boolean"
|
|
557
557
|
},
|
|
558
|
-
"platform_editor_fix_table_width_inline_comment": {
|
|
559
|
-
"type": "boolean"
|
|
560
|
-
},
|
|
561
558
|
"dst-a11y__replace-anchor-with-link__editor": {
|
|
562
559
|
"type": "boolean"
|
|
563
560
|
},
|
|
@@ -585,6 +582,9 @@
|
|
|
585
582
|
},
|
|
586
583
|
"cc_editor_focus_before_editor_on_load": {
|
|
587
584
|
"type": "boolean"
|
|
585
|
+
},
|
|
586
|
+
"platform_editor_centre_mention_padding": {
|
|
587
|
+
"type": "boolean"
|
|
588
588
|
}
|
|
589
589
|
},
|
|
590
590
|
"stricter": {
|