@atlaskit/editor-core 190.1.15 → 190.1.16
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 +7 -0
- package/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/plugins/index.js +0 -7
- package/dist/cjs/presets/universal.js +2 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/index.js +0 -1
- package/dist/es2019/presets/universal.js +2 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/index.js +0 -1
- package/dist/esm/presets/universal.js +2 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/index.d.ts +0 -1
- package/dist/types-ts4.5/plugins/index.d.ts +0 -1
- package/package.json +2 -1
- package/tsconfig.json +1 -1
- package/dist/cjs/plugins/breakout/commands/remove-breakout.js +0 -30
- package/dist/cjs/plugins/breakout/commands/set-breakout-mode.js +0 -29
- package/dist/cjs/plugins/breakout/index.js +0 -218
- package/dist/cjs/plugins/breakout/plugin-key.js +0 -11
- package/dist/cjs/plugins/breakout/types.js +0 -5
- package/dist/cjs/plugins/breakout/ui/LayoutButton.js +0 -133
- package/dist/cjs/plugins/breakout/utils/find-breakout-node.js +0 -42
- package/dist/cjs/plugins/breakout/utils/get-breakout-mode.js +0 -24
- package/dist/cjs/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -27
- package/dist/cjs/plugins/breakout/utils/is-supported-node.js +0 -15
- package/dist/es2019/plugins/breakout/commands/remove-breakout.js +0 -22
- package/dist/es2019/plugins/breakout/commands/set-breakout-mode.js +0 -23
- package/dist/es2019/plugins/breakout/index.js +0 -208
- package/dist/es2019/plugins/breakout/plugin-key.js +0 -3
- package/dist/es2019/plugins/breakout/types.js +0 -1
- package/dist/es2019/plugins/breakout/ui/LayoutButton.js +0 -117
- package/dist/es2019/plugins/breakout/utils/find-breakout-node.js +0 -37
- package/dist/es2019/plugins/breakout/utils/get-breakout-mode.js +0 -16
- package/dist/es2019/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -22
- package/dist/es2019/plugins/breakout/utils/is-supported-node.js +0 -9
- package/dist/esm/plugins/breakout/commands/remove-breakout.js +0 -24
- package/dist/esm/plugins/breakout/commands/set-breakout-mode.js +0 -23
- package/dist/esm/plugins/breakout/index.js +0 -211
- package/dist/esm/plugins/breakout/plugin-key.js +0 -5
- package/dist/esm/plugins/breakout/types.js +0 -1
- package/dist/esm/plugins/breakout/ui/LayoutButton.js +0 -126
- package/dist/esm/plugins/breakout/utils/find-breakout-node.js +0 -37
- package/dist/esm/plugins/breakout/utils/get-breakout-mode.js +0 -18
- package/dist/esm/plugins/breakout/utils/is-breakout-mark-allowed.js +0 -22
- package/dist/esm/plugins/breakout/utils/is-supported-node.js +0 -9
- package/dist/types/plugins/breakout/commands/remove-breakout.d.ts +0 -2
- package/dist/types/plugins/breakout/commands/set-breakout-mode.d.ts +0 -3
- package/dist/types/plugins/breakout/index.d.ts +0 -12
- package/dist/types/plugins/breakout/plugin-key.d.ts +0 -5
- package/dist/types/plugins/breakout/types.d.ts +0 -4
- package/dist/types/plugins/breakout/ui/LayoutButton.d.ts +0 -17
- package/dist/types/plugins/breakout/utils/find-breakout-node.d.ts +0 -9
- package/dist/types/plugins/breakout/utils/get-breakout-mode.d.ts +0 -7
- package/dist/types/plugins/breakout/utils/is-breakout-mark-allowed.d.ts +0 -9
- package/dist/types/plugins/breakout/utils/is-supported-node.d.ts +0 -6
- package/dist/types-ts4.5/plugins/breakout/commands/remove-breakout.d.ts +0 -2
- package/dist/types-ts4.5/plugins/breakout/commands/set-breakout-mode.d.ts +0 -3
- package/dist/types-ts4.5/plugins/breakout/index.d.ts +0 -14
- package/dist/types-ts4.5/plugins/breakout/plugin-key.d.ts +0 -5
- package/dist/types-ts4.5/plugins/breakout/types.d.ts +0 -4
- package/dist/types-ts4.5/plugins/breakout/ui/LayoutButton.d.ts +0 -17
- package/dist/types-ts4.5/plugins/breakout/utils/find-breakout-node.d.ts +0 -9
- package/dist/types-ts4.5/plugins/breakout/utils/get-breakout-mode.d.ts +0 -7
- package/dist/types-ts4.5/plugins/breakout/utils/is-breakout-mark-allowed.d.ts +0 -9
- package/dist/types-ts4.5/plugins/breakout/utils/is-supported-node.d.ts +0 -6
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
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; }
|
|
5
|
-
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; }
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
8
|
-
import { breakout } from '@atlaskit/adf-schema';
|
|
9
|
-
import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
|
|
10
|
-
import LayoutButton from './ui/LayoutButton';
|
|
11
|
-
import { pluginKey } from './plugin-key';
|
|
12
|
-
import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
|
|
13
|
-
import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
14
|
-
import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
|
|
15
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
16
|
-
var BreakoutView = /*#__PURE__*/function () {
|
|
17
|
-
function BreakoutView(
|
|
18
|
-
/**
|
|
19
|
-
* Note: this is actually a PMMark -- however our version
|
|
20
|
-
* of the prosemirror and prosemirror types mean using PMNode
|
|
21
|
-
* is not problematic.
|
|
22
|
-
*/
|
|
23
|
-
mark, view, pluginInjectionApi) {
|
|
24
|
-
var _this = this;
|
|
25
|
-
_classCallCheck(this, BreakoutView);
|
|
26
|
-
_defineProperty(this, "updateWidth", function (widthState) {
|
|
27
|
-
// we skip updating the width of breakout nodes if the editorView dom
|
|
28
|
-
// element was hidden (to avoid breakout width and button thrashing
|
|
29
|
-
// when an editor is hidden, re-rendered and unhidden).
|
|
30
|
-
if (widthState === undefined || widthState.width === 0) {
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
var containerStyle = "";
|
|
34
|
-
var contentStyle = "";
|
|
35
|
-
var breakoutWidthPx = calcBreakoutWidthPx(_this.mark.attrs.mode, widthState.width);
|
|
36
|
-
if (widthState.lineLength) {
|
|
37
|
-
if (breakoutWidthPx < widthState.lineLength) {
|
|
38
|
-
breakoutWidthPx = widthState.lineLength;
|
|
39
|
-
}
|
|
40
|
-
containerStyle += "\n transform: none;\n display: flex;\n justify-content: center;\n ";
|
|
41
|
-
|
|
42
|
-
// There is a delay in the animation because widthState is delayed.
|
|
43
|
-
// When the editor goes full width the animation for the editor
|
|
44
|
-
// begins and finishes before widthState can update the new dimensions.
|
|
45
|
-
contentStyle += "\n min-width: ".concat(breakoutWidthPx, "px;\n transition: min-width 0.5s ").concat(akEditorSwoopCubicBezier, ";\n ");
|
|
46
|
-
} else {
|
|
47
|
-
// fallback method
|
|
48
|
-
// (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
|
|
49
|
-
//
|
|
50
|
-
// this approach doesn't work well with position: fixed, so
|
|
51
|
-
// it breaks things like sticky headers
|
|
52
|
-
containerStyle += "width: ".concat(breakoutWidthPx, "px; transform: translateX(-50%); margin-left: 50%;");
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
|
|
56
|
-
// `ignoreMutation` life-cycle event. @see ED-9947
|
|
57
|
-
var viewDomObserver = _this.view.domObserver;
|
|
58
|
-
if (viewDomObserver && _this.view.dom) {
|
|
59
|
-
viewDomObserver.stop();
|
|
60
|
-
setTimeout(function () {
|
|
61
|
-
viewDomObserver.start();
|
|
62
|
-
}, 0);
|
|
63
|
-
}
|
|
64
|
-
if (typeof _this.dom.style.cssText !== 'undefined') {
|
|
65
|
-
_this.dom.style.cssText = containerStyle;
|
|
66
|
-
_this.contentDOM.style.cssText = contentStyle;
|
|
67
|
-
} else {
|
|
68
|
-
_this.dom.setAttribute('style', containerStyle);
|
|
69
|
-
_this.contentDOM.setAttribute('style', contentStyle);
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
var contentDOM = document.createElement('div');
|
|
73
|
-
contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
|
|
74
|
-
var dom = document.createElement('div');
|
|
75
|
-
dom.className = BreakoutCssClassName.BREAKOUT_MARK;
|
|
76
|
-
dom.setAttribute('data-layout', mark.attrs.mode);
|
|
77
|
-
dom.appendChild(contentDOM);
|
|
78
|
-
this.dom = dom;
|
|
79
|
-
this.mark = mark;
|
|
80
|
-
this.view = view;
|
|
81
|
-
this.contentDOM = contentDOM;
|
|
82
|
-
this.unsubscribe = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.onChange(function (_ref) {
|
|
83
|
-
var nextSharedState = _ref.nextSharedState;
|
|
84
|
-
return _this.updateWidth(nextSharedState);
|
|
85
|
-
});
|
|
86
|
-
this.updateWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState());
|
|
87
|
-
}
|
|
88
|
-
_createClass(BreakoutView, [{
|
|
89
|
-
key: "destroy",
|
|
90
|
-
value:
|
|
91
|
-
// NOTE: Lifecycle events doesn't work for mark NodeView. So currently this is a no-op.
|
|
92
|
-
// @see https://github.com/ProseMirror/prosemirror/issues/1082
|
|
93
|
-
function destroy() {
|
|
94
|
-
var _this$unsubscribe;
|
|
95
|
-
(_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
|
|
96
|
-
}
|
|
97
|
-
}]);
|
|
98
|
-
return BreakoutView;
|
|
99
|
-
}();
|
|
100
|
-
function shouldPluginStateUpdate(newBreakoutNode, currentBreakoutNode) {
|
|
101
|
-
if (newBreakoutNode && currentBreakoutNode) {
|
|
102
|
-
return newBreakoutNode !== currentBreakoutNode;
|
|
103
|
-
}
|
|
104
|
-
return newBreakoutNode || currentBreakoutNode ? true : false;
|
|
105
|
-
}
|
|
106
|
-
function createPlugin(pluginInjectionApi, _ref2) {
|
|
107
|
-
var dispatch = _ref2.dispatch;
|
|
108
|
-
return new SafePlugin({
|
|
109
|
-
state: {
|
|
110
|
-
init: function init() {
|
|
111
|
-
return {
|
|
112
|
-
breakoutNode: undefined
|
|
113
|
-
};
|
|
114
|
-
},
|
|
115
|
-
apply: function apply(tr, pluginState) {
|
|
116
|
-
var breakoutNode = findSupportedNodeForBreakout(tr.selection);
|
|
117
|
-
if (shouldPluginStateUpdate(breakoutNode, pluginState.breakoutNode)) {
|
|
118
|
-
var nextPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
119
|
-
breakoutNode: breakoutNode
|
|
120
|
-
});
|
|
121
|
-
dispatch(pluginKey, nextPluginState);
|
|
122
|
-
return nextPluginState;
|
|
123
|
-
}
|
|
124
|
-
return pluginState;
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
key: pluginKey,
|
|
128
|
-
props: {
|
|
129
|
-
nodeViews: {
|
|
130
|
-
// Note: When we upgrade to prosemirror 1.27.2 -- we should
|
|
131
|
-
// move this to markViews.
|
|
132
|
-
// See the following link for more details:
|
|
133
|
-
// https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
|
|
134
|
-
breakout: function breakout(mark, view) {
|
|
135
|
-
return new BreakoutView(mark, view, pluginInjectionApi);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
var LayoutButtonWrapper = function LayoutButtonWrapper(_ref3) {
|
|
142
|
-
var _breakoutState$breako, _breakoutState$breako2;
|
|
143
|
-
var api = _ref3.api,
|
|
144
|
-
editorView = _ref3.editorView,
|
|
145
|
-
boundariesElement = _ref3.boundariesElement,
|
|
146
|
-
scrollableElement = _ref3.scrollableElement,
|
|
147
|
-
mountPoint = _ref3.mountPoint;
|
|
148
|
-
// Re-render with `width` (but don't use state) due to https://bitbucket.org/atlassian/%7Bc8e2f021-38d2-46d0-9b7a-b3f7b428f724%7D/pull-requests/24272
|
|
149
|
-
var _useSharedPluginState = useSharedPluginState(api, ['width', 'breakout']),
|
|
150
|
-
breakoutState = _useSharedPluginState.breakoutState;
|
|
151
|
-
return /*#__PURE__*/React.createElement(LayoutButton, {
|
|
152
|
-
editorView: editorView,
|
|
153
|
-
mountPoint: mountPoint,
|
|
154
|
-
boundariesElement: boundariesElement,
|
|
155
|
-
scrollableElement: scrollableElement,
|
|
156
|
-
node: (_breakoutState$breako = breakoutState === null || breakoutState === void 0 || (_breakoutState$breako2 = breakoutState.breakoutNode) === null || _breakoutState$breako2 === void 0 ? void 0 : _breakoutState$breako2.node) !== null && _breakoutState$breako !== void 0 ? _breakoutState$breako : null
|
|
157
|
-
});
|
|
158
|
-
};
|
|
159
|
-
var breakoutPlugin = function breakoutPlugin(_ref4) {
|
|
160
|
-
var options = _ref4.config,
|
|
161
|
-
api = _ref4.api;
|
|
162
|
-
return {
|
|
163
|
-
name: 'breakout',
|
|
164
|
-
pmPlugins: function pmPlugins() {
|
|
165
|
-
return [{
|
|
166
|
-
name: 'breakout',
|
|
167
|
-
plugin: function plugin(props) {
|
|
168
|
-
return createPlugin(api, props);
|
|
169
|
-
}
|
|
170
|
-
}];
|
|
171
|
-
},
|
|
172
|
-
marks: function marks() {
|
|
173
|
-
return [{
|
|
174
|
-
name: 'breakout',
|
|
175
|
-
mark: breakout
|
|
176
|
-
}];
|
|
177
|
-
},
|
|
178
|
-
getSharedState: function getSharedState(editorState) {
|
|
179
|
-
if (!editorState) {
|
|
180
|
-
return {
|
|
181
|
-
breakoutNode: undefined
|
|
182
|
-
};
|
|
183
|
-
}
|
|
184
|
-
var pluginState = pluginKey.getState(editorState);
|
|
185
|
-
if (!pluginState) {
|
|
186
|
-
return {
|
|
187
|
-
breakoutNode: undefined
|
|
188
|
-
};
|
|
189
|
-
}
|
|
190
|
-
return pluginState;
|
|
191
|
-
},
|
|
192
|
-
contentComponent: function contentComponent(_ref5) {
|
|
193
|
-
var editorView = _ref5.editorView,
|
|
194
|
-
popupsMountPoint = _ref5.popupsMountPoint,
|
|
195
|
-
popupsBoundariesElement = _ref5.popupsBoundariesElement,
|
|
196
|
-
popupsScrollableElement = _ref5.popupsScrollableElement;
|
|
197
|
-
// This is a bit crappy, but should be resolved once we move to a static schema.
|
|
198
|
-
if (options && !options.allowBreakoutButton) {
|
|
199
|
-
return null;
|
|
200
|
-
}
|
|
201
|
-
return /*#__PURE__*/React.createElement(LayoutButtonWrapper, {
|
|
202
|
-
api: api,
|
|
203
|
-
mountPoint: popupsMountPoint,
|
|
204
|
-
editorView: editorView,
|
|
205
|
-
boundariesElement: popupsBoundariesElement,
|
|
206
|
-
scrollableElement: popupsScrollableElement
|
|
207
|
-
});
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
};
|
|
211
|
-
export default breakoutPlugin;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
-
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
9
|
-
var _templateObject;
|
|
10
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
11
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
-
/** @jsx jsx */
|
|
13
|
-
import React from 'react';
|
|
14
|
-
import { css, jsx } from '@emotion/react';
|
|
15
|
-
import { B300, N300, N20A } from '@atlaskit/theme/colors';
|
|
16
|
-
import { injectIntl } from 'react-intl-next';
|
|
17
|
-
import { findParentDomRefOfType, findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
18
|
-
import { Popup } from '@atlaskit/editor-common/ui';
|
|
19
|
-
import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
|
|
20
|
-
import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
|
|
21
|
-
import ToolbarButton from '../../../ui/ToolbarButton';
|
|
22
|
-
import { getBreakoutMode } from '../utils/get-breakout-mode';
|
|
23
|
-
import { setBreakoutMode } from '../commands/set-breakout-mode';
|
|
24
|
-
import { removeBreakout } from '../commands/remove-breakout';
|
|
25
|
-
import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
|
|
26
|
-
import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
|
|
27
|
-
import { getPluginState } from '../plugin-key';
|
|
28
|
-
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
29
|
-
import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
|
|
30
|
-
import { layers } from '@atlaskit/theme/constants';
|
|
31
|
-
import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
|
|
32
|
-
var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n && button {\n background: ", ";\n color: ", ";\n :hover {\n background: ", ";\n color: ", " !important;\n }\n }\n"])), "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)");
|
|
33
|
-
function getBreakoutNodeElement(pluginState, selection, editorView) {
|
|
34
|
-
if (!pluginState.breakoutNode) {
|
|
35
|
-
return undefined;
|
|
36
|
-
}
|
|
37
|
-
if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
|
|
38
|
-
return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
|
|
39
|
-
}
|
|
40
|
-
return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
|
|
41
|
-
}
|
|
42
|
-
var LayoutButton = /*#__PURE__*/function (_React$Component) {
|
|
43
|
-
_inherits(LayoutButton, _React$Component);
|
|
44
|
-
var _super = _createSuper(LayoutButton);
|
|
45
|
-
function LayoutButton() {
|
|
46
|
-
var _this;
|
|
47
|
-
_classCallCheck(this, LayoutButton);
|
|
48
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
|
-
args[_key] = arguments[_key];
|
|
50
|
-
}
|
|
51
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
52
|
-
_defineProperty(_assertThisInitialized(_this), "handleClick", function (breakoutMode) {
|
|
53
|
-
return function () {
|
|
54
|
-
var _this$props$editorVie = _this.props.editorView,
|
|
55
|
-
state = _this$props$editorVie.state,
|
|
56
|
-
dispatch = _this$props$editorVie.dispatch;
|
|
57
|
-
if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
|
|
58
|
-
setBreakoutMode(breakoutMode)(state, dispatch);
|
|
59
|
-
} else {
|
|
60
|
-
removeBreakout()(state, dispatch);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
});
|
|
64
|
-
return _this;
|
|
65
|
-
}
|
|
66
|
-
_createClass(LayoutButton, [{
|
|
67
|
-
key: "render",
|
|
68
|
-
value: function render() {
|
|
69
|
-
var _this$props = this.props,
|
|
70
|
-
formatMessage = _this$props.intl.formatMessage,
|
|
71
|
-
mountPoint = _this$props.mountPoint,
|
|
72
|
-
boundariesElement = _this$props.boundariesElement,
|
|
73
|
-
scrollableElement = _this$props.scrollableElement,
|
|
74
|
-
editorView = _this$props.editorView,
|
|
75
|
-
node = _this$props.node;
|
|
76
|
-
var state = editorView.state;
|
|
77
|
-
if (!node || !isBreakoutMarkAllowed(state)) {
|
|
78
|
-
return null;
|
|
79
|
-
}
|
|
80
|
-
var breakoutMode = getBreakoutMode(editorView.state);
|
|
81
|
-
var titleMessage = getTitle(breakoutMode);
|
|
82
|
-
var title = formatMessage(titleMessage);
|
|
83
|
-
var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
|
|
84
|
-
var belowOtherPopupsZIndex = layers.layer() - 1;
|
|
85
|
-
var pluginState = getPluginState(state);
|
|
86
|
-
if (!pluginState) {
|
|
87
|
-
return null;
|
|
88
|
-
}
|
|
89
|
-
var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
|
|
90
|
-
if (!element) {
|
|
91
|
-
return null;
|
|
92
|
-
}
|
|
93
|
-
var closestEl = element.querySelector(".".concat(BreakoutCssClassName.BREAKOUT_MARK_DOM));
|
|
94
|
-
if (closestEl && closestEl.firstChild) {
|
|
95
|
-
element = closestEl.firstChild;
|
|
96
|
-
}
|
|
97
|
-
return jsx(Popup, {
|
|
98
|
-
ariaLabel: title,
|
|
99
|
-
target: element,
|
|
100
|
-
offset: [5, 0],
|
|
101
|
-
alignY: "start",
|
|
102
|
-
alignX: "end",
|
|
103
|
-
mountTo: mountPoint,
|
|
104
|
-
boundariesElement: boundariesElement,
|
|
105
|
-
scrollableElement: scrollableElement,
|
|
106
|
-
stick: true,
|
|
107
|
-
forcePlacement: true,
|
|
108
|
-
zIndex: belowOtherPopupsZIndex
|
|
109
|
-
}, jsx("div", {
|
|
110
|
-
css: toolbarButtonWrapper
|
|
111
|
-
}, jsx(ToolbarButton, {
|
|
112
|
-
title: title,
|
|
113
|
-
testId: titleMessage.id,
|
|
114
|
-
onClick: this.handleClick(nextBreakoutMode),
|
|
115
|
-
iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
|
|
116
|
-
label: title
|
|
117
|
-
}) : jsx(ExpandIcon, {
|
|
118
|
-
label: title
|
|
119
|
-
})
|
|
120
|
-
})));
|
|
121
|
-
}
|
|
122
|
-
}]);
|
|
123
|
-
return LayoutButton;
|
|
124
|
-
}(React.Component);
|
|
125
|
-
_defineProperty(LayoutButton, "displayName", 'LayoutButton');
|
|
126
|
-
export default injectIntl(LayoutButton);
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
-
import { isSupportedNodeForBreakout } from './is-supported-node';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Find the nearest parent node to the selection that supports breakout, or if the nearest
|
|
7
|
-
* matching parent node is the doc, return undefined.
|
|
8
|
-
* For depth, if a node is selected and supports breakout, return the depth of the node.
|
|
9
|
-
* @param selection Current editor selection
|
|
10
|
-
*/
|
|
11
|
-
export function findSupportedNodeForBreakout(selection) {
|
|
12
|
-
if (selection instanceof NodeSelection) {
|
|
13
|
-
var supportsBreakout = isSupportedNodeForBreakout(selection.node);
|
|
14
|
-
if (supportsBreakout) {
|
|
15
|
-
return {
|
|
16
|
-
pos: selection.from,
|
|
17
|
-
start: selection.from,
|
|
18
|
-
node: selection.node,
|
|
19
|
-
// If a selected expand is in a doc, the depth of that expand is 0. Therefore
|
|
20
|
-
// we don't need to subtract 1 or instantly return false if the depth is 0
|
|
21
|
-
depth: selection.$anchor.depth
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
var breakoutNode = findParentNode(isSupportedNodeForBreakout)(selection);
|
|
26
|
-
if (!breakoutNode || breakoutNode.depth === 0) {
|
|
27
|
-
// If this node doesn't exist or the only supporting node is the document
|
|
28
|
-
// (with depth 0), then we're not inside a node that supports breakout
|
|
29
|
-
return undefined;
|
|
30
|
-
}
|
|
31
|
-
return {
|
|
32
|
-
node: breakoutNode.node,
|
|
33
|
-
start: breakoutNode.start,
|
|
34
|
-
pos: breakoutNode.pos,
|
|
35
|
-
depth: breakoutNode.depth - 1
|
|
36
|
-
};
|
|
37
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { findSupportedNodeForBreakout } from './find-breakout-node';
|
|
2
|
-
/**
|
|
3
|
-
* Get the current mode of the breakout at the selection
|
|
4
|
-
* @param state Current EditorState
|
|
5
|
-
*/
|
|
6
|
-
export function getBreakoutMode(state) {
|
|
7
|
-
var node = findSupportedNodeForBreakout(state.selection);
|
|
8
|
-
if (!node) {
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
var breakoutMark = node.node.marks.find(function (m) {
|
|
12
|
-
return m.type.name === 'breakout';
|
|
13
|
-
});
|
|
14
|
-
if (!breakoutMark) {
|
|
15
|
-
return;
|
|
16
|
-
}
|
|
17
|
-
return breakoutMark.attrs.mode;
|
|
18
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { findSupportedNodeForBreakout } from './find-breakout-node';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Check if breakout should be allowed for the current selection. If a node is selected,
|
|
5
|
-
* can this node be broken out, if text, can the enclosing parent node be broken out.
|
|
6
|
-
*
|
|
7
|
-
* Currently breakout of a node is not possible if it's nested in anything but the document, however
|
|
8
|
-
* this logic supports this changing.
|
|
9
|
-
*/
|
|
10
|
-
export function isBreakoutMarkAllowed(state) {
|
|
11
|
-
if (!state.schema.marks.breakout) {
|
|
12
|
-
return false;
|
|
13
|
-
}
|
|
14
|
-
var supportedNodeParent = findSupportedNodeForBreakout(state.selection);
|
|
15
|
-
if (!supportedNodeParent) {
|
|
16
|
-
return false;
|
|
17
|
-
}
|
|
18
|
-
// At the moment we can only breakout when the depth is 0, ie. doc is the only node
|
|
19
|
-
// that supports breakout. This *could* change though.
|
|
20
|
-
var parent = state.selection.$from.node(supportedNodeParent.depth);
|
|
21
|
-
return parent.type.allowsMarkType(state.schema.marks.breakout);
|
|
22
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Check if breakout can be applied to a node
|
|
5
|
-
* @param node Node to check
|
|
6
|
-
*/
|
|
7
|
-
export function isSupportedNodeForBreakout(node) {
|
|
8
|
-
return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
|
|
9
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
-
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
3
|
-
import type { BreakoutPluginState } from './types';
|
|
4
|
-
interface BreakoutPluginOptions {
|
|
5
|
-
allowBreakoutButton?: boolean;
|
|
6
|
-
}
|
|
7
|
-
declare const breakoutPlugin: NextEditorPlugin<'breakout', {
|
|
8
|
-
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
9
|
-
dependencies: [WidthPlugin];
|
|
10
|
-
sharedState: Partial<BreakoutPluginState>;
|
|
11
|
-
}>;
|
|
12
|
-
export default breakoutPlugin;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { BreakoutPluginState } from './types';
|
|
4
|
-
export declare const pluginKey: PluginKey<BreakoutPluginState>;
|
|
5
|
-
export declare const getPluginState: (state: EditorState) => BreakoutPluginState | undefined;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
|
-
export interface Props {
|
|
7
|
-
editorView: EditorView;
|
|
8
|
-
mountPoint?: HTMLElement;
|
|
9
|
-
node: PMNode | null;
|
|
10
|
-
boundariesElement?: HTMLElement;
|
|
11
|
-
scrollableElement?: HTMLElement;
|
|
12
|
-
handleClick?: Function;
|
|
13
|
-
}
|
|
14
|
-
declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
|
|
15
|
-
WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
|
|
16
|
-
};
|
|
17
|
-
export default _default;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
-
/**
|
|
4
|
-
* Find the nearest parent node to the selection that supports breakout, or if the nearest
|
|
5
|
-
* matching parent node is the doc, return undefined.
|
|
6
|
-
* For depth, if a node is selected and supports breakout, return the depth of the node.
|
|
7
|
-
* @param selection Current editor selection
|
|
8
|
-
*/
|
|
9
|
-
export declare function findSupportedNodeForBreakout(selection: Selection): ContentNodeWithPos | undefined;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { BreakoutMode } from '@atlaskit/editor-common/types';
|
|
3
|
-
/**
|
|
4
|
-
* Get the current mode of the breakout at the selection
|
|
5
|
-
* @param state Current EditorState
|
|
6
|
-
*/
|
|
7
|
-
export declare function getBreakoutMode(state: EditorState): BreakoutMode | undefined;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
/**
|
|
3
|
-
* Check if breakout should be allowed for the current selection. If a node is selected,
|
|
4
|
-
* can this node be broken out, if text, can the enclosing parent node be broken out.
|
|
5
|
-
*
|
|
6
|
-
* Currently breakout of a node is not possible if it's nested in anything but the document, however
|
|
7
|
-
* this logic supports this changing.
|
|
8
|
-
*/
|
|
9
|
-
export declare function isBreakoutMarkAllowed(state: EditorState): boolean;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
-
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
3
|
-
import type { BreakoutPluginState } from './types';
|
|
4
|
-
interface BreakoutPluginOptions {
|
|
5
|
-
allowBreakoutButton?: boolean;
|
|
6
|
-
}
|
|
7
|
-
declare const breakoutPlugin: NextEditorPlugin<'breakout', {
|
|
8
|
-
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
9
|
-
dependencies: [
|
|
10
|
-
WidthPlugin
|
|
11
|
-
];
|
|
12
|
-
sharedState: Partial<BreakoutPluginState>;
|
|
13
|
-
}>;
|
|
14
|
-
export default breakoutPlugin;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type { BreakoutPluginState } from './types';
|
|
4
|
-
export declare const pluginKey: PluginKey<BreakoutPluginState>;
|
|
5
|
-
export declare const getPluginState: (state: EditorState) => BreakoutPluginState | undefined;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import type { WrappedComponentProps } from 'react-intl-next';
|
|
4
|
-
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
|
-
export interface Props {
|
|
7
|
-
editorView: EditorView;
|
|
8
|
-
mountPoint?: HTMLElement;
|
|
9
|
-
node: PMNode | null;
|
|
10
|
-
boundariesElement?: HTMLElement;
|
|
11
|
-
scrollableElement?: HTMLElement;
|
|
12
|
-
handleClick?: Function;
|
|
13
|
-
}
|
|
14
|
-
declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
|
|
15
|
-
WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
|
|
16
|
-
};
|
|
17
|
-
export default _default;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
-
/**
|
|
4
|
-
* Find the nearest parent node to the selection that supports breakout, or if the nearest
|
|
5
|
-
* matching parent node is the doc, return undefined.
|
|
6
|
-
* For depth, if a node is selected and supports breakout, return the depth of the node.
|
|
7
|
-
* @param selection Current editor selection
|
|
8
|
-
*/
|
|
9
|
-
export declare function findSupportedNodeForBreakout(selection: Selection): ContentNodeWithPos | undefined;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
import type { BreakoutMode } from '@atlaskit/editor-common/types';
|
|
3
|
-
/**
|
|
4
|
-
* Get the current mode of the breakout at the selection
|
|
5
|
-
* @param state Current EditorState
|
|
6
|
-
*/
|
|
7
|
-
export declare function getBreakoutMode(state: EditorState): BreakoutMode | undefined;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
-
/**
|
|
3
|
-
* Check if breakout should be allowed for the current selection. If a node is selected,
|
|
4
|
-
* can this node be broken out, if text, can the enclosing parent node be broken out.
|
|
5
|
-
*
|
|
6
|
-
* Currently breakout of a node is not possible if it's nested in anything but the document, however
|
|
7
|
-
* this logic supports this changing.
|
|
8
|
-
*/
|
|
9
|
-
export declare function isBreakoutMarkAllowed(state: EditorState): boolean;
|