@atlaskit/editor-plugin-card 0.1.0

package/dist/es2019/ui/EditorSmartCardEventsNext.js

@@ -0,0 +1,199 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { AnalyticsContext, UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
+import { useSmartLinkLifecycleAnalytics } from '@atlaskit/link-analytics';
+import { registerSmartCardEventsNext } from '../pm-plugins/actions';
+import { getPluginState } from '../pm-plugins/util/state';
+/**
+ * If the metadata is for a history event,
+ * returns undo/redo instead of instead of what fn(metadata) would have otherwise
+ * returned
+ */
+const withHistoryMethod = fn => {
+  return metadata => {
+    const {
+      isUndo,
+      isRedo
+    } = metadata;
+    if (isUndo) {
+      return 'undo';
+    }
+    if (isRedo) {
+      return 'redo';
+    }
+    return fn(metadata);
+  };
+};
+const getMethod = withHistoryMethod(({
+  inputMethod
+}) => {
+  switch (inputMethod) {
+    case INPUT_METHOD.CLIPBOARD:
+      return 'editor_paste';
+    case INPUT_METHOD.FLOATING_TB:
+      return 'editor_floatingToolbar';
+    case INPUT_METHOD.AUTO_DETECT:
+    case INPUT_METHOD.FORMATTING:
+      return 'editor_type';
+    default:
+      return 'unknown';
+  }
+});
+const getUpdateType = withHistoryMethod(({
+  action
+}) => {
+  switch (action) {
+    case ACTION.CHANGED_TYPE:
+      return 'display_update';
+    case ACTION.UPDATED:
+      return 'link_update';
+    default:
+      return 'unknown';
+  }
+});
+const getDeleteType = withHistoryMethod(({
+  action
+}) => {
+  if (action === ACTION.UNLINK) {
+    return 'unlink';
+  }
+  return 'delete';
+});
+const getSourceEventFromMetadata = metadata => {
+  return metadata.sourceEvent instanceof UIAnalyticsEvent ? metadata.sourceEvent : null;
+};
+
+/**
+ * Set display category as `link` if not displaying the link as a smart card
+ */
+const displayCategoryFromDisplay = display => {
+  if (display === 'url') {
+    return 'link';
+  }
+};
+
+/**
+ * Binds the @atlaskit/link-analytics callbacks
+ * to the editor card plugin state events callbacks interfaces
+ */
+export const EventsBinding = ({
+  editorView
+}) => {
+  /**
+   * These callbacks internally use window.requestIdleCallback/requestAnimationFrame
+   * to defer any heavy operations involving network
+   *
+   * The callbacks themselves should not be deferred, they should be called syncronously the moment
+   * the events take place.
+   */
+  const {
+    linkCreated,
+    linkUpdated,
+    linkDeleted
+  } = useSmartLinkLifecycleAnalytics();
+  const events = useMemo(() => {
+    return {
+      created: metadata => {
+        const {
+          url,
+          display,
+          nodeContext
+        } = metadata;
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const creationMethod = getMethod(metadata);
+        linkCreated({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          nodeContext,
+          creationMethod
+        });
+      },
+      updated: metadata => {
+        const {
+          url,
+          display,
+          previousDisplay,
+          nodeContext
+        } = metadata;
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const updateMethod = getMethod(metadata);
+        const updateType = getUpdateType(metadata);
+        linkUpdated({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          previousDisplay,
+          nodeContext,
+          updateMethod,
+          updateType
+        });
+      },
+      deleted: metadata => {
+        const {
+          url,
+          display,
+          nodeContext
+        } = metadata;
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const deleteMethod = getMethod(metadata);
+        const deleteType = getDeleteType(metadata);
+        linkDeleted({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          nodeContext,
+          deleteMethod,
+          deleteType
+        });
+      }
+    };
+  }, [linkCreated, linkUpdated, linkDeleted]);
+  useEffect(() => {
+    editorView.dispatch(registerSmartCardEventsNext(events)(editorView.state.tr));
+  }, [events, editorView]);
+  return null;
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class EditorSmartCardEventsNext extends React.PureComponent {
+  render() {
+    var _getPluginState;
+    const cardContext = this.context.contextAdapter.card;
+
+    /**
+     * The analytics hook needs to be able to communicate with the card context
+     * If we can't access it, don't mount the event bindings
+     * This effectively entirely disables all tracking behaviour
+     */
+    if (!cardContext) {
+      return null;
+    }
+    const editorAppearance = (_getPluginState = getPluginState(this.props.editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+    const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+    const analyticsData = {
+      attributes: {
+        location: analyticsEditorAppearance
+      },
+      // Below is added for the future implementation of Linking Platform namespaced analytic context
+      location: analyticsEditorAppearance
+    };
+    return /*#__PURE__*/React.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: analyticsData
+    }, /*#__PURE__*/React.createElement(EventsBinding, this.props)));
+  }
+}
+_defineProperty(EditorSmartCardEventsNext, "contextTypes", {
+  contextAdapter: PropTypes.object
+});

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -0,0 +1,86 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { LinkToolbarAppearance } from './LinkToolbarAppearance';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class HyperlinkToolbarAppearance extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      supportedUrlsMap: new Map()
+    });
+    _defineProperty(this, "getProvider", async () => {
+      if (this.cardProvider) {
+        return this.cardProvider;
+      }
+      return new Promise(resolve => {
+        const {
+          providerFactory
+        } = this.props;
+        providerFactory.subscribe('cardProvider', async (_, cardProvider) => {
+          if (!cardProvider) {
+            return;
+          }
+          this.cardProvider = await cardProvider;
+          resolve(this.cardProvider);
+        });
+      });
+    });
+    _defineProperty(this, "resolveUrl", async url => {
+      const {
+        supportedUrlsMap
+      } = this.state;
+      if (supportedUrlsMap.has(url)) {
+        return;
+      }
+      let isUrlSupported = false;
+      try {
+        const provider = await this.getProvider();
+        isUrlSupported = await provider.findPattern(url);
+      } catch (error) {
+        isUrlSupported = false;
+      }
+      supportedUrlsMap.set(url, isUrlSupported);
+      this.setState({
+        supportedUrlsMap
+      });
+    });
+    _defineProperty(this, "componentDidMount", () => this.resolveUrl(this.props.url));
+  }
+  // needed so we display the right state on the Toolbar while the same Toolbar
+  // instance is visible and we click other link
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.url !== this.props.url) {
+      this.resolveUrl(nextProps.url);
+    }
+  }
+  render() {
+    const {
+      url,
+      intl,
+      editorView,
+      editorState,
+      cardOptions,
+      platform,
+      editorAnalyticsApi,
+      cardActions
+    } = this.props;
+    const {
+      supportedUrlsMap
+    } = this.state;
+    if (!supportedUrlsMap.get(url)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+      key: "link-appearance",
+      url: url,
+      intl: intl,
+      editorView: editorView,
+      editorState: editorState,
+      allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
+      allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
+      platform: platform,
+      editorAnalyticsApi: editorAnalyticsApi,
+      cardActions: cardActions
+    });
+  }
+}

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

