@atlaskit/editor-core 187.48.7 → 188.0.0

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -1,368 +0,0 @@
-import React from 'react';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey, AllSelection } from '@atlaskit/editor-prosemirror/state';
-import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import camelCase from 'lodash/camelCase';
-import { Popup } from '@atlaskit/editor-common/ui';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { CONTENT_COMPONENT } from '../analytics/types';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { pluginKey as dataPluginKey } from './pm-plugins/toolbar-data/plugin-key';
-import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
-import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
-import { ConfirmationModal } from './ui/ConfirmationModal';
-import { ToolbarLoader } from './ui/ToolbarLoader';
-import { findNode } from './utils';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
-export const getRelevantConfig = (selection, configs) => {
-  // node selections always take precedence, see if
-  let configPair;
-  configs.find(config => {
-    const node = findSelectedNodeOfType(config.nodeType)(selection);
-    if (node) {
-      configPair = {
-        node: node.node,
-        pos: node.pos,
-        config
-      };
-    }
-    return !!node;
-  });
-  if (configPair) {
-    return configPair;
-  }
-
-  // create mapping of node type name to configs
-  const configByNodeType = {};
-  configs.forEach(config => {
-    if (Array.isArray(config.nodeType)) {
-      config.nodeType.forEach(nodeType => {
-        configByNodeType[nodeType.name] = config;
-      });
-    } else {
-      configByNodeType[config.nodeType.name] = config;
-    }
-  });
-
-  // search up the tree from selection
-  const {
-    $from
-  } = selection;
-  for (let i = $from.depth; i > 0; i--) {
-    const node = $from.node(i);
-    const matchedConfig = configByNodeType[node.type.name];
-    if (matchedConfig) {
-      return {
-        config: matchedConfig,
-        node: node,
-        pos: $from.pos
-      };
-    }
-  }
-
-  // if it is AllSelection (can be result of Cmd+A) - use first node
-  if (selection instanceof AllSelection) {
-    const docNode = $from.node(0);
-    let matchedConfig = null;
-    const firstChild = findNode(docNode, node => {
-      matchedConfig = configByNodeType[node.type.name];
-      return !!matchedConfig;
-    });
-    if (firstChild && matchedConfig) {
-      return {
-        config: matchedConfig,
-        node: firstChild,
-        pos: $from.pos
-      };
-    }
-  }
-  return;
-};
-const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
-  try {
-    return findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.warn(error);
-    if (dispatchAnalyticsEvent) {
-      const payload = {
-        action: ACTION.ERRORED,
-        actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
-        eventType: EVENT_TYPE.OPERATIONAL,
-        attributes: {
-          component: CONTENT_COMPONENT.FLOATING_TOOLBAR,
-          selection: view.state.selection.toJSON(),
-          position: view.state.selection.from,
-          docSize: view.state.doc.nodeSize,
-          error: error.toString(),
-          errorStack: error.stack || undefined
-        }
-      };
-      dispatchAnalyticsEvent(payload);
-    }
-  }
-};
-function filterUndefined(x) {
-  return !!x;
-}
-const floatingToolbarPlugin = ({
-  api
-}) => {
-  return {
-    name: 'floatingToolbar',
-    pmPlugins(floatingToolbarHandlers = []) {
-      return [{
-        // Should be after all toolbar plugins
-        name: 'floatingToolbar',
-        plugin: ({
-          dispatch,
-          providerFactory,
-          getIntl
-        }) => floatingToolbarPluginFactory({
-          floatingToolbarHandlers,
-          dispatch,
-          providerFactory,
-          getIntl
-        })
-      }, {
-        name: 'floatingToolbarData',
-        plugin: ({
-          dispatch
-        }) => floatingToolbarDataPluginFactory(dispatch)
-      }, {
-        name: 'forceFocus',
-        plugin: () => forceFocusPlugin()
-      }];
-    },
-    actions: {
-      forceFocusSelector
-    },
-    getSharedState(editorState) {
-      var _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
-      if (!editorState) {
-        return undefined;
-      }
-      const configWithNodeInfo = (_pluginKey$getState$g = (_pluginKey$getState = pluginKey.getState(editorState)) === null || _pluginKey$getState === void 0 ? void 0 : (_pluginKey$getState$g2 = _pluginKey$getState.getConfigWithNodeInfo) === null || _pluginKey$getState$g2 === void 0 ? void 0 : _pluginKey$getState$g2.call(_pluginKey$getState, editorState)) !== null && _pluginKey$getState$g !== void 0 ? _pluginKey$getState$g : undefined;
-      return {
-        configWithNodeInfo,
-        floatingToolbarData: dataPluginKey.getState(editorState)
-      };
-    },
-    contentComponent({
-      popupsMountPoint,
-      popupsBoundariesElement,
-      popupsScrollableElement,
-      editorView,
-      providerFactory,
-      dispatchAnalyticsEvent
-    }) {
-      return /*#__PURE__*/React.createElement(ContentComponent, {
-        editorView: editorView,
-        pluginInjectionApi: api,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        providerFactory: providerFactory,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent
-      });
-    }
-  };
-};
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-function ContentComponent({
-  pluginInjectionApi,
-  editorView,
-  popupsMountPoint,
-  popupsBoundariesElement,
-  popupsScrollableElement,
-  providerFactory,
-  dispatchAnalyticsEvent
-}) {
-  var _pluginInjectionApi$f, _configWithNodeInfo$c, _configWithNodeInfo$c2;
-  const featureFlags = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.featureFlags) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.sharedState.currentState()) || {};
-  const {
-    floatingToolbarState,
-    editorDisabledState
-  } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorDisabled']);
-  const {
-    configWithNodeInfo,
-    floatingToolbarData
-  } = floatingToolbarState !== null && floatingToolbarState !== void 0 ? floatingToolbarState : {};
-  if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
-    return null;
-  }
-  const {
-    config,
-    node
-  } = configWithNodeInfo;
-  const {
-    title,
-    getDomRef = getDomRefFromSelection,
-    items,
-    align = 'center',
-    className = '',
-    height,
-    width,
-    zIndex,
-    offset = [0, 12],
-    forcePlacement,
-    preventPopupOverflow,
-    onPositionCalculated,
-    absoluteOffset = {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0
-    },
-    focusTrap
-  } = config;
-  const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-  if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
-    return null;
-  }
-  let customPositionCalculation;
-  const toolbarItems = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.copyButton.actions.processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions.hoverDecoration);
-  if (onPositionCalculated) {
-    customPositionCalculation = nextPos => {
-      return onPositionCalculated(editorView, nextPos);
-    };
-  }
-  const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
-
-  // Confirm dialog
-  const {
-    confirmDialogForItem
-  } = floatingToolbarData || {};
-  const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
-  const scrollable = config.scrollable;
-  const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
-    component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
-    componentId: camelCase(title),
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    fallbackComponent: null
-  }, /*#__PURE__*/React.createElement(Popup, {
-    ariaLabel: title,
-    offset: offset,
-    target: targetRef,
-    alignY: "bottom",
-    forcePlacement: forcePlacement,
-    fitHeight: height,
-    fitWidth: width,
-    absoluteOffset: absoluteOffset,
-    alignX: align,
-    stick: true,
-    zIndex: zIndex,
-    mountTo: popupsMountPoint,
-    boundariesElement: popupsBoundariesElement,
-    scrollableElement: popupsScrollableElement,
-    onPositionCalculated: customPositionCalculation,
-    style: scrollable ? {
-      maxWidth: '100%'
-    } : {},
-    focusTrap: focusTrap,
-    preventOverflow: preventPopupOverflow
-  }, /*#__PURE__*/React.createElement(WithProviders, {
-    providerFactory: providerFactory,
-    providers: ['extensionProvider'],
-    renderNode: providers => {
-      return /*#__PURE__*/React.createElement(ToolbarLoader, {
-        target: targetRef,
-        items: toolbarItems,
-        node: node,
-        dispatchCommand: dispatchCommand,
-        editorView: editorView,
-        className: className,
-        focusEditor: () => editorView.focus(),
-        providerFactory: providerFactory,
-        popupsMountPoint: popupsMountPoint,
-        popupsBoundariesElement: popupsBoundariesElement,
-        popupsScrollableElement: popupsScrollableElement,
-        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        extensionsProvider: providers.extensionProvider,
-        scrollable: scrollable,
-        featureFlags: featureFlags,
-        api: pluginInjectionApi
-      });
-    }
-  })), /*#__PURE__*/React.createElement(ConfirmationModal, {
-    testId: "ak-floating-toolbar-confirmation-modal",
-    options: confirmDialogOptions,
-    onConfirm: (isChecked = false) => {
-      if (!!confirmDialogOptions.onConfirm) {
-        dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
-      } else {
-        dispatchCommand(confirmButtonItem.onClick);
-      }
-    },
-    onClose: () => {
-      dispatchCommand(hideConfirmDialog());
-      // Need to set focus to Editor here,
-      // As when the Confirmation dialog pop up, and user interacts with the dialog, Editor loses focus.
-      // So when Confirmation dialog is closed, Editor does not have the focus, then cursor goes to the position 1 of the doc,
-      // instead of the cursor position before the dialog pop up.
-      if (!editorView.hasFocus()) {
-        editorView.focus();
-      }
-    }
-  }));
-}
-export default floatingToolbarPlugin;
-
-/**
- *
- * ProseMirror Plugin
- *
- */
-// We throttle update of this plugin with RAF.
-// So from other plugins you will always get the previous state.
-export const pluginKey = new PluginKey('floatingToolbarPluginKey');
-
-/**
- * Clean up floating toolbar configs from undesired properties.
- */
-function sanitizeFloatingToolbarConfig(config) {
-  // Cleanup from non existing node types
-  if (Array.isArray(config.nodeType)) {
-    return {
-      ...config,
-      nodeType: config.nodeType.filter(filterUndefined)
-    };
-  }
-  return config;
-}
-function floatingToolbarPluginFactory(options) {
-  const {
-    floatingToolbarHandlers,
-    providerFactory,
-    getIntl
-  } = options;
-  const intl = getIntl();
-  const getConfigWithNodeInfo = editorState => {
-    const activeConfigs = floatingToolbarHandlers.map(handler => handler(editorState, intl, providerFactory)).filter(filterUndefined).map(config => sanitizeFloatingToolbarConfig(config));
-    const relevantConfig = activeConfigs && getRelevantConfig(editorState.selection, activeConfigs);
-    return relevantConfig;
-  };
-  const apply = (tr, pluginState) => {
-    const newPluginState = {
-      getConfigWithNodeInfo
-    };
-    return newPluginState;
-  };
-  return new SafePlugin({
-    key: pluginKey,
-    state: {
-      init: () => {
-        // Use this point to preload the UI
-        ToolbarLoader.preload();
-        return {
-          getConfigWithNodeInfo
-        };
-      },
-      apply
-    }
-  });
-}

