@atlaskit/editor-plugin-date 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-date
 
+## 0.2.0
+
+### Minor Changes
+
+- [#41651](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41651) [`68871f23ed3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/68871f23ed3) - Extract Date Plugin
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/actions.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setDatePickerAt = exports.openDatePicker = exports.focusDateInput = exports.createDate = exports.closeDatePickerWithAnalytics = exports.closeDatePicker = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _internal = require("./utils/internal");
+var createDate = exports.createDate = function createDate(isQuickInsertAction) {
+  return function (insert, state) {
+    var dateNode = state.schema.nodes.date.createChecked({
+      timestamp: (0, _utils.todayTimestampInUTC)()
+    });
+    var space = state.schema.text(' ');
+    var tr = insert(_model.Fragment.from([dateNode, space]), {
+      selectInlineNode: true
+    });
+    var newPluginState = {
+      isQuickInsertAction: isQuickInsertAction,
+      showDatePickerAt: tr.selection.from,
+      isNew: true,
+      isDateEmpty: false,
+      focusDateInput: false
+    };
+    return tr.setMeta(_pluginKey.pluginKey, newPluginState);
+  };
+};
+
+/** Focus input */
+var focusDateInput = exports.focusDateInput = function focusDateInput() {
+  return function (state, dispatch) {
+    var pluginState = _pluginKey.pluginKey.getState(state);
+    if (!pluginState || pluginState.showDatePickerAt === null) {
+      return false;
+    }
+    if (!dispatch) {
+      return false;
+    }
+    var tr = state.tr.setMeta(_pluginKey.pluginKey, {
+      focusDateInput: true
+    });
+    dispatch(tr);
+    return true;
+  };
+};
+var setDatePickerAt = exports.setDatePickerAt = function setDatePickerAt(showDatePickerAt) {
+  return function (state, dispatch) {
+    dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
+      showDatePickerAt: showDatePickerAt
+    }));
+    return true;
+  };
+};
+var closeDatePicker = exports.closeDatePicker = function closeDatePicker() {
+  return function (state, dispatch) {
+    var _ref = _pluginKey.pluginKey.getState(state) || {},
+      showDatePickerAt = _ref.showDatePickerAt;
+    if (!dispatch) {
+      return false;
+    }
+    var tr = showDatePickerAt ? state.tr.setMeta(_pluginKey.pluginKey, {
+      showDatePickerAt: null,
+      isNew: false
+    }).setSelection(_state.Selection.near(state.tr.doc.resolve(showDatePickerAt + 2))) : state.tr.setMeta(_pluginKey.pluginKey, {
+      isNew: false
+    });
+    dispatch(tr);
+    return false;
+  };
+};
+var closeDatePickerWithAnalytics = exports.closeDatePickerWithAnalytics = function closeDatePickerWithAnalytics(_ref2) {
+  var _pluginInjectionApi$a;
+  var date = _ref2.date,
+    pluginInjectionApi = _ref2.pluginInjectionApi;
+  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    action: _analytics.ACTION.COMMITTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DATE,
+    attributes: {
+      commitMethod: _analytics.INPUT_METHOD.BLUR,
+      isValid: date !== undefined,
+      isToday: (0, _internal.isToday)(date)
+    }
+  });
+  return closeDatePicker();
+};
+var openDatePicker = exports.openDatePicker = function openDatePicker() {
+  return function (state, dispatch) {
+    var $from = state.selection.$from;
+    var node = state.doc.nodeAt($from.pos);
+    if (node && node.type.name === state.schema.nodes.date.name) {
+      var showDatePickerAt = $from.pos;
+      if (dispatch) {
+        dispatch(state.tr.setMeta(_pluginKey.pluginKey, {
+          showDatePickerAt: showDatePickerAt
+        }).setSelection(_state.NodeSelection.create(state.doc, showDatePickerAt)));
+      }
+    }
+    return false;
+  };
+};

package/dist/cjs/commands.js

