@atlaskit/editor-core 208.1.1 → 208.2.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 (24) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/ui/ContentStyles/date.js +6 -6
  3. package/dist/cjs/ui/ContentStyles/index.js +2 -2
  4. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +1 -1
  5. package/dist/cjs/ui/EditorContentContainer/styles/dateStyles.js +4 -4
  6. package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js +70 -2
  7. package/dist/cjs/version-wrapper.js +1 -1
  8. package/dist/es2019/ui/ContentStyles/date.js +5 -5
  9. package/dist/es2019/ui/ContentStyles/index.js +2 -2
  10. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +1 -1
  11. package/dist/es2019/ui/EditorContentContainer/styles/dateStyles.js +4 -4
  12. package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js +65 -2
  13. package/dist/es2019/version-wrapper.js +1 -1
  14. package/dist/esm/ui/ContentStyles/date.js +5 -5
  15. package/dist/esm/ui/ContentStyles/index.js +3 -3
  16. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +1 -1
  17. package/dist/esm/ui/EditorContentContainer/styles/dateStyles.js +4 -4
  18. package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js +70 -2
  19. package/dist/esm/version-wrapper.js +1 -1
  20. package/dist/types/ui/ContentStyles/date.d.ts +1 -1
  21. package/dist/types/ui/Toolbar/ToolbarWithSizeDetector.d.ts +6 -2
  22. package/dist/types-ts4.5/ui/ContentStyles/date.d.ts +1 -1
  23. package/dist/types-ts4.5/ui/Toolbar/ToolbarWithSizeDetector.d.ts +6 -2
  24. package/package.json +2 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 208.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#172447](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/172447)
