@atlaskit/editor-plugin-tasks-and-decisions 2.5.0 → 2.6.0

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,20 @@
1
1
  # @atlaskit/editor-plugin-tasks-and-decisions
2
2
 
3
+ ## 2.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`d70ae7f097e84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d70ae7f097e84) -
8
+ ED-24767 create useRequestToEditContent hook and call from tasks and decisions plugin
9
+
10
+ ## 2.5.1
11
+
12
+ ### Patch Changes
13
+
14
+ - [#141679](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141679)
15
+ [`b005c6bc8be60`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b005c6bc8be60) -
16
+ improve decision item on SSR
17
+
3
18
  ## 2.5.0
4
19
 
5
20
  ### Minor Changes
@@ -65,6 +65,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
65
65
  }
66
66
  _this = _super.call.apply(_super, [this].concat(args));
67
67
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (taskId, isChecked) {
68
+ var _this$api;
68
69
  var tr = _this.view.state.tr;
69
70
  var nodePos = _this.getPos();
70
71
  if (typeof nodePos !== 'number') {
@@ -78,6 +79,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
78
79
  localId: taskId
79
80
  }));
80
81
  tr.setMeta('scrollIntoView', false);
82
+
83
+ /**
84
+ * This is a test implementation to call the request to edit mutation
85
+ * from within editor when toggling a task where a user has no edit access.
86
+ *
87
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
88
+ * to connect up the correct user action
89
+ */
90
+ 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')) {
91
+ var _this$api2;
92
+ 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;
93
+ if (requestToEdit) {
94
+ requestToEdit();
95
+ }
96
+ }
81
97
  _this.view.dispatch(tr);
82
98
  });
