@atlaskit/editor-core 205.2.4 → 205.3.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/ContentStyles/index.js +3 -1
  3. package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js +207 -2
  4. package/dist/cjs/version-wrapper.js +1 -1
  5. package/dist/es2019/ui/ContentStyles/index.js +7 -4
  6. package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js +206 -0
  7. package/dist/es2019/version-wrapper.js +1 -1
  8. package/dist/esm/ui/ContentStyles/index.js +7 -5
  9. package/dist/esm/ui/ContentStyles/tasks-and-decisions.js +206 -1
  10. package/dist/esm/version-wrapper.js +1 -1
  11. package/dist/types/ui/ContentStyles/tasks-and-decisions.d.ts +1 -0
  12. package/dist/types-ts4.5/ui/ContentStyles/tasks-and-decisions.d.ts +1 -0
  13. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 205.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#134613](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134613)
8
+ [`be20cc186939b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be20cc186939b) -
9
+ ED-26247 Remove feature flag platform_media_extended_resize_experience and replace it with a new
10
+ media prop which defaults to false allowPixelResizing
11
+
12
+ ### Patch Changes
13
+
14
+ - [#140758](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140758)
15
+ [`02525232cc778`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02525232cc778) -
16
+ [ux] ED-27140 suppress toolbars when inline commenting
17
+ - Updated dependencies
18
+
3
19
  ## 205.2.4
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/ContentStyles/index.js CHANGED
@@ -154,7 +154,7 @@ var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBl
154
154
  // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
155
155
  var akEditorBreakpointForSmallDevice = "1266px";
156
156
  var contentStyles = function contentStyles(props) {
157
- return (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\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 // Switch between the two icons based on the visual refresh feature gate\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
157
+ return (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\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 ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
158
158
  theme: props.theme
159
159
  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3') ? 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), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
160
160
  exposure: false
@@ -164,6 +164,8 @@ var contentStyles = function contentStyles(props) {
164
164
  exposure: false
165
165
  }) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
166
166
  exposure: false
167
+ }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
168
+ exposure: false
167
169
  }) && _tasksAndDecisions.vanillaTaskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
168
170
  exposure: false
169
171
  }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js CHANGED
@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.vanillaTaskDecisionStyles = exports.vanillaTaskDecisionIconWithoutVisualRefresh = exports.vanillaTaskDecisionIconWithVisualRefresh = exports.taskDecisionStyles = void 0;
7
+ exports.vanillaTaskItemStyles = exports.vanillaTaskDecisionStyles = exports.vanillaTaskDecisionIconWithoutVisualRefresh = exports.vanillaTaskDecisionIconWithVisualRefresh = exports.taskDecisionStyles = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
10
  var _react = require("@emotion/react");
10
11
  var _styles = require("@atlaskit/editor-common/styles");
@@ -131,4 +132,208 @@ var vanillaTaskDecisionIconWithoutVisualRefresh = exports.vanillaTaskDecisionIco
131
132
  width: '32px',
132
133
  height: '32px'
133
134
  }
134
- });
135
+ });
136
+
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
138
+ var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0, _defineProperty2.default)({
139
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
140
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]': {
141
+ listStyle: 'none'
142
+ },
143
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
144
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
145
+ display: 'flex',
146
+ flexDirection: 'row',
147
+ position: 'relative'
148
+ },
149
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
150
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
151
+ position: 'absolute',
152
+ color: "var(--ds-text-subtlest, #626F86)",
153
+ margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
154
+ pointerEvents: 'none',
155
+ textOverflow: 'ellipsis',
156
+ overflow: 'hidden',
157
+ whiteSpace: 'nowrap',
158
+ maxWidth: 'calc(100% - 50px)',
159
+ display: 'none'
160
+ },
161
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
162
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
163
+ display: 'block'
164
+ },
165
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
166
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="content"]': {
167
+ margin: 0,
168
+ wordWrap: 'break-word',
169
+ minWidth: 0,
170
+ flex: '1 1 auto'
171
+ },
172
+ // copied styles from packages/design-system/icon/src/components/icon-new.tsx
173
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
174
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
175
+ display: 'inline-block',
176
+ boxSizing: 'border-box',
177
+ flexShrink: 0,
178
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
179
+ lineHeight: 1,
180
+ paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
181
+ paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
182
+ },
183
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
184
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
185
+ overflow: 'hidden',
186
+ pointerEvents: 'none',
187
+ color: 'currentColor',
188
+ verticalAlign: 'bottom',
189
+ width: "var(--ds-space-200, 16px)",
190
+ height: "var(--ds-space-200, 16px)"
191
+ },
192
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
193
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
194
+ display: 'none'
195
+ },
196
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
197
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
198
+ display: 'inline'
199
+ },
200
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
201
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
202
+ display: 'inline'
203
+ },
204
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
205
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
206
+ display: 'none'
207
+ }
208
+ }, "[data-prosemirror-node-view-type=\"vanilla\"][data-prosemirror-node-name=\"taskItem\"] .".concat(_styles.TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER), {
209
+ flex: '0 0 24px',
210
+ width: '24px',
211
+ height: '24px',
212
+ position: 'relative',
213
+ alignSelf: 'start',
214
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
215
+ "& > input[type='checkbox']": {
216
+ width: '16px',
217
+ height: '16px',
218
+ zIndex: 1,
219
+ cursor: 'pointer',
220
+ outline: 'none',
221
+ margin: 0,
222
+ opacity: 0,
223
+ position: 'absolute',
224
+ top: '50%',
225
+ left: '50%',
226
+ transform: 'translate(-50%, -50%)',
227
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
228
+ '&[disabled]': {
229
+ cursor: 'default'
230
+ },
231
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
232
+ '+ span': {
233
+ width: '24px',
234
+ height: '24px',
235
+ position: 'absolute',
236
+ top: '50%',
237
+ left: '50%',
238
+ transform: 'translate(-50%, -50%)'
239
+ },
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
241
+ '+ span > svg': {
242
+ boxSizing: 'border-box',
243
+ display: 'inline',
244
+ top: '50%',
245
+ left: '50%',
246
+ transform: 'translate(-50%, -50%)',
247
+ maxWidth: 'unset',
248
+ maxHeight: 'unset',
249
+ position: 'absolute',
250
+ overflow: 'hidden',
251
+ color: "var(--ds-background-input, #FFFFFF)",
252
+ transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
253
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
254
+ 'path:first-of-type': {
255
+ visibility: 'hidden'
256
+ },
257
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
258
+ 'rect:first-of-type': {
259
+ stroke: "var(--ds-border-input, #8590A2)",
260
+ strokeWidth: 1,
261
+ transition: 'stroke 0.2s ease-in-out'
262
+ }
263
+ },
264
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
265
+ '&:hover + span > svg': {
266
+ color: "var(--ds-background-input-hovered, #F7F8F9)",
267
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
268
+ 'rect:first-of-type': {
269
+ stroke: "var(--ds-border-input, #8590A2)"
270
+ }
271
+ },
272
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
273
+ '&:checked:hover + span > svg': {
274
+ color: "var(--ds-background-selected-bold-hovered, #0055CC)",
275
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
276
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
277
+ 'rect:first-of-type': {
278
+ stroke: "var(--ds-background-selected-bold-hovered, #0055CC)"
279
+ }
280
+ },
281
+ '&:checked': {
282
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
283
+ '+ span > svg': {
284
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
285
+ 'path:first-of-type': {
286
+ visibility: 'visible'
287
+ },
288
+ color: "var(--ds-background-selected-bold, #0C66E4)",
289
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
290
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
291
+ 'rect:first-of-type': {
292
+ stroke: "var(--ds-background-selected-bold, #0C66E4)"
293
+ }
294
+ }
295
+ },
296
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
297
+ '&:active + span > svg': {
298
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
299
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
300
+ 'rect:first-of-type': {
301
+ stroke: "var(--ds-border, #091E4224)"
302
+ }
303
+ },
304
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
305
+ '&:checked:active + span > svg': {
306
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
307
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
308
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
309
+ 'rect:first-of-type': {
310
+ stroke: "var(--ds-border, #091E4224)"
311
+ }
312
+ },
313
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
314
+ '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
315
+ color: "var(--ds-background-disabled, #091E4208)",
316
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
317
+ 'rect:first-of-type': {
318
+ stroke: "var(--ds-background-disabled, #091E4208)"
319
+ }
320
+ },
321
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
322
+ '&:disabled:checked + span > svg': {
323
+ fill: "var(--ds-icon-disabled, #091E424F)"
324
+ },
325
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
326
+ '&:focus + span::after': {
327
+ position: 'absolute',
328
+ width: "var(--ds-space-200, 16px)",
329
+ height: "var(--ds-space-200, 16px)",
330
+ border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
331
+ borderRadius: "var(--ds-space-050, 4px)",
332
+ content: "''",
333
+ display: 'block',
334
+ top: '50%',
335
+ left: '50%',
336
+ transform: 'translate(-50%, -50%)'
337
+ }
338
+ }
339
+ }));
package/dist/cjs/version-wrapper.js CHANGED
@@ -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 = "205.2.4";
8
+ var version = exports.version = "205.3.0";
package/dist/es2019/ui/ContentStyles/index.js CHANGED
@@ -36,7 +36,7 @@ import { layoutStyles } from './layout';
36
36
  import { mediaStyles } from './media';
37
37
  import { panelStyles } from './panel';
38
38
  import { statusStyles, vanillaStatusStyles } from './status';
39
- import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles } from './tasks-and-decisions';
39
+ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from './tasks-and-decisions';
40
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
41
41
  export const linkStyles = css`
42
42
  .ProseMirror {
@@ -445,14 +445,17 @@ const contentStyles = props => css`
445
445
  ${taskDecisionStyles}
446
446
  ${editorExperiment('platform_editor_vanilla_dom', true, {
447
447
  exposure: false
448
- }) && vanillaTaskDecisionStyles}
448
+ }) && vanillaTaskItemStyles}
449
+ ${editorExperiment('platform_editor_vanilla_dom', true, {
450
+ exposure: false
451
+ }) && vanillaDecisionStyles}
449
452
  // Switch between the two icons based on the visual refresh feature gate
450
453
  ${editorExperiment('platform_editor_vanilla_dom', true, {
451
454
  exposure: false
452
- }) && fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithVisualRefresh}
455
+ }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh}
453
456
  ${editorExperiment('platform_editor_vanilla_dom', true, {
454
457
  exposure: false
455
- }) && !fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithoutVisualRefresh}
458
+ }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh}
456
459
  ${statusStyles}
457
460
  ${editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null}
458
461
  ${annotationSharedStyles()}
package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js CHANGED
@@ -144,4 +144,210 @@ export const vanillaTaskDecisionIconWithoutVisualRefresh = css({
144
144
  width: '32px',
145
145
  height: '32px'
146
146
  }
147
+ });
148
+
149
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
150
+ export const vanillaTaskItemStyles = css({
151
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
152
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]': {
153
+ listStyle: 'none'
154
+ },
155
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
156
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
157
+ display: 'flex',
158
+ flexDirection: 'row',
159
+ position: 'relative'
160
+ },
161
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
162
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
163
+ position: 'absolute',
164
+ color: "var(--ds-text-subtlest, #626F86)",
165
+ margin: `0 0 0 calc(${"var(--ds-space-100, 8px)"} * 3)`,
166
+ pointerEvents: 'none',
167
+ textOverflow: 'ellipsis',
168
+ overflow: 'hidden',
169
+ whiteSpace: 'nowrap',
170
+ maxWidth: 'calc(100% - 50px)',
171
+ display: 'none'
172
+ },
173
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
174
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
175
+ display: 'block'
176
+ },
177
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
178
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="content"]': {
179
+ margin: 0,
180
+ wordWrap: 'break-word',
181
+ minWidth: 0,
182
+ flex: '1 1 auto'
183
+ },
184
+ // copied styles from packages/design-system/icon/src/components/icon-new.tsx
185
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
186
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
187
+ display: 'inline-block',
188
+ boxSizing: 'border-box',
189
+ flexShrink: 0,
190
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
191
+ lineHeight: 1,
192
+ paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
193
+ paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
194
+ },
195
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
196
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
197
+ overflow: 'hidden',
198
+ pointerEvents: 'none',
199
+ color: 'currentColor',
200
+ verticalAlign: 'bottom',
201
+ width: "var(--ds-space-200, 16px)",
202
+ height: "var(--ds-space-200, 16px)"
203
+ },
204
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
205
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
206
+ display: 'none'
207
+ },
208
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
209
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
210
+ display: 'inline'
211
+ },
212
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
213
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
214
+ display: 'inline'
215
+ },
216
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
217
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
218
+ display: 'none'
219
+ },
220
+ // 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
221
+ [`[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] .${TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER}`]: {
222
+ flex: '0 0 24px',
223
+ width: '24px',
224
+ height: '24px',
225
+ position: 'relative',
226
+ alignSelf: 'start',
227
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
228
+ "& > input[type='checkbox']": {
229
+ width: '16px',
230
+ height: '16px',
231
+ zIndex: 1,
232
+ cursor: 'pointer',
233
+ outline: 'none',
234
+ margin: 0,
235
+ opacity: 0,
236
+ position: 'absolute',
237
+ top: '50%',
238
+ left: '50%',
239
+ transform: 'translate(-50%, -50%)',
240
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
241
+ '&[disabled]': {
242
+ cursor: 'default'
243
+ },
244
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
245
+ '+ span': {
246
+ width: '24px',
247
+ height: '24px',
248
+ position: 'absolute',
249
+ top: '50%',
250
+ left: '50%',
251
+ transform: 'translate(-50%, -50%)'
252
+ },
253
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
254
+ '+ span > svg': {
255
+ boxSizing: 'border-box',
256
+ display: 'inline',
257
+ top: '50%',
258
+ left: '50%',
259
+ transform: 'translate(-50%, -50%)',
260
+ maxWidth: 'unset',
261
+ maxHeight: 'unset',
262
+ position: 'absolute',
263
+ overflow: 'hidden',
264
+ color: "var(--ds-background-input, #FFFFFF)",
265
+ transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
266
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
267
+ 'path:first-of-type': {
268
+ visibility: 'hidden'
269
+ },
270
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
271
+ 'rect:first-of-type': {
272
+ stroke: "var(--ds-border-input, #8590A2)",
273
+ strokeWidth: 1,
274
+ transition: 'stroke 0.2s ease-in-out'
275
+ }
276
+ },
277
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
278
+ '&:hover + span > svg': {
279
+ color: "var(--ds-background-input-hovered, #F7F8F9)",
280
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
281
+ 'rect:first-of-type': {
282
+ stroke: "var(--ds-border-input, #8590A2)"
283
+ }
284
+ },
285
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
286
+ '&:checked:hover + span > svg': {
287
+ color: "var(--ds-background-selected-bold-hovered, #0055CC)",
288
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
289
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
290
+ 'rect:first-of-type': {
291
+ stroke: "var(--ds-background-selected-bold-hovered, #0055CC)"
292
+ }
293
+ },
294
+ '&:checked': {
295
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
296
+ '+ span > svg': {
297
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
298
+ 'path:first-of-type': {
299
+ visibility: 'visible'
300
+ },
301
+ color: "var(--ds-background-selected-bold, #0C66E4)",
302
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
303
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
304
+ 'rect:first-of-type': {
305
+ stroke: "var(--ds-background-selected-bold, #0C66E4)"
306
+ }
307
+ }
308
+ },
309
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
310
+ '&:active + span > svg': {
311
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
312
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
313
+ 'rect:first-of-type': {
314
+ stroke: "var(--ds-border, #091E4224)"
315
+ }
316
+ },
317
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
318
+ '&:checked:active + span > svg': {
319
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
320
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
321
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
322
+ 'rect:first-of-type': {
323
+ stroke: "var(--ds-border, #091E4224)"
324
+ }
325
+ },
326
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
327
+ '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
328
+ color: "var(--ds-background-disabled, #091E4208)",
329
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
330
+ 'rect:first-of-type': {
331
+ stroke: "var(--ds-background-disabled, #091E4208)"
332
+ }
333
+ },
334
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
335
+ '&:disabled:checked + span > svg': {
336
+ fill: "var(--ds-icon-disabled, #091E424F)"
337
+ },
338
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
339
+ '&:focus + span::after': {
340
+ position: 'absolute',
341
+ width: "var(--ds-space-200, 16px)",
342
+ height: "var(--ds-space-200, 16px)",
343
+ border: `2px solid ${"var(--ds-border-focused, #388BFF)"}`,
344
+ borderRadius: "var(--ds-space-050, 4px)",
345
+ content: "''",
346
+ display: 'block',
347
+ top: '50%',
348
+ left: '50%',
349
+ transform: 'translate(-50%, -50%)'
350
+ }
351
+ }
352
+ }
147
353
  });
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "205.2.4";
2
+ export const version = "205.3.0";
package/dist/esm/ui/ContentStyles/index.js CHANGED
@@ -38,7 +38,7 @@ import { layoutStyles } from './layout';
38
38
  import { mediaStyles } from './media';
39
39
  import { panelStyles } from './panel';
40
40
  import { statusStyles, vanillaStatusStyles } from './status';
41
- import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles } from './tasks-and-decisions';
41
+ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from './tasks-and-decisions';
42
42
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
43
43
  export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), linkSharedStyle);
44
44
  var ruleStyles = function ruleStyles() {
@@ -146,7 +146,7 @@ export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
146
146
  // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
147
147
  var akEditorBreakpointForSmallDevice = "1266px";
148
148
  var contentStyles = function contentStyles(props) {
149
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\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 // Switch between the two icons based on the visual refresh feature gate\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
149
+ return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\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 ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
150
150
  theme: props.theme
151
151
  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
152
152
  exposure: false
@@ -156,11 +156,13 @@ var contentStyles = function contentStyles(props) {
156
156
  exposure: false
157
157
  }) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
158
158
  exposure: false
159
- }) && vanillaTaskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
159
+ }) && vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
160
160
  exposure: false
161
- }) && fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
161
+ }) && vanillaDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
162
162
  exposure: false
163
- }) && !fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
163
+ }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
164
+ exposure: false
165
+ }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
164
166
  };
165
167
  export var createEditorContentStyle = function createEditorContentStyle(styles) {
166
168
  return /*#__PURE__*/React.forwardRef(function (props, ref) {
package/dist/esm/ui/ContentStyles/tasks-and-decisions.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
3
  var _templateObject;
3
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -125,4 +126,208 @@ export var vanillaTaskDecisionIconWithoutVisualRefresh = css({
125
126
  width: '32px',
126
127
  height: '32px'
127
128
  }
128
- });
129
+ });
130
+
131
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
132
+ export var vanillaTaskItemStyles = css(_defineProperty({
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
134
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]': {
135
+ listStyle: 'none'
136
+ },
137
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
138
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="task-item-main"]': {
139
+ display: 'flex',
140
+ flexDirection: 'row',
141
+ position: 'relative'
142
+ },
143
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
144
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="placeholder"]': {
145
+ position: 'absolute',
146
+ color: "var(--ds-text-subtlest, #626F86)",
147
+ margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3)"),
148
+ pointerEvents: 'none',
149
+ textOverflow: 'ellipsis',
150
+ overflow: 'hidden',
151
+ whiteSpace: 'nowrap',
152
+ maxWidth: 'calc(100% - 50px)',
153
+ display: 'none'
154
+ },
155
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
156
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"]:has([data-empty]):not(:has([data-type-ahead])) [data-component="placeholder"]': {
157
+ display: 'block'
158
+ },
159
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
160
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="content"]': {
161
+ margin: 0,
162
+ wordWrap: 'break-word',
163
+ minWidth: 0,
164
+ flex: '1 1 auto'
165
+ },
166
+ // copied styles from packages/design-system/icon/src/components/icon-new.tsx
167
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
168
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"]': {
169
+ display: 'inline-block',
170
+ boxSizing: 'border-box',
171
+ flexShrink: 0,
172
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
173
+ lineHeight: 1,
174
+ paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
175
+ paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)'
176
+ },
177
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
178
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] [data-component="checkbox-icon-wrap"] svg': {
179
+ overflow: 'hidden',
180
+ pointerEvents: 'none',
181
+ color: 'currentColor',
182
+ verticalAlign: 'bottom',
183
+ width: "var(--ds-space-200, 16px)",
184
+ height: "var(--ds-space-200, 16px)"
185
+ },
186
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
187
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-checked-icon]': {
188
+ display: 'none'
189
+ },
190
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
191
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:not(:checked) + span [data-component=checkbox-unchecked-icon]': {
192
+ display: 'inline'
193
+ },
194
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
195
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-checked-icon]': {
196
+ display: 'inline'
197
+ },
198
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
199
+ '[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="taskItem"] input[type=checkbox]:checked + span [data-component=checkbox-unchecked-icon]': {
200
+ display: 'none'
201
+ }
202
+ }, "[data-prosemirror-node-view-type=\"vanilla\"][data-prosemirror-node-name=\"taskItem\"] .".concat(TaskDecisionSharedCssClassName.TASK_CHECKBOX_CONTAINER), {
203
+ flex: '0 0 24px',
204
+ width: '24px',
205
+ height: '24px',
206
+ position: 'relative',
207
+ alignSelf: 'start',
208
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
209
+ "& > input[type='checkbox']": {
210
+ width: '16px',
211
+ height: '16px',
212
+ zIndex: 1,
213
+ cursor: 'pointer',
214
+ outline: 'none',
215
+ margin: 0,
216
+ opacity: 0,
217
+ position: 'absolute',
218
+ top: '50%',
219
+ left: '50%',
220
+ transform: 'translate(-50%, -50%)',
221
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
222
+ '&[disabled]': {
223
+ cursor: 'default'
224
+ },
225
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
226
+ '+ span': {
227
+ width: '24px',
228
+ height: '24px',
229
+ position: 'absolute',
230
+ top: '50%',
231
+ left: '50%',
232
+ transform: 'translate(-50%, -50%)'
233
+ },
234
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
235
+ '+ span > svg': {
236
+ boxSizing: 'border-box',
237
+ display: 'inline',
238
+ top: '50%',
239
+ left: '50%',
240
+ transform: 'translate(-50%, -50%)',
241
+ maxWidth: 'unset',
242
+ maxHeight: 'unset',
243
+ position: 'absolute',
244
+ overflow: 'hidden',
245
+ color: "var(--ds-background-input, #FFFFFF)",
246
+ transition: 'color 0.2s ease-in-out, fill 0.2s ease-in-out',
247
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
248
+ 'path:first-of-type': {
249
+ visibility: 'hidden'
250
+ },
251
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
252
+ 'rect:first-of-type': {
253
+ stroke: "var(--ds-border-input, #8590A2)",
254
+ strokeWidth: 1,
255
+ transition: 'stroke 0.2s ease-in-out'
256
+ }
257
+ },
258
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
259
+ '&:hover + span > svg': {
260
+ color: "var(--ds-background-input-hovered, #F7F8F9)",
261
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
262
+ 'rect:first-of-type': {
263
+ stroke: "var(--ds-border-input, #8590A2)"
264
+ }
265
+ },
266
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
267
+ '&:checked:hover + span > svg': {
268
+ color: "var(--ds-background-selected-bold-hovered, #0055CC)",
269
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
270
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
271
+ 'rect:first-of-type': {
272
+ stroke: "var(--ds-background-selected-bold-hovered, #0055CC)"
273
+ }
274
+ },
275
+ '&:checked': {
276
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
277
+ '+ span > svg': {
278
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
279
+ 'path:first-of-type': {
280
+ visibility: 'visible'
281
+ },
282
+ color: "var(--ds-background-selected-bold, #0C66E4)",
283
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
284
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
285
+ 'rect:first-of-type': {
286
+ stroke: "var(--ds-background-selected-bold, #0C66E4)"
287
+ }
288
+ }
289
+ },
290
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
291
+ '&:active + span > svg': {
292
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
293
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
294
+ 'rect:first-of-type': {
295
+ stroke: "var(--ds-border, #091E4224)"
296
+ }
297
+ },
298
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
299
+ '&:checked:active + span > svg': {
300
+ color: "var(--ds-background-input-pressed, #FFFFFF)",
301
+ fill: "var(--ds-icon-inverse, #FFFFFF)",
302
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
303
+ 'rect:first-of-type': {
304
+ stroke: "var(--ds-border, #091E4224)"
305
+ }
306
+ },
307
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
308
+ '&:disabled + span > svg, &:disabled:hover + span > svg, &:disabled:focus + span > svg, &:disabled:active + span > svg': {
309
+ color: "var(--ds-background-disabled, #091E4208)",
310
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
311
+ 'rect:first-of-type': {
312
+ stroke: "var(--ds-background-disabled, #091E4208)"
313
+ }
314
+ },
315
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
316
+ '&:disabled:checked + span > svg': {
317
+ fill: "var(--ds-icon-disabled, #091E424F)"
318
+ },
319
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
320
+ '&:focus + span::after': {
321
+ position: 'absolute',
322
+ width: "var(--ds-space-200, 16px)",
323
+ height: "var(--ds-space-200, 16px)",
324
+ border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
325
+ borderRadius: "var(--ds-space-050, 4px)",
326
+ content: "''",
327
+ display: 'block',
328
+ top: '50%',
329
+ left: '50%',
330
+ transform: 'translate(-50%, -50%)'
331
+ }
332
+ }
333
+ }));
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "205.2.4";
2
+ export var version = "205.3.0";
package/dist/types/ui/ContentStyles/tasks-and-decisions.d.ts CHANGED
@@ -2,3 +2,4 @@ export declare const taskDecisionStyles: import("@emotion/react").SerializedStyl
2
2
  export declare const vanillaTaskDecisionStyles: import("@emotion/react").SerializedStyles;
3
3
  export declare const vanillaTaskDecisionIconWithVisualRefresh: import("@emotion/react").SerializedStyles;
4
4
  export declare const vanillaTaskDecisionIconWithoutVisualRefresh: import("@emotion/react").SerializedStyles;
5
+ export declare const vanillaTaskItemStyles: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/ContentStyles/tasks-and-decisions.d.ts CHANGED
@@ -2,3 +2,4 @@ export declare const taskDecisionStyles: import("@emotion/react").SerializedStyl
2
2
  export declare const vanillaTaskDecisionStyles: import("@emotion/react").SerializedStyles;
3
3
  export declare const vanillaTaskDecisionIconWithVisualRefresh: import("@emotion/react").SerializedStyles;
4
4
  export declare const vanillaTaskDecisionIconWithoutVisualRefresh: import("@emotion/react").SerializedStyles;
5
+ export declare const vanillaTaskItemStyles: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "205.2.4",
3
+ "version": "205.3.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -46,11 +46,11 @@
46
46
  "@atlaskit/analytics-next-stable-react-context": "1.0.1",
47
47
  "@atlaskit/button": "^23.0.0",
48
48
  "@atlaskit/css": "^0.10.0",
49
- "@atlaskit/editor-common": "^103.4.0",
49
+ "@atlaskit/editor-common": "^103.6.0",
50
50
  "@atlaskit/editor-json-transformer": "^8.24.0",
51
51
  "@atlaskit/editor-performance-metrics": "^2.0.0",
52
52
  "@atlaskit/editor-plugin-quick-insert": "^2.3.0",
53
- "@atlaskit/editor-plugins": "^8.0.0",
53
+ "@atlaskit/editor-plugins": "^8.1.0",
54
54
  "@atlaskit/editor-prosemirror": "7.0.0",
55
55
  "@atlaskit/editor-shared-styles": "^3.4.0",
56
56
  "@atlaskit/emoji": "^69.0.0",
@@ -59,7 +59,7 @@
59
59
  "@atlaskit/mention": "^24.1.0",
60
60
  "@atlaskit/platform-feature-flags": "^1.1.0",
61
61
  "@atlaskit/platform-feature-flags-react": "^0.1.0",
62
- "@atlaskit/react-ufo": "^3.4.0",
62
+ "@atlaskit/react-ufo": "^3.5.0",
63
63
  "@atlaskit/task-decision": "^19.1.0",
64
64
  "@atlaskit/tmp-editor-statsig": "^4.6.0",
65
65
  "@atlaskit/tokens": "^4.7.0",
@@ -93,7 +93,7 @@
93
93
  "@atlaskit/editor-plugin-annotation": "^2.5.0",
94
94
  "@atlaskit/editor-plugin-card": "^5.4.0",
95
95
  "@atlaskit/editor-plugin-list": "^4.2.0",
96
- "@atlaskit/editor-plugin-paste": "^3.1.0",
96
+ "@atlaskit/editor-plugin-paste": "^3.2.0",
97
97
  "@atlaskit/link-provider": "^2.1.0",
98
98
  "@atlaskit/logo": "^16.0.0",
99
99
  "@atlaskit/media-core": "^35.0.0",
@@ -194,10 +194,6 @@
194
194
  "type": "boolean",
195
195
  "referenceOnly": true
196
196
  },
197
- "platform_editor_media_extended_resize_experience": {
198
- "type": "boolean",
199
- "referenceOnly": "true"
200
- },
201
197
  "platform_editor_prevent_toolbar_width_reflow": {
202
198
  "type": "boolean"
203
199
  },
@@ -405,10 +401,6 @@
405
401
  "type": "boolean",
406
402
  "referenceOnly": true
407
403
  },
408
- "platform_editor_table_layout_shift_fix": {
409
- "type": "boolean",
410
- "referenceOnly": true
411
- },
412
404
  "platform_editor_lcm_toolbar_portals": {
413
405
  "type": "boolean"
414
406
  },
@@ -596,6 +588,10 @@
596
588
  "type": "boolean",
597
589
  "referenceOnly": true
598
590
  },
591
+ "platform_editor_fix_toolbar_comment_jump": {
592
+ "type": "boolean",
593
+ "referenceOnly": true
594
+ },
599
595
  "platform_editor_listen_for_annotation_clicks": {
600
596
  "type": "boolean",
601
597
  "referenceOnly": true
@@ -643,6 +639,10 @@
643
639
  "editor_a11y_aria_announcement_for_copied_status": {
644
640
  "type": "boolean",
645
641
  "referenceOnly": true
642
+ },
643
+ "platform_renderer_triple_click_selects_paragraph": {
644
+ "type": "boolean",
645
+ "referenceOnly": true
646
646
  }
647
647
  },
648
648
  "stricter": {