@atlaskit/editor-plugin-card 0.1.0

package/dist/es2019/toolbar.js

@@ -0,0 +1,359 @@
+import React from 'react';
+import { NodeSelection } from 'prosemirror-state';
+import { findDomRefAtPos, removeSelectedNode } from 'prosemirror-utils';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, buildOpenedSettingsPayload, buildVisitedLinkPayload, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { buildLayoutButtons, commandWithMetadata } from '@atlaskit/editor-common/card';
+import commonMessages, { linkMessages, linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atlaskit/editor-common/styles';
+import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import CogIcon from '@atlaskit/icon/glyph/editor/settings';
+import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
+import OpenIcon from '@atlaskit/icon/glyph/shortcut';
+import { changeSelectedCardToText } from './pm-plugins/doc';
+import { pluginKey } from './pm-plugins/main';
+import { buildEditLinkToolbar, editDatasource, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
+import { SmallerEditIcon } from './ui/SmallerEditIcon';
+import { appearanceForNodeType, displayInfoForCard, findCardInfo, titleUrlPairFromNode } from './utils';
+export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
+  if (!(state.selection instanceof NodeSelection)) {
+    return false;
+  }
+  const type = state.selection.node.type.name;
+  const payload = {
+    action: ACTION.DELETED,
+    actionSubject: ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR,
+      displayMode: type
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+  if (dispatch) {
+    const {
+      tr
+    } = state;
+    removeSelectedNode(tr);
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
+  }
+  return true;
+}, {
+  action: ACTION.DELETED
+});
+export const visitCardLink = editorAnalyticsApi => (state, dispatch) => {
+  if (!(state.selection instanceof NodeSelection)) {
+    return false;
+  }
+  const {
+    type
+  } = state.selection.node;
+  const {
+    url
+  } = titleUrlPairFromNode(state.selection.node);
+
+  // All card links should open in the same tab per https://product-fabric.atlassian.net/browse/MS-1583.
+  // We are in edit mode here, open the smart card URL in a new window.
+  window.open(url);
+  if (dispatch) {
+    const {
+      tr
+    } = state;
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildVisitedLinkPayload(type.name))(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const openLinkSettings = editorAnalyticsApi => (state, dispatch) => {
+  if (!(state.selection instanceof NodeSelection)) {
+    return false;
+  }
+  window.open('https://id.atlassian.com/manage-profile/link-preferences');
+  if (dispatch) {
+    const {
+      tr,
+      selection: {
+        node: {
+          type
+        }
+      }
+    } = state;
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildOpenedSettingsPayload(type.name))(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerOptions, pluginInjectionApi) => {
+  return (state, intl, providerFactory) => {
+    const {
+      inlineCard,
+      blockCard,
+      embedCard
+    } = state.schema.nodes;
+    const nodeType = [inlineCard, blockCard, embedCard];
+    const pluginState = pluginKey.getState(state);
+    if (!(state.selection instanceof NodeSelection)) {
+      return;
+    }
+    const selectedNode = state.selection.node;
+    if (!selectedNode) {
+      return;
+    }
+    const isEmbedCard = appearanceForNodeType(selectedNode.type) === 'embed';
+
+    /* add an offset to embeds due to extra padding */
+    const toolbarOffset = isEmbedCard ? {
+      offset: [0, 24]
+    } : {};
+
+    // Applies padding override for when link picker is currently displayed
+    const className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
+
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+    const {
+      lpLinkPicker,
+      lpLinkPickerFocusTrap,
+      preventPopupOverflow
+    } = featureFlags;
+    const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    const isLinkPickerEnabled = !!lpLinkPicker;
+    return {
+      title: intl.formatMessage(messages.card),
+      className,
+      nodeType,
+      preventPopupOverflow,
+      ...toolbarOffset,
+      getDomRef: view => {
+        const element = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+        if (!element) {
+          return undefined;
+        }
+        if (isEmbedCard) {
+          return element.querySelector(`.${richMediaClassName}`);
+        }
+        return element;
+      },
+      items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
+      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
+      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar),
+      ...editLinkToolbarConfig(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled)
+    };
+  };
+};
+const unlinkCard = (node, state, editorAnalyticsApi) => {
+  const displayInfo = displayInfoForCard(node, findCardInfo(state));
+  const text = displayInfo.title || displayInfo.url;
+  if (text) {
+    return commandWithMetadata(changeSelectedCardToText(text, editorAnalyticsApi), {
+      action: ACTION.UNLINK
+    });
+  }
+  return () => false;
+};
+const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, analyticsApi, cardOptions) => {
+  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
+};
+const withToolbarMetadata = command => commandWithMetadata(command, {
+  inputMethod: INPUT_METHOD.FLOATING_TB
+});
+const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker, pluginInjectionApi) => node => {
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4, _pluginInjectionApi$d5, _node$attrs, _node$attrs2, _node$attrs2$datasour;
+  const {
+    url
+  } = titleUrlPairFromNode(node);
+  const {
+    actions: editorAnalyticsApi
+  } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.analytics) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
+  let metadata = {};
+  if (url && !isSafeUrl(url)) {
+    return [];
+  } else {
+    const {
+      title
+    } = displayInfoForCard(node, findCardInfo(state));
+    metadata = {
+      url: url,
+      title: title
+    };
+  }
+  const pluginState = pluginKey.getState(state);
+  const currentAppearance = appearanceForNodeType(node.type);
+  const {
+    hoverDecoration
+  } = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.decorations) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {};
+  const isDatasource = currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
+  const shouldRenderDatasourceToolbar = isDatasource &&
+  // not showing toolbar in mobile for now since not sure what our plans are for it
+  platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : (_node$attrs2$datasour = _node$attrs2.datasource) === null || _node$attrs2$datasour === void 0 ? void 0 : _node$attrs2$datasour.id);
+
+  /* mobile builds toolbar natively using toolbarItems */
+  if (pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar && platform !== 'mobile') {
+    return [buildEditLinkToolbar({
+      providerFactory,
+      linkPicker,
+      node,
+      featureFlags,
+      pluginInjectionApi
+    })];
+  } else if (shouldRenderDatasourceToolbar) {
+    return getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration);
+  } else {
+    const {
+      inlineCard
+    } = state.schema.nodes;
+    const toolbarItems = [{
+      id: 'editor.link.edit',
+      type: 'button',
+      selected: false,
+      metadata: metadata,
+      title: intl.formatMessage(linkToolbarMessages.editLink),
+      showTitle: true,
+      testId: 'link-toolbar-edit-link-button',
+      onClick: editLink(editorAnalyticsApi)
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.link.openLink',
+      type: 'button',
+      icon: OpenIcon,
+      metadata: metadata,
+      className: 'hyperlink-open-link',
+      title: intl.formatMessage(linkMessages.openLink),
+      onClick: visitCardLink(editorAnalyticsApi)
+    }, {
+      type: 'separator'
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }, {
+        type: 'separator'
+      }]
+    }, ...getSettingsButtonGroup(state, featureFlags, intl, editorAnalyticsApi), {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
+    }];
+    if (currentAppearance === 'embed') {
+      var _pluginInjectionApi$d6, _pluginInjectionApi$d7, _pluginInjectionApi$d8;
+      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : (_pluginInjectionApi$d8 = _pluginInjectionApi$d7.analytics) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.actions, cardOptions);
+      if (alignmentOptions.length) {
+        alignmentOptions.push({
+          type: 'separator'
+        });
+      }
+      toolbarItems.unshift(...alignmentOptions);
+    }
+    const {
+      allowBlockCards,
+      allowEmbeds
+    } = cardOptions;
+
+    // This code will be executed only for appearances such as "inline", "block" & "embed"
+    // For url appearance, please see HyperlinkToolbarAppearanceProps
+    if (currentAppearance) {
+      toolbarItems.unshift({
+        type: 'custom',
+        fallback: [],
+        render: editorView => /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+          key: "link-appearance",
+          url: url,
+          intl: intl,
+          currentAppearance: currentAppearance,
+          editorView: editorView,
+          editorState: state,
+          allowEmbeds: allowEmbeds,
+          allowBlockCards: allowBlockCards,
+          platform: platform,
+          editorAnalyticsApi: editorAnalyticsApi,
+          cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.card.actions
+        })
+      }, {
+        type: 'separator'
+      });
+    }
+    return toolbarItems;
+  }
+};
+const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi) => {
+  return node.type === inlineCard ? [{
+    id: 'editor.link.unlink',
+    focusEditoronEnter: true,
+    type: 'button',
+    title: intl.formatMessage(linkToolbarMessages.unlink),
+    icon: UnlinkIcon,
+    onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
+  }, {
+    type: 'separator'
+  }] : [];
+};
+const getSettingsButtonGroup = (state, featureFlags, intl, editorAnalyticsApi) => {
+  const {
+    floatingToolbarLinkSettingsButton
+  } = featureFlags;
+  return floatingToolbarLinkSettingsButton === 'true' ? [{
+    id: 'editor.link.settings',
+    type: 'button',
+    icon: CogIcon,
+    title: intl.formatMessage(linkToolbarMessages.settingsLink),
+    onClick: openLinkSettings(editorAnalyticsApi)
+  }, {
+    type: 'separator'
+  }] : [];
+};
+const getDatasourceButtonGroup = (state, metadata, intl, editorAnalyticsApi, node, hoverDecoration) => {
+  var _node$attrs3;
+  const toolbarItems = [{
+    id: 'editor.edit.datasource',
+    type: 'button',
+    icon: SmallerEditIcon,
+    metadata: metadata,
+    className: 'datasource-edit',
+    title: intl.formatMessage(linkToolbarMessages.editDatasource),
+    onClick: editDatasource(node, editorAnalyticsApi)
+  }];
+  if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
+    toolbarItems.push({
+      type: 'separator'
+    }, {
+      id: 'editor.link.openLink',
+      type: 'button',
+      icon: OpenIcon,
+      metadata: metadata,
+      className: 'hyperlink-open-link',
+      title: intl.formatMessage(linkMessages.openLink),
+      onClick: visitCardLink(editorAnalyticsApi)
+    });
+  }
+  toolbarItems.push({
+    type: 'separator'
+  }, {
+    id: 'editor.link.delete',
+    focusEditoronEnter: true,
+    type: 'button',
+    appearance: 'danger',
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
+  });
+  return toolbarItems;
+};