@@ -0,0 +1,114 @@
+/** @jsx jsx */
+import React, { useCallback, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
+import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { B300, N20A, N300 } from '@atlaskit/theme/colors';
+import { setCardLayout } from '../../pm-plugins/actions';
+import { getDatasource } from './utils';
+const toolbarButtonWrapperStyles = css({
+  background: `${`var(--ds-background-neutral, ${N20A})`}`,
+  color: `${`var(--ds-icon, ${N300})`}`,
+  ':hover': {
+    background: `${`var(--ds-background-neutral-hovered, ${B300})`}`,
+    color: `${"var(--ds-icon, white)"} !important`
+  }
+});
+export const LayoutButton = ({
+  onLayoutChange,
+  layout = 'center',
+  intl: {
+    formatMessage
+  },
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  targetElement,
+  testId = 'datasource-table-layout-button'
+}) => {
+  const handleClick = useCallback(() => {
+    onLayoutChange && onLayoutChange(getNextBreakoutMode(layout));
+  }, [layout, onLayoutChange]);
+  const title = useMemo(() => {
+    return formatMessage(getTitle(layout));
+  }, [formatMessage, layout]);
+  if (!targetElement) {
+    return null;
+  }
+  return jsx(Popup, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetElement,
+    alignY: "start",
+    alignX: "end",
+    forcePlacement: true,
+    stick: true,
+    ariaLabel: title
+  }, jsx(ToolbarButton, {
+    testId: testId,
+    css: toolbarButtonWrapperStyles,
+    title: title,
+    onClick: handleClick,
+    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
+      label: title
+    }) : jsx(ExpandIcon, {
+      label: title
+    })
+  }));
+};
+const LayoutButtonWrapper = ({
+  editorView,
+  mountPoint,
+  scrollableElement,
+  boundariesElement,
+  intl,
+  api
+}) => {
+  var _node$attrs, _node$attrs2;
+  const {
+    cardState
+  } = useSharedPluginState(api, ['card']);
+  const {
+    node,
+    pos
+  } = getDatasource(editorView);
+  const {
+    datasourceTableRef,
+    layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center'
+  } = cardState !== null && cardState !== void 0 ? cardState : {};
+  const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
+  const onLayoutChange = layout => {
+    if (pos === undefined) {
+      return;
+    }
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...(node === null || node === void 0 ? void 0 : node.attrs),
+      layout
+    });
+    tr.setMeta('scrollIntoView', false);
+    dispatch(setCardLayout(layout)(tr));
+  };
+  if (!isDatasource) {
+    return null;
+  }
+  return jsx(LayoutButton, {
+    mountPoint: mountPoint,
+    scrollableElement: scrollableElement,
+    boundariesElement: boundariesElement,
+    targetElement: datasourceTableRef,
+    layout: layout,
+    onLayoutChange: onLayoutChange,
+    intl: intl
+  });
+};
+export default injectIntl(LayoutButtonWrapper);

