@atlaskit/editor-plugin-layout 2.1.3 → 2.1.5
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 +12 -0
- package/dist/cjs/layoutPlugin.js +10 -13
- package/dist/cjs/nodeviews/index.js +5 -12
- package/dist/cjs/pm-plugins/actions.js +1 -1
- package/dist/cjs/pm-plugins/main.js +0 -2
- package/dist/cjs/ui/global-styles.js +1 -20
- package/dist/cjs/ui/toolbar.js +1 -1
- package/dist/es2019/layoutPlugin.js +10 -13
- package/dist/es2019/nodeviews/index.js +5 -12
- package/dist/es2019/pm-plugins/actions.js +1 -1
- package/dist/es2019/pm-plugins/main.js +0 -2
- package/dist/es2019/ui/global-styles.js +1 -20
- package/dist/es2019/ui/toolbar.js +1 -1
- package/dist/esm/layoutPlugin.js +10 -13
- package/dist/esm/nodeviews/index.js +5 -12
- package/dist/esm/pm-plugins/actions.js +1 -1
- package/dist/esm/pm-plugins/main.js +0 -2
- package/dist/esm/ui/global-styles.js +1 -20
- package/dist/esm/ui/toolbar.js +1 -1
- package/package.json +7 -10
package/CHANGELOG.md
CHANGED
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -11,7 +11,6 @@ var _schema = require("@atlaskit/adf-schema/schema");
|
|
|
11
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
12
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
13
|
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
16
15
|
var _actions = require("./pm-plugins/actions");
|
|
17
16
|
var _main = _interopRequireDefault(require("./pm-plugins/main"));
|
|
@@ -72,18 +71,16 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
72
71
|
quickInsert: function quickInsert(_ref4) {
|
|
73
72
|
var formatMessage = _ref4.formatMessage;
|
|
74
73
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
})(tr);
|
|
86
|
-
}
|
|
74
|
+
var _api$analytics2;
|
|
75
|
+
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
|
|
76
|
+
action: _analytics.ACTION.INSERTED,
|
|
77
|
+
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
78
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
|
|
79
|
+
attributes: {
|
|
80
|
+
inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
|
|
81
|
+
},
|
|
82
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
83
|
+
})(tr);
|
|
87
84
|
return tr;
|
|
88
85
|
};
|
|
89
86
|
if ((0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
@@ -16,7 +16,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
16
16
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
17
17
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
18
18
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
19
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
21
|
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)); }
|
|
@@ -86,9 +85,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
86
85
|
var _this;
|
|
87
86
|
(0, _classCallCheck2.default)(this, LayoutSectionView);
|
|
88
87
|
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
|
|
89
|
-
|
|
90
|
-
_this.isEmpty = isEmptyLayout(_this.node);
|
|
91
|
-
}
|
|
88
|
+
_this.isEmpty = isEmptyLayout(_this.node);
|
|
92
89
|
_this.options = props.options;
|
|
93
90
|
return _this;
|
|
94
91
|
}
|
|
@@ -104,9 +101,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
104
101
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
105
102
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
106
103
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
107
|
-
|
|
108
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
109
|
-
}
|
|
104
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
110
105
|
return {
|
|
111
106
|
dom: container,
|
|
112
107
|
contentDOM: contentDOM
|
|
@@ -122,11 +117,9 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
|
|
|
122
117
|
}, {
|
|
123
118
|
key: "render",
|
|
124
119
|
value: function render(props, forwardRef) {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
129
|
-
}
|
|
120
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
121
|
+
if (this.layoutDOM) {
|
|
122
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
130
123
|
}
|
|
131
124
|
return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
|
|
132
125
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -398,7 +398,7 @@ var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
|
|
|
398
398
|
|
|
399
399
|
// This prevents the creation of a single column layout
|
|
400
400
|
// once we support single column layout, we can return 'single'
|
|
401
|
-
return
|
|
401
|
+
return 'two_equal';
|
|
402
402
|
}
|
|
403
403
|
switch (layoutColumnCount) {
|
|
404
404
|
case 2:
|
|
@@ -52,8 +52,6 @@ var moveCursorToNextColumn = function moveCursorToNextColumn(state, dispatch) {
|
|
|
52
52
|
}
|
|
53
53
|
return true;
|
|
54
54
|
};
|
|
55
|
-
|
|
56
|
-
// TODO: Look at memoize-one-ing this fn
|
|
57
55
|
var getNodeDecoration = function getNodeDecoration(pos, node) {
|
|
58
56
|
return [_view.Decoration.node(pos, pos + node.nodeSize, {
|
|
59
57
|
class: 'selected'
|
|
@@ -8,7 +8,6 @@ var _react = require("react");
|
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
10
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
12
|
/**
|
|
14
13
|
* @jsxRuntime classic
|
|
@@ -34,28 +33,10 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
|
34
33
|
}
|
|
35
34
|
});
|
|
36
35
|
}
|
|
37
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
38
|
-
return (0, _react2.css)({
|
|
39
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
40
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
41
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
42
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
43
|
-
'&::before': {
|
|
44
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
45
|
-
content: "\"".concat(message, "\""),
|
|
46
|
-
position: 'absolute',
|
|
47
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
48
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
49
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
50
|
-
pointerEvents: 'none'
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
36
|
return (0, _react2.css)({
|
|
56
37
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
57
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
58
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
39
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
59
40
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
60
41
|
'&::before': {
|
|
61
42
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -130,7 +130,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
|
|
|
130
130
|
};
|
|
131
131
|
};
|
|
132
132
|
var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
|
|
133
|
-
var iconPlaceholder = _layoutTwoColumns.default; // TODO: Replace with proper icon
|
|
133
|
+
var iconPlaceholder = _layoutTwoColumns.default; // TODO: ED-25466 - Replace with proper icon
|
|
134
134
|
|
|
135
135
|
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
136
136
|
var addSidebarLayouts = _ref.addSidebarLayouts,
|
|
@@ -4,7 +4,6 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
|
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
6
|
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
8
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
|
|
10
9
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -64,18 +63,16 @@ export const layoutPlugin = ({
|
|
|
64
63
|
formatMessage
|
|
65
64
|
}) => {
|
|
66
65
|
const withInsertLayoutAnalytics = tr => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
})(tr);
|
|
78
|
-
}
|
|
66
|
+
var _api$analytics2, _api$analytics2$actio;
|
|
67
|
+
api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
|
|
68
|
+
action: ACTION.INSERTED,
|
|
69
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
70
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
71
|
+
attributes: {
|
|
72
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT
|
|
73
|
+
},
|
|
74
|
+
eventType: EVENT_TYPE.TRACK
|
|
75
|
+
})(tr);
|
|
79
76
|
return tr;
|
|
80
77
|
};
|
|
81
78
|
if (editorExperiment('advanced_layouts', true)) {
|
|
@@ -3,7 +3,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
3
3
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
4
4
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
5
5
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
const isEmptyParagraph = node => {
|
|
8
7
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
9
8
|
};
|
|
@@ -67,9 +66,7 @@ const toDOM = () => ['div', {
|
|
|
67
66
|
export class LayoutSectionView extends ReactNodeView {
|
|
68
67
|
constructor(props) {
|
|
69
68
|
super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
|
|
70
|
-
|
|
71
|
-
this.isEmpty = isEmptyLayout(this.node);
|
|
72
|
-
}
|
|
69
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
73
70
|
this.options = props.options;
|
|
74
71
|
}
|
|
75
72
|
getContentDOM() {
|
|
@@ -82,9 +79,7 @@ export class LayoutSectionView extends ReactNodeView {
|
|
|
82
79
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
83
80
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
84
81
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
85
|
-
|
|
86
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
87
|
-
}
|
|
82
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
88
83
|
return {
|
|
89
84
|
dom: container,
|
|
90
85
|
contentDOM
|
|
@@ -96,11 +91,9 @@ export class LayoutSectionView extends ReactNodeView {
|
|
|
96
91
|
}
|
|
97
92
|
}
|
|
98
93
|
render(props, forwardRef) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
103
|
-
}
|
|
94
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
95
|
+
if (this.layoutDOM) {
|
|
96
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
104
97
|
}
|
|
105
98
|
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
106
99
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -373,7 +373,7 @@ const getDefaultPresetLayout = layoutNode => {
|
|
|
373
373
|
|
|
374
374
|
// This prevents the creation of a single column layout
|
|
375
375
|
// once we support single column layout, we can return 'single'
|
|
376
|
-
return
|
|
376
|
+
return 'two_equal';
|
|
377
377
|
}
|
|
378
378
|
switch (layoutColumnCount) {
|
|
379
379
|
case 2:
|
|
@@ -8,7 +8,6 @@ import { useMemo } from 'react';
|
|
|
8
8
|
import { css, Global, jsx } from '@emotion/react';
|
|
9
9
|
import { useIntl } from 'react-intl-next';
|
|
10
10
|
import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
const getPlaceholderStyle = message => {
|
|
14
13
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -27,28 +26,10 @@ const getPlaceholderStyle = message => {
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
31
|
-
return css({
|
|
32
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
36
|
-
'&::before': {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
-
content: `"${message}"`,
|
|
39
|
-
position: 'absolute',
|
|
40
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
41
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
42
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
43
|
-
pointerEvents: 'none'
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
29
|
return css({
|
|
49
30
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
50
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
51
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
32
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
52
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
53
34
|
'&::before': {
|
|
54
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
@@ -117,7 +117,7 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
|
|
|
117
117
|
tabIndex: null
|
|
118
118
|
});
|
|
119
119
|
export const layoutToolbarTitle = 'Layout floating controls';
|
|
120
|
-
const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon
|
|
120
|
+
const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
|
|
121
121
|
|
|
122
122
|
const getAdvancedLayoutItems = ({
|
|
123
123
|
addSidebarLayouts,
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -4,7 +4,6 @@ import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
|
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
6
|
import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
8
|
import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
|
|
10
9
|
import { default as createLayoutPlugin } from './pm-plugins/main';
|
|
@@ -65,18 +64,16 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
65
64
|
quickInsert: function quickInsert(_ref4) {
|
|
66
65
|
var formatMessage = _ref4.formatMessage;
|
|
67
66
|
var withInsertLayoutAnalytics = function withInsertLayoutAnalytics(tr) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
})(tr);
|
|
79
|
-
}
|
|
67
|
+
var _api$analytics2;
|
|
68
|
+
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
|
|
69
|
+
action: ACTION.INSERTED,
|
|
70
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
71
|
+
actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
|
|
72
|
+
attributes: {
|
|
73
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT
|
|
74
|
+
},
|
|
75
|
+
eventType: EVENT_TYPE.TRACK
|
|
76
|
+
})(tr);
|
|
80
77
|
return tr;
|
|
81
78
|
};
|
|
82
79
|
if (editorExperiment('advanced_layouts', true)) {
|
|
@@ -10,7 +10,6 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
|
10
10
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
11
11
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
12
12
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
var isEmptyParagraph = function isEmptyParagraph(node) {
|
|
15
14
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
16
15
|
};
|
|
@@ -76,9 +75,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
76
75
|
var _this;
|
|
77
76
|
_classCallCheck(this, LayoutSectionView);
|
|
78
77
|
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
|
|
79
|
-
|
|
80
|
-
_this.isEmpty = isEmptyLayout(_this.node);
|
|
81
|
-
}
|
|
78
|
+
_this.isEmpty = isEmptyLayout(_this.node);
|
|
82
79
|
_this.options = props.options;
|
|
83
80
|
return _this;
|
|
84
81
|
}
|
|
@@ -94,9 +91,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
94
91
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
95
92
|
this.layoutDOM = container.querySelector('[data-layout-section]');
|
|
96
93
|
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
|
|
97
|
-
|
|
98
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
99
|
-
}
|
|
94
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
100
95
|
return {
|
|
101
96
|
dom: container,
|
|
102
97
|
contentDOM: contentDOM
|
|
@@ -112,11 +107,9 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
112
107
|
}, {
|
|
113
108
|
key: "render",
|
|
114
109
|
value: function render(props, forwardRef) {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
119
|
-
}
|
|
110
|
+
this.isEmpty = isEmptyLayout(this.node);
|
|
111
|
+
if (this.layoutDOM) {
|
|
112
|
+
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
|
|
120
113
|
}
|
|
121
114
|
return /*#__PURE__*/React.createElement(LayoutBreakoutResizer, {
|
|
122
115
|
pluginInjectionApi: props.pluginInjectionApi,
|
|
@@ -389,7 +389,7 @@ var getDefaultPresetLayout = function getDefaultPresetLayout(layoutNode) {
|
|
|
389
389
|
|
|
390
390
|
// This prevents the creation of a single column layout
|
|
391
391
|
// once we support single column layout, we can return 'single'
|
|
392
|
-
return
|
|
392
|
+
return 'two_equal';
|
|
393
393
|
}
|
|
394
394
|
switch (layoutColumnCount) {
|
|
395
395
|
case 2:
|
|
@@ -45,8 +45,6 @@ var moveCursorToNextColumn = function moveCursorToNextColumn(state, dispatch) {
|
|
|
45
45
|
}
|
|
46
46
|
return true;
|
|
47
47
|
};
|
|
48
|
-
|
|
49
|
-
// TODO: Look at memoize-one-ing this fn
|
|
50
48
|
var getNodeDecoration = function getNodeDecoration(pos, node) {
|
|
51
49
|
return [Decoration.node(pos, pos + node.nodeSize, {
|
|
52
50
|
class: 'selected'
|
|
@@ -8,7 +8,6 @@ import { useMemo } from 'react';
|
|
|
8
8
|
import { css, Global, jsx } from '@emotion/react';
|
|
9
9
|
import { useIntl } from 'react-intl-next';
|
|
10
10
|
import { layoutMessages as messages } from '@atlaskit/editor-common/messages';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
12
|
var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
14
13
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
@@ -27,28 +26,10 @@ var getPlaceholderStyle = function getPlaceholderStyle(message) {
|
|
|
27
26
|
}
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
|
-
if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
|
|
31
|
-
return css({
|
|
32
|
-
// when paragraph is the only child, and it only has a trailingBreak.
|
|
33
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
34
|
-
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
35
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
36
|
-
'&::before': {
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
-
content: "\"".concat(message, "\""),
|
|
39
|
-
position: 'absolute',
|
|
40
|
-
color: "var(--ds-text-disabled, #A5ADBA)",
|
|
41
|
-
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
42
|
-
marginTop: "var(--ds-space-050, 4px)",
|
|
43
|
-
pointerEvents: 'none'
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
29
|
return css({
|
|
49
30
|
// when paragraph is the only child, and it only has a trailingBreak.
|
|
50
31
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
51
|
-
'.ProseMirror [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
32
|
+
'.ProseMirror .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)': {
|
|
52
33
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
53
34
|
'&::before': {
|
|
54
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -120,7 +120,7 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
|
|
|
120
120
|
};
|
|
121
121
|
};
|
|
122
122
|
export var layoutToolbarTitle = 'Layout floating controls';
|
|
123
|
-
var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: Replace with proper icon
|
|
123
|
+
var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
|
|
124
124
|
|
|
125
125
|
var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
|
|
126
126
|
var addSidebarLayouts = _ref.addSidebarLayouts,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,17 +34,17 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^102.
|
|
38
|
-
"@atlaskit/editor-plugin-analytics": "^2.
|
|
37
|
+
"@atlaskit/editor-common": "^102.8.0",
|
|
38
|
+
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
41
|
-
"@atlaskit/editor-plugin-selection": "^2.
|
|
41
|
+
"@atlaskit/editor-plugin-selection": "^2.1.0",
|
|
42
42
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
43
43
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
44
|
-
"@atlaskit/icon": "^
|
|
44
|
+
"@atlaskit/icon": "^25.0.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
47
|
-
"@atlaskit/tokens": "^4.
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^4.0.0",
|
|
47
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0",
|
|
49
49
|
"@emotion/react": "^11.7.1"
|
|
50
50
|
},
|
|
@@ -100,9 +100,6 @@
|
|
|
100
100
|
"platform-visual-refresh-icons": {
|
|
101
101
|
"type": "boolean"
|
|
102
102
|
},
|
|
103
|
-
"platform_editor_advanced_layouts_post_fix_patch_1": {
|
|
104
|
-
"type": "boolean"
|
|
105
|
-
},
|
|
106
103
|
"platform_editor_advanced_layouts_post_fix_patch_3": {
|
|
107
104
|
"type": "boolean"
|
|
108
105
|
},
|