8
+ [`06e9b6904aff2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06e9b6904aff2) -
9
+ [https://product-fabric.atlassian.net/browse/ED-27984](ED-27984) - clean up
10
+ platform_editor_react18_phase2**media_single and platform_editor_react18_phase2**media_single_jira
11
+ FFs
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
17
+ ## 208.1.2
18
+
19
+ ### Patch Changes
20
+
21
+ - [#174035](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/174035)
22
+ [`0d3ac8d3b7705`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d3ac8d3b7705) -
23
+ [ux] Migrate toolbarWithSizeDetector styles to static emotion
24
+ - Updated dependencies
25
+
3
26
  ## 208.1.1
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/ui/ContentStyles/date.js CHANGED
@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.dateVanillaStyles = exports.dateStyles = void 0;
7
+ exports.dateStyles = exports.dateNodeStyles = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
10
  var _styles = require("@atlaskit/editor-common/styles");
11
11
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
12
  var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
14
- var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)({
14
+ var dateNodeStyles = exports.dateNodeStyles = (0, _react.css)({
15
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
16
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
16
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
17
17
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
18
18
  color: "var(--ds-text, #172B4D)",
19
19
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -25,16 +25,16 @@ var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)({
25
25
  cursor: 'unset'
26
26
  },
27
27
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
28
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
28
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
29
29
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
30
30
  },
31
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
32
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
32
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
33
33
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
34
34
  color: "var(--ds-text-accent-red, #AE2E24)"
35
35
  },
36
36
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
37
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
37
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
38
38
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
39
39
  }
40
40
  });
package/dist/cjs/ui/ContentStyles/index.js CHANGED
@@ -152,7 +152,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
152
152
  // Under editor experiment platform_editor_core_static_emotion
153
153
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
154
154
  var legacyContentStyles = function legacyContentStyles(props) {
155
- return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.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.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
155
+ return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.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.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
156
156
  theme: props.theme
157
157
  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", (0, _platformFeatureFlags.fg)('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
158
158
  exposure: false
@@ -168,7 +168,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
168
168
  exposure: false
169
169
  }) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
170
170
  exposure: false
171
- }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
171
+ }) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
172
172
  };
173
173
  var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
174
174
  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -264,7 +264,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
264
264
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
265
265
  _smartCardStyles.smartLinksInLivePagesStylesOld, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') &&
266
266
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
267
- _smartCardStyles.linkingVisualRefreshV1Styles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) &&
267
+ _smartCardStyles.linkingVisualRefreshV1Styles,
268
268
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
269
269
  _dateStyles.dateVanillaStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
270
270
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/cjs/ui/EditorContentContainer/styles/dateStyles.js CHANGED
@@ -16,7 +16,7 @@ var DateSharedCssClassName = exports.DateSharedCssClassName = {
16
16
  };
17
17
 
18
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
19
- var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
19
+ var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
20
20
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
21
21
  color: "var(--ds-text, #172B4D)",
22
22
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -26,12 +26,12 @@ var dateVanillaStyles = exports.dateVanillaStyles = (0, _react.css)((0, _defineP
26
26
  transition: 'background 0.3s',
27
27
  whiteSpace: 'nowrap',
28
28
  cursor: 'unset'
29
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
29
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
30
30
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
31
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
31
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
32
32
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
33
33
  color: "var(--ds-text-accent-red, #AE2E24)"
34
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
34
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
35
35
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
36
36
  }));
37
37
 
package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED
@@ -14,6 +14,8 @@ var _react2 = require("@emotion/react");
14
14
  var _coreUtils = require("@atlaskit/editor-common/core-utils");
15
15
  var _types = require("@atlaskit/editor-common/types");
16
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
17
+ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
18
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
19
  var _widthDetector = require("@atlaskit/width-detector");
18
20
  var _isFullPage = require("../../utils/is-full-page");
19
21
  var _hooks = require("./hooks");
@@ -27,6 +29,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
27
29
 
28
30
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
29
31
 
32
+ // Remove when platform_editor_core_static_emotion is cleaned up
30
33
  var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
31
34
  width: '100%',
32
35
  position: 'relative'
@@ -36,7 +39,20 @@ var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
36
39
  width: 'calc(100% - 30px)',
37
40
  margin: "0 ".concat("var(--ds-space-200, 16px)")
38
41
  }));
39
- var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
42
+
43
+ // Rename to toolbar when platform_editor_core_static_emotion is cleaned up
44
+ var staticToolbar = (0, _react2.css)({
45
+ width: '100%',
46
+ position: 'relative'
47
+ // The media query below has been commented out as akEditorMobileMaxWidth is 0px and thus the styles are never applied.
48
+ // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
49
+ // gridColumn: '1 / 2',
50
+ // gridRow: 2,
51
+ // width: 'calc(100% - 30px)',
52
+ // margin: `0 ${token('space.200', '16px')}`,
53
+ // },
54
+ });
55
+ var DynamicStyleToolbarWithSizeDetector = function DynamicStyleToolbarWithSizeDetector(props) {
40
56
  var ref = _react.default.useRef(null);
41
57
  var _React$useState = _react.default.useState(undefined),
42
58
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -71,4 +87,56 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
71
87
  ref: ref
72
88
  }))
73
89
  );
74
- };
90
+ };
91
+ var StaticStyleToolbarWithSizeDetector = function StaticStyleToolbarWithSizeDetector(props) {
92
+ var ref = _react.default.useRef(null);
93
+ var _React$useState3 = _react.default.useState(undefined),
94
+ _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
95
+ width = _React$useState4[0],
96
+ setWidth = _React$useState4[1];
97
+ var elementWidth = (0, _hooks.useElementWidth)(ref, {
98
+ skip: typeof width !== 'undefined'
99
+ });
100
+ var defaultToolbarSize = (0, _coreUtils.isSSR)() && (0, _isFullPage.isFullPage)(props.appearance) ? _types.ToolbarSize.XXL : undefined;
101
+ var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
102
+ // Ignored via go/ees005
103
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
104
+ (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
105
+ var minWidthValue = (0, _react.useMemo)(function () {
106
+ if (props.hasMinWidth) {
107
+ var toolbarWidth = (0, _isFullPage.isFullPage)(props.appearance) && props.twoLineEditorToolbar ? _types.ToolbarSize.S : _types.ToolbarSize.M;
108
+ return (0, _toolbarSize.toolbarSizeToWidth)(toolbarWidth, props.appearance);
109
+ } else {
110
+ return 254;
111
+ }
112
+ }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
113
+ return (0, _react2.jsx)("div", {
114
+ css: staticToolbar,
115
+ style: {
116
+ minWidth: "".concat(minWidthValue, "px")
117
+ }
118
+ }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
119
+ setWidth: setWidth
120
+ }), props.editorView && toolbarSize ? (0, _react2.jsx)(_Toolbar.Toolbar, {
121
+ toolbarSize: toolbarSize,
122
+ items: props.items,
123
+ editorView: props.editorView,
124
+ editorActions: props.editorActions,
125
+ eventDispatcher: props.eventDispatcher,
126
+ providerFactory: props.providerFactory,
127
+ appearance: props.appearance,
128
+ popupsMountPoint: props.popupsMountPoint,
129
+ popupsBoundariesElement: props.popupsBoundariesElement,
130
+ popupsScrollableElement: props.popupsScrollableElement,
131
+ disabled: props.disabled,
132
+ dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
133
+ containerElement: props.containerElement,
134
+ hasMinWidth: props.hasMinWidth,
135
+ twoLineEditorToolbar: props.twoLineEditorToolbar
136
+ }) : (0, _react2.jsx)("div", {
137
+ ref: ref
138
+ }));
139
+ };
140
+ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
141
+ return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
142
+ }, StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);
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 = "208.1.0";
8
+ var version = exports.version = "208.1.2";
package/dist/es2019/ui/ContentStyles/date.js CHANGED
@@ -3,9 +3,9 @@ import { css } from '@emotion/react';
3
3
  import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
4
4
  import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
6
- export const dateVanillaStyles = css({
6
+ export const dateNodeStyles = css({
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
8
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
8
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
9
9
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
10
10
  color: "var(--ds-text, #172B4D)",
11
11
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -17,16 +17,16 @@ export const dateVanillaStyles = css({
17
17
  cursor: 'unset'
18
18
  },
19
19
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
20
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
20
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
21
21
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
22
22
  },
23
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
24
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
24
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
25
25
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
26
26
  color: "var(--ds-text-accent-red, #AE2E24)"
27
27
  },
28
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
29
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
29
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
30
30
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
31
31
  }
32
32
  });
package/dist/es2019/ui/ContentStyles/index.js CHANGED
@@ -29,7 +29,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
29
29
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
30
30
  import { aiPanelStyles } from './ai-panels';
31
31
  import { codeBlockStyles } from './code-block';
32
- import { dateStyles, dateVanillaStyles } from './date';
32
+ import { dateStyles, dateNodeStyles } from './date';
33
33
  import { expandStyles } from './expand';
34
34
  import { extensionStyles } from './extension';
35
35
  import { layoutStyles } from './layout';
@@ -438,8 +438,8 @@ const legacyContentStyles = props => css`
438
438
  ${annotationSharedStyles()}
439
439
  ${smartCardStyles()}
440
440
  ${fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles}
441
- ${editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null}
442
441
  ${dateStyles}
442
+ ${dateNodeStyles}
443
443
  ${embedCardStyles()}
444
444
  ${unsupportedStyles}
445
445
  ${resizerStyles}
package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -259,7 +259,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
259
259
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
260
260
  smartLinksInLivePagesStylesOld, fg('platform-linking-visual-refresh-v1') &&
261
261
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
262
- linkingVisualRefreshV1Styles, editorExperiment('platform_editor_vanilla_dom', true) &&
262
+ linkingVisualRefreshV1Styles,
263
263
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
264
264
  dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
265
265
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/es2019/ui/EditorContentContainer/styles/dateStyles.js CHANGED
@@ -9,7 +9,7 @@ export const DateSharedCssClassName = {
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
10
10
  export const dateVanillaStyles = css({
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
12
- [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
12
+ [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span`]: {
13
13
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
14
14
  color: "var(--ds-text, #172B4D)",
15
15
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -21,16 +21,16 @@ export const dateVanillaStyles = css({
21
21
  cursor: 'unset'
22
22
  },
23
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
24
- [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
24
+ [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span:hover`]: {
25
25
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
26
26
  },
27
27
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
28
- [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
28
+ [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red`]: {
29
29
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
30
30
  color: "var(--ds-text-accent-red, #AE2E24)"
31
31
  },
32
32
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
33
- [`[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
33
+ [`[data-prosemirror-node-name='date'] .${DateSharedCssClassName.DATE_WRAPPER} span.date-node-color-red:hover`]: {
34
34
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
35
35
  }
36
36
  });
package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED
@@ -10,11 +10,14 @@ import { css, jsx } from '@emotion/react';
10
10
  import { isSSR } from '@atlaskit/editor-common/core-utils';
11
11
  import { ToolbarSize } from '@atlaskit/editor-common/types';
12
12
  import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
13
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
14
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
15
  import { WidthObserver } from '@atlaskit/width-detector';
14
16
  import { isFullPage } from '../../utils/is-full-page';
15
17
  import { useElementWidth } from './hooks';
16
18
  import { Toolbar } from './Toolbar';
17
19
  import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
20
+ // Remove when platform_editor_core_static_emotion is cleaned up
18
21
  const toolbar = css({
19
22
  width: '100%',
20
23
  position: 'relative',
@@ -26,7 +29,20 @@ const toolbar = css({
26
29
  margin: `0 ${"var(--ds-space-200, 16px)"}`
27
30
  }
28
31
  });
29
- export const ToolbarWithSizeDetector = props => {
32
+
33
+ // Rename to toolbar when platform_editor_core_static_emotion is cleaned up
34
+ const staticToolbar = css({
35
+ width: '100%',
36
+ position: 'relative'
37
+ // The media query below has been commented out as akEditorMobileMaxWidth is 0px and thus the styles are never applied.
38
+ // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
39
+ // gridColumn: '1 / 2',
40
+ // gridRow: 2,
41
+ // width: 'calc(100% - 30px)',
42
+ // margin: `0 ${token('space.200', '16px')}`,
43
+ // },
44
+ });
45
+ const DynamicStyleToolbarWithSizeDetector = props => {
30
46
  const ref = React.useRef(null);
31
47
  const [width, setWidth] = React.useState(undefined);
32
48
  const elementWidth = useElementWidth(ref, {
@@ -58,4 +74,51 @@ export const ToolbarWithSizeDetector = props => {
58
74
  ref: ref
59
75
  }))
60
76
  );
61
- };
77
+ };
78
+ const StaticStyleToolbarWithSizeDetector = props => {
79
+ const ref = React.useRef(null);
80
+ const [width, setWidth] = React.useState(undefined);
81
+ const elementWidth = useElementWidth(ref, {
82
+ skip: typeof width !== 'undefined'
83
+ });
84
+ const defaultToolbarSize = isSSR() && isFullPage(props.appearance) ? ToolbarSize.XXL : undefined;
85
+ const toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
86
+ // Ignored via go/ees005
87
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
88
+ widthToToolbarSize(width || elementWidth, props.appearance);
89
+ const minWidthValue = useMemo(() => {
90
+ if (props.hasMinWidth) {
91
+ const toolbarWidth = isFullPage(props.appearance) && props.twoLineEditorToolbar ? ToolbarSize.S : ToolbarSize.M;
92
+ return toolbarSizeToWidth(toolbarWidth, props.appearance);
93
+ } else {
94
+ return 254;
95
+ }
96
+ }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
97
+ return jsx("div", {
98
+ css: staticToolbar,
99
+ style: {
100
+ minWidth: `${minWidthValue}px`
101
+ }
102
+ }, jsx(WidthObserver, {
103
+ setWidth: setWidth
104
+ }), props.editorView && toolbarSize ? jsx(Toolbar, {
105
+ toolbarSize: toolbarSize,
106
+ items: props.items,
107
+ editorView: props.editorView,
108
+ editorActions: props.editorActions,
109
+ eventDispatcher: props.eventDispatcher,
110
+ providerFactory: props.providerFactory,
111
+ appearance: props.appearance,
112
+ popupsMountPoint: props.popupsMountPoint,
113
+ popupsBoundariesElement: props.popupsBoundariesElement,
114
+ popupsScrollableElement: props.popupsScrollableElement,
115
+ disabled: props.disabled,
116
+ dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
117
+ containerElement: props.containerElement,
118
+ hasMinWidth: props.hasMinWidth,
119
+ twoLineEditorToolbar: props.twoLineEditorToolbar
120
+ }) : jsx("div", {
121
+ ref: ref
122
+ }));
123
+ };
124
+ export const ToolbarWithSizeDetector = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true), StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "208.1.0";
2
+ export const version = "208.1.2";
package/dist/esm/ui/ContentStyles/date.js CHANGED
@@ -5,9 +5,9 @@ import { css } from '@emotion/react';
5
5
  import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
6
6
  import { akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
8
- export var dateVanillaStyles = css({
8
+ export var dateNodeStyles = css({
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
10
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span": {
10
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span": {
11
11
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
12
12
  color: "var(--ds-text, #172B4D)",
13
13
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -19,16 +19,16 @@ export var dateVanillaStyles = css({
19
19
  cursor: 'unset'
20
20
  },
21
21
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
22
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
22
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span:hover": {
23
23
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
24
24
  },
25
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
26
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
26
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red": {
27
27
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
28
28
  color: "var(--ds-text-accent-red, #AE2E24)"
29
29
  },
30
30
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
31
- "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
31
+ "[data-prosemirror-node-name='date'] .date-lozenger-container span.date-node-color-red:hover": {
32
32
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
33
33
  }
34
34
  });
package/dist/esm/ui/ContentStyles/index.js CHANGED
@@ -31,7 +31,7 @@ import { useThemeObserver } from '@atlaskit/tokens';
31
31
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
32
32
  import { aiPanelStyles } from './ai-panels';
33
33
  import { codeBlockStyles } from './code-block';
34
- import { dateStyles, dateVanillaStyles } from './date';
34
+ import { dateStyles, dateNodeStyles } from './date';
35
35
  import { expandStyles } from './expand';
36
36
  import { extensionStyles } from './extension';
37
37
  import { layoutStyles } from './layout';
@@ -145,7 +145,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
145
145
  // Under editor experiment platform_editor_core_static_emotion
146
146
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
147
147
  var legacyContentStyles = function legacyContentStyles(props) {
148
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.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.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
148
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.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.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
149
149
  theme: props.theme
150
150
  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", fg('platform_editor_fix_floating_toolbar_focus') ? firstFloatingToolbarButtonStyles : null, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
151
151
  exposure: false
@@ -161,7 +161,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
161
161
  exposure: false
162
162
  }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
163
163
  exposure: false
164
- }) && !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, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _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
+ }) && !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, dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _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);
165
165
  };
166
166
  export var createEditorContentStyle = function createEditorContentStyle(styles) {
167
167
  return /*#__PURE__*/React.forwardRef(function (props, ref) {
package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -256,7 +256,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
256
256
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
257
257
  smartLinksInLivePagesStylesOld, fg('platform-linking-visual-refresh-v1') &&
258
258
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
259
- linkingVisualRefreshV1Styles, editorExperiment('platform_editor_vanilla_dom', true) &&
259
+ linkingVisualRefreshV1Styles,
260
260
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
261
261
  dateVanillaStyles, fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
262
262
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/esm/ui/EditorContentContainer/styles/dateStyles.js CHANGED
@@ -8,7 +8,7 @@ export var DateSharedCssClassName = {
8
8
  };
9
9
 
10
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
11
- export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
11
+ export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span"), {
12
12
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
13
13
  color: "var(--ds-text, #172B4D)",
14
14
  borderRadius: "var(--ds-border-radius-100, 4px)",
@@ -18,12 +18,12 @@ export var dateVanillaStyles = css(_defineProperty(_defineProperty(_defineProper
18
18
  transition: 'background 0.3s',
19
19
  whiteSpace: 'nowrap',
20
20
  cursor: 'unset'
21
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
21
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span:hover"), {
22
22
  backgroundColor: "var(--ds-background-neutral-hovered, #091E4224)"
23
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
23
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red"), {
24
24
  backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
25
25
  color: "var(--ds-text-accent-red, #AE2E24)"
26
- }), "[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
26
+ }), "[data-prosemirror-node-name='date'] .".concat(DateSharedCssClassName.DATE_WRAPPER, " span.date-node-color-red:hover"), {
27
27
  backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)"
28
28
  }));
29
29
 
package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js CHANGED
@@ -12,11 +12,14 @@ import { css, jsx } from '@emotion/react';
12
12
  import { isSSR } from '@atlaskit/editor-common/core-utils';
13
13
  import { ToolbarSize } from '@atlaskit/editor-common/types';
14
14
  import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
15
+ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
16
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
17
  import { WidthObserver } from '@atlaskit/width-detector';
16
18
  import { isFullPage } from '../../utils/is-full-page';
17
19
  import { useElementWidth } from './hooks';
18
20
  import { Toolbar } from './Toolbar';
19
21
  import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
22
+ // Remove when platform_editor_core_static_emotion is cleaned up
20
23
  var toolbar = css(_defineProperty({
21
24
  width: '100%',
22
25
  position: 'relative'
@@ -26,7 +29,20 @@ var toolbar = css(_defineProperty({
26
29
  width: 'calc(100% - 30px)',
27
30
  margin: "0 ".concat("var(--ds-space-200, 16px)")
28
31
  }));
29
- export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
32
+
33
+ // Rename to toolbar when platform_editor_core_static_emotion is cleaned up
34
+ var staticToolbar = css({
35
+ width: '100%',
36
+ position: 'relative'
37
+ // The media query below has been commented out as akEditorMobileMaxWidth is 0px and thus the styles are never applied.
38
+ // [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
39
+ // gridColumn: '1 / 2',
40
+ // gridRow: 2,
41
+ // width: 'calc(100% - 30px)',
42
+ // margin: `0 ${token('space.200', '16px')}`,
43
+ // },
44
+ });
45
+ var DynamicStyleToolbarWithSizeDetector = function DynamicStyleToolbarWithSizeDetector(props) {
30
46
  var ref = React.useRef(null);
31
47
  var _React$useState = React.useState(undefined),
32
48
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -61,4 +77,56 @@ export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
61
77
  ref: ref
62
78
  }))
63
79
  );
64
- };
80
+ };
81
+ var StaticStyleToolbarWithSizeDetector = function StaticStyleToolbarWithSizeDetector(props) {
82
+ var ref = React.useRef(null);
83
+ var _React$useState3 = React.useState(undefined),
84
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
85
+ width = _React$useState4[0],
86
+ setWidth = _React$useState4[1];
87
+ var elementWidth = useElementWidth(ref, {
88
+ skip: typeof width !== 'undefined'
89
+ });
90
+ var defaultToolbarSize = isSSR() && isFullPage(props.appearance) ? ToolbarSize.XXL : undefined;
91
+ var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize :
92
+ // Ignored via go/ees005
93
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
94
+ widthToToolbarSize(width || elementWidth, props.appearance);
95
+ var minWidthValue = useMemo(function () {
96
+ if (props.hasMinWidth) {
97
+ var toolbarWidth = isFullPage(props.appearance) && props.twoLineEditorToolbar ? ToolbarSize.S : ToolbarSize.M;
98
+ return toolbarSizeToWidth(toolbarWidth, props.appearance);
99
+ } else {
100
+ return 254;
101
+ }
102
+ }, [props.appearance, props.hasMinWidth, props.twoLineEditorToolbar]);
103
+ return jsx("div", {
104
+ css: staticToolbar,
105
+ style: {
106
+ minWidth: "".concat(minWidthValue, "px")
107
+ }
108
+ }, jsx(WidthObserver, {
109
+ setWidth: setWidth
110
+ }), props.editorView && toolbarSize ? jsx(Toolbar, {
111
+ toolbarSize: toolbarSize,
112
+ items: props.items,
113
+ editorView: props.editorView,
114
+ editorActions: props.editorActions,
115
+ eventDispatcher: props.eventDispatcher,
116
+ providerFactory: props.providerFactory,
117
+ appearance: props.appearance,
118
+ popupsMountPoint: props.popupsMountPoint,
119
+ popupsBoundariesElement: props.popupsBoundariesElement,
120
+ popupsScrollableElement: props.popupsScrollableElement,
121
+ disabled: props.disabled,
122
+ dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
123
+ containerElement: props.containerElement,
124
+ hasMinWidth: props.hasMinWidth,
125
+ twoLineEditorToolbar: props.twoLineEditorToolbar
126
+ }) : jsx("div", {
127
+ ref: ref
128
+ }));
129
+ };
130
+ export var ToolbarWithSizeDetector = componentWithCondition(function () {
131
+ return expValEquals('platform_editor_core_static_emotion_non_central', 'isEnabled', true);
132
+ }, StaticStyleToolbarWithSizeDetector, DynamicStyleToolbarWithSizeDetector);
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "208.1.0";
2
+ export var version = "208.1.2";
package/dist/types/ui/ContentStyles/date.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const dateVanillaStyles: import("@emotion/react").SerializedStyles;
1
+ export declare const dateNodeStyles: import("@emotion/react").SerializedStyles;
2
2
  export declare const dateStyles: import("@emotion/react").SerializedStyles;
