@atlaskit/editor-core 188.10.7 → 188.11.1

package/dist/es2019/plugins/date/nodeviews/messages.js

@@ -1,8 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export const messages = defineMessages({
-  editText: {
-    id: 'fabric.editor.editDateText',
-    defaultMessage: 'Edit Date',
-    description: 'Title for the input that changes the date'
-  }
-});

package/dist/es2019/plugins/date/plugin.js

@@ -1,183 +0,0 @@
-import React from 'react';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import Loadable from 'react-loadable';
-import { date } from '@atlaskit/adf-schema';
-import { closeDatePicker, closeDatePickerWithAnalytics, createDate } from './actions';
-import { insertDateCommand, deleteDateCommand } from './commands';
-import createDatePlugin from './pm-plugins/main';
-import keymap from './pm-plugins/keymap';
-import { IconDate } from '@atlaskit/editor-common/quick-insert';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { pluginKey as datePluginKey } from './pm-plugins/plugin-key';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-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/plugins/date/pm-plugins/keymap.js

@@ -1,34 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { closeDatePicker, openDatePicker, focusDateInput } from '../actions';
-import { keymap, enter, tab, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
-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/plugins/date/pm-plugins/main.js

@@ -1,35 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { DateNodeView } from '../nodeviews/date';
-import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-import { reducer, mapping, onSelectionChanged } from './utils';
-import { pluginKey } from './plugin-key';
-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/plugins/date/pm-plugins/plugin-key.js

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

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

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

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

@@ -1,70 +0,0 @@
-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;
-};

package/dist/es2019/plugins/date/types.js

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

package/dist/es2019/plugins/date/ui/DatePicker/date-picker-input.js

