@atlaskit/editor-plugin-breakout 5.1.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-breakout
 
+## 5.2.1
+
+### Patch Changes
+
+- [`8339b4553cc39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8339b4553cc39) -
+  Hydration fixes for breakout plugin
+- Updated dependencies
+
+## 5.2.0
+
+### Minor Changes
+
+- [`b367661ba720e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b367661ba720e) -
+  EDITOR-1562 bump adf-schema for afm
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/cjs/breakoutPlugin.js

@@ -145,18 +145,26 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     breakoutNodePresent = _useState2[0],
     setBreakoutNodePresent = _useState2[1];
-  var _useState3 = (0, _react.useState)((0, _getBreakoutMode.getBreakoutMode)(editorView.state)),
+  var _useState3 = (0, _react.useState)((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (0, _getBreakoutMode.getBreakoutMode)(editorView.state)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     breakoutMode = _useState4[0],
     setBreakoutMode = _useState4[1];
   (0, _usePluginStateEffect.usePluginStateEffect)(api, ['breakout'], function (_ref3) {
     var breakoutState = _ref3.breakoutState;
+    if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     var nextBreakoutMode = (0, _getBreakoutMode.getBreakoutMode)(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);
@@ -242,6 +250,9 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsMountPoint = _ref6.popupsMountPoint,
         popupsBoundariesElement = _ref6.popupsBoundariesElement,
         popupsScrollableElement = _ref6.popupsScrollableElement;
+      if (!editorView) {
+        return null;
+      }
       if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
         return /*#__PURE__*/_react.default.createElement(_GuidelineLabel.GuidelineLabel, {
           api: api,

package/dist/cjs/ui/LayoutButton.js

@@ -23,6 +23,7 @@ var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/coll
 var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _removeBreakout = require("../editor-commands/remove-breakout");
 var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
@@ -82,8 +83,14 @@ var LayoutButton = function LayoutButton(_ref) {
     api = _ref.api;
   var handleClick = (0, _react.useCallback)(function (breakoutMode) {
     var _getPluginState;
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
+    if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var _ref2 = editorView,
+      state = _ref2.state,
+      dispatch = _ref2.dispatch;
     var breakoutNode = (_getPluginState = (0, _pluginKey.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
       var _api$analytics;
@@ -111,8 +118,13 @@ var LayoutButton = function LayoutButton(_ref) {
       });
     }
   }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  var state = editorView.state;
-  if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(editorView.state)) {
     return null;
   }
   var breakoutMode = breakoutModeProp;
@@ -120,11 +132,17 @@ var LayoutButton = function LayoutButton(_ref) {
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = (0, _utils.getNextBreakoutMode)(breakoutMode);
   var belowOtherPopupsZIndex = _constants.layers.layer() - 1;
-  var pluginState = (0, _pluginKey.getPluginState)(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var pluginState = (0, _pluginKey.getPluginState)(editorView.state);
   if (!pluginState) {
     return null;
   }
-  var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }

package/dist/es2019/breakoutPlugin.js

@@ -132,16 +132,24 @@ const LayoutButtonWrapper = ({
     };
   });
   const [breakoutNodePresent, setBreakoutNodePresent] = useState(false);
-  const [breakoutMode, setBreakoutMode] = useState(getBreakoutMode(editorView.state));
+  const [breakoutMode, setBreakoutMode] = useState(expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  getBreakoutMode(editorView.state));
   usePluginStateEffect(api, ['breakout'], ({
     breakoutState
   }) => {
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const nextBreakoutMode = getBreakoutMode(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);
@@ -225,6 +233,9 @@ export const breakoutPlugin = ({
     popupsBoundariesElement,
     popupsScrollableElement
   }) {
+    if (!editorView) {
+      return null;
+    }
     if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
       return /*#__PURE__*/React.createElement(GuidelineLabel, {
         api: api,

package/dist/es2019/ui/LayoutButton.js

@@ -21,6 +21,7 @@ import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { removeBreakout } from '../editor-commands/remove-breakout';
 import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -79,6 +80,11 @@ const LayoutButton = ({
   var _api$analytics3;
   const handleClick = useCallback(breakoutMode => {
     var _getPluginState;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const {
       state,
       dispatch
@@ -110,10 +116,13 @@ const LayoutButton = ({
       });
     }
   }, [api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  const {
-    state
-  } = editorView;
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(state)) {
+  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
     return null;
   }
   const breakoutMode = breakoutModeProp;
@@ -121,11 +130,17 @@ const LayoutButton = ({
   const title = formatMessage(titleMessage);
   const nextBreakoutMode = getNextBreakoutMode(breakoutMode);
   const belowOtherPopupsZIndex = layers.layer() - 1;
-  const pluginState = getPluginState(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const pluginState = getPluginState(editorView.state);
   if (!pluginState) {
     return null;
   }
-  let element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  let element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }

package/dist/esm/breakoutPlugin.js

@@ -136,18 +136,26 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     breakoutNodePresent = _useState2[0],
     setBreakoutNodePresent = _useState2[1];
-  var _useState3 = useState(getBreakoutMode(editorView.state)),
+  var _useState3 = useState(expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView ? undefined :
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    getBreakoutMode(editorView.state)),
     _useState4 = _slicedToArray(_useState3, 2),
     breakoutMode = _useState4[0],
     setBreakoutMode = _useState4[1];
   usePluginStateEffect(api, ['breakout'], function (_ref3) {
     var breakoutState = _ref3.breakoutState;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
     if (breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode && !breakoutNodePresent) {
       setBreakoutNodePresent(true);
     }
     if (!(breakoutState !== null && breakoutState !== void 0 && breakoutState.breakoutNode) && breakoutNodePresent) {
       setBreakoutNodePresent(false);
     }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     var nextBreakoutMode = getBreakoutMode(editorView.state);
     if (nextBreakoutMode !== breakoutMode) {
       setBreakoutMode(nextBreakoutMode);
@@ -233,6 +241,9 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
         popupsMountPoint = _ref6.popupsMountPoint,
         popupsBoundariesElement = _ref6.popupsBoundariesElement,
         popupsScrollableElement = _ref6.popupsScrollableElement;
+      if (!editorView) {
+        return null;
+      }
       if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
         return /*#__PURE__*/React.createElement(GuidelineLabel, {
           api: api,

package/dist/esm/ui/LayoutButton.js

@@ -22,6 +22,7 @@ import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { removeBreakout } from '../editor-commands/remove-breakout';
 import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -74,8 +75,14 @@ var LayoutButton = function LayoutButton(_ref) {
     api = _ref.api;
   var handleClick = useCallback(function (breakoutMode) {
     var _getPluginState;
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
+    if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+      return;
+    }
+    // Remove ! during platform_editor_hydratable_ui cleanup
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var _ref2 = editorView,
+      state = _ref2.state,
+      dispatch = _ref2.dispatch;
     var breakoutNode = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
       var _api$analytics;
@@ -103,8 +110,13 @@ var LayoutButton = function LayoutButton(_ref) {
       });
     }
   }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  var state = editorView.state;
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(state)) {
+  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+    return null;
+  }
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
     return null;
   }
   var breakoutMode = breakoutModeProp;
@@ -112,11 +124,17 @@ var LayoutButton = function LayoutButton(_ref) {
   var title = formatMessage(titleMessage);
   var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
   var belowOtherPopupsZIndex = layers.layer() - 1;
-  var pluginState = getPluginState(state);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var pluginState = getPluginState(editorView.state);
   if (!pluginState) {
     return null;
   }
-  var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+
+  // Remove ! during platform_editor_hydratable_ui cleanup
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
   if (!element) {
     return null;
   }

package/dist/types/ui/LayoutButton.d.ts

@@ -6,7 +6,7 @@ export interface Props {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     boundariesElement?: HTMLElement;
     breakoutMode: BreakoutMode | undefined;
-    editorView: EditorView;
+    editorView: EditorView | undefined;
     handleClick?: Function;
     isBreakoutNodePresent: boolean;
     isLivePage?: boolean;

package/dist/types-ts4.5/ui/LayoutButton.d.ts

@@ -6,7 +6,7 @@ export interface Props {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
     boundariesElement?: HTMLElement;
     breakoutMode: BreakoutMode | undefined;
-    editorView: EditorView;
+    editorView: EditorView | undefined;
     handleClick?: Function;
     isBreakoutNodePresent: boolean;
     isLivePage?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "5.1.0",
+	"version": "5.2.1",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,8 +29,8 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.1.1",
-		"@atlaskit/editor-plugin-block-controls": "^6.1.0",
+		"@atlaskit/adf-schema": "^51.1.2",
+		"@atlaskit/editor-plugin-block-controls": "^6.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
 		"@atlaskit/editor-plugin-guideline": "^5.0.0",
@@ -39,11 +39,11 @@
 		"@atlaskit/editor-plugin-width": "^6.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.14.0",
+		"@atlaskit/tmp-editor-statsig": "^12.25.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -53,7 +53,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.3.0",
+		"@atlaskit/editor-common": "^109.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -61,7 +61,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/editor-plugin-code-block": "^7.1.0",
+		"@atlaskit/editor-plugin-code-block": "^7.2.0",
 		"@atlaskit/editor-plugin-composition": "^4.0.0",
 		"@atlaskit/editor-plugin-decorations": "^5.0.0",
 		"@atlaskit/ssr": "workspace:^",