package/dist/types/ui/Toolbar/ToolbarWithSizeDetector.d.ts CHANGED
@@ -1,3 +1,7 @@
1
- import { jsx } from '@emotion/react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
2
6
  import type { ToolbarWithSizeDetectorProps } from './toolbar-types';
3
- export declare const ToolbarWithSizeDetector: (props: ToolbarWithSizeDetectorProps) => jsx.JSX.Element;
7
+ export declare const ToolbarWithSizeDetector: React.FC<ToolbarWithSizeDetectorProps>;
package/dist/types-ts4.5/ui/ContentStyles/date.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const dateVanillaStyles: import("@emotion/react").SerializedStyles;
1
+ export declare const dateNodeStyles: import("@emotion/react").SerializedStyles;
2
2
  export declare const dateStyles: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/Toolbar/ToolbarWithSizeDetector.d.ts CHANGED
@@ -1,3 +1,7 @@
1
- import { jsx } from '@emotion/react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React from 'react';
2
6
  import type { ToolbarWithSizeDetectorProps } from './toolbar-types';
3
- export declare const ToolbarWithSizeDetector: (props: ToolbarWithSizeDetectorProps) => jsx.JSX.Element;
7
+ export declare const ToolbarWithSizeDetector: React.FC<ToolbarWithSizeDetectorProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "208.1.1",
3
+ "version": "208.2.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -105,7 +105,7 @@
105
105
  "@atlaskit/primitives": "^14.9.0",