83
99
  /**
@@ -100,7 +116,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
100
116
  var listSize = resolvedPos.parent.childCount;
101
117
  var listLocalId = resolvedPos.parent.attrs.localId;
102
118
  event.update(function (payload) {
103
- var _this$api;
119
+ var _this$api3;
104
120
  var _payload$attributes = payload.attributes,
105
121
  attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
106
122
  actionSubject = payload.actionSubject;
@@ -114,7 +130,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
114
130
  listSize: listSize,
115
131
  listLocalId: listLocalId
116
132
  }, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') && {
117
- 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
133
+ 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
118
134
  })
119
135
  });
120
136
  });
@@ -116,6 +116,7 @@ var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAn
116
116
  consumeTabs = _ref2$config2.consumeTabs,
117
117
  useLongPressSelection = _ref2$config2.useLongPressSelection,
118
118
  hasEditPermission = _ref2$config2.hasEditPermission,
119
+ requestToEditContent = _ref2$config2.requestToEditContent,
119
120
  api = _ref2.api;
120
121
  var getIdentifierProvider = function getIdentifierProvider() {
121
122
  var _api$contextIdentifie;
@@ -150,7 +151,8 @@ var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAn
150
151
  isInsideTask: (0, _helpers.isInsideTask)(editorState),
151
152
  indentDisabled: itemIndex === 0 || indentLevel >= _indentation.MAX_INDENTATION_LEVEL,
152
153
  outdentDisabled: indentLevel <= 1,
153
- hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission
154
+ hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission,
155
+ requestToEditContent: pluginState === null || pluginState === void 0 ? void 0 : pluginState.requestToEditContent
154
156
  };
155
157
  },
156
158
  actions: {
@@ -166,7 +168,7 @@ var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAn
166
168
  providerFactory = _ref3.providerFactory,
167
169
  eventDispatcher = _ref3.eventDispatcher,
168
170
  dispatch = _ref3.dispatch;
169
- return (0, _main.createPlugin)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission);
171
+ return (0, _main.createPlugin)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, requestToEditContent);
170
172
  }
171
173
  }, {
172
174
  name: 'tasksAndDecisionsInputRule',
@@ -31,6 +31,7 @@ function nodesBetweenChanged(tr, f, startPos) {
31
31
  function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api) {
32
32
  var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
33
33
  var hasEditPermission = arguments.length > 6 ? arguments[6] : undefined;
34
+ var requestToEditContent = arguments.length > 7 ? arguments[7] : undefined;
34
35
  return new _safePlugin.SafePlugin({
35
36
  props: {
36
37
  nodeViews: {
@@ -166,7 +167,8 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
166
167
  init: function init() {
167
168
  return {
168
169
  insideTaskDecisionItem: false,
169
- hasEditPermission: hasEditPermission
170
+ hasEditPermission: hasEditPermission,
171
+ requestToEditContent: requestToEditContent
170
172
  };
171
173
  },
172
174
  apply: function apply(tr, pluginState) {
@@ -8,12 +8,13 @@ exports.decisionItemSpecWithFixedToDOM = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _adfSchema = require("@atlaskit/adf-schema");
10
10
  var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
14
  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; }
14
15
  // @nodeSpecException:toDOM patch
15
16
  var decisionItemSpecWithFixedToDOM = exports.decisionItemSpecWithFixedToDOM = function decisionItemSpecWithFixedToDOM() {
16
- if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
17
+ if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) && !(0, _platformFeatureFlags.fg)('platform_editor_action_decisions_ssr_fix')) {
17
18
  return _adfSchema.decisionItem;
18
19
  }
19
20
  return _objectSpread(_objectSpread({}, _adfSchema.decisionItem), {}, {
@@ -24,26 +25,53 @@ var decisionItemSpecWithFixedToDOM = exports.decisionItemSpecWithFixedToDOM = fu
24
25
  var attrs = {
25
26
  'data-decision-local-id': localId || 'local-decision',
26
27
  'data-decision-state': state,
27
- class: 'decisionItemView-content-wrap',
28
+ class: 'decisionItemView-content-wrap'
29
+ };
30
+
31
+ // TODO: can copy raw SVG from DST later
32
+ var decisionItemIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
33
+ decisionItemIcon.setAttribute('width', '24');
34
+ decisionItemIcon.setAttribute('height', '24');
35
+ decisionItemIcon.setAttribute('viewBox', '0 0 24 24');
36
+ decisionItemIcon.setAttribute('role', 'presentation');
37
+ var decisionItemSvgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
38
+ decisionItemSvgPath.setAttribute('fill', 'currentColor');
39
+ decisionItemSvgPath.setAttribute('fill-rule', 'evenodd');
40
+ decisionItemSvgPath.setAttribute('d', 'm9.414 8 3.293 3.293c.187.187.293.442.293.707v5a1 1 0 0 1-2 0v-4.586l-3-3V10.5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 0 2zm8.293-1.707a1 1 0 0 1 0 1.414l-2.5 2.5a.997.997 0 0 1-1.414 0 1 1 0 0 1 0-1.414l2.5-2.5a1 1 0 0 1 1.414 0');
41
+ decisionItemIcon.setAttribute('style', (0, _lazyNodeView.convertToInlineCss)({
42
+ width: '32px',
43
+ height: '32px'
44
+ }));
45
+ decisionItemIcon.appendChild(decisionItemSvgPath);
46
+ var showPlaceholder = node.content.size === 0;
47
+ return ['li', attrs, ['div', {
48
+ 'data-decision-wrapper': true,
49
+ 'data-testid': 'elements-decision-item',
28
50
  // Styles to match `packages/elements/task-decision/src/components/styles.ts`
29
51
  style: (0, _lazyNodeView.convertToInlineCss)({
30
- background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
52
+ background: "var(--ds-background-neutral, #091E420F)",
31
53
  padding: "var(--ds-space-100, 8px)",
54
+ paddingLeft: "var(--ds-space-150, 12px)",
32
55
  margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
33
56
  display: 'flex',
34
- borderRadius: "var(--ds-border-radius, 4px)"
57
+ borderRadius: "var(--ds-border-radius-100, 3px)"
35
58
  })
36
- };
37
- return ['li', attrs, ['span', {
59
+ }, ['span', {
38
60
  style: (0, _lazyNodeView.convertToInlineCss)({
39
61
  width: '16px',
40
62
  height: '16px',
41
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)", " 0 0")
63
+ margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
64
+ color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)"
65
+ }),
66
+ contentEditable: 'false'
67
+ }, ['span', {
68
+ style: (0, _lazyNodeView.convertToInlineCss)({
69
+ margin: "var(--ds-space-negative-100, -8px)",
70
+ display: 'inline-block',
71
+ width: '32px',
72
+ height: '32px'
42
73
  })
43
- }], ['div', {
44
- 'data-decision-wrapper': true,
45
- 'data-testid': 'elements-decision-item'
46
- }, ['div', {
74
+ }, decisionItemIcon]], ['div', {
47
75
  'data-component': 'content'
48
76
  }, ['div', {
49
77
  class: 'decision-item'
@@ -42,6 +42,7 @@ class Task extends ReactNodeView {
42
42
  constructor(...args) {
43
43
  super(...args);
44
44
  _defineProperty(this, "handleOnChange", (taskId, isChecked) => {
45
+ var _this$api, _this$api$taskDecisio, _this$api$taskDecisio2;
45
46
  const {
46
47
  tr
47
48
  } = this.view.state;
@@ -57,6 +58,21 @@ class Task extends ReactNodeView {
57
58
  localId: taskId
58
59
  }));
59
60
  tr.setMeta('scrollIntoView', false);
61
+
62
+ /**
63
+ * This is a test implementation to call the request to edit mutation
64
+ * from within editor when toggling a task where a user has no edit access.
65
+ *
66
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
67
+ * to connect up the correct user action
68
+ */
69
+ 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')) {
70
+ var _this$api2, _this$api2$taskDecisi, _this$api2$taskDecisi2;
71
+ 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;
72
+ if (requestToEdit) {
73
+ requestToEdit();
74
+ }
75
+ }
60
76
  this.view.dispatch(tr);
