@atlaskit/editor-plugin-status 3.1.8 → 3.1.9
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 +9 -0
- package/dist/cjs/nodeviews/StatusNodeView.js +86 -0
- package/dist/cjs/nodeviews/statusNodeSpec.js +43 -1
- package/dist/cjs/pm-plugins/plugin.js +15 -6
- package/dist/es2019/nodeviews/StatusNodeView.js +68 -0
- package/dist/es2019/nodeviews/statusNodeSpec.js +45 -0
- package/dist/es2019/pm-plugins/plugin.js +15 -6
- package/dist/esm/nodeviews/StatusNodeView.js +79 -0
- package/dist/esm/nodeviews/statusNodeSpec.js +42 -0
- package/dist/esm/pm-plugins/plugin.js +15 -6
- package/dist/types/nodeviews/StatusNodeView.d.ts +15 -0
- package/dist/types/nodeviews/statusNodeSpec.d.ts +2 -0
- package/dist/types-ts4.5/nodeviews/StatusNodeView.d.ts +15 -0
- package/dist/types-ts4.5/nodeviews/statusNodeSpec.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-status
|
|
2
2
|
|
|
3
|
+
## 3.1.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#137203](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137203)
|
|
8
|
+
[`28c931f62e83e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c931f62e83e) -
|
|
9
|
+
Converts editor status node to vanilla js
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 3.1.8
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.StatusNodeView = void 0;
|
|
8
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
12
|
+
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
13
|
+
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
14
|
+
var _statusNodeSpec = require("./statusNodeSpec");
|
|
15
|
+
var StatusNodeView = exports.StatusNodeView = /*#__PURE__*/function () {
|
|
16
|
+
function StatusNodeView(node, intl) {
|
|
17
|
+
(0, _classCallCheck2.default)(this, StatusNodeView);
|
|
18
|
+
(0, _defineProperty2.default)(this, "dom", document.createElement('div'));
|
|
19
|
+
(0, _defineProperty2.default)(this, "box", null);
|
|
20
|
+
(0, _defineProperty2.default)(this, "textContainer", null);
|
|
21
|
+
this.node = node;
|
|
22
|
+
this.intl = intl;
|
|
23
|
+
try {
|
|
24
|
+
var spec = (0, _statusNodeSpec.statusToDOM)(node);
|
|
25
|
+
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
|
|
26
|
+
dom = _DOMSerializer$render.dom;
|
|
27
|
+
if (!(dom instanceof HTMLElement)) {
|
|
28
|
+
throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
|
|
29
|
+
}
|
|
30
|
+
this.dom = dom;
|
|
31
|
+
this.box = this.dom.querySelector('.status-lozenge-span');
|
|
32
|
+
this.textContainer = this.dom.querySelector('.lozenge-text');
|
|
33
|
+
if (!node.attrs.text) {
|
|
34
|
+
this.setPlaceholder();
|
|
35
|
+
}
|
|
36
|
+
} catch (error) {
|
|
37
|
+
StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
|
|
38
|
+
this.renderFallback();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return (0, _createClass2.default)(StatusNodeView, [{
|
|
42
|
+
key: "setPlaceholder",
|
|
43
|
+
value: function setPlaceholder() {
|
|
44
|
+
if (this.textContainer) {
|
|
45
|
+
this.textContainer.textContent = this.intl.formatMessage(_messages.statusMessages.placeholder);
|
|
46
|
+
this.dom.style.setProperty('opacity', '0.5');
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
key: "renderFallback",
|
|
51
|
+
value: function renderFallback() {
|
|
52
|
+
var fallbackElement = document.createElement('span');
|
|
53
|
+
fallbackElement.innerText = this.node.attrs.text;
|
|
54
|
+
this.dom.appendChild(fallbackElement);
|
|
55
|
+
}
|
|
56
|
+
}, {
|
|
57
|
+
key: "update",
|
|
58
|
+
value: function update(node) {
|
|
59
|
+
if (node.type !== this.node.type) {
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
|
|
63
|
+
this.textContainer.textContent = node.attrs.text;
|
|
64
|
+
}
|
|
65
|
+
if (node.attrs.color !== this.node.attrs.color) {
|
|
66
|
+
var _this$box;
|
|
67
|
+
(_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
|
|
68
|
+
}
|
|
69
|
+
if (!node.attrs.text) {
|
|
70
|
+
this.setPlaceholder();
|
|
71
|
+
}
|
|
72
|
+
if (node.attrs.text) {
|
|
73
|
+
this.dom.style.setProperty('opacity', '1');
|
|
74
|
+
}
|
|
75
|
+
this.node = node;
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
}], [{
|
|
79
|
+
key: "logError",
|
|
80
|
+
value: function logError(error) {
|
|
81
|
+
void (0, _monitoring.logException)(error, {
|
|
82
|
+
location: 'editor-plugin-status/StatusNodeView'
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}]);
|
|
86
|
+
}();
|
|
@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.statusNodeSpec = void 0;
|
|
7
|
+
exports.statusToDOM = exports.statusNodeSpec = void 0;
|
|
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
11
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
12
|
+
var _whitespace = require("@atlaskit/editor-common/whitespace");
|
|
12
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
15
|
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; }
|
|
@@ -218,4 +219,45 @@ var statusNodeSpec = exports.statusNodeSpec = function statusNodeSpec() {
|
|
|
218
219
|
}
|
|
219
220
|
}
|
|
220
221
|
});
|
|
222
|
+
};
|
|
223
|
+
var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
|
|
224
|
+
var _node$attrs2 = node.attrs,
|
|
225
|
+
text = _node$attrs2.text,
|
|
226
|
+
color = _node$attrs2.color,
|
|
227
|
+
style = _node$attrs2.style,
|
|
228
|
+
localId = _node$attrs2.localId;
|
|
229
|
+
var editorNodeWrapperAttrs = {
|
|
230
|
+
class: 'statusView-content-wrap inlineNodeView',
|
|
231
|
+
'data-testid': 'statusContainerView',
|
|
232
|
+
'data-prosemirror-node-view-type': 'vanilla',
|
|
233
|
+
'local-id': localId
|
|
234
|
+
};
|
|
235
|
+
var statusElementAttrs = {
|
|
236
|
+
style: (0, _lazyNodeView.convertToInlineCss)(isAndroidChromium ? {
|
|
237
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
238
|
+
display: 'inline-block !important',
|
|
239
|
+
verticalAlign: 'middle'
|
|
240
|
+
} : {}),
|
|
241
|
+
class: 'status-lozenge-span',
|
|
242
|
+
'data-node-type': 'status',
|
|
243
|
+
'data-color': color,
|
|
244
|
+
'data-style': style
|
|
245
|
+
};
|
|
246
|
+
var lozengeWrapperAttrs = {
|
|
247
|
+
class: 'lozenge-wrapper'
|
|
248
|
+
};
|
|
249
|
+
var lozengeTextAttrs = {
|
|
250
|
+
class: 'lozenge-text',
|
|
251
|
+
style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') ? {
|
|
252
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
253
|
+
letterSpacing: '0.165px'
|
|
254
|
+
} : {}))
|
|
255
|
+
};
|
|
256
|
+
return ['span', editorNodeWrapperAttrs, ['span', {
|
|
257
|
+
class: 'zeroWidthSpaceContainer'
|
|
258
|
+
}, ['span', {
|
|
259
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
260
|
+
}, _whitespace.ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
|
|
261
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
262
|
+
}, _whitespace.ZERO_WIDTH_SPACE]];
|
|
221
263
|
};
|
|
@@ -10,7 +10,9 @@ var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
|
|
|
10
10
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
11
11
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
12
12
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
14
|
var _status = require("../nodeviews/status");
|
|
15
|
+
var _StatusNodeView = require("../nodeviews/StatusNodeView");
|
|
14
16
|
var _pluginKey = require("./plugin-key");
|
|
15
17
|
var _utils2 = require("./utils");
|
|
16
18
|
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; }
|
|
@@ -109,13 +111,20 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
|
|
|
109
111
|
key: _pluginKey.pluginKey,
|
|
110
112
|
props: {
|
|
111
113
|
nodeViews: {
|
|
112
|
-
status: (
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
status: function status(node, view, getPos, decorations) {
|
|
115
|
+
if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
116
|
+
exposure: true
|
|
117
|
+
})) {
|
|
118
|
+
return new _StatusNodeView.StatusNodeView(node, pmPluginFactoryParams.getIntl());
|
|
117
119
|
}
|
|
118
|
-
|
|
120
|
+
return (0, _reactNodeView.getInlineNodeViewProducer)({
|
|
121
|
+
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
122
|
+
Component: _status.StatusNodeView,
|
|
123
|
+
extraComponentProps: {
|
|
124
|
+
options: options
|
|
125
|
+
}
|
|
126
|
+
})(node, view, getPos, decorations);
|
|
127
|
+
}
|
|
119
128
|
}
|
|
120
129
|
}
|
|
121
130
|
});
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { statusMessages as messages } from '@atlaskit/editor-common/messages';
|
|
3
|
+
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
4
|
+
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import { statusToDOM } from './statusNodeSpec';
|
|
6
|
+
export class StatusNodeView {
|
|
7
|
+
static logError(error) {
|
|
8
|
+
void logException(error, {
|
|
9
|
+
location: 'editor-plugin-status/StatusNodeView'
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
constructor(node, intl) {
|
|
13
|
+
_defineProperty(this, "dom", document.createElement('div'));
|
|
14
|
+
_defineProperty(this, "box", null);
|
|
15
|
+
_defineProperty(this, "textContainer", null);
|
|
16
|
+
this.node = node;
|
|
17
|
+
this.intl = intl;
|
|
18
|
+
try {
|
|
19
|
+
const spec = statusToDOM(node);
|
|
20
|
+
const {
|
|
21
|
+
dom
|
|
22
|
+
} = DOMSerializer.renderSpec(document, spec);
|
|
23
|
+
if (!(dom instanceof HTMLElement)) {
|
|
24
|
+
throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
|
|
25
|
+
}
|
|
26
|
+
this.dom = dom;
|
|
27
|
+
this.box = this.dom.querySelector('.status-lozenge-span');
|
|
28
|
+
this.textContainer = this.dom.querySelector('.lozenge-text');
|
|
29
|
+
if (!node.attrs.text) {
|
|
30
|
+
this.setPlaceholder();
|
|
31
|
+
}
|
|
32
|
+
} catch (error) {
|
|
33
|
+
StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
|
|
34
|
+
this.renderFallback();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
setPlaceholder() {
|
|
38
|
+
if (this.textContainer) {
|
|
39
|
+
this.textContainer.textContent = this.intl.formatMessage(messages.placeholder);
|
|
40
|
+
this.dom.style.setProperty('opacity', '0.5');
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
renderFallback() {
|
|
44
|
+
const fallbackElement = document.createElement('span');
|
|
45
|
+
fallbackElement.innerText = this.node.attrs.text;
|
|
46
|
+
this.dom.appendChild(fallbackElement);
|
|
47
|
+
}
|
|
48
|
+
update(node) {
|
|
49
|
+
if (node.type !== this.node.type) {
|
|
50
|
+
return false;
|
|
51
|
+
}
|
|
52
|
+
if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
|
|
53
|
+
this.textContainer.textContent = node.attrs.text;
|
|
54
|
+
}
|
|
55
|
+
if (node.attrs.color !== this.node.attrs.color) {
|
|
56
|
+
var _this$box;
|
|
57
|
+
(_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', node.attrs.color);
|
|
58
|
+
}
|
|
59
|
+
if (!node.attrs.text) {
|
|
60
|
+
this.setPlaceholder();
|
|
61
|
+
}
|
|
62
|
+
if (node.attrs.text) {
|
|
63
|
+
this.dom.style.setProperty('opacity', '1');
|
|
64
|
+
}
|
|
65
|
+
this.node = node;
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createIntl } from 'react-intl-next';
|
|
2
2
|
import { status } from '@atlaskit/adf-schema';
|
|
3
3
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
4
|
+
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
4
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
7
|
const isSSR = Boolean(process.env.REACT_SSR);
|
|
@@ -213,4 +214,48 @@ export const statusNodeSpec = () => {
|
|
|
213
214
|
}
|
|
214
215
|
}
|
|
215
216
|
};
|
|
217
|
+
};
|
|
218
|
+
export const statusToDOM = node => {
|
|
219
|
+
const {
|
|
220
|
+
text,
|
|
221
|
+
color,
|
|
222
|
+
style,
|
|
223
|
+
localId
|
|
224
|
+
} = node.attrs;
|
|
225
|
+
const editorNodeWrapperAttrs = {
|
|
226
|
+
class: 'statusView-content-wrap inlineNodeView',
|
|
227
|
+
'data-testid': 'statusContainerView',
|
|
228
|
+
'data-prosemirror-node-view-type': 'vanilla',
|
|
229
|
+
'local-id': localId
|
|
230
|
+
};
|
|
231
|
+
const statusElementAttrs = {
|
|
232
|
+
style: convertToInlineCss(isAndroidChromium ? {
|
|
233
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
234
|
+
display: 'inline-block !important',
|
|
235
|
+
verticalAlign: 'middle'
|
|
236
|
+
} : {}),
|
|
237
|
+
class: 'status-lozenge-span',
|
|
238
|
+
'data-node-type': 'status',
|
|
239
|
+
'data-color': color,
|
|
240
|
+
'data-style': style
|
|
241
|
+
};
|
|
242
|
+
const lozengeWrapperAttrs = {
|
|
243
|
+
class: 'lozenge-wrapper'
|
|
244
|
+
};
|
|
245
|
+
const lozengeTextAttrs = {
|
|
246
|
+
class: 'lozenge-text',
|
|
247
|
+
style: convertToInlineCss({
|
|
248
|
+
...(fg('platform-lozenge-custom-letterspacing') ? {
|
|
249
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
250
|
+
letterSpacing: '0.165px'
|
|
251
|
+
} : {})
|
|
252
|
+
})
|
|
253
|
+
};
|
|
254
|
+
return ['span', editorNodeWrapperAttrs, ['span', {
|
|
255
|
+
class: 'zeroWidthSpaceContainer'
|
|
256
|
+
}, ['span', {
|
|
257
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
258
|
+
}, ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
|
|
259
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
260
|
+
}, ZERO_WIDTH_SPACE]];
|
|
216
261
|
};
|
|
@@ -2,7 +2,9 @@ import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-vi
|
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
import { StatusNodeView } from '../nodeviews/status';
|
|
7
|
+
import { StatusNodeView as StatusNodeViewVanilla } from '../nodeviews/StatusNodeView';
|
|
6
8
|
import { pluginKey } from './plugin-key';
|
|
7
9
|
import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
|
|
8
10
|
const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
|
|
@@ -101,13 +103,20 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
|
|
|
101
103
|
key: pluginKey,
|
|
102
104
|
props: {
|
|
103
105
|
nodeViews: {
|
|
104
|
-
status:
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
status: (node, view, getPos, decorations) => {
|
|
107
|
+
if (editorExperiment('platform_editor_vanilla_dom', true, {
|
|
108
|
+
exposure: true
|
|
109
|
+
})) {
|
|
110
|
+
return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
|
|
109
111
|
}
|
|
110
|
-
|
|
112
|
+
return getInlineNodeViewProducer({
|
|
113
|
+
pmPluginFactoryParams,
|
|
114
|
+
Component: StatusNodeView,
|
|
115
|
+
extraComponentProps: {
|
|
116
|
+
options
|
|
117
|
+
}
|
|
118
|
+
})(node, view, getPos, decorations);
|
|
119
|
+
}
|
|
111
120
|
}
|
|
112
121
|
}
|
|
113
122
|
});
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
+
import { statusMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
6
|
+
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
7
|
+
import { statusToDOM } from './statusNodeSpec';
|
|
8
|
+
export var StatusNodeView = /*#__PURE__*/function () {
|
|
9
|
+
function StatusNodeView(node, intl) {
|
|
10
|
+
_classCallCheck(this, StatusNodeView);
|
|
11
|
+
_defineProperty(this, "dom", document.createElement('div'));
|
|
12
|
+
_defineProperty(this, "box", null);
|
|
13
|
+
_defineProperty(this, "textContainer", null);
|
|
14
|
+
this.node = node;
|
|
15
|
+
this.intl = intl;
|
|
16
|
+
try {
|
|
17
|
+
var spec = statusToDOM(node);
|
|
18
|
+
var _DOMSerializer$render = DOMSerializer.renderSpec(document, spec),
|
|
19
|
+
dom = _DOMSerializer$render.dom;
|
|
20
|
+
if (!(dom instanceof HTMLElement)) {
|
|
21
|
+
throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
|
|
22
|
+
}
|
|
23
|
+
this.dom = dom;
|
|
24
|
+
this.box = this.dom.querySelector('.status-lozenge-span');
|
|
25
|
+
this.textContainer = this.dom.querySelector('.lozenge-text');
|
|
26
|
+
if (!node.attrs.text) {
|
|
27
|
+
this.setPlaceholder();
|
|
28
|
+
}
|
|
29
|
+
} catch (error) {
|
|
30
|
+
StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
|
|
31
|
+
this.renderFallback();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return _createClass(StatusNodeView, [{
|
|
35
|
+
key: "setPlaceholder",
|
|
36
|
+
value: function setPlaceholder() {
|
|
37
|
+
if (this.textContainer) {
|
|
38
|
+
this.textContainer.textContent = this.intl.formatMessage(messages.placeholder);
|
|
39
|
+
this.dom.style.setProperty('opacity', '0.5');
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}, {
|
|
43
|
+
key: "renderFallback",
|
|
44
|
+
value: function renderFallback() {
|
|
45
|
+
var fallbackElement = document.createElement('span');
|
|
46
|
+
fallbackElement.innerText = this.node.attrs.text;
|
|
47
|
+
this.dom.appendChild(fallbackElement);
|
|
48
|
+
}
|
|
49
|
+
}, {
|
|
50
|
+
key: "update",
|
|
51
|
+
value: function update(node) {
|
|
52
|
+
if (node.type !== this.node.type) {
|
|
53
|
+
return false;
|
|
54
|
+
}
|
|
55
|
+
if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
|
|
56
|
+
this.textContainer.textContent = node.attrs.text;
|
|
57
|
+
}
|
|
58
|
+
if (node.attrs.color !== this.node.attrs.color) {
|
|
59
|
+
var _this$box;
|
|
60
|
+
(_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
|
|
61
|
+
}
|
|
62
|
+
if (!node.attrs.text) {
|
|
63
|
+
this.setPlaceholder();
|
|
64
|
+
}
|
|
65
|
+
if (node.attrs.text) {
|
|
66
|
+
this.dom.style.setProperty('opacity', '1');
|
|
67
|
+
}
|
|
68
|
+
this.node = node;
|
|
69
|
+
return true;
|
|
70
|
+
}
|
|
71
|
+
}], [{
|
|
72
|
+
key: "logError",
|
|
73
|
+
value: function logError(error) {
|
|
74
|
+
void logException(error, {
|
|
75
|
+
location: 'editor-plugin-status/StatusNodeView'
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
}]);
|
|
79
|
+
}();
|
|
@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
import { createIntl } from 'react-intl-next';
|
|
5
5
|
import { status } from '@atlaskit/adf-schema';
|
|
6
6
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
7
|
+
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
7
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
10
|
var isSSR = Boolean(process.env.REACT_SSR);
|
|
@@ -211,4 +212,45 @@ export var statusNodeSpec = function statusNodeSpec() {
|
|
|
211
212
|
}
|
|
212
213
|
}
|
|
213
214
|
});
|
|
215
|
+
};
|
|
216
|
+
export var statusToDOM = function statusToDOM(node) {
|
|
217
|
+
var _node$attrs2 = node.attrs,
|
|
218
|
+
text = _node$attrs2.text,
|
|
219
|
+
color = _node$attrs2.color,
|
|
220
|
+
style = _node$attrs2.style,
|
|
221
|
+
localId = _node$attrs2.localId;
|
|
222
|
+
var editorNodeWrapperAttrs = {
|
|
223
|
+
class: 'statusView-content-wrap inlineNodeView',
|
|
224
|
+
'data-testid': 'statusContainerView',
|
|
225
|
+
'data-prosemirror-node-view-type': 'vanilla',
|
|
226
|
+
'local-id': localId
|
|
227
|
+
};
|
|
228
|
+
var statusElementAttrs = {
|
|
229
|
+
style: convertToInlineCss(isAndroidChromium ? {
|
|
230
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
231
|
+
display: 'inline-block !important',
|
|
232
|
+
verticalAlign: 'middle'
|
|
233
|
+
} : {}),
|
|
234
|
+
class: 'status-lozenge-span',
|
|
235
|
+
'data-node-type': 'status',
|
|
236
|
+
'data-color': color,
|
|
237
|
+
'data-style': style
|
|
238
|
+
};
|
|
239
|
+
var lozengeWrapperAttrs = {
|
|
240
|
+
class: 'lozenge-wrapper'
|
|
241
|
+
};
|
|
242
|
+
var lozengeTextAttrs = {
|
|
243
|
+
class: 'lozenge-text',
|
|
244
|
+
style: convertToInlineCss(_objectSpread({}, fg('platform-lozenge-custom-letterspacing') ? {
|
|
245
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
246
|
+
letterSpacing: '0.165px'
|
|
247
|
+
} : {}))
|
|
248
|
+
};
|
|
249
|
+
return ['span', editorNodeWrapperAttrs, ['span', {
|
|
250
|
+
class: 'zeroWidthSpaceContainer'
|
|
251
|
+
}, ['span', {
|
|
252
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
253
|
+
}, ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
|
|
254
|
+
class: 'inlineNodeViewAddZeroWidthSpace'
|
|
255
|
+
}, ZERO_WIDTH_SPACE]];
|
|
214
256
|
};
|
|
@@ -5,7 +5,9 @@ import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-vi
|
|
|
5
5
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
6
6
|
import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
8
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
8
9
|
import { StatusNodeView } from '../nodeviews/status';
|
|
10
|
+
import { StatusNodeView as StatusNodeViewVanilla } from '../nodeviews/StatusNodeView';
|
|
9
11
|
import { pluginKey } from './plugin-key';
|
|
10
12
|
import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
|
|
11
13
|
var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
|
|
@@ -102,13 +104,20 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
|
|
|
102
104
|
key: pluginKey,
|
|
103
105
|
props: {
|
|
104
106
|
nodeViews: {
|
|
105
|
-
status:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
status: function status(node, view, getPos, decorations) {
|
|
108
|
+
if (editorExperiment('platform_editor_vanilla_dom', true, {
|
|
109
|
+
exposure: true
|
|
110
|
+
})) {
|
|
111
|
+
return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
|
|
110
112
|
}
|
|
111
|
-
|
|
113
|
+
return getInlineNodeViewProducer({
|
|
114
|
+
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
115
|
+
Component: StatusNodeView,
|
|
116
|
+
extraComponentProps: {
|
|
117
|
+
options: options
|
|
118
|
+
}
|
|
119
|
+
})(node, view, getPos, decorations);
|
|
120
|
+
}
|
|
112
121
|
}
|
|
113
122
|
}
|
|
114
123
|
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { IntlShape } from 'react-intl-next';
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import type { NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
export declare class StatusNodeView implements NodeView {
|
|
5
|
+
dom: HTMLElement;
|
|
6
|
+
private box;
|
|
7
|
+
private textContainer;
|
|
8
|
+
private node;
|
|
9
|
+
private intl;
|
|
10
|
+
private static logError;
|
|
11
|
+
constructor(node: PMNode, intl: IntlShape);
|
|
12
|
+
private setPlaceholder;
|
|
13
|
+
private renderFallback;
|
|
14
|
+
update(node: PMNode): boolean;
|
|
15
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
1
2
|
/**
|
|
2
3
|
* Wrapper for ADF status node spec to augment toDOM implementation
|
|
3
4
|
* with fallback UI for lazy node view rendering / window virtualization
|
|
4
5
|
* @returns
|
|
5
6
|
*/
|
|
6
7
|
export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
|
|
8
|
+
export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { IntlShape } from 'react-intl-next';
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import type { NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
export declare class StatusNodeView implements NodeView {
|
|
5
|
+
dom: HTMLElement;
|
|
6
|
+
private box;
|
|
7
|
+
private textContainer;
|
|
8
|
+
private node;
|
|
9
|
+
private intl;
|
|
10
|
+
private static logError;
|
|
11
|
+
constructor(node: PMNode, intl: IntlShape);
|
|
12
|
+
private setPlaceholder;
|
|
13
|
+
private renderFallback;
|
|
14
|
+
update(node: PMNode): boolean;
|
|
15
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
1
2
|
/**
|
|
2
3
|
* Wrapper for ADF status node spec to augment toDOM implementation
|
|
3
4
|
* with fallback UI for lazy node view rendering / window virtualization
|
|
4
5
|
* @returns
|
|
5
6
|
*/
|
|
6
7
|
export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
|
|
8
|
+
export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;
|