@atlaskit/editor-plugin-date 0.1.0 → 0.2.0

package/dist/es2019/actions.js

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

package/dist/es2019/commands.js

@@ -1 +1,113 @@
-export {};
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { canInsert } from '@atlaskit/editor-prosemirror/utils';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { isToday } from './utils/internal';
+/** Delete the date and close the datepicker */
+export const deleteDateCommand = pluginInjectionApi => ({
+  tr
+}) => {
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+  const {
+    showDatePickerAt
+  } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.date) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.sharedState.currentState()) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
+  if (!showDatePickerAt) {
+    return tr;
+  }
+  tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
+    showDatePickerAt: null,
+    isNew: false
+  });
+  return tr;
+};
+export const insertDateCommand = pluginInjectionApi => ({
+  date,
+  inputMethod,
+  commitMethod,
+  enterPressed = true
+}) => ({
+  tr
+}) => {
+  var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+  const {
+    schema
+  } = tr.doc.type;
+  let timestamp;
+  if (date) {
+    timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
+  } else {
+    timestamp = todayTimestampInUTC();
+  }
+  if (inputMethod) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.attachAnalyticsEvent({
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.DATE,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod
+      }
+    })(tr);
+  }
+  if (commitMethod) {
+    var _pluginInjectionApi$a3, _pluginInjectionApi$a4;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : (_pluginInjectionApi$a4 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.attachAnalyticsEvent({
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.COMMITTED,
+      actionSubject: ACTION_SUBJECT.DATE,
+      attributes: {
+        commitMethod,
+        isValid: date !== undefined,
+        isToday: isToday(date)
+      }
+    })(tr);
+  }
+  const {
+    showDatePickerAt
+  } = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.date) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.sharedState.currentState()) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {};
+  if (!showDatePickerAt) {
+    const dateNode = schema.nodes.date.createChecked({
+      timestamp
+    });
+    const textNode = schema.text(' ');
+    const fragment = Fragment.fromArray([dateNode, textNode]);
+    const {
+      from,
+      to
+    } = tr.selection;
+    const insertable = canInsert(tr.selection.$from, fragment);
+    if (!insertable) {
+      const parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
+      tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
+    } else {
+      tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
+    }
+    if (tr.docChanged) {
+      tr.scrollIntoView().setMeta(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(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
+    }
+    tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
+      timestamp
+    }).setMeta(pluginKey, {
+      isNew: false
+    }).scrollIntoView();
+    if (!enterPressed) {
+      tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
+    }
+  }
+  return tr;
+};

package/dist/es2019/index.js

@@ -1 +1 @@
-export {};
+export { default as datePlugin } from './plugin';