106
106
  "@atlaskit/renderer": "^119.0.0",
107
107
  "@atlaskit/section-message": "^8.2.0",
108
- "@atlaskit/smart-card": "^38.11.0",
108
+ "@atlaskit/smart-card": "^38.13.0",
109
109
  "@atlaskit/synchrony-test-helpers": "workspace:^",
110
110
  "@atlaskit/toggle": "^15.0.0",
111
111
  "@atlaskit/util-data-test": "^18.0.0",
@@ -260,14 +260,6 @@
260
260
  "type": "boolean",
261
261
  "referenceOnly": true
262
262
  },
263
- "platform_editor_react18_phase2__media_single": {
264
- "type": "boolean",
265
- "referenceOnly": true
266
- },
267
- "platform_editor_react18_phase2__media_single_jira": {
268
- "type": "boolean",
269
- "referenceOnly": true
270
- },
271
263
  "platform_editor_content_component_ignore_click": {
272
264
  "type": "boolean"
273
265
  },
@@ -552,10 +544,6 @@
552
544
  "type": "boolean",
553
545
  "referenceOnly": true
554
546
  },
555
- "platform_editor_controls_patch_7": {
556
- "type": "boolean",
557
- "referenceOnly": true
558
- },
559
547
  "platform_editor_controls_patch_9": {
560
548
  "type": "boolean",
561
549
  "referenceOnly": true