@atlaskit/editor-plugin-card/dist/es2019/nodeviews/toDOM-fixes/embedCard.js

Card plugin for @atlaskit/editor-core

/**
 * Some of these functions and styling are duplicated from their custom node view equivalents
 *
 * WHY?
 * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
 * `@atlaskit/editor-common` from here or it will cause dependency issues.
 *
 * In the long term likely `toDOM` will move back out of `adf-schema` in which
 * case we can consolidate them.
 */
import { embedCard, embedCardWithLocalId } from '@atlaskit/adf-schema';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
function calcMargin(layout) {
  switch (layout) {
    case 'wrap-right':
      return '12px auto 12px 12px';
    case 'wrap-left':
      return '12px 12px 12px auto';
    default:
      return '24px auto';
  }
}

// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
function float(layout) {
  switch (layout) {
    case 'wrap-right':
      return 'right';
    case 'wrap-left':
      return 'left';
    default:
      return 'none';
  }
}

// From `packages/editor/editor-common/src/media-single/constants.ts`
const MEDIA_SINGLE_GUTTER_SIZE = 24;

// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
function calcPxFromPct(pct, lineLength) {
  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
}

// ED-24488: We can't retrieve the editor width from here easily.
// For now we're using the default line length here, but this will be
// incorrect on smaller devices.
const LINE_LENGTH = 760;

// @nodeSpecException:toDOM patch
export const embedCardSpecWithFixedToDOM = () => {
  const embedCardNode = fg('platform_editor_adf_with_localid') ? embedCardWithLocalId : embedCard;
  return {
    ...embedCardNode,
    toDOM: node => {
      const {
        url,
        layout,
        width,
        originalWidth,
        originalHeight
      } = node.attrs;
      const aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
      const attrs = {
        'data-embed-card': '',
        'data-card-url': url,
        'data-layout': layout,
        'data-width': width,
        'data-original-width': originalWidth,
        'data-original-height': originalHeight,
        class: 'embedCardView-content-wrap',
        // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
        style: convertToInlineCss({
          margin: calcMargin(layout),
          width: `${Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH))}px`,
          marginRight: layout === 'align-end' ? '0' : '',
          marginLeft: layout === 'align-start' ? '0' : '',
          float: float(layout)
        }),
        ...(fg('platform_editor_adf_with_localid') ? {
          'data-local-id': node.attrs.localId
        } : {})
      };
      return ['div', attrs,
      // This is the only modification to the embed card `toDOM`
      // This is to match the behaviour of Card which lazy loads
      // and uses just a URL as a fallback
      //
      // To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
      ['a', {
        style: convertToInlineCss({
          padding: `${"var(--ds-space-025, 2px)"} 0px`,
          marginLeft: "var(--ds-space-negative-025, -2px)",
          display: 'inline',
          boxDecorationBreak: 'clone',
          borderRadius: "var(--ds-radius-small, 4px)",
          color: "var(--ds-link, #1868DB)",
          lineHeight: '22px',
          WebkitTransition: '0.1s all ease-in-out',
          transition: '0.1s all ease-in-out',
          userSelect: 'text',
          WebkitUserSelect: 'text',
          msUserSelect: 'text',
          MozUserSelect: 'none' // -moz-user-select
        })
      }, url !== null && url !== void 0 ? url : ''],
      // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
      // The `getHeightDefiningComponent` that defines the height of the element
      ['span', {
        style: convertToInlineCss({
          display: 'block',
          paddingBottom: `calc(${(1 / aspectRatio * 100).toFixed(3)}% + ${"var(--ds-space-400, 32px)"})`
        })
      }]];
    }
  };
};