@atlaskit/editor-plugin-breakout 6.0.0 → 6.0.2

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 (28) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/breakoutPlugin.js +2 -2
  3. package/dist/cjs/editor-commands/set-breakout-width.js +2 -5
  4. package/dist/cjs/pm-plugins/get-guidelines.js +15 -36
  5. package/dist/cjs/pm-plugins/handle-key-down.js +25 -28
  6. package/dist/cjs/pm-plugins/pragmatic-resizer.js +21 -32
  7. package/dist/cjs/pm-plugins/resizer-callbacks.js +50 -69
  8. package/dist/cjs/pm-plugins/resizing-mark-view.js +31 -75
  9. package/dist/cjs/pm-plugins/resizing-plugin.js +4 -4
  10. package/dist/es2019/breakoutPlugin.js +2 -2
  11. package/dist/es2019/editor-commands/set-breakout-width.js +2 -5
  12. package/dist/es2019/pm-plugins/get-guidelines.js +15 -36
  13. package/dist/es2019/pm-plugins/handle-key-down.js +25 -28
  14. package/dist/es2019/pm-plugins/pragmatic-resizer.js +18 -29
  15. package/dist/es2019/pm-plugins/resizer-callbacks.js +49 -68
  16. package/dist/es2019/pm-plugins/resizing-mark-view.js +25 -71
  17. package/dist/es2019/pm-plugins/resizing-plugin.js +4 -4
  18. package/dist/esm/breakoutPlugin.js +2 -2
  19. package/dist/esm/editor-commands/set-breakout-width.js +2 -5
  20. package/dist/esm/pm-plugins/get-guidelines.js +15 -36
  21. package/dist/esm/pm-plugins/handle-key-down.js +25 -28
  22. package/dist/esm/pm-plugins/pragmatic-resizer.js +21 -32
  23. package/dist/esm/pm-plugins/resizer-callbacks.js +50 -69
  24. package/dist/esm/pm-plugins/resizing-mark-view.js +31 -75
  25. package/dist/esm/pm-plugins/resizing-plugin.js +4 -4
  26. package/dist/types/pm-plugins/handle-key-down.d.ts +1 -1
  27. package/dist/types-ts4.5/pm-plugins/handle-key-down.d.ts +1 -1
  28. package/package.json +7 -10
@@ -40,7 +40,7 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
40
40
  updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
41
41
  width: width
42
42
  })]);
43
- if (isExpand && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
43
+ if (isExpand) {
44
44
  (0, _singlePlayerExpand.updateExpandedStateNew)({
45
45
  tr: updatedTr,
46
46
  node: node,
@@ -58,7 +58,7 @@ var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
58
58
  width: newWidth,
59
59
  mode: mode
60
60
  })]);