61
77
  });
62
78
  /**
@@ -79,7 +95,7 @@ class Task extends ReactNodeView {
79
95
  const listSize = resolvedPos.parent.childCount;
80
96
  const listLocalId = resolvedPos.parent.attrs.localId;
81
97
  event.update(payload => {
82
- var _this$api, _this$api$taskDecisio, _this$api$taskDecisio2;
98
+ var _this$api3, _this$api3$taskDecisi, _this$api3$taskDecisi2;
83
99
  const {
84
100
  attributes = {},
85
101
  actionSubject
@@ -96,7 +112,7 @@ class Task extends ReactNodeView {
96
112
  listSize,
97
113
  listLocalId,
98
114
  ...(fg('editor_request_to_edit_task') && {
99
- 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
115
+ 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
100
116
  })
101
117
  }
102
118
  };
@@ -104,7 +104,8 @@ export const tasksAndDecisionsPlugin = ({
104
104
  allowNestedTasks,
105
105
  consumeTabs,
106
106
  useLongPressSelection,
107
- hasEditPermission
107
+ hasEditPermission,
108
+ requestToEditContent
108
109
  } = {},
109
110
  api
110
111
  }) => {
@@ -142,7 +143,8 @@ export const tasksAndDecisionsPlugin = ({
142
143
  isInsideTask: isInsideTask(editorState),
143
144
  indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL,
144
145
  outdentDisabled: indentLevel <= 1,
145
- hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission
146
+ hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission,
147
+ requestToEditContent: pluginState === null || pluginState === void 0 ? void 0 : pluginState.requestToEditContent
146
148
  };
147
149
  },
148
150
  actions: {
@@ -159,7 +161,7 @@ export const tasksAndDecisionsPlugin = ({
159
161
  eventDispatcher,
160
162
  dispatch
161
163
  }) => {
162
- return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission);
164
+ return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, requestToEditContent);
163
165
  }
164
166
  }, {
165
167
  name: 'tasksAndDecisionsInputRule',
@@ -16,7 +16,7 @@ function nodesBetweenChanged(tr, f, startPos) {
16
16
  }
17
17
  tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
18
18
  }
19
- export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection = false, hasEditPermission) {
19
+ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection = false, hasEditPermission, requestToEditContent) {
20
20
  return new SafePlugin({
21
21
  props: {
22
22
  nodeViews: {
@@ -160,7 +160,8 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
160
160
  init() {
161
161
  return {
162
162
  insideTaskDecisionItem: false,
163
- hasEditPermission
163
+ hasEditPermission,
164
+ requestToEditContent
164
165
  };
165
166
  },
166
167
  apply(tr, pluginState) {
@@ -1,9 +1,10 @@
1
1
  import { decisionItem } from '@atlaskit/adf-schema';
2
2
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
3
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
5
  // @nodeSpecException:toDOM patch
5
6
  export const decisionItemSpecWithFixedToDOM = () => {
6
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
7
+ if (editorExperiment('platform_editor_exp_lazy_node_views', false) && !fg('platform_editor_action_decisions_ssr_fix')) {
7
8
  return decisionItem;
8
9
  }
9
10
  return {
@@ -16,26 +17,53 @@ export const decisionItemSpecWithFixedToDOM = () => {
16
17
  const attrs = {
17
18
  'data-decision-local-id': localId || 'local-decision',
18
19
  'data-decision-state': state,
19
- class: 'decisionItemView-content-wrap',
20
+ class: 'decisionItemView-content-wrap'
21
+ };
22
+
23
+ // TODO: can copy raw SVG from DST later
24
+ const decisionItemIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
25
+ decisionItemIcon.setAttribute('width', '24');
26
+ decisionItemIcon.setAttribute('height', '24');
27
+ decisionItemIcon.setAttribute('viewBox', '0 0 24 24');
28
+ decisionItemIcon.setAttribute('role', 'presentation');
29
+ const decisionItemSvgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
30
+ decisionItemSvgPath.setAttribute('fill', 'currentColor');
31
+ decisionItemSvgPath.setAttribute('fill-rule', 'evenodd');
32
+ decisionItemSvgPath.setAttribute('d', 'm9.414 8 3.293 3.293c.187.187.293.442.293.707v5a1 1 0 0 1-2 0v-4.586l-3-3V10.5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 0 2zm8.293-1.707a1 1 0 0 1 0 1.414l-2.5 2.5a.997.997 0 0 1-1.414 0 1 1 0 0 1 0-1.414l2.5-2.5a1 1 0 0 1 1.414 0');
33
+ decisionItemIcon.setAttribute('style', convertToInlineCss({
34
+ width: '32px',
35
+ height: '32px'
36
+ }));
37
+ decisionItemIcon.appendChild(decisionItemSvgPath);
38
+ const showPlaceholder = node.content.size === 0;
39
+ return ['li', attrs, ['div', {
40
+ 'data-decision-wrapper': true,
41
+ 'data-testid': 'elements-decision-item',
20
42
  // Styles to match `packages/elements/task-decision/src/components/styles.ts`
21
43
  style: convertToInlineCss({
22
- background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
44
+ background: "var(--ds-background-neutral, #091E420F)",
23
45
  padding: "var(--ds-space-100, 8px)",
46
+ paddingLeft: "var(--ds-space-150, 12px)",
24
47
  margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
25
48
  display: 'flex',
26
- borderRadius: "var(--ds-border-radius, 4px)"
49
+ borderRadius: "var(--ds-border-radius-100, 3px)"
27
50
  })
28
- };
29
- return ['li', attrs, ['span', {
51
+ }, ['span', {
30
52
  style: convertToInlineCss({
31
53
  width: '16px',
32
54
  height: '16px',
33
- margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"} 0 0`
55
+ margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"} 0 0`,
56
+ color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)"
57
+ }),
58
+ contentEditable: 'false'
59
+ }, ['span', {
60
+ style: convertToInlineCss({
61
+ margin: "var(--ds-space-negative-100, -8px)",
62
+ display: 'inline-block',
63
+ width: '32px',
64
+ height: '32px'
34
65
  })
35
- }], ['div', {
36
- 'data-decision-wrapper': true,
37
- 'data-testid': 'elements-decision-item'
38
- }, ['div', {
66
+ }, decisionItemIcon]], ['div', {
39
67
  'data-component': 'content'
40
68
  }, ['div', {
41
69
  class: 'decision-item'
@@ -58,6 +58,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
58
58
  }
59
59
  _this = _super.call.apply(_super, [this].concat(args));
60
60
  _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (taskId, isChecked) {
61
+ var _this$api;
61
62
  var tr = _this.view.state.tr;
62
63
  var nodePos = _this.getPos();
63
64
  if (typeof nodePos !== 'number') {
@@ -71,6 +72,21 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
71
72
  localId: taskId
72
73
  }));
73
74
  tr.setMeta('scrollIntoView', false);
75
+
76
+ /**
77
+ * This is a test implementation to call the request to edit mutation
78
+ * from within editor when toggling a task where a user has no edit access.
79
+ *
80
+ * This will eventially be handled by https://product-fabric.atlassian.net/browse/ED-24773
81
+ * to connect up the correct user action
82
+ */
83
+ 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')) {
84
+ var _this$api2;
85
+ 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;
86
+ if (requestToEdit) {
87
+ requestToEdit();
88
+ }
89
+ }
74
90
  _this.view.dispatch(tr);