package/dist/es2019/types.js

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

package/dist/es2019/ui/DatasourceModal/ModalWithState.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { DatasourceModal } from './index';
+const ModalWithState = ({
+  api,
+  editorView
+}) => {
+  const {
+    cardState
+  } = useSharedPluginState(api, ['card']);
+  if (!(cardState !== null && cardState !== void 0 && cardState.showDatasourceModal)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DatasourceModal, {
+    view: editorView,
+    modalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+  });
+};
+export default ModalWithState;

package/dist/es2019/ui/DatasourceModal/index.js

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { NodeSelection } from 'prosemirror-state';
+import { JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
+import { hideDatasourceModal } from '../../pm-plugins/actions';
+import { insertDatasource, updateExistingDatasource } from '../../pm-plugins/doc';
+export const DatasourceModal = ({
+  view,
+  modalType
+}) => {
+  const {
+    dispatch,
+    state
+  } = view;
+  const {
+    selection
+  } = state;
+  const existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  const onClose = useCallback(() => {
+    dispatch(hideDatasourceModal(state.tr));
+  }, [dispatch, state.tr]);
+  const onInsert = useCallback(newAdf => {
+    if (existingNode) {
+      updateExistingDatasource(state, existingNode, newAdf, view);
+    } else {
+      insertDatasource(state, newAdf, view);
+    }
+  }, [existingNode, state, view]);
+  if (modalType === 'jira') {
+    var _existingNode$attrs, _tableView$properties;
+    const {
+      id: datasourceId = JIRA_LIST_OF_LINKS_DATASOURCE_ID,
+      parameters,
+      views = []
+    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs = existingNode.attrs) === null || _existingNode$attrs === void 0 ? void 0 : _existingNode$attrs.datasource) || {};
+    const [tableView] = views;
+    const visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(column => column.key);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "jira-config-modal"
+    }, /*#__PURE__*/React.createElement(JiraIssuesConfigModal, {
+      datasourceId: datasourceId,
+      visibleColumnKeys: visibleColumnKeys,
+      parameters: parameters,
+      onCancel: onClose,
+      onInsert: onInsert
+    }));
+  }
+  return null; // null for now until we have modal component that handles other datasources
+};