@@ -1,233 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { defineMessages, injectIntl } from 'react-intl-next';
-import { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
-import { parseDateType, formatDateType } from '../../utils/formatParse';
-import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
-import TextField from '@atlaskit/textfield';
-import { ErrorMessage } from '@atlaskit/form';
-const dateTextFieldWrapper = css`
-  padding: 22px;
-  padding-bottom: ${"var(--ds-space-150, 12px)"};
-`;
-const messages = defineMessages({
-  invalidDateError: {
-    id: 'fabric.editor.invalidDateError',
-    defaultMessage: 'Enter a valid date',
-    description: 'Error message when the date typed in is invalid, requesting they inputs a new date'
-  }
-});
-class DatePickerInput extends React.Component {
-  constructor(props) {
-    super(props);
-    /**
-     * Focus the input textfield
-     */
-    _defineProperty(this, "focusInput", () => {
-      if (!this.inputRef) {
-        return;
-      }
-      // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
-      this.autofocusTimeout = setTimeout(() => {
-        this.inputRef.focus();
-      });
-    });
-    /**
-     * Select all the input text
-     */
-    _defineProperty(this, "selectInput", () => {
-      if (!this.inputRef) {
-        return;
-      }
-      // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
-      this.autoSelectAllTimeout = setTimeout(() => {
-        this.inputRef.select();
-      });
-    });
-    _defineProperty(this, "handleInputRef", ref => {
-      const {
-        autoFocus,
-        autoSelectAll
-      } = this.props;
-      if (ref) {
-        this.inputRef = ref;
-      }
-      if (ref && autoFocus) {
-        this.focusInput();
-      }
-      if (autoSelectAll) {
-        this.selectInput();
-      }
-    });
-    _defineProperty(this, "handleChange", evt => {
-      const textFieldValue = evt.target.value;
-      const {
-        locale,
-        dispatchAnalyticsEvent
-      } = this.props;
-      const newDate = parseDateType(textFieldValue, locale);
-      if (newDate !== undefined && newDate !== null) {
-        this.setState({
-          inputText: textFieldValue
-        });
-        this.props.onNewDate(newDate);
-        if (dispatchAnalyticsEvent) {
-          dispatchAnalyticsEvent({
-            eventType: EVENT_TYPE.TRACK,
-            action: ACTION.TYPING_FINISHED,
-            actionSubject: ACTION_SUBJECT.DATE
-          });
-        }
-      } else {
-        // if invalid, just update state text (to rerender textfield)
-        this.setState({
-          inputText: textFieldValue
-        });
-      }
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const {
-        locale,
-        dispatchAnalyticsEvent
-      } = this.props;
-      const textFieldValue = event.target.value;
-
-      // Fire event on every keypress (textfield not necessarily empty)
-      if (dispatchAnalyticsEvent && event.key !== 'Enter' && event.key !== 'Backspace') {
-        dispatchAnalyticsEvent({
-          eventType: EVENT_TYPE.TRACK,
-          action: ACTION.TYPING_STARTED,
-          actionSubject: ACTION_SUBJECT.DATE
-        });
-      }
-      if (event.key !== 'Enter') {
-        return;
-      }
-      if (textFieldValue === '') {
-        this.props.onEmptySubmit();
-        return;
-      }
-      const newDate = parseDateType(textFieldValue, locale);
-      this.props.onSubmitDate(newDate);
-    });
-    // arrow keys are only triggered by onKeyDown, not onKeyPress
-    _defineProperty(this, "handleKeyDown", event => {
-      const dateString = event.target.value;
-      const {
-        locale
-      } = this.props;
-      let adjustment;
-      if (event.key === 'ArrowUp') {
-        adjustment = 1;
-      } else if (event.key === 'ArrowDown') {
-        adjustment = -1;
-      }
-      if (adjustment === undefined) {
-        return;
-      }
-      const {
-        dispatchAnalyticsEvent
-      } = this.props;
-      const cursorPos = this.inputRef.selectionStart;
-      const activeSegment = findDateSegmentByPosition(cursorPos, dateString, locale);
-      if (activeSegment === undefined) {
-        return;
-      }
-      let dateSegment;
-      switch (activeSegment) {
-        case 'day':
-          dateSegment = ACTION_SUBJECT_ID.DATE_DAY;
-          break;
-        case 'month':
-          dateSegment = ACTION_SUBJECT_ID.DATE_MONTH;
-          break;
-        default:
-          dateSegment = ACTION_SUBJECT_ID.DATE_YEAR;
-      }
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          eventType: EVENT_TYPE.TRACK,
-          action: adjustment > 0 ? ACTION.INCREMENTED : ACTION.DECREMENTED,
-          actionSubject: ACTION_SUBJECT.DATE_SEGMENT,
-          attributes: {
-            dateSegment
-          }
-        });
-      }
-      const oldDateType = parseDateType(dateString, locale);
-      if (oldDateType === undefined || oldDateType === null) {
-        return;
-      }
-      const newDateType = adjustDate(oldDateType, activeSegment, adjustment);
-      this.setState({
-        inputText: formatDateType(newDateType, locale)
-      });
-      this.props.onNewDate(newDateType);
-      this.setInputSelectionPos = Math.min(cursorPos, dateString.length);
-      event.preventDefault();
-    });
-    const {
-      date
-    } = props;
-    this.setInputSelectionPos = undefined;
-    const inputText = formatDateType(date, this.props.locale);
-    this.state = {
-      inputText
-    };
-  }
-  render() {
-    const {
-      locale,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const {
-      inputText
-    } = this.state;
-    const possiblyValid = isDatePossiblyValid(inputText);
-    const attemptedDateParse = parseDateType(inputText, locale);
-
-    // Don't display an error for an empty input.
-    const displayError = (attemptedDateParse === null || !possiblyValid) && inputText !== '';
-    return jsx("div", {
-      css: dateTextFieldWrapper
-    }, jsx(TextField, {
-      name: "datetextfield",
-      value: inputText,
-      ref: this.handleInputRef,
-      onChange: this.handleChange,
-      onKeyPress: this.handleKeyPress,
-      onKeyDown: this.handleKeyDown,
-      spellCheck: false,
-      autoComplete: "off",
-      isInvalid: displayError
-    }), displayError && jsx(ErrorMessage, null, formatMessage(messages.invalidDateError)));
-  }
-  componentDidUpdate() {
-    const setInputSelectionPos = this.setInputSelectionPos;
-    if (setInputSelectionPos !== undefined) {
-      this.inputRef.setSelectionRange(setInputSelectionPos, setInputSelectionPos);
-      this.setInputSelectionPos = undefined;
-    }
-    if (this.inputRef && this.props.autoFocus) {
-      // TODO: Check if input already has focus
-      this.focusInput();
-    }
-
-    // Don't select all text here - would seleect text on each keystroke
-  }
-
-  componentWillUnmount() {
-    if (this.autofocusTimeout !== undefined) {
-      clearTimeout(this.autofocusTimeout);
-    }
-    if (this.autoSelectAllTimeout !== undefined) {
-      clearTimeout(this.autoSelectAllTimeout);
-    }
-  }
-}
-export default injectIntl(DatePickerInput);