@@ -2,4 +2,117 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.insertDateCommand = exports.deleteDateCommand = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var _internal = require("./utils/internal");
+/** Delete the date and close the datepicker */
+var deleteDateCommand = exports.deleteDateCommand = function deleteDateCommand(pluginInjectionApi) {
+  return function (_ref) {
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+    var tr = _ref.tr;
+    var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.date) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState()) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+      showDatePickerAt = _ref2.showDatePickerAt;
+    if (!showDatePickerAt) {
+      return tr;
+    }
+    tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(_pluginKey.pluginKey, {
+      showDatePickerAt: null,
+      isNew: false
+    });
+    return tr;
+  };
+};
+var insertDateCommand = exports.insertDateCommand = function insertDateCommand(pluginInjectionApi) {
+  return function (_ref3) {
+    var date = _ref3.date,
+      inputMethod = _ref3.inputMethod,
+      commitMethod = _ref3.commitMethod,
+      _ref3$enterPressed = _ref3.enterPressed,
+      enterPressed = _ref3$enterPressed === void 0 ? true : _ref3$enterPressed;
+    return function (_ref4) {
+      var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+      var tr = _ref4.tr;
+      var schema = tr.doc.type.schema;
+      var timestamp;
+      if (date) {
+        timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
+      } else {
+        timestamp = (0, _utils.todayTimestampInUTC)();
+      }
+      if (inputMethod) {
+        var _pluginInjectionApi$a;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
+          action: _analytics.ACTION.INSERTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: inputMethod
+          }
+        })(tr);
+      }
+      if (commitMethod) {
+        var _pluginInjectionApi$a2;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a2.actions) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.attachAnalyticsEvent({
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics.ACTION.COMMITTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DATE,
+          attributes: {
+            commitMethod: commitMethod,
+            isValid: date !== undefined,
+            isToday: (0, _internal.isToday)(date)
+          }
+        })(tr);
+      }
+      var _ref5 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.date) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.sharedState.currentState()) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
+        showDatePickerAt = _ref5.showDatePickerAt;
+      if (!showDatePickerAt) {
+        var dateNode = schema.nodes.date.createChecked({
+          timestamp: timestamp
+        });
+        var textNode = schema.text(' ');
+        var fragment = _model.Fragment.fromArray([dateNode, textNode]);
+        var _tr$selection = tr.selection,
+          from = _tr$selection.from,
+          to = _tr$selection.to;
+        var insertable = (0, _utils2.canInsert)(tr.selection.$from, fragment);
+        if (!insertable) {
+          var parentSelection = _state.NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+          tr.insert(parentSelection.to, fragment).setSelection(_state.NodeSelection.create(tr.doc, parentSelection.to + 1));
+        } else {
+          tr.replaceWith(from, to, fragment).setSelection(_state.NodeSelection.create(tr.doc, from));
+        }
+        if (tr.docChanged) {
+          tr.scrollIntoView().setMeta(_pluginKey.pluginKey, {
+            isNew: true
+          });
+        }
+        return tr;
+      }
+      if (tr.doc.nodeAt(showDatePickerAt)) {
+        if (enterPressed) {
+          // Setting selection to outside the date node causes showDatePickerAt
+          // to be set to null by the PM plugin (onSelectionChanged), which will
+          // immediately close the datepicker once a valid date is typed in.
+          // Adding this check forces it to stay open until the user presses Enter.
+          tr = tr.setSelection(_state.Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
+        }
+        tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
+          timestamp: timestamp
+        }).setMeta(_pluginKey.pluginKey, {
+          isNew: false
+        }).scrollIntoView();
+        if (!enterPressed) {
+          tr = tr.setSelection(_state.NodeSelection.create(tr.doc, showDatePickerAt));
+        }
+      }
+      return tr;
+    };
+  };
+};

package/dist/cjs/index.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "datePlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/nodeviews/date.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateNodeView = DateNodeView;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _date = require("@atlaskit/date");
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _actions = require("../actions");
+function DateNodeView(props) {
+  var timestamp = props.node.attrs.timestamp,
+    _props$view$state = props.view.state,
+    doc = _props$view$state.doc,
+    schema = _props$view$state.schema,
+    selection = _props$view$state.selection,
+    getPos = props.getPos;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var pos = typeof getPos === 'function' ? getPos() : undefined;
+
+  // We fall back to selection.$from even though it does not cover all use cases
+  // eg. upon Editor init, selection is at the start, not at the Date node
+  var $nodePos = typeof pos === 'number' ? doc.resolve(pos) : selection.$from;
+  var parent = $nodePos.parent;
+  var withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
+  var color = withinIncompleteTask && (0, _utils.isPastDate)(timestamp) ? 'red' : undefined;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: _styles.DateSharedCssClassName.DATE_WRAPPER,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_date.Date, {
+    color: color,
+    value: timestamp
+  }, withinIncompleteTask ? (0, _utils.timestampToTaskContext)(timestamp, intl) : (0, _utils.timestampToString)(timestamp, intl)));
+  function handleClick(event) {
+    event.nativeEvent.stopImmediatePropagation();
+    var _props$view = props.view,
+      state = _props$view.state,
+      dispatch = _props$view.dispatch;
+    (0, _actions.setDatePickerAt)(state.selection.from)(state, dispatch);
+  }
+}

