@atlaskit/editor-plugin-status 3.1.25 → 3.1.26

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-status
 
+## 3.1.26
+
+### Patch Changes
+
+- [#178271](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/178271)
+  [`fd1a32b0a4f6b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd1a32b0a4f6b) -
+  [ED-28322] Remove React version of status nodes to clean up experiment platform_editor_vanilla_dom
+- Updated dependencies
+
 ## 3.1.25
 
 ### Patch Changes

package/dist/cjs/nodeviews/statusNodeSpec.js

@@ -4,236 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.statusToDOM = exports.statusNodeSpec = void 0;
+exports.statusToDOM = 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 _utils = require("@atlaskit/editor-common/utils");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var isSSR = Boolean(process.env.REACT_SSR);
-var intl;
-
-// copied from packages/elements/status/src/components/Status.tsx
-var colorToLozengeAppearanceMap = {
-  neutral: 'default',
-  purple: 'new',
-  blue: 'inprogress',
-  red: 'removed',
-  yellow: 'moved',
-  green: 'success'
-};
-var lozengeAppearanceToBgColorMap = {
-  bold: {
-    default: '#DDDEE1',
-    inprogress: '#8FB8F6',
-    moved: '#F9C84E',
-    new: '#D8A0F7',
-    removed: '#FD9891',
-    success: '#B3DF72'
-  },
-  subtle: {
-    default: "var(--ds-background-neutral-subtle, #00000000)",
-    inprogress: "var(--ds-background-neutral-subtle, #00000000)",
-    moved: "var(--ds-background-neutral-subtle, #00000000)",
-    new: "var(--ds-background-neutral-subtle, #00000000)",
-    removed: "var(--ds-background-neutral-subtle, #00000000)",
-    success: "var(--ds-background-neutral-subtle, #00000000)"
-  }
-};
-var borderStyleMap = {
-  subtle: {
-    default: "1px solid #B7B9BE",
-    inprogress: "1px solid #669DF1",
-    moved: "1px solid #FCA700",
-    new: "1px solid #C97CF4",
-    removed: "1px solid #F87168",
-    success: "1px solid #94C748"
-  }
-};
-var backgroundColorsOld = {
-  bold: {
-    default: "var(--ds-background-neutral-bold, #44546F)",
-    inprogress: "var(--ds-background-information-bold, #0C66E4)",
-    moved: "var(--ds-background-warning-bold, #F5CD47)",
-    new: "var(--ds-background-discovery-bold, #6E5DC6)",
-    removed: "var(--ds-background-danger-bold, #C9372C)",
-    success: "var(--ds-background-success-bold, #1F845A)"
-  },
-  subtle: {
-    default: "var(--ds-background-neutral, #091E420F)",
-    inprogress: "var(--ds-background-information, #E9F2FF)",
-    moved: "var(--ds-background-warning, #FFF7D6)",
-    new: "var(--ds-background-discovery, #F3F0FF)",
-    removed: "var(--ds-background-danger, #FFECEB)",
-    success: "var(--ds-background-success, #DCFFF1)"
-  }
-};
-var textColorsOld = {
-  bold: {
-    default: "var(--ds-text-inverse, #FFFFFF)",
-    inprogress: "var(--ds-text-inverse, #FFFFFF)",
-    moved: "var(--ds-text-warning-inverse, #172B4D)",
-    new: "var(--ds-text-inverse, #FFFFFF)",
-    removed: "var(--ds-text-inverse, #FFFFFF)",
-    success: "var(--ds-text-inverse, #FFFFFF)"
-  },
-  subtle: {
-    default: "var(--ds-text-subtle, #44546F)",
-    inprogress: "var(--ds-text-information, #0055CC)",
-    moved: "var(--ds-text-warning, #A54800)",
-    new: "var(--ds-text-discovery, #5E4DB2)",
-    removed: "var(--ds-text-danger, #AE2E24)",
-    success: "var(--ds-text-success, #216E4E)"
-  }
-};
-var DEFAULT_APPEARANCE = 'default';
-
 // eg. Version/4.0 Chrome/95.0.4638.50
 var isAndroidChromium = typeof window !== 'undefined' && /Version\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])* Chrome\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*/.test(window.navigator.userAgent);
-
-/**
- * Wrapper for ADF status node spec to augment toDOM implementation
- * with fallback UI for lazy node view rendering / window virtualization
- * @returns
- * @example
- */
-var statusNodeSpec = exports.statusNodeSpec = function statusNodeSpec() {
-  if (isSSR) {
-    return _adfSchema.status;
-  }
-  return _objectSpread(_objectSpread({}, _adfSchema.status), {}, {
-    toDOM: function toDOM(node) {
-      var _style$backgroundColo;
-      var _node$attrs = node.attrs,
-        text = _node$attrs.text,
-        color = _node$attrs.color,
-        style = _node$attrs.style;
-      intl = intl || (0, _reactIntlNext.createIntl)({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      var isComponentVisualRefresh = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh');
-      var maxWidth = 200;
-      var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
-      var editorNodeWrapperAttrs = {
-        'data-testid': 'statusContainerView',
-        style: (0, _lazyNodeView.convertToInlineCss)(text ? {
-          opacity: 1
-        } : {
-          opacity: 0.5
-        })
-      };
-
-      // packages/elements/status/src/components/Status.tsx
-      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
-      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',
-        'aria-busy': 'true',
-        'data-node-type': 'status',
-        'data-prosemirror-node-name': 'status',
-        'data-color': color,
-        'data-style': style
-      };
-
-      // packages/design-system/lozenge/src/Lozenge/index.tsx
-      var appearanceStyle = isComponentVisualRefresh ? 'bold' : 'subtle';
-      var appearanceType = appearance in lozengeAppearanceToBgColorMap[appearanceStyle] ? appearance : 'default';
-      var lozengeWrapperAttrs = {
-        style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
-          maxWidth: "calc(200px - ".concat("var(--ds-space-100, 8px)", ")"),
-          // container
-          display: 'inline-flex',
-          boxSizing: 'border-box',
-          position: 'static',
-          blockSize: 'min-content',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          paddingInline: "var(--ds-space-050, 4px)",
-          // background
-          backgroundColor: (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : lozengeAppearanceToBgColorMap[appearanceStyle][appearanceType]
-        }, appearanceStyle === 'subtle' ? (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') ? {
-          outline: borderStyleMap[appearanceStyle][appearanceType],
-          outlineOffset: -1
-        } : {
-          border: borderStyleMap[appearanceStyle][appearanceType]
-        } : {}))
-      };
-      var lozengeTextAttrs = {
-        style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread({
-          color: appearanceStyle === 'subtle' ? "var(--ds-text, #172B4D)" : '#292A2E',
-          maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
-          font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-          fontWeight: "var(--ds-font-weight-bold, 700)",
-          fontSize: '11px',
-          // can't use token - underlying DS lozenge is out by 1px which causes layout shift
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-          whiteSpace: 'nowrap'
-        }, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') ? {
-          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-          letterSpacing: '0.165px'
-        } : {}))
-      };
-      if (isComponentVisualRefresh) {
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]]];
-      } else {
-        var _style$color;
-        // packages/design-system/lozenge/src/Lozenge/index.tsx
-        var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-        var legacyLozengeBoxAttrs = {
-          style: (0, _lazyNodeView.convertToInlineCss)({
-            backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%',
-            paddingInline: "var(--ds-space-050, 4px)",
-            display: 'inline-flex',
-            borderRadius: "var(--ds-border-radius, 4px)",
-            blockSize: 'min-content',
-            position: 'static',
-            overflow: 'hidden',
-            boxSizing: 'border-box',
-            appearance: 'none',
-            border: 'none'
-          })
-        };
-        var legacyLozengeTextAttrs = {
-          style: (0, _lazyNodeView.convertToInlineCss)({
-            font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontWeight: "var(--ds-font-weight-bold, 700)",
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-            whiteSpace: 'nowrap',
-            color: (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%'
-          })
-        };
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', legacyLozengeBoxAttrs, ['span', legacyLozengeTextAttrs, text]]]];
-      }
-    }
-  });
-};
 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 _node$attrs = node.attrs,
+    text = _node$attrs.text,
+    color = _node$attrs.color,
+    style = _node$attrs.style,
+    localId = _node$attrs.localId;
   var editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
-    'data-prosemirror-node-view-type': 'vanilla',
     'data-prosemirror-node-name': 'status',
-    'local-id': localId
+    'localid': localId
   };
   var statusElementAttrs = {
     style: (0, _lazyNodeView.convertToInlineCss)(isAndroidChromium ? {

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

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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");
@@ -111,19 +108,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        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);
+        status: function status(node) {
+          return new _StatusNodeView.StatusNodeView(node, pmPluginFactoryParams.getIntl());
         }
       }
     }

package/dist/cjs/statusPlugin.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.statusPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
-var _statusNodeSpec = require("./nodeviews/statusNodeSpec");
 var _actions = require("./pm-plugins/actions");
 var _keymap = require("./pm-plugins/keymap");
 var _plugin = _interopRequireDefault(require("./pm-plugins/plugin"));
@@ -27,7 +27,7 @@ var statusPlugin = exports.statusPlugin = function statusPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'status',
-        node: (0, _statusNodeSpec.statusNodeSpec)()
+        node: _adfSchema.status
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/es2019/nodeviews/statusNodeSpec.js

@@ -1,222 +1,10 @@
-import { createIntl } from 'react-intl-next';
-import { status } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { browser } from '@atlaskit/editor-common/utils';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
-const isSSR = Boolean(process.env.REACT_SSR);
-let intl;
-
-// copied from packages/elements/status/src/components/Status.tsx
-const colorToLozengeAppearanceMap = {
-  neutral: 'default',
-  purple: 'new',
-  blue: 'inprogress',
-  red: 'removed',
-  yellow: 'moved',
-  green: 'success'
-};
-const lozengeAppearanceToBgColorMap = {
-  bold: {
-    default: '#DDDEE1',
-    inprogress: '#8FB8F6',
-    moved: '#F9C84E',
-    new: '#D8A0F7',
-    removed: '#FD9891',
-    success: '#B3DF72'
-  },
-  subtle: {
-    default: "var(--ds-background-neutral-subtle, #00000000)",
-    inprogress: "var(--ds-background-neutral-subtle, #00000000)",
-    moved: "var(--ds-background-neutral-subtle, #00000000)",
-    new: "var(--ds-background-neutral-subtle, #00000000)",
-    removed: "var(--ds-background-neutral-subtle, #00000000)",
-    success: "var(--ds-background-neutral-subtle, #00000000)"
-  }
-};
-const borderStyleMap = {
-  subtle: {
-    default: `1px solid #B7B9BE`,
-    inprogress: `1px solid #669DF1`,
-    moved: `1px solid #FCA700`,
-    new: `1px solid #C97CF4`,
-    removed: `1px solid #F87168`,
-    success: `1px solid #94C748`
-  }
-};
-const backgroundColorsOld = {
-  bold: {
-    default: "var(--ds-background-neutral-bold, #44546F)",
-    inprogress: "var(--ds-background-information-bold, #0C66E4)",
-    moved: "var(--ds-background-warning-bold, #F5CD47)",
-    new: "var(--ds-background-discovery-bold, #6E5DC6)",
-    removed: "var(--ds-background-danger-bold, #C9372C)",
-    success: "var(--ds-background-success-bold, #1F845A)"
-  },
-  subtle: {
-    default: "var(--ds-background-neutral, #091E420F)",
-    inprogress: "var(--ds-background-information, #E9F2FF)",
-    moved: "var(--ds-background-warning, #FFF7D6)",
-    new: "var(--ds-background-discovery, #F3F0FF)",
-    removed: "var(--ds-background-danger, #FFECEB)",
-    success: "var(--ds-background-success, #DCFFF1)"
-  }
-};
-const textColorsOld = {
-  bold: {
-    default: "var(--ds-text-inverse, #FFFFFF)",
-    inprogress: "var(--ds-text-inverse, #FFFFFF)",
-    moved: "var(--ds-text-warning-inverse, #172B4D)",
-    new: "var(--ds-text-inverse, #FFFFFF)",
-    removed: "var(--ds-text-inverse, #FFFFFF)",
-    success: "var(--ds-text-inverse, #FFFFFF)"
-  },
-  subtle: {
-    default: "var(--ds-text-subtle, #44546F)",
-    inprogress: "var(--ds-text-information, #0055CC)",
-    moved: "var(--ds-text-warning, #A54800)",
-    new: "var(--ds-text-discovery, #5E4DB2)",
-    removed: "var(--ds-text-danger, #AE2E24)",
-    success: "var(--ds-text-success, #216E4E)"
-  }
-};
-const DEFAULT_APPEARANCE = 'default';
 
 // eg. Version/4.0 Chrome/95.0.4638.50
 const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/u.test(window.navigator.userAgent);