package/dist/es2019/plugins/floating-toolbar/pm-plugins/force-focus/index.js

@@ -1,63 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export const forceFocusStateKey = new PluginKey('forceFocusStatePlugin');
-/**
- * Used in cases where a floating toolbar button opens a submenu which destroys
- * the button, but the user has pressed ESC to close the submenu and focus needs
- * to move back to the button. */
-export default (() => new SafePlugin({
-  key: forceFocusStateKey,
-  state: {
-    init: () => ({
-      selector: null
-    }),
-    apply: (tr, prevState) => {
-      const meta = tr.getMeta(forceFocusStateKey);
-      if (meta && 'selector' in meta) {
-        return {
-          selector: meta.selector
-        };
-      }
-      return prevState;
-    }
-  }
-}));
-
-/**
- * The provided selector should be the floating toolbar button that needs focus.
- */
-export const forceFocusSelector = selector => tr => {
-  return tr.setMeta(forceFocusStateKey, {
-    selector
-  });
-};
-
-/**
- * If a selector is set and the element exists, focus it.
- */
-export function checkShouldForceFocusAndApply(view) {
-  const state = view === null || view === void 0 ? void 0 : view.state;
-  if (state) {
-    const {
-      selector
-    } = forceFocusStateKey.getState(state);
-    if (selector) {
-      const focusableElement = document.querySelector(selector);
-      if (focusableElement) {
-        focusableElement.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-          inline: 'nearest'
-        });
-        focusableElement.focus();
-        const {
-          state: {
-            tr
-          },
-          dispatch
-        } = view;
-        dispatch(forceFocusSelector(null)(tr));
-      }
-    }
-  }
-}

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/commands.js

