@atlaskit/editor-core 188.3.0 → 188.3.1

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

@@ -1,514 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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) { _defineProperty(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; }
-import React from 'react';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { buildLayoutButtons } from '@atlaskit/editor-common/card';
-import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import commonMessages from '@atlaskit/editor-common/messages';
-import { cardMessages } from '@atlaskit/editor-common/messages';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
-import { messages } from '@atlaskit/media-ui';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { showLinkingToolbar } from '../commands/linking';
-import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
-import { getPluginState as getMediaAltTextPluginState } from '../pm-plugins/alt-text';
-import { getMediaLinkingState } from '../pm-plugins/linking';
-import { stateKey } from '../pm-plugins/plugin-key';
-import ImageBorderItem from '../ui/ImageBorder';
-import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
-import { currentMediaNodeBorderMark } from '../utils/current-media-node';
-import { isVideo } from '../utils/media-single';
-import { altTextButton, getAltTextToolbar } from './alt-text';
-import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
-import { FilePreviewItem } from './filePreviewItem';
-import { shouldShowImageBorder } from './imageBorder';
-import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
-import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
-var remove = function remove(state, dispatch) {
-  if (dispatch) {
-    dispatch(removeSelectedNode(state.tr));
-  }
-  return true;
-};
-var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
-  var tr = 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(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: false,
-      disabled: false,
-      onClick: changeMediaCardToInline(editorAnalyticsAPI),
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(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.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: DownloadIcon,
-    onClick: function onClick() {
-      downloadMedia(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(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: RemoveIcon,
-    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(commonMessages.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(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/React.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: DownloadIcon,
-    onClick: function onClick() {
-      downloadMedia(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(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: RemoveIcon,
-    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(commonMessages.remove),
-    onClick: 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 (shouldShowImageBorder(state)) {
-    toolbarButtons.push({
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        if (!editorView) {
-          return null;
-        }
-        var dispatch = editorView.dispatch,
-          state = editorView.state;
-        var borderMark = currentMediaNodeBorderMark(state);
-        return /*#__PURE__*/React.createElement(ImageBorderItem, {
-          toggleBorder: function toggleBorder() {
-            var _pluginInjectionApi$a;
-            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;
-            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 (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 = getSelectedMediaSingle(state);
-      var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
-      if (selectedNode && selectedNodeMaxWidth && selectedNode.node.attrs.width >= selectedNodeMaxWidth) {
-        isChangingLayoutDisabled = true;
-      }
-    }
-    var layoutButtons = 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(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
-    if (layoutButtons.length) {
-      toolbarButtons.push({
-        type: 'separator'
-      });
-    }
-
-    // Pixel Entry Toolbar Support
-    var selection = state.selection;
-    var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
-    if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing && (!isWithinTable || allowResizingInTables === true)) {
-      var selectedMediaSingleNode = 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) || 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 || akEditorFullWidthLayoutWidth;
-          var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
-          var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
-          var isLegacy = widthType !== 'pixel';
-          var pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
-          // get pos of media node
-          mediaWidth || DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = isLegacy ? pixelWidthFromElement : mediaSingleWidth;
-          return /*#__PURE__*/React.createElement(PixelEntry, {
-            intl: intl,
-            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && isLegacy,
-            mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || 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 = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled);
-              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(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.createElement(FullWidthDisplay, {
-                intl: intl
-              });
-            }
-          };
-          return [fullWidthLabel];
-        }
-        return [sizeInput];
-      }
-      toolbarButtons.push(sizeInput);
-      toolbarButtons.push({
-        type: 'separator'
-      });
-    }
-    if (allowLinking && 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;
-                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: EVENT_TYPE.TRACK,
-                  action: ACTION.VISITED,
-                  actionSubject: ACTION_SUBJECT.MEDIA,
-                  actionSubjectId: ACTION_SUBJECT_ID.LINK
-                })(tr);
-                dispatch(tr);
-                return true;
-              }
-            };
-            return /*#__PURE__*/React.createElement(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(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: RemoveIcon,
-    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(commonMessages.remove),
-    onClick: remove,
-    testId: 'media-toolbar-remove-button'
-  };
-  var items = [].concat(_toConsumableArray(toolbarButtons), [{
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaSingle
-    }, {
-      type: 'separator'
-    }]
-  }, removeButton]);
-  return items;
-};
-export var 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 = stateKey.getState(state);
-  var mediaLinkingState = 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 && shouldShowMediaLinkToolbar(state)) {
-    var linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, pluginInjectionApi, providerFactory);
-    if (linkingToolbar) {
-      return linkingToolbar;
-    }
-  }
-  if (allowAltTextOnImages) {
-    var mediaAltTextPluginState = getMediaAltTextPluginState(state);
-    if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$f;
-      return 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 = findParentNodeOfType(mediaGroup)(state.selection);
-  var selectedNodeType;
-  if (state.selection instanceof 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 = 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(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(MediaSingleNodeSelector));
-      return element || mediaPluginState.element;
-    };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
-  }
-  var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
-    items: items,
-    scrollable: true
-  });
-  if (getBooleanFF('platform.editor.media.extended-resize-experience') && allowResizing) {
-    return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
-      width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
-    });
-  }
-  return toolbarConfig;
-};

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

@@ -1,91 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-/** @jsx jsx */
-import React, { Fragment, useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/react';
-import { isSafeUrl } from '@atlaskit/adf-schema';
-import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
-import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import OpenIcon from '@atlaskit/icon/glyph/shortcut';
-import { stateKey } from '../pm-plugins/plugin-key';
-import { checkMediaType } from '../utils/check-media-type';
-import { currentMediaNode } from '../utils/current-media-node';
-// need this wrapper, need to have 4px between items.
-var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
-export var 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 = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLinkingControls = _useState2[0],
-    setShowLinkingControls = _useState2[1];
-  useEffect(function () {
-    var _stateKey$getState;
-    var mediaNode = currentMediaNode(editorState);
-    if (!mediaNode) {
-      setShowLinkingControls(false);
-      return;
-    }
-    var mediaClientConfig = (_stateKey$getState = stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
-    if (!mediaClientConfig) {
-      setShowLinkingControls(false);
-      return;
-    }
-    checkMediaType(mediaNode, mediaClientConfig).then(function (mediaType) {
-      setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
-    });
-  }, [editorState]);
-  if (!showLinkingControls) {
-    return null;
-  }
-  if (mediaLinkingState && mediaLinkingState.editable) {
-    var isValidUrl = isSafeUrl(mediaLinkingState.link);
-    var title = intl.formatMessage(linkToolbarMessages.editLink);
-    var linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
-    return jsx(Fragment, null, jsx("div", {
-      css: wrapper
-    }, jsx(ToolbarButton, {
-      onClick: onEditLink,
-      title: title,
-      tooltipContent: jsx(ToolTipContent, {
-        description: title,
-        keymap: addLink
-      }),
-      testId: "edit-link-button"
-    }, title)), jsx("div", {
-      css: wrapper
-    }, jsx(Separator, null)), jsx(ToolbarButton, {
-      target: "_blank",
-      href: isValidUrl ? mediaLinkingState.link : undefined,
-      disabled: !isValidUrl,
-      onClick: onOpenLink,
-      title: linkTitle,
-      icon: jsx(OpenIcon, {
-        label: linkTitle
-      }),
-      className: "hyperlink-open-link"
-    }), jsx(Separator, null));
-  } else {
-    var _title = intl.formatMessage(linkToolbarMessages.addLink);
-    return jsx(Fragment, null, jsx(ToolbarButton, {
-      testId: "add-link-button",
-      onClick: onAddLink,
-      title: _title,
-      tooltipContent: jsx(ToolTipContent, {
-        description: _title,
-        keymap: addLink
-      }),
-      icon: jsx(LinkIcon, {
-        label: _title
-      })
-    }), jsx(Separator, null));
-  }
-};