@atlaskit/editor-core 207.11.1 → 207.12.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 CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 207.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#161680](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161680)
8
+ [`8d9e4eea33298`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d9e4eea33298) -
9
+ [https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor lists CSS in
10
+ static emotion
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 207.11.2
17
+
18
+ ### Patch Changes
19
+
20
+ - [#160456](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160456)
21
+ [`f1c9353c46649`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1c9353c46649) -
22
+ [ux] ED-28026 fix resize handle styles for pragmatic-dnd resizer
23
+ - Updated dependencies
24
+
3
25
  ## 207.11.1
4
26
 
5
27
  ### Patch Changes
@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _react2 = require("@emotion/react");
11
11
  var _browser = require("@atlaskit/editor-common/browser");
12
- var _collab = require("@atlaskit/editor-common/collab");
13
12
  var _selection = require("@atlaskit/editor-common/selection");
14
13
  var _styles = require("@atlaskit/editor-common/styles");
15
14
  var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
@@ -51,6 +50,7 @@ var _rule = require("./styles/rule");
51
50
  var _shadowStyles = require("./styles/shadowStyles");
52
51
  var _smartCardStyles = require("./styles/smartCardStyles");
53
52
  var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
53
+ var _telepointerStyles = require("./styles/telepointerStyles");
54
54
  var _textColorStyles = require("./styles/textColorStyles");
55
55
  var _unsupportedStyles = require("./styles/unsupportedStyles");
56
56
  var _whitespaceStyles = require("./styles/whitespaceStyles");
@@ -104,7 +104,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
104
104
 
105
105
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
106
106
  var contentStyles = function contentStyles() {
107
- return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
107
+ return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n ", "\n\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
108
108
  exposure: false
109
109
  }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
110
110
  exposure: false
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.listsStylesSafariFix = exports.listsStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
10
+ // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
11
11
 
12
12
  // copied from packages/editor/editor-shared-styles/src/consts/consts.ts
13
13
  var akEditorLineHeight = 1.714;
@@ -19,20 +19,121 @@ var blockNodesVerticalMargin = '0.75rem';
19
19
 
20
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
21
21
  var listsStyles = exports.listsStyles = (0, _react.css)({
22
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
23
- '.ProseMirror li': {
24
- position: 'relative',
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
26
- '& > p:not(:first-child)': {
27
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
28
- margin: "var(--ds-space-050, 4px)".concat(" 0 0 0")
29
- },
30
- /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
31
- The following rule resets the first p tag back to its original margin
32
- defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
33
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
34
- '& > style:first-child + p': {
35
- marginTop: blockNodesVerticalMargin
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
23
+ '.ProseMirror': {
24
+ /* =============== INDENTATION SPACING ========= */
25
+
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
27
+ 'ul, ol': {
28
+ boxSizing: 'border-box',
29
+ paddingLeft: "var(--ed--list--item-counter--padding, 24px)"
30
+ },
31
+ // Firefox does not handle empty block element inside li tag.
32
+ // If there is not block element inside li tag, then firefox sets inherited height to li
33
+ // However, if there is any block element and if it's empty (or has empty inline element) then
34
+ // firefox sets li tag height to zero.
35
+ //
36
+ // More details at
37
+ // https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation
38
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
39
+ '&.ua-firefox': {
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
41
+ 'ul, ol': {
42
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
43
+ 'li p:empty, li p > span:empty': {
44
+ display: 'inline-block'
45
+ }
46
+ }
47
+ },
48
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
49
+ '.ak-ol, .ak-ul': {
50
+ // Ensures list item content adheres to the list's margin instead
51
+ // of filling the entire block row. This is important to allow
52
+ // clicking interactive elements which are floated next to a list.
53
+ //
54
+ // For some history and context on this block, see PRs related to tickets.:
55
+ // @see ED-6551 - original issue.
56
+ // @see ED-7015 - follow up issue.
57
+ // @see ED-7447 - flow-root change.
58
+ //
59
+ // @see https://css-tricks.com/display-flow-root/
60
+ //
61
+ // For older browsers the do not support flow-root. */
62
+ // stylelint-disable declaration-block-no-duplicate-properties */
63
+ display: 'flow-root'
64
+ /* stylelint-enable declaration-block-no-duplicate-properties */
65
+ },
66
+ /* =============== INDENTATION AESTHETICS ========= */
67
+
68
+ // We support nested lists up to six levels deep.
69
+
70
+ /* ======== LEGACY LISTS ======== */
71
+
72
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
73
+ 'ul, ul ul ul ul': {
74
+ listStyleType: 'disc'
75
+ },
76
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
77
+ 'ul ul, ul ul ul ul ul': {
78
+ listStyleType: 'circle'
79
+ },
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
81
+ 'ul ul ul, ul ul ul ul ul ul': {
82
+ listStyleType: 'square'
83
+ },
84
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
85
+ 'ol, ol ol ol ol': {
86
+ listStyleType: 'decimal'
87
+ },
88
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
89
+ 'ol ol, ol ol ol ol ol': {
90
+ listStyleType: 'lower-alpha'
91
+ },
92
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
93
+ 'ol ol ol, ol ol ol ol ol ol': {
94
+ listStyleType: 'lower-roman'
95
+ },
96
+ /* ======== PREDICTABLE LISTS ======== */
97
+
98
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
99
+ "ol[data-indent-level='1'], ol[data-indent-level='4']": {
100
+ listStyleType: 'decimal'
101
+ },
102
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
103
+ "ol[data-indent-level='2'], ol[data-indent-level='5']": {
104
+ listStyleType: 'lower-alpha'
105
+ },
106
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
107
+ "ol[data-indent-level='3'], ol[data-indent-level='6']": {
108
+ listStyleType: 'lower-roman'
109
+ },
110
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
111
+ "ul[data-indent-level='1'], ul[data-indent-level='4']": {
112
+ listStyleType: 'disc'
113
+ },
114
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
115
+ "ul[data-indent-level='2'], ul[data-indent-level='5']": {
116
+ listStyleType: 'circle'
117
+ },
118
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
119
+ "ul[data-indent-level='3'], ul[data-indent-level='6']": {
120
+ listStyleType: 'square'
121
+ },
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
123
+ li: {
124
+ position: 'relative',
125
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
126
+ '& > p:not(:first-child)': {
127
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
128
+ margin: "var(--ds-space-050, 4px)".concat(" 0 0 0")
129
+ },
130
+ /* In SSR the above rule will apply to all p tags because first-child would be a style tag.
131
+ The following rule resets the first p tag back to its original margin
132
+ defined in packages/editor/editor-common/src/styles/shared/paragraph.ts */
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
134
+ '& > style:first-child + p': {
135
+ marginTop: blockNodesVerticalMargin
136
+ }
36
137
  }
37
138
  }
38
139
  });
@@ -164,6 +164,57 @@ var resizerStyles = exports.resizerStyles = (0, _react.css)((0, _defineProperty2
164
164
 
165
165
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
166
166
  var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
+ '.fabric-editor-breakout-mark': {
169
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
170
+ '&:has([data-prosemirror-node-name="codeBlock"])': {
171
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
172
+ '> .pm-breakout-resize-handle-left': {
173
+ left: '-12px'
174
+ },
175
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
176
+ '> .pm-breakout-resize-handle-right': {
177
+ right: '-12px'
178
+ },
179
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
180
+ '> .pm-breakout-resize-handle': {
181
+ height: 'calc(100% - 12px)'
182
+ }
183
+ },
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
185
+ '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
186
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
187
+ '> .pm-breakout-resize-handle-left': {
188
+ left: '-32px'
189
+ },
190
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
191
+ '> .pm-breakout-resize-handle-right': {
192
+ right: '-32px'
193
+ }
194
+ },
195
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
196
+ '&:has([data-prosemirror-node-name="expand"])': {
197
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
198
+ '> .pm-breakout-resize-handle': {
199
+ height: 'calc(100% - 4px)'
200
+ }
201
+ },
202
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
203
+ '&:has([data-prosemirror-node-name="layoutSection"])': {
204
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
205
+ '> .pm-breakout-resize-handle': {
206
+ height: 'calc(100% - 8px)'
207
+ }
208
+ },
209
+ // the first node in the document always has margin-top = 0
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
211
+ '&:has(.first-node-in-document)': {
212
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
213
+ '> .pm-breakout-resize-handle': {
214
+ height: '100%'
215
+ }
216
+ }
217
+ },
167
218
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
219
  '.pm-breakout-resize-handle': {
169
220
  position: 'relative',
@@ -172,7 +223,7 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
172
223
  justifyContent: 'center',
173
224
  height: '100%',
174
225
  width: 7,
175
- alignSelf: 'center',
226
+ alignSelf: 'end',
176
227
  gridRow: 1,
177
228
  gridColumn: 1,
178
229
  cursor: 'col-resize',
@@ -188,13 +239,11 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
188
239
  },
189
240
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
190
241
  '.pm-breakout-resize-handle-left': {
191
- justifySelf: 'start',
192
- left: -20
242
+ justifySelf: 'start'
193
243
  },
194
244
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
195
245
  '.pm-breakout-resize-handle-right': {
196
- justifySelf: 'end',
197
- right: -20
246
+ justifySelf: 'end'
198
247
  },
199
248
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
200
249
  '.pm-breakout-resize-handle-inner': {
@@ -0,0 +1,207 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.telepointerStyleWithInitialOnly = exports.telepointerStyle = exports.telepointerColorAndCommonStyle = void 0;
7
+ var _react = require("@emotion/react");
8
+ /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
9
+ /* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
10
+ /* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
11
+
12
+ var pulseIn = (0, _react.keyframes)({
13
+ '0%, 100%': {
14
+ transform: 'scaleX(0)',
15
+ opacity: 0
16
+ },
17
+ '13%': {
18
+ transform: 'scaleX(1.4) scaleY(1.4)',
19
+ opacity: 1
20
+ },
21
+ '20%, 85%': {
22
+ transform: 'scaleX(1) scaleY(1)',
23
+ opacity: 1
24
+ }
25
+ });
26
+ var pulseOut = (0, _react.keyframes)({
27
+ '0%, 90%, 100%': {
28
+ transform: 'scaleX(1)',
29
+ opacity: 1
30
+ },
31
+ '10%, 80%': {
32
+ transform: 'scaleX(0)',
33
+ opacity: 0
34
+ }
35
+ });
36
+ var telepointerColorAndCommonStyle = exports.telepointerColorAndCommonStyle = (0, _react.css)({
37
+ '.ProseMirror .telepointer': {
38
+ position: 'relative',
39
+ transition: 'opacity 200ms',
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
41
+ '&.telepointer-selection:not(.inlineNodeView)': {
42
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
43
+ lineHeight: 1.2,
44
+ pointerEvents: 'none',
45
+ userSelect: 'none'
46
+ },
47
+ '&.telepointer-dim': {
48
+ opacity: 0.2
49
+ },
50
+ '&.color-0': {
51
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
52
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
53
+ },
54
+ '&.color-1': {
55
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
56
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
57
+ },
58
+ '&.color-2': {
59
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
60
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
61
+ },
62
+ '&.color-3': {
63
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
64
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
65
+ },
66
+ '&.color-4': {
67
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
68
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
69
+ },
70
+ '&.color-5': {
71
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
72
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
73
+ },
74
+ '&.color-6': {
75
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
76
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
77
+ },
78
+ '&.color-7': {
79
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
80
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
81
+ },
82
+ '&.color-8': {
83
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
84
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
85
+ },
86
+ '&.color-9': {
87
+ '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
88
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
89
+ },
90
+ '&.color-10': {
91
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
92
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
93
+ },
94
+ '&.color-11': {
95
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
96
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
97
+ },
98
+ '&.color-12': {
99
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
100
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
101
+ },
102
+ '&.color-13': {
103
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
104
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
105
+ },
106
+ '&.color-14': {
107
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
108
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
109
+ },
110
+ '&.color-15': {
111
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
112
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
113
+ },
114
+ '&.color-16': {
115
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
116
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
117
+ },
118
+ '&.color-17': {
119
+ '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
120
+ '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
121
+ },
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
123
+ 'html:not([data-color-mode=dark]) &': {
124
+ '--telepointer-participant-background-first-stop': '-850000%',
125
+ '--telepointer-participant-background-second-stop': '150000%'
126
+ },
127
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
128
+ 'html[data-color-mode=dark] &': {
129
+ '--telepointer-participant-background-first-stop': '-800000%',
130
+ '--telepointer-participant-background-second-stop': '200000%'
131
+ },
132
+ '&[class*="color-"]': {
133
+ background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
134
+ '&::after': {
135
+ backgroundColor: 'var(--telepointer-participant-bg-color)',
136
+ color: 'var(--telepointer-participant-text-color)',
137
+ borderColor: 'var(--telepointer-participant-bg-color)'
138
+ }
139
+ }
140
+ }
141
+ });
142
+ var telepointerStyle = exports.telepointerStyle = (0, _react.css)({
143
+ '.ProseMirror .telepointer': {
144
+ '&.telepointer-selection-badge': {
145
+ '.telepointer-initial, .telepointer-fullname': {
146
+ position: 'absolute',
147
+ display: 'block',
148
+ userSelect: 'none',
149
+ whiteSpace: 'pre',
150
+ top: -14,
151
+ left: 0,
152
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
153
+ paddingLeft: "var(--ds-space-050, 4px)",
154
+ paddingRight: "var(--ds-space-050, 4px)",
155
+ color: "var(--ds-text-inverse, #FFFFFF)",
156
+ borderRadius: '0 2px 2px 0'
157
+ },
158
+ '.telepointer-initial': {
159
+ opacity: 1,
160
+ transition: 'opacity 0.15s ease-out'
161
+ },
162
+ '.telepointer-fullname': {
163
+ opacity: 0,
164
+ transform: 'scaleX(0)',
165
+ transformOrigin: 'top left',
166
+ transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
167
+ }
168
+ },
169
+ '&.telepointer-pulse-animate': {
170
+ '.telepointer-initial': {
171
+ animation: "".concat(pulseOut, " 2s ease-in-out")
172
+ },
173
+ '.telepointer-fullname': {
174
+ animation: "".concat(pulseIn, " 2s ease-in-out")
175
+ }
176
+ },
177
+ '&:hover': {
178
+ '.telepointer-initial': {
179
+ opacity: 0,
180
+ transitionDelay: '150ms'
181
+ },
182
+ '.telepointer-fullname': {
183
+ transform: 'scaleX(1)',
184
+ opacity: 1,
185
+ zIndex: 1
186
+ }
187
+ }
188
+ }
189
+ });
190
+ var telepointerStyleWithInitialOnly = exports.telepointerStyleWithInitialOnly = (0, _react.css)({
191
+ '.ProseMirror .telepointer': {
192
+ '&.telepointer-selection-badge::after': {
193
+ content: 'attr(data-initial)',
194
+ position: 'absolute',
195
+ display: 'block',
196
+ top: -14,
197
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
198
+ fontSize: '0.5625rem',
199
+ padding: "var(--ds-space-025, 2px)",
200
+ color: "var(--ds-text-inverse, #FFFFFF)",
201
+ left: 0,
202
+ borderRadius: '2px 2px 2px 0',
203
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
204
+ lineHeight: 'initial'
205
+ }
206
+ }
207
+ });
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "207.11.1";
8
+ var version = exports.version = "207.12.0";
@@ -10,9 +10,8 @@ import React from 'react';
10
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
11
  import { css, jsx, useTheme } from '@emotion/react';
12
12
  import { browser } from '@atlaskit/editor-common/browser';
13
- import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
14
13
  import { gapCursorStyles } from '@atlaskit/editor-common/selection';
15
- import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
14
+ import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
16
15
  import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
17
16
  import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
18
17
  import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -52,6 +51,7 @@ import { ruleStyles } from './styles/rule';
52
51
  import { shadowStyles } from './styles/shadowStyles';
53
52
  import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
54
53
  import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
54
+ import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
55
55
  import { textColorStyles } from './styles/textColorStyles';
56
56
  import { unsupportedStyles } from './styles/unsupportedStyles';
57
57
  import { whitespaceStyles } from './styles/whitespaceStyles';
@@ -140,8 +140,6 @@ const contentStyles = () => css`
140
140
 
141
141
  ${whitespaceStyles};
142
142
 
143
- ${listsSharedStyles};
144
-
145
143
  ${indentationStyles};
146
144
 
147
145
  ${shadowStyles};
@@ -224,6 +222,10 @@ const contentStyles = () => css`
224
222
  ${mediaStyles}
225
223
 
226
224
  ${fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly}
225
+
226
+ /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
227
+ ${telepointerColorAndCommonStyle}
228
+
227
229
  ${gapCursorStyles};
228
230
 
229
231
  ${panelStyles()}
@@ -279,7 +281,7 @@ const contentStyles = () => css`
279
281
 
280
282
  ${resizerStyles}
281
283
 
282
- .panelView-content-wrap {
284
+ .panelView-content-wrap {
283
285
  box-sizing: border-box;
284
286
  }
285
287