@atlaskit/editor-plugin-breakout 2.9.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # @atlaskit/editor-plugin-breakout
 
+## 3.0.0
+
+### Major Changes
+
+- [#181024](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181024)
+  [`8e80c487ca307`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e80c487ca307) - ##
+  Make `@atlaskit/editor-common` a peer dependency
+
+  **WHAT:** `@atlaskit/editor-common` has been moved from `dependencies` to `peerDependencies` in
+  all editor plugin packages.
+
+  **WHY:** This change ensures that only a single version of `@atlaskit/editor-common` is used in
+  consuming applications, preventing issues caused by multiple versions of singleton libraries (such
+  as context mismatches or duplicated state). This is especially important for packages that rely on
+  shared context or singletons.
+
+  **HOW TO ADJUST:**
+
+  - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
+    any of these editor plugins.
+  - Ensure the version you install matches the version required by the plugins.
+  - You can use the
+    [`check-peer-dependencies`](https://www.npmjs.com/package/check-peer-dependencies) package to
+    verify that all required peer dependencies are installed and compatible.
+  - Example install command:
+    ```
+    npm install @atlaskit/editor-common
+    ```
+    or
+    ```
+    yarn add @atlaskit/editor-common
+    ```
+
+  **Note:** This is a breaking change. If `@atlaskit/editor-common` is not installed at the
+  application level, you may see errors or unexpected behavior.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.9.2
+
+### Patch Changes
+
+- [#176058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176058)
+  [`38c6611bdd480`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38c6611bdd480) -
+  ED-28085 Clean up platform_editor_hide_expand_selection_states
+
 ## 2.9.1
 
 ### Patch Changes

package/dist/cjs/breakoutPlugin.js

@@ -36,7 +36,7 @@ var BreakoutView = /*#__PURE__*/(0, _createClass2.default)(function BreakoutView
  * of the prosemirror and prosemirror types mean using PMNode
  * is not problematic.
  */
-mark, view) {
+mark, view, appearance) {
   (0, _classCallCheck2.default)(this, BreakoutView);
   var dom = document.createElement('div');
   var contentDOM = document.createElement('div');
@@ -59,7 +59,11 @@ mark, view) {
         contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
       }
       if (mark.attrs.mode === 'wide') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+        if (appearance && appearance === 'full-width' && (0, _experiments.editorExperiment)('single_column_layouts', true) && (0, _platformFeatureFlags.fg)('platform_editor_layout_guideline_full_width_fix')) {
+          contentDOM.style.minWidth = "min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))";
+        } else {
+          contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+        }
       }
     }
   } else {
@@ -82,7 +86,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(api, _ref) {
+function createPlugin(api, _ref, appearance) {
   var dispatch = _ref.dispatch;
   return new _safePlugin.SafePlugin({
     state: {
@@ -112,7 +116,7 @@ function createPlugin(api, _ref) {
         // See the following link for more details:
         // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
         breakout: function breakout(mark, view) {
-          return new BreakoutView(mark, view);
+          return new BreakoutView(mark, view, appearance);
         }
       }
     }
@@ -182,7 +186,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     }
   });
   var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'interaction.interactionState');
-  if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
+  if (interactionState === 'hasNotHadInteraction') {
     return null;
   }
   if (isDragging || isPMDragging) {
@@ -223,7 +227,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref4) {
       return [{
         name: 'breakout',
         plugin: function plugin(props) {
-          return createPlugin(api, props);
+          return createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance);
         }
       }];
     },

package/dist/es2019/breakoutPlugin.js

