@atlaskit/editor-plugin-card 0.1.0

package/dist/es2019/nodeviews/embedCard.js

@@ -0,0 +1,370 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import rafSchedule from 'raf-schd';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
+import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { Card } from './genericCard';
+const CardInner = ({
+  pluginInjectionApi,
+  getPosSafely,
+  getLineLength,
+  view,
+  smartCard,
+  eventDispatcher,
+  updateSize,
+  getPos,
+  aspectRatio,
+  allowResizing,
+  hasPreview,
+  heightAlone,
+  cardProps,
+  dispatchAnalyticsEvent
+}) => {
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  const widthStateLineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0;
+  const widthStateWidth = (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0;
+  const pos = getPosSafely();
+  if (pos === undefined) {
+    return null;
+  }
+  const lineLength = getLineLength(view, pos, widthStateLineLength);
+  const containerWidth = isRichMediaInsideOfBlockNode(view, pos) ? lineLength : widthStateWidth;
+  if (!allowResizing || !hasPreview) {
+    // There are two ways `width` and `height` can be defined here:
+    // 1) Either as `heightAlone` as height value and no width
+    // 2) or as `1` for height and aspectRation (defined or a default one) as a width
+    // See above for how aspectRation is calculated.
+    const defaultAspectRatio = DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
+    let richMediaWrapperHeight = 1;
+    let richMediaWrapperWidth = aspectRatio || defaultAspectRatio;
+    if (heightAlone) {
+      richMediaWrapperHeight = heightAlone;
+      richMediaWrapperWidth = undefined;
+    }
+    return /*#__PURE__*/React.createElement(RichMediaWrapper, _extends({}, cardProps, {
+      height: richMediaWrapperHeight,
+      width: richMediaWrapperWidth,
+      nodeType: "embedCard",
+      hasFallbackContainer: hasPreview,
+      lineLength: lineLength,
+      containerWidth: containerWidth
+    }), smartCard);
+  }
+  const displayGrid = (visible, gridType, highlight) => {
+    var _pluginInjectionApi$d;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.grid.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.displayGrid(view)({
+      visible,
+      gridType,
+      highlight: highlight
+    });
+  };
+  return /*#__PURE__*/React.createElement(ResizableEmbedCard, _extends({}, cardProps, {
+    height: heightAlone,
+    aspectRatio: aspectRatio,
+    view: view,
+    getPos: getPos,
+    lineLength: lineLength,
+    gridSize: 12,
+    containerWidth: containerWidth,
+    displayGrid: displayGrid,
+    updateSize: updateSize,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  }), smartCard);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class EmbedCardComponent extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "embedIframeRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "onClick", () => {});
+    _defineProperty(this, "state", {
+      hasPreview: true
+    });
+    _defineProperty(this, "getPosSafely", () => {
+      const {
+        getPos
+      } = this.props;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      try {
+        return getPos();
+      } catch (e) {
+        // Can blow up in rare cases, when node has been removed.
+      }
+    });
+    _defineProperty(this, "onResolve", data => {
+      const {
+        view
+      } = this.props;
+      const {
+        title,
+        url,
+        aspectRatio
+      } = data;
+      const {
+        originalHeight,
+        originalWidth
+      } = this.props.node.attrs;
+      if (aspectRatio && !originalHeight && !originalWidth) {
+        // Assumption here is if ADF already have both height and width set,
+        // we will going to use that later on in this class as aspectRatio
+        // Most likely we dealing with an embed that received aspectRatio via onResolve previously
+        // and now this information already stored in ADF.
+        this.setState({
+          initialAspectRatio: aspectRatio
+        });
+        this.saveOriginalDimensionsAttributes(DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_HEIGHT * aspectRatio);
+      }
+
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      rafSchedule(() => {
+        const pos = this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        return view.dispatch(registerCard({
+          title,
+          url,
+          pos
+        })(view.state.tr));
+      })();
+      try {
+        const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+        const hasPreview = cardContext && cardContext.value.extractors.getPreview(url, this.props.platform);
+        if (!hasPreview) {
+          this.setState({
+            hasPreview: false
+          });
+        }
+      } catch (e) {}
+    });
+    _defineProperty(this, "updateSize", (pctWidth, layout) => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const pos = this.getPosSafely();
+      if (pos === undefined) {
+        return;
+      }
+      const tr = state.tr.setNodeMarkup(pos, undefined, {
+        ...this.props.node.attrs,
+        width: pctWidth,
+        layout
+      });
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+      return true;
+    });
+    _defineProperty(this, "getLineLength", (view, pos, originalLineLength) => {
+      if (typeof pos === 'number' && isRichMediaInsideOfBlockNode(view, pos)) {
+        const $pos = view.state.doc.resolve(pos);
+        const domNode = view.nodeDOM($pos.pos);
+        if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
+          return domNode.parentElement.offsetWidth;
+        }
+        if (domNode instanceof HTMLElement) {
+          return domNode.offsetWidth;
+        }
+      }
+      return originalLineLength;
+    });
+    /**
+     * Even though render is capable of listening and reacting to iframely wrapper iframe sent `resize` events
+     * it's good idea to store latest actual height in ADF, so that when renderer (well, editor as well) is loading
+     * we will show embed window of appropriate size and avoid unnecessary content jumping.
+     */
+    _defineProperty(this, "saveOriginalDimensionsAttributes", (height, width) => {
+      const {
+        view
+      } = this.props;
+
+      // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+      const fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: state => {
+          // eslint-disable-next-line
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      const fakeTableResizeState = fakeTableResizePluginKey.getState(view.state);
+
+      // We are not updating ADF when this function fired while table is resizing.
+      // Changing ADF in the middle of resize will break table resize plugin logic
+      // (tables will be considered different at the end of the drag and cell size won't be stored)
+      // But this is not a big problem, editor user will be seeing latest height anyway (via updated state)
+      // And even if page to be saved with slightly outdated height, renderer is capable of reading latest height value
+      // when embed loads, and so it won't be a problem.
+      if (fakeTableResizeState !== null && fakeTableResizeState !== void 0 && fakeTableResizeState.dragging) {
+        return;
+      }
+      rafSchedule(() => {
+        const pos = this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        view.dispatch(view.state.tr.step(new SetAttrsStep(pos, {
+          originalHeight: height,
+          originalWidth: width
+        })).setMeta('addToHistory', false));
+      })();
+    });
+    _defineProperty(this, "onHeightUpdate", height => {
+      this.setState({
+        liveHeight: height
+      });
+      this.saveOriginalDimensionsAttributes(height, undefined);
+    });
+    _defineProperty(this, "onError", ({
+      err
+    }) => {
+      if (err) {
+        throw err;
+      }
+    });
+  }
+  UNSAFE_componentWillMount() {
+    const {
+      view
+    } = this.props;
+    const scrollContainer = findOverflowScrollParent(view.dom);
+    this.scrollContainer = scrollContainer || undefined;
+  }
+  render() {
+    const {
+      node,
+      cardContext,
+      platform,
+      allowResizing,
+      fullWidthMode,
+      view,
+      dispatchAnalyticsEvent,
+      getPos,
+      pluginInjectionApi
+    } = this.props;
+    let {
+      url,
+      width: pctWidth,
+      layout,
+      originalHeight,
+      originalWidth
+    } = node.attrs;
+    const {
+      hasPreview,
+      liveHeight,
+      initialAspectRatio
+    } = this.state;
+
+    // We don't want to use `originalHeight` when `originalWidth` also present,
+    // since `heightAlone` is defined only when just height is available.
+    let heightAlone = liveHeight !== null && liveHeight !== void 0 ? liveHeight : !originalWidth && originalHeight || undefined;
+    const aspectRatio = !heightAlone && (
+    // No need getting aspectRatio if heightAlone defined already
+    initialAspectRatio ||
+    // If we have initialAspectRatio (coming from iframely) we should go with that
+    originalHeight && originalWidth && originalWidth / originalHeight) ||
+    // If ADF contains both width and height we get ratio from that
+    undefined;
+    const cardProps = {
+      layout,
+      pctWidth,
+      fullWidthMode
+    };
+    const smartCard = /*#__PURE__*/React.createElement(SmartCard, {
+      key: url,
+      url: url,
+      appearance: "embed",
+      onClick: this.onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      showActions: platform === 'web',
+      isFrameVisible: true,
+      inheritDimensions: true,
+      platform: platform,
+      container: this.scrollContainer,
+      embedIframeRef: this.embedIframeRef
+    });
+    const cardInner = /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
+      embedIframeRef: this.embedIframeRef,
+      onHeightUpdate: this.onHeightUpdate
+    }, /*#__PURE__*/React.createElement(CardInner, {
+      pluginInjectionApi: pluginInjectionApi,
+      smartCard: smartCard,
+      hasPreview: hasPreview,
+      getPosSafely: this.getPosSafely,
+      view: view,
+      getLineLength: this.getLineLength,
+      eventDispatcher: this.props.eventDispatcher,
+      updateSize: this.updateSize,
+      getPos: getPos,
+      aspectRatio: aspectRatio,
+      allowResizing: allowResizing,
+      heightAlone: heightAlone,
+      cardProps: cardProps,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }));
+
+    // [WS-2307]: we only render card wrapped into a Provider when the value is ready
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, cardInner) : null);
+  }
+}
+_defineProperty(EmbedCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export class EmbedCard extends ReactNodeView {
+  viewShouldUpdate(nextNode) {
+    if (this.node.attrs !== nextNode.attrs) {
+      return true;
+    }
+    return super.viewShouldUpdate(nextNode);
+  }
+  createDomRef() {
+    const domRef = document.createElement('div');
+    if (this.reactComponentProps.platform !== 'mobile') {
+      // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+      // see also: https://github.com/ProseMirror/prosemirror/issues/884
+      domRef.contentEditable = 'true';
+      domRef.setAttribute('spellcheck', 'false');
+    }
+    return domRef;
+  }
+  render() {
+    const {
+      eventDispatcher,
+      allowResizing,
+      platform,
+      fullWidthMode,
+      dispatchAnalyticsEvent,
+      pluginInjectionApi
+    } = this.reactComponentProps;
+    return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+      node: this.node,
+      view: this.view,
+      eventDispatcher: eventDispatcher,
+      getPos: this.getPos,
+      allowResizing: allowResizing,
+      platform: platform,
+      fullWidthMode: fullWidthMode,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi
+    });
+  }
+}