61
- if (isExpand && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
61
+ if (isExpand) {
62
62
  (0, _singlePlayerExpand.updateExpandedStateNew)({
63
63
  tr: updatedTr,
64
64
  node: node,
@@ -111,7 +111,7 @@ var pluginState = {
111
111
  var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, getIntl, nodeViewPortalProviderAPI, options) {
112
112
  return new _safePlugin.SafePlugin({
113
113
  key: resizingPluginKey,
114
- state: (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') ? pluginState : undefined,
114
+ state: pluginState,
115
115
  props: {
116
116
  markViews: {
117
117
  breakout: function breakout(mark, view) {
@@ -129,7 +129,7 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
129
129
  } else {
130
130
  var _api$editorViewMode2;
131
131
  // if editor is in live-view mode don't send transactions
132
- if ((api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) !== 'edit' && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
132
+ if ((api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 || (_api$editorViewMode2 = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.mode) !== 'edit') {
133
133
  return;
134
134
  }
135
135
  }
@@ -209,7 +209,7 @@ export const breakoutPlugin = ({
209
209
  breakoutNode: undefined
210
210
  };
211
211
  }
212
- if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
212
+ if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
213
213
  const resizingPluginState = resizingPluginKey.getState(editorState);
214
214
  if (!resizingPluginState) {
215
215
  return {
@@ -236,7 +236,7 @@ export const breakoutPlugin = ({
236
236
  if (!editorView) {
237
237
  return null;
238
238
  }
239
- if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release')) {
239
+ if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
240
240
  return /*#__PURE__*/React.createElement(GuidelineLabel, {
241
241
  api: api,
242
242
  editorView: editorView,
@@ -1,6 +1,5 @@
1
1
  import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
2
2
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
3
- import { fg } from '@atlaskit/platform-feature-flags';
4
3
  import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
5
4
  export function setBreakoutWidth(width, mode, pos, isLivePage) {
6
5
  return (state, dispatch) => {
@@ -26,12 +25,10 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
26
25
  transferCodeBlockWrappedValue(oldNode, newNode);
27
26
  }
28
27
  }
29
- if (fg('platform_editor_breakout_resizing_hello_release')) {
30
- tr.setMeta('scrollIntoView', false);
31
- }
28
+ tr.setMeta('scrollIntoView', false);
32
29
 
33
30
  // keep current selection, necessary to not remove NodeSelection for keyboard resizing
34
- if (state.selection instanceof NodeSelection && state.selection.node.eq(node) && fg('platform_editor_breakout_resizing_hello_release')) {
31
+ if (state.selection instanceof NodeSelection && state.selection.node.eq(node)) {
35
32
  tr.setSelection(NodeSelection.create(tr.doc, pos));
36
33
  }
37
34
  if (dispatch) {
@@ -1,7 +1,6 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
3
3
  import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
5
  const WIDTHS = {
7
6
  MIN: akEditorDefaultLayoutWidth,
@@ -37,46 +36,26 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
37
36
  }
38
37
  }
39
38
  const {
40
- width,
41
- lineLength
39
+ width
42
40
  } = getEditorWidth() || {};
43
41
  const padding = width && width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
44
42
  exposure: true
45
43
  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
46
44
  const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
47
- if (fg('platform_editor_breakout_resizing_hello_release')) {
48
- guidelines.push({
49
- key: GUIDELINE_KEYS.lineLengthLeft,
50
- position: {
51
- x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
52
- },
53
- active: newWidth === WIDTHS.MIN
54
- });
55
- guidelines.push({
56
- key: GUIDELINE_KEYS.lineLengthRight,
57
- position: {
58
- x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
59
- },
60
- active: newWidth === WIDTHS.MIN
61
- });
62
- } else {
63
- if (lineLength) {
64
- guidelines.push({
65
- key: GUIDELINE_KEYS.lineLengthLeft,
66
- position: {
67
- x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
68
- },
69
- active: newWidth === lineLength
70
- });
71
- guidelines.push({
72
- key: GUIDELINE_KEYS.lineLengthRight,
73
- position: {
74
- x: roundToNearest(lineLength / 2 + innerPaddingOffset)
75
- },
76
- active: newWidth === lineLength
77
- });
78
- }
79
- }
45
+ guidelines.push({
46
+ key: GUIDELINE_KEYS.lineLengthLeft,
47
+ position: {
48
+ x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
49
+ },
50
+ active: newWidth === WIDTHS.MIN
51
+ });
52
+ guidelines.push({
53
+ key: GUIDELINE_KEYS.lineLengthRight,
54
+ position: {
55
+ x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
56
+ },
57
+ active: newWidth === WIDTHS.MIN
58
+ });
80
59
  guidelines.push({
81
60
  key: GUIDELINE_KEYS.wideLeft,
82
61
  position: {
@@ -1,7 +1,6 @@
1
1
  import { browser } from '@atlaskit/editor-common/browser';
2
2
  import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
3
3
  import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
4
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
6
5
  const KEYBOARD_RESIZE_STEP = 10;
7
6
  const getAncestorResizableNode = (view, breakoutResizableNodes) => {
@@ -33,36 +32,34 @@ const getAncestorResizableNode = (view, breakoutResizableNodes) => {
33
32
  return null;
34
33
  };
35
34
  export const handleKeyDown = api => (view, event) => {
36
- if (fg('platform_editor_breakout_resizing_hello_release')) {
37
- const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
38
- const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
39
- if (metaKey && event.altKey && isBracketKey) {
35
+ const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
36
+ const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
37
+ if (metaKey && event.altKey && isBracketKey) {
38
+ const {
39
+ expand,
40
+ codeBlock,
41
+ layoutSection
42
+ } = view.state.schema.nodes;
43
+ const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
44
+ const result = getAncestorResizableNode(view, breakoutResizableNodes);
45
+ if (result) {
40
46
  const {
41
- expand,
42
- codeBlock,
43
- layoutSection
44
- } = view.state.schema.nodes;
45
- const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
46
- const result = getAncestorResizableNode(view, breakoutResizableNodes);
47
- if (result) {
48
- const {
49
- node,
50
- pos
51
- } = result;
52
- const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
53
- if (breakoutMark) {
54
- const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
55
- const newWidth = breakoutMark.attrs.width + step;
56
- if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
57
- var _api$editorViewMode, _api$editorViewMode$s;
58
- const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
59
- setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
60
- view.focus();
61
- }
62
- return true;
47
+ node,
48
+ pos
49
+ } = result;
50
+ const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
51
+ if (breakoutMark) {
52
+ const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
53
+ const newWidth = breakoutMark.attrs.width + step;
54
+ if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
55
+ var _api$editorViewMode, _api$editorViewMode$s;
56
+ const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
57
+ setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
58
+ view.focus();
63
59
  }
60
+ return true;
64
61
  }
65
62
  }
66
- return false;
67
63
  }
64
+ return false;
68
65
  };
@@ -76,33 +76,22 @@ export const createPragmaticResizer = ({
76
76
  const thumb = document.createElement('div');
77
77
  thumb.classList.add('pm-breakout-resize-handle-thumb');
78
78
  rail.appendChild(thumb);
79
- if (fg('platform_editor_breakout_resizing_hello_release')) {
80
- const tooltipContainer = document.createElement('div');
81
- tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
82
- handle.appendChild(tooltipContainer);
83
- handle.appendChild(handleHitBox);
84
- const key = uuid();
85
- nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
86
- rail: rail,
87
- target: target,
88
- intl: intl
89
- }), tooltipContainer, key);
90
- return {
91
- handle,
92
- rail,
93
- handleHitBox,
94
- destroyTooltip: () => nodeViewPortalProviderAPI.remove(key)
95
- };
96
- } else {
97
- handle.appendChild(rail);
98
- handle.appendChild(handleHitBox);
99
- return {
100
- handle,
101
- rail,
102
- handleHitBox,
103
- destroyTooltip: () => {}
104
- };
105
- }
79
+ const tooltipContainer = document.createElement('div');
80
+ tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
81
+ handle.appendChild(tooltipContainer);
82
+ handle.appendChild(handleHitBox);
83
+ const key = uuid();
84
+ nodeViewPortalProviderAPI.render(() => /*#__PURE__*/React.createElement(RailWithTooltip, {
85
+ rail: rail,
86
+ target: target,
87
+ intl: intl
88
+ }), tooltipContainer, key);
89
+ return {
90
+ handle,
91
+ rail,
92
+ handleHitBox,
93
+ destroyTooltip: () => nodeViewPortalProviderAPI.remove(key)
94
+ };
106
95
  };
107
96
  const rightHandle = createHandle('right');
108
97
  const leftHandle = createHandle('left');
@@ -153,14 +142,14 @@ export const createPragmaticResizer = ({
153
142
  })];
154
143
  };
155
144
  const unbindFns = [...registerEvents(target), ...registerEvents(rightHandle.handleHitBox), ...registerEvents(leftHandle.handleHitBox), ...registerEvents(rightHandle.rail), ...registerEvents(leftHandle.rail)];
156
- const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left'), ...(fg('platform_editor_breakout_resizing_hello_release') ? [rightHandle.destroyTooltip, leftHandle.destroyTooltip] : [])];
145
+ const destroyFns = [registerHandle(rightHandle.handle, 'right'), registerHandle(leftHandle.handle, 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
157
146
  return {
158
147
  rightHandle: rightHandle.handle,
159
148
  leftHandle: leftHandle.handle,
160
149
  destroy: isChangeToViewMode => {
161
150
  destroyFns.forEach(destroyFn => destroyFn());
162
151
  unbindFns.forEach(unbindFn => unbindFn());
163
- if (isChangeToViewMode && fg('platform_editor_breakout_resizing_hello_release')) {
152
+ if (isChangeToViewMode) {
164
153
  var _rightHandle$handle$p, _leftHandle$handle$pa;
165
154
  (_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 ? void 0 : _rightHandle$handle$p.removeChild(rightHandle.handle);
166
155
  (_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 ? void 0 : _leftHandle$handle$pa.removeChild(leftHandle.handle);
@@ -31,12 +31,10 @@ export function getProposedWidth({
31
31
 
32
32
  // the node width may be greater than the container width so we resize using the smaller value
33
33
  const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
34
- if (fg('platform_editor_breakout_resizing_hello_release')) {
35
- const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
36
- for (const snapPoint of snapPoints) {
37
- if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
38
- return snapPoint;
39
- }
34
+ const snapPoints = [WIDTHS.MIN, WIDTHS.WIDE, Math.min(containerWidth, WIDTHS.MAX)];
35
+ for (const snapPoint of snapPoints) {
36
+ if (snapPoint - SNAP_GAP < proposedWidth && snapPoint + SNAP_GAP > proposedWidth) {
37
+ return snapPoint;
40
38
  }
41
39
  }
42
40
  return Math.min(Math.max(WIDTHS.MIN, Math.min(proposedWidth, containerWidth)), WIDTHS.MAX);
@@ -61,9 +59,7 @@ export function createResizerCallbacks({
61
59
  };
62
60
  return {
63
61
  onDragStart: () => {
64
- if (fg('platform_editor_breakout_resizing_hello_release')) {
65
- startMeasure();
66
- }
62
+ startMeasure();
67
63
  const pos = view.posAtDOM(dom, 0);
68
64
  node = view.state.doc.nodeAt(pos);
69
65
  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
@@ -74,17 +70,15 @@ export function createResizerCallbacks({
74
70
  tr
75
71
  });
76
72
  tr.setMeta('is-resizer-resizing', true);
77
- if (fg('platform_editor_breakout_resizing_hello_release')) {
78
- tr.setMeta(resizingPluginKey, {
79
- type: 'UPDATE_BREAKOUT_NODE',
80
- data: {
81
- node,
82
- pos,
83
- start: pos,
84
- depth: 0
85
- }
86
- });
87
- }
73
+ tr.setMeta(resizingPluginKey, {
74
+ type: 'UPDATE_BREAKOUT_NODE',
75
+ data: {
76
+ node,
77
+ pos,
78
+ start: pos,
79
+ depth: 0
80
+ }
81
+ });
88
82
  return tr;
89
83
  });
90
84
  },
@@ -92,10 +86,8 @@ export function createResizerCallbacks({
92
86
  location,
93
87
  source
94
88
  }) => {
95
- var _node, _api$guideline, _api$guideline$action;
96
- if (fg('platform_editor_breakout_resizing_hello_release')) {
97
- countFrames();
98
- }
89
+ var _node, _api$guideline, _api$guideline$action, _api$breakout$sharedS;
90
+ countFrames();
99
91
  const initialWidth = mark.attrs.width;
100
92
  const newWidth = getProposedWidth({
101
93
  initialWidth,
@@ -107,32 +99,29 @@ export function createResizerCallbacks({
107
99
  api === null || api === void 0 ? void 0 : (_api$guideline = api.guideline) === null || _api$guideline === void 0 ? void 0 : (_api$guideline$action = _api$guideline.actions) === null || _api$guideline$action === void 0 ? void 0 : _api$guideline$action.displayGuideline(view)({
108
100
  guidelines
109
101
  });
110
- if (fg('platform_editor_breakout_resizing_hello_release')) {
111
- var _api$breakout$sharedS;
112
- const activeGuideline = guidelines.find(guideline => guideline.active && !guideline.key.startsWith('grid'));
113
- if (activeGuideline) {
114
- api === null || api === void 0 ? void 0 : api.core.actions.execute(({
115
- tr
116
- }) => {
117
- tr.setMeta(resizingPluginKey, {
118
- type: 'UPDATE_ACTIVE_GUIDELINE_KEY',
119
- data: {
120
- activeGuidelineKey: activeGuideline.key
121
- }
122
- });
123
- return tr;
102
+ const activeGuideline = guidelines.find(guideline => guideline.active && !guideline.key.startsWith('grid'));
103
+ if (activeGuideline) {
104
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(({
105
+ tr
106
+ }) => {
107
+ tr.setMeta(resizingPluginKey, {
108
+ type: 'UPDATE_ACTIVE_GUIDELINE_KEY',
109
+ data: {
110
+ activeGuidelineKey: activeGuideline.key
111
+ }
124
112
  });
125
- }
126
- if (!activeGuideline && api !== null && api !== void 0 && (_api$breakout$sharedS = api.breakout.sharedState.currentState()) !== null && _api$breakout$sharedS !== void 0 && _api$breakout$sharedS.activeGuidelineKey) {
127
- api === null || api === void 0 ? void 0 : api.core.actions.execute(({
128
- tr
129
- }) => {
130
- tr.setMeta(resizingPluginKey, {
131
- type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
132
- });
133
- return tr;
113
+ return tr;
114
+ });
115
+ }
116
+ if (!activeGuideline && api !== null && api !== void 0 && (_api$breakout$sharedS = api.breakout.sharedState.currentState()) !== null && _api$breakout$sharedS !== void 0 && _api$breakout$sharedS.activeGuidelineKey) {
117
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(({
118
+ tr
119
+ }) => {
120
+ tr.setMeta(resizingPluginKey, {
121
+ type: 'CLEAR_ACTIVE_GUIDELINE_KEY'
134
122
  });
135
- }
123
+ return tr;
124
+ });
136
125
  }
137
126
  if (fg('platform_editor_breakout_resizing_width_changes')) {
138
127
  // dom is used for width calculations
@@ -145,16 +134,14 @@ export function createResizerCallbacks({
145
134
  location,
146
135
  source
147
136
  }) {
148
- var _api$guideline2, _api$guideline2$actio;
137
+ var _api$guideline2, _api$guideline2$actio, _api$editorViewMode, _api$editorViewMode$s;
149
138
  let payloads = [];
150
- if (fg('platform_editor_breakout_resizing_hello_release')) {
151
- const frameRateSamples = endMeasure();
152
- payloads = generateResizeFrameRatePayloads({
153
- docSize: view.state.doc.nodeSize,
154
- frameRateSamples: reduceResizeFrameRateSamples(frameRateSamples),
155
- originalNode: node
156
- });
157
- }
139
+ const frameRateSamples = endMeasure();
140
+ payloads = generateResizeFrameRatePayloads({
141
+ docSize: view.state.doc.nodeSize,
142
+ frameRateSamples: reduceResizeFrameRateSamples(frameRateSamples),
143
+ originalNode: node
144
+ });
158
145
  const isResizedToFullWidth = !!guidelines.find(guideline => guideline.key.startsWith('full_width') && guideline.active);
159
146
  guidelines = getGuidelines(false, 0, getEditorWidth);
160
147
  api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
@@ -169,18 +156,14 @@ export function createResizerCallbacks({
169
156
  api,
170
157
  source
171
158
  });
172
- let isEditMode;
173
- if (fg('platform_editor_breakout_resizing_hello_release')) {
174
- var _api$editorViewMode, _api$editorViewMode$s;
175
- isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
176
- }
159
+ const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
177
160
  setBreakoutWidth(newWidth, mode, pos, isEditMode)(view.state, view.dispatch);
178
161
  if (fg('platform_editor_breakout_resizing_width_changes')) {
179
162
  dom.style.removeProperty(LOCAL_RESIZE_PROPERTY);
180
163
  } else {
181
164
  contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
182
165
  }
183
- if (node && fg('platform_editor_breakout_resizing_hello_release')) {
166
+ if (node) {
184
167
  const resizedPayload = generateResizedEventPayload({
185
168
  node,
186
169
  prevWidth: initialWidth,
@@ -200,11 +183,9 @@ export function createResizerCallbacks({
200
183
  (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
201
184
  });
202
185
  tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
203
- if (fg('platform_editor_breakout_resizing_hello_release')) {
204
- tr.setMeta(resizingPluginKey, {
205
- type: 'RESET_STATE'
206
- });
207
- }
186
+ tr.setMeta(resizingPluginKey, {
187
+ type: 'RESET_STATE'
188
+ });
208
189
  return tr;
209
190
  });
210
191
  }
@@ -18,6 +18,7 @@ export class ResizingMarkView {
18
18
  * ```
19
19
  */
20
20
  constructor(mark, view, api, getIntl, nodeViewPortalProviderAPI) {
21
+ var _api$editorViewMode, _api$editorViewMode$s, _api$editorViewMode2;
21
22
  _defineProperty(this, "isResizingInitialised", false);
22
23
  const dom = document.createElement('div');
23
24
  const contentDOM = document.createElement('div');
@@ -61,7 +62,7 @@ export class ResizingMarkView {
61
62
  contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
62
63
  }
63
64
  }
64
- } else if (fg('platform_editor_breakout_resizing_hello_release')) {
65
+ } else {
65
66
  if (mark.attrs.width) {
66
67
  contentDOM.style.width = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
67
68
  } else {
@@ -72,75 +73,31 @@ export class ResizingMarkView {
72
73
  contentDOM.style.width = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
73
74
  }
74
75
  }
75
- } else {
76
- if (mark.attrs.width) {
77
- contentDOM.style.minWidth = `min(var(${LOCAL_RESIZE_PROPERTY}, ${mark.attrs.width}px), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding)))`;
78
- } else {
79
- if (mark.attrs.mode === 'wide') {
80
- contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--breakout-wide-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
81
- }
82
- if (mark.attrs.mode === 'full-width') {
83
- contentDOM.style.minWidth = `max(var(--ak-editor--line-length), min(var(${LOCAL_RESIZE_PROPERTY}, var(--ak-editor--full-width-layout-width)), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))`;
84
- }
85
- }
86
76
  }
87
77
  dom.appendChild(contentDOM);
88
- if (fg('platform_editor_breakout_resizing_hello_release')) {
89
- var _api$editorViewMode, _api$editorViewMode$s;
90
- this.dom = dom;
91
- this.contentDOM = contentDOM;
92
- this.view = view;
93
- this.mark = mark;
94
- this.intl = getIntl();
95
- this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
96
- const isLiveViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
97
- if (!isLiveViewMode) {
98
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
99
- }
100
- } else {
101
- const callbacks = createResizerCallbacks({
102
- dom,
103
- contentDOM,
104
- view,
105
- mark,
106
- api
107
- });
108
- this.intl = getIntl();
109
- this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
110
- const {
111
- leftHandle,
112
- rightHandle,
113
- destroy
114
- } = createPragmaticResizer({
115
- target: contentDOM,
116
- ...callbacks,
117
- intl: this.intl,
118
- nodeViewPortalProviderAPI: this.nodeViewPortalProviderAPI
119
- });
120
- dom.prepend(leftHandle);
121
- dom.appendChild(rightHandle);
122
- this.dom = dom;
123
- this.contentDOM = contentDOM;
124
- this.view = view;
125
- this.mark = mark;
126
- this.destroyFn = destroy;
78
+ this.dom = dom;
79
+ this.contentDOM = contentDOM;
80
+ this.view = view;
81
+ this.mark = mark;
82
+ this.intl = getIntl();
83
+ this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
84
+ const isLiveViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
85
+ if (!isLiveViewMode) {
86
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
127
87
  }
128
- if (fg('platform_editor_breakout_resizing_hello_release')) {
129
- var _api$editorViewMode2;
130
- this.unsubscribeToViewModeChange = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(sharedState => {
131
- var _sharedState$nextShar, _sharedState$prevShar;
132
- if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
133
- var _sharedState$nextShar2, _sharedState$nextShar3;
134
- if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && this.isResizingInitialised) {
135
- var _this$destroyFn;
136
- (_this$destroyFn = this.destroyFn) === null || _this$destroyFn === void 0 ? void 0 : _this$destroyFn.call(this, true);
137
- this.isResizingInitialised = false;
138
- } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
139
- this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
140
- }
88
+ this.unsubscribeToViewModeChange = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(sharedState => {
89
+ var _sharedState$nextShar, _sharedState$prevShar;
90
+ if (((_sharedState$nextShar = sharedState.nextSharedState) === null || _sharedState$nextShar === void 0 ? void 0 : _sharedState$nextShar.mode) !== ((_sharedState$prevShar = sharedState.prevSharedState) === null || _sharedState$prevShar === void 0 ? void 0 : _sharedState$prevShar.mode)) {
91
+ var _sharedState$nextShar2, _sharedState$nextShar3;
92
+ if (((_sharedState$nextShar2 = sharedState.nextSharedState) === null || _sharedState$nextShar2 === void 0 ? void 0 : _sharedState$nextShar2.mode) === 'view' && this.isResizingInitialised) {
93
+ var _this$destroyFn;
94
+ (_this$destroyFn = this.destroyFn) === null || _this$destroyFn === void 0 ? void 0 : _this$destroyFn.call(this, true);
95
+ this.isResizingInitialised = false;
96
+ } else if (((_sharedState$nextShar3 = sharedState.nextSharedState) === null || _sharedState$nextShar3 === void 0 ? void 0 : _sharedState$nextShar3.mode) === 'edit' && !this.isResizingInitialised) {
97
+ this.setupResizerCallbacks(dom, contentDOM, view, mark, api);
141
98
  }
142
- });
143
- }
99
+ }
100
+ });
144
101
  }
145
102
  setupResizerCallbacks(dom, contentDOM, view, mark, api) {
146
103
  const callbacks = createResizerCallbacks({
@@ -169,11 +126,8 @@ export class ResizingMarkView {
169
126
  return true;
170
127
  }
171
128
  destroy() {
172
- var _this$destroyFn2;
129
+ var _this$destroyFn2, _this$unsubscribeToVi;
173
130
  (_this$destroyFn2 = this.destroyFn) === null || _this$destroyFn2 === void 0 ? void 0 : _this$destroyFn2.call(this);
174
- if (fg('platform_editor_breakout_resizing_hello_release')) {
175
- var _this$unsubscribeToVi;
176
- (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 ? void 0 : _this$unsubscribeToVi.call(this);
177
- }
131
+ (_this$unsubscribeToVi = this.unsubscribeToViewModeChange) === null || _this$unsubscribeToVi === void 0 ? void 0 : _this$unsubscribeToVi.call(this);
178
132
  }
179
133
  }
@@ -33,7 +33,7 @@ const addBreakoutToResizableNode = ({
33
33
  updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
34
34
  width: width
35
35
  })]);
36
- if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
36
+ if (isExpand) {
37
37
  updateExpandedStateNew({
38
38
  tr: updatedTr,
39
39
  node,
@@ -51,7 +51,7 @@ const addBreakoutToResizableNode = ({
51
51
  width: newWidth,
52
52
  mode: mode
53
53
  })]);
54
- if (isExpand && fg('platform_editor_breakout_resizing_hello_release')) {
54
+ if (isExpand) {
55
55
  updateExpandedStateNew({
56
56
  tr: updatedTr,
57
57
  node,
@@ -107,7 +107,7 @@ const pluginState = {
107
107
  export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
108
108
  return new SafePlugin({
109
109
  key: resizingPluginKey,
110
- state: fg('platform_editor_breakout_resizing_hello_release') ? pluginState : undefined,
110
+ state: pluginState,
111
111
  props: {
112
112
  markViews: {
113
113
  breakout: (mark, view) => {
@@ -125,7 +125,7 @@ export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, op
125
125
  } else {
126
126
  var _api$editorViewMode2, _api$editorViewMode2$;
127
127
  // if editor is in live-view mode don't send transactions
128
- if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : (_api$editorViewMode2$ = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2$ === void 0 ? void 0 : _api$editorViewMode2$.mode) !== 'edit' && fg('platform_editor_breakout_resizing_hello_release')) {
128
+ if ((api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : (_api$editorViewMode2$ = _api$editorViewMode2.sharedState.currentState()) === null || _api$editorViewMode2$ === void 0 ? void 0 : _api$editorViewMode2$.mode) !== 'edit') {
129
129
  return;
130
130
  }
131
131
  }