@atlaskit/editor-plugin-breakout 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.3.2
+
+### Patch Changes
+
+- [#159070](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159070)
+  [`9857b771c1da1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9857b771c1da1) -
+  [ux] [ED-27778] Fix selection state hiding for tables, breakout buttons and layout
+- Updated dependencies
+
+## 2.3.1
+
+### Patch Changes
+
+- [#160619](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160619)
+  [`6e034b31d6c9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e034b31d6c9c) -
+  ED-28096 fix nested nodes getting breakout mark
+- Updated dependencies
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/cjs/breakoutPlugin.js

@@ -15,6 +15,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizingPlugin = require("./pm-plugins/resizing-plugin");
@@ -152,6 +153,10 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     isPMDragging = _useSharedState.isPMDragging,
     mode = _useSharedState.mode,
     editorDisabled = _useSharedState.editorDisabled;
+  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
+  if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   if (isDragging || isPMDragging) {
     if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
       return null;

package/dist/cjs/pm-plugins/resizer-callbacks.js

@@ -26,7 +26,6 @@ function getProposedWidth(_ref) {
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
     contentDOM = _ref2.contentDOM,

package/dist/cjs/pm-plugins/resizing-plugin.js

@@ -19,7 +19,9 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
     isFullWidthEnabled = _ref.isFullWidthEnabled;
   var updatedDocChanged = false;
   var updatedTr = newTr;
-  if (breakoutResizableNodes.has(node.type)) {
+  var $pos = newState.doc.resolve(pos);
+  var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
     var breakout = newState.schema.marks.breakout;
     var breakoutMark = node.marks.find(function (mark) {
       return mark.type === breakout;

package/dist/es2019/breakoutPlugin.js

@@ -5,6 +5,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createResizingPlugin } from './pm-plugins/resizing-plugin';
@@ -146,6 +147,10 @@ const LayoutButtonWrapper = ({
     mode,
     editorDisabled
   } = useSharedState(api);
+  const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   if (isDragging || isPMDragging) {
     if (editorExperiment('advanced_layouts', true)) {
       return null;

package/dist/es2019/pm-plugins/resizer-callbacks.js

@@ -1,7 +1,7 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from "@atlaskit/editor-shared-styles";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { setBreakoutWidth } from "../editor-commands/set-breakout-width";
-import { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 const RESIZE_RATIO = 2;
 const WIDTHS = {
   MIN: 760,
@@ -21,7 +21,6 @@ function getProposedWidth({
   const containerWidth = ((api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 export function createResizerCallbacks({
   dom,
   contentDOM,

package/dist/es2019/pm-plugins/resizing-plugin.js

@@ -14,7 +14,9 @@ const addBreakoutToResizableNode = ({
 }) => {
   let updatedDocChanged = false;
   let updatedTr = newTr;
-  if (breakoutResizableNodes.has(node.type)) {
+  const $pos = newState.doc.resolve(pos);
+  const isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
     const {
       breakout
     } = newState.schema.marks;

package/dist/esm/breakoutPlugin.js

@@ -10,6 +10,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createResizingPlugin } from './pm-plugins/resizing-plugin';
@@ -145,6 +146,10 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     isPMDragging = _useSharedState.isPMDragging,
     mode = _useSharedState.mode,
     editorDisabled = _useSharedState.editorDisabled;
+  var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
+  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   if (isDragging || isPMDragging) {
     if (editorExperiment('advanced_layouts', true)) {
       return null;

package/dist/esm/pm-plugins/resizer-callbacks.js

@@ -1,7 +1,7 @@
-import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from "@atlaskit/editor-shared-styles";
-import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import { setBreakoutWidth } from "../editor-commands/set-breakout-width";
-import { LOCAL_RESIZE_PROPERTY } from "./resizing-mark-view";
+import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
 var RESIZE_RATIO = 2;
 var WIDTHS = {
   MIN: 760,
@@ -20,7 +20,6 @@ function getProposedWidth(_ref) {
   var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
   return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
 }
-;
 export function createResizerCallbacks(_ref2) {
   var dom = _ref2.dom,
     contentDOM = _ref2.contentDOM,

package/dist/esm/pm-plugins/resizing-plugin.js

@@ -13,7 +13,9 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
     isFullWidthEnabled = _ref.isFullWidthEnabled;
   var updatedDocChanged = false;
   var updatedTr = newTr;
-  if (breakoutResizableNodes.has(node.type)) {
+  var $pos = newState.doc.resolve(pos);
+  var isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
+  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
     var breakout = newState.schema.marks.breakout;
     var breakoutMark = node.marks.find(function (mark) {
       return mark.type === breakout;

package/dist/types/breakoutPluginType.d.ts

@@ -2,7 +2,8 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
-import { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export interface BreakoutPluginState {
@@ -16,6 +17,7 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<BlockControlsPlugin>,
+    OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<UserIntentPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {

package/dist/types/pm-plugins/resizer-callbacks.d.ts

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from "@atlaskit/editor-prosemirror/view";
-import { BaseEventPayload, ElementDragType } from "@atlaskit/pragmatic-drag-and-drop/types";
-import { BreakoutPlugin } from "../breakoutPluginType";
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;
     view: EditorView;

package/dist/types-ts4.5/breakoutPluginType.d.ts

@@ -2,7 +2,8 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
-import { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export interface BreakoutPluginState {
@@ -16,6 +17,7 @@ export type BreakoutPluginDependencies = [
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
     OptionalPlugin<BlockControlsPlugin>,
+    OptionalPlugin<InteractionPlugin>,
     OptionalPlugin<UserIntentPlugin>
 ];
 export type BreakoutPlugin = NextEditorPlugin<'breakout', {

package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts

@@ -1,9 +1,9 @@
-import { ExtractInjectionAPI } from "@atlaskit/editor-common/types";
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from "@atlaskit/editor-prosemirror/view";
-import { BaseEventPayload, ElementDragType } from "@atlaskit/pragmatic-drag-and-drop/types";
-import { BreakoutPlugin } from "../breakoutPluginType";
-export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api }: {
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { BreakoutPlugin } from '../breakoutPluginType';
+export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
     dom: HTMLElement;
     contentDOM: HTMLElement;
     view: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,19 +34,20 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.8.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.14.0",
+		"@atlaskit/editor-common": "^105.11.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.15.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
+		"@atlaskit/editor-plugin-interaction": "^1.1.0",
 		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^26.1.0",
+		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tmp-editor-statsig": "^5.1.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -107,6 +108,9 @@
 	"platform-feature-flags": {
 		"platform-editor-single-player-expand": {
 			"type": "boolean"
+		},
+		"platform_editor_hide_expand_selection_states": {
+			"type": "boolean"
 		}
 	}
 }