@atlaskit/editor-plugin-tasks-and-decisions 2.6.4 → 2.6.6

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,21 @@
1
1
  # @atlaskit/editor-plugin-tasks-and-decisions
2
2
 
3
+ ## 2.6.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#144261](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144261)
8
+ [`db163b6e55bdb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db163b6e55bdb) -
9
+ [ux] ED-24773 implement request to edit link in request to edit dialog
10
+
11
+ ## 2.6.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [#144162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144162)
16
+ [`89ef180d8e16e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89ef180d8e16e) -
17
+ [ux] ED-24772 add popup content for create request to edit component
18
+
3
19
  ## 2.6.4
4
20
 
5
21
  ### Patch Changes
@@ -16,12 +16,17 @@ 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"));
26
+ var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
23
27
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
28
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
29
+ var _primitives = require("@atlaskit/primitives");
25
30
  var _Task = _interopRequireDefault(require("../ui/Task"));
26
31
  var _useShowPlaceholder = require("./hooks/use-show-placeholder");
27
32
  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,16 +35,68 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
30
35
  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
36
  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
37
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
33
- var TaskItemWrapper = function TaskItemWrapper(_ref) {
34
- var localId = _ref.localId,
35
- forwardRef = _ref.forwardRef,
36
- isDone = _ref.isDone,
37
- onChange = _ref.onChange,
38
- providerFactory = _ref.providerFactory,
39
- isContentNodeEmpty = _ref.isContentNodeEmpty,
40
- api = _ref.api,
41
- getPos = _ref.getPos,
42
- editorView = _ref.editorView;
38
+ var wrapperStyles = (0, _primitives.xcss)({
39
+ display: 'flex',
40
+ flexDirection: 'column',
41
+ maxWidth: '333px',
42
+ paddingTop: 'space.200',
43
+ paddingRight: 'space.300',
44
+ paddingBottom: 'space.200',
45
+ paddingLeft: 'space.300'
46
+ });
47
+ var wrapperBoxStyles = (0, _primitives.xcss)({
48
+ display: 'flex',
49
+ gap: 'space.050',
50
+ color: 'color.text.disabled'
51
+ });
52
+ var dotStyles = (0, _primitives.xcss)({
53
+ margin: 'space.100',
54
+ display: 'inline-block',
55
+ width: '2px',
56
+ height: '2px',
57
+ backgroundColor: 'color.background.accent.blue.bolder',
58
+ borderRadius: '50%',
59
+ transform: 'translateY(2px)'
60
+ });
61
+ var pressableStyles = (0, _primitives.xcss)({
62
+ color: 'color.text.brand',
63
+ backgroundColor: 'color.background.neutral.subtle',
64
+ ':hover': {
65
+ textDecoration: 'underline'
66
+ },
67
+ ':active': {
68
+ color: 'color.text.information'
69
+ },
70
+ padding: 'space.0',
71
+ fontSize: '14px'
72
+ });
73
+ var RequestedMessage = function RequestedMessage() {
74
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
75
+ formatMessage = _useIntl.formatMessage;
76
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formatMessage(_messages.tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/_react.default.createElement(_done.default, {
77
+ label: "requested-to-edit",
78
+ primaryColor: "var(--ds-icon-disabled, #091E424F)"
79
+ }));
80
+ };
81
+ var RequestToEditButton = function RequestToEditButton(_ref) {
82
+ var onClick = _ref.onClick;
83
+ var _useIntl2 = (0, _reactIntlNext.useIntl)(),
84
+ formatMessage = _useIntl2.formatMessage;
85
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
86
+ onClick: onClick,
87
+ xcss: pressableStyles
88
+ }, formatMessage(_messages.tasksAndDecisionsMessages.requestToEdit)));
89
+ };
90
+ var TaskItemWrapper = function TaskItemWrapper(_ref2) {
91
+ var localId = _ref2.localId,
92
+ forwardRef = _ref2.forwardRef,
93
+ isDone = _ref2.isDone,
94
+ onChange = _ref2.onChange,
95
+ providerFactory = _ref2.providerFactory,
96
+ isContentNodeEmpty = _ref2.isContentNodeEmpty,
97
+ api = _ref2.api,
98
+ getPos = _ref2.getPos,
99
+ editorView = _ref2.editorView;
43
100
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['taskDecision']),
44
101
  taskDecisionState = _useSharedPluginState.taskDecisionState;