package/dist/cjs/plugin.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _actions = require("./actions");
+var _commands = require("./commands");
+var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
+var _main = _interopRequireDefault(require("./pm-plugins/main"));
+var _pluginKey = require("./pm-plugins/plugin-key");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DatePicker = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+function ContentComponent(_ref) {
+  var editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    dependencyApi = _ref.dependencyApi,
+    weekStartDay = _ref.weekStartDay;
+  var dispatch = editorView.dispatch;
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(dependencyApi, ['date', 'editorDisabled']),
+    editorDisabledState = _useSharedPluginState.editorDisabledState,
+    dateState = _useSharedPluginState.dateState;
+  if (!(dateState !== null && dateState !== void 0 && dateState.showDatePickerAt) || editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) {
+    return null;
+  }
+  var showDatePickerAt = dateState.showDatePickerAt,
+    isNew = dateState.isNew,
+    focusDateInput = dateState.focusDateInput;
+  var element = (0, _utils.findDomRefAtPos)(showDatePickerAt, domAtPos);
+  return /*#__PURE__*/_react.default.createElement(DatePicker, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    key: showDatePickerAt,
+    element: element,
+    isNew: isNew,
+    autoFocus: focusDateInput,
+    onDelete: function onDelete() {
+      dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute((0, _commands.deleteDateCommand)(dependencyApi));
+      editorView.focus();
+    },
+    onSelect: function onSelect(date, commitMethod) {
+      // Undefined means couldn't parse date, null means invalid (out of bounds) date
+      if (date === undefined || date === null) {
+        return;
+      }
+      dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute((0, _commands.insertDateCommand)(dependencyApi)({
+        date: date,
+        commitMethod: commitMethod
+      }));
+      editorView.focus();
+    },
+    onTextChanged: function onTextChanged(date) {
+      dependencyApi === null || dependencyApi === void 0 || dependencyApi.core.actions.execute((0, _commands.insertDateCommand)(dependencyApi)({
+        date: date,
+        enterPressed: false
+      }));
+    },
+    closeDatePicker: function closeDatePicker() {
+      (0, _actions.closeDatePicker)()(editorView.state, dispatch);
+      editorView.focus();
+    },
+    closeDatePickerWithAnalytics: function closeDatePickerWithAnalytics(_ref2) {
+      var date = _ref2.date;
+      (0, _actions.closeDatePickerWithAnalytics)({
+        date: date
+      })(editorView.state, dispatch);
+      editorView.focus();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    weekStartDay: weekStartDay
+  });
+}
+var datePlugin = function datePlugin(_ref3) {
+  var _ref3$config = _ref3.config,
+    options = _ref3$config === void 0 ? {} : _ref3$config,
+    api = _ref3.api;
+  return {
+    name: 'date',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          showDatePickerAt: null,
+          isNew: false,
+          focusDateInput: false
+        };
+      }
+      var _ref4 = _pluginKey.pluginKey.getState(editorState) || {},
+        showDatePickerAt = _ref4.showDatePickerAt,
+        isNew = _ref4.isNew,
+        focusDateInput = _ref4.focusDateInput;
+      return {
+        showDatePickerAt: showDatePickerAt,
+        isNew: !!isNew,
+        focusDateInput: !!focusDateInput
+      };
+    },
+    commands: {
+      insertDate: (0, _commands.insertDateCommand)(api),
+      deleteDate: (0, _commands.deleteDateCommand)(api)
+    },
+    nodes: function nodes() {
+      return [{
+        name: 'date',
+        node: _adfSchema.date
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'date',
+        plugin: function plugin(options) {
+          DatePicker.preload();
+          return (0, _main.default)(options);
+        }
+      }, {
+        name: 'dateKeymap',
+        plugin: function plugin() {
+          DatePicker.preload();
+          return (0, _keymap.default)();
+        }
+      }];
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView,
+        dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
+        popupsMountPoint = _ref5.popupsMountPoint,
+        popupsBoundariesElement = _ref5.popupsBoundariesElement,
+        popupsScrollableElement = _ref5.popupsScrollableElement;
+      return /*#__PURE__*/_react.default.createElement(ContentComponent, {
+        dependencyApi: api,
+        editorView: editorView,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        weekStartDay: options.weekStartDay
+      });
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref6) {
+        var formatMessage = _ref6.formatMessage;
+        return [{
+          id: 'date',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.date),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.dateDescription),
+          priority: 800,
+          keywords: ['calendar', 'day', 'time', 'today', '/'],
+          keyshortcut: '//',
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconDate, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics, _api$analytics$attach;
+            var tr = (0, _actions.createDate)(true)(insert, state);
+            api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || (_api$analytics$attach = _api$analytics.attachAnalyticsEvent) === null || _api$analytics$attach === void 0 || _api$analytics$attach.call(_api$analytics, {
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.DATE,
+              eventType: _analytics.EVENT_TYPE.TRACK,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              }
+            })(tr);
+            return tr;
+          }
+        }];
+      }
+    }
+  };
+};
+var _default = exports.default = datePlugin;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.keymapPlugin = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _actions = require("../actions");
+var _main = require("./main");
+function keymapPlugin() {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, function (state, dispatch) {
+    var datePlugin = (0, _main.getPluginState)(state);
+    var isDateNode = state.selection instanceof _state.NodeSelection ? state.selection.node.type === state.schema.nodes.date : false;
+    if (!isDateNode) {
+      return false;
+    }
+    if (!datePlugin.showDatePickerAt) {
+      (0, _actions.openDatePicker)()(state, dispatch);
+      return true;
+    }
+    (0, _actions.closeDatePicker)()(state, dispatch);
+    return true;
+  }, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, function (state, dispatch) {
+    var datePlugin = (0, _main.getPluginState)(state);
+    var isDateNode = state.selection instanceof _state.NodeSelection ? state.selection.node.type === state.schema.nodes.date : false;
+    if (!isDateNode) {
+      return false;
+    }
+    if (datePlugin.showDatePickerAt) {
+      (0, _actions.focusDateInput)()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
+  return (0, _keymaps.keymap)(list);
+}
+var _default = exports.default = keymapPlugin;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _date = require("../nodeviews/date");
+var _pluginKey = require("./plugin-key");
+var _utils2 = require("./utils");
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _utils2.reducer, {
+    mapping: _utils2.mapping,
+    onSelectionChanged: _utils2.onSelectionChanged
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;
+var createPlugin = function createPlugin(pmPluginFactoryParams) {
+  var newPluginState = {
+    showDatePickerAt: null,
+    isNew: false,
+    isDateEmpty: false,
+    focusDateInput: false
+  };
+  return new _safePlugin.SafePlugin({
+    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
+    key: _pluginKey.pluginKey,
+    props: {
+      nodeViews: {
+        date: (0, _reactNodeView.getInlineNodeViewProducer)({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: _date.DateNodeView
+        })
+      }
+    }
+  });
+};
+var _default = exports.default = createPlugin;

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('datePlugin');

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapping = mapping;
+exports.onSelectionChanged = onSelectionChanged;
+exports.reducer = reducer;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _state = require("@atlaskit/editor-prosemirror/state");
+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; }
+function reducer(pluginState, meta) {
+  // If the same nodeview is clicked twice, calendar should close
+  if (meta.showDatePickerAt === pluginState.showDatePickerAt) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      showDatePickerAt: null
+    });
+  }
+  var showDatePickerAt = pluginState.showDatePickerAt,
+    isNew = pluginState.isNew;
+  var showDatePickerAtMeta = meta.showDatePickerAt;
+  // If date picker position has changed, it is no longer new
+  if (showDatePickerAt && showDatePickerAtMeta && showDatePickerAt !== showDatePickerAtMeta && isNew) {
+    return _objectSpread(_objectSpread(_objectSpread({}, pluginState), meta), {}, {
+      isNew: false
+    });
+  }
+  return _objectSpread(_objectSpread({}, pluginState), meta);
+}
+function mapping(tr, pluginState) {
+  if (!pluginState.showDatePickerAt) {
+    return pluginState;
+  }
+  var _tr$mapping$mapResult = tr.mapping.mapResult(pluginState.showDatePickerAt),
+    pos = _tr$mapping$mapResult.pos;
+  return {
+    showDatePickerAt: pos,
+    isNew: pluginState.isNew,
+    isDateEmpty: pluginState.isDateEmpty,
+    focusDateInput: pluginState.focusDateInput
+  };
+}
+function onSelectionChanged(tr, pluginState) {
+  if (tr.docChanged && isDateNodeSelection(tr.selection)) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      isQuickInsertAction: false,
+      showDatePickerAt: tr.selection.from
+    });
+  } else if (!isDateNodeSelection(tr.selection) && !pluginState.isQuickInsertAction) {
+    if (pluginState.showDatePickerAt) {
+      return {
+        showDatePickerAt: null,
+        isNew: false,
+        isDateEmpty: false,
+        focusDateInput: false
+      };
+    }
+    return pluginState;
+  }
+  return pluginState;
+}
+var isDateNodeSelection = function isDateNodeSelection(selection) {
+  if (selection instanceof _state.NodeSelection) {
+    var nodeTypeName = selection.node.type.name;
+    return nodeTypeName === 'date';
+  }
+  return false;
+};