package/dist/es2019/nodeviews/date.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { Date } from '@atlaskit/date';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
+import { setDatePickerAt } from '../actions';
+export function DateNodeView(props) {
+  const {
+    node: {
+      attrs: {
+        timestamp
+      }
+    },
+    view: {
+      state: {
+        doc,
+        schema,
+        selection
+      }
+    },
+    getPos
+  } = props;
+  const intl = useIntl();
+  let 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
+  const $nodePos = typeof pos === 'number' ? doc.resolve(pos) : selection.$from;
+  const parent = $nodePos.parent;
+  const withinIncompleteTask = parent.type === schema.nodes.taskItem && parent.attrs.state !== 'DONE';
+  const color = withinIncompleteTask && isPastDate(timestamp) ? 'red' : undefined;
+  return /*#__PURE__*/React.createElement("span", {
+    className: DateSharedCssClassName.DATE_WRAPPER,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(Date, {
+    color: color,
+    value: timestamp
+  }, withinIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+  function handleClick(event) {
+    event.nativeEvent.stopImmediatePropagation();
+    const {
+      state,
+      dispatch
+    } = props.view;
+    setDatePickerAt(state.selection.from)(state, dispatch);
+  }
+}

package/dist/es2019/plugin.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { date } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconDate } from '@atlaskit/editor-common/quick-insert';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './actions';
+import { deleteDateCommand, insertDateCommand } from './commands';
+import keymap from './pm-plugins/keymap';
+import createDatePlugin from './pm-plugins/main';
+import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
+const DatePicker = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-datepicker" */'./ui/DatePicker').then(mod => mod.default),
+  loading: () => null
+});
+function ContentComponent({
+  editorView,
+  dispatchAnalyticsEvent,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  dependencyApi,
+  weekStartDay
+}) {
+  const {
+    dispatch
+  } = editorView;
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const {
+    editorDisabledState,
+    dateState
+  } = useSharedPluginState(dependencyApi, ['date', 'editorDisabled']);
+  if (!(dateState !== null && dateState !== void 0 && dateState.showDatePickerAt) || editorDisabledState !== null && editorDisabledState !== void 0 && editorDisabledState.editorDisabled) {
+    return null;
+  }
+  const {
+    showDatePickerAt,
+    isNew,
+    focusDateInput
+  } = dateState;
+  const element = findDomRefAtPos(showDatePickerAt, domAtPos);
+  return /*#__PURE__*/React.createElement(DatePicker, {
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    key: showDatePickerAt,
+    element: element,
+    isNew: isNew,
+    autoFocus: focusDateInput,
+    onDelete: () => {
+      dependencyApi === null || dependencyApi === void 0 ? void 0 : dependencyApi.core.actions.execute(deleteDateCommand(dependencyApi));
+      editorView.focus();
+    },
+    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 ? void 0 : dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
+        date,
+        commitMethod
+      }));
+      editorView.focus();
+    },
+    onTextChanged: date => {
+      dependencyApi === null || dependencyApi === void 0 ? void 0 : dependencyApi.core.actions.execute(insertDateCommand(dependencyApi)({
+        date,
+        enterPressed: false
+      }));
+    },
+    closeDatePicker: () => {
+      closeDatePicker()(editorView.state, dispatch);
+      editorView.focus();
+    },
+    closeDatePickerWithAnalytics: ({
+      date
+    }) => {
+      closeDatePickerWithAnalytics({
+        date
+      })(editorView.state, dispatch);
+      editorView.focus();
+    },
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    weekStartDay: weekStartDay
+  });
+}
+const datePlugin = ({
+  config: options = {},
+  api
+}) => ({
+  name: 'date',
+  getSharedState(editorState) {
+    if (!editorState) {
+      return {
+        showDatePickerAt: null,
+        isNew: false,
+        focusDateInput: false
+      };
+    }
+    const {
+      showDatePickerAt,
+      isNew,
+      focusDateInput
+    } = datePluginKey.getState(editorState) || {};
+    return {
+      showDatePickerAt,
+      isNew: !!isNew,
+      focusDateInput: !!focusDateInput
+    };
+  },
+  commands: {
+    insertDate: insertDateCommand(api),
+    deleteDate: deleteDateCommand(api)
+  },
+  nodes() {
+    return [{
+      name: 'date',
+      node: date
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'date',
+      plugin: options => {
+        DatePicker.preload();
+        return createDatePlugin(options);
+      }
+    }, {
+      name: 'dateKeymap',
+      plugin: () => {
+        DatePicker.preload();
+        return keymap();
+      }
+    }];
+  },
+  contentComponent({
+    editorView,
+    dispatchAnalyticsEvent,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
+  }) {
+    return /*#__PURE__*/React.createElement(ContentComponent, {
+      dependencyApi: api,
+      editorView: editorView,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      weekStartDay: options.weekStartDay
+    });
+  },
+  pluginsOptions: {
+    quickInsert: ({
+      formatMessage
+    }) => [{
+      id: 'date',
+      title: formatMessage(messages.date),
+      description: formatMessage(messages.dateDescription),
+      priority: 800,
+      keywords: ['calendar', 'day', 'time', 'today', '/'],
+      keyshortcut: '//',
+      icon: () => /*#__PURE__*/React.createElement(IconDate, null),
+      action(insert, state) {
+        var _api$analytics, _api$analytics$action, _api$analytics$action2;
+        const tr = createDate(true)(insert, state);
+        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : (_api$analytics$action2 = _api$analytics$action.attachAnalyticsEvent) === null || _api$analytics$action2 === void 0 ? void 0 : _api$analytics$action2.call(_api$analytics$action, {
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.DATE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: INPUT_METHOD.QUICK_INSERT
+          }
+        })(tr);
+        return tr;
+      }
+    }]
+  }
+});
+export default datePlugin;

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

