@atlaskit/editor-plugin-date 4.1.6 → 4.1.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-date
 
+## 4.1.8
+
+### Patch Changes
+
+- [#137676](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137676)
+  [`4a54b4a64712e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4a54b4a64712e) -
+  ED-27338: clean up vanilla date implementation
+- Updated dependencies
+
+## 4.1.7
+
+### Patch Changes
+
+- [#134341](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134341)
+  [`e53990137fb56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e53990137fb56) -
+  ED-27338: converts editor date node to vanilla js
+
 ## 4.1.6
 
 ### Patch Changes

package/dist/cjs/datePlugin.js

@@ -17,7 +17,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dateNodeSpec = require("./nodeviews/dateNodeSpec");
 var _actions = require("./pm-plugins/actions");
 var _commands = require("./pm-plugins/commands");
@@ -113,7 +112,7 @@ function ContentComponent(_ref) {
 }
 var datePlugin = function datePlugin(_ref3) {
   var _ref3$config = _ref3.config,
-    options = _ref3$config === void 0 ? {} : _ref3$config,
+    config = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
   return {
     name: 'date',
@@ -148,9 +147,9 @@ var datePlugin = function datePlugin(_ref3) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'date',
-        plugin: function plugin(options) {
+        plugin: function plugin(pmPluginFactoryParams) {
           DatePicker.preload();
-          return (0, _main.default)(options);
+          return (0, _main.default)(pmPluginFactoryParams);
         }
       }, {
         name: 'dateKeymap',
@@ -173,7 +172,7 @@ var datePlugin = function datePlugin(_ref3) {
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
-        weekStartDay: options.weekStartDay
+        weekStartDay: config.weekStartDay
       });
     },
     pluginsOptions: {
@@ -210,7 +209,7 @@ var datePlugin = function datePlugin(_ref3) {
           var _api$editorViewMode;
           return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         };
-        if (!isViewMode() || !(0, _platformFeatureFlags.fg)('platform_inline_node_as_valid_annotation_selection')) {
+        if (!isViewMode()) {
           return undefined;
         }
         var onClick = function onClick(stateFromClickEvent, dispatch) {

package/dist/cjs/nodeviews/DateNodeView.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateNodeView = 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 _bindEventListener = require("bind-event-listener");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _actions = require("../pm-plugins/actions");
+var _dateNodeSpec = require("./dateNodeSpec");
+var DateNodeView = exports.DateNodeView = /*#__PURE__*/function () {
+  function DateNodeView(node, view, getPos, intl) {
+    (0, _classCallCheck2.default)(this, DateNodeView);
+    (0, _defineProperty2.default)(this, "dom", document.createElement('span'));
+    this.node = node;
+    try {
+      var spec = (0, _dateNodeSpec.dateToDOM)(node, view.state, getPos, intl);
+      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.clickUnBind = (0, _bindEventListener.bind)(this.dom, {
+        type: 'click',
+        listener: function listener(event) {
+          event.stopImmediatePropagation();
+          var state = view.state,
+            dispatch = view.dispatch;
+          (0, _actions.setDatePickerAt)(state.selection.from)(state, dispatch);
+        }
+      });
+    } catch (error) {
+      DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  return (0, _createClass2.default)(DateNodeView, [{
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.timestamp;
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.clickUnBind && this.clickUnBind();
+    }
+  }], [{
+    key: "logError",
+    value: function logError(error) {
+      void (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-date/DateNodeView'
+      });
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/dateNodeSpec.js

@@ -4,18 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.dateNodeSpec = void 0;
+exports.dateToDOMvirtualization = exports.dateToDOM = exports.dateNodeSpec = 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 _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+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; }
 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;
+var intlRef;
 
 /**
  * Wrapper for ADF date node spec to augment toDOM implementation
@@ -24,33 +26,66 @@ var intl;
  * @returns
  */
 var dateNodeSpec = exports.dateNodeSpec = function dateNodeSpec() {
-  if (isSSR || (0, _experiments.editorExperiment)('platform_editor_inline_node_virtualization', 'off')) {
+  if (!(0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) && (isSSR || (0, _experiments.editorExperiment)('platform_editor_inline_node_virtualization', 'off'))) {
     return _adfSchema.date;
   }
   return _objectSpread(_objectSpread({}, _adfSchema.date), {}, {
-    toDOM: function toDOM(node) {
-      intl = intl || (0, _reactIntlNext.createIntl)({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      var timestamp = node.attrs.timestamp;
-      var displayString = (0, _utils.timestampToString)(timestamp, intl);
-      var wrapperAttrs = {
-        class: 'date-lozenger-container',
-        'data-node-type': 'date',
-        'data-timestamp': timestamp,
-        'aria-busy': 'true'
-      };
-      var attrs = {
-        style: (0, _lazyNodeView.convertToInlineCss)({
-          // Taken from @atlaskit/date Component
-          backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
-          color: "var(--ds-text, ".concat(_colors.N800, ")"),
-          borderRadius: "var(--ds-border-radius-100, 4px)",
-          padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
-          margin: '0 1px'
-        })
-      };
-      return ['span', wrapperAttrs, ['span', attrs, displayString]];
-    }
+    toDOM: dateToDOMvirtualization
   });
+};
+var dateToDOMvirtualization = exports.dateToDOMvirtualization = function dateToDOMvirtualization(node) {
+  intlRef = intlRef || (0, _reactIntlNext.createIntl)({
+    locale: document.documentElement.lang || 'en-US'
+  });
+  var timestamp = node.attrs.timestamp;
+  var displayString = (0, _utils.timestampToString)(timestamp, intlRef);
+  var wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp,
+    'aria-busy': 'true'
+  };
+  var attrs = {
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      // Taken from @atlaskit/date Component
+      backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")"),
+      color: "var(--ds-text, ".concat(_colors.N800, ")"),
+      borderRadius: "var(--ds-border-radius-100, 4px)",
+      padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+      margin: '0 1px'
+    })
+  };
+  return ['span', wrapperAttrs, ['span', attrs, displayString]];
+};
+var dateToDOM = exports.dateToDOM = function dateToDOM(node, state, getPos, intl) {
+  var timestamp = node.attrs.timestamp;
+  var pos = getPos === null || getPos === void 0 ? void 0 : getPos();
+  var _getDateInformation = (0, _utils2.getDateInformation)(timestamp, intl, state, pos),
+    displayString = _getDateInformation.displayString,
+    color = _getDateInformation.color;
+  var nodeWrapperAttrs = {
+    contenteditable: 'false',
+    timestamp: timestamp,
+    class: 'dateView-content-wrap inlineNodeView',
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-name': 'date',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-view-type': 'vanilla',
+    draggable: 'true'
+  };
+  var wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp
+  };
+  var attrs = color === undefined ? {} : {
+    class: "date-node-color-".concat(color)
+  };
+  return ['span', nodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]], ['span', wrapperAttrs, ['span', attrs, displayString]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]];
 };

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

@@ -7,7 +7,9 @@ exports.getPluginState = exports.default = void 0;
 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _date = require("../nodeviews/date");
+var _DateNodeView = require("../nodeviews/DateNodeView");
 var _pluginKey = require("./plugin-key");
 var _utils2 = require("./utils");
 var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _utils2.reducer, {
@@ -17,6 +19,7 @@ var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _utils2.red
   createPluginState = _pluginFactory.createPluginState,
   getPluginState = exports.getPluginState = _pluginFactory.getPluginState;
 var createPlugin = function createPlugin(pmPluginFactoryParams) {
+  var dispatch = pmPluginFactoryParams.dispatch;
   var newPluginState = {
     showDatePickerAt: null,
     isNew: false,
@@ -24,14 +27,21 @@ var createPlugin = function createPlugin(pmPluginFactoryParams) {
     focusDateInput: false
   };
   return new _safePlugin.SafePlugin({
-    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
+    state: createPluginState(dispatch, newPluginState),
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        date: (0, _reactNodeView.getInlineNodeViewProducer)({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: _date.DateNodeView
-        })
+        date: function date(node, view, getPos, decorations) {
+          if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new _DateNodeView.DateNodeView(node, view, getPos, pmPluginFactoryParams.getIntl());
+          }
+          return (0, _reactNodeView.getInlineNodeViewProducer)({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: _date.DateNodeView
+          })(node, view, getPos, decorations);
+        }
       }
     }
   });

package/dist/es2019/datePlugin.js

@@ -9,7 +9,6 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { dateNodeSpec } from './nodeviews/dateNodeSpec';
 import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
 import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
@@ -101,7 +100,7 @@ function ContentComponent({
   });
 }
 const datePlugin = ({
-  config: options = {},
+  config = {},
   api
 }) => ({
   name: 'date',
@@ -137,9 +136,9 @@ const datePlugin = ({
   pmPlugins() {
     return [{
       name: 'date',
-      plugin: options => {
+      plugin: pmPluginFactoryParams => {
         DatePicker.preload();
-        return createDatePlugin(options);
+        return createDatePlugin(pmPluginFactoryParams);
       }
     }, {
       name: 'dateKeymap',
@@ -163,7 +162,7 @@ const datePlugin = ({
       popupsMountPoint: popupsMountPoint,
       popupsBoundariesElement: popupsBoundariesElement,
       popupsScrollableElement: popupsScrollableElement,
-      weekStartDay: options.weekStartDay
+      weekStartDay: config.weekStartDay
     });
   },
   pluginsOptions: {
@@ -197,7 +196,7 @@ const datePlugin = ({
         var _api$editorViewMode, _api$editorViewMode$s;
         return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
       };
-      if (!isViewMode() || !fg('platform_inline_node_as_valid_annotation_selection')) {
+      if (!isViewMode()) {
         return undefined;
       }
       const onClick = (stateFromClickEvent, dispatch) => {

package/dist/es2019/nodeviews/DateNodeView.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { setDatePickerAt } from '../pm-plugins/actions';
+import { dateToDOM } from './dateNodeSpec';
+export class DateNodeView {
+  static logError(error) {
+    void logException(error, {
+      location: 'editor-plugin-date/DateNodeView'
+    });
+  }
+  constructor(node, view, getPos, intl) {
+    _defineProperty(this, "dom", document.createElement('span'));
+    this.node = node;
+    try {
+      const spec = dateToDOM(node, view.state, getPos, intl);
+      const {
+        dom
+      } = DOMSerializer.renderSpec(document, spec);
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+      this.clickUnBind = bind(this.dom, {
+        type: 'click',
+        listener: event => {
+          event.stopImmediatePropagation();
+          const {
+            state,
+            dispatch
+          } = view;
+          setDatePickerAt(state.selection.from)(state, dispatch);
+        }
+      });
+    } catch (error) {
+      DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  renderFallback() {
+    const fallbackElement = document.createElement('span');
+    fallbackElement.innerText = this.node.attrs.timestamp;
+    this.dom.appendChild(fallbackElement);
+  }
+  destroy() {
+    this.clickUnBind && this.clickUnBind();
+  }
+}

package/dist/es2019/nodeviews/dateNodeSpec.js

@@ -2,10 +2,12 @@ import { createIntl } from 'react-intl-next';
 import { date } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { timestampToString } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { N30A, N800 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getDateInformation } from './utils';
 const isSSR = Boolean(process.env.REACT_SSR);
-let intl;
+let intlRef;
 
 /**
  * Wrapper for ADF date node spec to augment toDOM implementation
@@ -14,34 +16,68 @@ let intl;
  * @returns
  */
 export const dateNodeSpec = () => {
-  if (isSSR || editorExperiment('platform_editor_inline_node_virtualization', 'off')) {
+  if (!editorExperiment('platform_editor_vanilla_dom', true) && (isSSR || editorExperiment('platform_editor_inline_node_virtualization', 'off'))) {
     return date;
   }
   return {
     ...date,
-    toDOM: node => {
-      intl = intl || createIntl({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      const timestamp = node.attrs.timestamp;
-      const displayString = timestampToString(timestamp, intl);
-      const wrapperAttrs = {
-        class: 'date-lozenger-container',
-        'data-node-type': 'date',
-        'data-timestamp': timestamp,
-        'aria-busy': 'true'
-      };
-      const attrs = {
-        style: convertToInlineCss({
-          // Taken from @atlaskit/date Component
-          backgroundColor: `var(--ds-background-neutral, ${N30A})`,
-          color: `var(--ds-text, ${N800})`,
-          borderRadius: "var(--ds-border-radius-100, 4px)",
-          padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
-          margin: '0 1px'
-        })
-      };
-      return ['span', wrapperAttrs, ['span', attrs, displayString]];
-    }
+    toDOM: dateToDOMvirtualization
   };
+};
+export const dateToDOMvirtualization = node => {
+  intlRef = intlRef || createIntl({
+    locale: document.documentElement.lang || 'en-US'
+  });
+  const timestamp = node.attrs.timestamp;
+  const displayString = timestampToString(timestamp, intlRef);
+  const wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp,
+    'aria-busy': 'true'
+  };
+  const attrs = {
+    style: convertToInlineCss({
+      // Taken from @atlaskit/date Component
+      backgroundColor: `var(--ds-background-neutral, ${N30A})`,
+      color: `var(--ds-text, ${N800})`,
+      borderRadius: "var(--ds-border-radius-100, 4px)",
+      padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
+      margin: '0 1px'
+    })
+  };
+  return ['span', wrapperAttrs, ['span', attrs, displayString]];
+};
+export const dateToDOM = (node, state, getPos, intl) => {
+  const timestamp = node.attrs.timestamp;
+  const pos = getPos === null || getPos === void 0 ? void 0 : getPos();
+  const {
+    displayString,
+    color
+  } = getDateInformation(timestamp, intl, state, pos);
+  const nodeWrapperAttrs = {
+    contenteditable: 'false',
+    timestamp: timestamp,
+    class: 'dateView-content-wrap inlineNodeView',
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-name': 'date',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-view-type': 'vanilla',
+    draggable: 'true'
+  };
+  const wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp
+  };
+  const attrs = color === undefined ? {} : {
+    class: `date-node-color-${color}`
+  };
+  return ['span', nodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', wrapperAttrs, ['span', attrs, displayString]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
 };

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

@@ -1,7 +1,9 @@
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DateNodeView } from '../nodeviews/date';
+import { DateNodeView as DateNodeViewVanilla } from '../nodeviews/DateNodeView';
 import { pluginKey } from './plugin-key';
 import { mapping, onSelectionChanged, reducer } from './utils';
 const {
@@ -12,6 +14,9 @@ const {
   onSelectionChanged
 });
 const createPlugin = pmPluginFactoryParams => {
+  const {
+    dispatch
+  } = pmPluginFactoryParams;
   const newPluginState = {
     showDatePickerAt: null,
     isNew: false,
@@ -19,14 +24,21 @@ const createPlugin = pmPluginFactoryParams => {
     focusDateInput: false
   };
   return new SafePlugin({
-    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
+    state: createPluginState(dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: getInlineNodeViewProducer({
-          pmPluginFactoryParams,
-          Component: DateNodeView
-        })
+        date: (node, view, getPos, decorations) => {
+          if (editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl());
+          }
+          return getInlineNodeViewProducer({
+            pmPluginFactoryParams,
+            Component: DateNodeView
+          })(node, view, getPos, decorations);
+        }
       }
     }
   });

package/dist/esm/datePlugin.js

@@ -9,7 +9,6 @@ import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import CommentIcon from '@atlaskit/icon/core/comment';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { dateNodeSpec } from './nodeviews/dateNodeSpec';
 import { closeDatePicker as _closeDatePicker, closeDatePickerWithAnalytics as _closeDatePickerWithAnalytics, createDate } from './pm-plugins/actions';
 import { deleteDateCommand, insertDateCommand } from './pm-plugins/commands';
@@ -101,7 +100,7 @@ function ContentComponent(_ref) {
 }
 var datePlugin = function datePlugin(_ref3) {
   var _ref3$config = _ref3.config,
-    options = _ref3$config === void 0 ? {} : _ref3$config,
+    config = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
   return {
     name: 'date',
@@ -136,9 +135,9 @@ var datePlugin = function datePlugin(_ref3) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'date',
-        plugin: function plugin(options) {
+        plugin: function plugin(pmPluginFactoryParams) {
           DatePicker.preload();
-          return createDatePlugin(options);
+          return createDatePlugin(pmPluginFactoryParams);
         }
       }, {
         name: 'dateKeymap',
@@ -161,7 +160,7 @@ var datePlugin = function datePlugin(_ref3) {
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
-        weekStartDay: options.weekStartDay
+        weekStartDay: config.weekStartDay
       });
     },
     pluginsOptions: {
@@ -198,7 +197,7 @@ var datePlugin = function datePlugin(_ref3) {
           var _api$editorViewMode;
           return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         };
-        if (!isViewMode() || !fg('platform_inline_node_as_valid_annotation_selection')) {
+        if (!isViewMode()) {
           return undefined;
         }
         var onClick = function onClick(stateFromClickEvent, dispatch) {

package/dist/esm/nodeviews/DateNodeView.js

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { setDatePickerAt } from '../pm-plugins/actions';
+import { dateToDOM } from './dateNodeSpec';
+export var DateNodeView = /*#__PURE__*/function () {
+  function DateNodeView(node, view, getPos, intl) {
+    _classCallCheck(this, DateNodeView);
+    _defineProperty(this, "dom", document.createElement('span'));
+    this.node = node;
+    try {
+      var spec = dateToDOM(node, view.state, getPos, intl);
+      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.clickUnBind = bind(this.dom, {
+        type: 'click',
+        listener: function listener(event) {
+          event.stopImmediatePropagation();
+          var state = view.state,
+            dispatch = view.dispatch;
+          setDatePickerAt(state.selection.from)(state, dispatch);
+        }
+      });
+    } catch (error) {
+      DateNodeView.logError(error instanceof Error ? error : new Error('Unknown error on DateNodeView constructor'));
+      this.renderFallback();
+    }
+  }
+  return _createClass(DateNodeView, [{
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.timestamp;
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.clickUnBind && this.clickUnBind();
+    }
+  }], [{
+    key: "logError",
+    value: function logError(error) {
+      void logException(error, {
+        location: 'editor-plugin-date/DateNodeView'
+      });
+    }
+  }]);
+}();

package/dist/esm/nodeviews/dateNodeSpec.js

@@ -5,10 +5,12 @@ import { createIntl } from 'react-intl-next';
 import { date } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { timestampToString } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { N30A, N800 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { getDateInformation } from './utils';
 var isSSR = Boolean(process.env.REACT_SSR);
-var intl;
+var intlRef;
 
 /**
  * Wrapper for ADF date node spec to augment toDOM implementation
@@ -17,33 +19,66 @@ var intl;
  * @returns
  */
 export var dateNodeSpec = function dateNodeSpec() {
-  if (isSSR || editorExperiment('platform_editor_inline_node_virtualization', 'off')) {
+  if (!editorExperiment('platform_editor_vanilla_dom', true) && (isSSR || editorExperiment('platform_editor_inline_node_virtualization', 'off'))) {
     return date;
   }
   return _objectSpread(_objectSpread({}, date), {}, {
-    toDOM: function toDOM(node) {
-      intl = intl || createIntl({
-        locale: document.documentElement.lang || 'en-US'
-      });
-      var timestamp = node.attrs.timestamp;
-      var displayString = timestampToString(timestamp, intl);
-      var wrapperAttrs = {
-        class: 'date-lozenger-container',
-        'data-node-type': 'date',
-        'data-timestamp': timestamp,
-        'aria-busy': 'true'
-      };
-      var attrs = {
-        style: convertToInlineCss({
-          // Taken from @atlaskit/date Component
-          backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
-          color: "var(--ds-text, ".concat(N800, ")"),
-          borderRadius: "var(--ds-border-radius-100, 4px)",
-          padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
-          margin: '0 1px'
-        })
-      };
-      return ['span', wrapperAttrs, ['span', attrs, displayString]];
-    }
+    toDOM: dateToDOMvirtualization
   });
+};
+export var dateToDOMvirtualization = function dateToDOMvirtualization(node) {
+  intlRef = intlRef || createIntl({
+    locale: document.documentElement.lang || 'en-US'
+  });
+  var timestamp = node.attrs.timestamp;
+  var displayString = timestampToString(timestamp, intlRef);
+  var wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp,
+    'aria-busy': 'true'
+  };
+  var attrs = {
+    style: convertToInlineCss({
+      // Taken from @atlaskit/date Component
+      backgroundColor: "var(--ds-background-neutral, ".concat(N30A, ")"),
+      color: "var(--ds-text, ".concat(N800, ")"),
+      borderRadius: "var(--ds-border-radius-100, 4px)",
+      padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"),
+      margin: '0 1px'
+    })
+  };
+  return ['span', wrapperAttrs, ['span', attrs, displayString]];
+};
+export var dateToDOM = function dateToDOM(node, state, getPos, intl) {
+  var timestamp = node.attrs.timestamp;
+  var pos = getPos === null || getPos === void 0 ? void 0 : getPos();
+  var _getDateInformation = getDateInformation(timestamp, intl, state, pos),
+    displayString = _getDateInformation.displayString,
+    color = _getDateInformation.color;
+  var nodeWrapperAttrs = {
+    contenteditable: 'false',
+    timestamp: timestamp,
+    class: 'dateView-content-wrap inlineNodeView',
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-name': 'date',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-view-type': 'vanilla',
+    draggable: 'true'
+  };
+  var wrapperAttrs = {
+    class: 'date-lozenger-container',
+    'data-node-type': 'date',
+    'data-timestamp': timestamp
+  };
+  var attrs = color === undefined ? {} : {
+    class: "date-node-color-".concat(color)
+  };
+  return ['span', nodeWrapperAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]], ['span', wrapperAttrs, ['span', attrs, displayString]], ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, ZERO_WIDTH_SPACE]];
 };

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

@@ -1,7 +1,9 @@
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DateNodeView } from '../nodeviews/date';
+import { DateNodeView as DateNodeViewVanilla } from '../nodeviews/DateNodeView';
 import { pluginKey } from './plugin-key';
 import { mapping, onSelectionChanged, reducer } from './utils';
 var _pluginFactory = pluginFactory(pluginKey, reducer, {
@@ -11,6 +13,7 @@ var _pluginFactory = pluginFactory(pluginKey, reducer, {
   createPluginState = _pluginFactory.createPluginState,
   getPluginState = _pluginFactory.getPluginState;
 var createPlugin = function createPlugin(pmPluginFactoryParams) {
+  var dispatch = pmPluginFactoryParams.dispatch;
   var newPluginState = {
     showDatePickerAt: null,
     isNew: false,
@@ -18,14 +21,21 @@ var createPlugin = function createPlugin(pmPluginFactoryParams) {
     focusDateInput: false
   };
   return new SafePlugin({
-    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
+    state: createPluginState(dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: getInlineNodeViewProducer({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: DateNodeView
-        })
+        date: function date(node, view, getPos, decorations) {
+          if (editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new DateNodeViewVanilla(node, view, getPos, pmPluginFactoryParams.getIntl());
+          }
+          return getInlineNodeViewProducer({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: DateNodeView
+          })(node, view, getPos, decorations);
+        }
       }
     }
   });

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

@@ -0,0 +1,14 @@
+import { IntlShape } from 'react-intl-next';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class DateNodeView implements NodeView {
+    private readonly node;
+    private clickUnBind;
+    readonly dom: HTMLElement;
+    private static logError;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, intl: IntlShape);
+    private renderFallback;
+    destroy(): void;
+}

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

@@ -1,8 +1,23 @@
-import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import type { IntlShape } from 'react-intl-next';
+import { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 /**
  * Wrapper for ADF date node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
  * @nodeSpecException:toDOM patch
  * @returns
  */
-export declare const dateNodeSpec: () => NodeSpec;
+export declare const dateNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare const dateToDOMvirtualization: (node: PMNode) => DOMOutputSpec;
+export declare const dateToDOM: (node: PMNode, state: EditorState, getPos: getPosHandlerNode, intl: IntlShape) => [string, Record<string, string>, (string | {
+    class: string;
+} | (string | {
+    class: string;
+})[])[], (string | Record<string, string> | (string | {
+    class?: undefined;
+} | {
+    class: string;
+})[])[], (string | {
+    class: string;
+})[]];

package/dist/types/pm-plugins/actions.d.ts

@@ -32,6 +32,7 @@ export declare const closeDatePickerWithAnalytics: ({ date, pluginInjectionApi,
                 stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
                 setInlineCommentDraftState: (drafting: boolean, inputMethod: import("@atlaskit/editor-plugin-annotation").InlineCommentInputMethod, targetType?: import("@atlaskit/editor-plugin-annotation").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => Command;
                 showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => Command;
+                hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
             };
         }, import("@atlaskit/editor-plugin-annotation").AnnotationProviders | undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorViewMode", {
             sharedState: import("@atlaskit/editor-plugin-editor-viewmode").EditorViewModePluginState | null;

package/dist/types/pm-plugins/main.d.ts

@@ -1,6 +1,7 @@
-import type { PMPluginFactory } from '@atlaskit/editor-common/types';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { DatePluginState } from './types';
 declare const getPluginState: (state: import("prosemirror-state").EditorState) => DatePluginState;
-declare const createPlugin: PMPluginFactory;
+declare const createPlugin: (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<DatePluginState>;
 export { getPluginState };
 export default createPlugin;

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

@@ -0,0 +1,14 @@
+import { IntlShape } from 'react-intl-next';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class DateNodeView implements NodeView {
+    private readonly node;
+    private clickUnBind;
+    readonly dom: HTMLElement;
+    private static logError;
+    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, intl: IntlShape);
+    private renderFallback;
+    destroy(): void;
+}

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

@@ -1,8 +1,29 @@
-import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import type { IntlShape } from 'react-intl-next';
+import { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 /**
  * Wrapper for ADF date node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
  * @nodeSpecException:toDOM patch
  * @returns
  */
-export declare const dateNodeSpec: () => NodeSpec;
+export declare const dateNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare const dateToDOMvirtualization: (node: PMNode) => DOMOutputSpec;
+export declare const dateToDOM: (node: PMNode, state: EditorState, getPos: getPosHandlerNode, intl: IntlShape) => [
+    string,
+    Record<string, string>,
+    (string | {
+        class: string;
+    } | (string | {
+        class: string;
+    })[])[],
+    (string | Record<string, string> | (string | {
+        class?: undefined;
+    } | {
+        class: string;
+    })[])[],
+    (string | {
+        class: string;
+    })[]
+];

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -37,6 +37,7 @@ export declare const closeDatePickerWithAnalytics: ({ date, pluginInjectionApi,
                     stripNonExistingAnnotations: (slice: import("prosemirror-model").Slice, state: EditorState) => boolean | undefined;
                     setInlineCommentDraftState: (drafting: boolean, inputMethod: import("@atlaskit/editor-plugin-annotation").InlineCommentInputMethod, targetType?: import("@atlaskit/editor-plugin-annotation").TargetType | undefined, targetNodeId?: string | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => Command;
                     showCommentForBlockNode: (node: import("prosemirror-model").Node | null, viewMethod?: import("@atlaskit/editor-common/analytics").VIEW_METHOD | undefined, isOpeningMediaCommentFromToolbar?: boolean | undefined) => Command;
+                    hasAnyUnResolvedAnnotationInPage: (state: EditorState) => boolean;
                 };
             }, import("@atlaskit/editor-plugin-annotation").AnnotationProviders | undefined>>,
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"editorViewMode", {

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,6 +1,7 @@
-import type { PMPluginFactory } from '@atlaskit/editor-common/types';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { DatePluginState } from './types';
 declare const getPluginState: (state: import("prosemirror-state").EditorState) => DatePluginState;
-declare const createPlugin: PMPluginFactory;
+declare const createPlugin: (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<DatePluginState>;
 export { getPluginState };
 export default createPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-date",
-	"version": "4.1.6",
+	"version": "4.1.8",
 	"description": "Date plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,22 +37,23 @@
 		"@atlaskit/calendar": "^17.1.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/date": "^2.0.0",
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.19.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
-		"@atlaskit/editor-plugin-annotation": "^2.1.0",
+		"@atlaskit/editor-plugin-annotation": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/locale": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0",
 		"date-fns": "^2.17.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"react-loadable": "^5.1.0"
@@ -63,11 +64,11 @@
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
-		"@atlaskit/editor-plugin-quick-insert": "^2.1.0",
+		"@atlaskit/editor-plugin-quick-insert": "^2.2.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-table": "^10.4.0",
+		"@atlaskit/editor-plugin-table": "^10.6.0",
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^5.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@testing-library/react": "^13.4.0"
 	},
@@ -113,9 +114,6 @@
 	"platform-feature-flags": {
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
-		},
-		"platform_inline_node_as_valid_annotation_selection": {
-			"type": "boolean"
 		}
 	}
 }