45
102
  var isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
@@ -47,30 +104,28 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
47
104
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
105
  isOpen = _useState2[0],
49
106
  setIsOpen = _useState2[1];
107
+ var _useState3 = (0, _react.useState)(false),
108
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
109
+ requested = _useState4[0],
110
+ setRequested = _useState4[1];
111
+ var _useIntl3 = (0, _reactIntlNext.useIntl)(),
112
+ formatMessage = _useIntl3.formatMessage;
50
113
  var showPlaceholder = (0, _useShowPlaceholder.useShowPlaceholder)({
51
114
  editorView: editorView,
52
115
  isContentNodeEmpty: isContentNodeEmpty,
53
116
  getPos: getPos,
54
117
  api: api
55
118
  });
56
- var onHandleClick = function onHandleClick() {
119
+ var onHandleEdit = function onHandleEdit() {
57
120
  if ((0, _platformFeatureFlags.fg)('editor_request_to_edit_task')) {
58
121
  var _api$taskDecision;
59
- setIsOpen(true);
122
+ setRequested(true);
60
123
  var tr = editorView.state.tr;
61
124
  var nodePos = getPos();
62
125
  if (typeof nodePos !== 'number') {
63
- return false;
126
+ return;
64
127
  }
65
128
  tr.setMeta('scrollIntoView', false);
66
-
67
- /**
68
- * This is a test implementation to call the request to edit mutation
69
- * from within editor when toggling a task where a user has no edit access.
70
- *
71
- * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
72
- * to connect up the correct user action
73
- */
74
129
  if (!(api !== null && api !== void 0 && (_api$taskDecision = api.taskDecision) !== null && _api$taskDecision !== void 0 && (_api$taskDecision = _api$taskDecision.sharedState.currentState()) !== null && _api$taskDecision !== void 0 && _api$taskDecision.hasEditPermission)) {
75
130
  var _api$taskDecision2;
76
131
  var requestToEdit = api === null || api === void 0 || (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 || (_api$taskDecision2 = _api$taskDecision2.sharedState.currentState()) === null || _api$taskDecision2 === void 0 ? void 0 : _api$taskDecision2.requestToEditContent;
@@ -81,6 +136,11 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
81
136
  editorView.dispatch(tr);
82
137
  }
83
138
  };
139
+ var onHandleClick = function onHandleClick() {
140
+ if ((0, _platformFeatureFlags.fg)('editor_request_to_edit_task')) {
141
+ setIsOpen(true);
142
+ }
143
+ };
84
144
  if (!(0, _platformFeatureFlags.fg)('editor_request_to_edit_task')) {
85
145
  return /*#__PURE__*/_react.default.createElement(_Task.default, {
86
146
  taskId: localId,
@@ -98,9 +158,28 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
98
158
  return setIsOpen(false);
99
159
  },
100
160
  content: function content() {
101
- return /*#__PURE__*/_react.default.createElement("div", null, "Content");
161
+ var _api$editorViewMode;
162
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
163
+ xcss: wrapperStyles
164
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
165
+ space: "space.150"
166
+ }, /*#__PURE__*/_react.default.createElement(_heading.default, {
167
+ size: "xsmall"
168
+ }, formatMessage(_messages.tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/_react.default.createElement("div", null, formatMessage(_messages.tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
169
+ xcss: wrapperBoxStyles
170
+ }, requested ? /*#__PURE__*/_react.default.createElement(RequestedMessage, null) : /*#__PURE__*/_react.default.createElement(RequestToEditButton, {
171
+ 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' ? onHandleEdit : undefined
172
+ }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
173
+ xcss: dotStyles
174
+ }), /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
175
+ onClick: function onClick() {
176
+ return setIsOpen(false);
177
+ },
178
+ xcss: pressableStyles
179
+ }, formatMessage(_messages.tasksAndDecisionsMessages.dismiss))))));
102
180
  },
103
181
  trigger: function trigger(triggerProps) {
182
+ var _api$taskDecision3;
104
183
  return /*#__PURE__*/_react.default.createElement(_Task.default, {
105
184
  taskId: localId,
106
185
  contentRef: forwardRef,
@@ -111,10 +190,10 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
111
190
  isFocused: isFocused,
112
191
  showPlaceholder: showPlaceholder,
113
192
  providers: providerFactory,
114
- disableOnChange: true
193
+ 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)
115
194
  });