@@ -1,10 +0,0 @@
-import { createCommand } from './plugin-factory';
-export const showConfirmDialog = buttonIndex => createCommand({
-  type: 'SHOW_CONFIRM_DIALOG',
-  data: {
-    buttonIndex
-  }
-}, tr => tr.setMeta('addToHistory', false));
-export const hideConfirmDialog = () => createCommand({
-  type: 'HIDE_CONFIRM_DIALOG'
-}, tr => tr.setMeta('addToHistory', false));

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-factory.js

@@ -1,8 +0,0 @@
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-import { pluginKey } from './plugin-key';
-import { reducer } from './reducer';
-export const {
-  createPluginState,
-  createCommand,
-  getPluginState
-} = pluginFactory(pluginKey, reducer);

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin-key.js

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

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.js

@@ -1,9 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { pluginKey } from './plugin-key';
-import { createPluginState } from './plugin-factory';
-export const createPlugin = dispatch => {
-  return new SafePlugin({
-    state: createPluginState(dispatch, {}),
-    key: pluginKey
-  });
-};

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/reducer.js

@@ -1,16 +0,0 @@
-export const reducer = (pluginState, action) => {
-  switch (action.type) {
-    case 'SHOW_CONFIRM_DIALOG':
-      return {
-        ...pluginState,
-        confirmDialogForItem: action.data.buttonIndex
-      };
-    case 'HIDE_CONFIRM_DIALOG':
-      return {
-        ...pluginState,
-        confirmDialogForItem: undefined
-      };
-    default:
-      return pluginState;
-  }
-};

