@atlaskit/editor-plugin-layout 25.1.0 → 26.0.0
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.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/nodeviews/index.js +8 -87
- package/dist/cjs/nodeviews/layoutSectionView.js +1 -3
- package/dist/cjs/pm-plugins/resizing.js +5 -9
- package/dist/es2019/nodeviews/index.js +3 -84
- package/dist/es2019/nodeviews/layoutSectionView.js +1 -3
- package/dist/es2019/pm-plugins/resizing.js +5 -9
- package/dist/esm/nodeviews/index.js +6 -85
- package/dist/esm/nodeviews/layoutSectionView.js +1 -3
- package/dist/esm/pm-plugins/resizing.js +5 -9
- package/dist/types/nodeviews/layoutSectionView.d.ts +1 -3
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 26.0.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 25.1.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`0a81f6fa7cbf8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a81f6fa7cbf8) -
|
|
14
|
+
Clean up experiment `platform_editor_breakout_resizing`. Behind the
|
|
15
|
+
`platform_editor_list_join_strip_breakout` experiment, strip the breakout mark from a code block
|
|
16
|
+
before nesting it into a list item when joining from a gap cursor. Behind the
|
|
17
|
+
`platform_editor_resizer_selector_jsdom_fix` experiment, make the panel and rule breakout resizer
|
|
18
|
+
selectors parseable by jsdom (`> *[data-prosemirror-node-name=…]`).
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 25.1.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -12,89 +12,19 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
12
12
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
13
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
-
var _react =
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
16
|
var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
17
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
18
17
|
var _reactNodeView = _interopRequireWildcard(require("@atlaskit/editor-common/react-node-view"));
|
|
19
18
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
20
|
-
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
21
19
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
22
20
|
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
23
|
-
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
|
|
24
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
|
-
var _utils = require("../pm-plugins/utils");
|
|
26
21
|
var _LayoutSSRReactContextsProvider = require("../ui/LayoutSSRReactContextsProvider");
|
|
27
|
-
var
|
|
22
|
+
var _utils = require("./utils");
|
|
28
23
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
29
24
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
30
25
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
31
26
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
32
27
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
33
|
-
var layoutDynamicFullWidthGuidelineOffset = 16;
|
|
34
|
-
var isBreakoutAvailable = function isBreakoutAvailable(schema) {
|
|
35
|
-
return Boolean(schema.marks.breakout);
|
|
36
|
-
};
|
|
37
|
-
var selector = function selector(states) {
|
|
38
|
-
var _states$editorDisable;
|
|
39
|
-
return {
|
|
40
|
-
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
44
|
-
var _pluginInjectionApi$a;
|
|
45
|
-
var pluginInjectionApi = _ref.pluginInjectionApi,
|
|
46
|
-
forwardRef = _ref.forwardRef,
|
|
47
|
-
getPos = _ref.getPos,
|
|
48
|
-
view = _ref.view,
|
|
49
|
-
parentRef = _ref.parentRef;
|
|
50
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorDisabled'], selector),
|
|
51
|
-
editorDisabled = _useSharedPluginState.editorDisabled;
|
|
52
|
-
var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
|
|
53
|
-
var getEditorWidth = function getEditorWidth() {
|
|
54
|
-
var _pluginInjectionApi$w;
|
|
55
|
-
return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
|
|
56
|
-
};
|
|
57
|
-
var displayGapCursor = (0, _react.useCallback)(function (toggle) {
|
|
58
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
|
|
59
|
-
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
|
|
60
|
-
}, [pluginInjectionApi]);
|
|
61
|
-
var displayGuidelines = (0, _react.useCallback)(function (guidelines) {
|
|
62
|
-
var _pluginInjectionApi$g;
|
|
63
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g === void 0 || _pluginInjectionApi$g.displayGuideline(view)({
|
|
64
|
-
guidelines: guidelines
|
|
65
|
-
});
|
|
66
|
-
}, [pluginInjectionApi, view]);
|
|
67
|
-
|
|
68
|
-
// we want to hide the floating toolbar for other nodes.
|
|
69
|
-
// e.g. info panel inside the current layout section
|
|
70
|
-
var selectIntoCurrentLayout = (0, _react.useCallback)(function () {
|
|
71
|
-
var pos = getPos();
|
|
72
|
-
if (pos === undefined) {
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
// put the selection into the first column of the layout
|
|
76
|
-
(0, _utils.selectIntoLayout)(view, pos, 0);
|
|
77
|
-
}, [getPos, view]);
|
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
|
|
79
|
-
getRef: forwardRef,
|
|
80
|
-
getPos: getPos,
|
|
81
|
-
editorView: view,
|
|
82
|
-
nodeType: "layoutSection",
|
|
83
|
-
getEditorWidth: getEditorWidth,
|
|
84
|
-
disabled: (0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
|
|
85
|
-
hidden: interactionState === 'hasNotHadInteraction',
|
|
86
|
-
parentRef: parentRef,
|
|
87
|
-
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
88
|
-
displayGuidelines: (0, _editorExperiment.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
89
|
-
displayGapCursor: displayGapCursor
|
|
90
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
91
|
-
,
|
|
92
|
-
onResizeStart: function onResizeStart() {
|
|
93
|
-
selectIntoCurrentLayout();
|
|
94
|
-
},
|
|
95
|
-
dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
|
|
96
|
-
});
|
|
97
|
-
};
|
|
98
28
|
var toDOM = function toDOM(node) {
|
|
99
29
|
return ['div', {
|
|
100
30
|
class: 'layout-section-container'
|
|
@@ -126,7 +56,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
126
56
|
var _this;
|
|
127
57
|
(0, _classCallCheck2.default)(this, LayoutSectionView);
|
|
128
58
|
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
|
|
129
|
-
_this.isEmpty = (0,
|
|
59
|
+
_this.isEmpty = (0, _utils.isEmptyLayout)(_this.node);
|
|
130
60
|
_this.options = props.options;
|
|
131
61
|
_this.intl = props.intl;
|
|
132
62
|
return _this;
|
|
@@ -148,9 +78,9 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
148
78
|
// it. We handle that by stamping `data-ssr-content-dom-ref` on the
|
|
149
79
|
// outer container so `ReactNodeView.init()` can find a re-attach
|
|
150
80
|
// target inside `domRef` after the portal write.
|
|
151
|
-
var
|
|
152
|
-
container =
|
|
153
|
-
contentDOM =
|
|
81
|
+
var _ref = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
|
|
82
|
+
container = _ref.dom,
|
|
83
|
+
contentDOM = _ref.contentDOM;
|
|
154
84
|
|
|
155
85
|
// Ignored via go/ees005
|
|
156
86
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
@@ -204,7 +134,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
204
134
|
}, {
|
|
205
135
|
key: "render",
|
|
206
136
|
value: function render(props, forwardRef) {
|
|
207
|
-
this.isEmpty = (0,
|
|
137
|
+
this.isEmpty = (0, _utils.isEmptyLayout)(this.node);
|
|
208
138
|
if (this.layoutDOM) {
|
|
209
139
|
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
210
140
|
}
|
|
@@ -231,16 +161,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
231
161
|
ref: forwardRef
|
|
232
162
|
}));
|
|
233
163
|
}
|
|
234
|
-
|
|
235
|
-
return null;
|
|
236
|
-
}
|
|
237
|
-
return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
|
|
238
|
-
pluginInjectionApi: props.pluginInjectionApi,
|
|
239
|
-
forwardRef: forwardRef,
|
|
240
|
-
getPos: props.getPos,
|
|
241
|
-
view: props.view,
|
|
242
|
-
parentRef: this.layoutDOM
|
|
243
|
-
});
|
|
164
|
+
return null;
|
|
244
165
|
}
|
|
245
166
|
|
|
246
167
|
/**
|
|
@@ -33,9 +33,7 @@ var toDOM = function toDOM(node, isEmpty) {
|
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
|
-
* Requires `
|
|
37
|
-
* `platform_editor_vanilla_node_views_phase1`, because it cannot render the
|
|
38
|
-
* React `<BreakoutResizer>` the old view mounts when that experiment is off.
|
|
36
|
+
* Requires `platform_editor_vanilla_node_views_phase1`.
|
|
39
37
|
*
|
|
40
38
|
* Also used for SSR, where it needs no `NodeViewContentHole` /
|
|
41
39
|
* `data-ssr-content-dom-ref` handling — that exists only because the React
|
|
@@ -13,7 +13,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
|
13
13
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
14
14
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
15
15
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
16
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
17
16
|
var _nodeviews = require("../nodeviews");
|
|
18
17
|
var _layoutSectionView = require("../nodeviews/layoutSectionView");
|
|
19
18
|
var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin');
|
|
@@ -99,14 +98,11 @@ var _default = exports.default = function _default(options, pluginInjectionApi,
|
|
|
99
98
|
props: {
|
|
100
99
|
nodeViews: {
|
|
101
100
|
layoutSection: function layoutSection(node, view, getPos) {
|
|
102
|
-
//
|
|
103
|
-
//
|
|
104
|
-
//
|
|
105
|
-
//
|
|
106
|
-
|
|
107
|
-
// editor-plugin-breakout). Taking the vanilla path while that experiment is
|
|
108
|
-
// off would silently remove the breakout drag handles.
|
|
109
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1')) {
|
|
101
|
+
// The vanilla view renders no React, so it cannot mount the
|
|
102
|
+
// <LayoutBreakoutResizer> that LayoutSectionView.render() used to return.
|
|
103
|
+
// That resizer is redundant now that breakout resizing is handled by the
|
|
104
|
+
// pragmatic resizer in editor-plugin-breakout.
|
|
105
|
+
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1')) {
|
|
110
106
|
return new _layoutSectionView.LayoutSectionView(node);
|
|
111
107
|
}
|
|
112
108
|
return new _nodeviews.LayoutSectionView({
|
|
@@ -1,83 +1,11 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
3
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
3
|
import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
|
|
5
|
-
import {
|
|
6
|
-
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
|
+
import { ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
7
5
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
8
6
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
9
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
10
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
|
-
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
12
7
|
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
|
|
13
8
|
import { isEmptyLayout } from './utils';
|
|
14
|
-
const layoutDynamicFullWidthGuidelineOffset = 16;
|
|
15
|
-
const isBreakoutAvailable = schema => {
|
|
16
|
-
return Boolean(schema.marks.breakout);
|
|
17
|
-
};
|
|
18
|
-
const selector = states => {
|
|
19
|
-
var _states$editorDisable;
|
|
20
|
-
return {
|
|
21
|
-
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
const LayoutBreakoutResizer = ({
|
|
25
|
-
pluginInjectionApi,
|
|
26
|
-
forwardRef,
|
|
27
|
-
getPos,
|
|
28
|
-
view,
|
|
29
|
-
parentRef
|
|
30
|
-
}) => {
|
|
31
|
-
var _pluginInjectionApi$a;
|
|
32
|
-
const {
|
|
33
|
-
editorDisabled
|
|
34
|
-
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorDisabled'], selector);
|
|
35
|
-
const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
|
|
36
|
-
const getEditorWidth = () => {
|
|
37
|
-
var _pluginInjectionApi$w;
|
|
38
|
-
return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
|
|
39
|
-
};
|
|
40
|
-
const displayGapCursor = useCallback(toggle => {
|
|
41
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
|
|
42
|
-
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
|
|
43
|
-
}, [pluginInjectionApi]);
|
|
44
|
-
const displayGuidelines = useCallback(guidelines => {
|
|
45
|
-
var _pluginInjectionApi$g, _pluginInjectionApi$g2;
|
|
46
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 ? void 0 : (_pluginInjectionApi$g2 = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGuideline(view)({
|
|
47
|
-
guidelines
|
|
48
|
-
});
|
|
49
|
-
}, [pluginInjectionApi, view]);
|
|
50
|
-
|
|
51
|
-
// we want to hide the floating toolbar for other nodes.
|
|
52
|
-
// e.g. info panel inside the current layout section
|
|
53
|
-
const selectIntoCurrentLayout = useCallback(() => {
|
|
54
|
-
const pos = getPos();
|
|
55
|
-
if (pos === undefined) {
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
// put the selection into the first column of the layout
|
|
59
|
-
selectIntoLayout(view, pos, 0);
|
|
60
|
-
}, [getPos, view]);
|
|
61
|
-
return /*#__PURE__*/React.createElement(BreakoutResizer, {
|
|
62
|
-
getRef: forwardRef,
|
|
63
|
-
getPos: getPos,
|
|
64
|
-
editorView: view,
|
|
65
|
-
nodeType: "layoutSection",
|
|
66
|
-
getEditorWidth: getEditorWidth,
|
|
67
|
-
disabled: editorExperiment('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
|
|
68
|
-
hidden: interactionState === 'hasNotHadInteraction',
|
|
69
|
-
parentRef: parentRef,
|
|
70
|
-
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
71
|
-
displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
72
|
-
displayGapCursor: displayGapCursor
|
|
73
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
74
|
-
,
|
|
75
|
-
onResizeStart: () => {
|
|
76
|
-
selectIntoCurrentLayout();
|
|
77
|
-
},
|
|
78
|
-
dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
|
|
79
|
-
});
|
|
80
|
-
};
|
|
81
9
|
const toDOM = node => ['div', {
|
|
82
10
|
class: 'layout-section-container'
|
|
83
11
|
}, ['div', {
|
|
@@ -204,16 +132,7 @@ export class LayoutSectionView extends ReactNodeView {
|
|
|
204
132
|
ref: forwardRef
|
|
205
133
|
}));
|
|
206
134
|
}
|
|
207
|
-
|
|
208
|
-
return null;
|
|
209
|
-
}
|
|
210
|
-
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
211
|
-
pluginInjectionApi: props.pluginInjectionApi,
|
|
212
|
-
forwardRef: forwardRef,
|
|
213
|
-
getPos: props.getPos,
|
|
214
|
-
view: props.view,
|
|
215
|
-
parentRef: this.layoutDOM
|
|
216
|
-
});
|
|
135
|
+
return null;
|
|
217
136
|
}
|
|
218
137
|
|
|
219
138
|
/**
|
|
@@ -22,9 +22,7 @@ const toDOM = (node, isEmpty) => {
|
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
|
-
* Requires `
|
|
26
|
-
* `platform_editor_vanilla_node_views_phase1`, because it cannot render the
|
|
27
|
-
* React `<BreakoutResizer>` the old view mounts when that experiment is off.
|
|
25
|
+
* Requires `platform_editor_vanilla_node_views_phase1`.
|
|
28
26
|
*
|
|
29
27
|
* Also used for SSR, where it needs no `NodeViewContentHole` /
|
|
30
28
|
* `data-ssr-content-dom-ref` handling — that exists only because the React
|
|
@@ -3,7 +3,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
3
3
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
5
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
6
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
7
6
|
import { LayoutSectionView } from '../nodeviews';
|
|
8
7
|
import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
|
|
9
8
|
export const pluginKey = new PluginKey('layoutResizingPlugin');
|
|
@@ -85,14 +84,11 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
|
|
|
85
84
|
props: {
|
|
86
85
|
nodeViews: {
|
|
87
86
|
layoutSection: (node, view, getPos) => {
|
|
88
|
-
//
|
|
89
|
-
//
|
|
90
|
-
//
|
|
91
|
-
//
|
|
92
|
-
|
|
93
|
-
// editor-plugin-breakout). Taking the vanilla path while that experiment is
|
|
94
|
-
// off would silently remove the breakout drag handles.
|
|
95
|
-
if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
|
|
87
|
+
// The vanilla view renders no React, so it cannot mount the
|
|
88
|
+
// <LayoutBreakoutResizer> that LayoutSectionView.render() used to return.
|
|
89
|
+
// That resizer is redundant now that breakout resizing is handled by the
|
|
90
|
+
// pragmatic resizer in editor-plugin-breakout.
|
|
91
|
+
if (isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
|
|
96
92
|
return new LayoutSectionViewVanilla(node);
|
|
97
93
|
}
|
|
98
94
|
return new LayoutSectionView({
|
|
@@ -8,84 +8,14 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
|
|
|
8
8
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
9
9
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
10
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
|
-
import React
|
|
11
|
+
import React from 'react';
|
|
12
12
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
13
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
14
13
|
import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
|
|
15
|
-
import {
|
|
16
|
-
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
14
|
+
import { ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
17
15
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
18
16
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
19
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
|
|
20
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
21
|
-
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
22
17
|
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
|
|
23
18
|
import { isEmptyLayout } from './utils';
|
|
24
|
-
var layoutDynamicFullWidthGuidelineOffset = 16;
|
|
25
|
-
var isBreakoutAvailable = function isBreakoutAvailable(schema) {
|
|
26
|
-
return Boolean(schema.marks.breakout);
|
|
27
|
-
};
|
|
28
|
-
var selector = function selector(states) {
|
|
29
|
-
var _states$editorDisable;
|
|
30
|
-
return {
|
|
31
|
-
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
35
|
-
var _pluginInjectionApi$a;
|
|
36
|
-
var pluginInjectionApi = _ref.pluginInjectionApi,
|
|
37
|
-
forwardRef = _ref.forwardRef,
|
|
38
|
-
getPos = _ref.getPos,
|
|
39
|
-
view = _ref.view,
|
|
40
|
-
parentRef = _ref.parentRef;
|
|
41
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorDisabled'], selector),
|
|
42
|
-
editorDisabled = _useSharedPluginState.editorDisabled;
|
|
43
|
-
var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
|
|
44
|
-
var getEditorWidth = function getEditorWidth() {
|
|
45
|
-
var _pluginInjectionApi$w;
|
|
46
|
-
return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
|
|
47
|
-
};
|
|
48
|
-
var displayGapCursor = useCallback(function (toggle) {
|
|
49
|
-
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
|
|
50
|
-
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
|
|
51
|
-
}, [pluginInjectionApi]);
|
|
52
|
-
var displayGuidelines = useCallback(function (guidelines) {
|
|
53
|
-
var _pluginInjectionApi$g;
|
|
54
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g === void 0 || _pluginInjectionApi$g.displayGuideline(view)({
|
|
55
|
-
guidelines: guidelines
|
|
56
|
-
});
|
|
57
|
-
}, [pluginInjectionApi, view]);
|
|
58
|
-
|
|
59
|
-
// we want to hide the floating toolbar for other nodes.
|
|
60
|
-
// e.g. info panel inside the current layout section
|
|
61
|
-
var selectIntoCurrentLayout = useCallback(function () {
|
|
62
|
-
var pos = getPos();
|
|
63
|
-
if (pos === undefined) {
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
// put the selection into the first column of the layout
|
|
67
|
-
selectIntoLayout(view, pos, 0);
|
|
68
|
-
}, [getPos, view]);
|
|
69
|
-
return /*#__PURE__*/React.createElement(BreakoutResizer, {
|
|
70
|
-
getRef: forwardRef,
|
|
71
|
-
getPos: getPos,
|
|
72
|
-
editorView: view,
|
|
73
|
-
nodeType: "layoutSection",
|
|
74
|
-
getEditorWidth: getEditorWidth,
|
|
75
|
-
disabled: editorExperiment('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
|
|
76
|
-
hidden: interactionState === 'hasNotHadInteraction',
|
|
77
|
-
parentRef: parentRef,
|
|
78
|
-
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
79
|
-
displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
80
|
-
displayGapCursor: displayGapCursor
|
|
81
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
82
|
-
,
|
|
83
|
-
onResizeStart: function onResizeStart() {
|
|
84
|
-
selectIntoCurrentLayout();
|
|
85
|
-
},
|
|
86
|
-
dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
19
|
var toDOM = function toDOM(node) {
|
|
90
20
|
return ['div', {
|
|
91
21
|
class: 'layout-section-container'
|
|
@@ -139,9 +69,9 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
139
69
|
// it. We handle that by stamping `data-ssr-content-dom-ref` on the
|
|
140
70
|
// outer container so `ReactNodeView.init()` can find a re-attach
|
|
141
71
|
// target inside `domRef` after the portal write.
|
|
142
|
-
var
|
|
143
|
-
container =
|
|
144
|
-
contentDOM =
|
|
72
|
+
var _ref = DOMSerializer.renderSpec(document, toDOM(this.node)),
|
|
73
|
+
container = _ref.dom,
|
|
74
|
+
contentDOM = _ref.contentDOM;
|
|
145
75
|
|
|
146
76
|
// Ignored via go/ees005
|
|
147
77
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
@@ -222,16 +152,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
222
152
|
ref: forwardRef
|
|
223
153
|
}));
|
|
224
154
|
}
|
|
225
|
-
|
|
226
|
-
return null;
|
|
227
|
-
}
|
|
228
|
-
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
229
|
-
pluginInjectionApi: props.pluginInjectionApi,
|
|
230
|
-
forwardRef: forwardRef,
|
|
231
|
-
getPos: props.getPos,
|
|
232
|
-
view: props.view,
|
|
233
|
-
parentRef: this.layoutDOM
|
|
234
|
-
});
|
|
155
|
+
return null;
|
|
235
156
|
}
|
|
236
157
|
|
|
237
158
|
/**
|
|
@@ -26,9 +26,7 @@ var toDOM = function toDOM(node, isEmpty) {
|
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
/**
|
|
29
|
-
* Requires `
|
|
30
|
-
* `platform_editor_vanilla_node_views_phase1`, because it cannot render the
|
|
31
|
-
* React `<BreakoutResizer>` the old view mounts when that experiment is off.
|
|
29
|
+
* Requires `platform_editor_vanilla_node_views_phase1`.
|
|
32
30
|
*
|
|
33
31
|
* Also used for SSR, where it needs no `NodeViewContentHole` /
|
|
34
32
|
* `data-ssr-content-dom-ref` handling — that exists only because the React
|
|
@@ -6,7 +6,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
6
6
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
7
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
9
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
9
|
import { LayoutSectionView } from '../nodeviews';
|
|
11
10
|
import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
|
|
12
11
|
export var pluginKey = new PluginKey('layoutResizingPlugin');
|
|
@@ -92,14 +91,11 @@ export default (function (options, pluginInjectionApi, portalProviderAPI, eventD
|
|
|
92
91
|
props: {
|
|
93
92
|
nodeViews: {
|
|
94
93
|
layoutSection: function layoutSection(node, view, getPos) {
|
|
95
|
-
//
|
|
96
|
-
//
|
|
97
|
-
//
|
|
98
|
-
//
|
|
99
|
-
|
|
100
|
-
// editor-plugin-breakout). Taking the vanilla path while that experiment is
|
|
101
|
-
// off would silently remove the breakout drag handles.
|
|
102
|
-
if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
|
|
94
|
+
// The vanilla view renders no React, so it cannot mount the
|
|
95
|
+
// <LayoutBreakoutResizer> that LayoutSectionView.render() used to return.
|
|
96
|
+
// That resizer is redundant now that breakout resizing is handled by the
|
|
97
|
+
// pragmatic resizer in editor-plugin-breakout.
|
|
98
|
+
if (isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
|
|
103
99
|
return new LayoutSectionViewVanilla(node);
|
|
104
100
|
}
|
|
105
101
|
return new LayoutSectionView({
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
/**
|
|
4
|
-
* Requires `
|
|
5
|
-
* `platform_editor_vanilla_node_views_phase1`, because it cannot render the
|
|
6
|
-
* React `<BreakoutResizer>` the old view mounts when that experiment is off.
|
|
4
|
+
* Requires `platform_editor_vanilla_node_views_phase1`.
|
|
7
5
|
*
|
|
8
6
|
* Also used for SSR, where it needs no `NodeViewContentHole` /
|
|
9
7
|
* `data-ssr-content-dom-ref` handling — that exists only because the React
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "26.0.0",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -21,21 +21,21 @@
|
|
|
21
21
|
],
|
|
22
22
|
"atlaskit:src": "src/index.ts",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@atlaskit/adf-schema": "^57.
|
|
24
|
+
"@atlaskit/adf-schema": "^57.7.0",
|
|
25
25
|
"@atlaskit/css": "^1.1.0",
|
|
26
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
27
|
-
"@atlaskit/editor-plugin-block-controls": "^
|
|
28
|
-
"@atlaskit/editor-plugin-block-menu": "^
|
|
29
|
-
"@atlaskit/editor-plugin-decorations": "^
|
|
30
|
-
"@atlaskit/editor-plugin-editor-disabled": "^
|
|
31
|
-
"@atlaskit/editor-plugin-editor-viewmode": "^
|
|
32
|
-
"@atlaskit/editor-plugin-guideline": "^
|
|
33
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
34
|
-
"@atlaskit/editor-plugin-selection": "^
|
|
35
|
-
"@atlaskit/editor-plugin-toolbar": "^
|
|
36
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
37
|
-
"@atlaskit/editor-plugin-user-intent": "^
|
|
38
|
-
"@atlaskit/editor-plugin-width": "^
|
|
26
|
+
"@atlaskit/editor-plugin-analytics": "^25.0.0",
|
|
27
|
+
"@atlaskit/editor-plugin-block-controls": "^26.0.0",
|
|
28
|
+
"@atlaskit/editor-plugin-block-menu": "^24.0.0",
|
|
29
|
+
"@atlaskit/editor-plugin-decorations": "^25.0.0",
|
|
30
|
+
"@atlaskit/editor-plugin-editor-disabled": "^25.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-editor-viewmode": "^27.0.0",
|
|
32
|
+
"@atlaskit/editor-plugin-guideline": "^25.0.0",
|
|
33
|
+
"@atlaskit/editor-plugin-interaction": "^39.0.0",
|
|
34
|
+
"@atlaskit/editor-plugin-selection": "^25.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-toolbar": "^22.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^19.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-user-intent": "^23.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-width": "^26.0.0",
|
|
39
39
|
"@atlaskit/editor-prosemirror": "^9.0.0",
|
|
40
40
|
"@atlaskit/editor-shared-styles": "^4.3.0",
|
|
41
41
|
"@atlaskit/editor-toolbar": "^2.8.0",
|
|
@@ -44,14 +44,14 @@
|
|
|
44
44
|
"@atlaskit/icon-lab": "^7.11.0",
|
|
45
45
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
47
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^224.0.0",
|
|
48
48
|
"@atlaskit/tokens": "^20.3.0",
|
|
49
49
|
"@babel/runtime": "^7.0.0",
|
|
50
50
|
"@emotion/react": "^11.7.1",
|
|
51
51
|
"bind-event-listener": "^3.0.0"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@atlaskit/editor-common": "^
|
|
54
|
+
"@atlaskit/editor-common": "^129.0.0",
|
|
55
55
|
"react": "^18.2.0 || ^19.2.0",
|
|
56
56
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
57
57
|
},
|