@atlaskit/editor-core 197.2.5 → 197.2.7

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 (14) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/ui/Appearance/FullPage/FullPage.js +3 -10
  3. package/dist/cjs/ui/ContentStyles/index.js +3 -2
  4. package/dist/cjs/ui/Toolbar/ToolbarInner.js +7 -0
  5. package/dist/cjs/version-wrapper.js +1 -1
  6. package/dist/es2019/ui/Appearance/FullPage/FullPage.js +3 -10
  7. package/dist/es2019/ui/ContentStyles/index.js +3 -2
  8. package/dist/es2019/ui/Toolbar/ToolbarInner.js +7 -0
  9. package/dist/es2019/version-wrapper.js +1 -1
  10. package/dist/esm/ui/Appearance/FullPage/FullPage.js +3 -10
  11. package/dist/esm/ui/ContentStyles/index.js +3 -2
  12. package/dist/esm/ui/Toolbar/ToolbarInner.js +7 -0
  13. package/dist/esm/version-wrapper.js +1 -1
  14. package/package.json +10 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 197.2.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#136485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136485)
8
+ [`96d4b8a73c2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96d4b8a73c2ea) -
9
+ Refactored table styles so that it is inside the tables plugin and not in the editors critical
10
+ path.
11
+
12
+ ## 197.2.6
13
+
14
+ ### Patch Changes
15
+
16
+ - [#137244](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137244)
17
+ [`e6f32d1f22896`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6f32d1f22896) -
18
+ Control show or hide editor toolbar in SSR environment
19
+ - [#136871](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136871)
20
+ [`87a30d5cb3ffb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87a30d5cb3ffb) -
21
+ ED-24814 - Addressing a bug where changing the language on a wrapped code block caused the wrapped
22
+ decorator to disappear. Required changing the sequence in which we update the keys on the wrapped
23
+ states WeakMap. Due to the amount of changes, it has all be placed behind a bug fix feature gate
24
+ (editor_code_block_wrapping_language_change_bug) and the original feature gate
25
+ (editor_support_code_block_wrapping).
26
+
3
27
  ## 197.2.5
4
28
 
5
29
  ### Patch Changes
package/dist/cjs/ui/Appearance/FullPage/FullPage.js CHANGED
@@ -55,7 +55,7 @@ var useShowKeyline = function useShowKeyline(contentAreaRef) {
55
55
  return showKeyline;
56
56
  };
57
57
  var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
58
- var _editorAPI$primaryToo, _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
58
+ var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
59
59
  var wrapperElementRef = (0, _react.useMemo)(function () {
60
60
  return props.innerRef;
61
61
  }, [props.innerRef]);
@@ -66,15 +66,8 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
66
66
  editorViewModeState = _useSharedPluginState.editorViewModeState,
67
67
  primaryToolbarState = _useSharedPluginState.primaryToolbarState;
68
68
  var primaryToolbarComponents = props.primaryToolbarComponents;
69
- var toolbarComponentsSSR = (0, _platformFeatureFlags.fg)('platform_editor_toolbar_ssr') ? editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components : [];
70
- if (Array.isArray(primaryToolbarComponents)) {
71
- var _primaryToolbarState$;
72
- var additionalComponents = (_primaryToolbarState$ = primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) !== null && _primaryToolbarState$ !== void 0 ? _primaryToolbarState$ : [];
73
- // The primary toolbar state may be undefined if we are in SSR environment - in which case fallback to the current state (useLayoutEffect doesn't work in SSR)
74
- if (additionalComponents.length === 0) {
75
- additionalComponents = toolbarComponentsSSR !== null && toolbarComponentsSSR !== void 0 ? toolbarComponentsSSR : [];
76
- }
77
- primaryToolbarComponents = additionalComponents.concat(primaryToolbarComponents);
69
+ if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
70
+ primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
78
71
  }
79
72
  var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
80
73
  var popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 || (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
package/dist/cjs/ui/ContentStyles/index.js CHANGED
@@ -22,6 +22,7 @@ var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
22
22
  var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
23
23
  var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
24
24
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
25
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
25
26
  var _colors = require("@atlaskit/theme/colors");
26
27
  var _tokens = require("@atlaskit/tokens");
27
28
  var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
@@ -75,9 +76,9 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
75
76
  }
