@atlaskit/editor-plugin-status 3.1.8 → 3.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-status
 
+## 3.1.10
+
+### Patch Changes
+
+- [#139158](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139158)
+  [`e535a2a6ac9ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e535a2a6ac9ea) -
+  [ux] [A11Y-10038] Announce status popup when it opens and let users know how to access the popup
+- Updated dependencies
+
+## 3.1.9
+
+### Patch Changes
+
+- [#137203](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137203)
+  [`28c931f62e83e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c931f62e83e) -
+  Converts editor status node to vanilla js
+- Updated dependencies
+
 ## 3.1.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/StatusNodeView.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusNodeView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _statusNodeSpec = require("./statusNodeSpec");
+var StatusNodeView = exports.StatusNodeView = /*#__PURE__*/function () {
+  function StatusNodeView(node, intl) {
+    (0, _classCallCheck2.default)(this, StatusNodeView);
+    (0, _defineProperty2.default)(this, "dom", document.createElement('div'));
+    (0, _defineProperty2.default)(this, "box", null);
+    (0, _defineProperty2.default)(this, "textContainer", null);
+    this.node = node;
+    this.intl = intl;
+    try {
+      var spec = (0, _statusNodeSpec.statusToDOM)(node);
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
+        dom = _DOMSerializer$render.dom;
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+      this.box = this.dom.querySelector('.status-lozenge-span');
+      this.textContainer = this.dom.querySelector('.lozenge-text');
+      if (!node.attrs.text) {
+        this.setPlaceholder();
+      }
+    } catch (error) {
+      StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  return (0, _createClass2.default)(StatusNodeView, [{
+    key: "setPlaceholder",
+    value: function setPlaceholder() {
+      if (this.textContainer) {
+        this.textContainer.textContent = this.intl.formatMessage(_messages.statusMessages.placeholder);
+        this.dom.style.setProperty('opacity', '0.5');
+      }
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.text;
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (node.type !== this.node.type) {
+        return false;
+      }
+      if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
+        this.textContainer.textContent = node.attrs.text;
+      }
+      if (node.attrs.color !== this.node.attrs.color) {
+        var _this$box;
+        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
+      }
+      if (!node.attrs.text) {
+        this.setPlaceholder();
+      }
+      if (node.attrs.text) {
+        this.dom.style.setProperty('opacity', '1');
+      }
+      this.node = node;
+      return true;
+    }
+  }], [{
+    key: "logError",
+    value: function logError(error) {
+      void (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-status/StatusNodeView'
+      });
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/statusNodeSpec.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.statusNodeSpec = void 0;
+exports.statusToDOM = exports.statusNodeSpec = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactIntlNext = require("react-intl-next");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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() {
       }
     }
   });
+};
+var statusToDOM = exports.statusToDOM = function statusToDOM(node) {
+  var _node$attrs2 = node.attrs,
+    text = _node$attrs2.text,
+    color = _node$attrs2.color,
+    style = _node$attrs2.style,
+    localId = _node$attrs2.localId;
+  var editorNodeWrapperAttrs = {
+    class: 'statusView-content-wrap inlineNodeView',
+    'data-testid': 'statusContainerView',
+    'data-prosemirror-node-view-type': 'vanilla',
+    'local-id': localId
+  };
+  var statusElementAttrs = {
+    style: (0, _lazyNodeView.convertToInlineCss)(isAndroidChromium ? {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      display: 'inline-block !important',
+      verticalAlign: 'middle'
+    } : {}),
+    class: 'status-lozenge-span',
+    'data-node-type': 'status',
+    'data-color': color,
+    'data-style': style
+  };
+  var lozengeWrapperAttrs = {
+    class: 'lozenge-wrapper'
+  };
+  var lozengeTextAttrs = {
+    class: 'lozenge-text',
+    style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') ? {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      letterSpacing: '0.165px'
+    } : {}))
+  };
+  return ['span', editorNodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]];
 };

package/dist/cjs/pm-plugins/plugin.js

