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

Card plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.embedCardSpecWithFixedToDOM = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
 * 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.
 */
// 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`
var MEDIA_SINGLE_GUTTER_SIZE = 24;

// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
function calcPxFromPct(pct, lineLength) {
  var 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.
var LINE_LENGTH = 760;

// @nodeSpecException:toDOM patch
var embedCardSpecWithFixedToDOM = exports.embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM() {
  var embedCardNode = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.embedCardWithLocalId : _adfSchema.embedCard;
  return _objectSpread(_objectSpread({}, embedCardNode), {}, {
    toDOM: function toDOM(node) {
      var _node$attrs = node.attrs,
        url = _node$attrs.url,
        layout = _node$attrs.layout,
        width = _node$attrs.width,
        originalWidth = _node$attrs.originalWidth,
        originalHeight = _node$attrs.originalHeight;
      var aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH / _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT;
      var attrs = _objectSpread({
        '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: (0, _lazyNodeView.convertToInlineCss)({
          margin: calcMargin(layout),
          width: "".concat(Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH)), "px"),
          marginRight: layout === 'align-end' ? '0' : '',
          marginLeft: layout === 'align-start' ? '0' : '',
          float: float(layout)
        })
      }, (0, _platformFeatureFlags.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: (0, _lazyNodeView.convertToInlineCss)({
          padding: "var(--ds-space-025, 2px)".concat(" 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: (0, _lazyNodeView.convertToInlineCss)({
          display: 'block',
          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ", "var(--ds-space-400, 32px)", ")")
        })
      }]];
    }
  });
};