@atlaskit/editor-plugin-block-menu 0.0.1 → 0.0.2
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
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-menu
|
|
2
2
|
|
|
3
|
+
## 0.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
|
|
8
|
+
[`53b66ca466092`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/53b66ca466092) -
|
|
9
|
+
ED-28963 Update block menu to be aligned with drag handle
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 0.0.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -30,6 +30,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
30
30
|
var styles = {
|
|
31
31
|
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
32
32
|
};
|
|
33
|
+
var DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
|
|
34
|
+
var DRAG_HANDLE_WIDTH = 12;
|
|
35
|
+
var DRAG_HANDLE_PADDING = 5;
|
|
33
36
|
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
|
|
34
37
|
var FormatDropdown = function FormatDropdown() {
|
|
35
38
|
return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
|
|
@@ -92,7 +95,7 @@ var BlockMenuContent = function BlockMenuContent() {
|
|
|
92
95
|
}, "Delete")));
|
|
93
96
|
};
|
|
94
97
|
var BlockMenu = function BlockMenu(_ref2) {
|
|
95
|
-
var _editorView$hasFocus;
|
|
98
|
+
var _editorView$hasFocus, _editorView$dom;
|
|
96
99
|
var editorView = _ref2.editorView,
|
|
97
100
|
api = _ref2.api,
|
|
98
101
|
mountTo = _ref2.mountTo,
|
|
@@ -126,8 +129,7 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
126
129
|
closeMenu();
|
|
127
130
|
return null;
|
|
128
131
|
}
|
|
129
|
-
var
|
|
130
|
-
var targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
132
|
+
var targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
131
133
|
if (targetHandleRef instanceof HTMLElement) {
|
|
132
134
|
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
|
|
133
135
|
alignX: 'left',
|
|
@@ -141,7 +143,7 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
141
143
|
zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
|
|
142
144
|
forcePlacement: true,
|
|
143
145
|
stick: true,
|
|
144
|
-
offset: [
|
|
146
|
+
offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
|
|
145
147
|
}, /*#__PURE__*/_react.default.createElement(BlockMenuContent, null));
|
|
146
148
|
} else {
|
|
147
149
|
return null;
|
|
@@ -21,6 +21,9 @@ import { Box } from '@atlaskit/primitives/compiled';
|
|
|
21
21
|
const styles = {
|
|
22
22
|
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
23
23
|
};
|
|
24
|
+
const DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
|
|
25
|
+
const DRAG_HANDLE_WIDTH = 12;
|
|
26
|
+
const DRAG_HANDLE_PADDING = 5;
|
|
24
27
|
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
25
28
|
const FormatDropdown = () => {
|
|
26
29
|
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
@@ -88,7 +91,7 @@ const BlockMenu = ({
|
|
|
88
91
|
boundariesElement,
|
|
89
92
|
scrollableElement
|
|
90
93
|
}) => {
|
|
91
|
-
var _editorView$hasFocus;
|
|
94
|
+
var _editorView$hasFocus, _editorView$dom;
|
|
92
95
|
const {
|
|
93
96
|
menuTriggerBy,
|
|
94
97
|
isSelectedViaDragHandle,
|
|
@@ -118,8 +121,7 @@ const BlockMenu = ({
|
|
|
118
121
|
closeMenu();
|
|
119
122
|
return null;
|
|
120
123
|
}
|
|
121
|
-
const
|
|
122
|
-
const targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
124
|
+
const targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
123
125
|
if (targetHandleRef instanceof HTMLElement) {
|
|
124
126
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
125
127
|
alignX: 'left',
|
|
@@ -133,7 +135,7 @@ const BlockMenu = ({
|
|
|
133
135
|
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
134
136
|
forcePlacement: true,
|
|
135
137
|
stick: true,
|
|
136
|
-
offset: [
|
|
138
|
+
offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
|
|
137
139
|
}, /*#__PURE__*/React.createElement(BlockMenuContent, null));
|
|
138
140
|
} else {
|
|
139
141
|
return null;
|
|
@@ -21,6 +21,9 @@ import { Box } from '@atlaskit/primitives/compiled';
|
|
|
21
21
|
var styles = {
|
|
22
22
|
base: "_2rkoglpi _bfhk1bhr _16qs1cd0"
|
|
23
23
|
};
|
|
24
|
+
var DRAG_HANDLE_SELECTOR = '[data-editor-block-ctrl-drag-handle=true]';
|
|
25
|
+
var DRAG_HANDLE_WIDTH = 12;
|
|
26
|
+
var DRAG_HANDLE_PADDING = 5;
|
|
24
27
|
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
25
28
|
var FormatDropdown = function FormatDropdown() {
|
|
26
29
|
return /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
@@ -83,7 +86,7 @@ var BlockMenuContent = function BlockMenuContent() {
|
|
|
83
86
|
}, "Delete")));
|
|
84
87
|
};
|
|
85
88
|
var BlockMenu = function BlockMenu(_ref2) {
|
|
86
|
-
var _editorView$hasFocus;
|
|
89
|
+
var _editorView$hasFocus, _editorView$dom;
|
|
87
90
|
var editorView = _ref2.editorView,
|
|
88
91
|
api = _ref2.api,
|
|
89
92
|
mountTo = _ref2.mountTo,
|
|
@@ -117,8 +120,7 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
117
120
|
closeMenu();
|
|
118
121
|
return null;
|
|
119
122
|
}
|
|
120
|
-
var
|
|
121
|
-
var targetHandleRef = activeNodeSelector ? document.querySelector(activeNodeSelector) : null;
|
|
123
|
+
var targetHandleRef = (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
122
124
|
if (targetHandleRef instanceof HTMLElement) {
|
|
123
125
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
124
126
|
alignX: 'left',
|
|
@@ -132,7 +134,7 @@ var BlockMenu = function BlockMenu(_ref2) {
|
|
|
132
134
|
zIndex: akEditorFloatingOverlapPanelZIndex,
|
|
133
135
|
forcePlacement: true,
|
|
134
136
|
stick: true,
|
|
135
|
-
offset: [
|
|
137
|
+
offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_PADDING, 0]
|
|
136
138
|
}, /*#__PURE__*/React.createElement(BlockMenuContent, null));
|
|
137
139
|
} else {
|
|
138
140
|
return null;
|
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.2",
|
|
4
4
|
"description": "BlockMenu plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"@atlaskit/editor-plugin-block-controls": "^4.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-user-intent": "^1.1.0",
|
|
38
38
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
39
|
-
"@atlaskit/editor-shared-styles": "^3.
|
|
40
|
-
"@atlaskit/icon": "^27.
|
|
41
|
-
"@atlaskit/icon-lab": "^5.
|
|
39
|
+
"@atlaskit/editor-shared-styles": "^3.6.0",
|
|
40
|
+
"@atlaskit/icon": "^27.11.0",
|
|
41
|
+
"@atlaskit/icon-lab": "^5.4.0",
|
|
42
42
|
"@atlaskit/primitives": "^14.11.0",
|
|
43
43
|
"@atlaskit/tokens": "^6.0.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@atlaskit/editor-common": "^107.
|
|
47
|
+
"@atlaskit/editor-common": "^107.20.0",
|
|
48
48
|
"react": "^18.2.0",
|
|
49
49
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
50
50
|
},
|