package/dist/es2019/plugins/floating-toolbar/pm-plugins/toolbar-data/types.js

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

package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
-import Button from '@atlaskit/button/standard-button';
-import { Checkbox } from '@atlaskit/checkbox';
-import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
-import messages from './messages';
-export const CheckboxModal = props => {
-  var _options$getChildrenI;
-  const [isChecked, setCheckbox] = useState(false);
-  const {
-    onConfirm,
-    onClose,
-    options,
-    intl: {
-      formatMessage
-    },
-    testId
-  } = props;
-  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
-  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
-  const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
-  const checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
-  const childrenInfo = options === null || options === void 0 ? void 0 : (_options$getChildrenI = options.getChildrenInfo) === null || _options$getChildrenI === void 0 ? void 0 : _options$getChildrenI.call(options);
-  const ListComponent = ({
-    nodes
-  }) => {
-    if (nodes.length === 0) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement("ul", null, nodes.map(node => /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
-      key: node.id
-    }))));
-  };
-  const ListItem = props => {
-    const {
-      id,
-      name,
-      amount
-    } = props;
-    return /*#__PURE__*/React.createElement("li", {
-      id: id
-    }, formatMessage(messages.confirmModalListUnit, {
-      name,
-      amount
-    }));
-  };
-  return /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
-    appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), !!(childrenInfo !== null && childrenInfo !== void 0 && childrenInfo.length) && /*#__PURE__*/React.createElement(ListComponent, {
-    nodes: childrenInfo
-  }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
-    isChecked: isChecked,
-    onChange: () => setCheckbox(!isChecked),
-    label: checkboxlabel,
-    testId: testId ? `${testId}-checkbox` : undefined
-  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
-    onClick: onClose,
-    testId: testId ? `${testId}-cancel-button` : undefined
-  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    appearance: "warning",
-    onClick: () => {
-      onConfirm(isChecked);
-      onClose();
-    },
-    testId: testId ? `${testId}-confirm-button` : undefined
-  }, okButtonLabel)));
-};

package/dist/es2019/plugins/floating-toolbar/ui/ConfirmationModal.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { injectIntl } from 'react-intl-next';
-import { SimpleModal } from './SimpleModal';
-import { CheckboxModal } from './CheckboxModal';
-import { ModalTransition } from '@atlaskit/modal-dialog';
-const ConfirmationModalImpl = props => {
-  const {
-    options
-  } = props;
-  const renderModel = (isReferentialityDialog = false) => isReferentialityDialog ? /*#__PURE__*/React.createElement(CheckboxModal, props) : /*#__PURE__*/React.createElement(SimpleModal, props);
-  return options ? /*#__PURE__*/React.createElement(ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
-};
-export const ConfirmationModal = injectIntl(ConfirmationModalImpl);