76
77
  });
77
78
  var contentStyles = function contentStyles(props) {
78
- return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .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/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
79
+ return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
79
80
  theme: props.theme
80
- }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
81
+ }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _platformFeatureFlags.fg)('platform_editor_move_table_styles_to_plugin') ? undefined : (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
81
82
  };
82
83
  var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
83
84
  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
package/dist/cjs/ui/Toolbar/ToolbarInner.js CHANGED
@@ -14,7 +14,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
14
14
  var _react = _interopRequireDefault(require("react"));
15
15
  var _react2 = require("@emotion/react");
16
16
  var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
17
+ var _coreUtils = require("@atlaskit/editor-common/core-utils");
17
18
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
20
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
19
21
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
20
22
  * @jsxRuntime classic
@@ -58,6 +60,11 @@ var ToolbarInner = exports.ToolbarInner = /*#__PURE__*/function (_React$Componen
58
60
  if (!items || !items.length) {
59
61
  return null;
60
62
  }
63
+ if ((0, _coreUtils.isSSR)() && (0, _platformFeatureFlags.fg)('platform_hide_editor_toolbar_ssr')) {
64
+ // Toolbar in SSR environment is showing collapsed state, which caused layout shift after hydrating to SPA.
65
+ // Hiding toolbar in SSR until the dependency of screen width is resolved in SSR environment.
66
+ return null;
67
+ }
61
68
  return (0, _react2.jsx)("div", {
62
69
  css: toolbarComponentsWrapper
63
70
  }, items.map(function (component, key) {
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 = "197.2.5";
8
+ var version = exports.version = "197.2.7";
package/dist/es2019/ui/Appearance/FullPage/FullPage.js CHANGED
@@ -38,7 +38,7 @@ const useShowKeyline = contentAreaRef => {
38
38
  return showKeyline;
39
39
  };
40
40
  export const FullPageEditor = props => {
41
- var _editorAPI$primaryToo, _editorAPI$primaryToo2, _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
41
+ var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
42
42
  const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
43
43
  const scrollContentContainerRef = useRef(null);
44
44
  const showKeyline = useShowKeyline(scrollContentContainerRef);
@@ -48,15 +48,8 @@ export const FullPageEditor = props => {
48
48
  primaryToolbarState
49
49
  } = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar']);
50
50
  let primaryToolbarComponents = props.primaryToolbarComponents;
51
- const toolbarComponentsSSR = fg('platform_editor_toolbar_ssr') ? editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 ? void 0 : (_editorAPI$primaryToo2 = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo2 === void 0 ? void 0 : _editorAPI$primaryToo2.components : [];
52
- if (Array.isArray(primaryToolbarComponents)) {
53
- var _primaryToolbarState$;
54
- let additionalComponents = (_primaryToolbarState$ = primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) !== null && _primaryToolbarState$ !== void 0 ? _primaryToolbarState$ : [];
55
- // The primary toolbar state may be undefined if we are in SSR environment - in which case fallback to the current state (useLayoutEffect doesn't work in SSR)
56
- if (additionalComponents.length === 0) {
57
- additionalComponents = toolbarComponentsSSR !== null && toolbarComponentsSSR !== void 0 ? toolbarComponentsSSR : [];
58
- }
59
- primaryToolbarComponents = additionalComponents.concat(primaryToolbarComponents);
51
+ if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
52
+ primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
60
53
  }
61
54
  const isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
62
55
  const popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 ? void 0 : (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
package/dist/es2019/ui/ContentStyles/index.js CHANGED
@@ -24,6 +24,7 @@ import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolb
24
24
  import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
25
25
  import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
26
26
  import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
27
+ import { fg } from '@atlaskit/platform-feature-flags';
27
28
  import { N200, N30A, N500 } from '@atlaskit/theme/colors';
28
29
  import { useThemeObserver } from '@atlaskit/tokens';
29
30
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -199,9 +200,9 @@ const contentStyles = props => css`
199
200
  ${layoutStyles(props.viewMode)}
200
201
  ${telepointerStyle}
201
202
  ${gapCursorStyles};
202
- ${tableStyles(props)}
203
+ ${fg('platform_editor_move_table_styles_to_plugin') ? undefined : tableStyles(props)}
203
204
  ${panelStyles()}
204
- ${mentionsStyles}
205
+ ${mentionsStyles}
205
206
  ${emojiStyles}
206
207
  ${tasksAndDecisionsStyles}
207
208
  ${gridStyles}
package/dist/es2019/ui/Toolbar/ToolbarInner.js CHANGED
@@ -7,7 +7,9 @@ import React from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import isEqual from 'lodash/isEqual';
10
+ import { isSSR } from '@atlaskit/editor-common/core-utils';
10
11
  import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
11
13
  const toolbarComponentsWrapper = css({
12
14
  display: 'flex',
13
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -39,6 +41,11 @@ export class ToolbarInner extends React.Component {
39
41
  if (!items || !items.length) {
40
42
  return null;
41
43
  }
44
+ if (isSSR() && fg('platform_hide_editor_toolbar_ssr')) {
45
+ // Toolbar in SSR environment is showing collapsed state, which caused layout shift after hydrating to SPA.
46
+ // Hiding toolbar in SSR until the dependency of screen width is resolved in SSR environment.
47
+ return null;
48
+ }
42
49
  return jsx("div", {
43
50
  css: toolbarComponentsWrapper
44
51
  }, items.map((component, key) => {
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "197.2.5";
2
+ export const version = "197.2.7";
package/dist/esm/ui/Appearance/FullPage/FullPage.js CHANGED
@@ -44,7 +44,7 @@ var useShowKeyline = function useShowKeyline(contentAreaRef) {
44
44
  return showKeyline;
45
45
  };
46
46
  export var FullPageEditor = function FullPageEditor(props) {
47
- var _editorAPI$primaryToo, _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
47
+ var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;
48
48
  var wrapperElementRef = useMemo(function () {
49
49
  return props.innerRef;
50
50
  }, [props.innerRef]);
@@ -55,15 +55,8 @@ export var FullPageEditor = function FullPageEditor(props) {
55
55
  editorViewModeState = _useSharedPluginState.editorViewModeState,
56
56
  primaryToolbarState = _useSharedPluginState.primaryToolbarState;
57
57
  var primaryToolbarComponents = props.primaryToolbarComponents;
58
- var toolbarComponentsSSR = fg('platform_editor_toolbar_ssr') ? editorAPI === null || editorAPI === void 0 || (_editorAPI$primaryToo = editorAPI.primaryToolbar) === null || _editorAPI$primaryToo === void 0 || (_editorAPI$primaryToo = _editorAPI$primaryToo.sharedState.currentState()) === null || _editorAPI$primaryToo === void 0 ? void 0 : _editorAPI$primaryToo.components : [];
59
- if (Array.isArray(primaryToolbarComponents)) {
60
- var _primaryToolbarState$;
61
- var additionalComponents = (_primaryToolbarState$ = primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) !== null && _primaryToolbarState$ !== void 0 ? _primaryToolbarState$ : [];
62
- // The primary toolbar state may be undefined if we are in SSR environment - in which case fallback to the current state (useLayoutEffect doesn't work in SSR)
63
- if (additionalComponents.length === 0) {
64
- additionalComponents = toolbarComponentsSSR !== null && toolbarComponentsSSR !== void 0 ? toolbarComponentsSSR : [];
65
- }
66
- primaryToolbarComponents = additionalComponents.concat(primaryToolbarComponents);
58
+ if (Array.isArray(primaryToolbarState === null || primaryToolbarState === void 0 ? void 0 : primaryToolbarState.components) && Array.isArray(primaryToolbarComponents)) {
59
+ primaryToolbarComponents = primaryToolbarState.components.concat(primaryToolbarComponents);
67
60
  }
68
61
  var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
69
62
  var popupsBoundariesElement = props.popupsBoundariesElement || (scrollContentContainerRef === null || scrollContentContainerRef === void 0 || (_scrollContentContain = scrollContentContainerRef.current) === null || _scrollContentContain === void 0 ? void 0 : _scrollContentContain.containerArea) || undefined;
package/dist/esm/ui/ContentStyles/index.js CHANGED
@@ -26,6 +26,7 @@ import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolb
26
26
  import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
27
27
  import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
28
28
  import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
29
+ import { fg } from '@atlaskit/platform-feature-flags';
29
30
  import { N200, N30A, N500 } from '@atlaskit/theme/colors';
30
31
  import { useThemeObserver } from '@atlaskit/tokens';
31
32
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
@@ -68,9 +69,9 @@ export var placeholderStyles = css({
68
69
  }
69
70
  });
70
71
  var contentStyles = function contentStyles(props) {
71
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .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/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), editorFontSize({
72
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), editorFontSize({
72
73
  theme: props.theme
73
- }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
74
+ }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, fg('platform_editor_move_table_styles_to_plugin') ? undefined : tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
74
75
  };
75
76
  export var createEditorContentStyle = function createEditorContentStyle(styles) {
76
77
  return /*#__PURE__*/React.forwardRef(function (props, ref) {
package/dist/esm/ui/Toolbar/ToolbarInner.js CHANGED
@@ -15,7 +15,9 @@ import React from 'react';
15
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
16
  import { css, jsx } from '@emotion/react';
17
17
  import isEqual from 'lodash/isEqual';
18
+ import { isSSR } from '@atlaskit/editor-common/core-utils';
18
19
  import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
19
21
  var toolbarComponentsWrapper = css(_defineProperty({
20
22
  display: 'flex'
21
23
  }, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
@@ -54,6 +56,11 @@ export var ToolbarInner = /*#__PURE__*/function (_React$Component) {
54
56
  if (!items || !items.length) {
55
57
  return null;
56
58
  }
59
+ if (isSSR() && fg('platform_hide_editor_toolbar_ssr')) {
60
+ // Toolbar in SSR environment is showing collapsed state, which caused layout shift after hydrating to SPA.
61
+ // Hiding toolbar in SSR until the dependency of screen width is resolved in SSR environment.
62
+ return null;
63
+ }
57
64
  return jsx("div", {
58
65
  css: toolbarComponentsWrapper
59
66
  }, items.map(function (component, key) {
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "197.2.5";
2
+ export var version = "197.2.7";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "197.2.5",
3
+ "version": "197.2.7",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -100,7 +100,7 @@
100
100
  "@atlaskit/modal-dialog": "^12.15.0",
101
101
  "@atlaskit/primitives": "^12.1.0",
102
102
  "@atlaskit/renderer": "^109.51.0",
103
- "@atlaskit/smart-card": "^27.19.0",
103
+ "@atlaskit/smart-card": "^27.20.0",
104
104
  "@atlaskit/synchrony-test-helpers": "^2.5.0",
105
105
  "@atlaskit/toggle": "^13.3.0",
106
106
  "@atlaskit/util-data-test": "^17.9.0",
@@ -244,6 +244,9 @@
244
244
  "editor-fix-esc-main-toolbar-navigation": {
245
245
  "type": "boolean"
246
246
  },
247
+ "platform_editor_move_table_styles_to_plugin": {
248
+ "type": "boolean"
249
+ },
247
250
  "platform_editor_lazy-node-views": {
248
251
  "type": "boolean",
249
252
  "referenceOnly": true
@@ -252,10 +255,14 @@
252
255
  "type": "boolean",
253
256
  "referenceOnly": true
254
257
  },
258
+ "editor_code_block_wrapping_language_change_bug": {
259
+ "type": "boolean",
260
+ "referenceOnly": true
261
+ },
255
262
  "platform_editor_drag_and_drop_expand_style_fix": {
256
263
  "type": "boolean"
257
264
  },
258
- "platform_editor_toolbar_ssr": {
265
+ "platform_hide_editor_toolbar_ssr": {
259
266
  "type": "boolean"
260
267
  },
261
268
  "platform_editor_remove_hide_avatar_group_prop": {