@@ -22,7 +22,7 @@ class BreakoutView {
    * of the prosemirror and prosemirror types mean using PMNode
    * is not problematic.
    */
-  mark, view) {
+  mark, view, appearance) {
     const dom = document.createElement('div');
     const contentDOM = document.createElement('div');
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
@@ -44,7 +44,11 @@ class BreakoutView {
           contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
         }
         if (mark.attrs.mode === 'wide') {
-          contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+          if (appearance && appearance === 'full-width' && editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix')) {
+            contentDOM.style.minWidth = `min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
+          } else {
+            contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
+          }
         }
       }
     } else {
@@ -70,7 +74,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
 }
 function createPlugin(api, {
   dispatch
-}) {
+}, appearance) {
   return new SafePlugin({
     state: {
       init() {
@@ -100,7 +104,7 @@ function createPlugin(api, {
         // See the following link for more details:
         // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
         breakout: (mark, view) => {
-          return new BreakoutView(mark, view);
+          return new BreakoutView(mark, view, appearance);
         }
       }
     }
@@ -168,7 +172,7 @@ const LayoutButtonWrapper = ({
     }
   });
   const interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
-  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+  if (interactionState === 'hasNotHadInteraction') {
     return null;
   }
   if (isDragging || isPMDragging) {
@@ -207,7 +211,7 @@ export const breakoutPlugin = ({
     }
     return [{
       name: 'breakout',
-      plugin: props => createPlugin(api, props)
+      plugin: props => createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance)
     }];
   },
   marks() {

package/dist/esm/breakoutPlugin.js

@@ -27,7 +27,7 @@ var BreakoutView = /*#__PURE__*/_createClass(function BreakoutView(
  * of the prosemirror and prosemirror types mean using PMNode
  * is not problematic.
  */
-mark, view) {
+mark, view, appearance) {
   _classCallCheck(this, BreakoutView);
   var dom = document.createElement('div');
   var contentDOM = document.createElement('div');
@@ -50,7 +50,11 @@ mark, view) {
         contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
       }
       if (mark.attrs.mode === 'wide') {
-        contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+        if (appearance && appearance === 'full-width' && editorExperiment('single_column_layouts', true) && fg('platform_editor_layout_guideline_full_width_fix')) {
+          contentDOM.style.minWidth = "min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))";
+        } else {
+          contentDOM.style.minWidth = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
+        }
       }
     }
   } else {
@@ -73,7 +77,7 @@ function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
   }
   return newBreakoutNode || currentBreakoutNode ? true : false;
 }
-function createPlugin(api, _ref) {
+function createPlugin(api, _ref, appearance) {
   var dispatch = _ref.dispatch;
   return new SafePlugin({
     state: {
@@ -103,7 +107,7 @@ function createPlugin(api, _ref) {
         // See the following link for more details:
         // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
         breakout: function breakout(mark, view) {
-          return new BreakoutView(mark, view);
+          return new BreakoutView(mark, view, appearance);
         }
       }
     }
@@ -173,7 +177,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     }
   });
   var interactionState = useSharedPluginStateSelector(api, 'interaction.interactionState');
-  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+  if (interactionState === 'hasNotHadInteraction') {
     return null;
   }
   if (isDragging || isPMDragging) {
@@ -214,7 +218,7 @@ export var breakoutPlugin = function breakoutPlugin(_ref4) {
       return [{
         name: 'breakout',
         plugin: function plugin(props) {
-          return createPlugin(api, props);
+          return createPlugin(api, props, options === null || options === void 0 ? void 0 : options.appearance);
         }
       }];
     },

package/dist/types/breakoutPluginType.d.ts

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -15,6 +15,7 @@ export interface BreakoutPluginState {
 }
 export interface BreakoutPluginOptions {
     allowBreakoutButton?: boolean;
+    appearance?: EditorAppearance;
 }
 export type BreakoutPluginDependencies = [
     WidthPlugin,

package/dist/types/pm-plugins/get-guidelines.d.ts

@@ -1,6 +1,6 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { type NodeType } from '@atlaskit/editor-prosemirror/model';
 export declare const GUIDELINE_KEYS: {
     readonly lineLengthLeft: "grid_left";
     readonly lineLengthRight: "grid_right";

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

@@ -1,6 +1,6 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type Mark } from '@atlaskit/editor-prosemirror/model';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import type { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import type { BreakoutPlugin } from '../breakoutPluginType';

package/dist/types/pm-plugins/resizing-plugin.d.ts

@@ -4,7 +4,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
-import { GUIDELINE_KEYS } from './get-guidelines';
+import { type GUIDELINE_KEYS } from './get-guidelines';
 export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
 export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
 export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {

package/dist/types/pm-plugins/utils/analytics.d.ts

@@ -1,5 +1,5 @@
 import type { BreakoutEventPayload } from '@atlaskit/editor-common/analytics';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export declare const generateResizeFrameRatePayloads: (props: {
     docSize: number;
     frameRateSamples: number[];

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BreakoutPlugin } from '../breakoutPluginType';
 type GuidelineLabelProps = {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;

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

@@ -1,4 +1,4 @@
-import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorAppearance, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -15,6 +15,7 @@ export interface BreakoutPluginState {
 }
 export interface BreakoutPluginOptions {
     allowBreakoutButton?: boolean;
+    appearance?: EditorAppearance;
 }
 export type BreakoutPluginDependencies = [
     WidthPlugin,

package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts

@@ -1,6 +1,6 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { type NodeType } from '@atlaskit/editor-prosemirror/model';
 export declare const GUIDELINE_KEYS: {
     readonly lineLengthLeft: "grid_left";
     readonly lineLengthRight: "grid_right";

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

@@ -1,6 +1,6 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type Mark } from '@atlaskit/editor-prosemirror/model';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ElementDragPayload } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import type { BaseEventPayload, DragLocationHistory, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
 import type { BreakoutPlugin } from '../breakoutPluginType';

package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts

@@ -4,7 +4,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { BreakoutPlugin, BreakoutPluginOptions, BreakoutPluginState } from '../breakoutPluginType';
-import { GUIDELINE_KEYS } from './get-guidelines';
+import { type GUIDELINE_KEYS } from './get-guidelines';
 export declare const resizingPluginKey: PluginKey<BreakoutPluginState>;
 export type ActiveGuidelineKey = Exclude<(typeof GUIDELINE_KEYS)[keyof typeof GUIDELINE_KEYS], 'grid_left' | 'grid_right'>;
 export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, options?: BreakoutPluginOptions) => SafePlugin<BreakoutPluginState | {

package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts

@@ -1,5 +1,5 @@
 import type { BreakoutEventPayload } from '@atlaskit/editor-common/analytics';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 export declare const generateResizeFrameRatePayloads: (props: {
     docSize: number;
     frameRateSamples: number[];

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { BreakoutPlugin } from '../breakoutPluginType';
 type GuidelineLabelProps = {
     api: ExtractInjectionAPI<BreakoutPlugin> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.9.1",
+	"version": "3.0.0",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -9,8 +9,7 @@
 	},
 	"atlassian": {
 		"team": "Editor: Jenga",
-		"singleton": true,
-		"runReact18": true
+		"singleton": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -34,21 +33,20 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^107.1.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.19.0",
-		"@atlaskit/editor-plugin-editor-disabled": "^2.1.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
-		"@atlaskit/editor-plugin-guideline": "^2.0.0",
-		"@atlaskit/editor-plugin-interaction": "^3.0.0",
-		"@atlaskit/editor-plugin-user-intent": "^0.1.0",
-		"@atlaskit/editor-plugin-width": "^3.0.0",
+		"@atlaskit/editor-plugin-block-controls": "^4.0.0",
+		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
+		"@atlaskit/editor-plugin-guideline": "^3.0.0",
+		"@atlaskit/editor-plugin-interaction": "^4.0.0",
+		"@atlaskit/editor-plugin-user-intent": "^1.0.0",
+		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^27.1.0",
+		"@atlaskit/icon": "^27.2.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": "^8.0.0",
+		"@atlaskit/tmp-editor-statsig": "^8.7.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -58,6 +56,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
+		"@atlaskit/editor-common": "^107.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -65,9 +64,9 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/editor-plugin-code-block": "^4.4.0",
-		"@atlaskit/editor-plugin-composition": "^1.3.0",
-		"@atlaskit/editor-plugin-decorations": "^2.0.0",
+		"@atlaskit/editor-plugin-code-block": "^5.0.0",
+		"@atlaskit/editor-plugin-composition": "^2.0.0",
+		"@atlaskit/editor-plugin-decorations": "^3.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
@@ -114,7 +113,7 @@
 		"platform-editor-single-player-expand": {
 			"type": "boolean"
 		},
-		"platform_editor_hide_expand_selection_states": {
+		"platform_editor_layout_guideline_full_width_fix": {
 			"type": "boolean"
 		},
 		"platform_editor_breakout_resizing_hello_release": {