-
-/**
- * Wrapper for ADF status node spec to augment toDOM implementation
- * with fallback UI for lazy node view rendering / window virtualization
- * @returns
- * @example
- */
-export const statusNodeSpec = () => {
-  if (isSSR) {
-    return status;
-  }
-  return {
-    ...status,
-    toDOM: node => {
-      var _style$backgroundColo;
-      const {
-        text,
-        color,
-        style
-      } = node.attrs;
-      intl = intl || createIntl({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      const isComponentVisualRefresh = fg('platform-component-visual-refresh');
-      const maxWidth = 200;
-      const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
-      const editorNodeWrapperAttrs = {
-        'data-testid': 'statusContainerView',
-        style: convertToInlineCss(text ? {
-          opacity: 1
-        } : {
-          opacity: 0.5
-        })
-      };
-
-      // packages/elements/status/src/components/Status.tsx
-      const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
-      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',
-        'aria-busy': 'true',
-        'data-node-type': 'status',
-        'data-prosemirror-node-name': 'status',
-        'data-color': color,
-        'data-style': style
-      };
-
-      // packages/design-system/lozenge/src/Lozenge/index.tsx
-      const appearanceStyle = isComponentVisualRefresh ? 'bold' : 'subtle';
-      const appearanceType = appearance in lozengeAppearanceToBgColorMap[appearanceStyle] ? appearance : 'default';
-      const lozengeWrapperAttrs = {
-        style: convertToInlineCss({
-          maxWidth: `calc(200px - ${"var(--ds-space-100, 8px)"})`,
-          // container
-          display: 'inline-flex',
-          boxSizing: 'border-box',
-          position: 'static',
-          blockSize: 'min-content',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          paddingInline: "var(--ds-space-050, 4px)",
-          // background
-          backgroundColor: (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : lozengeAppearanceToBgColorMap[appearanceStyle][appearanceType],
-          // border
-          ...(appearanceStyle === 'subtle' ? fg('visual-refresh_drop_5') ? {
-            outline: borderStyleMap[appearanceStyle][appearanceType],
-            outlineOffset: -1
-          } : {
-            border: borderStyleMap[appearanceStyle][appearanceType]
-          } : {})
-        })
-      };
-      const lozengeTextAttrs = {
-        style: convertToInlineCss({
-          color: appearanceStyle === 'subtle' ? "var(--ds-text, #172B4D)" : '#292A2E',
-          maxWidth: `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`,
-          font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-          fontWeight: "var(--ds-font-weight-bold, 700)",
-          fontSize: '11px',
-          // can't use token - underlying DS lozenge is out by 1px which causes layout shift
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-          whiteSpace: 'nowrap',
-          ...(fg('platform-lozenge-custom-letterspacing') ? {
-            // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-            letterSpacing: '0.165px'
-          } : {})
-        })
-      };
-      if (isComponentVisualRefresh) {
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]]];
-      } else {
-        var _style$color;
-        // packages/design-system/lozenge/src/Lozenge/index.tsx
-        const appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-        const legacyLozengeBoxAttrs = {
-          style: convertToInlineCss({
-            backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%',
-            paddingInline: "var(--ds-space-050, 4px)",
-            display: 'inline-flex',
-            borderRadius: "var(--ds-border-radius, 4px)",
-            blockSize: 'min-content',
-            position: 'static',
-            overflow: 'hidden',
-            boxSizing: 'border-box',
-            appearance: 'none',
-            border: 'none'
-          })
-        };
-        const legacyLozengeTextAttrs = {
-          style: convertToInlineCss({
-            font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontWeight: "var(--ds-font-weight-bold, 700)",
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-            whiteSpace: 'nowrap',
-            color: (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%'
-          })
-        };
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', legacyLozengeBoxAttrs, ['span', legacyLozengeTextAttrs, text]]]];
-      }
-    }
-  };
-};
 export const statusToDOM = node => {
   const {
     text,
@@ -227,9 +15,8 @@ export const statusToDOM = node => {
   const editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
-    'data-prosemirror-node-view-type': 'vanilla',
     'data-prosemirror-node-name': 'status',
-    'local-id': localId
+    'localid': localId
   };
   const statusElementAttrs = {
     style: convertToInlineCss(isAndroidChromium ? {

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

@@ -1,9 +1,6 @@
-import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 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';
@@ -103,19 +100,8 @@ const createPlugin = (pmPluginFactoryParams, options) => new SafePlugin({
   key: pluginKey,
   props: {
     nodeViews: {
-      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);
+      status: node => {
+        return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
       }
     }
   }

package/dist/es2019/statusPlugin.js

@@ -1,11 +1,11 @@
 import React from 'react';
+import { status } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT_ID, ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
-import { statusNodeSpec } from './nodeviews/statusNodeSpec';
 import { commitStatusPicker, insertStatus, removeStatus, updateStatusWithAnalytics } from './pm-plugins/actions';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
@@ -21,7 +21,7 @@ export const statusPlugin = ({
     nodes() {
       return [{
         name: 'status',
-        node: statusNodeSpec()
+        node: status
       }];
     },
     pmPlugins() {

package/dist/esm/nodeviews/statusNodeSpec.js

@@ -1,232 +1,24 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { createIntl } from 'react-intl-next';
-import { status } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { browser } from '@atlaskit/editor-common/utils';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { fg } from '@atlaskit/platform-feature-flags';
-var isSSR = Boolean(process.env.REACT_SSR);
-var intl;
-
-// copied from packages/elements/status/src/components/Status.tsx
-var colorToLozengeAppearanceMap = {
-  neutral: 'default',
-  purple: 'new',
-  blue: 'inprogress',
-  red: 'removed',
-  yellow: 'moved',
-  green: 'success'
-};
-var lozengeAppearanceToBgColorMap = {
-  bold: {
-    default: '#DDDEE1',
-    inprogress: '#8FB8F6',
-    moved: '#F9C84E',
-    new: '#D8A0F7',
-    removed: '#FD9891',
-    success: '#B3DF72'
-  },
-  subtle: {
-    default: "var(--ds-background-neutral-subtle, #00000000)",
-    inprogress: "var(--ds-background-neutral-subtle, #00000000)",
-    moved: "var(--ds-background-neutral-subtle, #00000000)",
-    new: "var(--ds-background-neutral-subtle, #00000000)",
-    removed: "var(--ds-background-neutral-subtle, #00000000)",
-    success: "var(--ds-background-neutral-subtle, #00000000)"
-  }
-};
-var borderStyleMap = {
-  subtle: {
-    default: "1px solid #B7B9BE",
-    inprogress: "1px solid #669DF1",
-    moved: "1px solid #FCA700",
-    new: "1px solid #C97CF4",
-    removed: "1px solid #F87168",
-    success: "1px solid #94C748"
-  }
-};
-var backgroundColorsOld = {
-  bold: {
-    default: "var(--ds-background-neutral-bold, #44546F)",
-    inprogress: "var(--ds-background-information-bold, #0C66E4)",
-    moved: "var(--ds-background-warning-bold, #F5CD47)",
-    new: "var(--ds-background-discovery-bold, #6E5DC6)",
-    removed: "var(--ds-background-danger-bold, #C9372C)",
-    success: "var(--ds-background-success-bold, #1F845A)"
-  },
-  subtle: {
-    default: "var(--ds-background-neutral, #091E420F)",
-    inprogress: "var(--ds-background-information, #E9F2FF)",
-    moved: "var(--ds-background-warning, #FFF7D6)",
-    new: "var(--ds-background-discovery, #F3F0FF)",
-    removed: "var(--ds-background-danger, #FFECEB)",
-    success: "var(--ds-background-success, #DCFFF1)"
-  }
-};
-var textColorsOld = {
-  bold: {
-    default: "var(--ds-text-inverse, #FFFFFF)",
-    inprogress: "var(--ds-text-inverse, #FFFFFF)",
-    moved: "var(--ds-text-warning-inverse, #172B4D)",
-    new: "var(--ds-text-inverse, #FFFFFF)",
-    removed: "var(--ds-text-inverse, #FFFFFF)",
-    success: "var(--ds-text-inverse, #FFFFFF)"
-  },
-  subtle: {
-    default: "var(--ds-text-subtle, #44546F)",
-    inprogress: "var(--ds-text-information, #0055CC)",
-    moved: "var(--ds-text-warning, #A54800)",
-    new: "var(--ds-text-discovery, #5E4DB2)",
-    removed: "var(--ds-text-danger, #AE2E24)",
-    success: "var(--ds-text-success, #216E4E)"
-  }
-};
-var DEFAULT_APPEARANCE = 'default';
 
 // eg. Version/4.0 Chrome/95.0.4638.50
 var isAndroidChromium = typeof window !== 'undefined' && /Version\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])* Chrome\/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*/.test(window.navigator.userAgent);
-
-/**
- * Wrapper for ADF status node spec to augment toDOM implementation
- * with fallback UI for lazy node view rendering / window virtualization
- * @returns
- * @example
- */
-export var statusNodeSpec = function statusNodeSpec() {
-  if (isSSR) {
-    return status;
-  }
-  return _objectSpread(_objectSpread({}, status), {}, {
-    toDOM: function toDOM(node) {
-      var _style$backgroundColo;
-      var _node$attrs = node.attrs,
-        text = _node$attrs.text,
-        color = _node$attrs.color,
-        style = _node$attrs.style;
-      intl = intl || createIntl({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      var isComponentVisualRefresh = fg('platform-component-visual-refresh');
-      var maxWidth = 200;
-      var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
-      var editorNodeWrapperAttrs = {
-        'data-testid': 'statusContainerView',
-        style: convertToInlineCss(text ? {
-          opacity: 1
-        } : {
-          opacity: 0.5
-        })
-      };
-
-      // packages/elements/status/src/components/Status.tsx
-      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
-      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',
-        'aria-busy': 'true',
-        'data-node-type': 'status',
-        'data-prosemirror-node-name': 'status',
-        'data-color': color,
-        'data-style': style
-      };
-
-      // packages/design-system/lozenge/src/Lozenge/index.tsx
-      var appearanceStyle = isComponentVisualRefresh ? 'bold' : 'subtle';
-      var appearanceType = appearance in lozengeAppearanceToBgColorMap[appearanceStyle] ? appearance : 'default';
-      var lozengeWrapperAttrs = {
-        style: convertToInlineCss(_objectSpread({
-          maxWidth: "calc(200px - ".concat("var(--ds-space-100, 8px)", ")"),
-          // container
-          display: 'inline-flex',
-          boxSizing: 'border-box',
-          position: 'static',
-          blockSize: 'min-content',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          paddingInline: "var(--ds-space-050, 4px)",
-          // background
-          backgroundColor: (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : lozengeAppearanceToBgColorMap[appearanceStyle][appearanceType]
-        }, appearanceStyle === 'subtle' ? fg('visual-refresh_drop_5') ? {
-          outline: borderStyleMap[appearanceStyle][appearanceType],
-          outlineOffset: -1
-        } : {
-          border: borderStyleMap[appearanceStyle][appearanceType]
-        } : {}))
-      };
-      var lozengeTextAttrs = {
-        style: convertToInlineCss(_objectSpread({
-          color: appearanceStyle === 'subtle' ? "var(--ds-text, #172B4D)" : '#292A2E',
-          maxWidth: "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")"),
-          font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-          fontWeight: "var(--ds-font-weight-bold, 700)",
-          fontSize: '11px',
-          // can't use token - underlying DS lozenge is out by 1px which causes layout shift
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-          whiteSpace: 'nowrap'
-        }, fg('platform-lozenge-custom-letterspacing') ? {
-          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-          letterSpacing: '0.165px'
-        } : {}))
-      };
-      if (isComponentVisualRefresh) {
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', lozengeWrapperAttrs, ['span', lozengeTextAttrs, text]]]];
-      } else {
-        var _style$color;
-        // packages/design-system/lozenge/src/Lozenge/index.tsx
-        var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-        var legacyLozengeBoxAttrs = {
-          style: convertToInlineCss({
-            backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%',
-            paddingInline: "var(--ds-space-050, 4px)",
-            display: 'inline-flex',
-            borderRadius: "var(--ds-border-radius, 4px)",
-            blockSize: 'min-content',
-            position: 'static',
-            overflow: 'hidden',
-            boxSizing: 'border-box',
-            appearance: 'none',
-            border: 'none'
-          })
-        };
-        var legacyLozengeTextAttrs = {
-          style: convertToInlineCss({
-            font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-            fontWeight: "var(--ds-font-weight-bold, 700)",
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            textTransform: "var(--ds-UNSAFE-textTransformUppercase, uppercase)",
-            whiteSpace: 'nowrap',
-            color: (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColorsOld[appearanceStyle][appearanceTypeOld],
-            maxWidth: '100%'
-          })
-        };
-        return ['span', editorNodeWrapperAttrs, ['span', statusElementAttrs, ['span', legacyLozengeBoxAttrs, ['span', legacyLozengeTextAttrs, text]]]];
-      }
-    }
-  });
-};
 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 _node$attrs = node.attrs,
+    text = _node$attrs.text,
+    color = _node$attrs.color,
+    style = _node$attrs.style,
+    localId = _node$attrs.localId;
   var editorNodeWrapperAttrs = {
     class: 'statusView-content-wrap inlineNodeView',
     'data-testid': 'statusContainerView',
-    'data-prosemirror-node-view-type': 'vanilla',
     'data-prosemirror-node-name': 'status',
-    'local-id': localId
+    'localid': localId
   };
   var statusElementAttrs = {
     style: convertToInlineCss(isAndroidChromium ? {

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

@@ -1,12 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 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';
@@ -104,19 +101,8 @@ var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
     key: pluginKey,
     props: {
       nodeViews: {
-        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);
+        status: function status(node) {
+          return new StatusNodeViewVanilla(node, pmPluginFactoryParams.getIntl());
         }
       }
     }

package/dist/esm/statusPlugin.js

@@ -1,11 +1,11 @@
 import React from 'react';
+import { status } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT_ID, ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
-import { statusNodeSpec } from './nodeviews/statusNodeSpec';
 import { commitStatusPicker, insertStatus, removeStatus, updateStatusWithAnalytics } from './pm-plugins/actions';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
@@ -20,7 +20,7 @@ export var statusPlugin = function statusPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'status',
-        node: statusNodeSpec()
+        node: status
       }];
     },
     pmPlugins: function pmPlugins() {

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

@@ -1,9 +1,2 @@
 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
- * @example
- */
-export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
 export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;

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

@@ -1,9 +1,2 @@
 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
- * @example
- */
-export declare const statusNodeSpec: () => import("prosemirror-model").NodeSpec;
 export declare const statusToDOM: (node: PMNode) => DOMOutputSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "3.1.25",
+	"version": "3.1.26",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,16 +35,16 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/editor-common": "^107.0.0",
+		"@atlaskit/editor-common": "^107.3.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.0.0",
-		"@atlaskit/tokens": "^5.3.0",
+		"@atlaskit/tmp-editor-statsig": "^8.5.0",
+		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"

package/dist/cjs/nodeviews/status.js

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StatusNodeView = exports.IntlStatusContainerView = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _element = require("@atlaskit/status/element");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styledStatusStyles = (0, _react2.css)({
-  opacity: 1
-});
-var styledStatusPlaceholderStyles = (0, _react2.css)({
-  opacity: 0.5
-});
-var StatusContainerView = function StatusContainerView(props) {
-  var text = props.text,
-    color = props.color,
-    localId = props.localId,
-    style = props.style,
-    formatMessage = props.intl.formatMessage;
-  var statusText = text ? text : formatMessage(_messages.statusMessages.placeholder);
-  var handleClick = function handleClick(event) {
-    if (event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-    // handling of popup is done in plugin.apply on selection change.
-  };
-  return (0, _react2.jsx)("span", {
-    css: text ? styledStatusStyles : styledStatusPlaceholderStyles,
-    "data-testid": "statusContainerView"
-  }, (0, _react2.jsx)(_element.Status, {
-    text: statusText,
-    color: color,
-    localId: localId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    onClick: handleClick,
-    isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh')
-  }));
-};
-var IntlStatusContainerView = exports.IntlStatusContainerView = (0, _reactIntlNext.injectIntl)(StatusContainerView);
-var StatusNodeView = exports.StatusNodeView = function StatusNodeView(props) {
-  var view = props.view;
-  var _props$node$attrs = props.node.attrs,
-    text = _props$node$attrs.text,
-    color = _props$node$attrs.color,
-    localId = _props$node$attrs.localId,
-    style = _props$node$attrs.style;
-  return (0, _react2.jsx)(IntlStatusContainerView, {
-    view: view,
-    text: text,
-    color: color
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    localId: localId
-  });
-};

package/dist/es2019/nodeviews/status.js

@@ -1,70 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-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 { statusMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Status } from '@atlaskit/status/element';
-const styledStatusStyles = css({
-  opacity: 1
-});
-const styledStatusPlaceholderStyles = css({
-  opacity: 0.5
-});
-const StatusContainerView = props => {
-  const {
-    text,
-    color,
-    localId,
-    style,
-    intl: {
-      formatMessage
-    }
-  } = props;
-  const statusText = text ? text : formatMessage(messages.placeholder);
-  const handleClick = event => {
-    if (event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-    // handling of popup is done in plugin.apply on selection change.
-  };
-  return jsx("span", {
-    css: text ? styledStatusStyles : styledStatusPlaceholderStyles,
-    "data-testid": "statusContainerView"
-  }, jsx(Status, {
-    text: statusText,
-    color: color,
-    localId: localId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    onClick: handleClick,
-    isBold: fg('platform-component-visual-refresh')
-  }));
-};
-export const IntlStatusContainerView = injectIntl(StatusContainerView);
-export const StatusNodeView = props => {
-  const {
-    view
-  } = props;
-  const {
-    text,
-    color,
-    localId,
-    style
-  } = props.node.attrs;
-  return jsx(IntlStatusContainerView, {
-    view: view,
-    text: text,
-    color: color
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    localId: localId
-  });
-};

package/dist/esm/nodeviews/status.js

@@ -1,63 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-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 { statusMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Status } from '@atlaskit/status/element';
-var styledStatusStyles = css({
-  opacity: 1
-});
-var styledStatusPlaceholderStyles = css({
-  opacity: 0.5
-});
-var StatusContainerView = function StatusContainerView(props) {
-  var text = props.text,
-    color = props.color,
-    localId = props.localId,
-    style = props.style,
-    formatMessage = props.intl.formatMessage;
-  var statusText = text ? text : formatMessage(messages.placeholder);
-  var handleClick = function handleClick(event) {
-    if (event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
-    // handling of popup is done in plugin.apply on selection change.
-  };
-  return jsx("span", {
-    css: text ? styledStatusStyles : styledStatusPlaceholderStyles,
-    "data-testid": "statusContainerView"
-  }, jsx(Status, {
-    text: statusText,
-    color: color,
-    localId: localId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    onClick: handleClick,
-    isBold: fg('platform-component-visual-refresh')
-  }));
-};
-export var IntlStatusContainerView = injectIntl(StatusContainerView);
-export var StatusNodeView = function StatusNodeView(props) {
-  var view = props.view;
-  var _props$node$attrs = props.node.attrs,
-    text = _props$node$attrs.text,
-    color = _props$node$attrs.color,
-    localId = _props$node$attrs.localId,
-    style = _props$node$attrs.style;
-  return jsx(IntlStatusContainerView, {
-    view: view,
-    text: text,
-    color: color
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
-    localId: localId
-  });
-};

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

@@ -1,28 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { IntlShape } from 'react-intl-next';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Color, StatusStyle } from '@atlaskit/status/element';
-import type { StatusPluginOptions } from '../types';
-export interface ContainerProps {
-    view: EditorView;
-    intl: IntlShape;
-    text?: string;
-    color: Color;
-    style?: StatusStyle;
-    localId?: string;
-    eventDispatcher?: EventDispatcher;
-}
-export declare const IntlStatusContainerView: React.FC<import("react-intl-next").WithIntlProps<ContainerProps>> & {
-    WrappedComponent: React.ComponentType<ContainerProps>;
-};
-export type Props = InlineNodeViewComponentProps & {
-    options: StatusPluginOptions | undefined;
-};
-export declare const StatusNodeView: (props: Props) => jsx.JSX.Element;

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

@@ -1,28 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { jsx } from '@emotion/react';
-import type { IntlShape } from 'react-intl-next';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Color, StatusStyle } from '@atlaskit/status/element';
-import type { StatusPluginOptions } from '../types';
-export interface ContainerProps {
-    view: EditorView;
-    intl: IntlShape;
-    text?: string;
-    color: Color;
-    style?: StatusStyle;
-    localId?: string;
-    eventDispatcher?: EventDispatcher;
-}
-export declare const IntlStatusContainerView: React.FC<import("react-intl-next").WithIntlProps<ContainerProps>> & {
-    WrappedComponent: React.ComponentType<ContainerProps>;
-};
-export type Props = InlineNodeViewComponentProps & {
-    options: StatusPluginOptions | undefined;
-};
-export declare const StatusNodeView: (props: Props) => jsx.JSX.Element;