@atlaskit/editor-plugin-media/dist/cjs/pm-plugins/pixel-resizing/ui/index.js

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PixelEntry = exports.FullWidthDisplay = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _media = require("@atlaskit/editor-common/media");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _compiled = require("@atlaskit/primitives/compiled");
var _commands = require("../../../ui/toolbar/commands");
var _utils2 = require("../../../ui/toolbar/utils");
var _mediaSingle2 = require("../../utils/media-single");
var _commands2 = require("../commands");
var _pixelEntry = require("./pixel-entry");
var _styles = require("./styles");
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; } /**
 * @jsxRuntime classic
 * @jsx jsx
 */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var PixelEntry = exports.PixelEntry = function PixelEntry(_ref) {
  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$f;
  var editorView = _ref.editorView,
    selectedMediaSingleNode = _ref.selectedMediaSingleNode,
    pluginInjectionApi = _ref.pluginInjectionApi,
    intl = _ref.intl,
    pluginState = _ref.pluginState,
    hoverDecoration = _ref.hoverDecoration,
    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
    triggerButtonSelector = _ref.triggerButtonSelector;
  var state = editorView.state,
    dispatch = editorView.dispatch;
  var mediaSingle = state.schema.nodes.mediaSingle;
  var contentWidth = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
  var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
    mediaSingleWidth = _selectedMediaSingleN.width,
    widthType = _selectedMediaSingleN.widthType,
    layout = _selectedMediaSingleN.layout;

  // hasParentNode will return falsey value if selection depth === 0
  var isNested = (0, _utils.hasParentNode)(function (n) {
    return n.type !== state.schema.nodes.doc;
  })(state.selection);
  var updateNodeWithTr = (0, _react.useCallback)(function (width, validation) {
    var _pluginInjectionApi$a;
    var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, isEditorFullWidthEnabled, isNested);
    return (0, _commands.updateMediaSingleWidthTr)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, state, width, validation, 'floatingToolBar', newLayout);
  }, [layout, contentWidth, isEditorFullWidthEnabled, isNested, state, pluginInjectionApi]);
  var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
  if (!selectedMediaNode) {
    return null;
  }
  var _selectedMediaNode$at = selectedMediaNode.attrs,
    mediaWidth = _selectedMediaNode$at.width,
    mediaHeight = _selectedMediaNode$at.height;
  var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
  var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
  var isVideoFile = (0, _mediaSingle2.isVideo)(selectedMediaNode.attrs.__fileMimeType);
  var minWidth = (0, _mediaSingle.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
  var hasPixelType = widthType === 'pixel';
  var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
  // get pos of media node
  mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
  var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
  var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
  return (0, _react2.jsx)(_pixelEntry.PixelEntryComponent, {
    intl: intl,
    width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
    showMigration: !pluginState.isResizing && !hasPixelType,
    mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
    mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
    minWidth: minWidth,
    maxWidth: maxWidth
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onChange: function onChange(valid) {
      if (valid) {
        hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
      } else {
        hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
      }
    }
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onSubmit: function onSubmit(_ref2) {
      var width = _ref2.width,
        validation = _ref2.validation;
      var tr = updateNodeWithTr(width, validation);
      if (tr) {
        dispatch(tr);
      }
    }
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onMigrate: function onMigrate() {
      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
        width: pixelWidthFromElement,
        widthType: 'pixel'
      }));
      tr.setMeta('scrollIntoView', false);
      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
      if (triggerButtonSelector) {
        var newTr = forceFocusSelector && forceFocusSelector(triggerButtonSelector)(tr);
        tr = newTr !== undefined ? newTr : tr;
      }
      dispatch(tr);
    }
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
      var width = _ref3.width,
        validation = _ref3.validation;
      var tr = updateNodeWithTr(width, validation);
      if (setFocus && triggerButtonSelector) {
        var newTr = forceFocusSelector && tr && forceFocusSelector(triggerButtonSelector)(tr);
        tr = newTr !== undefined ? newTr : tr;
      }
      if (tr) {
        return (0, _commands2.closePixelEditorAndSave)(function () {
          return tr;
        })(state, dispatch);
      }
    },
    isViewMode: pluginState.isResizing,
    triggerButtonSelector: triggerButtonSelector,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};
var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay(_ref4) {
  var formatMessage = _ref4.intl.formatMessage;
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    (0, _react2.jsx)("div", {
      css: _styles.pixelSizingFullWidthLabelStyles
    }, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.pixelEntryMessages.fullWidthLabel)))
  );
};