@atlaskit/editor-plugin-breakout 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-breakout
 
+## 1.1.2
+
+### Patch Changes
+
+- [#94901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94901) [`da964fcdc828`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/da964fcdc828) - [ED-23097] Bump ADF schema to version 35.12.1
+- [#94398](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94398) [`4df808e35fda`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4df808e35fda) - [ux] [ED-23108] Solve bug where single player expands would lose their expanded state when adding breakout marks. Single player expands are only used when `platform.editor.single-player-expand` FF AND live page are both enabled.
+
+## 1.1.1
+
+### Patch Changes
+
+- [#93689](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/93689) [`5ba5d2b4a9ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ba5d2b4a9ac) - Updating adf-schema version to 35.10.0
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/commands/remove-breakout.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.removeBreakout = removeBreakout;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _findBreakoutNode = require("../utils/find-breakout-node");
-function removeBreakout() {
+var _singlePlayerExpand = require("../utils/single-player-expand");
+function removeBreakout(isLivePage) {
   return function (state, dispatch) {
     var node = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
     if (!node) {
@@ -16,6 +17,7 @@ function removeBreakout() {
       return m.type.name !== 'breakout';
     });
     var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    (0, _singlePlayerExpand.updateExpandedState)(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof _state.NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/cjs/commands/set-breakout-mode.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.setBreakoutMode = setBreakoutMode;
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _findBreakoutNode = require("../utils/find-breakout-node");
-function setBreakoutMode(mode) {
+var _singlePlayerExpand = require("../utils/single-player-expand");
+function setBreakoutMode(mode, isLivePage) {
   return function (state, dispatch) {
     var node = (0, _findBreakoutNode.findSupportedNodeForBreakout)(state.selection);
     if (!node) {
@@ -15,6 +16,7 @@ function setBreakoutMode(mode) {
     var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
       mode: mode
     })]);
+    (0, _singlePlayerExpand.updateExpandedState)(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof _state.NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/cjs/plugin.js

@@ -160,12 +160,14 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
     breakoutState = _useSharedPluginState.breakoutState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
   return !isViewMode ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
+    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    isLivePage: isEditMode
   }) : null;
 };
 var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {

package/dist/cjs/ui/LayoutButton.js

@@ -52,16 +52,17 @@ var LayoutButton = function LayoutButton(_ref) {
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
-    node = _ref.node;
+    node = _ref.node,
+    isLivePage = _ref.isLivePage;
   var handleClick = (0, _react.useCallback)(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      (0, _setBreakoutMode.setBreakoutMode)(breakoutMode)(state, dispatch);
+      (0, _setBreakoutMode.setBreakoutMode)(breakoutMode, isLivePage)(state, dispatch);
     } else {
-      (0, _removeBreakout.removeBreakout)()(state, dispatch);
+      (0, _removeBreakout.removeBreakout)(isLivePage)(state, dispatch);
     }
-  }, [editorView]);
+  }, [editorView, isLivePage]);
   var state = editorView.state;
   if (!node || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(state)) {
     return null;

package/dist/cjs/utils/single-player-expand.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateExpandedState = void 0;
+var _expand = require("@atlaskit/editor-common/expand");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var updateExpandedState = exports.updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.single-player-expand') && isLivePage) {
+    var wasExpandExpanded = _expand.expandedState.get(node.node);
+    var newExpand = tr.doc.nodeAt(node.pos);
+    if (wasExpandExpanded !== undefined && newExpand) {
+      _expand.expandedState.set(newExpand, wasExpandExpanded);
+    }
+  }
+};

package/dist/es2019/commands/remove-breakout.js

@@ -1,6 +1,7 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-export function removeBreakout() {
+import { updateExpandedState } from '../utils/single-player-expand';
+export function removeBreakout(isLivePage) {
   return (state, dispatch) => {
     const node = findSupportedNodeForBreakout(state.selection);
     if (!node) {
@@ -8,6 +9,7 @@ export function removeBreakout() {
     }
     const marks = node.node.marks.filter(m => m.type.name !== 'breakout');
     const tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    updateExpandedState(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/es2019/commands/set-breakout-mode.js

@@ -1,6 +1,7 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-export function setBreakoutMode(mode) {
+import { updateExpandedState } from '../utils/single-player-expand';
+export function setBreakoutMode(mode, isLivePage) {
   return (state, dispatch) => {
     const node = findSupportedNodeForBreakout(state.selection);
     if (!node) {
@@ -9,6 +10,7 @@ export function setBreakoutMode(mode) {
     const tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
       mode
     })]);
+    updateExpandedState(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/es2019/plugin.js

@@ -151,12 +151,14 @@ const LayoutButtonWrapper = ({
     editorViewModeState
   } = useSharedPluginState(api, ['width', 'breakout', 'editorViewMode']);
   const isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  const isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
   return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
+    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 ? void 0 : (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    isLivePage: isEditMode
   }) : null;
 };
 export const breakoutPlugin = ({

package/dist/es2019/ui/LayoutButton.js

@@ -46,7 +46,8 @@ const LayoutButton = ({
   boundariesElement,
   scrollableElement,
   editorView,
-  node
+  node,
+  isLivePage
 }) => {
   const handleClick = useCallback(breakoutMode => {
     const {
@@ -54,11 +55,11 @@ const LayoutButton = ({
       dispatch
     } = editorView;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      setBreakoutMode(breakoutMode)(state, dispatch);
+      setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
     } else {
-      removeBreakout()(state, dispatch);
+      removeBreakout(isLivePage)(state, dispatch);
     }
-  }, [editorView]);
+  }, [editorView, isLivePage]);
   const {
     state
   } = editorView;

package/dist/es2019/utils/single-player-expand.js

@@ -0,0 +1,11 @@
+import { expandedState } from '@atlaskit/editor-common/expand';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export const updateExpandedState = (tr, node, isLivePage) => {
+  if (getBooleanFF('platform.editor.single-player-expand') && isLivePage) {
+    const wasExpandExpanded = expandedState.get(node.node);
+    const newExpand = tr.doc.nodeAt(node.pos);
+    if (wasExpandExpanded !== undefined && newExpand) {
+      expandedState.set(newExpand, wasExpandExpanded);
+    }
+  }
+};

package/dist/esm/commands/remove-breakout.js

@@ -1,6 +1,7 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-export function removeBreakout() {
+import { updateExpandedState } from '../utils/single-player-expand';
+export function removeBreakout(isLivePage) {
   return function (state, dispatch) {
     var node = findSupportedNodeForBreakout(state.selection);
     if (!node) {
@@ -10,6 +11,7 @@ export function removeBreakout() {
       return m.type.name !== 'breakout';
     });
     var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, marks);
+    updateExpandedState(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/esm/commands/set-breakout-mode.js

@@ -1,6 +1,7 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSupportedNodeForBreakout } from '../utils/find-breakout-node';
-export function setBreakoutMode(mode) {
+import { updateExpandedState } from '../utils/single-player-expand';
+export function setBreakoutMode(mode, isLivePage) {
   return function (state, dispatch) {
     var node = findSupportedNodeForBreakout(state.selection);
     if (!node) {
@@ -9,6 +10,7 @@ export function setBreakoutMode(mode) {
     var tr = state.tr.setNodeMarkup(node.pos, node.node.type, node.node.attrs, [state.schema.marks.breakout.create({
       mode: mode
     })]);
+    updateExpandedState(tr, node, isLivePage);
     tr.setMeta('scrollIntoView', false);
     if (state.selection instanceof NodeSelection) {
       if (state.selection.$anchor.pos === node.pos) {

package/dist/esm/plugin.js

@@ -153,12 +153,14 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
     breakoutState = _useSharedPluginState.breakoutState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   var isViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  var isEditMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit';
   return !isViewMode ? /*#__PURE__*/React.createElement(LayoutButton, {
     editorView: editorView,
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
+    node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null,
+    isLivePage: isEditMode
   }) : null;
 };
 export var breakoutPlugin = function breakoutPlugin(_ref4) {

package/dist/esm/ui/LayoutButton.js

@@ -44,16 +44,17 @@ var LayoutButton = function LayoutButton(_ref) {
     boundariesElement = _ref.boundariesElement,
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
-    node = _ref.node;
+    node = _ref.node,
+    isLivePage = _ref.isLivePage;
   var handleClick = useCallback(function (breakoutMode) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      setBreakoutMode(breakoutMode)(state, dispatch);
+      setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
     } else {
-      removeBreakout()(state, dispatch);
+      removeBreakout(isLivePage)(state, dispatch);
     }
-  }, [editorView]);
+  }, [editorView, isLivePage]);
   var state = editorView.state;
   if (!node || !isBreakoutMarkAllowed(state)) {
     return null;

package/dist/esm/utils/single-player-expand.js

@@ -0,0 +1,11 @@
+import { expandedState } from '@atlaskit/editor-common/expand';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+export var updateExpandedState = function updateExpandedState(tr, node, isLivePage) {
+  if (getBooleanFF('platform.editor.single-player-expand') && isLivePage) {
+    var wasExpandExpanded = expandedState.get(node.node);
+    var newExpand = tr.doc.nodeAt(node.pos);
+    if (wasExpandExpanded !== undefined && newExpand) {
+      expandedState.set(newExpand, wasExpandExpanded);
+    }
+  }
+};

package/dist/types/commands/remove-breakout.d.ts

@@ -1,2 +1,2 @@
 import type { Command } from '@atlaskit/editor-common/types';
-export declare function removeBreakout(): Command;
+export declare function removeBreakout(isLivePage?: boolean): Command;

package/dist/types/commands/set-breakout-mode.d.ts

@@ -1,2 +1,2 @@
 import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
-export declare function setBreakoutMode(mode: BreakoutMode): Command;
+export declare function setBreakoutMode(mode: BreakoutMode, isLivePage?: boolean): Command;

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

@@ -9,6 +9,7 @@ export interface Props {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     handleClick?: Function;
+    isLivePage?: boolean;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types/utils/single-player-expand.d.ts

@@ -0,0 +1,3 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/dist/types/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/dist/types/utils';
+export declare const updateExpandedState: (tr: Transaction, node: ContentNodeWithPos, isLivePage?: boolean) => void;

package/dist/types-ts4.5/commands/remove-breakout.d.ts

@@ -1,2 +1,2 @@
 import type { Command } from '@atlaskit/editor-common/types';
-export declare function removeBreakout(): Command;
+export declare function removeBreakout(isLivePage?: boolean): Command;

package/dist/types-ts4.5/commands/set-breakout-mode.d.ts

@@ -1,2 +1,2 @@
 import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
-export declare function setBreakoutMode(mode: BreakoutMode): Command;
+export declare function setBreakoutMode(mode: BreakoutMode, isLivePage?: boolean): Command;

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

@@ -9,6 +9,7 @@ export interface Props {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     handleClick?: Function;
+    isLivePage?: boolean;
 }
 declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
     WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;

package/dist/types-ts4.5/utils/single-player-expand.d.ts

@@ -0,0 +1,3 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/dist/types/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/dist/types/utils';
+export declare const updateExpandedState: (tr: Transaction, node: ContentNodeWithPos, isLivePage?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-breakout",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Breakout plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,15 +31,16 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.9.2",
-    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/adf-schema": "^35.12.1",
+    "@atlaskit/editor-common": "^78.36.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.0",
-    "@atlaskit/editor-shared-styles": "^2.9.0",
+    "@atlaskit/editor-shared-styles": "^2.10.0",
     "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -94,5 +95,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "platform-feature-flags": {
+    "platform.editor.single-player-expand": {
+      "type": "boolean"
+    }
+  }
 }