@atlaskit/editor-plugin-block-menu 0.0.0 → 0.0.1
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 +10 -0
- package/afm-cc/tsconfig.json +27 -0
- package/afm-dev-agents/tsconfig.json +51 -0
- package/afm-jira/tsconfig.json +51 -0
- package/afm-post-office/tsconfig.json +51 -0
- package/afm-rovo-extension/tsconfig.json +51 -0
- package/afm-townsquare/tsconfig.json +51 -0
- package/dist/cjs/blockMenuPlugin.js +18 -1
- package/dist/cjs/ui/block-menu.compiled.css +3 -0
- package/dist/cjs/ui/block-menu.js +150 -0
- package/dist/es2019/blockMenuPlugin.js +19 -1
- package/dist/es2019/ui/block-menu.compiled.css +3 -0
- package/dist/es2019/ui/block-menu.js +142 -0
- package/dist/esm/blockMenuPlugin.js +17 -1
- package/dist/esm/ui/block-menu.compiled.css +3 -0
- package/dist/esm/ui/block-menu.js +141 -0
- package/dist/types/blockMenuPluginType.d.ts +6 -2
- package/dist/types/ui/block-menu.d.ts +16 -0
- package/dist/types-ts4.5/blockMenuPluginType.d.ts +9 -2
- package/dist/types-ts4.5/ui/block-menu.d.ts +16 -0
- package/package.json +13 -6
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# @atlaskit/editor-plugin-block-menu
|
|
2
|
+
|
|
3
|
+
## 0.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#196697](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/196697)
|
|
8
|
+
[`18b5fbc52627b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18b5fbc52627b) -
|
|
9
|
+
[ux] Adds block menu plugin for full-page preset and shows the menu when drag handle is clicked.
|
|
10
|
+
- Updated dependencies
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -17,6 +17,33 @@
|
|
|
17
17
|
"../src/**/examples.*"
|
|
18
18
|
],
|
|
19
19
|
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-cc/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-cc/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-cc/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-cc/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
|
|
46
|
+
},
|
|
20
47
|
{
|
|
21
48
|
"path": "../../editor-common/afm-cc/tsconfig.json"
|
|
22
49
|
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.dev-agents.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../dev-agents/tsDist/@atlaskit__editor-plugin-block-menu/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-dev-agents/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-dev-agents/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-dev-agents/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-dev-agents/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-dev-agents/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-dev-agents/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-dev-agents/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-dev-agents/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-dev-agents/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-common/afm-dev-agents/tsconfig.json"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.jira.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-block-menu/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-jira/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-jira/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-jira/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-jira/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-jira/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-common/afm-jira/tsconfig.json"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.post-office.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../post-office/tsDist/@atlaskit__editor-plugin-block-menu/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-post-office/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-post-office/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-post-office/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-post-office/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-post-office/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-post-office/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-common/afm-post-office/tsconfig.json"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.rovo-extension.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../rovo-extension/tsDist/@atlaskit__editor-plugin-block-menu/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-rovo-extension/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-rovo-extension/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-rovo-extension/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-rovo-extension/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-rovo-extension/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-rovo-extension/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-rovo-extension/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-rovo-extension/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.townsquare.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../townsquare/tsDist/@atlaskit__editor-plugin-block-menu/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*"
|
|
18
|
+
],
|
|
19
|
+
"references": [
|
|
20
|
+
{
|
|
21
|
+
"path": "../../../design-system/css/afm-townsquare/tsconfig.json"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"path": "../../../design-system/dropdown-menu/afm-townsquare/tsconfig.json"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"path": "../../editor-plugin-block-controls/afm-townsquare/tsconfig.json"
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"path": "../../editor-plugin-user-intent/afm-townsquare/tsconfig.json"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"path": "../../../design-system/icon-lab/afm-townsquare/tsconfig.json"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"path": "../../../design-system/primitives/afm-townsquare/tsconfig.json"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"path": "../../../design-system/tokens/afm-townsquare/tsconfig.json"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"path": "../../editor-common/afm-townsquare/tsconfig.json"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.blockMenuPlugin = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
9
|
var _main = require("./pm-plugins/main");
|
|
8
|
-
var
|
|
10
|
+
var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
|
|
11
|
+
var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
12
|
+
var api = _ref.api;
|
|
9
13
|
return {
|
|
10
14
|
name: 'blockMenu',
|
|
11
15
|
pmPlugins: function pmPlugins() {
|
|
@@ -13,6 +17,19 @@ var blockMenuPlugin = exports.blockMenuPlugin = function blockMenuPlugin() {
|
|
|
13
17
|
name: 'blockMenuPlugin',
|
|
14
18
|
plugin: _main.createPlugin
|
|
15
19
|
}];
|
|
20
|
+
},
|
|
21
|
+
contentComponent: function contentComponent(_ref2) {
|
|
22
|
+
var editorView = _ref2.editorView,
|
|
23
|
+
popupsMountPoint = _ref2.popupsMountPoint,
|
|
24
|
+
popupsBoundariesElement = _ref2.popupsBoundariesElement,
|
|
25
|
+
popupsScrollableElement = _ref2.popupsScrollableElement;
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_blockMenu.default, {
|
|
27
|
+
editorView: editorView,
|
|
28
|
+
api: api,
|
|
29
|
+
mountTo: popupsMountPoint,
|
|
30
|
+
boundariesElement: popupsBoundariesElement,
|
|
31
|
+
scrollableElement: popupsScrollableElement
|
|
32
|
+
});
|
|
16
33
|
}
|
|
17
34
|
};
|
|
18
35
|
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
require("./block-menu.compiled.css");
|
|
11
|
+
var _runtime = require("@compiled/react/runtime");
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _reactIntlNext = require("react-intl-next");
|
|
14
|
+
var _css = require("@atlaskit/css");
|
|
15
|
+
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
|
|
16
|
+
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
17
|
+
var _ui = require("@atlaskit/editor-common/ui");
|
|
18
|
+
var _uiReact = require("@atlaskit/editor-common/ui-react");
|
|
19
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
20
|
+
var _jira = _interopRequireDefault(require("@atlaskit/icon-lab/core/jira"));
|
|
21
|
+
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
|
|
22
|
+
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
|
|
23
|
+
var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
|
|
24
|
+
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
|
|
25
|
+
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
26
|
+
var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
|
|
27
|
+
var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
|
|
28
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
29
|
+
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); }
|
|
30
|
+
var styles = {
|
|
31
|
+
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
32
|
+
};
|
|
33
|
+
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
|
|
34
|
+
var FormatDropdown = function FormatDropdown() {
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
|
|
36
|
+
placement: "right-start",
|
|
37
|
+
shouldFitContainer: true,
|
|
38
|
+
trigger: function trigger(_ref) {
|
|
39
|
+
var triggerRef = _ref.triggerRef,
|
|
40
|
+
ariaControls = _ref['aria-controls'],
|
|
41
|
+
ariaHasPopup = _ref['aria-haspopup'],
|
|
42
|
+
ariaExpanded = _ref['aria-expanded'];
|
|
43
|
+
return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
44
|
+
"aria-controls": ariaControls,
|
|
45
|
+
"aria-haspopup": ariaHasPopup,
|
|
46
|
+
"aria-expanded": ariaExpanded,
|
|
47
|
+
ref: triggerRef,
|
|
48
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
|
|
49
|
+
label: ""
|
|
50
|
+
}),
|
|
51
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
|
|
52
|
+
label: ""
|
|
53
|
+
})
|
|
54
|
+
}, "Format");
|
|
55
|
+
}
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
57
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_task.default, {
|
|
58
|
+
label: ""
|
|
59
|
+
})
|
|
60
|
+
}, "Action item"), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
61
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_listBulleted.default, {
|
|
62
|
+
label: ""
|
|
63
|
+
})
|
|
64
|
+
}, "Bullet list")));
|
|
65
|
+
};
|
|
66
|
+
var BlockMenuContent = function BlockMenuContent() {
|
|
67
|
+
var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
|
|
68
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
69
|
+
testId: "editor-block-menu",
|
|
70
|
+
ref: setOutsideClickTargetRef,
|
|
71
|
+
xcss: (0, _css.cx)(styles.base)
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(FormatDropdown, null), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
73
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_jira.default, {
|
|
74
|
+
label: ""
|
|
75
|
+
})
|
|
76
|
+
}, "Create Jira work item")), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
|
|
77
|
+
hasSeparator: true
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
79
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
|
|
80
|
+
label: ""
|
|
81
|
+
})
|
|
82
|
+
}, "Move up"), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
83
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
|
|
84
|
+
label: ""
|
|
85
|
+
})
|
|
86
|
+
}, "Move down")), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, {
|
|
87
|
+
hasSeparator: true
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
|
|
89
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
|
|
90
|
+
label: ""
|
|
91
|
+
})
|
|
92
|
+
}, "Delete")));
|
|
93
|
+
};
|
|
94
|
+
var BlockMenu = function BlockMenu(_ref2) {
|
|
95
|
+
var _editorView$hasFocus;
|
|
96
|
+
var editorView = _ref2.editorView,
|
|
97
|
+
api = _ref2.api,
|
|
98
|
+
mountTo = _ref2.mountTo,
|
|
99
|
+
boundariesElement = _ref2.boundariesElement,
|
|
100
|
+
scrollableElement = _ref2.scrollableElement;
|
|
101
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls', 'userIntent'], function (states) {
|
|
102
|
+
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
|
|
103
|
+
return {
|
|
104
|
+
menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
|
|
105
|
+
isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
|
|
106
|
+
isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
|
|
107
|
+
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
108
|
+
};
|
|
109
|
+
}),
|
|
110
|
+
menuTriggerBy = _useSharedPluginState.menuTriggerBy,
|
|
111
|
+
isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
|
|
112
|
+
isMenuOpen = _useSharedPluginState.isMenuOpen,
|
|
113
|
+
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
114
|
+
var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
115
|
+
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
116
|
+
if (!isMenuOpen) {
|
|
117
|
+
return null;
|
|
118
|
+
}
|
|
119
|
+
var closeMenu = function closeMenu() {
|
|
120
|
+
var _api$blockControls;
|
|
121
|
+
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
|
|
122
|
+
closeMenu: true
|
|
123
|
+
}));
|
|
124
|
+
};
|
|
125
|
+
if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
|
|
126
|
+
closeMenu();
|
|
127
|
+
return null;
|
|
128
|
+
}
|
|
129
|
+
var activeNodeSelector = menuTriggerBy && "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
|
|
130
|
+
var targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
131
|
+
if (targetHandleRef instanceof HTMLElement) {
|
|
132
|
+
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
|
|
133
|
+
alignX: 'left',
|
|
134
|
+
alignY: 'start',
|
|
135
|
+
handleClickOutside: closeMenu,
|
|
136
|
+
handleEscapeKeydown: closeMenu,
|
|
137
|
+
mountTo: mountTo,
|
|
138
|
+
boundariesElement: boundariesElement,
|
|
139
|
+
scrollableElement: scrollableElement,
|
|
140
|
+
target: targetHandleRef,
|
|
141
|
+
zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
|
|
142
|
+
forcePlacement: true,
|
|
143
|
+
stick: true,
|
|
144
|
+
offset: [-6, 8]
|
|
145
|
+
}, /*#__PURE__*/_react.default.createElement(BlockMenuContent, null));
|
|
146
|
+
} else {
|
|
147
|
+
return null;
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
var _default = exports.default = (0, _reactIntlNext.injectIntl)(BlockMenu);
|
|
@@ -1,10 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { createPlugin } from './pm-plugins/main';
|
|
2
|
-
|
|
3
|
+
import BlockMenu from './ui/block-menu';
|
|
4
|
+
export const blockMenuPlugin = ({
|
|
5
|
+
api
|
|
6
|
+
}) => ({
|
|
3
7
|
name: 'blockMenu',
|
|
4
8
|
pmPlugins() {
|
|
5
9
|
return [{
|
|
6
10
|
name: 'blockMenuPlugin',
|
|
7
11
|
plugin: createPlugin
|
|
8
12
|
}];
|
|
13
|
+
},
|
|
14
|
+
contentComponent({
|
|
15
|
+
editorView,
|
|
16
|
+
popupsMountPoint,
|
|
17
|
+
popupsBoundariesElement,
|
|
18
|
+
popupsScrollableElement
|
|
19
|
+
}) {
|
|
20
|
+
return /*#__PURE__*/React.createElement(BlockMenu, {
|
|
21
|
+
editorView: editorView,
|
|
22
|
+
api: api,
|
|
23
|
+
mountTo: popupsMountPoint,
|
|
24
|
+
boundariesElement: popupsBoundariesElement,
|
|
25
|
+
scrollableElement: popupsScrollableElement
|
|
26
|
+
});
|
|
9
27
|
}
|
|
10
28
|
});
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./block-menu.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React, { useContext } from 'react';
|
|
5
|
+
import { injectIntl } from 'react-intl-next';
|
|
6
|
+
import { cx } from '@atlaskit/css';
|
|
7
|
+
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
8
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
9
|
+
import { Popup } from '@atlaskit/editor-common/ui';
|
|
10
|
+
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
|
|
11
|
+
import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
12
|
+
import JiraIcon from '@atlaskit/icon-lab/core/jira';
|
|
13
|
+
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
14
|
+
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
15
|
+
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
16
|
+
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
17
|
+
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
18
|
+
import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
|
|
19
|
+
import TaskIcon from '@atlaskit/icon/core/task';
|
|
20
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
21
|
+
const styles = {
|
|
22
|
+
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
23
|
+
};
|
|
24
|
+
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
25
|
+
const FormatDropdown = () => {
|
|
26
|
+
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
27
|
+
placement: "right-start",
|
|
28
|
+
shouldFitContainer: true,
|
|
29
|
+
trigger: ({
|
|
30
|
+
triggerRef,
|
|
31
|
+
'aria-controls': ariaControls,
|
|
32
|
+
'aria-haspopup': ariaHasPopup,
|
|
33
|
+
'aria-expanded': ariaExpanded
|
|
34
|
+
}) => /*#__PURE__*/React.createElement(DropdownItem, {
|
|
35
|
+
"aria-controls": ariaControls,
|
|
36
|
+
"aria-haspopup": ariaHasPopup,
|
|
37
|
+
"aria-expanded": ariaExpanded,
|
|
38
|
+
ref: triggerRef,
|
|
39
|
+
elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
|
|
40
|
+
label: ""
|
|
41
|
+
}),
|
|
42
|
+
elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
|
|
43
|
+
label: ""
|
|
44
|
+
})
|
|
45
|
+
}, "Format")
|
|
46
|
+
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
47
|
+
elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
|
|
48
|
+
label: ""
|
|
49
|
+
})
|
|
50
|
+
}, "Action item"), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
51
|
+
elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
|
|
52
|
+
label: ""
|
|
53
|
+
})
|
|
54
|
+
}, "Bullet list")));
|
|
55
|
+
};
|
|
56
|
+
const BlockMenuContent = () => {
|
|
57
|
+
const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
|
|
58
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
59
|
+
testId: "editor-block-menu",
|
|
60
|
+
ref: setOutsideClickTargetRef,
|
|
61
|
+
xcss: cx(styles.base)
|
|
62
|
+
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(FormatDropdown, null), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
63
|
+
elemBefore: /*#__PURE__*/React.createElement(JiraIcon, {
|
|
64
|
+
label: ""
|
|
65
|
+
})
|
|
66
|
+
}, "Create Jira work item")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
|
|
67
|
+
hasSeparator: true
|
|
68
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
69
|
+
elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
|
|
70
|
+
label: ""
|
|
71
|
+
})
|
|
72
|
+
}, "Move up"), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
73
|
+
elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
74
|
+
label: ""
|
|
75
|
+
})
|
|
76
|
+
}, "Move down")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
|
|
77
|
+
hasSeparator: true
|
|
78
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
79
|
+
elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
80
|
+
label: ""
|
|
81
|
+
})
|
|
82
|
+
}, "Delete")));
|
|
83
|
+
};
|
|
84
|
+
const BlockMenu = ({
|
|
85
|
+
editorView,
|
|
86
|
+
api,
|
|
87
|
+
mountTo,
|
|
88
|
+
boundariesElement,
|
|
89
|
+
scrollableElement
|
|
90
|
+
}) => {
|
|
91
|
+
var _editorView$hasFocus;
|
|
92
|
+
const {
|
|
93
|
+
menuTriggerBy,
|
|
94
|
+
isSelectedViaDragHandle,
|
|
95
|
+
isMenuOpen,
|
|
96
|
+
currentUserIntent
|
|
97
|
+
} = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], states => {
|
|
98
|
+
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
|
|
99
|
+
return {
|
|
100
|
+
menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
|
|
101
|
+
isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
|
|
102
|
+
isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
|
|
103
|
+
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
104
|
+
};
|
|
105
|
+
});
|
|
106
|
+
const hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
107
|
+
const hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
108
|
+
if (!isMenuOpen) {
|
|
109
|
+
return null;
|
|
110
|
+
}
|
|
111
|
+
const closeMenu = () => {
|
|
112
|
+
var _api$blockControls;
|
|
113
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
|
|
114
|
+
closeMenu: true
|
|
115
|
+
}));
|
|
116
|
+
};
|
|
117
|
+
if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
|
|
118
|
+
closeMenu();
|
|
119
|
+
return null;
|
|
120
|
+
}
|
|
121
|
+
const activeNodeSelector = menuTriggerBy && `[data-drag-handler-anchor-name=${menuTriggerBy}]`;
|
|
122
|
+
const targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
123
|
+
if (targetHandleRef instanceof HTMLElement) {
|
|
124
|
+
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
125
|
+
alignX: 'left',
|
|
126
|
+
alignY: 'start',
|
|
127
|
+
handleClickOutside: closeMenu,
|
|
128
|
+
handleEscapeKeydown: closeMenu,
|
|
129
|
+
mountTo: mountTo,
|
|
130
|
+
boundariesElement: boundariesElement,
|
|
131
|
+
scrollableElement: scrollableElement,
|
|
132
|
+
target: targetHandleRef,
|
|
133
|
+
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
134
|
+
forcePlacement: true,
|
|
135
|
+
stick: true,
|
|
136
|
+
offset: [-6, 8]
|
|
137
|
+
}, /*#__PURE__*/React.createElement(BlockMenuContent, null));
|
|
138
|
+
} else {
|
|
139
|
+
return null;
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
export default injectIntl(BlockMenu);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { createPlugin } from './pm-plugins/main';
|
|
2
|
-
|
|
3
|
+
import BlockMenu from './ui/block-menu';
|
|
4
|
+
export var blockMenuPlugin = function blockMenuPlugin(_ref) {
|
|
5
|
+
var api = _ref.api;
|
|
3
6
|
return {
|
|
4
7
|
name: 'blockMenu',
|
|
5
8
|
pmPlugins: function pmPlugins() {
|
|
@@ -7,6 +10,19 @@ export var blockMenuPlugin = function blockMenuPlugin() {
|
|
|
7
10
|
name: 'blockMenuPlugin',
|
|
8
11
|
plugin: createPlugin
|
|
9
12
|
}];
|
|
13
|
+
},
|
|
14
|
+
contentComponent: function contentComponent(_ref2) {
|
|
15
|
+
var editorView = _ref2.editorView,
|
|
16
|
+
popupsMountPoint = _ref2.popupsMountPoint,
|
|
17
|
+
popupsBoundariesElement = _ref2.popupsBoundariesElement,
|
|
18
|
+
popupsScrollableElement = _ref2.popupsScrollableElement;
|
|
19
|
+
return /*#__PURE__*/React.createElement(BlockMenu, {
|
|
20
|
+
editorView: editorView,
|
|
21
|
+
api: api,
|
|
22
|
+
mountTo: popupsMountPoint,
|
|
23
|
+
boundariesElement: popupsBoundariesElement,
|
|
24
|
+
scrollableElement: popupsScrollableElement
|
|
25
|
+
});
|
|
10
26
|
}
|
|
11
27
|
};
|
|
12
28
|
};
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
|
|
2
|
+
import "./block-menu.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
+
import React, { useContext } from 'react';
|
|
5
|
+
import { injectIntl } from 'react-intl-next';
|
|
6
|
+
import { cx } from '@atlaskit/css';
|
|
7
|
+
import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
|
|
8
|
+
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
9
|
+
import { Popup } from '@atlaskit/editor-common/ui';
|
|
10
|
+
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
|
|
11
|
+
import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
12
|
+
import JiraIcon from '@atlaskit/icon-lab/core/jira';
|
|
13
|
+
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
14
|
+
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
15
|
+
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
16
|
+
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
17
|
+
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
18
|
+
import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
|
|
19
|
+
import TaskIcon from '@atlaskit/icon/core/task';
|
|
20
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
21
|
+
var styles = {
|
|
22
|
+
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
23
|
+
};
|
|
24
|
+
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
25
|
+
var FormatDropdown = function FormatDropdown() {
|
|
26
|
+
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
27
|
+
placement: "right-start",
|
|
28
|
+
shouldFitContainer: true,
|
|
29
|
+
trigger: function trigger(_ref) {
|
|
30
|
+
var triggerRef = _ref.triggerRef,
|
|
31
|
+
ariaControls = _ref['aria-controls'],
|
|
32
|
+
ariaHasPopup = _ref['aria-haspopup'],
|
|
33
|
+
ariaExpanded = _ref['aria-expanded'];
|
|
34
|
+
return /*#__PURE__*/React.createElement(DropdownItem, {
|
|
35
|
+
"aria-controls": ariaControls,
|
|
36
|
+
"aria-haspopup": ariaHasPopup,
|
|
37
|
+
"aria-expanded": ariaExpanded,
|
|
38
|
+
ref: triggerRef,
|
|
39
|
+
elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
|
|
40
|
+
label: ""
|
|
41
|
+
}),
|
|
42
|
+
elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
|
|
43
|
+
label: ""
|
|
44
|
+
})
|
|
45
|
+
}, "Format");
|
|
46
|
+
}
|
|
47
|
+
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
48
|
+
elemBefore: /*#__PURE__*/React.createElement(TaskIcon, {
|
|
49
|
+
label: ""
|
|
50
|
+
})
|
|
51
|
+
}, "Action item"), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
52
|
+
elemBefore: /*#__PURE__*/React.createElement(ListBulletedIcon, {
|
|
53
|
+
label: ""
|
|
54
|
+
})
|
|
55
|
+
}, "Bullet list")));
|
|
56
|
+
};
|
|
57
|
+
var BlockMenuContent = function BlockMenuContent() {
|
|
58
|
+
var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
|
|
59
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
60
|
+
testId: "editor-block-menu",
|
|
61
|
+
ref: setOutsideClickTargetRef,
|
|
62
|
+
xcss: cx(styles.base)
|
|
63
|
+
}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(FormatDropdown, null), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
64
|
+
elemBefore: /*#__PURE__*/React.createElement(JiraIcon, {
|
|
65
|
+
label: ""
|
|
66
|
+
})
|
|
67
|
+
}, "Create Jira work item")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
|
|
68
|
+
hasSeparator: true
|
|
69
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
70
|
+
elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
|
|
71
|
+
label: ""
|
|
72
|
+
})
|
|
73
|
+
}, "Move up"), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
74
|
+
elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
75
|
+
label: ""
|
|
76
|
+
})
|
|
77
|
+
}, "Move down")), /*#__PURE__*/React.createElement(DropdownItemGroup, {
|
|
78
|
+
hasSeparator: true
|
|
79
|
+
}, /*#__PURE__*/React.createElement(DropdownItem, {
|
|
80
|
+
elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
81
|
+
label: ""
|
|
82
|
+
})
|
|
83
|
+
}, "Delete")));
|
|
84
|
+
};
|
|
85
|
+
var BlockMenu = function BlockMenu(_ref2) {
|
|
86
|
+
var _editorView$hasFocus;
|
|
87
|
+
var editorView = _ref2.editorView,
|
|
88
|
+
api = _ref2.api,
|
|
89
|
+
mountTo = _ref2.mountTo,
|
|
90
|
+
boundariesElement = _ref2.boundariesElement,
|
|
91
|
+
scrollableElement = _ref2.scrollableElement;
|
|
92
|
+
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['blockControls', 'userIntent'], function (states) {
|
|
93
|
+
var _states$blockControls, _states$blockControls2, _states$blockControls3, _states$userIntentSta;
|
|
94
|
+
return {
|
|
95
|
+
menuTriggerBy: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.menuTriggerBy,
|
|
96
|
+
isSelectedViaDragHandle: (_states$blockControls2 = states.blockControlsState) === null || _states$blockControls2 === void 0 ? void 0 : _states$blockControls2.isSelectedViaDragHandle,
|
|
97
|
+
isMenuOpen: (_states$blockControls3 = states.blockControlsState) === null || _states$blockControls3 === void 0 ? void 0 : _states$blockControls3.isMenuOpen,
|
|
98
|
+
currentUserIntent: (_states$userIntentSta = states.userIntentState) === null || _states$userIntentSta === void 0 ? void 0 : _states$userIntentSta.currentUserIntent
|
|
99
|
+
};
|
|
100
|
+
}),
|
|
101
|
+
menuTriggerBy = _useSharedPluginState.menuTriggerBy,
|
|
102
|
+
isSelectedViaDragHandle = _useSharedPluginState.isSelectedViaDragHandle,
|
|
103
|
+
isMenuOpen = _useSharedPluginState.isMenuOpen,
|
|
104
|
+
currentUserIntent = _useSharedPluginState.currentUserIntent;
|
|
105
|
+
var hasFocus = (_editorView$hasFocus = editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) !== null && _editorView$hasFocus !== void 0 ? _editorView$hasFocus : false;
|
|
106
|
+
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
107
|
+
if (!isMenuOpen) {
|
|
108
|
+
return null;
|
|
109
|
+
}
|
|
110
|
+
var closeMenu = function closeMenu() {
|
|
111
|
+
var _api$blockControls;
|
|
112
|
+
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.commands.toggleBlockMenu({
|
|
113
|
+
closeMenu: true
|
|
114
|
+
}));
|
|
115
|
+
};
|
|
116
|
+
if (!menuTriggerBy || !isSelectedViaDragHandle || !hasFocus || !hasSelection || currentUserIntent === 'dragging') {
|
|
117
|
+
closeMenu();
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
var activeNodeSelector = menuTriggerBy && "[data-drag-handler-anchor-name=".concat(menuTriggerBy, "]");
|
|
121
|
+
var targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
122
|
+
if (targetHandleRef instanceof HTMLElement) {
|
|
123
|
+
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
124
|
+
alignX: 'left',
|
|
125
|
+
alignY: 'start',
|
|
126
|
+
handleClickOutside: closeMenu,
|
|
127
|
+
handleEscapeKeydown: closeMenu,
|
|
128
|
+
mountTo: mountTo,
|
|
129
|
+
boundariesElement: boundariesElement,
|
|
130
|
+
scrollableElement: scrollableElement,
|
|
131
|
+
target: targetHandleRef,
|
|
132
|
+
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
133
|
+
forcePlacement: true,
|
|
134
|
+
stick: true,
|
|
135
|
+
offset: [-6, 8]
|
|
136
|
+
}, /*#__PURE__*/React.createElement(BlockMenuContent, null));
|
|
137
|
+
} else {
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
export default injectIntl(BlockMenu);
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
-
|
|
1
|
+
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
|
+
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
4
|
+
export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
5
|
+
dependencies: [OptionalPlugin<BlockControlsPlugin>, OptionalPlugin<UserIntentPlugin>];
|
|
6
|
+
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
+
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
6
|
+
type BlockMenuProps = {
|
|
7
|
+
editorView: EditorView | undefined;
|
|
8
|
+
api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
|
|
9
|
+
mountTo?: HTMLElement;
|
|
10
|
+
boundariesElement?: HTMLElement;
|
|
11
|
+
scrollableElement?: HTMLElement;
|
|
12
|
+
};
|
|
13
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
|
|
14
|
+
WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
-
|
|
1
|
+
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
|
+
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
4
|
+
export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
|
|
5
|
+
dependencies: [
|
|
6
|
+
OptionalPlugin<BlockControlsPlugin>,
|
|
7
|
+
OptionalPlugin<UserIntentPlugin>
|
|
8
|
+
];
|
|
9
|
+
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { WrappedComponentProps } from 'react-intl-next';
|
|
3
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
|
+
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { BlockMenuPlugin } from '../blockMenuPluginType';
|
|
6
|
+
type BlockMenuProps = {
|
|
7
|
+
editorView: EditorView | undefined;
|
|
8
|
+
api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
|
|
9
|
+
mountTo?: HTMLElement;
|
|
10
|
+
boundariesElement?: HTMLElement;
|
|
11
|
+
scrollableElement?: HTMLElement;
|
|
12
|
+
};
|
|
13
|
+
declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
|
|
14
|
+
WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-menu",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "BlockMenu plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -31,15 +31,22 @@
|
|
|
31
31
|
".": "./src/index.ts"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
+
"@atlaskit/css": "^0.12.0",
|
|
35
|
+
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
36
|
+
"@atlaskit/editor-plugin-block-controls": "^4.1.0",
|
|
37
|
+
"@atlaskit/editor-plugin-user-intent": "^1.1.0",
|
|
34
38
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
39
|
+
"@atlaskit/editor-shared-styles": "^3.5.0",
|
|
40
|
+
"@atlaskit/icon": "^27.9.0",
|
|
41
|
+
"@atlaskit/icon-lab": "^5.3.0",
|
|
42
|
+
"@atlaskit/primitives": "^14.11.0",
|
|
43
|
+
"@atlaskit/tokens": "^6.0.0",
|
|
35
44
|
"@babel/runtime": "^7.0.0"
|
|
36
45
|
},
|
|
37
46
|
"peerDependencies": {
|
|
38
|
-
"@atlaskit/editor-common": "^107.
|
|
39
|
-
"react": "^18.2.0"
|
|
40
|
-
|
|
41
|
-
"devDependencies": {
|
|
42
|
-
"typescript": "~5.4.2"
|
|
47
|
+
"@atlaskit/editor-common": "^107.18.0",
|
|
48
|
+
"react": "^18.2.0",
|
|
49
|
+
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
43
50
|
},
|
|
44
51
|
"techstack": {
|
|
45
52
|
"@atlassian/frontend": {
|