@@ -10,7 +10,9 @@ var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _status = require("../nodeviews/status");
+var _StatusNodeView = require("../nodeviews/StatusNodeView");
 var _pluginKey = require("./plugin-key");
 var _utils2 = require("./utils");
 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) {
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        status: (0, _reactNodeView.getInlineNodeViewProducer)({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: _status.StatusNodeView,
-          extraComponentProps: {
-            options: options
+        status: function status(node, view, getPos, decorations) {
+          if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new _StatusNodeView.StatusNodeView(node, pmPluginFactoryParams.getIntl());
           }
-        })
+          return (0, _reactNodeView.getInlineNodeViewProducer)({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: _status.StatusNodeView,
+            extraComponentProps: {
+              options: options
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     }
   });

package/dist/cjs/ui/statusPicker.js

@@ -13,13 +13,17 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _picker = require("@atlaskit/status/picker");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _actions = require("../pm-plugins/actions");
 var _analytics = require("./analytics");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -57,11 +61,11 @@ var pickerContainerStyles = (0, _react2.css)({
 });
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
-  function StatusPickerWithoutAnalytcs(props) {
+var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
+  function StatusPickerWithIntl(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, StatusPickerWithoutAnalytcs);
-    _this = _callSuper(this, StatusPickerWithoutAnalytcs, [props]);
+    (0, _classCallCheck2.default)(this, StatusPickerWithIntl);
+    _this = _callSuper(this, StatusPickerWithIntl, [props]);
     (0, _defineProperty2.default)(_this, "handleClickOutside", function (event) {
       event.preventDefault();
       _this.inputMethod = InputMethod.blur;
@@ -190,8 +194,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
     _this.popupBodyWrapper = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
-  (0, _inherits2.default)(StatusPickerWithoutAnalytcs, _React$Component);
-  return (0, _createClass2.default)(StatusPickerWithoutAnalytcs, [{
+  (0, _inherits2.default)(StatusPickerWithIntl, _React$Component);
+  return (0, _createClass2.default)(StatusPickerWithIntl, [{
     key: "fireStatusPopupOpenedAnalytics",
     value: function fireStatusPopupOpenedAnalytics(state) {
       var color = state.color,
@@ -320,7 +324,8 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         mountTo = _this$props2.mountTo,
         boundariesElement = _this$props2.boundariesElement,
         scrollableElement = _this$props2.scrollableElement,
-        editorView = _this$props2.editorView;
+        editorView = _this$props2.editorView,
+        intl = _this$props2.intl;
       if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
         return null;
       }
@@ -335,8 +340,12 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         closeOnTab: false
-      }, (0, _react2.jsx)(_uiReact.OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
+      }, (0, _platformFeatureFlags.fg)('editor_a11y_announce_status_editor_open') && (0, _react2.jsx)(_visuallyHidden.default, {
+        "aria-atomic": true,
+        role: "alert"
+      }, intl.formatMessage(_messages.statusMessages.statusPickerOpenedAlert)), (0, _react2.jsx)(_uiReact.OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
     }
   }]);
 }(_react.default.Component);
+var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = (0, _reactIntlNext.injectIntl)(StatusPickerWithIntl);
 var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(StatusPickerWithoutAnalytcs);

package/dist/es2019/nodeviews/StatusNodeView.js

@@ -0,0 +1,68 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { statusMessages as messages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { statusToDOM } from './statusNodeSpec';
+export class StatusNodeView {
+  static logError(error) {
+    void logException(error, {
+      location: 'editor-plugin-status/StatusNodeView'
+    });
+  }
+  constructor(node, intl) {
+    _defineProperty(this, "dom", document.createElement('div'));
+    _defineProperty(this, "box", null);
+    _defineProperty(this, "textContainer", null);
+    this.node = node;
+    this.intl = intl;
+    try {
+      const spec = statusToDOM(node);
+      const {
+        dom
+      } = DOMSerializer.renderSpec(document, spec);
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+      this.box = this.dom.querySelector('.status-lozenge-span');
+      this.textContainer = this.dom.querySelector('.lozenge-text');
+      if (!node.attrs.text) {
+        this.setPlaceholder();
+      }
+    } catch (error) {
+      StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  setPlaceholder() {
+    if (this.textContainer) {
+      this.textContainer.textContent = this.intl.formatMessage(messages.placeholder);
+      this.dom.style.setProperty('opacity', '0.5');
+    }
+  }
+  renderFallback() {
+    const fallbackElement = document.createElement('span');
+    fallbackElement.innerText = this.node.attrs.text;
+    this.dom.appendChild(fallbackElement);
+  }
+  update(node) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+    if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
+      this.textContainer.textContent = node.attrs.text;
+    }
+    if (node.attrs.color !== this.node.attrs.color) {
+      var _this$box;
+      (_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', node.attrs.color);
+    }
+    if (!node.attrs.text) {
+      this.setPlaceholder();
+    }
+    if (node.attrs.text) {
+      this.dom.style.setProperty('opacity', '1');
+    }
+    this.node = node;
+    return true;
+  }
+}

package/dist/es2019/nodeviews/statusNodeSpec.js

@@ -1,6 +1,7 @@
 import { createIntl } from 'react-intl-next';
 import { status } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 const isSSR = Boolean(process.env.REACT_SSR);
@@ -213,4 +214,48 @@ export const statusNodeSpec = () => {
       }
     }
   };
+};
+export const statusToDOM = node => {
+  const {
+    text,
+    color,
+    style,
+    localId
+  } = node.attrs;
+  const editorNodeWrapperAttrs = {
+    class: 'statusView-content-wrap inlineNodeView',
+    'data-testid': 'statusContainerView',
+    'data-prosemirror-node-view-type': 'vanilla',
+    'local-id': localId
+  };
+  const statusElementAttrs = {
+    style: convertToInlineCss(isAndroidChromium ? {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      display: 'inline-block !important',
+      verticalAlign: 'middle'
+    } : {}),
+    class: 'status-lozenge-span',
+    'data-node-type': 'status',
+    'data-color': color,
+    'data-style': style
+  };
+  const lozengeWrapperAttrs = {
+    class: 'lozenge-wrapper'
+  };
+  const lozengeTextAttrs = {
+    class: 'lozenge-text',
+    style: convertToInlineCss({
+      ...(fg('platform-lozenge-custom-letterspacing') ? {
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+        letterSpacing: '0.165px'
+      } : {})
+    })
+  };
+  return ['span', editorNodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
 };

package/dist/es2019/pm-plugins/plugin.js

@@ -2,7 +2,9 @@ import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-vi
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { StatusNodeView } from '../nodeviews/status';
+import { StatusNodeView as StatusNodeViewVanilla } from '../nodeviews/StatusNodeView';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
@@ -101,13 +103,20 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
   key: pluginKey,
   props: {
     nodeViews: {
-      status: getInlineNodeViewProducer({
-        pmPluginFactoryParams,
-        Component: StatusNodeView,
-        extraComponentProps: {
-          options
+      status: (node, view, getPos, decorations) => {
+        if (editorExperiment('platform_editor_vanilla_dom', true, {
+          exposure: true
+        })) {
+          return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
         }
-      })
+        return getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: StatusNodeView,
+          extraComponentProps: {
+            options
+          }
+        })(node, view, getPos, decorations);
+      }
     }
   }
 });

package/dist/es2019/ui/statusPicker.js

@@ -8,13 +8,17 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { N0 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_STATUS } from '../pm-plugins/actions';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
 const PopupWithListeners = withOuterListeners(Popup);
@@ -47,7 +51,7 @@ const pickerContainerStyles = css({
 });
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export class StatusPickerWithoutAnalytcs extends React.Component {
+class StatusPickerWithIntl extends React.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "handleClickOutside", event => {
@@ -293,7 +297,8 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       mountTo,
       boundariesElement,
       scrollableElement,
-      editorView
+      editorView,
+      intl
     } = this.props;
     if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
       return null;
@@ -309,7 +314,11 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       closeOnTab: false
-    }, jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
+    }, fg('editor_a11y_announce_status_editor_open') && jsx(VisuallyHidden, {
+      "aria-atomic": true,
+      role: "alert"
+    }, intl.formatMessage(messages.statusPickerOpenedAlert)), jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
   }
 }
