@atlaskit/editor-plugin-block-menu 5.0.22 → 5.0.24
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 +14 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-jira/tsconfig.json +3 -0
- package/afm-products/tsconfig.json +3 -0
- package/dist/cjs/blockMenuPlugin.js +12 -3
- package/dist/cjs/blockMenuPluginType.js +19 -1
- package/dist/cjs/editor-commands/formatNode.js +1 -5
- package/dist/cjs/pm-plugins/main.js +7 -11
- package/dist/cjs/ui/copy-link.js +13 -1
- package/dist/cjs/ui/flag.js +59 -0
- package/dist/cjs/ui/utils/checkIsFormatMenuHidden.js +8 -22
- package/dist/es2019/blockMenuPlugin.js +13 -4
- package/dist/es2019/blockMenuPluginType.js +18 -1
- package/dist/es2019/editor-commands/formatNode.js +1 -5
- package/dist/es2019/pm-plugins/main.js +7 -12
- package/dist/es2019/ui/copy-link.js +14 -1
- package/dist/es2019/ui/flag.js +57 -0
- package/dist/es2019/ui/utils/checkIsFormatMenuHidden.js +8 -22
- package/dist/esm/blockMenuPlugin.js +13 -4
- package/dist/esm/blockMenuPluginType.js +18 -1
- package/dist/esm/editor-commands/formatNode.js +1 -5
- package/dist/esm/pm-plugins/main.js +7 -11
- package/dist/esm/ui/copy-link.js +13 -1
- package/dist/esm/ui/flag.js +50 -0
- package/dist/esm/ui/utils/checkIsFormatMenuHidden.js +8 -22
- package/dist/types/blockMenuPluginType.d.ts +7 -0
- package/dist/types/pm-plugins/main.d.ts +4 -1
- package/dist/types/ui/flag.d.ts +8 -0
- package/dist/types-ts4.5/blockMenuPluginType.d.ts +7 -0
- package/dist/types-ts4.5/pm-plugins/main.d.ts +4 -1
- package/dist/types-ts4.5/ui/flag.d.ts +8 -0
- package/package.json +3 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-menu
|
|
2
2
|
|
|
3
|
+
## 5.0.24
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 5.0.23
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`01a138be1a16d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/01a138be1a16d) -
|
|
14
|
+
Clean up platform_editor_block_menu_expand_format
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 5.0.22
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
package/afm-jira/tsconfig.json
CHANGED
|
@@ -13,6 +13,7 @@ var _main = require("./pm-plugins/main");
|
|
|
13
13
|
var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
|
|
14
14
|
var _blockMenuComponents = require("./ui/block-menu-components");
|
|
15
15
|
var _blockMenuProvider = require("./ui/block-menu-provider");
|
|
16
|
+
var _flag = require("./ui/flag");
|
|
16
17
|
var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
17
18
|
var api = _ref.api,
|
|
18
19
|
config = _ref.config;
|
|
@@ -46,17 +47,23 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
|
46
47
|
}
|
|
47
48
|
},
|
|
48
49
|
getSharedState: function getSharedState(editorState) {
|
|
49
|
-
var _api$blockControls;
|
|
50
|
+
var _api$blockControls, _pluginState$showFlag;
|
|
50
51
|
if (!editorState) {
|
|
51
52
|
return {
|
|
52
|
-
currentSelectedNodeName: undefined
|
|
53
|
+
currentSelectedNodeName: undefined,
|
|
54
|
+
showFlag: false
|
|
53
55
|
};
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
// Get the menuTriggerBy from blockControls plugin if available
|
|
57
59
|
var currentSelectedNodeName = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
|
|
60
|
+
|
|
61
|
+
// Get the showFlag from plugin state
|
|
62
|
+
var pluginState = _main.blockMenuPluginKey.getState(editorState);
|
|
63
|
+
var showFlag = (_pluginState$showFlag = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showFlag) !== null && _pluginState$showFlag !== void 0 ? _pluginState$showFlag : false;
|
|
58
64
|
return {
|
|
59
|
-
currentSelectedNodeName: currentSelectedNodeName
|
|
65
|
+
currentSelectedNodeName: currentSelectedNodeName,
|
|
66
|
+
showFlag: showFlag
|
|
60
67
|
};
|
|
61
68
|
},
|
|
62
69
|
contentComponent: function contentComponent(_ref2) {
|
|
@@ -72,6 +79,8 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
|
72
79
|
mountTo: popupsMountPoint,
|
|
73
80
|
boundariesElement: popupsBoundariesElement,
|
|
74
81
|
scrollableElement: popupsScrollableElement
|
|
82
|
+
}), /*#__PURE__*/_react.default.createElement(_flag.Flag, {
|
|
83
|
+
api: api
|
|
75
84
|
}));
|
|
76
85
|
}
|
|
77
86
|
};
|
|
@@ -2,4 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
|
-
});
|
|
5
|
+
});
|
|
6
|
+
exports.FLAG_ID = void 0;
|
|
7
|
+
var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
|
|
8
|
+
FLAG_ID["LINK_COPIED_TO_CLIPBOARD"] = "link-copied-to-clipboard";
|
|
9
|
+
return FLAG_ID;
|
|
10
|
+
}({});
|
|
11
|
+
/**
|
|
12
|
+
* The relationship between BlockMenuItem, BlockMenuSection, BlockMenuNested
|
|
13
|
+
* BlockMenuSection can have BlockMenuItem or BlockMenuNested as children
|
|
14
|
+
* BlockMenuNested can have BlockMenuSection as children,
|
|
15
|
+
* BlockMenuNested, with BlockMenuSection and BlockMenuItem, is a nested menu
|
|
16
|
+
* _______________________________________
|
|
17
|
+
* | Block menu (no typing)
|
|
18
|
+
* | |BlockMenuSection
|
|
19
|
+
* | | |BlockMenuItem
|
|
20
|
+
* | | |BlockMenuNested
|
|
21
|
+
* | | | |BlockMenuSection
|
|
22
|
+
* | | | | |BlockMenuItem
|
|
23
|
+
*/
|
|
@@ -8,7 +8,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
8
8
|
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
9
9
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
10
10
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
11
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
11
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
13
12
|
var _selection = require("./selection");
|
|
14
13
|
var _layoutTransforms = require("./transforms/layout-transforms");
|
|
@@ -146,10 +145,7 @@ var formatNode = exports.formatNode = function formatNode(api) {
|
|
|
146
145
|
return newTr;
|
|
147
146
|
} else {
|
|
148
147
|
var _newTr = formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
|
|
149
|
-
var allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection];
|
|
150
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
151
|
-
allowedNodes.push(nodes.expand);
|
|
152
|
-
}
|
|
148
|
+
var allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection, nodes.expand];
|
|
153
149
|
var _sourceTypeName = 'paragraph';
|
|
154
150
|
var conversionSource;
|
|
155
151
|
var containerNode = (0, _utils.findParentNodeOfType)(allowedNodes)(selection);
|
|
@@ -7,25 +7,21 @@ exports.createPlugin = exports.blockMenuPluginKey = void 0;
|
|
|
7
7
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
8
8
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
9
9
|
var blockMenuPluginKey = exports.blockMenuPluginKey = new _state.PluginKey('blockMenuPlugin');
|
|
10
|
-
|
|
11
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
12
|
-
|
|
13
10
|
var createPlugin = exports.createPlugin = function createPlugin() {
|
|
14
11
|
return new _safePlugin.SafePlugin({
|
|
15
12
|
key: blockMenuPluginKey,
|
|
16
13
|
state: {
|
|
17
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
18
14
|
init: function init() {
|
|
19
|
-
return {
|
|
15
|
+
return {
|
|
16
|
+
showFlag: false
|
|
17
|
+
};
|
|
20
18
|
},
|
|
21
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
22
|
-
|
|
23
19
|
apply: function apply(tr, currentPluginState) {
|
|
20
|
+
var _meta$showFlag;
|
|
24
21
|
var meta = tr.getMeta(blockMenuPluginKey);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
return currentPluginState;
|
|
22
|
+
return {
|
|
23
|
+
showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : currentPluginState.showFlag
|
|
24
|
+
};
|
|
29
25
|
}
|
|
30
26
|
}
|
|
31
27
|
});
|
package/dist/cjs/ui/copy-link.js
CHANGED
|
@@ -13,6 +13,8 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
13
13
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
14
|
var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
|
|
15
15
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
|
+
var _blockMenuPluginType = require("../blockMenuPluginType");
|
|
17
|
+
var _main = require("../pm-plugins/main");
|
|
16
18
|
var _blockMenuProvider = require("./block-menu-provider");
|
|
17
19
|
var _consts = require("./consts");
|
|
18
20
|
var _copyLink = require("./utils/copyLink");
|
|
@@ -48,7 +50,17 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
48
50
|
return tr;
|
|
49
51
|
});
|
|
50
52
|
onDropdownOpenChanged(false);
|
|
51
|
-
|
|
53
|
+
(0, _copyLink.copyLink)(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api).then(function (success) {
|
|
54
|
+
if (success) {
|
|
55
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
56
|
+
var tr = _ref3.tr;
|
|
57
|
+
tr.setMeta(_main.blockMenuPluginKey, {
|
|
58
|
+
showFlag: _blockMenuPluginType.FLAG_ID.LINK_COPIED_TO_CLIPBOARD
|
|
59
|
+
});
|
|
60
|
+
return tr;
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
});
|
|
52
64
|
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api, onDropdownOpenChanged]);
|
|
53
65
|
var checkIsNestedNode = (0, _react.useCallback)(function () {
|
|
54
66
|
var _api$selection2, _api$blockControls2;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Flag = void 0;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _reactIntlNext = require("react-intl-next");
|
|
12
|
+
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
13
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
14
|
+
var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
|
|
15
|
+
var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/core/check-circle"));
|
|
16
|
+
var _blockMenuPluginType = require("../blockMenuPluginType");
|
|
17
|
+
var _main = require("../pm-plugins/main");
|
|
18
|
+
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
|
+
var flagMap = (0, _defineProperty2.default)({}, _blockMenuPluginType.FLAG_ID.LINK_COPIED_TO_CLIPBOARD, {
|
|
20
|
+
title: _messages.blockMenuMessages.linkCopiedToClipboard,
|
|
21
|
+
autoDismiss: true
|
|
22
|
+
});
|
|
23
|
+
var Flag = exports.Flag = function Flag(_ref) {
|
|
24
|
+
var api = _ref.api;
|
|
25
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockMenu'], function (states) {
|
|
26
|
+
var _states$blockMenuStat;
|
|
27
|
+
return {
|
|
28
|
+
showFlag: (_states$blockMenuStat = states.blockMenuState) === null || _states$blockMenuStat === void 0 ? void 0 : _states$blockMenuStat.showFlag
|
|
29
|
+
};
|
|
30
|
+
}),
|
|
31
|
+
showFlag = _useSharedPluginState.showFlag;
|
|
32
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
33
|
+
formatMessage = _useIntl.formatMessage;
|
|
34
|
+
if (!showFlag) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
var title = flagMap[showFlag].title;
|
|
38
|
+
var onDismissed = function onDismissed() {
|
|
39
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
40
|
+
var tr = _ref2.tr;
|
|
41
|
+
tr.setMeta(_main.blockMenuPluginKey, {
|
|
42
|
+
showFlag: false
|
|
43
|
+
});
|
|
44
|
+
return tr;
|
|
45
|
+
});
|
|
46
|
+
api === null || api === void 0 || api.core.actions.focus();
|
|
47
|
+
};
|
|
48
|
+
var FlagComponent = flagMap[showFlag].autoDismiss ? _flag.AutoDismissFlag : _flag.default;
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, /*#__PURE__*/_react.default.createElement(FlagComponent, {
|
|
50
|
+
onDismissed: onDismissed,
|
|
51
|
+
title: formatMessage(title),
|
|
52
|
+
id: showFlag,
|
|
53
|
+
testId: showFlag,
|
|
54
|
+
icon: /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
|
|
55
|
+
label: "",
|
|
56
|
+
color: "var(--ds-icon-success, #6A9A23)"
|
|
57
|
+
})
|
|
58
|
+
}));
|
|
59
|
+
};
|
|
@@ -5,27 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.checkIsFormatMenuHidden = void 0;
|
|
7
7
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
8
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
10
8
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
11
|
-
var _isNestedNode = require("./isNestedNode");
|
|
12
9
|
var TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES = true;
|
|
13
|
-
var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema
|
|
10
|
+
var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema) {
|
|
14
11
|
var nodes = schema.nodes;
|
|
15
12
|
if (!nodes) {
|
|
16
13
|
return false;
|
|
17
14
|
}
|
|
18
|
-
var isNested = (0, _isNestedNode.isNestedNode)(selection, menuTriggerBy);
|
|
19
15
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
20
16
|
var disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
21
17
|
var disabledNode = (0, _utils.findSelectedNodeOfType)(disabledOnNodes)(selection);
|
|
22
|
-
return !!disabledNode
|
|
18
|
+
return !!disabledNode;
|
|
23
19
|
}
|
|
24
20
|
var content;
|
|
25
|
-
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
26
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
27
|
-
allowedNodes.push(nodes.expand);
|
|
28
|
-
}
|
|
21
|
+
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
29
22
|
var selectedNode = (0, _utils.findSelectedNodeOfType)(allowedNodes)(selection);
|
|
30
23
|
if (selectedNode) {
|
|
31
24
|
content = selectedNode.node;
|
|
@@ -35,31 +28,24 @@ var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, me
|
|
|
35
28
|
content = listTypeOrBlockQuoteNode.node;
|
|
36
29
|
}
|
|
37
30
|
}
|
|
38
|
-
return !content
|
|
31
|
+
return !content;
|
|
39
32
|
};
|
|
40
|
-
var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema
|
|
33
|
+
var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema) {
|
|
41
34
|
var nodes = schema.nodes;
|
|
42
35
|
if (!nodes) {
|
|
43
36
|
return false;
|
|
44
37
|
}
|
|
45
|
-
var isNested = (0, _isNestedNode.isNestedNode)(selection, menuTriggerBy);
|
|
46
38
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
47
39
|
var disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
48
40
|
var disabledNode = (0, _utils.findSelectedNodeOfType)(disabledOnNodes)(selection);
|
|
49
|
-
return !!disabledNode
|
|
41
|
+
return !!disabledNode;
|
|
50
42
|
}
|
|
51
43
|
if (selection.empty || selection.content().size === 0) {
|
|
52
44
|
// if empty selection, show format menu
|
|
53
45
|
return false;
|
|
54
|
-
} else if (isNested && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_transform_nested_node')) {
|
|
55
|
-
// if nested, always hide format menu unless feature gate is enabled
|
|
56
|
-
return true;
|
|
57
46
|
} else {
|
|
58
47
|
var content;
|
|
59
|
-
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
60
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
61
|
-
allowedNodes.push(nodes.expand);
|
|
62
|
-
}
|
|
48
|
+
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
63
49
|
var selectedNode = (0, _utils.findSelectedNodeOfType)(allowedNodes)(selection);
|
|
64
50
|
if (selectedNode) {
|
|
65
51
|
content = selectedNode.node;
|
|
@@ -80,5 +66,5 @@ var checkIsFormatMenuHidden = exports.checkIsFormatMenuHidden = function checkIs
|
|
|
80
66
|
if (!selection || !schema || !menuTriggerBy) {
|
|
81
67
|
return false;
|
|
82
68
|
}
|
|
83
|
-
return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema
|
|
69
|
+
return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema) : getIsFormatMenuHidden(selection, schema);
|
|
84
70
|
};
|
|
@@ -2,10 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import { createBlockMenuRegistry } from './editor-actions';
|
|
3
3
|
import { formatNode } from './editor-commands/formatNode';
|
|
4
4
|
import { transformNode } from './editor-commands/transformNode';
|
|
5
|
-
import { createPlugin } from './pm-plugins/main';
|
|
5
|
+
import { blockMenuPluginKey, createPlugin } from './pm-plugins/main';
|
|
6
6
|
import BlockMenu from './ui/block-menu';
|
|
7
7
|
import { getBlockMenuComponents } from './ui/block-menu-components';
|
|
8
8
|
import { BlockMenuProvider } from './ui/block-menu-provider';
|
|
9
|
+
import { Flag } from './ui/flag';
|
|
9
10
|
export const blockMenuPlugin = ({
|
|
10
11
|
api,
|
|
11
12
|
config
|
|
@@ -40,17 +41,23 @@ export const blockMenuPlugin = ({
|
|
|
40
41
|
}
|
|
41
42
|
},
|
|
42
43
|
getSharedState(editorState) {
|
|
43
|
-
var _api$blockControls, _api$blockControls$sh;
|
|
44
|
+
var _api$blockControls, _api$blockControls$sh, _pluginState$showFlag;
|
|
44
45
|
if (!editorState) {
|
|
45
46
|
return {
|
|
46
|
-
currentSelectedNodeName: undefined
|
|
47
|
+
currentSelectedNodeName: undefined,
|
|
48
|
+
showFlag: false
|
|
47
49
|
};
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
// Get the menuTriggerBy from blockControls plugin if available
|
|
51
53
|
const currentSelectedNodeName = api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$sh = _api$blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.menuTriggerBy;
|
|
54
|
+
|
|
55
|
+
// Get the showFlag from plugin state
|
|
56
|
+
const pluginState = blockMenuPluginKey.getState(editorState);
|
|
57
|
+
const showFlag = (_pluginState$showFlag = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showFlag) !== null && _pluginState$showFlag !== void 0 ? _pluginState$showFlag : false;
|
|
52
58
|
return {
|
|
53
|
-
currentSelectedNodeName
|
|
59
|
+
currentSelectedNodeName,
|
|
60
|
+
showFlag
|
|
54
61
|
};
|
|
55
62
|
},
|
|
56
63
|
contentComponent({
|
|
@@ -67,6 +74,8 @@ export const blockMenuPlugin = ({
|
|
|
67
74
|
mountTo: popupsMountPoint,
|
|
68
75
|
boundariesElement: popupsBoundariesElement,
|
|
69
76
|
scrollableElement: popupsScrollableElement
|
|
77
|
+
}), /*#__PURE__*/React.createElement(Flag, {
|
|
78
|
+
api: api
|
|
70
79
|
}));
|
|
71
80
|
}
|
|
72
81
|
};
|
|
@@ -1 +1,18 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export let FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
|
|
2
|
+
FLAG_ID["LINK_COPIED_TO_CLIPBOARD"] = "link-copied-to-clipboard";
|
|
3
|
+
return FLAG_ID;
|
|
4
|
+
}({});
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The relationship between BlockMenuItem, BlockMenuSection, BlockMenuNested
|
|
8
|
+
* BlockMenuSection can have BlockMenuItem or BlockMenuNested as children
|
|
9
|
+
* BlockMenuNested can have BlockMenuSection as children,
|
|
10
|
+
* BlockMenuNested, with BlockMenuSection and BlockMenuItem, is a nested menu
|
|
11
|
+
* _______________________________________
|
|
12
|
+
* | Block menu (no typing)
|
|
13
|
+
* | |BlockMenuSection
|
|
14
|
+
* | | |BlockMenuItem
|
|
15
|
+
* | | |BlockMenuNested
|
|
16
|
+
* | | | |BlockMenuSection
|
|
17
|
+
* | | | | |BlockMenuItem
|
|
18
|
+
*/
|
|
@@ -2,7 +2,6 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
|
|
|
2
2
|
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
3
3
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
5
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
5
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
7
6
|
import { setSelectionAfterTransform } from './selection';
|
|
8
7
|
import { createDefaultLayoutSection } from './transforms/layout-transforms';
|
|
@@ -151,10 +150,7 @@ export const formatNode = api => (targetType, analyticsAttrs) => {
|
|
|
151
150
|
return newTr;
|
|
152
151
|
} else {
|
|
153
152
|
const newTr = formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
|
|
154
|
-
const allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection];
|
|
155
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
156
|
-
allowedNodes.push(nodes.expand);
|
|
157
|
-
}
|
|
153
|
+
const allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection, nodes.expand];
|
|
158
154
|
let sourceTypeName = 'paragraph';
|
|
159
155
|
let conversionSource;
|
|
160
156
|
const containerNode = findParentNodeOfType(allowedNodes)(selection);
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
export const blockMenuPluginKey = new PluginKey('blockMenuPlugin');
|
|
4
|
-
|
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
6
|
-
|
|
7
4
|
export const createPlugin = () => {
|
|
8
5
|
return new SafePlugin({
|
|
9
6
|
key: blockMenuPluginKey,
|
|
10
7
|
state: {
|
|
11
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
12
|
-
|
|
13
8
|
init() {
|
|
14
|
-
return {
|
|
9
|
+
return {
|
|
10
|
+
showFlag: false
|
|
11
|
+
};
|
|
15
12
|
},
|
|
16
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
17
|
-
|
|
18
13
|
apply: (tr, currentPluginState) => {
|
|
14
|
+
var _meta$showFlag;
|
|
19
15
|
const meta = tr.getMeta(blockMenuPluginKey);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
return currentPluginState;
|
|
16
|
+
return {
|
|
17
|
+
showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : currentPluginState.showFlag
|
|
18
|
+
};
|
|
24
19
|
}
|
|
25
20
|
}
|
|
26
21
|
});
|
|
@@ -5,6 +5,8 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
|
|
|
5
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import LinkIcon from '@atlaskit/icon/core/link';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { FLAG_ID } from '../blockMenuPluginType';
|
|
9
|
+
import { blockMenuPluginKey } from '../pm-plugins/main';
|
|
8
10
|
import { useBlockMenu } from './block-menu-provider';
|
|
9
11
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
10
12
|
import { copyLink } from './utils/copyLink';
|
|
@@ -43,7 +45,18 @@ const CopyLinkDropdownItemContent = ({
|
|
|
43
45
|
return tr;
|
|
44
46
|
});
|
|
45
47
|
onDropdownOpenChanged(false);
|
|
46
|
-
|
|
48
|
+
copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api).then(success => {
|
|
49
|
+
if (success) {
|
|
50
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
51
|
+
tr
|
|
52
|
+
}) => {
|
|
53
|
+
tr.setMeta(blockMenuPluginKey, {
|
|
54
|
+
showFlag: FLAG_ID.LINK_COPIED_TO_CLIPBOARD
|
|
55
|
+
});
|
|
56
|
+
return tr;
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
});
|
|
47
60
|
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api, onDropdownOpenChanged]);
|
|
48
61
|
const checkIsNestedNode = useCallback(() => {
|
|
49
62
|
var _api$selection2, _api$selection2$share, _api$selection2$share2, _api$blockControls2, _api$blockControls2$s, _api$blockControls2$s2;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl-next';
|
|
3
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import AkFlag, { FlagGroup, AutoDismissFlag } from '@atlaskit/flag';
|
|
6
|
+
import SuccessIcon from '@atlaskit/icon/core/check-circle';
|
|
7
|
+
import { FLAG_ID } from '../blockMenuPluginType';
|
|
8
|
+
import { blockMenuPluginKey } from '../pm-plugins/main';
|
|
9
|
+
const flagMap = {
|
|
10
|
+
[FLAG_ID.LINK_COPIED_TO_CLIPBOARD]: {
|
|
11
|
+
title: messages.linkCopiedToClipboard,
|
|
12
|
+
autoDismiss: true
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
export const Flag = ({
|
|
16
|
+
api
|
|
17
|
+
}) => {
|
|
18
|
+
const {
|
|
19
|
+
showFlag
|
|
20
|
+
} = useSharedPluginStateWithSelector(api, ['blockMenu'], states => {
|
|
21
|
+
var _states$blockMenuStat;
|
|
22
|
+
return {
|
|
23
|
+
showFlag: (_states$blockMenuStat = states.blockMenuState) === null || _states$blockMenuStat === void 0 ? void 0 : _states$blockMenuStat.showFlag
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
const {
|
|
27
|
+
formatMessage
|
|
28
|
+
} = useIntl();
|
|
29
|
+
if (!showFlag) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const {
|
|
33
|
+
title
|
|
34
|
+
} = flagMap[showFlag];
|
|
35
|
+
const onDismissed = () => {
|
|
36
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
37
|
+
tr
|
|
38
|
+
}) => {
|
|
39
|
+
tr.setMeta(blockMenuPluginKey, {
|
|
40
|
+
showFlag: false
|
|
41
|
+
});
|
|
42
|
+
return tr;
|
|
43
|
+
});
|
|
44
|
+
api === null || api === void 0 ? void 0 : api.core.actions.focus();
|
|
45
|
+
};
|
|
46
|
+
const FlagComponent = flagMap[showFlag].autoDismiss ? AutoDismissFlag : AkFlag;
|
|
47
|
+
return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(FlagComponent, {
|
|
48
|
+
onDismissed: onDismissed,
|
|
49
|
+
title: formatMessage(title),
|
|
50
|
+
id: showFlag,
|
|
51
|
+
testId: showFlag,
|
|
52
|
+
icon: /*#__PURE__*/React.createElement(SuccessIcon, {
|
|
53
|
+
label: "",
|
|
54
|
+
color: "var(--ds-icon-success, #6A9A23)"
|
|
55
|
+
})
|
|
56
|
+
}));
|
|
57
|
+
};
|
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
2
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
5
|
-
import { isNestedNode } from './isNestedNode';
|
|
6
3
|
const TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES = true;
|
|
7
|
-
const getIsFormatMenuHidden = (selection, schema
|
|
4
|
+
const getIsFormatMenuHidden = (selection, schema) => {
|
|
8
5
|
const nodes = schema.nodes;
|
|
9
6
|
if (!nodes) {
|
|
10
7
|
return false;
|
|
11
8
|
}
|
|
12
|
-
const isNested = isNestedNode(selection, menuTriggerBy);
|
|
13
9
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
14
10
|
const disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
15
11
|
const disabledNode = findSelectedNodeOfType(disabledOnNodes)(selection);
|
|
16
|
-
return !!disabledNode
|
|
12
|
+
return !!disabledNode;
|
|
17
13
|
}
|
|
18
14
|
let content;
|
|
19
|
-
const allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
20
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
21
|
-
allowedNodes.push(nodes.expand);
|
|
22
|
-
}
|
|
15
|
+
const allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
23
16
|
const selectedNode = findSelectedNodeOfType(allowedNodes)(selection);
|
|
24
17
|
if (selectedNode) {
|
|
25
18
|
content = selectedNode.node;
|
|
@@ -29,31 +22,24 @@ const getIsFormatMenuHidden = (selection, schema, menuTriggerBy) => {
|
|
|
29
22
|
content = listTypeOrBlockQuoteNode.node;
|
|
30
23
|
}
|
|
31
24
|
}
|
|
32
|
-
return !content
|
|
25
|
+
return !content;
|
|
33
26
|
};
|
|
34
|
-
const getIsFormatMenuHiddenEmptyLine = (selection, schema
|
|
27
|
+
const getIsFormatMenuHiddenEmptyLine = (selection, schema) => {
|
|
35
28
|
const nodes = schema.nodes;
|
|
36
29
|
if (!nodes) {
|
|
37
30
|
return false;
|
|
38
31
|
}
|
|
39
|
-
const isNested = isNestedNode(selection, menuTriggerBy);
|
|
40
32
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
41
33
|
const disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
42
34
|
const disabledNode = findSelectedNodeOfType(disabledOnNodes)(selection);
|
|
43
|
-
return !!disabledNode
|
|
35
|
+
return !!disabledNode;
|
|
44
36
|
}
|
|
45
37
|
if (selection.empty || selection.content().size === 0) {
|
|
46
38
|
// if empty selection, show format menu
|
|
47
39
|
return false;
|
|
48
|
-
} else if (isNested && !fg('platform_editor_block_menu_transform_nested_node')) {
|
|
49
|
-
// if nested, always hide format menu unless feature gate is enabled
|
|
50
|
-
return true;
|
|
51
40
|
} else {
|
|
52
41
|
let content;
|
|
53
|
-
const allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
54
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
55
|
-
allowedNodes.push(nodes.expand);
|
|
56
|
-
}
|
|
42
|
+
const allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
57
43
|
const selectedNode = findSelectedNodeOfType(allowedNodes)(selection);
|
|
58
44
|
if (selectedNode) {
|
|
59
45
|
content = selectedNode.node;
|
|
@@ -74,5 +60,5 @@ export const checkIsFormatMenuHidden = api => {
|
|
|
74
60
|
if (!selection || !schema || !menuTriggerBy) {
|
|
75
61
|
return false;
|
|
76
62
|
}
|
|
77
|
-
return expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema
|
|
63
|
+
return expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema) : getIsFormatMenuHidden(selection, schema);
|
|
78
64
|
};
|
|
@@ -2,10 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import { createBlockMenuRegistry } from './editor-actions';
|
|
3
3
|
import { formatNode as _formatNode } from './editor-commands/formatNode';
|
|
4
4
|
import { transformNode as _transformNode } from './editor-commands/transformNode';
|
|
5
|
-
import { createPlugin } from './pm-plugins/main';
|
|
5
|
+
import { blockMenuPluginKey, createPlugin } from './pm-plugins/main';
|
|
6
6
|
import BlockMenu from './ui/block-menu';
|
|
7
7
|
import { getBlockMenuComponents } from './ui/block-menu-components';
|
|
8
8
|
import { BlockMenuProvider } from './ui/block-menu-provider';
|
|
9
|
+
import { Flag } from './ui/flag';
|
|
9
10
|
export var blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
10
11
|
var api = _ref.api,
|
|
11
12
|
config = _ref.config;
|
|
@@ -39,17 +40,23 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
|
39
40
|
}
|
|
40
41
|
},
|
|
41
42
|
getSharedState: function getSharedState(editorState) {
|
|
42
|
-
var _api$blockControls;
|
|
43
|
+
var _api$blockControls, _pluginState$showFlag;
|
|
43
44
|
if (!editorState) {
|
|
44
45
|
return {
|
|
45
|
-
currentSelectedNodeName: undefined
|
|
46
|
+
currentSelectedNodeName: undefined,
|
|
47
|
+
showFlag: false
|
|
46
48
|
};
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
// Get the menuTriggerBy from blockControls plugin if available
|
|
50
52
|
var currentSelectedNodeName = api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.sharedState.currentState()) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.menuTriggerBy;
|
|
53
|
+
|
|
54
|
+
// Get the showFlag from plugin state
|
|
55
|
+
var pluginState = blockMenuPluginKey.getState(editorState);
|
|
56
|
+
var showFlag = (_pluginState$showFlag = pluginState === null || pluginState === void 0 ? void 0 : pluginState.showFlag) !== null && _pluginState$showFlag !== void 0 ? _pluginState$showFlag : false;
|
|
51
57
|
return {
|
|
52
|
-
currentSelectedNodeName: currentSelectedNodeName
|
|
58
|
+
currentSelectedNodeName: currentSelectedNodeName,
|
|
59
|
+
showFlag: showFlag
|
|
53
60
|
};
|
|
54
61
|
},
|
|
55
62
|
contentComponent: function contentComponent(_ref2) {
|
|
@@ -65,6 +72,8 @@ export var blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
|
65
72
|
mountTo: popupsMountPoint,
|
|
66
73
|
boundariesElement: popupsBoundariesElement,
|
|
67
74
|
scrollableElement: popupsScrollableElement
|
|
75
|
+
}), /*#__PURE__*/React.createElement(Flag, {
|
|
76
|
+
api: api
|
|
68
77
|
}));
|
|
69
78
|
}
|
|
70
79
|
};
|
|
@@ -1 +1,18 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export var FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
|
|
2
|
+
FLAG_ID["LINK_COPIED_TO_CLIPBOARD"] = "link-copied-to-clipboard";
|
|
3
|
+
return FLAG_ID;
|
|
4
|
+
}({});
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The relationship between BlockMenuItem, BlockMenuSection, BlockMenuNested
|
|
8
|
+
* BlockMenuSection can have BlockMenuItem or BlockMenuNested as children
|
|
9
|
+
* BlockMenuNested can have BlockMenuSection as children,
|
|
10
|
+
* BlockMenuNested, with BlockMenuSection and BlockMenuItem, is a nested menu
|
|
11
|
+
* _______________________________________
|
|
12
|
+
* | Block menu (no typing)
|
|
13
|
+
* | |BlockMenuSection
|
|
14
|
+
* | | |BlockMenuItem
|
|
15
|
+
* | | |BlockMenuNested
|
|
16
|
+
* | | | |BlockMenuSection
|
|
17
|
+
* | | | | |BlockMenuItem
|
|
18
|
+
*/
|
|
@@ -2,7 +2,6 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
|
|
|
2
2
|
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
3
3
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { findParentNodeOfType, findSelectedNodeOfType, safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
5
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
5
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
7
6
|
import { setSelectionAfterTransform } from './selection';
|
|
8
7
|
import { createDefaultLayoutSection } from './transforms/layout-transforms';
|
|
@@ -141,10 +140,7 @@ export var formatNode = function formatNode(api) {
|
|
|
141
140
|
return newTr;
|
|
142
141
|
} else {
|
|
143
142
|
var _newTr = formatNodeWhenSelectionEmpty(tr, targetType, nodePos, schema);
|
|
144
|
-
var allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection];
|
|
145
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
146
|
-
allowedNodes.push(nodes.expand);
|
|
147
|
-
}
|
|
143
|
+
var allowedNodes = [nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.layoutSection, nodes.expand];
|
|
148
144
|
var _sourceTypeName = 'paragraph';
|
|
149
145
|
var conversionSource;
|
|
150
146
|
var containerNode = findParentNodeOfType(allowedNodes)(selection);
|
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
export var blockMenuPluginKey = new PluginKey('blockMenuPlugin');
|
|
4
|
-
|
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
6
|
-
|
|
7
4
|
export var createPlugin = function createPlugin() {
|
|
8
5
|
return new SafePlugin({
|
|
9
6
|
key: blockMenuPluginKey,
|
|
10
7
|
state: {
|
|
11
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
12
8
|
init: function init() {
|
|
13
|
-
return {
|
|
9
|
+
return {
|
|
10
|
+
showFlag: false
|
|
11
|
+
};
|
|
14
12
|
},
|
|
15
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
16
|
-
|
|
17
13
|
apply: function apply(tr, currentPluginState) {
|
|
14
|
+
var _meta$showFlag;
|
|
18
15
|
var meta = tr.getMeta(blockMenuPluginKey);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
return currentPluginState;
|
|
16
|
+
return {
|
|
17
|
+
showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : currentPluginState.showFlag
|
|
18
|
+
};
|
|
23
19
|
}
|
|
24
20
|
}
|
|
25
21
|
});
|
package/dist/esm/ui/copy-link.js
CHANGED
|
@@ -5,6 +5,8 @@ import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages'
|
|
|
5
5
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import LinkIcon from '@atlaskit/icon/core/link';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { FLAG_ID } from '../blockMenuPluginType';
|
|
9
|
+
import { blockMenuPluginKey } from '../pm-plugins/main';
|
|
8
10
|
import { useBlockMenu } from './block-menu-provider';
|
|
9
11
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
10
12
|
import { copyLink } from './utils/copyLink';
|
|
@@ -39,7 +41,17 @@ var CopyLinkDropdownItemContent = function CopyLinkDropdownItemContent(_ref) {
|
|
|
39
41
|
return tr;
|
|
40
42
|
});
|
|
41
43
|
onDropdownOpenChanged(false);
|
|
42
|
-
|
|
44
|
+
copyLink(config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api).then(function (success) {
|
|
45
|
+
if (success) {
|
|
46
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
47
|
+
var tr = _ref3.tr;
|
|
48
|
+
tr.setMeta(blockMenuPluginKey, {
|
|
49
|
+
showFlag: FLAG_ID.LINK_COPIED_TO_CLIPBOARD
|
|
50
|
+
});
|
|
51
|
+
return tr;
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
});
|
|
43
55
|
}, [config === null || config === void 0 ? void 0 : config.getLinkPath, config === null || config === void 0 ? void 0 : config.blockLinkHashPrefix, api, onDropdownOpenChanged]);
|
|
44
56
|
var checkIsNestedNode = useCallback(function () {
|
|
45
57
|
var _api$selection2, _api$blockControls2;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
4
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
|
+
import { blockMenuMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
+
import AkFlag, { FlagGroup, AutoDismissFlag } from '@atlaskit/flag';
|
|
7
|
+
import SuccessIcon from '@atlaskit/icon/core/check-circle';
|
|
8
|
+
import { FLAG_ID } from '../blockMenuPluginType';
|
|
9
|
+
import { blockMenuPluginKey } from '../pm-plugins/main';
|
|
10
|
+
var flagMap = _defineProperty({}, FLAG_ID.LINK_COPIED_TO_CLIPBOARD, {
|
|
11
|
+
title: messages.linkCopiedToClipboard,
|
|
12
|
+
autoDismiss: true
|
|
13
|
+
});
|
|
14
|
+
export var Flag = function Flag(_ref) {
|
|
15
|
+
var api = _ref.api;
|
|
16
|
+
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockMenu'], function (states) {
|
|
17
|
+
var _states$blockMenuStat;
|
|
18
|
+
return {
|
|
19
|
+
showFlag: (_states$blockMenuStat = states.blockMenuState) === null || _states$blockMenuStat === void 0 ? void 0 : _states$blockMenuStat.showFlag
|
|
20
|
+
};
|
|
21
|
+
}),
|
|
22
|
+
showFlag = _useSharedPluginState.showFlag;
|
|
23
|
+
var _useIntl = useIntl(),
|
|
24
|
+
formatMessage = _useIntl.formatMessage;
|
|
25
|
+
if (!showFlag) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
var title = flagMap[showFlag].title;
|
|
29
|
+
var onDismissed = function onDismissed() {
|
|
30
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
31
|
+
var tr = _ref2.tr;
|
|
32
|
+
tr.setMeta(blockMenuPluginKey, {
|
|
33
|
+
showFlag: false
|
|
34
|
+
});
|
|
35
|
+
return tr;
|
|
36
|
+
});
|
|
37
|
+
api === null || api === void 0 || api.core.actions.focus();
|
|
38
|
+
};
|
|
39
|
+
var FlagComponent = flagMap[showFlag].autoDismiss ? AutoDismissFlag : AkFlag;
|
|
40
|
+
return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(FlagComponent, {
|
|
41
|
+
onDismissed: onDismissed,
|
|
42
|
+
title: formatMessage(title),
|
|
43
|
+
id: showFlag,
|
|
44
|
+
testId: showFlag,
|
|
45
|
+
icon: /*#__PURE__*/React.createElement(SuccessIcon, {
|
|
46
|
+
label: "",
|
|
47
|
+
color: "var(--ds-icon-success, #6A9A23)"
|
|
48
|
+
})
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
2
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
5
|
-
import { isNestedNode } from './isNestedNode';
|
|
6
3
|
var TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES = true;
|
|
7
|
-
var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema
|
|
4
|
+
var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema) {
|
|
8
5
|
var nodes = schema.nodes;
|
|
9
6
|
if (!nodes) {
|
|
10
7
|
return false;
|
|
11
8
|
}
|
|
12
|
-
var isNested = isNestedNode(selection, menuTriggerBy);
|
|
13
9
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
14
10
|
var disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
15
11
|
var disabledNode = findSelectedNodeOfType(disabledOnNodes)(selection);
|
|
16
|
-
return !!disabledNode
|
|
12
|
+
return !!disabledNode;
|
|
17
13
|
}
|
|
18
14
|
var content;
|
|
19
|
-
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
20
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
21
|
-
allowedNodes.push(nodes.expand);
|
|
22
|
-
}
|
|
15
|
+
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
23
16
|
var selectedNode = findSelectedNodeOfType(allowedNodes)(selection);
|
|
24
17
|
if (selectedNode) {
|
|
25
18
|
content = selectedNode.node;
|
|
@@ -29,31 +22,24 @@ var getIsFormatMenuHidden = function getIsFormatMenuHidden(selection, schema, me
|
|
|
29
22
|
content = listTypeOrBlockQuoteNode.node;
|
|
30
23
|
}
|
|
31
24
|
}
|
|
32
|
-
return !content
|
|
25
|
+
return !content;
|
|
33
26
|
};
|
|
34
|
-
var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema
|
|
27
|
+
var getIsFormatMenuHiddenEmptyLine = function getIsFormatMenuHiddenEmptyLine(selection, schema) {
|
|
35
28
|
var nodes = schema.nodes;
|
|
36
29
|
if (!nodes) {
|
|
37
30
|
return false;
|
|
38
31
|
}
|
|
39
|
-
var isNested = isNestedNode(selection, menuTriggerBy);
|
|
40
32
|
if (TRANSFORM_MENU_ENABLED_FOR_ALL_TOP_LEVEL_NODES) {
|
|
41
33
|
var disabledOnNodes = [nodes.syncBlock, nodes.bodiedSyncBlock, nodes.rule];
|
|
42
34
|
var disabledNode = findSelectedNodeOfType(disabledOnNodes)(selection);
|
|
43
|
-
return !!disabledNode
|
|
35
|
+
return !!disabledNode;
|
|
44
36
|
}
|
|
45
37
|
if (selection.empty || selection.content().size === 0) {
|
|
46
38
|
// if empty selection, show format menu
|
|
47
39
|
return false;
|
|
48
|
-
} else if (isNested && !fg('platform_editor_block_menu_transform_nested_node')) {
|
|
49
|
-
// if nested, always hide format menu unless feature gate is enabled
|
|
50
|
-
return true;
|
|
51
40
|
} else {
|
|
52
41
|
var content;
|
|
53
|
-
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection];
|
|
54
|
-
if (expValEquals('platform_editor_block_menu_expand_format', 'isEnabled', true)) {
|
|
55
|
-
allowedNodes.push(nodes.expand);
|
|
56
|
-
}
|
|
42
|
+
var allowedNodes = [nodes.paragraph, nodes.heading, nodes.blockquote, nodes.panel, nodes.codeBlock, nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.layoutSection, nodes.expand];
|
|
57
43
|
var selectedNode = findSelectedNodeOfType(allowedNodes)(selection);
|
|
58
44
|
if (selectedNode) {
|
|
59
45
|
content = selectedNode.node;
|
|
@@ -74,5 +60,5 @@ export var checkIsFormatMenuHidden = function checkIsFormatMenuHidden(api) {
|
|
|
74
60
|
if (!selection || !schema || !menuTriggerBy) {
|
|
75
61
|
return false;
|
|
76
62
|
}
|
|
77
|
-
return expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema
|
|
63
|
+
return expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true) ? getIsFormatMenuHiddenEmptyLine(selection, schema) : getIsFormatMenuHidden(selection, schema);
|
|
78
64
|
};
|
|
@@ -6,6 +6,9 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
|
6
6
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
7
7
|
import type { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import type { FormatNodeTargetType, FormatNodeAnalyticsAttrs } from './editor-commands/transforms/types';
|
|
9
|
+
export declare enum FLAG_ID {
|
|
10
|
+
LINK_COPIED_TO_CLIPBOARD = "link-copied-to-clipboard"
|
|
11
|
+
}
|
|
9
12
|
type FormatNodeCommand = (targetType: FormatNodeTargetType, analyticsAttrs?: FormatNodeAnalyticsAttrs) => EditorCommand;
|
|
10
13
|
type TransformNodeCommand = (targetType: NodeType, analyticsAttrs?: FormatNodeAnalyticsAttrs) => EditorCommand;
|
|
11
14
|
export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
@@ -45,6 +48,10 @@ export type BlockMenuSharedState = {
|
|
|
45
48
|
* This exposes the menuTriggerBy value from blockControls plugin
|
|
46
49
|
*/
|
|
47
50
|
currentSelectedNodeName: string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Whether to show a flag (e.g. for copy confirmation)
|
|
53
|
+
*/
|
|
54
|
+
showFlag: FLAG_ID | false;
|
|
48
55
|
} | undefined;
|
|
49
56
|
type WithRank<T> = T & {
|
|
50
57
|
rank: number;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import type { FLAG_ID } from '../blockMenuPluginType';
|
|
3
4
|
export declare const blockMenuPluginKey: PluginKey<any>;
|
|
4
|
-
type BlockMenuPluginState = {
|
|
5
|
+
type BlockMenuPluginState = {
|
|
6
|
+
showFlag: FLAG_ID | false;
|
|
7
|
+
};
|
|
5
8
|
export declare const createPlugin: () => SafePlugin<BlockMenuPluginState>;
|
|
6
9
|
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
4
|
+
type Props = {
|
|
5
|
+
api?: ExtractInjectionAPI<BlockMenuPlugin>;
|
|
6
|
+
};
|
|
7
|
+
export declare const Flag: ({ api }: Props) => React.JSX.Element | undefined;
|
|
8
|
+
export {};
|
|
@@ -6,6 +6,9 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
|
6
6
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
7
7
|
import type { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import type { FormatNodeTargetType, FormatNodeAnalyticsAttrs } from './editor-commands/transforms/types';
|
|
9
|
+
export declare enum FLAG_ID {
|
|
10
|
+
LINK_COPIED_TO_CLIPBOARD = "link-copied-to-clipboard"
|
|
11
|
+
}
|
|
9
12
|
type FormatNodeCommand = (targetType: FormatNodeTargetType, analyticsAttrs?: FormatNodeAnalyticsAttrs) => EditorCommand;
|
|
10
13
|
type TransformNodeCommand = (targetType: NodeType, analyticsAttrs?: FormatNodeAnalyticsAttrs) => EditorCommand;
|
|
11
14
|
export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
@@ -45,6 +48,10 @@ export type BlockMenuSharedState = {
|
|
|
45
48
|
* This exposes the menuTriggerBy value from blockControls plugin
|
|
46
49
|
*/
|
|
47
50
|
currentSelectedNodeName: string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Whether to show a flag (e.g. for copy confirmation)
|
|
53
|
+
*/
|
|
54
|
+
showFlag: FLAG_ID | false;
|
|
48
55
|
} | undefined;
|
|
49
56
|
type WithRank<T> = T & {
|
|
50
57
|
rank: number;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
import type { FLAG_ID } from '../blockMenuPluginType';
|
|
3
4
|
export declare const blockMenuPluginKey: PluginKey<any>;
|
|
4
|
-
type BlockMenuPluginState = {
|
|
5
|
+
type BlockMenuPluginState = {
|
|
6
|
+
showFlag: FLAG_ID | false;
|
|
7
|
+
};
|
|
5
8
|
export declare const createPlugin: () => SafePlugin<BlockMenuPluginState>;
|
|
6
9
|
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
4
|
+
type Props = {
|
|
5
|
+
api?: ExtractInjectionAPI<BlockMenuPlugin>;
|
|
6
|
+
};
|
|
7
|
+
export declare const Flag: ({ api }: Props) => React.JSX.Element | undefined;
|
|
8
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-menu",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.24",
|
|
4
4
|
"description": "BlockMenu plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
39
39
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
40
40
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
41
|
-
"@atlaskit/editor-toolbar": "^0.
|
|
41
|
+
"@atlaskit/editor-toolbar": "^0.18.0",
|
|
42
|
+
"@atlaskit/flag": "^17.5.0",
|
|
42
43
|
"@atlaskit/icon": "^29.0.0",
|
|
43
44
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
45
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
@@ -92,9 +93,6 @@
|
|
|
92
93
|
"platform_editor_adf_with_localid": {
|
|
93
94
|
"type": "boolean"
|
|
94
95
|
},
|
|
95
|
-
"platform_editor_block_menu_transform_nested_node": {
|
|
96
|
-
"type": "boolean"
|
|
97
|
-
},
|
|
98
96
|
"platform_editor_toolbar_aifc_user_intent_fix": {
|
|
99
97
|
"type": "boolean"
|
|
100
98
|
}
|