@atlaskit/editor-core 188.3.0 → 188.3.1

package/dist/cjs/plugins/media/toolbar/index.js

@@ -1,523 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.floatingToolbar = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireDefault(require("react"));
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _card = require("@atlaskit/editor-common/card");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
-var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
-var _state2 = require("@atlaskit/editor-prosemirror/state");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
-var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
-var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
-var _mediaUi = require("@atlaskit/media-ui");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _linking = require("../commands/linking");
-var _styles = require("../nodeviews/styles");
-var _altText = require("../pm-plugins/alt-text");
-var _linking2 = require("../pm-plugins/linking");
-var _pluginKey = require("../pm-plugins/plugin-key");
-var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
-var _PixelEntry = require("../ui/PixelEntry");
-var _currentMediaNode = require("../utils/current-media-node");
-var _mediaSingle2 = require("../utils/media-single");
-var _altText2 = require("./alt-text");
-var _commands = require("./commands");
-var _filePreviewItem = require("./filePreviewItem");
-var _imageBorder = require("./imageBorder");
-var _linking3 = require("./linking");
-var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
-var _utils2 = require("./utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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; }
-var remove = function remove(state, dispatch) {
-  if (dispatch) {
-    dispatch((0, _utils.removeSelectedNode)(state.tr));
-  }
-  return true;
-};
-var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
-  var tr = (0, _utils2.removeMediaGroupNode)(state);
-  if (dispatch) {
-    dispatch(tr);
-  }
-  return true;
-};
-var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
-  var mediaGroup = state.schema.nodes.mediaGroup;
-  var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(_mediaUi.messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(_messages.cardMessages.inline),
-      selected: false,
-      disabled: false,
-      onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI),
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: _download.default,
-    onClick: function onClick() {
-      (0, _utils2.downloadMedia)(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(_mediaUi.messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaGroup
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: handleRemoveMediaGroup,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
-var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
-  var mediaInline = state.schema.nodes.mediaInline;
-  var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(_mediaUi.messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(_messages.cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: _download.default,
-    onClick: function onClick() {
-      (0, _utils2.downloadMedia)(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(_mediaUi.messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: _commands.removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
-var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
-  var _pluginInjectionApi$d;
-  var mediaSingle = state.schema.nodes.mediaSingle;
-  var allowResizing = options.allowResizing,
-    allowLinking = options.allowLinking,
-    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
-    allowResizingInTables = options.allowResizingInTables,
-    allowAltTextOnImages = options.allowAltTextOnImages;
-  var toolbarButtons = [];
-  var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
-    hoverDecoration = _ref.hoverDecoration;
-  if ((0, _imageBorder.shouldShowImageBorder)(state)) {
-    toolbarButtons.push({
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        if (!editorView) {
-          return null;
-        }
-        var dispatch = editorView.dispatch,
-          state = editorView.state;
-        var borderMark = (0, _currentMediaNode.currentMediaNodeBorderMark)(state);
-        return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
-          toggleBorder: function toggleBorder() {
-            var _pluginInjectionApi$a;
-            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
-          },
-          setBorder: function setBorder(attrs) {
-            var _pluginInjectionApi$a2;
-            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
-          },
-          borderMark: borderMark,
-          intl: intl
-        });
-      }
-    });
-    toolbarButtons.push({
-      type: 'separator'
-    });
-  }
-  if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$a3;
-    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
-    var isChangingLayoutDisabled = false;
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
-      var _widthPlugin$sharedSt;
-      var contentWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
-      var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
-      var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
-      if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
-        isChangingLayoutDisabled = true;
-      }
-    }
-    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
-    if (layoutButtons.length) {
-      toolbarButtons.push({
-        type: 'separator'
-      });
-    }
-
-    // Pixel Entry Toolbar Support
-    var selection = state.selection;
-    var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing && (!isWithinTable || allowResizingInTables === true)) {
-      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
-      var sizeInput = {
-        type: 'custom',
-        fallback: [],
-        render: function render(editorView) {
-          var _widthPlugin$sharedSt2, _pluginInjectionApi$m;
-          if (!editorView || !selectedMediaSingleNode) {
-            return null;
-          }
-          var state = editorView.state,
-            dispatch = editorView.dispatch;
-          var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
-          var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
-          if (!selectedMediaNode) {
-            return null;
-          }
-          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
-            mediaSingleWidth = _selectedMediaSingleN.width,
-            widthType = _selectedMediaSingleN.widthType,
-            layout = _selectedMediaSingleN.layout;
-          var _selectedMediaNode$at = selectedMediaNode.attrs,
-            mediaWidth = _selectedMediaNode$at.width,
-            mediaHeight = _selectedMediaNode$at.height;
-          var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media.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 isLegacy = widthType !== 'pixel';
-          var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
-          // get pos of media node
-          mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
-          return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
-            intl: intl,
-            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && isLegacy,
-            mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
-            minWidth: minWidth,
-            maxWidth: maxWidth,
-            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);
-              }
-            },
-            onSubmit: function onSubmit(_ref2) {
-              var _pluginInjectionApi$a4;
-              var width = _ref2.width,
-                validation = _ref2.validation;
-              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled);
-              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
-            },
-            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(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
-            }
-          });
-        }
-      };
-      if (pluginState.isResizing) {
-        // If the image is resizing
-        // then return pixel entry component or full width label as the only toolbar item
-        if (!selectedMediaSingleNode) {
-          return [];
-        }
-        var layout = selectedMediaSingleNode.node.attrs.layout;
-        if (layout === 'full-width') {
-          var fullWidthLabel = {
-            type: 'custom',
-            fallback: [],
-            render: function render() {
-              return /*#__PURE__*/_react.default.createElement(_PixelEntry.FullWidthDisplay, {
-                intl: intl
-              });
-            }
-          };
-          return [fullWidthLabel];
-        }
-        return [sizeInput];
-      }
-      toolbarButtons.push(sizeInput);
-      toolbarButtons.push({
-        type: 'separator'
-      });
-    }
-    if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
-      toolbarButtons.push({
-        type: 'custom',
-        fallback: [],
-        render: function render(editorView, idx) {
-          if (editorView !== null && editorView !== void 0 && editorView.state) {
-            var editLink = function editLink() {
-              if (editorView) {
-                var _state = editorView.state,
-                  dispatch = editorView.dispatch;
-                (0, _linking.showLinkingToolbar)(_state, dispatch);
-              }
-            };
-            var openLink = function openLink() {
-              if (editorView) {
-                var _pluginInjectionApi$a5;
-                var tr = editorView.state.tr,
-                  dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
-                  eventType: _analytics.EVENT_TYPE.TRACK,
-                  action: _analytics.ACTION.VISITED,
-                  actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-                  actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK
-                })(tr);
-                dispatch(tr);
-                return true;
-              }
-            };
-            return /*#__PURE__*/_react.default.createElement(_linkingToolbarAppearance.LinkToolbarAppearance, {
-              key: idx,
-              editorState: editorView.state,
-              intl: intl,
-              mediaLinkingState: mediaLinkingState,
-              onAddLink: editLink,
-              onEditLink: editLink,
-              onOpenLink: openLink
-            });
-          }
-          return null;
-        }
-      });
-    }
-  }
-  if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a6;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
-      type: 'separator'
-    });
-  }
-  var removeButton = {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: remove,
-    testId: 'media-toolbar-remove-button'
-  };
-  var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaSingle
-    }, {
-      type: 'separator'
-    }]
-  }, removeButton]);
-  return items;
-};
-var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
-  var _pluginInjectionApi$d2;
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
-  var _state$schema$nodes = state.schema.nodes,
-    media = _state$schema$nodes.media,
-    mediaInline = _state$schema$nodes.mediaInline,
-    mediaSingle = _state$schema$nodes.mediaSingle,
-    mediaGroup = _state$schema$nodes.mediaGroup;
-  var altTextValidator = options.altTextValidator,
-    allowLinking = options.allowLinking,
-    allowAltTextOnImages = options.allowAltTextOnImages,
-    providerFactory = options.providerFactory,
-    allowMediaInline = options.allowMediaInline,
-    allowResizing = options.allowResizing,
-    getEditorFeatureFlags = options.getEditorFeatureFlags;
-  var mediaPluginState = _pluginKey.stateKey.getState(state);
-  var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref3 = (_pluginInjectionApi$d2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.decorations.actions) !== null && _pluginInjectionApi$d2 !== void 0 ? _pluginInjectionApi$d2 : {},
-    hoverDecoration = _ref3.hoverDecoration;
-  if (!mediaPluginState) {
-    return;
-  }
-  var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
-  var baseToolbar = {
-    title: 'Media floating controls',
-    nodeType: nodeType,
-    getDomRef: function getDomRef() {
-      return mediaPluginState.element;
-    }
-  };
-  if (allowLinking && mediaLinkingState && mediaLinkingState.visible && (0, _linking3.shouldShowMediaLinkToolbar)(state)) {
-    var linkingToolbar = (0, _linking3.getLinkingToolbar)(baseToolbar, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory);
-    if (linkingToolbar) {
-      return linkingToolbar;
-    }
-  }
-  if (allowAltTextOnImages) {
-    var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
-    if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$f;
-      return (0, _altText2.getAltTextToolbar)(baseToolbar, {
-        altTextValidator: altTextValidator,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector
-      });
-    }
-  }
-  var items = [];
-  var parentMediaGroupNode = (0, _utils.findParentNodeOfType)(mediaGroup)(state.selection);
-  var selectedNodeType;
-  if (state.selection instanceof _state2.NodeSelection) {
-    selectedNodeType = state.selection.node.type;
-  }
-  if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a7;
-    var mediaOffset = state.selection.$from.parentOffset + 1;
-    baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele;
-      var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
-      return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
-    };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
-  } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a8;
-    baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele2;
-      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
-      return element || mediaPluginState.element;
-    };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
-  } else {
-    baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele3;
-      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
-      return element || mediaPluginState.element;
-    };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
-  }
-  var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
-    items: items,
-    scrollable: true
-  });
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
-    return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
-      width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
-    });
-  }
-  return toolbarConfig;
-};