+export const StatusPickerWithoutAnalytcs = injectIntl(StatusPickerWithIntl);
 export default withAnalyticsEvents()(StatusPickerWithoutAnalytcs);

package/dist/esm/nodeviews/StatusNodeView.js

@@ -0,0 +1,79 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { statusMessages as messages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { statusToDOM } from './statusNodeSpec';
+export var StatusNodeView = /*#__PURE__*/function () {
+  function StatusNodeView(node, intl) {
+    _classCallCheck(this, StatusNodeView);
+    _defineProperty(this, "dom", document.createElement('div'));
+    _defineProperty(this, "box", null);
+    _defineProperty(this, "textContainer", null);
+    this.node = node;
+    this.intl = intl;
+    try {
+      var spec = statusToDOM(node);
+      var _DOMSerializer$render = DOMSerializer.renderSpec(document, spec),
+        dom = _DOMSerializer$render.dom;
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+      this.box = this.dom.querySelector('.status-lozenge-span');
+      this.textContainer = this.dom.querySelector('.lozenge-text');
+      if (!node.attrs.text) {
+        this.setPlaceholder();
+      }
+    } catch (error) {
+      StatusNodeView.logError(error instanceof Error ? error : new Error('Unknown error on StatusNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  return _createClass(StatusNodeView, [{
+    key: "setPlaceholder",
+    value: function setPlaceholder() {
+      if (this.textContainer) {
+        this.textContainer.textContent = this.intl.formatMessage(messages.placeholder);
+        this.dom.style.setProperty('opacity', '0.5');
+      }
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.text;
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (node.type !== this.node.type) {
+        return false;
+      }
+      if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
+        this.textContainer.textContent = node.attrs.text;
+      }
+      if (node.attrs.color !== this.node.attrs.color) {
+        var _this$box;
+        (_this$box = this.box) === null || _this$box === void 0 || _this$box.setAttribute('data-color', node.attrs.color);
+      }
+      if (!node.attrs.text) {
+        this.setPlaceholder();
+      }
+      if (node.attrs.text) {
+        this.dom.style.setProperty('opacity', '1');
+      }
+      this.node = node;
+      return true;
+    }
+  }], [{
+    key: "logError",
+    value: function logError(error) {
+      void logException(error, {
+        location: 'editor-plugin-status/StatusNodeView'
+      });
+    }
+  }]);
+}();

package/dist/esm/nodeviews/statusNodeSpec.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createIntl } from 'react-intl-next';
 import { status } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 var isSSR = Boolean(process.env.REACT_SSR);