package/dist/es2019/nodeviews/genericCard.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
+import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
+import { getPluginState } from '../pm-plugins/util/state';
+import { titleUrlPairFromNode } from '../utils';
+export function Card(SmartCardComponent, UnsupportedComponent) {
+  var _class;
+  return _class = class extends React.Component {
+    constructor(...args) {
+      super(...args);
+      _defineProperty(this, "state", {
+        isError: false
+      });
+    }
+    render() {
+      var _getPluginState;
+      const {
+        url
+      } = titleUrlPairFromNode(this.props.node);
+      if (url && !isSafeUrl(url)) {
+        return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+      }
+      if (this.state.isError) {
+        if (url) {
+          return /*#__PURE__*/React.createElement("a", {
+            href: url,
+            onClick: e => {
+              e.preventDefault();
+            }
+          }, url);
+        } else {
+          return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+        }
+      }
+      const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+      const editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+      const analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: {
+          attributes: {
+            location: analyticsEditorAppearance
+          },
+          // Below is added for the future implementation of Linking Platform namespaced analytics context
+          location: analyticsEditorAppearance
+        }
+      }, /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+        key: url,
+        cardContext: cardContext
+      }, this.props)));
+    }
+    componentDidCatch(error) {
+      const maybeAPIError = error;
+      // NB: errors received in this component are propagated by the `@atlaskit/smart-card` component.
+      // Depending on the kind of error, the expectation for this component is to either:
+      // (1) Render a blue link whilst retaining `inlineCard` in the ADF (non-fatal errs);
+      // (2) Render a blue link whilst downgrading to `link` in the ADF (fatal errs).
+
+      if (maybeAPIError.kind && maybeAPIError.kind === 'fatal') {
+        var _pluginInjectionApi$d;
+        this.setState({
+          isError: true
+        });
+        const {
+          view,
+          node,
+          getPos,
+          pluginInjectionApi
+        } = this.props;
+        const {
+          url
+        } = titleUrlPairFromNode(node);
+        if (!getPos || typeof getPos === 'boolean') {
+          return;
+        }
+        changeSelectedCardToLinkFallback(undefined, url, true, node, getPos(), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions)(view.state, view.dispatch);
+        return null;
+      } else {
+        // Otherwise, render a blue link as fallback (above in render()).
+        this.setState({
+          isError: true
+        });
+      }
+    }
+  }, _defineProperty(_class, "contextTypes", {
+    contextAdapter: PropTypes.object
+  }), _class;
+}

