@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/cjs/toolbar/index.js

@@ -0,0 +1,523 @@
+"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/toolbar/linking-toolbar-appearance.js

@@ -0,0 +1,100 @@
+"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));
+  }
+};