@@ -211,4 +212,45 @@ export var statusNodeSpec = function statusNodeSpec() {
       }
     }
   });
+};
+export var statusToDOM = function statusToDOM(node) {
+  var _node$attrs2 = node.attrs,
+    text = _node$attrs2.text,
+    color = _node$attrs2.color,
+    style = _node$attrs2.style,
+    localId = _node$attrs2.localId;
+  var editorNodeWrapperAttrs = {
+    class: 'statusView-content-wrap inlineNodeView',
+    'data-testid': 'statusContainerView',
+    'data-prosemirror-node-view-type': 'vanilla',
+    'local-id': localId
+  };
+  var statusElementAttrs = {
+    style: convertToInlineCss(isAndroidChromium ? {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+      display: 'inline-block !important',
+      verticalAlign: 'middle'
+    } : {}),
+    class: 'status-lozenge-span',
+    'data-node-type': 'status',
+    'data-color': color,
+    'data-style': style
+  };
+  var lozengeWrapperAttrs = {
+    class: 'lozenge-wrapper'
+  };
+  var lozengeTextAttrs = {
+    class: 'lozenge-text',
+    style: convertToInlineCss(_objectSpread({}, fg('platform-lozenge-custom-letterspacing') ? {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      letterSpacing: '0.165px'
+    } : {}))
+  };
+  return ['span', editorNodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
 };

package/dist/esm/pm-plugins/plugin.js

@@ -5,7 +5,9 @@ import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-vi
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { StatusNodeView } from '../nodeviews/status';
+import { StatusNodeView as StatusNodeViewVanilla } from '../nodeviews/StatusNodeView';
 import { pluginKey } from './plugin-key';
 import { isEmptyStatus, mayGetStatusAtSelection } from './utils';
 var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
@@ -102,13 +104,20 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
     key: pluginKey,
     props: {
       nodeViews: {
-        status: getInlineNodeViewProducer({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: StatusNodeView,
-          extraComponentProps: {
-            options: options
+        status: function status(node, view, getPos, decorations) {
+          if (editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
           }
-        })
+          return getInlineNodeViewProducer({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: StatusNodeView,
+            extraComponentProps: {
+              options: options
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     }
   });

package/dist/esm/ui/statusPicker.js

@@ -15,13 +15,17 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { N0 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_STATUS } from '../pm-plugins/actions';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
 var PopupWithListeners = withOuterListeners(Popup);
@@ -54,11 +58,11 @@ var pickerContainerStyles = css({
 });
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
-  function StatusPickerWithoutAnalytcs(props) {
+var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
+  function StatusPickerWithIntl(props) {
     var _this;
-    _classCallCheck(this, StatusPickerWithoutAnalytcs);
-    _this = _callSuper(this, StatusPickerWithoutAnalytcs, [props]);
+    _classCallCheck(this, StatusPickerWithIntl);
+    _this = _callSuper(this, StatusPickerWithIntl, [props]);
     _defineProperty(_this, "handleClickOutside", function (event) {
       event.preventDefault();
       _this.inputMethod = InputMethod.blur;
@@ -187,8 +191,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
     _this.popupBodyWrapper = /*#__PURE__*/React.createRef();
     return _this;
   }
-  _inherits(StatusPickerWithoutAnalytcs, _React$Component);
-  return _createClass(StatusPickerWithoutAnalytcs, [{
+  _inherits(StatusPickerWithIntl, _React$Component);
+  return _createClass(StatusPickerWithIntl, [{
     key: "fireStatusPopupOpenedAnalytics",
     value: function fireStatusPopupOpenedAnalytics(state) {
       var color = state.color,
@@ -317,7 +321,8 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         mountTo = _this$props2.mountTo,
         boundariesElement = _this$props2.boundariesElement,
         scrollableElement = _this$props2.scrollableElement,
-        editorView = _this$props2.editorView;
+        editorView = _this$props2.editorView,
+        intl = _this$props2.intl;
       if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
         return null;
       }
@@ -332,8 +337,12 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         closeOnTab: false
-      }, jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
+      }, fg('editor_a11y_announce_status_editor_open') && jsx(VisuallyHidden, {
+        "aria-atomic": true,
+        role: "alert"
+      }, intl.formatMessage(messages.statusPickerOpenedAlert)), jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
     }
   }]);
 }(React.Component);
+export var StatusPickerWithoutAnalytcs = injectIntl(StatusPickerWithIntl);
 export default withAnalyticsEvents()(StatusPickerWithoutAnalytcs);

package/dist/types/nodeviews/StatusNodeView.d.ts

@@ -0,0 +1,15 @@
+import { IntlShape } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class StatusNodeView implements NodeView {
+    dom: HTMLElement;
+    private box;
+    private textContainer;
+    private node;
+    private intl;
+    private static logError;
+    constructor(node: PMNode, intl: IntlShape);
+    private setPlaceholder;
+    private renderFallback;
+    update(node: PMNode): boolean;
+}

package/dist/types/nodeviews/statusNodeSpec.d.ts

@@ -1,6 +1,8 @@
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 /**
  * Wrapper for ADF status node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
  * @returns
  */
 export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;

package/dist/types/ui/statusPicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { jsx } from '@emotion/react';
+import { type WrappedComponentProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ColorType as Color } from '@atlaskit/status/picker';
@@ -29,6 +29,7 @@ export interface Props {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     editorView: EditorView;
+    intl: WrappedComponentProps['intl'];
 }
 export interface State {
     color: Color;
@@ -36,33 +37,10 @@ export interface State {
     localId?: string;
     isNew?: boolean;
 }
-export declare class StatusPickerWithoutAnalytcs extends React.Component<Props, State> {
-    private startTime;
-    private inputMethod?;
-    private createStatusAnalyticsAndFireFunc;
-    private popupBodyWrapper;
-    private focusTimeout;
-    constructor(props: Props);
-    private fireStatusPopupOpenedAnalytics;
-    private fireStatusPopupClosedAnalytics;
-    private reset;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
-    private extractStateFromProps;
-    handleClickOutside: (event: Event) => void;
-    private handleEscapeKeydown;
-    private handleTabPress;
-    private handleArrow;
-    private onKeyDown;
-    private setRef;
-    private renderWithSetOutsideClickTargetRef;
-    render(): jsx.JSX.Element | null;
-    private onColorHover;
-    private onColorClick;
-    private onTextChanged;
-    private onEnter;
-    private handlePopupClick;
-}
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const StatusPickerWithoutAnalytcs: React.FC<import("react-intl-next").WithIntlProps<Props>> & {
+    WrappedComponent: React.ComponentType<Props>;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Props, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/nodeviews/StatusNodeView.d.ts

@@ -0,0 +1,15 @@
+import { IntlShape } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class StatusNodeView implements NodeView {
+    dom: HTMLElement;
+    private box;
+    private textContainer;
+    private node;
+    private intl;
+    private static logError;
+    constructor(node: PMNode, intl: IntlShape);
+    private setPlaceholder;
+    private renderFallback;
+    update(node: PMNode): boolean;
+}

package/dist/types-ts4.5/nodeviews/statusNodeSpec.d.ts

@@ -1,6 +1,8 @@
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 /**
  * Wrapper for ADF status node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
  * @returns
  */
 export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;

package/dist/types-ts4.5/ui/statusPicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { jsx } from '@emotion/react';
+import { type WrappedComponentProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ColorType as Color } from '@atlaskit/status/picker';
@@ -29,6 +29,7 @@ export interface Props {
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
     editorView: EditorView;
+    intl: WrappedComponentProps['intl'];
 }
 export interface State {
     color: Color;
@@ -36,33 +37,10 @@ export interface State {
     localId?: string;
     isNew?: boolean;
 }
-export declare class StatusPickerWithoutAnalytcs extends React.Component<Props, State> {
-    private startTime;
-    private inputMethod?;
-    private createStatusAnalyticsAndFireFunc;
-    private popupBodyWrapper;
-    private focusTimeout;
-    constructor(props: Props);
-    private fireStatusPopupOpenedAnalytics;
-    private fireStatusPopupClosedAnalytics;
-    private reset;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
-    private extractStateFromProps;
-    handleClickOutside: (event: Event) => void;
-    private handleEscapeKeydown;
-    private handleTabPress;
-    private handleArrow;
-    private onKeyDown;
-    private setRef;
-    private renderWithSetOutsideClickTargetRef;
-    render(): jsx.JSX.Element | null;
-    private onColorHover;
-    private onColorClick;
-    private onTextChanged;
-    private onEnter;
-    private handlePopupClick;
-}
-declare const _default: React.ForwardRefExoticComponent<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const StatusPickerWithoutAnalytcs: React.FC<import("react-intl-next").WithIntlProps<Props>> & {
+    WrappedComponent: React.ComponentType<Props>;
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Props, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "3.1.8",
+	"version": "3.1.10",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.4.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
@@ -45,6 +45,7 @@
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -104,6 +105,9 @@
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		},
+		"editor_a11y_announce_status_editor_open": {
+			"type": "boolean"
+		},
 		"visual-refresh_drop_5": {
 			"type": "boolean"
 		},