package/dist/es2019/nodeviews/inlineCard.js

@@ -0,0 +1,113 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import { Card } from './genericCard';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class InlineCardComponent extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "onClick", () => {});
+    _defineProperty(this, "onResolve", data => {
+      const {
+        getPos,
+        view
+      } = this.props;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      const {
+        title,
+        url
+      } = data;
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      rafSchedule(() => {
+        // prosemirror-bump-fix
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch(registerCard({
+          title,
+          url,
+          pos
+        })(view.state.tr));
+      })();
+    });
+    _defineProperty(this, "onError", data => {
+      const {
+        url,
+        err
+      } = data;
+      if (err) {
+        throw err;
+      }
+      this.onResolve({
+        url
+      });
+    });
+  }
+  UNSAFE_componentWillMount() {
+    const {
+      view
+    } = this.props;
+    const scrollContainer = findOverflowScrollParent(view.dom);
+    this.scrollContainer = scrollContainer || undefined;
+  }
+  render() {
+    const {
+      node,
+      cardContext,
+      showServerActions,
+      useAlternativePreloader
+    } = this.props;
+    const {
+      url,
+      data
+    } = node.attrs;
+    const card = /*#__PURE__*/React.createElement("span", {
+      className: "card"
+    }, /*#__PURE__*/React.createElement(SmartCard, {
+      key: url,
+      url: url,
+      data: data,
+      appearance: "inline",
+      onClick: this.onClick,
+      container: this.scrollContainer,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+      showServerActions: showServerActions
+    }));
+    // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+    // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+    return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, card) : data ? card : null;
+  }
+}
+_defineProperty(InlineCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+const WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
+export function InlineCardNodeView(props) {
+  const {
+    useAlternativePreloader,
+    node,
+    view,
+    getPos,
+    showServerActions
+  } = props;
+  return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    showServerActions: showServerActions,
+    useAlternativePreloader: useAlternativePreloader
+  });
+}