@@ -0,0 +1,34 @@
+import { bindKeymapWithCommand, enter, keymap, tab } from '@atlaskit/editor-common/keymaps';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { closeDatePicker, focusDateInput, openDatePicker } from '../actions';
+import { getPluginState } from './main';
+export function keymapPlugin() {
+  const list = {};
+  bindKeymapWithCommand(enter.common, (state, dispatch) => {
+    const datePlugin = getPluginState(state);
+    const isDateNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.date : false;
+    if (!isDateNode) {
+      return false;
+    }
+    if (!datePlugin.showDatePickerAt) {
+      openDatePicker()(state, dispatch);
+      return true;
+    }
+    closeDatePicker()(state, dispatch);
+    return true;
+  }, list);
+  bindKeymapWithCommand(tab.common, (state, dispatch) => {
+    const datePlugin = getPluginState(state);
+    const isDateNode = state.selection instanceof NodeSelection ? state.selection.node.type === state.schema.nodes.date : false;
+    if (!isDateNode) {
+      return false;
+    }
+    if (datePlugin.showDatePickerAt) {
+      focusDateInput()(state, dispatch);
+      return true;
+    }
+    return false;
+  }, list);
+  return keymap(list);
+}
+export default keymapPlugin;

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

@@ -0,0 +1,35 @@
+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 { DateNodeView } from '../nodeviews/date';
+import { pluginKey } from './plugin-key';
+import { mapping, onSelectionChanged, reducer } from './utils';
+const {
+  createPluginState,
+  getPluginState
+} = pluginFactory(pluginKey, reducer, {
+  mapping,
+  onSelectionChanged
+});
+const createPlugin = pmPluginFactoryParams => {
+  const newPluginState = {
+    showDatePickerAt: null,
+    isNew: false,
+    isDateEmpty: false,
+    focusDateInput: false
+  };
+  return new SafePlugin({
+    state: createPluginState(pmPluginFactoryParams.dispatch, newPluginState),
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        date: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: DateNodeView
+        })
+      }
+    }
+  });
+};
+export { getPluginState };
+export default createPlugin;

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('datePlugin');

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,70 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export function reducer(pluginState, meta) {
+  // If the same nodeview is clicked twice, calendar should close
+  if (meta.showDatePickerAt === pluginState.showDatePickerAt) {
+    return {
+      ...pluginState,
+      showDatePickerAt: null
+    };
+  }
+  const {
+    showDatePickerAt,
+    isNew
+  } = pluginState;
+  const {
+    showDatePickerAt: showDatePickerAtMeta
+  } = meta;
+  // If date picker position has changed, it is no longer new
+  if (showDatePickerAt && showDatePickerAtMeta && showDatePickerAt !== showDatePickerAtMeta && isNew) {
+    return {
+      ...pluginState,
+      ...meta,
+      isNew: false
+    };
+  }
+  return {
+    ...pluginState,
+    ...meta
+  };
+}
+export function mapping(tr, pluginState) {
+  if (!pluginState.showDatePickerAt) {
+    return pluginState;
+  }
+  const {
+    pos
+  } = tr.mapping.mapResult(pluginState.showDatePickerAt);
+  return {
+    showDatePickerAt: pos,
+    isNew: pluginState.isNew,
+    isDateEmpty: pluginState.isDateEmpty,
+    focusDateInput: pluginState.focusDateInput
+  };
+}
+export function onSelectionChanged(tr, pluginState) {
+  if (tr.docChanged && isDateNodeSelection(tr.selection)) {
+    return {
+      ...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;
+}
+const isDateNodeSelection = selection => {
+  if (selection instanceof NodeSelection) {
+    const nodeTypeName = selection.node.type.name;
+    return nodeTypeName === 'date';
+  }
+  return false;
+};