@atlaskit/editor-core 188.8.0 → 188.9.2

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -1,293 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N0 } from '@atlaskit/theme/colors';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-import { DEFAULT_STATUS } from '../actions';
-import { analyticsState, createStatusAnalyticsAndFire } from '../analytics';
-const PopupWithListeners = withOuterListeners(Popup);
-export let InputMethod = /*#__PURE__*/function (InputMethod) {
-  InputMethod["blur"] = "blur";
-  InputMethod["escKey"] = "escKey";
-  InputMethod["enterKey"] = "enterKey";
-  return InputMethod;
-}({});
-export let closingMethods = /*#__PURE__*/function (closingMethods) {
-  closingMethods["ArrowLeft"] = "arrowLeft";
-  closingMethods["ArrowRight"] = "arrowRight";
-  return closingMethods;
-}({});
-const pickerContainer = css`
-  background: ${`var(--ds-surface-overlay, ${N0})`};
-  padding: ${"var(--ds-space-100, 8px)"} 0;
-  border-radius: ${borderRadius()}px;
-  box-shadow: ${"var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))"};
-  :focus {
-    outline: none;
-  }
-  input {
-    text-transform: uppercase;
-  }
-`;
-export class StatusPickerWithoutAnalytcs extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleClickOutside", event => {
-      event.preventDefault();
-      this.inputMethod = InputMethod.blur;
-      const selectedText = window.getSelection();
-      if (!selectedText) {
-        this.props.closeStatusPicker();
-      }
-    });
-    _defineProperty(this, "handleEscapeKeydown", event => {
-      event.preventDefault();
-      this.inputMethod = InputMethod.escKey;
-      this.props.onEnter(this.state);
-    });
-    _defineProperty(this, "handleTabPress", event => {
-      const colorButtons = event.currentTarget.querySelectorAll('button');
-      const inputField = event.currentTarget.querySelector('input');
-      const isInputFocussed = document.activeElement === inputField;
-      const isButtonFocussed = Array.from(colorButtons).some(buttonElement => {
-        var _document;
-        return ((_document = document) === null || _document === void 0 ? void 0 : _document.activeElement) === buttonElement;
-      });
-      if (event !== null && event !== void 0 && event.shiftKey) {
-        /* shift + tab */
-        if (isInputFocussed) {
-          colorButtons[0].focus();
-          event.preventDefault();
-        }
-        /* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
-            To correctly set focus to the input field instead of the first color button we need to set focus manually
-            */
-        if (isButtonFocussed) {
-          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
-          event.preventDefault();
-        }
-      } else {
-        /* tab */
-        if (isButtonFocussed) {
-          inputField === null || inputField === void 0 ? void 0 : inputField.focus();
-          event.preventDefault();
-        }
-      }
-    });
-    _defineProperty(this, "handleArrow", (event, closingMethod) => {
-      var _document2;
-      if (((_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.activeElement) === this.popupBodyWrapper.current) {
-        var _this$popupBodyWrappe, _this$popupBodyWrappe2;
-        event.preventDefault();
-        (_this$popupBodyWrappe = this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 ? void 0 : (_this$popupBodyWrappe2 = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.blur();
-        this.props.closeStatusPicker({
-          closingMethod
-        });
-      }
-    });
-    _defineProperty(this, "onKeyDown", event => {
-      const isTabPressed = event.key === 'Tab';
-      if (isTabPressed) {
-        return this.handleTabPress(event);
-      }
-      if (event.key in closingMethods) {
-        return this.handleArrow(event, closingMethods[event.key]);
-      }
-    });
-    _defineProperty(this, "onColorHover", color => {
-      this.createStatusAnalyticsAndFireFunc({
-        action: 'hovered',
-        actionSubject: 'statusColorPicker',
-        attributes: {
-          color,
-          localId: this.state.localId,
-          state: analyticsState(this.props.isNew)
-        }
-      });
-    });
-    _defineProperty(this, "onColorClick", color => {
-      const {
-        text,
-        localId
-      } = this.state;
-      if (color === this.state.color) {
-        this.createStatusAnalyticsAndFireFunc({
-          action: 'clicked',
-          actionSubject: 'statusColorPicker',
-          attributes: {
-            color,
-            localId,
-            state: analyticsState(this.props.isNew)
-          }
-        });
-        // closes status box and commits colour
-        this.onEnter();
-      } else {
-        this.setState({
-          color
-        });
-        this.props.onSelect({
-          text,
-          color,
-          localId
-        });
-      }
-    });
-    _defineProperty(this, "onTextChanged", text => {
-      const {
-        color,
-        localId
-      } = this.state;
-      this.setState({
-        text
-      });
-      this.props.onTextChanged({
-        text,
-        color,
-        localId
-      }, !!this.props.isNew);
-    });
-    _defineProperty(this, "onEnter", () => {
-      this.inputMethod = InputMethod.enterKey;
-      this.props.onEnter(this.state);
-    });
-    // cancel bubbling to fix clickOutside logic:
-    // popup re-renders its content before the click event bubbles up to the document
-    // therefore click target element would be different from the popup content
-    _defineProperty(this, "handlePopupClick", event => event.nativeEvent.stopImmediatePropagation());
-    this.state = this.extractStateFromProps(props);
-    this.createStatusAnalyticsAndFireFunc = createStatusAnalyticsAndFire(props.createAnalyticsEvent);
-    this.popupBodyWrapper = /*#__PURE__*/React.createRef();
-  }
-  fireStatusPopupOpenedAnalytics(state) {
-    const {
-      color,
-      text,
-      localId,
-      isNew
-    } = state;
-    this.startTime = Date.now();
-    this.createStatusAnalyticsAndFireFunc({
-      action: 'opened',
-      actionSubject: 'statusPopup',
-      attributes: {
-        textLength: text ? text.length : 0,
-        selectedColor: color,
-        localId,
-        state: analyticsState(isNew)
-      }
-    });
-  }
-  fireStatusPopupClosedAnalytics(state) {
-    const {
-      color,
-      text,
-      localId,
-      isNew
-    } = state;
-    this.createStatusAnalyticsAndFireFunc({
-      action: 'closed',
-      actionSubject: 'statusPopup',
-      attributes: {
-        inputMethod: this.inputMethod,
-        duration: Date.now() - this.startTime,
-        textLength: text ? text.length : 0,
-        selectedColor: color,
-        localId,
-        state: analyticsState(isNew)
-      }
-    });
-  }
-  reset() {
-    this.startTime = Date.now();
-    this.inputMethod = InputMethod.blur;
-  }
-  componentDidMount() {
-    this.reset();
-    this.fireStatusPopupOpenedAnalytics(this.state);
-    if (typeof this.props.isNew === 'boolean' && this.props.isNew === false) {
-      // Wrapper should be focused only if status already exists otherwise input field will receive focus
-      this.focusTimeout = requestAnimationFrame(() => {
-        var _this$popupBodyWrappe3, _this$popupBodyWrappe4;
-        // Defer to prevent editor scrolling to top. See https://product-fabric.atlassian.net/browse/DTR-1952
-        (_this$popupBodyWrappe3 = this.popupBodyWrapper) === null || _this$popupBodyWrappe3 === void 0 ? void 0 : (_this$popupBodyWrappe4 = _this$popupBodyWrappe3.current) === null || _this$popupBodyWrappe4 === void 0 ? void 0 : _this$popupBodyWrappe4.focus();
-      });
-    }
-  }
-  componentWillUnmount() {
-    this.focusTimeout && cancelAnimationFrame(this.focusTimeout);
-    this.fireStatusPopupClosedAnalytics(this.state);
-    this.startTime = 0;
-  }
-  componentDidUpdate(prevProps, prevState, _snapshot) {
-    const element = this.props.target;
-    if (prevProps.target !== element) {
-      const newState = this.extractStateFromProps(this.props);
-      this.setState(newState);
-      this.fireStatusPopupClosedAnalytics(prevState);
-      this.reset();
-      this.fireStatusPopupOpenedAnalytics(newState);
-    }
-  }
-  extractStateFromProps(props) {
-    const {
-      defaultColor,
-      defaultText,
-      defaultLocalId,
-      isNew
-    } = props;
-    return {
-      color: defaultColor || DEFAULT_STATUS.color,
-      text: defaultText || DEFAULT_STATUS.text,
-      localId: defaultLocalId,
-      isNew
-    };
-  }
-  render() {
-    const {
-      isNew,
-      target,
-      mountTo,
-      boundariesElement,
-      scrollableElement
-    } = this.props;
-    const {
-      color,
-      text
-    } = this.state;
-    return target && jsx(PopupWithListeners, {
-      target: target,
-      offset: [0, 8],
-      handleClickOutside: this.handleClickOutside,
-      handleEscapeKeydown: this.handleEscapeKeydown,
-      zIndex: akEditorFloatingDialogZIndex,
-      fitHeight: 40,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      closeOnTab: false
-    }, jsx("div", {
-      css: pickerContainer,
-      tabIndex: -1,
-      ref: this.popupBodyWrapper,
-      onClick: this.handlePopupClick,
-      onKeyDown: this.onKeyDown
-    }, jsx(AkStatusPicker, {
-      autoFocus: isNew,
-      selectedColor: color,
-      text: text,
-      onColorClick: this.onColorClick,
-      onColorHover: this.onColorHover,
-      onTextChanged: this.onTextChanged,
-      onEnter: this.onEnter
-    })));
-  }
-}
-export default withAnalyticsEvents()(StatusPickerWithoutAnalytcs);

package/dist/es2019/plugins/status/utils.js

@@ -1,12 +0,0 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-export const mayGetStatusAtSelection = selection => {
-  if (selection && selection instanceof NodeSelection) {
-    const nodeSelection = selection;
-    if (nodeSelection.node.type.name === 'status') {
-      return selection.node.attrs || null;
-    }
-  }
-  return null;
-};
-export const isEmptyStatus = node => node && (node.text && node.text.trim().length === 0 || node.text === '');
-export const setNodeSelectionNearPos = (tr, pos) => tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(pos)));