116
195
  },
117
- placement: 'bottom'
196
+ placement: 'bottom-start'
118
197
  });
119
198
  };
120
199
  var Task = /*#__PURE__*/function (_ReactNodeView) {
@@ -128,6 +207,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
128
207
  }
129
208
  _this = _super.call.apply(_super, [this].concat(args));
130
209
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (taskId, isChecked) {
210
+ var _this$api;
131
211
  var tr = _this.view.state.tr;
132
212
  var nodePos = _this.getPos();
133
213
  if (typeof nodePos !== 'number') {
@@ -141,6 +221,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
141
221
  localId: taskId
142
222
  }));
143
223
  tr.setMeta('scrollIntoView', false);
224
+
225
+ /**
226
+ * This is a test implementation to call the request to edit mutation
227
+ * from within editor when toggling a task where a user has no edit access.
228
+ *
229
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
230
+ * to connect up the correct user action
231
+ */
232
+ 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')) {
233
+ var _this$api2;
234
+ 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;
235
+ if (requestToEdit) {
236
+ requestToEdit();
237
+ }
238
+ }
144
239
  _this.view.dispatch(tr);
145
240
  });
146
241
  /**
@@ -163,7 +258,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
163
258
  var listSize = resolvedPos.parent.childCount;
164
259
  var listLocalId = resolvedPos.parent.attrs.localId;
165
260
  event.update(function (payload) {
166
- var _this$api;
261
+ var _this$api3;
167
262
  var _payload$attributes = payload.attributes,
168
263
  attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
169
264
  actionSubject = payload.actionSubject;
@@ -177,7 +272,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
177
272
  listSize: listSize,
178
273
  listLocalId: listLocalId
179
274
  }, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') && {
180
- hasEditPermission: (_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 ? void 0 : _this$api.hasEditPermission
275
+ 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
276
  })
182
277
  });
183
278
  });
@@ -1,13 +1,73 @@
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';
10
+ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
7
11
  import { fg } from '@atlaskit/platform-feature-flags';
8
12
  import Popup from '@atlaskit/popup';
13
+ import { Box, Pressable, Stack, xcss } from '@atlaskit/primitives';
9
14
  import TaskItem from '../ui/Task';
10
15
  import { useShowPlaceholder } from './hooks/use-show-placeholder';
16
+ const wrapperStyles = xcss({
17
+ display: 'flex',
18
+ flexDirection: 'column',
19
+ maxWidth: '333px',
20
+ paddingTop: 'space.200',
21
+ paddingRight: 'space.300',
22
+ paddingBottom: 'space.200',
23
+ paddingLeft: 'space.300'
24
+ });
25
+ const wrapperBoxStyles = xcss({
26
+ display: 'flex',
27
+ gap: 'space.050',
28
+ color: 'color.text.disabled'
29
+ });
30
+ const dotStyles = xcss({
31
+ margin: 'space.100',
32
+ display: 'inline-block',
33
+ width: '2px',
34
+ height: '2px',
35
+ backgroundColor: 'color.background.accent.blue.bolder',
36
+ borderRadius: '50%',
37
+ transform: 'translateY(2px)'
38
+ });
39
+ const pressableStyles = xcss({
40
+ color: 'color.text.brand',
41
+ backgroundColor: 'color.background.neutral.subtle',
42
+ ':hover': {
43
+ textDecoration: 'underline'
44
+ },
45
+ ':active': {
46
+ color: 'color.text.information'
47
+ },
48
+ padding: 'space.0',
49
+ fontSize: '14px'
50
+ });
51
+ const RequestedMessage = () => {
52
+ const {
53
+ formatMessage
54
+ } = useIntl();
55
+ return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/React.createElement(EditorDoneIcon, {
56
+ label: "requested-to-edit",
57
+ primaryColor: "var(--ds-icon-disabled, #091E424F)"
58
+ }));
59
+ };
60
+ const RequestToEditButton = ({
61
+ onClick
62
+ }) => {
63
+ const {
64
+ formatMessage
65
+ } = useIntl();
66
+ return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
67
+ onClick: onClick,
68
+ xcss: pressableStyles
69
+ }, formatMessage(tasksAndDecisionsMessages.requestToEdit)));
70
+ };
11
71
  const TaskItemWrapper = ({
12
72
  localId,
13
73
  forwardRef,
@@ -24,32 +84,28 @@ const TaskItemWrapper = ({
24
84
  } = useSharedPluginState(api, ['taskDecision']);
25
85
  const isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
26
86
  const [isOpen, setIsOpen] = useState(false);
87
+ const [requested, setRequested] = useState(false);
88
+ const {
89
+ formatMessage
90
+ } = useIntl();
27
91
  const showPlaceholder = useShowPlaceholder({
28
92
  editorView,
29
93
  isContentNodeEmpty,
30
94
  getPos,
31
95
  api
32
96
  });
33
- const onHandleClick = () => {
97
+ const onHandleEdit = () => {
34
98
  if (fg('editor_request_to_edit_task')) {
35
99
  var _api$taskDecision, _api$taskDecision$sha;
36
- setIsOpen(true);
100
+ setRequested(true);
37
101
  const {
38
102
  tr
39
103
  } = editorView.state;
40
104
  const nodePos = getPos();
41
105
  if (typeof nodePos !== 'number') {
42
- return false;
106
+ return;
43
107
  }
44
108
  tr.setMeta('scrollIntoView', false);
45
-
46
- /**
47
- * This is a test implementation to call the request to edit mutation
48
- * from within editor when toggling a task where a user has no edit access.
49
- *
50
- * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
51
- * to connect up the correct user action
52
- */
53
109
  if (!(api !== null && api !== void 0 && (_api$taskDecision = api.taskDecision) !== null && _api$taskDecision !== void 0 && (_api$taskDecision$sha = _api$taskDecision.sharedState.currentState()) !== null && _api$taskDecision$sha !== void 0 && _api$taskDecision$sha.hasEditPermission)) {
54
110
  var _api$taskDecision2, _api$taskDecision2$sh;
55
111
  const requestToEdit = api === null || api === void 0 ? void 0 : (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 ? void 0 : (_api$taskDecision2$sh = _api$taskDecision2.sharedState.currentState()) === null || _api$taskDecision2$sh === void 0 ? void 0 : _api$taskDecision2$sh.requestToEditContent;
@@ -60,6 +116,11 @@ const TaskItemWrapper = ({
60
116
  editorView.dispatch(tr);
61
117
  }
62
118
  };
119
+ const onHandleClick = () => {
120
+ if (fg('editor_request_to_edit_task')) {
121
+ setIsOpen(true);
122
+ }
123
+ };
63
124
  if (!fg('editor_request_to_edit_task')) {
64
125
  return /*#__PURE__*/React.createElement(TaskItem, {
65
126
  taskId: localId,
@@ -74,8 +135,27 @@ const TaskItemWrapper = ({
74
135
  return /*#__PURE__*/React.createElement(Popup, {
75
136
  isOpen: isOpen,
76
137
  onClose: () => setIsOpen(false),
77
- content: () => /*#__PURE__*/React.createElement("div", null, "Content"),
138
+ content: () => {
139
+ var _api$editorViewMode, _api$editorViewMode$s;
140
+ return /*#__PURE__*/React.createElement(Box, {
141
+ xcss: wrapperStyles
142
+ }, /*#__PURE__*/React.createElement(Stack, {
143
+ space: "space.150"
144
+ }, /*#__PURE__*/React.createElement(Heading, {
145
+ size: "xsmall"
146
+ }, formatMessage(tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement(Box, {
147
+ xcss: wrapperBoxStyles
148
+ }, requested ? /*#__PURE__*/React.createElement(RequestedMessage, null) : /*#__PURE__*/React.createElement(RequestToEditButton, {
149
+ 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' ? onHandleEdit : undefined
150
+ }), /*#__PURE__*/React.createElement(Box, {
151
+ xcss: dotStyles
152
+ }), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
153
+ onClick: () => setIsOpen(false),
154
+ xcss: pressableStyles
155
+ }, formatMessage(tasksAndDecisionsMessages.dismiss))))));
156
+ },
78
157
  trigger: triggerProps => {
158
+ var _api$taskDecision3, _api$taskDecision3$sh;
79
159
  return /*#__PURE__*/React.createElement(TaskItem, {
80
160
  taskId: localId,
81
161
  contentRef: forwardRef,
@@ -86,16 +166,17 @@ const TaskItemWrapper = ({
86
166
  isFocused: isFocused,
87
167
  showPlaceholder: showPlaceholder,
88
168
  providers: providerFactory,
89
- disableOnChange: true
169
+ 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)
90
170
  });
91
171
  },
92
- placement: 'bottom'
172
+ placement: 'bottom-start'
93
173
  });
94
174
  };
95
175
  class Task extends ReactNodeView {
96
176
  constructor(...args) {
97
177
  super(...args);
98
178
  _defineProperty(this, "handleOnChange", (taskId, isChecked) => {
179
+ var _this$api, _this$api$taskDecisio, _this$api$taskDecisio2;
99
180
  const {
100
181
  tr
101
182
  } = this.view.state;
@@ -111,6 +192,21 @@ class Task extends ReactNodeView {
111
192
  localId: taskId
112
193
  }));
113
194
  tr.setMeta('scrollIntoView', false);
195
+
196
+ /**
197
+ * This is a test implementation to call the request to edit mutation
198
+ * from within editor when toggling a task where a user has no edit access.
199
+ *
200
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
201
+ * to connect up the correct user action
202
+ */
203
+ 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')) {
204
+ var _this$api2, _this$api2$taskDecisi, _this$api2$taskDecisi2;
205
+ 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;
206
+ if (requestToEdit) {
207
+ requestToEdit();
208
+ }
209
+ }
114
210
  this.view.dispatch(tr);
115
211
  });
116
212
  /**
@@ -133,7 +229,7 @@ class Task extends ReactNodeView {
133
229
  const listSize = resolvedPos.parent.childCount;
134
230
  const listLocalId = resolvedPos.parent.attrs.localId;
135
231
  event.update(payload => {
136
- var _this$api, _this$api$taskDecisio, _this$api$taskDecisio2;
232
+ var _this$api3, _this$api3$taskDecisi, _this$api3$taskDecisi2;
137
233
  const {
138
234
  attributes = {},
139
235
  actionSubject
@@ -150,7 +246,7 @@ class Task extends ReactNodeView {
150
246
  listSize,
151
247
  listLocalId,
152
248
  ...(fg('editor_request_to_edit_task') && {
153
- hasEditPermission: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$taskDecisio = _this$api.taskDecision) === null || _this$api$taskDecisio === void 0 ? void 0 : (_this$api$taskDecisio2 = _this$api$taskDecisio.sharedState.currentState()) === null || _this$api$taskDecisio2 === void 0 ? void 0 : _this$api$taskDecisio2.hasEditPermission
249
+ 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
250
  })
155
251
  }
156
252
  };
@@ -12,24 +12,81 @@ 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';
22
+ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
19
23
  import { fg } from '@atlaskit/platform-feature-flags';
20
24
  import Popup from '@atlaskit/popup';
25
+ import { Box, Pressable, Stack, xcss } from '@atlaskit/primitives';
21
26
  import TaskItem from '../ui/Task';
22
27
  import { useShowPlaceholder } from './hooks/use-show-placeholder';
23
- var TaskItemWrapper = function TaskItemWrapper(_ref) {
24
- var localId = _ref.localId,
25
- forwardRef = _ref.forwardRef,
26
- isDone = _ref.isDone,
27
- onChange = _ref.onChange,
28
- providerFactory = _ref.providerFactory,
29
- isContentNodeEmpty = _ref.isContentNodeEmpty,
30
- api = _ref.api,
31
- getPos = _ref.getPos,
32
- editorView = _ref.editorView;
28
+ var wrapperStyles = xcss({
29
+ display: 'flex',
30
+ flexDirection: 'column',
31
+ maxWidth: '333px',
32
+ paddingTop: 'space.200',
33
+ paddingRight: 'space.300',
34
+ paddingBottom: 'space.200',
35
+ paddingLeft: 'space.300'
36
+ });
37
+ var wrapperBoxStyles = xcss({
38
+ display: 'flex',
39
+ gap: 'space.050',
40
+ color: 'color.text.disabled'
41
+ });
42
+ var dotStyles = xcss({
43
+ margin: 'space.100',
44
+ display: 'inline-block',
45
+ width: '2px',
46
+ height: '2px',
47
+ backgroundColor: 'color.background.accent.blue.bolder',
48
+ borderRadius: '50%',
49
+ transform: 'translateY(2px)'
50
+ });
51
+ var pressableStyles = xcss({
52
+ color: 'color.text.brand',
53
+ backgroundColor: 'color.background.neutral.subtle',
54
+ ':hover': {
55
+ textDecoration: 'underline'
56
+ },
57
+ ':active': {
58
+ color: 'color.text.information'
59
+ },
60
+ padding: 'space.0',
61
+ fontSize: '14px'
62
+ });
63
+ var RequestedMessage = function RequestedMessage() {
64
+ var _useIntl = useIntl(),
65
+ formatMessage = _useIntl.formatMessage;
66
+ return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/React.createElement(EditorDoneIcon, {
67
+ label: "requested-to-edit",
68
+ primaryColor: "var(--ds-icon-disabled, #091E424F)"
69
+ }));
70
+ };
71
+ var RequestToEditButton = function RequestToEditButton(_ref) {
72
+ var onClick = _ref.onClick;
73
+ var _useIntl2 = useIntl(),
74
+ formatMessage = _useIntl2.formatMessage;
75
+ return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
76
+ onClick: onClick,
77
+ xcss: pressableStyles
78
+ }, formatMessage(tasksAndDecisionsMessages.requestToEdit)));
79
+ };
80
+ var TaskItemWrapper = function TaskItemWrapper(_ref2) {
81
+ var localId = _ref2.localId,
82
+ forwardRef = _ref2.forwardRef,
83
+ isDone = _ref2.isDone,
84
+ onChange = _ref2.onChange,
85
+ providerFactory = _ref2.providerFactory,
86
+ isContentNodeEmpty = _ref2.isContentNodeEmpty,
87
+ api = _ref2.api,
88
+ getPos = _ref2.getPos,
89
+ editorView = _ref2.editorView;
33
90
  var _useSharedPluginState = useSharedPluginState(api, ['taskDecision']),
34
91
  taskDecisionState = _useSharedPluginState.taskDecisionState;
35
92
  var isFocused = Boolean((taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.focusedTaskItemLocalId) === localId);
@@ -37,30 +94,28 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
37
94
  _useState2 = _slicedToArray(_useState, 2),
38
95
  isOpen = _useState2[0],
39
96
  setIsOpen = _useState2[1];
97
+ var _useState3 = useState(false),
98
+ _useState4 = _slicedToArray(_useState3, 2),
99
+ requested = _useState4[0],
100
+ setRequested = _useState4[1];
101
+ var _useIntl3 = useIntl(),
102
+ formatMessage = _useIntl3.formatMessage;
40
103
  var showPlaceholder = useShowPlaceholder({
41
104
  editorView: editorView,
42
105
  isContentNodeEmpty: isContentNodeEmpty,
43
106
  getPos: getPos,
44
107
  api: api
45
108
  });
46
- var onHandleClick = function onHandleClick() {
109
+ var onHandleEdit = function onHandleEdit() {
47
110
  if (fg('editor_request_to_edit_task')) {
48
111
  var _api$taskDecision;
49
- setIsOpen(true);
112
+ setRequested(true);
50
113
  var tr = editorView.state.tr;
51
114
  var nodePos = getPos();
52
115
  if (typeof nodePos !== 'number') {
53
- return false;
116
+ return;
54
117
  }
55
118
  tr.setMeta('scrollIntoView', false);
56
-
57
- /**
58
- * This is a test implementation to call the request to edit mutation
59
- * from within editor when toggling a task where a user has no edit access.
60
- *
61
- * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
62
- * to connect up the correct user action
63
- */
64
119
  if (!(api !== null && api !== void 0 && (_api$taskDecision = api.taskDecision) !== null && _api$taskDecision !== void 0 && (_api$taskDecision = _api$taskDecision.sharedState.currentState()) !== null && _api$taskDecision !== void 0 && _api$taskDecision.hasEditPermission)) {
65
120
  var _api$taskDecision2;
66
121
  var requestToEdit = api === null || api === void 0 || (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 || (_api$taskDecision2 = _api$taskDecision2.sharedState.currentState()) === null || _api$taskDecision2 === void 0 ? void 0 : _api$taskDecision2.requestToEditContent;
@@ -71,6 +126,11 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
71
126
  editorView.dispatch(tr);
72
127
  }
73
128
  };
129
+ var onHandleClick = function onHandleClick() {
130
+ if (fg('editor_request_to_edit_task')) {
131
+ setIsOpen(true);
132
+ }
133
+ };
74
134
  if (!fg('editor_request_to_edit_task')) {
75
135
  return /*#__PURE__*/React.createElement(TaskItem, {
76
136
  taskId: localId,
@@ -88,9 +148,28 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
88
148
  return setIsOpen(false);
89
149
  },
90
150
  content: function content() {
91
- return /*#__PURE__*/React.createElement("div", null, "Content");
151
+ var _api$editorViewMode;
152
+ return /*#__PURE__*/React.createElement(Box, {
153
+ xcss: wrapperStyles
154
+ }, /*#__PURE__*/React.createElement(Stack, {
155
+ space: "space.150"
156
+ }, /*#__PURE__*/React.createElement(Heading, {
157
+ size: "xsmall"
158
+ }, formatMessage(tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement(Box, {
159
+ xcss: wrapperBoxStyles
160
+ }, requested ? /*#__PURE__*/React.createElement(RequestedMessage, null) : /*#__PURE__*/React.createElement(RequestToEditButton, {
161
+ 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' ? onHandleEdit : undefined
162
+ }), /*#__PURE__*/React.createElement(Box, {
163
+ xcss: dotStyles
164
+ }), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
165
+ onClick: function onClick() {
166
+ return setIsOpen(false);
167
+ },
168
+ xcss: pressableStyles
169
+ }, formatMessage(tasksAndDecisionsMessages.dismiss))))));
92
170
  },
93
171
  trigger: function trigger(triggerProps) {
172
+ var _api$taskDecision3;
94
173
  return /*#__PURE__*/React.createElement(TaskItem, {
95
174
  taskId: localId,
96
175
  contentRef: forwardRef,
@@ -101,10 +180,10 @@ var TaskItemWrapper = function TaskItemWrapper(_ref) {
101
180
  isFocused: isFocused,
102
181
  showPlaceholder: showPlaceholder,
103
182
  providers: providerFactory,
104
- disableOnChange: true
183
+ 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)
105
184
  });
106
185
  },
107
- placement: 'bottom'
186
+ placement: 'bottom-start'
108
187
  });
109
188
  };
110
189
  var Task = /*#__PURE__*/function (_ReactNodeView) {
@@ -118,6 +197,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
118
197
  }
119
198
  _this = _super.call.apply(_super, [this].concat(args));
120
199
  _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (taskId, isChecked) {
200
+ var _this$api;
121
201
  var tr = _this.view.state.tr;
122
202
  var nodePos = _this.getPos();
123
203
  if (typeof nodePos !== 'number') {
@@ -131,6 +211,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
131
211
  localId: taskId
132
212
  }));
133
213
  tr.setMeta('scrollIntoView', false);
214
+
215
+ /**
216
+ * This is a test implementation to call the request to edit mutation
217
+ * from within editor when toggling a task where a user has no edit access.
218
+ *
219
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
220
+ * to connect up the correct user action
221
+ */
222
+ 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')) {
223
+ var _this$api2;
224
+ 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;
225
+ if (requestToEdit) {
226
+ requestToEdit();
227
+ }
228
+ }
134
229
  _this.view.dispatch(tr);
135
230
  });