75
91
  });
76
92
  /**
@@ -93,7 +109,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
93
109
  var listSize = resolvedPos.parent.childCount;
94
110
  var listLocalId = resolvedPos.parent.attrs.localId;
95
111
  event.update(function (payload) {
96
- var _this$api;
112
+ var _this$api3;
97
113
  var _payload$attributes = payload.attributes,
98
114
  attributes = _payload$attributes === void 0 ? {} : _payload$attributes,
99
115
  actionSubject = payload.actionSubject;
@@ -107,7 +123,7 @@ var Task = /*#__PURE__*/function (_ReactNodeView) {
107
123
  listSize: listSize,
108
124
  listLocalId: listLocalId
109
125
  }, fg('editor_request_to_edit_task') && {
110
- 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
126
+ 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
111
127
  })
112
128
  });
113
129
  });
@@ -108,6 +108,7 @@ export var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
108
108
  consumeTabs = _ref2$config2.consumeTabs,
109
109
  useLongPressSelection = _ref2$config2.useLongPressSelection,
110
110
  hasEditPermission = _ref2$config2.hasEditPermission,
111
+ requestToEditContent = _ref2$config2.requestToEditContent,
111
112
  api = _ref2.api;
112
113
  var getIdentifierProvider = function getIdentifierProvider() {
113
114
  var _api$contextIdentifie;
@@ -142,7 +143,8 @@ export var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
142
143
  isInsideTask: isInsideTask(editorState),
143
144
  indentDisabled: itemIndex === 0 || indentLevel >= MAX_INDENTATION_LEVEL,
144
145
  outdentDisabled: indentLevel <= 1,
145
- hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission
146
+ hasEditPermission: pluginState === null || pluginState === void 0 ? void 0 : pluginState.hasEditPermission,
147
+ requestToEditContent: pluginState === null || pluginState === void 0 ? void 0 : pluginState.requestToEditContent
146
148
  };