package/dist/es2019/plugins/type-ahead/api.js

@@ -1,205 +0,0 @@
-import { TypeAheadAvailableNodes, SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { findHandler, isTypeAheadOpen, getTypeAheadHandler, getTypeAheadQuery } from './utils';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
-import { closeTypeAhead } from './transforms/close-type-ahead';
-import { updateQuery } from './commands/update-query';
-import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
-const open = ({
-  editorView
-}) => itemType => inputMethod => {
-  const {
-    state
-  } = editorView;
-  const handler = findHandler(itemType, state);
-  if (!handler) {
-    return false;
-  }
-  const {
-    tr
-  } = state;
-  openTypeAheadAtCursor({
-    triggerHandler: handler,
-    inputMethod
-  })({
-    tr
-  });
-  editorView.dispatch(tr);
-  return true;
-};
-const defaultCloseOptions = {
-  insertCurrentQueryAsRawText: false
-};
-const close = ({
-  editorView
-}) => (options = defaultCloseOptions) => {
-  const {
-    state
-  } = editorView;
-  const currentQuery = getTypeAheadQuery(editorView.state);
-  let tr = state.tr;
-  if (options.attachCommand) {
-    const fakeDispatch = customTr => {
-      tr = customTr;
-    };
-    options.attachCommand(state, fakeDispatch);
-  }
-  closeTypeAhead(tr);
-  if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
-    const handler = getTypeAheadHandler(state);
-    const text = handler.trigger.concat(currentQuery);
-    tr.replaceSelectionWith(state.schema.text(text));
-  }
-  editorView.dispatch(tr);
-  if (!editorView.hasFocus()) {
-    editorView.focus();
-  }
-  return true;
-};
-const search = ({
-  editorView
-}) => itemType => (query = '') => {
-  const {
-    state
-  } = editorView;
-  const handler = findHandler(itemType, state);
-  if (!handler) {
-    throw new Error(`Handler not found, did you load the ${itemType} plugin properly`);
-  }
-  open({
-    editorView
-  })(itemType)(INPUT_METHOD.KEYBOARD);
-  updateQuery(query)(editorView.state, editorView.dispatch);
-  const lastQuery = {
-    current: query
-  };
-  const last = handler.getItems({
-    query,
-    editorState: state
-  }).then(items => {
-    if (!handler.forceSelect) {
-      return items;
-    }
-    const forceSelectedItem = handler.forceSelect({
-      items,
-      query,
-      editorState: state
-    });
-    if (!forceSelectedItem) {
-      return items;
-    }
-    insertTypeAheadItem(editorView)({
-      handler,
-      item: forceSelectedItem,
-      query,
-      mode: SelectItemMode.SELECTED,
-      sourceListItem: items
-    });
-  });
-  const results = {
-    last
-  };
-  return {
-    type: appendValue => {
-      if (!appendValue) {
-        return;
-      }
-      lastQuery.current += appendValue;
-      updateQuery(lastQuery.current)(editorView.state, editorView.dispatch);
-      const promise = handler.getItems({
-        query: lastQuery.current,
-        editorState: state
-      });
-      results.last = promise;
-      return promise;
-    },
-    result: () => results.last,
-    close: close({
-      editorView
-    }),
-    insert: ({
-      index,
-      mode
-    }) => {
-      return results.last.then(result => {
-        const item = result ? result[index] : null;
-        if (result && item) {
-          insertTypeAheadItem(editorView)({
-            handler,
-            item,
-            query,
-            mode: mode || SelectItemMode.SELECTED,
-            sourceListItem: result
-          });
-        }
-      });
-    }
-  };
-};
-const insertItem = ({
-  editorView
-}) => itemType => ({
-  contentItem,
-  query,
-  sourceListItem
-}) => {
-  const {
-    state
-  } = editorView;
-  const handler = findHandler(itemType, state);
-  if (!handler) {
-    return false;
-  }
-  insertTypeAheadItem(editorView)({
-    handler,
-    item: contentItem,
-    mode: SelectItemMode.SELECTED,
-    query,
-    sourceListItem
-  });
-  return true;
-};
-const isOpen = ({
-  editorView
-}) => () => {
-  if (!isTypeAheadOpen(editorView.state)) {
-    return false;
-  }
-  const handler = getTypeAheadHandler(editorView.state);
-  if (!handler) {
-    return false;
-  }
-  return handler;
-};
-const currentQuery = ({
-  editorView
-}) => () => {
-  return getTypeAheadQuery(editorView.state);
-};
-
-/**
- * Please do not use it. Ping #help-editor and talk to the Lego team before use it.
- *
- * @private
- * @deprecated
- *
- */
-export const createTypeAheadTools = editorView => {
-  const props = {
-    editorView
-  };
-  return {
-    isOpen: isOpen(props),
-    currentQuery: currentQuery(props),
-    close: close(props),
-    openMention: open(props)(TypeAheadAvailableNodes.MENTION),
-    searchMention: search(props)(TypeAheadAvailableNodes.MENTION),
-    openQuickInsert: open(props)(TypeAheadAvailableNodes.QUICK_INSERT),
-    searchQuickInsert: search(props)(TypeAheadAvailableNodes.QUICK_INSERT),
-    openEmoji: open(props)(TypeAheadAvailableNodes.EMOJI),
-    searchEmoji: search(props)(TypeAheadAvailableNodes.EMOJI),
-    insertItemMention: insertItem(props)(TypeAheadAvailableNodes.MENTION),
-    insertItemEmoji: insertItem(props)(TypeAheadAvailableNodes.EMOJI),
-    insertItemQuickInsert: insertItem(props)(TypeAheadAvailableNodes.QUICK_INSERT)
-  };
-};

