@atlaskit/editor-core 209.2.0 → 209.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/ui/ContentStyles/index.js +5 -4
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +3 -1
- package/dist/cjs/ui/EditorContentContainer/styles/emoji.js +22 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/index.js +24 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +4 -2
- package/dist/es2019/ui/EditorContentContainer/styles/emoji.js +31 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/index.js +5 -4
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +4 -2
- package/dist/esm/ui/EditorContentContainer/styles/emoji.js +21 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/emoji.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/emoji.d.ts +1 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 209.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#189696](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189696)
|
|
8
|
+
[`a28dd0703ccac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a28dd0703ccac) -
|
|
9
|
+
[ux] Adjust emoji CSS selectors to be more specific/accurate and not target content byline
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 209.2.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -37,7 +37,7 @@ var _media = require("./media");
|
|
|
37
37
|
var _panel2 = require("./panel");
|
|
38
38
|
var _status = require("./status");
|
|
39
39
|
var _tasksAndDecisions = require("./tasks-and-decisions");
|
|
40
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
40
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
|
|
41
41
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
42
42
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
43
43
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -116,6 +116,7 @@ var mentionsSelectionStylesWithSearchMatch = (0, _react2.css)(_templateObject4 |
|
|
|
116
116
|
var mentionsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (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\t(in dark blue) have white text by default */\n\t\t\tcolor: ", ";\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)");
|
|
117
117
|
var listsStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (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 : '');
|
|
118
118
|
var emojiStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\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]));
|
|
119
|
+
var emojiStylesWithSelectorFixes = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ProseMirror\n\t\t:is(.", ", .", ") {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.ProseMirror .", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\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]));
|
|
119
120
|
|
|
120
121
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
121
122
|
var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
|
|
@@ -150,7 +151,7 @@ var placeholderWrapStyles = (0, _react2.css)({
|
|
|
150
151
|
whiteSpace: 'nowrap'
|
|
151
152
|
}
|
|
152
153
|
});
|
|
153
|
-
var firstBlockNodeStylesNew = (0, _react2.css)(
|
|
154
|
+
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
154
155
|
|
|
155
156
|
// Make sure the first floating toolbar button has focus ring when focused via .focus()
|
|
156
157
|
var firstFloatingToolbarButtonStyles = (0, _react2.css)({
|
|
@@ -168,9 +169,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
168
169
|
// Under editor experiment platform_editor_core_static_emotion
|
|
169
170
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
170
171
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
171
|
-
return (0, _react2.css)(
|
|
172
|
+
return (0, _react2.css)(_templateObject0 || (_templateObject0 = (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", "\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\t", "\n /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
|
|
172
173
|
theme: props.theme
|
|
173
|
-
}), _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)(
|
|
174
|
+
}), _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)(_templateObject10 || (_templateObject10 = (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)(_templateObject11 || (_templateObject11 = (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, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (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);
|
|
174
175
|
};
|
|
175
176
|
var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
176
177
|
return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
@@ -345,7 +345,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
345
345
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
346
346
|
_mentions.mentionsSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') &&
|
|
347
347
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
348
|
-
_mentions.mentionsStylesMixin_platform_editor_centre_mention_padding,
|
|
348
|
+
_mentions.mentionsStylesMixin_platform_editor_centre_mention_padding, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ?
|
|
349
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
350
|
+
_emoji.emojiStylesWithSelectorFixes :
|
|
349
351
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
350
352
|
_emoji.emojiStyles,
|
|
351
353
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -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.emojiStyles = void 0;
|
|
7
|
+
exports.emojiStylesWithSelectorFixes = exports.emojiStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
@@ -36,4 +36,25 @@ _selectionStyles.blanketSelectionStyles,
|
|
|
36
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
37
37
|
_selectionStyles.boxShadowSelectionStyles,
|
|
38
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
39
|
+
_selectionStyles.hideNativeBrowserTextSelectionStyles])));
|
|
40
|
+
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
42
|
+
var emojiStylesWithSelectorFixes = exports.emojiStylesWithSelectorFixes = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
|
|
43
|
+
display: 'inline-block'
|
|
44
|
+
}), ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
|
|
45
|
+
background: 'no-repeat transparent',
|
|
46
|
+
display: 'inline-block',
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
+
height: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
50
|
+
maxHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
51
|
+
cursor: 'pointer',
|
|
52
|
+
verticalAlign: 'middle',
|
|
53
|
+
userSelect: 'all'
|
|
54
|
+
}), ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
|
|
55
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
56
|
+
_selectionStyles.blanketSelectionStyles,
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
58
|
+
_selectionStyles.boxShadowSelectionStyles,
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
39
60
|
_selectionStyles.hideNativeBrowserTextSelectionStyles])));
|
|
@@ -238,6 +238,29 @@ const emojiStyles = css`
|
|
|
238
238
|
}
|
|
239
239
|
}
|
|
240
240
|
`;
|
|
241
|
+
const emojiStylesWithSelectorFixes = css`
|
|
242
|
+
.ProseMirror .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
|
|
243
|
+
display: inline-block;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.ProseMirror
|
|
247
|
+
:is(.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}) {
|
|
248
|
+
background: no-repeat transparent;
|
|
249
|
+
display: inline-block;
|
|
250
|
+
height: ${defaultEmojiHeight}px;
|
|
251
|
+
max-height: ${defaultEmojiHeight}px;
|
|
252
|
+
cursor: pointer;
|
|
253
|
+
vertical-align: middle;
|
|
254
|
+
user-select: all;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.ProseMirror .${akEditorSelectedNodeClassName} {
|
|
258
|
+
.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
|
|
259
|
+
border-radius: 2px;
|
|
260
|
+
${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
`;
|
|
241
264
|
|
|
242
265
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
243
266
|
export const placeholderStyles = css({
|
|
@@ -440,7 +463,7 @@ const legacyContentStyles = props => css`
|
|
|
440
463
|
${mentionNodeStyles}
|
|
441
464
|
${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
|
|
442
465
|
${expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles}
|
|
443
|
-
${emojiStyles}
|
|
466
|
+
${fg('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles}
|
|
444
467
|
${tasksAndDecisionsStyles}
|
|
445
468
|
${gridStyles}
|
|
446
469
|
${linkStyles}
|
|
@@ -29,7 +29,7 @@ import { cursorStyles } from './styles/cursorStyles';
|
|
|
29
29
|
import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
|
|
30
30
|
import { editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
31
31
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
32
|
-
import { emojiStyles } from './styles/emoji';
|
|
32
|
+
import { emojiStyles, emojiStylesWithSelectorFixes } from './styles/emoji';
|
|
33
33
|
import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
|
|
34
34
|
import { extensionStyles } from './styles/extensionStyles';
|
|
35
35
|
import { findReplaceStyles, findReplaceStylesNew, findReplaceStylesNewNoImportant } from './styles/findReplaceStyles';
|
|
@@ -340,7 +340,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
340
340
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
341
341
|
mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
|
|
342
342
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
343
|
-
mentionsStylesMixin_platform_editor_centre_mention_padding,
|
|
343
|
+
mentionsStylesMixin_platform_editor_centre_mention_padding, fg('platform_editor_fix_emoji_style_selectors') ?
|
|
344
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
345
|
+
emojiStylesWithSelectorFixes :
|
|
344
346
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
345
347
|
emojiStyles,
|
|
346
348
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -37,4 +37,35 @@ export const emojiStyles = css({
|
|
|
37
37
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
38
38
|
hideNativeBrowserTextSelectionStyles]
|
|
39
39
|
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
43
|
+
export const emojiStylesWithSelectorFixes = css({
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
45
|
+
[`.ProseMirror .${EmojiSharedCssClassName.EMOJI_CONTAINER}`]: {
|
|
46
|
+
display: 'inline-block'
|
|
47
|
+
},
|
|
48
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
49
|
+
[`.ProseMirror :is(.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE})`]: {
|
|
50
|
+
background: 'no-repeat transparent',
|
|
51
|
+
display: 'inline-block',
|
|
52
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
53
|
+
height: `${defaultEmojiHeight}px`,
|
|
54
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
55
|
+
maxHeight: `${defaultEmojiHeight}px`,
|
|
56
|
+
cursor: 'pointer',
|
|
57
|
+
verticalAlign: 'middle',
|
|
58
|
+
userSelect: 'all'
|
|
59
|
+
},
|
|
60
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
61
|
+
[`.ProseMirror .${akEditorSelectedNodeClassName}`]: {
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
63
|
+
[`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: [emojiSelectionStyles,
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
65
|
+
blanketSelectionStyles,
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
67
|
+
boxShadowSelectionStyles,
|
|
68
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
69
|
+
hideNativeBrowserTextSelectionStyles]
|
|
70
|
+
}
|
|
40
71
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "209.
|
|
2
|
+
export const version = "209.2.0";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
4
4
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
5
5
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -110,6 +110,7 @@ var mentionsSelectionStylesWithSearchMatch = css(_templateObject4 || (_templateO
|
|
|
110
110
|
var mentionsStyles = css(_templateObject5 || (_templateObject5 = _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\t\t\t(in dark blue) have white text by default */\n\t\t\tcolor: ", ";\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)");
|
|
111
111
|
var listsStyles = css(_templateObject6 || (_templateObject6 = _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 : '');
|
|
112
112
|
var emojiStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
|
|
113
|
+
var emojiStylesWithSelectorFixes = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ProseMirror\n\t\t:is(.", ", .", ") {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.ProseMirror .", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
|
|
113
114
|
|
|
114
115
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
115
116
|
export var placeholderStyles = css({
|
|
@@ -144,7 +145,7 @@ var placeholderWrapStyles = css({
|
|
|
144
145
|
whiteSpace: 'nowrap'
|
|
145
146
|
}
|
|
146
147
|
});
|
|
147
|
-
var firstBlockNodeStylesNew = css(
|
|
148
|
+
var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
|
|
148
149
|
|
|
149
150
|
// Make sure the first floating toolbar button has focus ring when focused via .focus()
|
|
150
151
|
var firstFloatingToolbarButtonStyles = css({
|
|
@@ -162,9 +163,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
162
163
|
// Under editor experiment platform_editor_core_static_emotion
|
|
163
164
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
164
165
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
165
|
-
return css(
|
|
166
|
+
return css(_templateObject0 || (_templateObject0 = _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", "\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\t", "\n /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced) : null, editorFontSize({
|
|
166
167
|
theme: props.theme
|
|
167
|
-
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(
|
|
168
|
+
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _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(_templateObject11 || (_templateObject11 = _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, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, fg('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? fg('platform_editor_find_and_replace_improvements_1') ? findReplaceStylesNewNoImportant : findReplaceStylesNew : findReplaceStyles, textHighlightStyle, taskDecisionStyles, taskItemStyles, fg('platform-visual-refresh-icons') && decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') && decisionIconWithoutVisualRefresh, statusStyles(), statusNodeStyles(), annotationSharedStyles(), smartCardStyles(), getSmartCardSharedStyles(), dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), pragmaticResizerStylesWithReducedEditorGutter(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
168
169
|
};
|
|
169
170
|
export var createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
170
171
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -29,7 +29,7 @@ import { cursorStyles } from './styles/cursorStyles';
|
|
|
29
29
|
import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
|
|
30
30
|
import { editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
31
31
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
32
|
-
import { emojiStyles } from './styles/emoji';
|
|
32
|
+
import { emojiStyles, emojiStylesWithSelectorFixes } from './styles/emoji';
|
|
33
33
|
import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
|
|
34
34
|
import { extensionStyles } from './styles/extensionStyles';
|
|
35
35
|
import { findReplaceStyles, findReplaceStylesNew, findReplaceStylesNewNoImportant } from './styles/findReplaceStyles';
|
|
@@ -337,7 +337,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
337
337
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
338
338
|
mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
|
|
339
339
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
340
|
-
mentionsStylesMixin_platform_editor_centre_mention_padding,
|
|
340
|
+
mentionsStylesMixin_platform_editor_centre_mention_padding, fg('platform_editor_fix_emoji_style_selectors') ?
|
|
341
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
342
|
+
emojiStylesWithSelectorFixes :
|
|
341
343
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
342
344
|
emojiStyles,
|
|
343
345
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -28,4 +28,25 @@ blanketSelectionStyles,
|
|
|
28
28
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
29
29
|
boxShadowSelectionStyles,
|
|
30
30
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
31
|
+
hideNativeBrowserTextSelectionStyles])));
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
34
|
+
export var emojiStylesWithSelectorFixes = css(_defineProperty(_defineProperty(_defineProperty({}, ".ProseMirror .".concat(EmojiSharedCssClassName.EMOJI_CONTAINER), {
|
|
35
|
+
display: 'inline-block'
|
|
36
|
+
}), ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
|
|
37
|
+
background: 'no-repeat transparent',
|
|
38
|
+
display: 'inline-block',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
40
|
+
height: "".concat(defaultEmojiHeight, "px"),
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
42
|
+
maxHeight: "".concat(defaultEmojiHeight, "px"),
|
|
43
|
+
cursor: 'pointer',
|
|
44
|
+
verticalAlign: 'middle',
|
|
45
|
+
userSelect: 'all'
|
|
46
|
+
}), ".ProseMirror .".concat(akEditorSelectedNodeClassName), _defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
48
|
+
blanketSelectionStyles,
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
50
|
+
boxShadowSelectionStyles,
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
31
52
|
hideNativeBrowserTextSelectionStyles])));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "209.
|
|
2
|
+
export var version = "209.2.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "209.2.
|
|
3
|
+
"version": "209.2.1",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
54
54
|
"@atlaskit/editor-shared-styles": "^3.5.0",
|
|
55
55
|
"@atlaskit/emoji": "^69.3.0",
|
|
56
|
-
"@atlaskit/icon": "^27.
|
|
56
|
+
"@atlaskit/icon": "^27.6.0",
|
|
57
57
|
"@atlaskit/link": "^3.2.0",
|
|
58
58
|
"@atlaskit/media-card": "^79.4.0",
|
|
59
59
|
"@atlaskit/mention": "^24.2.0",
|
|
@@ -103,8 +103,8 @@
|
|
|
103
103
|
"@atlaskit/modal-dialog": "^14.3.0",
|
|
104
104
|
"@atlaskit/primitives": "^14.10.0",
|
|
105
105
|
"@atlaskit/renderer": "^120.1.0",
|
|
106
|
-
"@atlaskit/section-message": "^8.
|
|
107
|
-
"@atlaskit/smart-card": "^40.
|
|
106
|
+
"@atlaskit/section-message": "^8.3.0",
|
|
107
|
+
"@atlaskit/smart-card": "^40.5.0",
|
|
108
108
|
"@atlaskit/synchrony-test-helpers": "workspace:^",
|
|
109
109
|
"@atlaskit/toggle": "^15.0.0",
|
|
110
110
|
"@atlaskit/util-data-test": "^18.0.0",
|
|
@@ -576,6 +576,9 @@
|
|
|
576
576
|
"platform_editor_task_check_status_fix": {
|
|
577
577
|
"type": "boolean",
|
|
578
578
|
"referenceOnly": true
|
|
579
|
+
},
|
|
580
|
+
"platform_editor_fix_emoji_style_selectors": {
|
|
581
|
+
"type": "boolean"
|
|
579
582
|
}
|
|
580
583
|
},
|
|
581
584
|
"stricter": {
|