147
149
  },
148
150
  actions: {
@@ -158,7 +160,7 @@ export var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
158
160
  providerFactory = _ref3.providerFactory,
159
161
  eventDispatcher = _ref3.eventDispatcher,
160
162
  dispatch = _ref3.dispatch;
161
- return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission);
163
+ return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, requestToEditContent);
162
164
  }
163
165
  }, {
164
166
  name: 'tasksAndDecisionsInputRule',
@@ -24,6 +24,7 @@ function nodesBetweenChanged(tr, f, startPos) {
24
24
  export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api) {
25
25
  var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
26
26
  var hasEditPermission = arguments.length > 6 ? arguments[6] : undefined;
27
+ var requestToEditContent = arguments.length > 7 ? arguments[7] : undefined;
27
28
  return new SafePlugin({
28
29
  props: {
29
30
  nodeViews: {
@@ -159,7 +160,8 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
159
160
  init: function init() {
160
161
  return {
161
162
  insideTaskDecisionItem: false,
162
- hasEditPermission: hasEditPermission
163
+ hasEditPermission: hasEditPermission,
164
+ requestToEditContent: requestToEditContent
163
165
  };
164
166
  },
165
167
  apply: function apply(tr, pluginState) {
@@ -3,10 +3,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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) { _defineProperty(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; }
4
4
  import { decisionItem } from '@atlaskit/adf-schema';
5
5
  import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
8
  // @nodeSpecException:toDOM patch
8
9
  export var decisionItemSpecWithFixedToDOM = function decisionItemSpecWithFixedToDOM() {
9
- if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
10
+ if (editorExperiment('platform_editor_exp_lazy_node_views', false) && !fg('platform_editor_action_decisions_ssr_fix')) {
10
11
  return decisionItem;
11
12
  }
12
13
  return _objectSpread(_objectSpread({}, decisionItem), {}, {
@@ -17,26 +18,53 @@ export var decisionItemSpecWithFixedToDOM = function decisionItemSpecWithFixedTo
17
18
  var attrs = {
18
19
  'data-decision-local-id': localId || 'local-decision',
19
20
  'data-decision-state': state,
20
- class: 'decisionItemView-content-wrap',
21
+ class: 'decisionItemView-content-wrap'
22
+ };
23
+
24
+ // TODO: can copy raw SVG from DST later
25
+ var decisionItemIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
26
+ decisionItemIcon.setAttribute('width', '24');
27
+ decisionItemIcon.setAttribute('height', '24');
28
+ decisionItemIcon.setAttribute('viewBox', '0 0 24 24');
29
+ decisionItemIcon.setAttribute('role', 'presentation');
30
+ var decisionItemSvgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
31
+ decisionItemSvgPath.setAttribute('fill', 'currentColor');
32
+ decisionItemSvgPath.setAttribute('fill-rule', 'evenodd');
33
+ decisionItemSvgPath.setAttribute('d', 'm9.414 8 3.293 3.293c.187.187.293.442.293.707v5a1 1 0 0 1-2 0v-4.586l-3-3V10.5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 0 2zm8.293-1.707a1 1 0 0 1 0 1.414l-2.5 2.5a.997.997 0 0 1-1.414 0 1 1 0 0 1 0-1.414l2.5-2.5a1 1 0 0 1 1.414 0');
34
+ decisionItemIcon.setAttribute('style', convertToInlineCss({
35
+ width: '32px',
36
+ height: '32px'
37
+ }));
38
+ decisionItemIcon.appendChild(decisionItemSvgPath);
39
+ var showPlaceholder = node.content.size === 0;
40
+ return ['li', attrs, ['div', {
41
+ 'data-decision-wrapper': true,
42
+ 'data-testid': 'elements-decision-item',
21
43
  // Styles to match `packages/elements/task-decision/src/components/styles.ts`
22
44
  style: convertToInlineCss({
23
- background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
45
+ background: "var(--ds-background-neutral, #091E420F)",
24
46
  padding: "var(--ds-space-100, 8px)",
47
+ paddingLeft: "var(--ds-space-150, 12px)",
25
48
  margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
26
49
  display: 'flex',
27
- borderRadius: "var(--ds-border-radius, 4px)"
50
+ borderRadius: "var(--ds-border-radius-100, 3px)"
28
51
  })
29
- };
30
- return ['li', attrs, ['span', {
52
+ }, ['span', {
31
53
  style: convertToInlineCss({
32
54
  width: '16px',
33
55
  height: '16px',
34
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)", " 0 0")
56
+ margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
57
+ color: showPlaceholder ? "var(--ds-icon-subtle, #626F86)" : "var(--ds-icon-success, #22A06B)"
58
+ }),
59
+ contentEditable: 'false'
60
+ }, ['span', {
61
+ style: convertToInlineCss({
62
+ margin: "var(--ds-space-negative-100, -8px)",
63
+ display: 'inline-block',
64
+ width: '32px',
65
+ height: '32px'
35
66
  })
36
- }], ['div', {
37
- 'data-decision-wrapper': true,
38
- 'data-testid': 'elements-decision-item'
39
- }, ['div', {
67
+ }, decisionItemIcon]], ['div', {
40
68
  'data-component': 'content'
41
69
  }, ['div', {
42
70
  class: 'decision-item'
@@ -4,4 +4,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
5
5
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
6
6
  import type { TasksAndDecisionsPlugin } from '../types';
7
- export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean): SafePlugin<any>;
7
+ export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean, requestToEditContent?: () => void): SafePlugin<any>;
@@ -30,9 +30,6 @@ export type AddItemTransactionCreator = (opts: {
30
30
  * Interface representing the options for the TaskDecisionPlugin.
31
31
  * Extends the LongPressSelectionPluginOptions interface.
32
32
  */
33
- /**
34
- * Represents the options for the TaskDecisionPlugin.
35
- */
36
33
  export interface TaskDecisionPluginOptions extends LongPressSelectionPluginOptions {
37
34
  /**
38
35
  * Indicates whether nested tasks are allowed.
@@ -52,7 +49,7 @@ export interface TaskDecisionPluginOptions extends LongPressSelectionPluginOptio
52
49
  /**
53
50
  * Function to request edit permission.
54
51
  */
55
- requestEditPermission?: () => void;
52
+ requestToEditContent?: () => void;
56
53
  }
57
54
  export type TaskAndDecisionsSharedState = {
58
55
  focusedTaskItemLocalId: string | null;
@@ -60,6 +57,7 @@ export type TaskAndDecisionsSharedState = {
60
57
  outdentDisabled: boolean;
61
58
  isInsideTask: boolean;
62
59
  hasEditPermission?: boolean;
60
+ requestToEditContent?: () => void;
63
61
  };
64
62
  export type TasksAndDecisionsPlugin = NextEditorPlugin<'taskDecision', {
65
63
  pluginConfiguration: TaskDecisionPluginOptions | undefined;
@@ -4,4 +4,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
5
5
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
6
6
  import type { TasksAndDecisionsPlugin } from '../types';
7
- export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean): SafePlugin<any>;
7
+ export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean, requestToEditContent?: () => void): SafePlugin<any>;
@@ -30,9 +30,6 @@ export type AddItemTransactionCreator = (opts: {
30
30
  * Interface representing the options for the TaskDecisionPlugin.
31
31
  * Extends the LongPressSelectionPluginOptions interface.
32
32
  */
33
- /**
34
- * Represents the options for the TaskDecisionPlugin.
35
- */
36
33
  export interface TaskDecisionPluginOptions extends LongPressSelectionPluginOptions {
37
34
  /**
38
35
  * Indicates whether nested tasks are allowed.
@@ -52,7 +49,7 @@ export interface TaskDecisionPluginOptions extends LongPressSelectionPluginOptio
52
49
  /**
53
50
  * Function to request edit permission.
54
51
  */
55
- requestEditPermission?: () => void;
52
+ requestToEditContent?: () => void;
56
53
  }
57
54
  export type TaskAndDecisionsSharedState = {
58
55
  focusedTaskItemLocalId: string | null;
@@ -60,6 +57,7 @@ export type TaskAndDecisionsSharedState = {
60
57
  outdentDisabled: boolean;
61
58
  isInsideTask: boolean;
62
59
  hasEditPermission?: boolean;
60
+ requestToEditContent?: () => void;
63
61
  };
64
62
  export type TasksAndDecisionsPlugin = NextEditorPlugin<'taskDecision', {
65
63
  pluginConfiguration: TaskDecisionPluginOptions | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-tasks-and-decisions",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "description": "Tasks and decisions plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,17 +34,17 @@
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": "^89.1.0",
37
+ "@atlaskit/editor-common": "^89.3.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
39
39
  "@atlaskit/editor-plugin-context-identifier": "^1.3.0",
40
40
  "@atlaskit/editor-plugin-type-ahead": "^1.8.0",
41
41
  "@atlaskit/editor-prosemirror": "6.0.0",
42
42
  "@atlaskit/icon": "^22.18.0",
43
- "@atlaskit/platform-feature-flags": "0.3.0",
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
44
44
  "@atlaskit/prosemirror-input-rules": "^3.2.0",
45
45
  "@atlaskit/task-decision": "^17.10.0",
46
46
  "@atlaskit/tmp-editor-statsig": "^2.1.8",
47
- "@atlaskit/tokens": "^1.59.0",
47
+ "@atlaskit/tokens": "^1.60.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1"
50
50
  },
@@ -99,6 +99,9 @@
99
99
  "platform-feature-flags": {
100
100
  "editor_request_to_edit_task": {
101
101
  "type": "boolean"
102
+ },
103
+ "platform_editor_action_decisions_ssr_fix": {
104
+ "type": "boolean"
102
105
  }
103
106
  }
104
107
  }