package/dist/es2019/plugins/type-ahead/commands/insert-type-ahead-item.js

@@ -1,204 +0,0 @@
-import { closeHistory } from '@atlaskit/editor-prosemirror/history';
-import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { InsertTypeAheadStages, InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
-import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
-import { insertBlockNode, insertInlineNodeOrFragment } from '../insert-utils';
-import { ACTIONS } from '../pm-plugins/actions';
-import { pluginKey } from '../pm-plugins/key';
-import { StatsModifier } from '../stats-modifier';
-import { closeTypeAhead } from '../transforms/close-type-ahead';
-import { getPluginState } from '../utils';
-const validateNode = ({
-  schema,
-  maybeNode
-}) => {
-  if (!maybeNode) {
-    return null;
-  }
-  if (maybeNode instanceof PMNode || maybeNode instanceof Fragment) {
-    return maybeNode;
-  }
-  if (typeof maybeNode === 'string') {
-    return schema.text(maybeNode);
-  }
-  try {
-    return PMNode.fromJSON(schema, maybeNode);
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
-    return null;
-  }
-};
-const createInsertCallback = ({
-  editorState: state,
-  handler,
-  query,
-  wasInsertedBySpace,
-  selectedIndex,
-  textStartPosition,
-  textInserted
-}) => (maybeNode, opts = {}) => {
-  const {
-    tr
-  } = state;
-  const position = {
-    start: textStartPosition,
-    end: textStartPosition + (wasInsertedBySpace ? textInserted.length : 0)
-  };
-  const node = validateNode({
-    schema: state.schema,
-    maybeNode
-  });
-  if (!node) {
-    closeTypeAhead(tr);
-    // In this kind of situation we need to
-    // delete the raw text query
-    tr.delete(position.start, position.end);
-    return tr;
-  }
-  node instanceof PMNode && node.isBlock ? insertBlockNode({
-    node,
-    tr,
-    position
-  }) : insertInlineNodeOrFragment({
-    maybeFragment: node,
-    tr,
-    position,
-    selectInlineNode: Boolean(opts.selectInlineNode)
-  });
-  closeHistory(tr);
-  if (wasInsertedBySpace) {
-    return tr;
-  }
-  const config = {
-    stage: InsertTypeAheadStages.INSERTING_ITEM,
-    query,
-    selectedIndex,
-    trigger: handler.trigger
-  };
-  tr.step(new InsertTypeAheadStep(config));
-  return tr;
-};
-const createDeleteRawTextCallback = ({
-  trigger,
-  selectedIndex,
-  position,
-  query,
-  wasInsertedBySpace,
-  insertItem
-}) => {
-  return newState => {
-    const tr = newState.tr;
-    closeHistory(tr);
-    if (!wasInsertedBySpace) {
-      tr.delete(position.start, position.end);
-      const config = {
-        stage: InsertTypeAheadStages.DELETING_RAW_QUERY,
-        selectedIndex,
-        query,
-        trigger
-      };
-      tr.step(new InsertTypeAheadStep(config));
-    }
-    tr.setMeta(pluginKey, {
-      action: ACTIONS.INSERT_ITEM,
-      params: insertItem
-    });
-    return tr;
-  };
-};
-export const insertTypeAheadItem = view => ({
-  item,
-  handler,
-  mode,
-  query,
-  sourceListItem
-}) => {
-  const pluginState = getPluginState(view.state);
-  if (!pluginState) {
-    return;
-  }
-  const stats = (pluginState.stats || new StatsModifier()).serialize();
-  const meta = {
-    mode,
-    query,
-    stats,
-    sourceListItem
-  };
-  const {
-    tr
-  } = view.state;
-  const trigger = handler.trigger;
-  let text = `${trigger}${query}`;
-  if (mode === SelectItemMode.SPACE) {
-    text = text.trim().concat(' ');
-  }
-
-  // We want to always persist selectedIndex as -1 upon selecting an item from typeahead
-  // in order to retain exist focus behaviour when undoing
-  const selectedIndex = -1;
-  const wasInsertedBySpace = mode === SelectItemMode.SPACE;
-  const {
-    selection: {
-      from: textStartPosition
-    }
-  } = tr;
-  const insertItem = newEditorSate => {
-    const insertCallback = createInsertCallback({
-      editorState: newEditorSate,
-      query,
-      mode,
-      handler,
-      wasInsertedBySpace,
-      selectedIndex,
-      textInserted: text,
-      textStartPosition
-    });
-    let wasInsertCallbackCalled = false;
-    // Some wierd plugins doesn't call the insert item callback
-    // For example, the link quick insert item
-    // For those cases we need to make sure we are closing the typeahead
-    const proxyHandler = {
-      apply: function (target, _thisContext, argumentsList) {
-        wasInsertCallbackCalled = true;
-        return target(...argumentsList);
-      }
-    };
-    const insertCallbackProxy = new Proxy(insertCallback, proxyHandler);
-    const nextTr = handler.selectItem(newEditorSate, item, insertCallbackProxy, meta);
-    if (!wasInsertCallbackCalled && nextTr) {
-      closeHistory(nextTr);
-
-      // In some cases we need to re-open the typeahead
-      // e.g.: addign mentions from the quick insert
-      //
-      // Today, the QuickInsert API doesn't have a tool
-      // to help on this. So the code below will close the typeahead
-      // only if there is no previous metadata about typeahead in the
-      // next transaction
-      if (!nextTr.getMeta(pluginKey)) {
-        closeTypeAhead(nextTr);
-      }
-    }
-    return nextTr;
-  };
-  const position = {
-    start: tr.selection.from,
-    end: tr.selection.from + text.length
-  };
-  tr.setMeta(pluginKey, {
-    action: ACTIONS.INSERT_RAW_QUERY,
-    params: createDeleteRawTextCallback({
-      wasInsertedBySpace,
-      selectedIndex,
-      insertItem,
-      position,
-      query,
-      trigger
-    })
-  });
-  tr.insertText(text);
-  closeHistory(tr);
-  view.dispatch(tr);
-  view.focus();
-};