package/dist/cjs/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LinkToolbarAppearance = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
-var _adfSchema = require("@atlaskit/adf-schema");
-var _keymaps = require("@atlaskit/editor-common/keymaps");
-var _messages = require("@atlaskit/editor-common/messages");
-var _ui = require("@atlaskit/editor-common/ui");
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/link"));
-var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
-var _pluginKey = require("../pm-plugins/plugin-key");
-var _checkMediaType = require("../utils/check-media-type");
-var _currentMediaNode = require("../utils/current-media-node");
-var _templateObject;
-/** @jsx jsx */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// need this wrapper, need to have 4px between items.
-var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
-var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
-  var editorState = _ref.editorState,
-    mediaLinkingState = _ref.mediaLinkingState,
-    intl = _ref.intl,
-    onAddLink = _ref.onAddLink,
-    onEditLink = _ref.onEditLink,
-    onOpenLink = _ref.onOpenLink;
-  var _useState = (0, _react.useState)(true),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showLinkingControls = _useState2[0],
-    setShowLinkingControls = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var _stateKey$getState;
-    var mediaNode = (0, _currentMediaNode.currentMediaNode)(editorState);
-    if (!mediaNode) {
-      setShowLinkingControls(false);
-      return;
-    }
-    var mediaClientConfig = (_stateKey$getState = _pluginKey.stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
-    if (!mediaClientConfig) {
-      setShowLinkingControls(false);
-      return;
-    }
-    (0, _checkMediaType.checkMediaType)(mediaNode, mediaClientConfig).then(function (mediaType) {
-      setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
-    });
-  }, [editorState]);
-  if (!showLinkingControls) {
-    return null;
-  }
-  if (mediaLinkingState && mediaLinkingState.editable) {
-    var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
-    var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
-    var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
-      css: wrapper
-    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-      onClick: onEditLink,
-      title: title,
-      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
-        description: title,
-        keymap: _keymaps.addLink
-      }),
-      testId: "edit-link-button"
-    }, title)), (0, _react2.jsx)("div", {
-      css: wrapper
-    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-      target: "_blank",
-      href: isValidUrl ? mediaLinkingState.link : undefined,
-      disabled: !isValidUrl,
-      onClick: onOpenLink,
-      title: linkTitle,
-      icon: (0, _react2.jsx)(_shortcut.default, {
-        label: linkTitle
-      }),
-      className: "hyperlink-open-link"
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
-  } else {
-    var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-      testId: "add-link-button",
-      onClick: onAddLink,
-      title: _title,
-      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
-        description: _title,
-        keymap: _keymaps.addLink
-      }),
-      icon: (0, _react2.jsx)(_link.default, {
-        label: _title
-      })
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
-  }
-};