136
231
  /**
@@ -153,7 +248,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
153
248
  var listSize = resolvedPos.parent.childCount;
154
249
  var listLocalId = resolvedPos.parent.attrs.localId;
155
250
  event.update(function (payload) {
156
- var _this$api;
251
+ var _this$api3;
157
252
  var _payload$attributes = payload.attributes,
158
253
  attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
159
254
  actionSubject = payload.actionSubject;
@@ -167,7 +262,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
167
262
  listSize: listSize,
168
263
  listLocalId: listLocalId
169
264
  }, fg('editor_request_to_edit_task') && {
170
- hasEditPermission: (_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 ? void 0 : _this$api.hasEditPermission
265
+ 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
266
  })
172
267
  });
173
268
  });
@@ -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.4",
3
+ "version": "2.6.6",
4
4
  "description": "Tasks and decisions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,15 +37,18 @@
37
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",
42
- "@atlaskit/icon": "^22.18.0",
43
+ "@atlaskit/heading": "2.4.5",
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.10.0",
49
+ "@atlaskit/task-decision": "^17.11.0",
47
50
  "@atlaskit/tmp-editor-statsig": "^2.1.8",
48
- "@atlaskit/tokens": "^1.61.0",
51
+ "@atlaskit/tokens": "1.61.0",
49
52
  "@babel/runtime": "^7.0.0",
50
53
  "@emotion/react": "^11.7.1"
51
54
  },