@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 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: (0, _reactNodeView.getInlineNodeViewProducer)({
113
- pmPluginFactoryParams: pmPluginFactoryParams,
114
- Component: _status.StatusNodeView,
115
- extraComponentProps: {
116
- options: options
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: getInlineNodeViewProducer({
105
- pmPluginFactoryParams,
106
- Component: StatusNodeView,
107
- extraComponentProps: {
108
- options
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: getInlineNodeViewProducer({
106
- pmPluginFactoryParams: pmPluginFactoryParams,
107
- Component: StatusNodeView,
108
- extraComponentProps: {
109
- options: options
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-status",
3
- "version": "3.1.8",
3
+ "version": "3.1.9",
4
4
  "description": "Status plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",