@atlaskit/editor-plugin-block-menu 3.2.7 → 3.2.9
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 +16 -0
- package/dist/cjs/ui/block-menu-provider.js +8 -2
- package/dist/cjs/ui/block-menu.js +20 -2
- package/dist/cjs/ui/copy-block.js +20 -8
- package/dist/cjs/ui/copy-link.js +14 -1
- package/dist/cjs/ui/delete-button.js +13 -0
- package/dist/cjs/ui/format-menu-nested.js +17 -1
- package/dist/cjs/ui/move-down.js +13 -0
- package/dist/cjs/ui/move-up.js +13 -0
- package/dist/es2019/ui/block-menu-provider.js +8 -2
- package/dist/es2019/ui/block-menu.js +21 -3
- package/dist/es2019/ui/copy-block.js +21 -6
- package/dist/es2019/ui/copy-link.js +15 -1
- package/dist/es2019/ui/delete-button.js +14 -0
- package/dist/es2019/ui/format-menu-nested.js +19 -2
- package/dist/es2019/ui/move-down.js +14 -0
- package/dist/es2019/ui/move-up.js +14 -0
- package/dist/esm/ui/block-menu-provider.js +8 -2
- package/dist/esm/ui/block-menu.js +21 -3
- package/dist/esm/ui/copy-block.js +20 -8
- package/dist/esm/ui/copy-link.js +14 -1
- package/dist/esm/ui/delete-button.js +13 -0
- package/dist/esm/ui/format-menu-nested.js +18 -2
- package/dist/esm/ui/move-down.js +13 -0
- package/dist/esm/ui/move-up.js +13 -0
- package/dist/types/blockMenuPluginType.d.ts +3 -1
- package/dist/types/ui/block-menu-provider.d.ts +3 -0
- package/dist/types-ts4.5/blockMenuPluginType.d.ts +3 -1
- package/dist/types-ts4.5/ui/block-menu-provider.d.ts +3 -0
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-menu
|
|
2
2
|
|
|
3
|
+
## 3.2.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`3a405e30c22dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a405e30c22dc) -
|
|
8
|
+
ED-29384: Fixed copy texts in extension, pasted the extension
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 3.2.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`3e49f15a87d52`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e49f15a87d52) -
|
|
16
|
+
Add analytics events for block menu discovery
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 3.2.7
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -8,7 +8,8 @@ exports.useBlockMenu = exports.BlockMenuProvider = void 0;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
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); }
|
|
10
10
|
var BlockMenuContext = /*#__PURE__*/(0, _react.createContext)({
|
|
11
|
-
onDropdownOpenChanged: function onDropdownOpenChanged() {}
|
|
11
|
+
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
12
|
+
fireAnalyticsEvent: function fireAnalyticsEvent() {}
|
|
12
13
|
});
|
|
13
14
|
var useBlockMenu = exports.useBlockMenu = function useBlockMenu() {
|
|
14
15
|
var context = (0, _react.useContext)(BlockMenuContext);
|
|
@@ -32,9 +33,14 @@ var BlockMenuProvider = exports.BlockMenuProvider = function BlockMenuProvider(_
|
|
|
32
33
|
}, 1);
|
|
33
34
|
}
|
|
34
35
|
}, [api]);
|
|
36
|
+
var fireAnalyticsEvent = (0, _react.useCallback)(function (payload) {
|
|
37
|
+
var _api$analytics;
|
|
38
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
39
|
+
}, [api]);
|
|
35
40
|
return /*#__PURE__*/_react.default.createElement(BlockMenuContext.Provider, {
|
|
36
41
|
value: {
|
|
37
|
-
onDropdownOpenChanged: onDropdownOpenChanged
|
|
42
|
+
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
43
|
+
fireAnalyticsEvent: fireAnalyticsEvent
|
|
38
44
|
}
|
|
39
45
|
}, children);
|
|
40
46
|
};
|
|
@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
|
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _reactIntlNext = require("react-intl-next");
|
|
13
13
|
var _css = require("@atlaskit/css");
|
|
14
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
14
15
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
15
16
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
16
17
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
@@ -76,8 +77,10 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
76
77
|
isMenuOpen = _useSharedPluginState.isMenuOpen,
|
|
77
78
|
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
78
79
|
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
79
|
-
onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged
|
|
80
|
+
onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
|
|
81
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
80
82
|
var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
|
|
83
|
+
var prevIsMenuOpenRef = (0, _react.useRef)(false);
|
|
81
84
|
var hasFocus = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
82
85
|
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
83
86
|
|
|
@@ -89,8 +92,23 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
89
92
|
if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
|
|
90
93
|
return;
|
|
91
94
|
}
|
|
95
|
+
|
|
96
|
+
// Fire analytics event when block menu opens (only on first transition from closed to open)
|
|
97
|
+
if (!prevIsMenuOpenRef.current && isMenuOpen) {
|
|
98
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
99
|
+
action: _analytics.ACTION.OPENED,
|
|
100
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU,
|
|
101
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
102
|
+
attributes: {
|
|
103
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Update the previous state
|
|
109
|
+
prevIsMenuOpenRef.current = isMenuOpen;
|
|
92
110
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
|
|
93
|
-
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
|
|
111
|
+
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
|
|
94
112
|
if (!isMenuOpen) {
|
|
95
113
|
return null;
|
|
96
114
|
}
|
|
@@ -8,6 +8,7 @@ exports.default = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
12
13
|
var _clipboard = require("@atlaskit/editor-common/clipboard");
|
|
13
14
|
var _copyButton = require("@atlaskit/editor-common/copy-button");
|
|
@@ -18,6 +19,7 @@ var _utils = require("@atlaskit/editor-tables/utils");
|
|
|
18
19
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
19
20
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
20
21
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
21
23
|
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; }
|
|
22
24
|
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; }
|
|
23
25
|
var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
|
|
@@ -27,8 +29,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
27
29
|
var api = _ref.api;
|
|
28
30
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
29
31
|
formatMessage = _useIntl.formatMessage;
|
|
32
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
33
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
30
34
|
var copyHandler = function copyHandler(event) {
|
|
31
35
|
var _api$selection;
|
|
36
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
37
|
+
action: _analytics.ACTION.CLICKED,
|
|
38
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
39
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_BLOCK,
|
|
40
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
41
|
+
attributes: {
|
|
42
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
32
46
|
// prevent click event from bubbling up to the ancestor elements
|
|
33
47
|
event.stopPropagation();
|
|
34
48
|
// get the current selection
|
|
@@ -52,12 +66,12 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
52
66
|
fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || _model.Fragment.empty;
|
|
53
67
|
}
|
|
54
68
|
|
|
55
|
-
// if text is inside of an expand, the selection contains an expand for some reason
|
|
56
|
-
// the expandNode always and only have one child, no matter how much contents are inside the expand,
|
|
69
|
+
// if text is inside of an expand or extension, the selection contains an expand or extension for some reason
|
|
70
|
+
// the expandNode or extensionNode always and only have one child, no matter how much contents are inside the expand or extension,
|
|
57
71
|
// and the one child is the line that is being selected, so we can use the .firstChild again
|
|
58
|
-
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && fragment.firstChild.type.name === 'expand') {
|
|
59
|
-
var
|
|
60
|
-
var actualNodeToCopy =
|
|
72
|
+
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && (fragment.firstChild.type.name === 'expand' || fragment.firstChild.type.name === 'bodiedExtension' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_2'))) {
|
|
73
|
+
var expandOrExtensionNode = fragment.firstChild;
|
|
74
|
+
var actualNodeToCopy = expandOrExtensionNode.firstChild;
|
|
61
75
|
fragment = _model.Fragment.from(actualNodeToCopy) || _model.Fragment.empty;
|
|
62
76
|
}
|
|
63
77
|
var domNode = toDOMFromFragment(fragment, schema);
|
|
@@ -108,9 +122,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
108
122
|
elemBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
|
|
109
123
|
label: ""
|
|
110
124
|
}),
|
|
111
|
-
onClick:
|
|
112
|
-
return copyHandler(e);
|
|
113
|
-
}
|
|
125
|
+
onClick: copyHandler
|
|
114
126
|
}, text);
|
|
115
127
|
};
|
|
116
128
|
var _default = exports.default = (0, _reactIntlNext.injectIntl)(CopyBlockMenuItem);
|
package/dist/cjs/ui/copy-link.js
CHANGED
|
@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.CopyLinkDropdownItem = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
13
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
13
14
|
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
|
|
14
15
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
15
17
|
var _copyLink = require("./utils/copyLink");
|
|
16
18
|
var _isNestedNode = require("./utils/isNestedNode");
|
|
17
19
|
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); }
|
|
@@ -20,7 +22,18 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
20
22
|
config = _ref.config;
|
|
21
23
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
22
24
|
formatMessage = _useIntl.formatMessage;
|
|
25
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
26
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
23
27
|
var handleClick = (0, _react.useCallback)(function () {
|
|
28
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
29
|
+
action: _analytics.ACTION.CLICKED,
|
|
30
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
31
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
|
|
32
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
33
|
+
attributes: {
|
|
34
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
35
|
+
}
|
|
36
|
+
});
|
|
24
37
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
25
38
|
var _api$blockControls;
|
|
26
39
|
var tr = _ref2.tr;
|
|
@@ -33,7 +46,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
33
46
|
});
|
|
34
47
|
api === null || api === void 0 || api.core.actions.focus();
|
|
35
48
|
return (0, _copyLink.copyLink)(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
|
|
36
|
-
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
|
|
49
|
+
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
|
|
37
50
|
var checkIsNestedNode = (0, _react.useCallback)(function () {
|
|
38
51
|
var _api$selection, _api$blockControls2;
|
|
39
52
|
var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.DeleteDropdownItem = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
12
13
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
14
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -17,14 +18,26 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
|
17
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
19
|
var _box = require("@atlaskit/primitives/box");
|
|
19
20
|
var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
|
|
21
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
20
22
|
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); }
|
|
21
23
|
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
22
24
|
var _api$core$sharedState;
|
|
23
25
|
var api = _ref.api;
|
|
24
26
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
25
27
|
formatMessage = _useIntl.formatMessage;
|
|
28
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
29
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
26
30
|
var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
|
|
27
31
|
var onClick = function onClick() {
|
|
32
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
33
|
+
action: _analytics.ACTION.CLICKED,
|
|
34
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
35
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.DELETE_BLOCK,
|
|
36
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
37
|
+
attributes: {
|
|
38
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
39
|
+
}
|
|
40
|
+
});
|
|
28
41
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
29
42
|
var _api$blockControls;
|
|
30
43
|
var tr = _ref2.tr;
|
|
@@ -8,12 +8,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.FormatMenuComponent = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactIntlNext = require("react-intl-next");
|
|
11
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
12
13
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
15
|
var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
|
|
15
16
|
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
|
|
16
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
17
19
|
var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
|
|
18
20
|
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); }
|
|
19
21
|
var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
@@ -21,10 +23,23 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
|
|
|
21
23
|
children = _ref.children;
|
|
22
24
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
23
25
|
formatMessage = _useIntl.formatMessage;
|
|
26
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
27
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
24
28
|
var text = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_patch_1') ? formatMessage(_messages.blockMenuMessages.turnInto) : formatMessage(_blockMenu.messages.turnInto);
|
|
25
29
|
var isDisabled = (0, _react.useMemo)(function () {
|
|
26
30
|
return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_for_disabled_nodes') ? (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api) : false;
|
|
27
31
|
}, [api]);
|
|
32
|
+
var handleClick = (0, _react.useCallback)(function () {
|
|
33
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
34
|
+
action: _analytics.ACTION.CLICKED,
|
|
35
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
36
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_MENU,
|
|
37
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
38
|
+
attributes: {
|
|
39
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}, [fireAnalyticsEvent]);
|
|
28
43
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
|
|
29
44
|
text: text,
|
|
30
45
|
elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
|
|
@@ -34,6 +49,7 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
|
|
|
34
49
|
label: ""
|
|
35
50
|
}),
|
|
36
51
|
enableMaxHeight: true,
|
|
37
|
-
isDisabled: isDisabled
|
|
52
|
+
isDisabled: isDisabled,
|
|
53
|
+
onClick: handleClick
|
|
38
54
|
}, children);
|
|
39
55
|
};
|
package/dist/cjs/ui/move-down.js
CHANGED
|
@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.MoveDownDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
11
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
11
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
13
|
var _types = require("@atlaskit/editor-common/types");
|
|
13
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
15
|
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
|
|
16
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
15
17
|
var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
|
|
16
18
|
var api = _ref.api;
|
|
17
19
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
18
20
|
formatMessage = _useIntl.formatMessage;
|
|
21
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
22
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
19
23
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
|
|
20
24
|
var _blockControlsState$b;
|
|
21
25
|
var blockControlsState = _ref2.blockControlsState;
|
|
@@ -25,6 +29,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
|
|
|
25
29
|
}),
|
|
26
30
|
canMoveDown = _useSharedPluginState.canMoveDown;
|
|
27
31
|
var handleClick = function handleClick() {
|
|
32
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
33
|
+
action: _analytics.ACTION.CLICKED,
|
|
34
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
35
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
|
|
36
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
37
|
+
attributes: {
|
|
38
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
39
|
+
}
|
|
40
|
+
});
|
|
28
41
|
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
29
42
|
var _api$blockControls, _api$blockControls2;
|
|
30
43
|
var tr = _ref3.tr;
|
package/dist/cjs/ui/move-up.js
CHANGED
|
@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.MoveUpDropdownItem = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
11
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
11
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
13
|
var _types = require("@atlaskit/editor-common/types");
|
|
13
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
15
|
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
|
|
16
|
+
var _blockMenuProvider = require("./block-menu-provider");
|
|
15
17
|
var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
|
|
16
18
|
var api = _ref.api;
|
|
17
19
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
18
20
|
formatMessage = _useIntl.formatMessage;
|
|
21
|
+
var _useBlockMenu = (0, _blockMenuProvider.useBlockMenu)(),
|
|
22
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
19
23
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (_ref2) {
|
|
20
24
|
var _blockControlsState$b;
|
|
21
25
|
var blockControlsState = _ref2.blockControlsState;
|
|
@@ -25,6 +29,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
|
|
|
25
29
|
}),
|
|
26
30
|
canMoveUp = _useSharedPluginState.canMoveUp;
|
|
27
31
|
var handleClick = function handleClick() {
|
|
32
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
33
|
+
action: _analytics.ACTION.CLICKED,
|
|
34
|
+
actionSubject: _analytics.ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
35
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
|
|
36
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
37
|
+
attributes: {
|
|
38
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE
|
|
39
|
+
}
|
|
40
|
+
});
|
|
28
41
|
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
29
42
|
var _api$blockControls, _api$blockControls2;
|
|
30
43
|
var tr = _ref3.tr;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, createContext, useContext } from 'react';
|
|
2
2
|
const BlockMenuContext = /*#__PURE__*/createContext({
|
|
3
|
-
onDropdownOpenChanged: () => {}
|
|
3
|
+
onDropdownOpenChanged: () => {},
|
|
4
|
+
fireAnalyticsEvent: () => {}
|
|
4
5
|
});
|
|
5
6
|
export const useBlockMenu = () => {
|
|
6
7
|
const context = useContext(BlockMenuContext);
|
|
@@ -23,9 +24,14 @@ export const BlockMenuProvider = ({
|
|
|
23
24
|
}), 1);
|
|
24
25
|
}
|
|
25
26
|
}, [api]);
|
|
27
|
+
const fireAnalyticsEvent = useCallback(payload => {
|
|
28
|
+
var _api$analytics;
|
|
29
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
30
|
+
}, [api]);
|
|
26
31
|
return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
|
|
27
32
|
value: {
|
|
28
|
-
onDropdownOpenChanged
|
|
33
|
+
onDropdownOpenChanged,
|
|
34
|
+
fireAnalyticsEvent
|
|
29
35
|
}
|
|
30
36
|
}, children);
|
|
31
37
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./block-menu.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React, { useContext, useEffect } from 'react';
|
|
4
|
+
import React, { useContext, useEffect, useRef } from 'react';
|
|
5
5
|
import { injectIntl } from 'react-intl-next';
|
|
6
6
|
import { cx } from '@atlaskit/css';
|
|
7
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
7
8
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
8
9
|
import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
|
|
9
10
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -65,9 +66,11 @@ const BlockMenu = ({
|
|
|
65
66
|
};
|
|
66
67
|
});
|
|
67
68
|
const {
|
|
68
|
-
onDropdownOpenChanged
|
|
69
|
+
onDropdownOpenChanged,
|
|
70
|
+
fireAnalyticsEvent
|
|
69
71
|
} = useBlockMenu();
|
|
70
72
|
const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
73
|
+
const prevIsMenuOpenRef = useRef(false);
|
|
71
74
|
const hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref !== void 0 ? _ref : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
72
75
|
const hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
73
76
|
|
|
@@ -79,8 +82,23 @@ const BlockMenu = ({
|
|
|
79
82
|
if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
|
|
80
83
|
return;
|
|
81
84
|
}
|
|
85
|
+
|
|
86
|
+
// Fire analytics event when block menu opens (only on first transition from closed to open)
|
|
87
|
+
if (!prevIsMenuOpenRef.current && isMenuOpen) {
|
|
88
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
89
|
+
action: ACTION.OPENED,
|
|
90
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU,
|
|
91
|
+
eventType: EVENT_TYPE.UI,
|
|
92
|
+
attributes: {
|
|
93
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Update the previous state
|
|
99
|
+
prevIsMenuOpenRef.current = isMenuOpen;
|
|
82
100
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
|
|
83
|
-
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
|
|
101
|
+
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
|
|
84
102
|
if (!isMenuOpen) {
|
|
85
103
|
return null;
|
|
86
104
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
4
5
|
import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
|
|
5
6
|
import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
|
|
@@ -10,6 +11,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
|
10
11
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
12
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
12
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
13
15
|
const toDOMFromFragment = (fragment, schema) => {
|
|
14
16
|
return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
|
|
15
17
|
};
|
|
@@ -19,8 +21,21 @@ const CopyBlockMenuItem = ({
|
|
|
19
21
|
const {
|
|
20
22
|
formatMessage
|
|
21
23
|
} = useIntl();
|
|
24
|
+
const {
|
|
25
|
+
fireAnalyticsEvent
|
|
26
|
+
} = useBlockMenu();
|
|
22
27
|
const copyHandler = event => {
|
|
23
28
|
var _api$selection, _api$selection$shared, _api$selection$shared2;
|
|
29
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
30
|
+
action: ACTION.CLICKED,
|
|
31
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
32
|
+
actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
|
|
33
|
+
eventType: EVENT_TYPE.UI,
|
|
34
|
+
attributes: {
|
|
35
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
24
39
|
// prevent click event from bubbling up to the ancestor elements
|
|
25
40
|
event.stopPropagation();
|
|
26
41
|
// get the current selection
|
|
@@ -44,12 +59,12 @@ const CopyBlockMenuItem = ({
|
|
|
44
59
|
fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || Fragment.empty;
|
|
45
60
|
}
|
|
46
61
|
|
|
47
|
-
// if text is inside of an expand, the selection contains an expand for some reason
|
|
48
|
-
// the expandNode always and only have one child, no matter how much contents are inside the expand,
|
|
62
|
+
// if text is inside of an expand or extension, the selection contains an expand or extension for some reason
|
|
63
|
+
// the expandNode or extensionNode always and only have one child, no matter how much contents are inside the expand or extension,
|
|
49
64
|
// and the one child is the line that is being selected, so we can use the .firstChild again
|
|
50
|
-
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && fragment.firstChild.type.name === 'expand') {
|
|
51
|
-
const
|
|
52
|
-
const actualNodeToCopy =
|
|
65
|
+
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && (fragment.firstChild.type.name === 'expand' || fragment.firstChild.type.name === 'bodiedExtension' && fg('platform_editor_block_menu_patch_2'))) {
|
|
66
|
+
const expandOrExtensionNode = fragment.firstChild;
|
|
67
|
+
const actualNodeToCopy = expandOrExtensionNode.firstChild;
|
|
53
68
|
fragment = Fragment.from(actualNodeToCopy) || Fragment.empty;
|
|
54
69
|
}
|
|
55
70
|
const domNode = toDOMFromFragment(fragment, schema);
|
|
@@ -101,7 +116,7 @@ const CopyBlockMenuItem = ({
|
|
|
101
116
|
elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
102
117
|
label: ""
|
|
103
118
|
}),
|
|
104
|
-
onClick:
|
|
119
|
+
onClick: copyHandler
|
|
105
120
|
}, text);
|
|
106
121
|
};
|
|
107
122
|
export default injectIntl(CopyBlockMenuItem);
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
4
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
6
|
import LinkIcon from '@atlaskit/icon/core/link';
|
|
6
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
7
9
|
import { copyLink } from './utils/copyLink';
|
|
8
10
|
import { isNestedNode } from './utils/isNestedNode';
|
|
9
11
|
const CopyLinkDropdownItemContent = ({
|
|
@@ -13,7 +15,19 @@ const CopyLinkDropdownItemContent = ({
|
|
|
13
15
|
const {
|
|
14
16
|
formatMessage
|
|
15
17
|
} = useIntl();
|
|
18
|
+
const {
|
|
19
|
+
fireAnalyticsEvent
|
|
20
|
+
} = useBlockMenu();
|
|
16
21
|
const handleClick = useCallback(() => {
|
|
22
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
23
|
+
action: ACTION.CLICKED,
|
|
24
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
25
|
+
actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
|
|
26
|
+
eventType: EVENT_TYPE.UI,
|
|
27
|
+
attributes: {
|
|
28
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
29
|
+
}
|
|
30
|
+
});
|
|
17
31
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
18
32
|
tr
|
|
19
33
|
}) => {
|
|
@@ -27,7 +41,7 @@ const CopyLinkDropdownItemContent = ({
|
|
|
27
41
|
});
|
|
28
42
|
api === null || api === void 0 ? void 0 : api.core.actions.focus();
|
|
29
43
|
return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
|
|
30
|
-
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
|
|
44
|
+
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
|
|
31
45
|
const checkIsNestedNode = useCallback(() => {
|
|
32
46
|
var _api$selection, _api$selection$shared, _api$selection$shared2, _api$blockControls2, _api$blockControls2$s, _api$blockControls2$s2;
|
|
33
47
|
const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
4
5
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -9,6 +10,7 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
|
9
10
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Box } from '@atlaskit/primitives/box';
|
|
11
12
|
import Text from '@atlaskit/primitives/text';
|
|
13
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
12
14
|
const DeleteDropdownItemContent = ({
|
|
13
15
|
api
|
|
14
16
|
}) => {
|
|
@@ -16,8 +18,20 @@ const DeleteDropdownItemContent = ({
|
|
|
16
18
|
const {
|
|
17
19
|
formatMessage
|
|
18
20
|
} = useIntl();
|
|
21
|
+
const {
|
|
22
|
+
fireAnalyticsEvent
|
|
23
|
+
} = useBlockMenu();
|
|
19
24
|
const nodeTypes = Object.values((api === null || api === void 0 ? void 0 : (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.nodes) || {});
|
|
20
25
|
const onClick = () => {
|
|
26
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
27
|
+
action: ACTION.CLICKED,
|
|
28
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
29
|
+
actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
|
|
30
|
+
eventType: EVENT_TYPE.UI,
|
|
31
|
+
attributes: {
|
|
32
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
33
|
+
}
|
|
34
|
+
});
|
|
21
35
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
22
36
|
tr
|
|
23
37
|
}) => {
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
1
|
+
import React, { useMemo, useCallback } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
4
5
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
6
7
|
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
7
8
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
8
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
9
11
|
import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
|
|
10
12
|
export const FormatMenuComponent = ({
|
|
11
13
|
api,
|
|
@@ -14,10 +16,24 @@ export const FormatMenuComponent = ({
|
|
|
14
16
|
const {
|
|
15
17
|
formatMessage
|
|
16
18
|
} = useIntl();
|
|
19
|
+
const {
|
|
20
|
+
fireAnalyticsEvent
|
|
21
|
+
} = useBlockMenu();
|
|
17
22
|
const text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
|
|
18
23
|
const isDisabled = useMemo(() => {
|
|
19
24
|
return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
|
|
20
25
|
}, [api]);
|
|
26
|
+
const handleClick = useCallback(() => {
|
|
27
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
28
|
+
action: ACTION.CLICKED,
|
|
29
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
30
|
+
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
|
|
31
|
+
eventType: EVENT_TYPE.UI,
|
|
32
|
+
attributes: {
|
|
33
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
}, [fireAnalyticsEvent]);
|
|
21
37
|
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
|
|
22
38
|
text: text,
|
|
23
39
|
elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
|
|
@@ -27,6 +43,7 @@ export const FormatMenuComponent = ({
|
|
|
27
43
|
label: ""
|
|
28
44
|
}),
|
|
29
45
|
enableMaxHeight: true,
|
|
30
|
-
isDisabled: isDisabled
|
|
46
|
+
isDisabled: isDisabled,
|
|
47
|
+
onClick: handleClick
|
|
31
48
|
}, children);
|
|
32
49
|
};
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
5
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { DIRECTION } from '@atlaskit/editor-common/types';
|
|
6
7
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
7
8
|
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
9
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
8
10
|
const MoveDownDropdownItemContent = ({
|
|
9
11
|
api
|
|
10
12
|
}) => {
|
|
11
13
|
const {
|
|
12
14
|
formatMessage
|
|
13
15
|
} = useIntl();
|
|
16
|
+
const {
|
|
17
|
+
fireAnalyticsEvent
|
|
18
|
+
} = useBlockMenu();
|
|
14
19
|
const {
|
|
15
20
|
canMoveDown
|
|
16
21
|
} = useSharedPluginStateWithSelector(api, ['blockControls'], ({
|
|
@@ -22,6 +27,15 @@ const MoveDownDropdownItemContent = ({
|
|
|
22
27
|
};
|
|
23
28
|
});
|
|
24
29
|
const handleClick = () => {
|
|
30
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
31
|
+
action: ACTION.CLICKED,
|
|
32
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
33
|
+
actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
|
|
34
|
+
eventType: EVENT_TYPE.UI,
|
|
35
|
+
attributes: {
|
|
36
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
37
|
+
}
|
|
38
|
+
});
|
|
25
39
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
26
40
|
tr
|
|
27
41
|
}) => {
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
5
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { DIRECTION } from '@atlaskit/editor-common/types';
|
|
6
7
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
7
8
|
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
9
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
8
10
|
const MoveUpDropdownItemContent = ({
|
|
9
11
|
api
|
|
10
12
|
}) => {
|
|
11
13
|
const {
|
|
12
14
|
formatMessage
|
|
13
15
|
} = useIntl();
|
|
16
|
+
const {
|
|
17
|
+
fireAnalyticsEvent
|
|
18
|
+
} = useBlockMenu();
|
|
14
19
|
const {
|
|
15
20
|
canMoveUp
|
|
16
21
|
} = useSharedPluginStateWithSelector(api, ['blockControls'], ({
|
|
@@ -22,6 +27,15 @@ const MoveUpDropdownItemContent = ({
|
|
|
22
27
|
};
|
|
23
28
|
});
|
|
24
29
|
const handleClick = () => {
|
|
30
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
31
|
+
action: ACTION.CLICKED,
|
|
32
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
33
|
+
actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
|
|
34
|
+
eventType: EVENT_TYPE.UI,
|
|
35
|
+
attributes: {
|
|
36
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
37
|
+
}
|
|
38
|
+
});
|
|
25
39
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
26
40
|
tr
|
|
27
41
|
}) => {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, createContext, useContext } from 'react';
|
|
2
2
|
var BlockMenuContext = /*#__PURE__*/createContext({
|
|
3
|
-
onDropdownOpenChanged: function onDropdownOpenChanged() {}
|
|
3
|
+
onDropdownOpenChanged: function onDropdownOpenChanged() {},
|
|
4
|
+
fireAnalyticsEvent: function fireAnalyticsEvent() {}
|
|
4
5
|
});
|
|
5
6
|
export var useBlockMenu = function useBlockMenu() {
|
|
6
7
|
var context = useContext(BlockMenuContext);
|
|
@@ -24,9 +25,14 @@ export var BlockMenuProvider = function BlockMenuProvider(_ref) {
|
|
|
24
25
|
}, 1);
|
|
25
26
|
}
|
|
26
27
|
}, [api]);
|
|
28
|
+
var fireAnalyticsEvent = useCallback(function (payload) {
|
|
29
|
+
var _api$analytics;
|
|
30
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
|
|
31
|
+
}, [api]);
|
|
27
32
|
return /*#__PURE__*/React.createElement(BlockMenuContext.Provider, {
|
|
28
33
|
value: {
|
|
29
|
-
onDropdownOpenChanged: onDropdownOpenChanged
|
|
34
|
+
onDropdownOpenChanged: onDropdownOpenChanged,
|
|
35
|
+
fireAnalyticsEvent: fireAnalyticsEvent
|
|
30
36
|
}
|
|
31
37
|
}, children);
|
|
32
38
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import "./block-menu.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React, { useContext, useEffect } from 'react';
|
|
4
|
+
import React, { useContext, useEffect, useRef } from 'react';
|
|
5
5
|
import { injectIntl } from 'react-intl-next';
|
|
6
6
|
import { cx } from '@atlaskit/css';
|
|
7
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
7
8
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
8
9
|
import { DRAG_HANDLE_SELECTOR, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
|
|
9
10
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -68,8 +69,10 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
68
69
|
isMenuOpen = _useSharedPluginState.isMenuOpen,
|
|
69
70
|
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
70
71
|
var _useBlockMenu = useBlockMenu(),
|
|
71
|
-
onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged
|
|
72
|
+
onDropdownOpenChanged = _useBlockMenu.onDropdownOpenChanged,
|
|
73
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
72
74
|
var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
75
|
+
var prevIsMenuOpenRef = useRef(false);
|
|
73
76
|
var hasFocus = expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? (_ref3 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef) !== null && _ref3 !== void 0 ? _ref3 : false : (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
74
77
|
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
75
78
|
|
|
@@ -81,8 +84,23 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
81
84
|
if (!isMenuOpen || !menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !shouldShowBlockMenuForEmptyLine || ['resizing', 'dragging'].includes(currentUserIntent || '')) {
|
|
82
85
|
return;
|
|
83
86
|
}
|
|
87
|
+
|
|
88
|
+
// Fire analytics event when block menu opens (only on first transition from closed to open)
|
|
89
|
+
if (!prevIsMenuOpenRef.current && isMenuOpen) {
|
|
90
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
91
|
+
action: ACTION.OPENED,
|
|
92
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU,
|
|
93
|
+
eventType: EVENT_TYPE.UI,
|
|
94
|
+
attributes: {
|
|
95
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Update the previous state
|
|
101
|
+
prevIsMenuOpenRef.current = isMenuOpen;
|
|
84
102
|
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('blockMenuOpen'));
|
|
85
|
-
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent]);
|
|
103
|
+
}, [api, isMenuOpen, menuTriggerBy, isSelectedViaDragHandle, hasFocus, shouldShowBlockMenuForEmptyLine, currentUserIntent, fireAnalyticsEvent]);
|
|
86
104
|
if (!isMenuOpen) {
|
|
87
105
|
return null;
|
|
88
106
|
}
|
|
@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
3
|
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; }
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
6
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
6
7
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
7
8
|
import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
|
|
8
9
|
import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
|
|
@@ -13,6 +14,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
|
13
14
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
14
15
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
15
16
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
16
18
|
var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
|
|
17
19
|
return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
|
|
18
20
|
};
|
|
@@ -20,8 +22,20 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
20
22
|
var api = _ref.api;
|
|
21
23
|
var _useIntl = useIntl(),
|
|
22
24
|
formatMessage = _useIntl.formatMessage;
|
|
25
|
+
var _useBlockMenu = useBlockMenu(),
|
|
26
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
23
27
|
var copyHandler = function copyHandler(event) {
|
|
24
28
|
var _api$selection;
|
|
29
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
30
|
+
action: ACTION.CLICKED,
|
|
31
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
32
|
+
actionSubjectId: ACTION_SUBJECT_ID.COPY_BLOCK,
|
|
33
|
+
eventType: EVENT_TYPE.UI,
|
|
34
|
+
attributes: {
|
|
35
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
25
39
|
// prevent click event from bubbling up to the ancestor elements
|
|
26
40
|
event.stopPropagation();
|
|
27
41
|
// get the current selection
|
|
@@ -45,12 +59,12 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
45
59
|
fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || Fragment.empty;
|
|
46
60
|
}
|
|
47
61
|
|
|
48
|
-
// if text is inside of an expand, the selection contains an expand for some reason
|
|
49
|
-
// the expandNode always and only have one child, no matter how much contents are inside the expand,
|
|
62
|
+
// if text is inside of an expand or extension, the selection contains an expand or extension for some reason
|
|
63
|
+
// the expandNode or extensionNode always and only have one child, no matter how much contents are inside the expand or extension,
|
|
50
64
|
// and the one child is the line that is being selected, so we can use the .firstChild again
|
|
51
|
-
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && fragment.firstChild.type.name === 'expand') {
|
|
52
|
-
var
|
|
53
|
-
var actualNodeToCopy =
|
|
65
|
+
if ((_fragment2 = fragment) !== null && _fragment2 !== void 0 && _fragment2.firstChild && (fragment.firstChild.type.name === 'expand' || fragment.firstChild.type.name === 'bodiedExtension' && fg('platform_editor_block_menu_patch_2'))) {
|
|
66
|
+
var expandOrExtensionNode = fragment.firstChild;
|
|
67
|
+
var actualNodeToCopy = expandOrExtensionNode.firstChild;
|
|
54
68
|
fragment = Fragment.from(actualNodeToCopy) || Fragment.empty;
|
|
55
69
|
}
|
|
56
70
|
var domNode = toDOMFromFragment(fragment, schema);
|
|
@@ -101,9 +115,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
101
115
|
elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
|
|
102
116
|
label: ""
|
|
103
117
|
}),
|
|
104
|
-
onClick:
|
|
105
|
-
return copyHandler(e);
|
|
106
|
-
}
|
|
118
|
+
onClick: copyHandler
|
|
107
119
|
}, text);
|
|
108
120
|
};
|
|
109
121
|
export default injectIntl(CopyBlockMenuItem);
|
package/dist/esm/ui/copy-link.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
4
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
5
6
|
import LinkIcon from '@atlaskit/icon/core/link';
|
|
6
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
7
9
|
import { copyLink } from './utils/copyLink';
|
|
8
10
|
import { isNestedNode } from './utils/isNestedNode';
|
|
9
11
|
var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
@@ -11,7 +13,18 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
11
13
|
config = _ref.config;
|
|
12
14
|
var _useIntl = useIntl(),
|
|
13
15
|
formatMessage = _useIntl.formatMessage;
|
|
16
|
+
var _useBlockMenu = useBlockMenu(),
|
|
17
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
14
18
|
var handleClick = useCallback(function () {
|
|
19
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
20
|
+
action: ACTION.CLICKED,
|
|
21
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
22
|
+
actionSubjectId: ACTION_SUBJECT_ID.COPY_LINK_TO_BLOCK,
|
|
23
|
+
eventType: EVENT_TYPE.UI,
|
|
24
|
+
attributes: {
|
|
25
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
26
|
+
}
|
|
27
|
+
});
|
|
15
28
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
16
29
|
var _api$blockControls;
|
|
17
30
|
var tr = _ref2.tr;
|
|
@@ -24,7 +37,7 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
24
37
|
});
|
|
25
38
|
api === null || api === void 0 || api.core.actions.focus();
|
|
26
39
|
return copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api);
|
|
27
|
-
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api]);
|
|
40
|
+
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockQueryParam, api, fireAnalyticsEvent]);
|
|
28
41
|
var checkIsNestedNode = useCallback(function () {
|
|
29
42
|
var _api$selection, _api$blockControls2;
|
|
30
43
|
var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
4
5
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -9,13 +10,25 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
|
9
10
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Box } from '@atlaskit/primitives/box';
|
|
11
12
|
import Text from '@atlaskit/primitives/text';
|
|
13
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
12
14
|
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
13
15
|
var _api$core$sharedState;
|
|
14
16
|
var api = _ref.api;
|
|
15
17
|
var _useIntl = useIntl(),
|
|
16
18
|
formatMessage = _useIntl.formatMessage;
|
|
19
|
+
var _useBlockMenu = useBlockMenu(),
|
|
20
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
17
21
|
var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
|
|
18
22
|
var onClick = function onClick() {
|
|
23
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
24
|
+
action: ACTION.CLICKED,
|
|
25
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
26
|
+
actionSubjectId: ACTION_SUBJECT_ID.DELETE_BLOCK,
|
|
27
|
+
eventType: EVENT_TYPE.UI,
|
|
28
|
+
attributes: {
|
|
29
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
30
|
+
}
|
|
31
|
+
});
|
|
19
32
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
20
33
|
var _api$blockControls;
|
|
21
34
|
var tr = _ref2.tr;
|
|
@@ -1,21 +1,36 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
1
|
+
import React, { useMemo, useCallback } from 'react';
|
|
2
2
|
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { messages } from '@atlaskit/editor-common/block-menu';
|
|
4
5
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
6
7
|
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
7
8
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
8
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
9
11
|
import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
|
|
10
12
|
export var FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
11
13
|
var api = _ref.api,
|
|
12
14
|
children = _ref.children;
|
|
13
15
|
var _useIntl = useIntl(),
|
|
14
16
|
formatMessage = _useIntl.formatMessage;
|
|
17
|
+
var _useBlockMenu = useBlockMenu(),
|
|
18
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
15
19
|
var text = fg('platform_editor_block_menu_patch_1') ? formatMessage(blockMenuMessages.turnInto) : formatMessage(messages.turnInto);
|
|
16
20
|
var isDisabled = useMemo(function () {
|
|
17
21
|
return fg('platform_editor_block_menu_for_disabled_nodes') ? checkIsFormatMenuHidden(api) : false;
|
|
18
22
|
}, [api]);
|
|
23
|
+
var handleClick = useCallback(function () {
|
|
24
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
25
|
+
action: ACTION.CLICKED,
|
|
26
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
27
|
+
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_MENU,
|
|
28
|
+
eventType: EVENT_TYPE.UI,
|
|
29
|
+
attributes: {
|
|
30
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
}, [fireAnalyticsEvent]);
|
|
19
34
|
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
|
|
20
35
|
text: text,
|
|
21
36
|
elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
|
|
@@ -25,6 +40,7 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
|
25
40
|
label: ""
|
|
26
41
|
}),
|
|
27
42
|
enableMaxHeight: true,
|
|
28
|
-
isDisabled: isDisabled
|
|
43
|
+
isDisabled: isDisabled,
|
|
44
|
+
onClick: handleClick
|
|
29
45
|
}, children);
|
|
30
46
|
};
|
package/dist/esm/ui/move-down.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
5
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { DIRECTION } from '@atlaskit/editor-common/types';
|
|
6
7
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
7
8
|
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
9
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
8
10
|
var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
|
|
9
11
|
var api = _ref.api;
|
|
10
12
|
var _useIntl = useIntl(),
|
|
11
13
|
formatMessage = _useIntl.formatMessage;
|
|
14
|
+
var _useBlockMenu = useBlockMenu(),
|
|
15
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
12
16
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
|
|
13
17
|
var _blockControlsState$b;
|
|
14
18
|
var blockControlsState = _ref2.blockControlsState;
|
|
@@ -18,6 +22,15 @@ var MoveDownDropdownItemContent = function MoveDownDropdownItemContent(_ref) {
|
|
|
18
22
|
}),
|
|
19
23
|
canMoveDown = _useSharedPluginState.canMoveDown;
|
|
20
24
|
var handleClick = function handleClick() {
|
|
25
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
26
|
+
action: ACTION.CLICKED,
|
|
27
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
28
|
+
actionSubjectId: ACTION_SUBJECT_ID.MOVE_DOWN_BLOCK,
|
|
29
|
+
eventType: EVENT_TYPE.UI,
|
|
30
|
+
attributes: {
|
|
31
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
32
|
+
}
|
|
33
|
+
});
|
|
21
34
|
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
22
35
|
var _api$blockControls, _api$blockControls2;
|
|
23
36
|
var tr = _ref3.tr;
|
package/dist/esm/ui/move-up.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useIntl, injectIntl } from 'react-intl-next';
|
|
3
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
5
|
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
6
|
import { DIRECTION } from '@atlaskit/editor-common/types';
|
|
6
7
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
7
8
|
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
9
|
+
import { useBlockMenu } from './block-menu-provider';
|
|
8
10
|
var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
|
|
9
11
|
var api = _ref.api;
|
|
10
12
|
var _useIntl = useIntl(),
|
|
11
13
|
formatMessage = _useIntl.formatMessage;
|
|
14
|
+
var _useBlockMenu = useBlockMenu(),
|
|
15
|
+
fireAnalyticsEvent = _useBlockMenu.fireAnalyticsEvent;
|
|
12
16
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls'], function (_ref2) {
|
|
13
17
|
var _blockControlsState$b;
|
|
14
18
|
var blockControlsState = _ref2.blockControlsState;
|
|
@@ -18,6 +22,15 @@ var MoveUpDropdownItemContent = function MoveUpDropdownItemContent(_ref) {
|
|
|
18
22
|
}),
|
|
19
23
|
canMoveUp = _useSharedPluginState.canMoveUp;
|
|
20
24
|
var handleClick = function handleClick() {
|
|
25
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
|
|
26
|
+
action: ACTION.CLICKED,
|
|
27
|
+
actionSubject: ACTION_SUBJECT.BLOCK_MENU_ITEM,
|
|
28
|
+
actionSubjectId: ACTION_SUBJECT_ID.MOVE_UP_BLOCK,
|
|
29
|
+
eventType: EVENT_TYPE.UI,
|
|
30
|
+
attributes: {
|
|
31
|
+
inputMethod: INPUT_METHOD.MOUSE
|
|
32
|
+
}
|
|
33
|
+
});
|
|
21
34
|
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
22
35
|
var _api$blockControls, _api$blockControls2;
|
|
23
36
|
var tr = _ref3.tr;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
2
3
|
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
4
|
import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
4
5
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
|
16
17
|
OptionalPlugin<BlockControlsPlugin>,
|
|
17
18
|
OptionalPlugin<UserIntentPlugin>,
|
|
18
19
|
OptionalPlugin<SelectionPlugin>,
|
|
19
|
-
OptionalPlugin<DecorationsPlugin
|
|
20
|
+
OptionalPlugin<DecorationsPlugin>,
|
|
21
|
+
OptionalPlugin<AnalyticsPlugin>
|
|
20
22
|
];
|
|
21
23
|
pluginConfiguration?: BlockMenuPluginOptions;
|
|
22
24
|
sharedState: BlockMenuSharedState;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
4
|
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
4
5
|
type BlockMenuProviderProps = {
|
|
5
6
|
api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
};
|
|
9
|
+
type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
|
|
8
10
|
export type BlockMenuContextType = {
|
|
11
|
+
fireAnalyticsEvent?: FireAnalyticsEvent;
|
|
9
12
|
/**
|
|
10
13
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
11
14
|
*
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { NextEditorPlugin, OptionalPlugin, EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
2
3
|
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
4
|
import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
4
5
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
@@ -16,7 +17,8 @@ export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
|
16
17
|
OptionalPlugin<BlockControlsPlugin>,
|
|
17
18
|
OptionalPlugin<UserIntentPlugin>,
|
|
18
19
|
OptionalPlugin<SelectionPlugin>,
|
|
19
|
-
OptionalPlugin<DecorationsPlugin
|
|
20
|
+
OptionalPlugin<DecorationsPlugin>,
|
|
21
|
+
OptionalPlugin<AnalyticsPlugin>
|
|
20
22
|
];
|
|
21
23
|
pluginConfiguration?: BlockMenuPluginOptions;
|
|
22
24
|
sharedState: BlockMenuSharedState;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { BlockMenuEventPayload } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
4
|
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
4
5
|
type BlockMenuProviderProps = {
|
|
5
6
|
api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
};
|
|
9
|
+
type FireAnalyticsEvent = (payload: BlockMenuEventPayload) => void | undefined;
|
|
8
10
|
export type BlockMenuContextType = {
|
|
11
|
+
fireAnalyticsEvent?: FireAnalyticsEvent;
|
|
9
12
|
/**
|
|
10
13
|
* Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
|
|
11
14
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-menu",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.9",
|
|
4
4
|
"description": "BlockMenu plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/css": "^0.14.0",
|
|
32
32
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
33
|
-
"@atlaskit/editor-plugin-block-controls": "^6.
|
|
33
|
+
"@atlaskit/editor-plugin-block-controls": "^6.4.0",
|
|
34
34
|
"@atlaskit/editor-plugin-decorations": "^5.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-selection": "^5.0.0",
|
|
36
36
|
"@atlaskit/editor-plugin-user-intent": "^3.0.0",
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
"@atlaskit/icon-lab": "^5.7.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
44
|
"@atlaskit/primitives": "^14.15.0",
|
|
45
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
45
|
+
"@atlaskit/tmp-editor-statsig": "^12.31.0",
|
|
46
46
|
"@atlaskit/tokens": "^6.3.0",
|
|
47
47
|
"@babel/runtime": "^7.0.0"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
|
-
"@atlaskit/editor-common": "^109.
|
|
50
|
+
"@atlaskit/editor-common": "^109.16.0",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
53
53
|
},
|
|
@@ -102,6 +102,9 @@
|
|
|
102
102
|
},
|
|
103
103
|
"platform_editor_block_menu_for_disabled_nodes": {
|
|
104
104
|
"type": "boolean"
|
|
105
|
+
},
|
|
106
|
+
"platform_editor_block_menu_patch_2": {
|
|
107
|
+
"type": "boolean"
|
|
105
108
|
}
|
|
106
109
|
}
|
|
107
110
|
}
|