package/dist/es2019/ui/LayoutButton/types.js

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

package/dist/es2019/ui/LayoutButton/utils.js

@@ -0,0 +1,15 @@
+import { findSelectedNodeOfType } from 'prosemirror-utils';
+export const getDatasource = editorView => {
+  var _findSelectedNodeOfTy;
+  const {
+    selection,
+    schema
+  } = editorView.state;
+  const {
+    blockCard
+  } = schema.nodes;
+  return (_findSelectedNodeOfTy = findSelectedNodeOfType([blockCard])(selection)) !== null && _findSelectedNodeOfTy !== void 0 ? _findSelectedNodeOfTy : {
+    node: undefined,
+    pos: undefined
+  };
+};

package/dist/es2019/ui/LinkToolbarAppearance.js

@@ -0,0 +1,118 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Fragment } from 'prosemirror-model';
+import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { commandWithMetadata, getButtonGroupOption, LinkToolbarButtonGroup } from '@atlaskit/editor-common/card';
+import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { isSupportedInParent } from '@atlaskit/editor-common/utils';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class LinkToolbarAppearance extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "renderDropdown", (view, cardContext) => {
+      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3;
+      const {
+        url,
+        intl,
+        currentAppearance,
+        editorState,
+        allowEmbeds,
+        allowBlockCards = true,
+        platform,
+        editorAnalyticsApi,
+        cardActions
+      } = this.props;
+      const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
+      const defaultCommand = () => false;
+      if (url) {
+        var _cardContext$store, _urlState$error;
+        const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+        if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+          return null;
+        }
+      }
+      const isBlockCardLinkSupportedInParent = allowBlockCards ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
+      const isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
+      const embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
+        title: intl.formatMessage(messages.embed),
+        onClick: (_cardActions$setSelec = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _cardActions$setSelec !== void 0 ? _cardActions$setSelec : defaultCommand,
+        selected: currentAppearance === 'embed',
+        hidden: false,
+        testId: 'embed-appearance',
+        disabled: !isEmbedCardLinkSupportedInParent,
+        tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      const blockCardOption = allowBlockCards && {
+        appearance: 'block',
+        title: intl.formatMessage(messages.block),
+        onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
+        selected: currentAppearance === 'block',
+        testId: 'block-appearance',
+        disabled: !isBlockCardLinkSupportedInParent,
+        tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      const options = [{
+        title: intl.formatMessage(messages.url),
+        onClick: commandWithMetadata((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
+          action: ACTION.CHANGED_TYPE
+        }),
+        selected: !currentAppearance,
+        testId: 'url-appearance'
+      }, {
+        appearance: 'inline',
+        title: intl.formatMessage(messages.inline),
+        onClick: (_cardActions$setSelec3 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _cardActions$setSelec3 !== void 0 ? _cardActions$setSelec3 : defaultCommand,
+        selected: currentAppearance === 'inline',
+        testId: 'inline-appearance'
+      }];
+      const dispatchCommand = fn => {
+        fn && fn(editorState, view && view.dispatch);
+        // Refocus the view to ensure the editor has focus
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
+      };
+      if (blockCardOption) {
+        options.push(blockCardOption);
+      }
+      if (embedOption) {
+        options.push(embedOption);
+      }
+      return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+        key: "link-toolbar-button-group",
+        options: options.map(option => getButtonGroupOption(intl, dispatchCommand, {
+          ...option,
+          onClick: commandWithMetadata(option.onClick, {
+            inputMethod: INPUT_METHOD.FLOATING_TB
+          })
+        }))
+      });
+    });
+  }
+  render() {
+    const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+    const {
+      editorView
+    } = this.props;
+    return this.renderDropdown(editorView, cardContext && cardContext.value);
+  }
+}
+_defineProperty(LinkToolbarAppearance, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+const getUnavailableMessage = (state, intl) => {
+  try {
+    const parentNode = state.selection.$from.node(1);
+    const parentName = intl.formatMessage(nodeNames[parentNode.type.name]);
+    const tooltip = intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
+      node: parentName
+    });
+    return tooltip;
+  } catch (e) {
+    return intl.formatMessage(messages.displayOptionUnavailableInParentNode, {
+      node: intl.formatMessage(nodeNames.defaultBlockNode)
+    });
+  }
+};