package/dist/es2019/ui/EditLinkToolbar.js

@@ -0,0 +1,226 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { NodeSelection } from 'prosemirror-state';
+import { ACTION, buildEditLinkPayload, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { commandWithMetadata } from '@atlaskit/editor-common/card';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { HyperlinkAddToolbar as HyperlinkToolbar } from '@atlaskit/editor-common/link';
+import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
+import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '@atlaskit/link-datasource';
+import { hideLinkToolbar, showDatasourceModal, showLinkToolbar } from '../pm-plugins/actions';
+import { changeSelectedCardToLink, updateCard } from '../pm-plugins/doc';
+import { displayInfoForCard, findCardInfo } from '../utils';
+const HyperLinkToolbarWithListeners = withOuterListeners(HyperlinkAddToolbarWithState);
+export function HyperlinkAddToolbarWithState({
+  linkPickerOptions = {},
+  onSubmit,
+  displayText,
+  displayUrl,
+  providerFactory,
+  view,
+  onCancel,
+  invokeMethod,
+  featureFlags,
+  onClose,
+  onEscapeCallback,
+  onClickAwayCallback,
+  pluginInjectionApi
+}) {
+  const {
+    hyperlinkState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink']);
+  return /*#__PURE__*/React.createElement(HyperlinkToolbar, {
+    linkPickerOptions: linkPickerOptions,
+    onSubmit: onSubmit,
+    displayText: displayText,
+    displayUrl: displayUrl,
+    providerFactory: providerFactory,
+    view: view,
+    onCancel: onCancel,
+    invokeMethod: invokeMethod,
+    featureFlags: featureFlags,
+    onClose: onClose,
+    onEscapeCallback: onEscapeCallback,
+    onClickAwayCallback: onClickAwayCallback,
+    hyperlinkPluginState: hyperlinkState
+  });
+}
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class EditLinkToolbar extends React.Component {
+  constructor(...args) {
+    super(...args);
+    /** Focus should move to the 'Edit link' button when the toolbar closes
+     * and not close the floating toolbar.
+     */
+    _defineProperty(this, "handleEsc", e => {
+      var _this$props$forceFocu, _this$props;
+      (_this$props$forceFocu = (_this$props = this.props).forceFocusSelector) === null || _this$props$forceFocu === void 0 ? void 0 : _this$props$forceFocu.call(_this$props, `[aria-label="${linkToolbarMessages.editLink.defaultMessage}"]`, this.props.view);
+    });
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.node !== this.props.node) {
+      this.hideLinkToolbar();
+    }
+  }
+  componentWillUnmount() {
+    this.hideLinkToolbar();
+  }
+  hideLinkToolbar() {
+    const {
+      view
+    } = this.props;
+    view.dispatch(hideLinkToolbar(view.state.tr));
+  }
+  render() {
+    const {
+      linkPickerOptions,
+      providerFactory,
+      url,
+      text,
+      view,
+      featureFlags,
+      onSubmit,
+      pluginInjectionApi
+    } = this.props;
+    return /*#__PURE__*/React.createElement(HyperLinkToolbarWithListeners, {
+      pluginInjectionApi: pluginInjectionApi,
+      view: view,
+      linkPickerOptions: linkPickerOptions,
+      providerFactory: providerFactory,
+      displayUrl: url,
+      displayText: text,
+      handleEscapeKeydown: this.handleEsc
+      // Assumes that the smart card link picker can only ever be invoked by clicking "edit"
+      // via the floating toolbar
+      ,
+      invokeMethod: INPUT_METHOD.FLOATING_TB,
+      featureFlags: featureFlags,
+      onSubmit: (href, title, displayText, inputMethod, analytic) => {
+        this.hideLinkToolbar();
+        if (onSubmit) {
+          onSubmit(href, displayText || title, inputMethod, analytic);
+        }
+      },
+      onEscapeCallback: (state, dispatch) => {
+        const {
+          tr
+        } = state;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.hyperlink.actions.hideLinkToolbar(tr);
+        hideLinkToolbar(tr);
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+        return false;
+      },
+      onClickAwayCallback: (state, dispatch) => {
+        const {
+          tr
+        } = state;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.hyperlink.actions.hideLinkToolbar(tr);
+        if (dispatch) {
+          dispatch(tr);
+          return true;
+        }
+        return false;
+      }
+    });
+  }
+}
+export const editLink = editorAnalyticsApi => (state, dispatch) => {
+  let type = 'hyperlink';
+  if (state.selection instanceof NodeSelection) {
+    type = state.selection.node.type.name;
+  }
+  if (dispatch) {
+    const {
+      tr
+    } = state;
+    showLinkToolbar(tr);
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};
+export const buildEditLinkToolbar = ({
+  providerFactory,
+  node,
+  linkPicker,
+  featureFlags,
+  pluginInjectionApi
+}) => {
+  return {
+    type: 'custom',
+    disableArrowNavigation: true,
+    fallback: [],
+    render: (view, idx) => {
+      var _pluginInjectionApi$d;
+      if (!view || !providerFactory) {
+        return null;
+      }
+      const displayInfo = displayInfoForCard(node, findCardInfo(view.state));
+      return /*#__PURE__*/React.createElement(EditLinkToolbar, {
+        pluginInjectionApi: pluginInjectionApi,
+        key: idx,
+        view: view,
+        linkPickerOptions: linkPicker,
+        providerFactory: providerFactory,
+        url: displayInfo.url,
+        text: displayInfo.title || '',
+        node: node,
+        featureFlags: featureFlags,
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.forceFocusSelector,
+        onSubmit: (newHref, newText, inputMethod, analytic) => {
+          const urlChanged = newHref !== displayInfo.url;
+          const titleChanged = newText !== displayInfo.title;
+
+          // If the title is changed in a smartlink, convert to standard blue hyperlink
+          // (even if the url was also changed) - we don't want to lose the custom title.
+          if (titleChanged) {
+            var _pluginInjectionApi$d2;
+            return commandWithMetadata(changeSelectedCardToLink(newText, newHref, undefined, undefined, undefined, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions), {
+              action: ACTION.UPDATED,
+              inputMethod,
+              sourceEvent: analytic
+            })(view.state, view.dispatch);
+          }
+          if (urlChanged) {
+            // If *only* the url is changed in a smart link, reresolve
+            return updateCard(newHref, analytic)(view.state, view.dispatch);
+          }
+        }
+      });
+    }
+  };
+};
+export const editLinkToolbarConfig = (showLinkingToolbar, lpLinkPicker) => {
+  return showLinkingToolbar ? {
+    height: lpLinkPicker ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX,
+    width: RECENT_SEARCH_WIDTH_IN_PX,
+    forcePlacement: true
+  } : {};
+};
+export const editDatasource = (node, editorAnalyticsApi) => (state, dispatch) => {
+  var _node$attrs;
+  const modalType = ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource.id) === JIRA_LIST_OF_LINKS_DATASOURCE_ID ? 'jira' : undefined;
+  if (dispatch && modalType) {
+    const {
+      tr
+    } = state;
+    showDatasourceModal(modalType)(tr);
+    // editorAnalyticsApi?.attachAnalyticsEvent(
+    //   buildEditLinkPayload(
+    //     type as
+    //       | ACTION_SUBJECT_ID.CARD_INLINE
+    //       | ACTION_SUBJECT_ID.CARD_BLOCK
+    //       | ACTION_SUBJECT_ID.EMBEDS,
+    //   ),
+    // )(tr);
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};

package/dist/es2019/ui/EditorSmartCardEvents.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useSmartLinkEvents } from '@atlaskit/smart-card';
+import { registerSmartCardEvents } from '../pm-plugins/actions';
+export const EditorSmartCardEvents = ({
+  editorView
+}) => {
+  const events = useSmartLinkEvents();
+  useEffect(() => {
+    if (!events) {
+      return;
+    }
+    editorView.dispatch(registerSmartCardEvents(events)(editorView.state.tr));
+  }, [events, editorView]);
+  return null;
+};