@atlaskit/editor-plugin-tasks-and-decisions 2.6.3 → 2.6.5
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,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-tasks-and-decisions
|
|
2
2
|
|
|
3
|
+
## 2.6.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#144162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144162)
|
|
8
|
+
[`89ef180d8e16e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89ef180d8e16e) -
|
|
9
|
+
[ux] ED-24772 add popup content for create request to edit component
|
|
10
|
+
|
|
11
|
+
## 2.6.4
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 2.6.3
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -16,12 +16,16 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
16
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
17
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
18
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
var _reactIntlNext = require("react-intl-next");
|
|
19
20
|
var _steps = require("@atlaskit/adf-schema/steps");
|
|
20
21
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
21
22
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
23
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
22
24
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
25
|
+
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
|
|
23
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
24
27
|
var _popup = _interopRequireDefault(require("@atlaskit/popup"));
|
|
28
|
+
var _primitives = require("@atlaskit/primitives");
|
|
25
29
|
var _Task = _interopRequireDefault(require("../ui/Task"));
|
|
26
30
|
var _useShowPlaceholder = require("./hooks/use-show-placeholder");
|
|
27
31
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -30,6 +34,39 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
30
34
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
31
35
|
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
|
|
32
36
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
37
|
+
var wrapperStyles = (0, _primitives.xcss)({
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'column',
|
|
40
|
+
maxWidth: '333px',
|
|
41
|
+
paddingTop: 'space.200',
|
|
42
|
+
paddingRight: 'space.300',
|
|
43
|
+
paddingBottom: 'space.200',
|
|
44
|
+
paddingLeft: 'space.300'
|
|
45
|
+
});
|
|
46
|
+
var wrapperBoxStyles = (0, _primitives.xcss)({
|
|
47
|
+
display: 'flex',
|
|
48
|
+
gap: 'space.050'
|
|
49
|
+
});
|
|
50
|
+
var dotStyles = (0, _primitives.xcss)({
|
|
51
|
+
margin: 'space.100',
|
|
52
|
+
display: 'inline-block',
|
|
53
|
+
width: '2px',
|
|
54
|
+
height: '2px',
|
|
55
|
+
backgroundColor: 'color.background.accent.blue.bolder',
|
|
56
|
+
borderRadius: '50%',
|
|
57
|
+
transform: 'translateY(2px)'
|
|
58
|
+
});
|
|
59
|
+
var pressableStyles = (0, _primitives.xcss)({
|
|
60
|
+
color: 'color.text.brand',
|
|
61
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
62
|
+
':hover': {
|
|
63
|
+
textDecoration: 'underline'
|
|
64
|
+
},
|
|
65
|
+
':active': {
|
|
66
|
+
color: 'color.text.information'
|
|
67
|
+
},
|
|
68
|
+
padding: 'space.0'
|
|
69
|
+
});
|
|
33
70
|
var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
34
71
|
var localId = _ref.localId,
|
|
35
72
|
forwardRef = _ref.forwardRef,
|
|
@@ -47,6 +84,8 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
47
84
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
48
85
|
isOpen = _useState2[0],
|
|
49
86
|
setIsOpen = _useState2[1];
|
|
87
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
88
|
+
formatMessage = _useIntl.formatMessage;
|
|
50
89
|
var showPlaceholder = (0, _useShowPlaceholder.useShowPlaceholder)({
|
|
51
90
|
editorView: editorView,
|
|
52
91
|
isContentNodeEmpty: isContentNodeEmpty,
|
|
@@ -60,7 +99,7 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
60
99
|
var tr = editorView.state.tr;
|
|
61
100
|
var nodePos = getPos();
|
|
62
101
|
if (typeof nodePos !== 'number') {
|
|
63
|
-
return
|
|
102
|
+
return;
|
|
64
103
|
}
|
|
65
104
|
tr.setMeta('scrollIntoView', false);
|
|
66
105
|
|
|
@@ -98,23 +137,41 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
98
137
|
return setIsOpen(false);
|
|
99
138
|
},
|
|
100
139
|
content: function content() {
|
|
101
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
140
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
141
|
+
xcss: wrapperStyles
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
|
|
143
|
+
space: "space.150"
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement(_heading.default, {
|
|
145
|
+
size: "xsmall"
|
|
146
|
+
}, formatMessage(_messages.tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/_react.default.createElement("div", null, formatMessage(_messages.tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
147
|
+
xcss: wrapperBoxStyles
|
|
148
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
149
|
+
xcss: pressableStyles
|
|
150
|
+
}, formatMessage(_messages.tasksAndDecisionsMessages.requestToEdit))), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
151
|
+
xcss: dotStyles
|
|
152
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
153
|
+
onClick: function onClick() {
|
|
154
|
+
return setIsOpen(false);
|
|
155
|
+
},
|
|
156
|
+
xcss: pressableStyles
|
|
157
|
+
}, formatMessage(_messages.tasksAndDecisionsMessages.dismiss))))));
|
|
102
158
|
},
|
|
103
159
|
trigger: function trigger(triggerProps) {
|
|
160
|
+
var _api$editorViewMode, _api$taskDecision3;
|
|
104
161
|
return /*#__PURE__*/_react.default.createElement(_Task.default, {
|
|
105
162
|
taskId: localId,
|
|
106
163
|
contentRef: forwardRef,
|
|
107
164
|
inputRef: triggerProps.ref,
|
|
108
165
|
isDone: isDone,
|
|
109
166
|
onChange: onChange,
|
|
110
|
-
onClick: onHandleClick,
|
|
167
|
+
onClick: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view' ? onHandleClick : undefined,
|
|
111
168
|
isFocused: isFocused,
|
|
112
169
|
showPlaceholder: showPlaceholder,
|
|
113
170
|
providers: providerFactory,
|
|
114
|
-
disableOnChange: true
|
|
171
|
+
disableOnChange: !(api !== null && api !== void 0 && (_api$taskDecision3 = api.taskDecision) !== null && _api$taskDecision3 !== void 0 && (_api$taskDecision3 = _api$taskDecision3.sharedState.currentState()) !== null && _api$taskDecision3 !== void 0 && _api$taskDecision3.hasEditPermission) && true
|
|
115
172
|
});
|
|
116
173
|
},
|
|
117
|
-
placement: 'bottom'
|
|
174
|
+
placement: 'bottom-start'
|
|
118
175
|
});
|
|
119
176
|
};
|
|
120
177
|
var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
@@ -128,6 +185,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
128
185
|
}
|
|
129
186
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
130
187
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (taskId, isChecked) {
|
|
188
|
+
var _this$api;
|
|
131
189
|
var tr = _this.view.state.tr;
|
|
132
190
|
var nodePos = _this.getPos();
|
|
133
191
|
if (typeof nodePos !== 'number') {
|
|
@@ -141,6 +199,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
141
199
|
localId: taskId
|
|
142
200
|
}));
|
|
143
201
|
tr.setMeta('scrollIntoView', false);
|
|
202
|
+
|
|
203
|
+
/**
|
|
204
|
+
* This is a test implementation to call the request to edit mutation
|
|
205
|
+
* from within editor when toggling a task where a user has no edit access.
|
|
206
|
+
*
|
|
207
|
+
* This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
|
|
208
|
+
* to connect up the correct user action
|
|
209
|
+
*/
|
|
210
|
+
if (!((_this$api = _this.api) !== null && _this$api !== void 0 && (_this$api = _this$api.taskDecision) !== null && _this$api !== void 0 && (_this$api = _this$api.sharedState.currentState()) !== null && _this$api !== void 0 && _this$api.hasEditPermission) && (0, _platformFeatureFlags.fg)('editor_request_to_edit_task')) {
|
|
211
|
+
var _this$api2;
|
|
212
|
+
var requestToEdit = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.taskDecision) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.sharedState.currentState()) === null || _this$api2 === void 0 ? void 0 : _this$api2.requestToEditContent;
|
|
213
|
+
if (requestToEdit) {
|
|
214
|
+
requestToEdit();
|
|
215
|
+
}
|
|
216
|
+
}
|
|
144
217
|
_this.view.dispatch(tr);
|
|
145
218
|
});
|
|
146
219
|
/**
|
|
@@ -163,7 +236,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
163
236
|
var listSize = resolvedPos.parent.childCount;
|
|
164
237
|
var listLocalId = resolvedPos.parent.attrs.localId;
|
|
165
238
|
event.update(function (payload) {
|
|
166
|
-
var _this$
|
|
239
|
+
var _this$api3;
|
|
167
240
|
var _payload$attributes = payload.attributes,
|
|
168
241
|
attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
|
|
169
242
|
actionSubject = payload.actionSubject;
|
|
@@ -177,7 +250,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
177
250
|
listSize: listSize,
|
|
178
251
|
listLocalId: listLocalId
|
|
179
252
|
}, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') && {
|
|
180
|
-
hasEditPermission: (_this$
|
|
253
|
+
hasEditPermission: (_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.taskDecision) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.sharedState.currentState()) === null || _this$api3 === void 0 ? void 0 : _this$api3.hasEditPermission
|
|
181
254
|
})
|
|
182
255
|
});
|
|
183
256
|
});
|
|
@@ -1,13 +1,50 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
|
+
import { useIntl } from 'react-intl-next';
|
|
3
4
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
4
5
|
import { AnalyticsListener } from '@atlaskit/analytics-next';
|
|
5
6
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
7
|
+
import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
|
|
6
8
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
9
|
+
import Heading from '@atlaskit/heading';
|
|
7
10
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
11
|
import Popup from '@atlaskit/popup';
|
|
12
|
+
import { Box, Pressable, Stack, xcss } from '@atlaskit/primitives';
|
|
9
13
|
import TaskItem from '../ui/Task';
|
|
10
14
|
import { useShowPlaceholder } from './hooks/use-show-placeholder';
|
|
15
|
+
const wrapperStyles = xcss({
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'column',
|
|
18
|
+
maxWidth: '333px',
|
|
19
|
+
paddingTop: 'space.200',
|
|
20
|
+
paddingRight: 'space.300',
|
|
21
|
+
paddingBottom: 'space.200',
|
|
22
|
+
paddingLeft: 'space.300'
|
|
23
|
+
});
|
|
24
|
+
const wrapperBoxStyles = xcss({
|
|
25
|
+
display: 'flex',
|
|
26
|
+
gap: 'space.050'
|
|
27
|
+
});
|
|
28
|
+
const dotStyles = xcss({
|
|
29
|
+
margin: 'space.100',
|
|
30
|
+
display: 'inline-block',
|
|
31
|
+
width: '2px',
|
|
32
|
+
height: '2px',
|
|
33
|
+
backgroundColor: 'color.background.accent.blue.bolder',
|
|
34
|
+
borderRadius: '50%',
|
|
35
|
+
transform: 'translateY(2px)'
|
|
36
|
+
});
|
|
37
|
+
const pressableStyles = xcss({
|
|
38
|
+
color: 'color.text.brand',
|
|
39
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
40
|
+
':hover': {
|
|
41
|
+
textDecoration: 'underline'
|
|
42
|
+
},
|
|
43
|
+
':active': {
|
|
44
|
+
color: 'color.text.information'
|
|
45
|
+
},
|
|
46
|
+
padding: 'space.0'
|
|
47
|
+
});
|
|
11
48
|
const TaskItemWrapper = ({
|
|
12
49
|
localId,
|
|
13
50
|
forwardRef,
|
|
@@ -24,6 +61,9 @@ const TaskItemWrapper = ({
|
|
|
24
61
|
} = useSharedPluginState(api, ['taskDecision']);
|
|
25
62
|
const isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
|
|
26
63
|
const [isOpen, setIsOpen] = useState(false);
|
|
64
|
+
const {
|
|
65
|
+
formatMessage
|
|
66
|
+
} = useIntl();
|
|
27
67
|
const showPlaceholder = useShowPlaceholder({
|
|
28
68
|
editorView,
|
|
29
69
|
isContentNodeEmpty,
|
|
@@ -39,7 +79,7 @@ const TaskItemWrapper = ({
|
|
|
39
79
|
} = editorView.state;
|
|
40
80
|
const nodePos = getPos();
|
|
41
81
|
if (typeof nodePos !== 'number') {
|
|
42
|
-
return
|
|
82
|
+
return;
|
|
43
83
|
}
|
|
44
84
|
tr.setMeta('scrollIntoView', false);
|
|
45
85
|
|
|
@@ -74,28 +114,45 @@ const TaskItemWrapper = ({
|
|
|
74
114
|
return /*#__PURE__*/React.createElement(Popup, {
|
|
75
115
|
isOpen: isOpen,
|
|
76
116
|
onClose: () => setIsOpen(false),
|
|
77
|
-
content: () => /*#__PURE__*/React.createElement(
|
|
117
|
+
content: () => /*#__PURE__*/React.createElement(Box, {
|
|
118
|
+
xcss: wrapperStyles
|
|
119
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
120
|
+
space: "space.150"
|
|
121
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
|
122
|
+
size: "xsmall"
|
|
123
|
+
}, formatMessage(tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement(Box, {
|
|
124
|
+
xcss: wrapperBoxStyles
|
|
125
|
+
}, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
126
|
+
xcss: pressableStyles
|
|
127
|
+
}, formatMessage(tasksAndDecisionsMessages.requestToEdit))), /*#__PURE__*/React.createElement(Box, {
|
|
128
|
+
xcss: dotStyles
|
|
129
|
+
}), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
130
|
+
onClick: () => setIsOpen(false),
|
|
131
|
+
xcss: pressableStyles
|
|
132
|
+
}, formatMessage(tasksAndDecisionsMessages.dismiss)))))),
|
|
78
133
|
trigger: triggerProps => {
|
|
134
|
+
var _api$editorViewMode, _api$editorViewMode$s, _api$taskDecision3, _api$taskDecision3$sh;
|
|
79
135
|
return /*#__PURE__*/React.createElement(TaskItem, {
|
|
80
136
|
taskId: localId,
|
|
81
137
|
contentRef: forwardRef,
|
|
82
138
|
inputRef: triggerProps.ref,
|
|
83
139
|
isDone: isDone,
|
|
84
140
|
onChange: onChange,
|
|
85
|
-
onClick: onHandleClick,
|
|
141
|
+
onClick: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view' ? onHandleClick : undefined,
|
|
86
142
|
isFocused: isFocused,
|
|
87
143
|
showPlaceholder: showPlaceholder,
|
|
88
144
|
providers: providerFactory,
|
|
89
|
-
disableOnChange: true
|
|
145
|
+
disableOnChange: !(api !== null && api !== void 0 && (_api$taskDecision3 = api.taskDecision) !== null && _api$taskDecision3 !== void 0 && (_api$taskDecision3$sh = _api$taskDecision3.sharedState.currentState()) !== null && _api$taskDecision3$sh !== void 0 && _api$taskDecision3$sh.hasEditPermission) && true
|
|
90
146
|
});
|
|
91
147
|
},
|
|
92
|
-
placement: 'bottom'
|
|
148
|
+
placement: 'bottom-start'
|
|
93
149
|
});
|
|
94
150
|
};
|
|
95
151
|
class Task extends ReactNodeView {
|
|
96
152
|
constructor(...args) {
|
|
97
153
|
super(...args);
|
|
98
154
|
_defineProperty(this, "handleOnChange", (taskId, isChecked) => {
|
|
155
|
+
var _this$api, _this$api$taskDecisio, _this$api$taskDecisio2;
|
|
99
156
|
const {
|
|
100
157
|
tr
|
|
101
158
|
} = this.view.state;
|
|
@@ -111,6 +168,21 @@ class Task extends ReactNodeView {
|
|
|
111
168
|
localId: taskId
|
|
112
169
|
}));
|
|
113
170
|
tr.setMeta('scrollIntoView', false);
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* This is a test implementation to call the request to edit mutation
|
|
174
|
+
* from within editor when toggling a task where a user has no edit access.
|
|
175
|
+
*
|
|
176
|
+
* This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
|
|
177
|
+
* to connect up the correct user action
|
|
178
|
+
*/
|
|
179
|
+
if (!((_this$api = this.api) !== null && _this$api !== void 0 && (_this$api$taskDecisio = _this$api.taskDecision) !== null && _this$api$taskDecisio !== void 0 && (_this$api$taskDecisio2 = _this$api$taskDecisio.sharedState.currentState()) !== null && _this$api$taskDecisio2 !== void 0 && _this$api$taskDecisio2.hasEditPermission) && fg('editor_request_to_edit_task')) {
|
|
180
|
+
var _this$api2, _this$api2$taskDecisi, _this$api2$taskDecisi2;
|
|
181
|
+
const requestToEdit = (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$taskDecisi = _this$api2.taskDecision) === null || _this$api2$taskDecisi === void 0 ? void 0 : (_this$api2$taskDecisi2 = _this$api2$taskDecisi.sharedState.currentState()) === null || _this$api2$taskDecisi2 === void 0 ? void 0 : _this$api2$taskDecisi2.requestToEditContent;
|
|
182
|
+
if (requestToEdit) {
|
|
183
|
+
requestToEdit();
|
|
184
|
+
}
|
|
185
|
+
}
|
|
114
186
|
this.view.dispatch(tr);
|
|
115
187
|
});
|
|
116
188
|
/**
|
|
@@ -133,7 +205,7 @@ class Task extends ReactNodeView {
|
|
|
133
205
|
const listSize = resolvedPos.parent.childCount;
|
|
134
206
|
const listLocalId = resolvedPos.parent.attrs.localId;
|
|
135
207
|
event.update(payload => {
|
|
136
|
-
var _this$
|
|
208
|
+
var _this$api3, _this$api3$taskDecisi, _this$api3$taskDecisi2;
|
|
137
209
|
const {
|
|
138
210
|
attributes = {},
|
|
139
211
|
actionSubject
|
|
@@ -150,7 +222,7 @@ class Task extends ReactNodeView {
|
|
|
150
222
|
listSize,
|
|
151
223
|
listLocalId,
|
|
152
224
|
...(fg('editor_request_to_edit_task') && {
|
|
153
|
-
hasEditPermission: (_this$
|
|
225
|
+
hasEditPermission: (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$taskDecisi = _this$api3.taskDecision) === null || _this$api3$taskDecisi === void 0 ? void 0 : (_this$api3$taskDecisi2 = _this$api3$taskDecisi.sharedState.currentState()) === null || _this$api3$taskDecisi2 === void 0 ? void 0 : _this$api3$taskDecisi2.hasEditPermission
|
|
154
226
|
})
|
|
155
227
|
}
|
|
156
228
|
};
|
|
@@ -12,14 +12,51 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
12
12
|
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
|
|
13
13
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
14
14
|
import React, { useState } from 'react';
|
|
15
|
+
import { useIntl } from 'react-intl-next';
|
|
15
16
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
16
17
|
import { AnalyticsListener } from '@atlaskit/analytics-next';
|
|
17
18
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
19
|
+
import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
|
|
18
20
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
21
|
+
import Heading from '@atlaskit/heading';
|
|
19
22
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
23
|
import Popup from '@atlaskit/popup';
|
|
24
|
+
import { Box, Pressable, Stack, xcss } from '@atlaskit/primitives';
|
|
21
25
|
import TaskItem from '../ui/Task';
|
|
22
26
|
import { useShowPlaceholder } from './hooks/use-show-placeholder';
|
|
27
|
+
var wrapperStyles = xcss({
|
|
28
|
+
display: 'flex',
|
|
29
|
+
flexDirection: 'column',
|
|
30
|
+
maxWidth: '333px',
|
|
31
|
+
paddingTop: 'space.200',
|
|
32
|
+
paddingRight: 'space.300',
|
|
33
|
+
paddingBottom: 'space.200',
|
|
34
|
+
paddingLeft: 'space.300'
|
|
35
|
+
});
|
|
36
|
+
var wrapperBoxStyles = xcss({
|
|
37
|
+
display: 'flex',
|
|
38
|
+
gap: 'space.050'
|
|
39
|
+
});
|
|
40
|
+
var dotStyles = xcss({
|
|
41
|
+
margin: 'space.100',
|
|
42
|
+
display: 'inline-block',
|
|
43
|
+
width: '2px',
|
|
44
|
+
height: '2px',
|
|
45
|
+
backgroundColor: 'color.background.accent.blue.bolder',
|
|
46
|
+
borderRadius: '50%',
|
|
47
|
+
transform: 'translateY(2px)'
|
|
48
|
+
});
|
|
49
|
+
var pressableStyles = xcss({
|
|
50
|
+
color: 'color.text.brand',
|
|
51
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
52
|
+
':hover': {
|
|
53
|
+
textDecoration: 'underline'
|
|
54
|
+
},
|
|
55
|
+
':active': {
|
|
56
|
+
color: 'color.text.information'
|
|
57
|
+
},
|
|
58
|
+
padding: 'space.0'
|
|
59
|
+
});
|
|
23
60
|
var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
24
61
|
var localId = _ref.localId,
|
|
25
62
|
forwardRef = _ref.forwardRef,
|
|
@@ -37,6 +74,8 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
37
74
|
_useState2 = _slicedToArray(_useState, 2),
|
|
38
75
|
isOpen = _useState2[0],
|
|
39
76
|
setIsOpen = _useState2[1];
|
|
77
|
+
var _useIntl = useIntl(),
|
|
78
|
+
formatMessage = _useIntl.formatMessage;
|
|
40
79
|
var showPlaceholder = useShowPlaceholder({
|
|
41
80
|
editorView: editorView,
|
|
42
81
|
isContentNodeEmpty: isContentNodeEmpty,
|
|
@@ -50,7 +89,7 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
50
89
|
var tr = editorView.state.tr;
|
|
51
90
|
var nodePos = getPos();
|
|
52
91
|
if (typeof nodePos !== 'number') {
|
|
53
|
-
return
|
|
92
|
+
return;
|
|
54
93
|
}
|
|
55
94
|
tr.setMeta('scrollIntoView', false);
|
|
56
95
|
|
|
@@ -88,23 +127,41 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
|
|
|
88
127
|
return setIsOpen(false);
|
|
89
128
|
},
|
|
90
129
|
content: function content() {
|
|
91
|
-
return /*#__PURE__*/React.createElement(
|
|
130
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
131
|
+
xcss: wrapperStyles
|
|
132
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
133
|
+
space: "space.150"
|
|
134
|
+
}, /*#__PURE__*/React.createElement(Heading, {
|
|
135
|
+
size: "xsmall"
|
|
136
|
+
}, formatMessage(tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement(Box, {
|
|
137
|
+
xcss: wrapperBoxStyles
|
|
138
|
+
}, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
139
|
+
xcss: pressableStyles
|
|
140
|
+
}, formatMessage(tasksAndDecisionsMessages.requestToEdit))), /*#__PURE__*/React.createElement(Box, {
|
|
141
|
+
xcss: dotStyles
|
|
142
|
+
}), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
|
|
143
|
+
onClick: function onClick() {
|
|
144
|
+
return setIsOpen(false);
|
|
145
|
+
},
|
|
146
|
+
xcss: pressableStyles
|
|
147
|
+
}, formatMessage(tasksAndDecisionsMessages.dismiss))))));
|
|
92
148
|
},
|
|
93
149
|
trigger: function trigger(triggerProps) {
|
|
150
|
+
var _api$editorViewMode, _api$taskDecision3;
|
|
94
151
|
return /*#__PURE__*/React.createElement(TaskItem, {
|
|
95
152
|
taskId: localId,
|
|
96
153
|
contentRef: forwardRef,
|
|
97
154
|
inputRef: triggerProps.ref,
|
|
98
155
|
isDone: isDone,
|
|
99
156
|
onChange: onChange,
|
|
100
|
-
onClick: onHandleClick,
|
|
157
|
+
onClick: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view' ? onHandleClick : undefined,
|
|
101
158
|
isFocused: isFocused,
|
|
102
159
|
showPlaceholder: showPlaceholder,
|
|
103
160
|
providers: providerFactory,
|
|
104
|
-
disableOnChange: true
|
|
161
|
+
disableOnChange: !(api !== null && api !== void 0 && (_api$taskDecision3 = api.taskDecision) !== null && _api$taskDecision3 !== void 0 && (_api$taskDecision3 = _api$taskDecision3.sharedState.currentState()) !== null && _api$taskDecision3 !== void 0 && _api$taskDecision3.hasEditPermission) && true
|
|
105
162
|
});
|
|
106
163
|
},
|
|
107
|
-
placement: 'bottom'
|
|
164
|
+
placement: 'bottom-start'
|
|
108
165
|
});
|
|
109
166
|
};
|
|
110
167
|
var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
@@ -118,6 +175,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
118
175
|
}
|
|
119
176
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
120
177
|
_defineProperty(_assertThisInitialized(_this), "handleOnChange", function (taskId, isChecked) {
|
|
178
|
+
var _this$api;
|
|
121
179
|
var tr = _this.view.state.tr;
|
|
122
180
|
var nodePos = _this.getPos();
|
|
123
181
|
if (typeof nodePos !== 'number') {
|
|
@@ -131,6 +189,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
131
189
|
localId: taskId
|
|
132
190
|
}));
|
|
133
191
|
tr.setMeta('scrollIntoView', false);
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* This is a test implementation to call the request to edit mutation
|
|
195
|
+
* from within editor when toggling a task where a user has no edit access.
|
|
196
|
+
*
|
|
197
|
+
* This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
|
|
198
|
+
* to connect up the correct user action
|
|
199
|
+
*/
|
|
200
|
+
if (!((_this$api = _this.api) !== null && _this$api !== void 0 && (_this$api = _this$api.taskDecision) !== null && _this$api !== void 0 && (_this$api = _this$api.sharedState.currentState()) !== null && _this$api !== void 0 && _this$api.hasEditPermission) && fg('editor_request_to_edit_task')) {
|
|
201
|
+
var _this$api2;
|
|
202
|
+
var requestToEdit = (_this$api2 = _this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.taskDecision) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.sharedState.currentState()) === null || _this$api2 === void 0 ? void 0 : _this$api2.requestToEditContent;
|
|
203
|
+
if (requestToEdit) {
|
|
204
|
+
requestToEdit();
|
|
205
|
+
}
|
|
206
|
+
}
|
|
134
207
|
_this.view.dispatch(tr);
|
|
135
208
|
});
|
|
136
209
|
/**
|
|
@@ -153,7 +226,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
153
226
|
var listSize = resolvedPos.parent.childCount;
|
|
154
227
|
var listLocalId = resolvedPos.parent.attrs.localId;
|
|
155
228
|
event.update(function (payload) {
|
|
156
|
-
var _this$
|
|
229
|
+
var _this$api3;
|
|
157
230
|
var _payload$attributes = payload.attributes,
|
|
158
231
|
attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
|
|
159
232
|
actionSubject = payload.actionSubject;
|
|
@@ -167,7 +240,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
167
240
|
listSize: listSize,
|
|
168
241
|
listLocalId: listLocalId
|
|
169
242
|
}, fg('editor_request_to_edit_task') && {
|
|
170
|
-
hasEditPermission: (_this$
|
|
243
|
+
hasEditPermission: (_this$api3 = _this.api) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.taskDecision) === null || _this$api3 === void 0 || (_this$api3 = _this$api3.sharedState.currentState()) === null || _this$api3 === void 0 ? void 0 : _this$api3.hasEditPermission
|
|
171
244
|
})
|
|
172
245
|
});
|
|
173
246
|
});
|
package/dist/types/types.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider
|
|
|
4
4
|
import type { LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
6
6
|
import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
|
|
7
|
+
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
7
8
|
import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
|
|
8
9
|
import type { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
9
10
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -65,7 +66,8 @@ export type TasksAndDecisionsPlugin = NextEditorPlugin<'taskDecision', {
|
|
|
65
66
|
dependencies: [
|
|
66
67
|
OptionalPlugin<TypeAheadPlugin>,
|
|
67
68
|
OptionalPlugin<AnalyticsPlugin>,
|
|
68
|
-
OptionalPlugin<ContextIdentifierPlugin
|
|
69
|
+
OptionalPlugin<ContextIdentifierPlugin>,
|
|
70
|
+
OptionalPlugin<EditorViewModePlugin>
|
|
69
71
|
];
|
|
70
72
|
actions: {
|
|
71
73
|
insertTaskDecision: ReturnType<typeof insertTaskDecisionCommand>;
|
|
@@ -4,6 +4,7 @@ import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider
|
|
|
4
4
|
import type { LongPressSelectionPluginOptions, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
|
|
6
6
|
import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
|
|
7
|
+
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
7
8
|
import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
|
|
8
9
|
import type { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
9
10
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -65,7 +66,8 @@ export type TasksAndDecisionsPlugin = NextEditorPlugin<'taskDecision', {
|
|
|
65
66
|
dependencies: [
|
|
66
67
|
OptionalPlugin<TypeAheadPlugin>,
|
|
67
68
|
OptionalPlugin<AnalyticsPlugin>,
|
|
68
|
-
OptionalPlugin<ContextIdentifierPlugin
|
|
69
|
+
OptionalPlugin<ContextIdentifierPlugin>,
|
|
70
|
+
OptionalPlugin<EditorViewModePlugin>
|
|
69
71
|
];
|
|
70
72
|
actions: {
|
|
71
73
|
insertTaskDecision: ReturnType<typeof insertTaskDecisionCommand>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-tasks-and-decisions",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.5",
|
|
4
4
|
"description": "Tasks and decisions plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,18 +34,21 @@
|
|
|
34
34
|
"@atlaskit/adf-schema": "^40.9.0",
|
|
35
35
|
"@atlaskit/analytics-namespaced-context": "^6.12.0",
|
|
36
36
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
37
|
-
"@atlaskit/editor-common": "^
|
|
37
|
+
"@atlaskit/editor-common": "^91.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
39
39
|
"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
|
|
40
|
+
"@atlaskit/editor-plugin-editor-viewmode": "2.1.7",
|
|
40
41
|
"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
|
|
41
42
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
43
|
+
"@atlaskit/heading": "2.4.5",
|
|
42
44
|
"@atlaskit/icon": "^22.18.0",
|
|
43
45
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
44
46
|
"@atlaskit/popup": "1.27.0",
|
|
47
|
+
"@atlaskit/primitives": "12.2.0",
|
|
45
48
|
"@atlaskit/prosemirror-input-rules": "^3.2.0",
|
|
46
|
-
"@atlaskit/task-decision": "^17.
|
|
49
|
+
"@atlaskit/task-decision": "^17.11.0",
|
|
47
50
|
"@atlaskit/tmp-editor-statsig": "^2.1.8",
|
|
48
|
-
"@atlaskit/tokens": "^1.
|
|
51
|
+
"@atlaskit/tokens": "^1.61.0",
|
|
49
52
|
"@babel/runtime": "^7.0.0",
|
|
50
53
|
"@emotion/react": "^11.7.1"
|
|
51
54
|
},
|