@atlaskit/editor-plugin-date 4.2.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/cjs/nodeviews/DateNodeView.js +43 -39
- package/dist/cjs/nodeviews/date.js +1 -1
- package/dist/cjs/nodeviews/dateNodeSpec.js +2 -3
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/cjs/pm-plugins/utils.js +18 -7
- package/dist/es2019/nodeviews/DateNodeView.js +42 -38
- package/dist/es2019/nodeviews/date.js +1 -1
- package/dist/es2019/nodeviews/dateNodeSpec.js +2 -3
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/es2019/pm-plugins/utils.js +18 -7
- package/dist/esm/nodeviews/DateNodeView.js +43 -39
- package/dist/esm/nodeviews/date.js +1 -1
- package/dist/esm/nodeviews/dateNodeSpec.js +2 -3
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/esm/pm-plugins/utils.js +18 -7
- package/dist/types/nodeviews/DateNodeView.d.ts +10 -8
- package/dist/types-ts4.5/nodeviews/DateNodeView.d.ts +10 -8
- package/package.json +13 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-date
|
|
2
2
|
|
|
3
|
+
## 4.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#148798](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148798)
|
|
8
|
+
[`8112e98809756`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8112e98809756) -
|
|
9
|
+
[No Issue] Clean up virtualization feature flag
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 4.3.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#149446](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/149446)
|
|
17
|
+
[`2f6846b2a166e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f6846b2a166e) -
|
|
18
|
+
Dismissed date popup when date node is deleted from the document
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- [#148210](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148210)
|
|
23
|
+
[`10eb0681e9681`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10eb0681e9681) -
|
|
24
|
+
fix SSR issues
|
|
25
|
+
|
|
3
26
|
## 4.2.0
|
|
4
27
|
|
|
5
28
|
### Minor Changes
|
|
@@ -8,56 +8,60 @@ exports.DateNodeView = void 0;
|
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _bindEventListener = require("bind-event-listener");
|
|
12
|
-
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
13
11
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
14
12
|
var _actions = require("../pm-plugins/actions");
|
|
15
13
|
var _dateNodeSpec = require("./dateNodeSpec");
|
|
16
14
|
var DateNodeView = exports.DateNodeView = /*#__PURE__*/function () {
|
|
17
|
-
function DateNodeView(node, view, getPos, intl) {
|
|
15
|
+
function DateNodeView(node, view, getPos, intl, decorations) {
|
|
16
|
+
var _this = this;
|
|
18
17
|
(0, _classCallCheck2.default)(this, DateNodeView);
|
|
19
|
-
(0, _defineProperty2.default)(this, "
|
|
18
|
+
(0, _defineProperty2.default)(this, "parentTaskState", '');
|
|
20
19
|
this.node = node;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
} catch (error) {
|
|
39
|
-
DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
|
|
40
|
-
this.renderFallback();
|
|
41
|
-
}
|
|
20
|
+
this.intl = intl;
|
|
21
|
+
this.view = view;
|
|
22
|
+
this.getPos = getPos;
|
|
23
|
+
var spec = (0, _dateNodeSpec.dateToDOM)(node, this.view.state, this.getPos, this.intl);
|
|
24
|
+
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
|
|
25
|
+
dom = _DOMSerializer$render.dom;
|
|
26
|
+
this.dom = dom;
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
29
|
+
dom.addEventListener('click', function (event) {
|
|
30
|
+
event.stopImmediatePropagation();
|
|
31
|
+
var _this$view = _this.view,
|
|
32
|
+
state = _this$view.state,
|
|
33
|
+
dispatch = _this$view.dispatch;
|
|
34
|
+
(0, _actions.setDatePickerAt)(state.selection.from)(state, dispatch);
|
|
35
|
+
});
|
|
36
|
+
this.parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
42
37
|
}
|
|
43
38
|
return (0, _createClass2.default)(DateNodeView, [{
|
|
44
|
-
key: "
|
|
45
|
-
value: function
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
39
|
+
key: "update",
|
|
40
|
+
value: function update(node, decorations) {
|
|
41
|
+
// we're only interested in two scenarios to trigger a DOM update:
|
|
42
|
+
// 1. the date value (timestamp) has changed
|
|
43
|
+
// 2. A wrapping taskitem state (if present) has changed
|
|
44
|
+
// in all other cases, we tell prosemirror to ignore DOM updates
|
|
45
|
+
// if new changes are added to the DOM structure, they will need to be
|
|
46
|
+
// coded here
|
|
47
|
+
var hasDateChanged = node.attrs.timestamp !== this.node.attrs.timestamp;
|
|
48
|
+
var parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
49
|
+
var parentTaskStateChanged = parentTaskState !== this.parentTaskState;
|
|
50
|
+
|
|
51
|
+
// update local state after comparisons ...
|
|
52
|
+
this.parentTaskState = parentTaskState;
|
|
53
|
+
this.node = node;
|
|
54
|
+
var skipProseMirrorDomUpdate = !hasDateChanged && !parentTaskStateChanged;
|
|
55
|
+
return skipProseMirrorDomUpdate;
|
|
54
56
|
}
|
|
55
57
|
}], [{
|
|
56
|
-
key: "
|
|
57
|
-
value: function
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
key: "getParentTaskState",
|
|
59
|
+
value: function getParentTaskState(decorations) {
|
|
60
|
+
var _parentTaskDecoration, _parentTaskDecoration2;
|
|
61
|
+
var parentTaskDecoration = decorations.find(function (d) {
|
|
62
|
+
return d.spec.dataTaskNodeCheckState !== undefined;
|
|
60
63
|
});
|
|
64
|
+
return (_parentTaskDecoration = parentTaskDecoration === null || parentTaskDecoration === void 0 || (_parentTaskDecoration2 = parentTaskDecoration.spec) === null || _parentTaskDecoration2 === void 0 ? void 0 : _parentTaskDecoration2.dataTaskNodeCheckState) !== null && _parentTaskDecoration !== void 0 ? _parentTaskDecoration : '';
|
|
61
65
|
}
|
|
62
66
|
}]);
|
|
63
67
|
}();
|
|
@@ -21,7 +21,7 @@ function DateNodeView(props) {
|
|
|
21
21
|
color = _getDateInformation.color;
|
|
22
22
|
return (
|
|
23
23
|
/*#__PURE__*/
|
|
24
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
24
|
+
// eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
25
25
|
_react.default.createElement("span", {
|
|
26
26
|
className: _styles.DateSharedCssClassName.DATE_WRAPPER,
|
|
27
27
|
onClick: handleClick
|
|
@@ -8,15 +8,14 @@ exports.dateToDOMvirtualization = exports.dateToDOM = exports.dateNodeSpec = voi
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _reactIntlNext = require("react-intl-next");
|
|
10
10
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
11
|
+
var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
11
12
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
12
13
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
13
14
|
var _whitespace = require("@atlaskit/editor-common/whitespace");
|
|
14
15
|
var _colors = require("@atlaskit/theme/colors");
|
|
15
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
16
16
|
var _utils2 = require("./utils");
|
|
17
17
|
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; }
|
|
18
18
|
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; }
|
|
19
|
-
var isSSR = Boolean(process.env.REACT_SSR);
|
|
20
19
|
var intlRef;
|
|
21
20
|
|
|
22
21
|
/**
|
|
@@ -26,7 +25,7 @@ var intlRef;
|
|
|
26
25
|
* @returns
|
|
27
26
|
*/
|
|
28
27
|
var dateNodeSpec = exports.dateNodeSpec = function dateNodeSpec() {
|
|
29
|
-
if (
|
|
28
|
+
if ((0, _coreUtils.isSSR)()) {
|
|
30
29
|
return _adfSchema.date;
|
|
31
30
|
}
|
|
32
31
|
return _objectSpread(_objectSpread({}, _adfSchema.date), {}, {
|
|
@@ -35,7 +35,7 @@ var createPlugin = function createPlugin(pmPluginFactoryParams) {
|
|
|
35
35
|
if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
36
36
|
exposure: true
|
|
37
37
|
})) {
|
|
38
|
-
return new _DateNodeView.DateNodeView(node, view, getPos, pmPluginFactoryParams.getIntl());
|
|
38
|
+
return new _DateNodeView.DateNodeView(node, view, getPos, pmPluginFactoryParams.getIntl(), decorations);
|
|
39
39
|
}
|
|
40
40
|
return (0, _reactNodeView.getInlineNodeViewProducer)({
|
|
41
41
|
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
@@ -9,6 +9,7 @@ exports.onSelectionChanged = onSelectionChanged;
|
|
|
9
9
|
exports.reducer = reducer;
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
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
|
function reducer(pluginState, meta) {
|
|
@@ -34,13 +35,23 @@ function mapping(tr, pluginState) {
|
|
|
34
35
|
return pluginState;
|
|
35
36
|
}
|
|
36
37
|
var _tr$mapping$mapResult = tr.mapping.mapResult(pluginState.showDatePickerAt),
|
|
37
|
-
pos = _tr$mapping$mapResult.pos
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
pos = _tr$mapping$mapResult.pos,
|
|
39
|
+
deleted = _tr$mapping$mapResult.deleted;
|
|
40
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_ed-27630_date_popup_deleted_node')) {
|
|
41
|
+
return {
|
|
42
|
+
showDatePickerAt: deleted ? null : pos,
|
|
43
|
+
isNew: pluginState.isNew,
|
|
44
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
45
|
+
focusDateInput: pluginState.focusDateInput
|
|
46
|
+
};
|
|
47
|
+
} else {
|
|
48
|
+
return {
|
|
49
|
+
showDatePickerAt: pos,
|
|
50
|
+
isNew: pluginState.isNew,
|
|
51
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
52
|
+
focusDateInput: pluginState.focusDateInput
|
|
53
|
+
};
|
|
54
|
+
}
|
|
44
55
|
}
|
|
45
56
|
function onSelectionChanged(tr, pluginState) {
|
|
46
57
|
if (tr.docChanged && isDateNodeSelection(tr.selection)) {
|
|
@@ -1,49 +1,53 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
import { bind } from 'bind-event-listener';
|
|
3
|
-
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
4
2
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
5
3
|
import { setDatePickerAt } from '../pm-plugins/actions';
|
|
6
4
|
import { dateToDOM } from './dateNodeSpec';
|
|
7
5
|
export class DateNodeView {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
location: 'editor-plugin-date/DateNodeView'
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
constructor(node, view, getPos, intl) {
|
|
14
|
-
_defineProperty(this, "dom", document.createElement('span'));
|
|
6
|
+
constructor(node, view, getPos, intl, decorations) {
|
|
7
|
+
_defineProperty(this, "parentTaskState", '');
|
|
15
8
|
this.node = node;
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
this.intl = intl;
|
|
10
|
+
this.view = view;
|
|
11
|
+
this.getPos = getPos;
|
|
12
|
+
const spec = dateToDOM(node, this.view.state, this.getPos, this.intl);
|
|
13
|
+
const {
|
|
14
|
+
dom
|
|
15
|
+
} = DOMSerializer.renderSpec(document, spec);
|
|
16
|
+
this.dom = dom;
|
|
17
|
+
|
|
18
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
19
|
+
dom.addEventListener('click', event => {
|
|
20
|
+
event.stopImmediatePropagation();
|
|
18
21
|
const {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
this.clickUnBind = bind(this.dom, {
|
|
26
|
-
type: 'click',
|
|
27
|
-
listener: event => {
|
|
28
|
-
event.stopImmediatePropagation();
|
|
29
|
-
const {
|
|
30
|
-
state,
|
|
31
|
-
dispatch
|
|
32
|
-
} = view;
|
|
33
|
-
setDatePickerAt(state.selection.from)(state, dispatch);
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
} catch (error) {
|
|
37
|
-
DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
|
|
38
|
-
this.renderFallback();
|
|
39
|
-
}
|
|
22
|
+
state,
|
|
23
|
+
dispatch
|
|
24
|
+
} = this.view;
|
|
25
|
+
setDatePickerAt(state.selection.from)(state, dispatch);
|
|
26
|
+
});
|
|
27
|
+
this.parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
40
28
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
29
|
+
update(node, decorations) {
|
|
30
|
+
// we're only interested in two scenarios to trigger a DOM update:
|
|
31
|
+
// 1. the date value (timestamp) has changed
|
|
32
|
+
// 2. A wrapping taskitem state (if present) has changed
|
|
33
|
+
// in all other cases, we tell prosemirror to ignore DOM updates
|
|
34
|
+
// if new changes are added to the DOM structure, they will need to be
|
|
35
|
+
// coded here
|
|
36
|
+
const hasDateChanged = node.attrs.timestamp !== this.node.attrs.timestamp;
|
|
37
|
+
const parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
38
|
+
const parentTaskStateChanged = parentTaskState !== this.parentTaskState;
|
|
39
|
+
|
|
40
|
+
// update local state after comparisons ...
|
|
41
|
+
this.parentTaskState = parentTaskState;
|
|
42
|
+
this.node = node;
|
|
43
|
+
const skipProseMirrorDomUpdate = !hasDateChanged && !parentTaskStateChanged;
|
|
44
|
+
return skipProseMirrorDomUpdate;
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
static getParentTaskState(decorations) {
|
|
47
|
+
var _parentTaskDecoration, _parentTaskDecoration2;
|
|
48
|
+
const parentTaskDecoration = decorations.find(d => {
|
|
49
|
+
return d.spec.dataTaskNodeCheckState !== undefined;
|
|
50
|
+
});
|
|
51
|
+
return (_parentTaskDecoration = parentTaskDecoration === null || parentTaskDecoration === void 0 ? void 0 : (_parentTaskDecoration2 = parentTaskDecoration.spec) === null || _parentTaskDecoration2 === void 0 ? void 0 : _parentTaskDecoration2.dataTaskNodeCheckState) !== null && _parentTaskDecoration !== void 0 ? _parentTaskDecoration : '';
|
|
48
52
|
}
|
|
49
53
|
}
|
|
@@ -17,7 +17,7 @@ export function DateNodeView(props) {
|
|
|
17
17
|
} = getDateInformation(timestamp, intl, props.view.state, pos);
|
|
18
18
|
return (
|
|
19
19
|
/*#__PURE__*/
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
20
|
+
// eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
21
21
|
React.createElement("span", {
|
|
22
22
|
className: DateSharedCssClassName.DATE_WRAPPER,
|
|
23
23
|
onClick: handleClick
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { createIntl } from 'react-intl-next';
|
|
2
2
|
import { date } from '@atlaskit/adf-schema';
|
|
3
|
+
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
3
4
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
4
5
|
import { timestampToString } from '@atlaskit/editor-common/utils';
|
|
5
6
|
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
6
7
|
import { N30A, N800 } from '@atlaskit/theme/colors';
|
|
7
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
8
|
import { getDateInformation } from './utils';
|
|
9
|
-
const isSSR = Boolean(process.env.REACT_SSR);
|
|
10
9
|
let intlRef;
|
|
11
10
|
|
|
12
11
|
/**
|
|
@@ -16,7 +15,7 @@ let intlRef;
|
|
|
16
15
|
* @returns
|
|
17
16
|
*/
|
|
18
17
|
export const dateNodeSpec = () => {
|
|
19
|
-
if (
|
|
18
|
+
if (isSSR()) {
|
|
20
19
|
return date;
|
|
21
20
|
}
|
|
22
21
|
return {
|
|
@@ -32,7 +32,7 @@ const createPlugin = pmPluginFactoryParams => {
|
|
|
32
32
|
if (editorExperiment('platform_editor_vanilla_dom', true, {
|
|
33
33
|
exposure: true
|
|
34
34
|
})) {
|
|
35
|
-
return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl());
|
|
35
|
+
return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl(), decorations);
|
|
36
36
|
}
|
|
37
37
|
return getInlineNodeViewProducer({
|
|
38
38
|
pmPluginFactoryParams,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
export function reducer(pluginState, meta) {
|
|
3
4
|
// If the same nodeview is clicked twice, calendar should close
|
|
4
5
|
if (meta.showDatePickerAt === pluginState.showDatePickerAt) {
|
|
@@ -32,14 +33,24 @@ export function mapping(tr, pluginState) {
|
|
|
32
33
|
return pluginState;
|
|
33
34
|
}
|
|
34
35
|
const {
|
|
35
|
-
pos
|
|
36
|
+
pos,
|
|
37
|
+
deleted
|
|
36
38
|
} = tr.mapping.mapResult(pluginState.showDatePickerAt);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
if (fg('platform_editor_ed-27630_date_popup_deleted_node')) {
|
|
40
|
+
return {
|
|
41
|
+
showDatePickerAt: deleted ? null : pos,
|
|
42
|
+
isNew: pluginState.isNew,
|
|
43
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
44
|
+
focusDateInput: pluginState.focusDateInput
|
|
45
|
+
};
|
|
46
|
+
} else {
|
|
47
|
+
return {
|
|
48
|
+
showDatePickerAt: pos,
|
|
49
|
+
isNew: pluginState.isNew,
|
|
50
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
51
|
+
focusDateInput: pluginState.focusDateInput
|
|
52
|
+
};
|
|
53
|
+
}
|
|
43
54
|
}
|
|
44
55
|
export function onSelectionChanged(tr, pluginState) {
|
|
45
56
|
if (tr.docChanged && isDateNodeSelection(tr.selection)) {
|
|
@@ -1,56 +1,60 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
import { bind } from 'bind-event-listener';
|
|
5
|
-
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
6
4
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
7
5
|
import { setDatePickerAt } from '../pm-plugins/actions';
|
|
8
6
|
import { dateToDOM } from './dateNodeSpec';
|
|
9
7
|
export var DateNodeView = /*#__PURE__*/function () {
|
|
10
|
-
function DateNodeView(node, view, getPos, intl) {
|
|
8
|
+
function DateNodeView(node, view, getPos, intl, decorations) {
|
|
9
|
+
var _this = this;
|
|
11
10
|
_classCallCheck(this, DateNodeView);
|
|
12
|
-
_defineProperty(this, "
|
|
11
|
+
_defineProperty(this, "parentTaskState", '');
|
|
13
12
|
this.node = node;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} catch (error) {
|
|
32
|
-
DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
|
|
33
|
-
this.renderFallback();
|
|
34
|
-
}
|
|
13
|
+
this.intl = intl;
|
|
14
|
+
this.view = view;
|
|
15
|
+
this.getPos = getPos;
|
|
16
|
+
var spec = dateToDOM(node, this.view.state, this.getPos, this.intl);
|
|
17
|
+
var _DOMSerializer$render = DOMSerializer.renderSpec(document, spec),
|
|
18
|
+
dom = _DOMSerializer$render.dom;
|
|
19
|
+
this.dom = dom;
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
22
|
+
dom.addEventListener('click', function (event) {
|
|
23
|
+
event.stopImmediatePropagation();
|
|
24
|
+
var _this$view = _this.view,
|
|
25
|
+
state = _this$view.state,
|
|
26
|
+
dispatch = _this$view.dispatch;
|
|
27
|
+
setDatePickerAt(state.selection.from)(state, dispatch);
|
|
28
|
+
});
|
|
29
|
+
this.parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
35
30
|
}
|
|
36
31
|
return _createClass(DateNodeView, [{
|
|
37
|
-
key: "
|
|
38
|
-
value: function
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
key: "update",
|
|
33
|
+
value: function update(node, decorations) {
|
|
34
|
+
// we're only interested in two scenarios to trigger a DOM update:
|
|
35
|
+
// 1. the date value (timestamp) has changed
|
|
36
|
+
// 2. A wrapping taskitem state (if present) has changed
|
|
37
|
+
// in all other cases, we tell prosemirror to ignore DOM updates
|
|
38
|
+
// if new changes are added to the DOM structure, they will need to be
|
|
39
|
+
// coded here
|
|
40
|
+
var hasDateChanged = node.attrs.timestamp !== this.node.attrs.timestamp;
|
|
41
|
+
var parentTaskState = DateNodeView.getParentTaskState(decorations);
|
|
42
|
+
var parentTaskStateChanged = parentTaskState !== this.parentTaskState;
|
|
43
|
+
|
|
44
|
+
// update local state after comparisons ...
|
|
45
|
+
this.parentTaskState = parentTaskState;
|
|
46
|
+
this.node = node;
|
|
47
|
+
var skipProseMirrorDomUpdate = !hasDateChanged && !parentTaskStateChanged;
|
|
48
|
+
return skipProseMirrorDomUpdate;
|
|
47
49
|
}
|
|
48
50
|
}], [{
|
|
49
|
-
key: "
|
|
50
|
-
value: function
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
key: "getParentTaskState",
|
|
52
|
+
value: function getParentTaskState(decorations) {
|
|
53
|
+
var _parentTaskDecoration, _parentTaskDecoration2;
|
|
54
|
+
var parentTaskDecoration = decorations.find(function (d) {
|
|
55
|
+
return d.spec.dataTaskNodeCheckState !== undefined;
|
|
53
56
|
});
|
|
57
|
+
return (_parentTaskDecoration = parentTaskDecoration === null || parentTaskDecoration === void 0 || (_parentTaskDecoration2 = parentTaskDecoration.spec) === null || _parentTaskDecoration2 === void 0 ? void 0 : _parentTaskDecoration2.dataTaskNodeCheckState) !== null && _parentTaskDecoration !== void 0 ? _parentTaskDecoration : '';
|
|
54
58
|
}
|
|
55
59
|
}]);
|
|
56
60
|
}();
|
|
@@ -14,7 +14,7 @@ export function DateNodeView(props) {
|
|
|
14
14
|
color = _getDateInformation.color;
|
|
15
15
|
return (
|
|
16
16
|
/*#__PURE__*/
|
|
17
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
17
|
+
// eslint-disable-next-line @atlassian/a11y/interactive-element-not-keyboard-focusable, @atlaskit/ui-styling-standard/no-classname-prop, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
|
|
18
18
|
React.createElement("span", {
|
|
19
19
|
className: DateSharedCssClassName.DATE_WRAPPER,
|
|
20
20
|
onClick: handleClick
|
|
@@ -3,13 +3,12 @@ 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 { createIntl } from 'react-intl-next';
|
|
5
5
|
import { date } from '@atlaskit/adf-schema';
|
|
6
|
+
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
6
7
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
7
8
|
import { timestampToString } from '@atlaskit/editor-common/utils';
|
|
8
9
|
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
9
10
|
import { N30A, N800 } from '@atlaskit/theme/colors';
|
|
10
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
11
|
import { getDateInformation } from './utils';
|
|
12
|
-
var isSSR = Boolean(process.env.REACT_SSR);
|
|
13
12
|
var intlRef;
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -19,7 +18,7 @@ var intlRef;
|
|
|
19
18
|
* @returns
|
|
20
19
|
*/
|
|
21
20
|
export var dateNodeSpec = function dateNodeSpec() {
|
|
22
|
-
if (
|
|
21
|
+
if (isSSR()) {
|
|
23
22
|
return date;
|
|
24
23
|
}
|
|
25
24
|
return _objectSpread(_objectSpread({}, date), {}, {
|
|
@@ -29,7 +29,7 @@ var createPlugin = function createPlugin(pmPluginFactoryParams) {
|
|
|
29
29
|
if (editorExperiment('platform_editor_vanilla_dom', true, {
|
|
30
30
|
exposure: true
|
|
31
31
|
})) {
|
|
32
|
-
return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl());
|
|
32
|
+
return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl(), decorations);
|
|
33
33
|
}
|
|
34
34
|
return getInlineNodeViewProducer({
|
|
35
35
|
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
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; }
|
|
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 { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
export function reducer(pluginState, meta) {
|
|
6
7
|
// If the same nodeview is clicked twice, calendar should close
|
|
7
8
|
if (meta.showDatePickerAt === pluginState.showDatePickerAt) {
|
|
@@ -25,13 +26,23 @@ export function mapping(tr, pluginState) {
|
|
|
25
26
|
return pluginState;
|
|
26
27
|
}
|
|
27
28
|
var _tr$mapping$mapResult = tr.mapping.mapResult(pluginState.showDatePickerAt),
|
|
28
|
-
pos = _tr$mapping$mapResult.pos
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
pos = _tr$mapping$mapResult.pos,
|
|
30
|
+
deleted = _tr$mapping$mapResult.deleted;
|
|
31
|
+
if (fg('platform_editor_ed-27630_date_popup_deleted_node')) {
|
|
32
|
+
return {
|
|
33
|
+
showDatePickerAt: deleted ? null : pos,
|
|
34
|
+
isNew: pluginState.isNew,
|
|
35
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
36
|
+
focusDateInput: pluginState.focusDateInput
|
|
37
|
+
};
|
|
38
|
+
} else {
|
|
39
|
+
return {
|
|
40
|
+
showDatePickerAt: pos,
|
|
41
|
+
isNew: pluginState.isNew,
|
|
42
|
+
isDateEmpty: pluginState.isDateEmpty,
|
|
43
|
+
focusDateInput: pluginState.focusDateInput
|
|
44
|
+
};
|
|
45
|
+
}
|
|
35
46
|
}
|
|
36
47
|
export function onSelectionChanged(tr, pluginState) {
|
|
37
48
|
if (tr.docChanged && isDateNodeSelection(tr.selection)) {
|
|
@@ -2,13 +2,15 @@ import { IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import type { NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { Decoration, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
export declare class DateNodeView implements NodeView {
|
|
7
|
-
|
|
8
|
-
private
|
|
9
|
-
readonly
|
|
10
|
-
private
|
|
11
|
-
|
|
12
|
-
private
|
|
13
|
-
|
|
7
|
+
dom: Node;
|
|
8
|
+
private node;
|
|
9
|
+
private readonly intl;
|
|
10
|
+
private readonly view;
|
|
11
|
+
private readonly getPos;
|
|
12
|
+
private parentTaskState;
|
|
13
|
+
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, intl: IntlShape, decorations: ReadonlyArray<Decoration>);
|
|
14
|
+
update(node: PMNode, decorations: ReadonlyArray<Decoration>): boolean;
|
|
15
|
+
private static getParentTaskState;
|
|
14
16
|
}
|
|
@@ -2,13 +2,15 @@ import { IntlShape } from 'react-intl-next';
|
|
|
2
2
|
import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
-
import type { NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { Decoration, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
export declare class DateNodeView implements NodeView {
|
|
7
|
-
|
|
8
|
-
private
|
|
9
|
-
readonly
|
|
10
|
-
private
|
|
11
|
-
|
|
12
|
-
private
|
|
13
|
-
|
|
7
|
+
dom: Node;
|
|
8
|
+
private node;
|
|
9
|
+
private readonly intl;
|
|
10
|
+
private readonly view;
|
|
11
|
+
private readonly getPos;
|
|
12
|
+
private parentTaskState;
|
|
13
|
+
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, intl: IntlShape, decorations: ReadonlyArray<Decoration>);
|
|
14
|
+
update(node: PMNode, decorations: ReadonlyArray<Decoration>): boolean;
|
|
15
|
+
private static getParentTaskState;
|
|
14
16
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-date",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.1",
|
|
4
4
|
"description": "Date plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -37,21 +37,21 @@
|
|
|
37
37
|
"@atlaskit/calendar": "^17.1.0",
|
|
38
38
|
"@atlaskit/css": "^0.10.0",
|
|
39
39
|
"@atlaskit/date": "^2.0.0",
|
|
40
|
-
"@atlaskit/editor-common": "^
|
|
40
|
+
"@atlaskit/editor-common": "^104.0.0",
|
|
41
41
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
42
|
-
"@atlaskit/editor-plugin-annotation": "^2.
|
|
42
|
+
"@atlaskit/editor-plugin-annotation": "^2.7.0",
|
|
43
43
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
44
44
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
|
|
45
45
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
46
46
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
47
47
|
"@atlaskit/form": "^12.0.0",
|
|
48
|
-
"@atlaskit/icon": "^25.
|
|
48
|
+
"@atlaskit/icon": "^25.6.0",
|
|
49
49
|
"@atlaskit/locale": "^3.0.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
51
51
|
"@atlaskit/textfield": "^8.0.0",
|
|
52
52
|
"@atlaskit/theme": "^18.0.0",
|
|
53
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
54
|
-
"@atlaskit/tokens": "^4.
|
|
53
|
+
"@atlaskit/tmp-editor-statsig": "^4.16.0",
|
|
54
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
55
55
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
56
56
|
"@babel/runtime": "^7.0.0",
|
|
57
57
|
"bind-event-listener": "^3.0.0",
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
66
66
|
"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
|
|
67
67
|
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
68
|
-
"@atlaskit/editor-plugin-quick-insert": "^2.
|
|
69
|
-
"@atlaskit/editor-plugin-selection": "^2.
|
|
70
|
-
"@atlaskit/editor-plugin-table": "^10.
|
|
68
|
+
"@atlaskit/editor-plugin-quick-insert": "^2.4.0",
|
|
69
|
+
"@atlaskit/editor-plugin-selection": "^2.2.0",
|
|
70
|
+
"@atlaskit/editor-plugin-table": "^10.9.0",
|
|
71
71
|
"@atlaskit/editor-plugin-tasks-and-decisions": "^5.1.0",
|
|
72
|
-
"@atlaskit/editor-plugin-type-ahead": "^2.
|
|
72
|
+
"@atlaskit/editor-plugin-type-ahead": "^2.6.0",
|
|
73
73
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
74
74
|
"@testing-library/react": "^13.4.0"
|
|
75
75
|
},
|
|
@@ -118,6 +118,9 @@
|
|
|
118
118
|
},
|
|
119
119
|
"editor_a11y_announce_date_picker_open": {
|
|
120
120
|
"type": "boolean"
|
|
121
|
+
},
|
|
122
|
+
"platform_editor_ed-27630_date_popup_deleted_node": {
|
|
123
|
+
"type": "boolean"
|
|
121
124
|
}
|
|
122
125
|
}
|
|
123
126
|
}
|