@atlaskit/editor-core 178.1.1 → 179.0.0

package/dist/esm/plugins/media/pm-plugins/mediaTaskManager.js

@@ -5,21 +5,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 export var MediaTaskManager = /*#__PURE__*/_createClass(function MediaTaskManager() {
   var _this = this;
-
   _classCallCheck(this, MediaTaskManager);
-
   _defineProperty(this, "pendingTask", Promise.resolve(null));
-
   _defineProperty(this, "taskMap", new Map());
-
   _defineProperty(this, "cancelPendingTask", function (id) {
     var task = _this.taskMap.get(id);
-
     if (task && !task.cancelController.signal.aborted) {
       task.cancelController.abort();
     }
   });
-
   _defineProperty(this, "waitForPendingTasks", /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(timeout, lastTask) {
       var chainedPromise, rejectTimeout, timeoutPromise;
@@ -31,24 +25,20 @@ export var MediaTaskManager = /*#__PURE__*/_createClass(function MediaTaskManage
                 _context.next = 2;
                 break;
               }
-
               return _context.abrupt("return", lastTask);
-
             case 2:
               chainedPromise = _this.pendingTask.then(function () {
-                return (// Call ourselves to make sure that no new pending tasks have been
+                return (
+                  // Call ourselves to make sure that no new pending tasks have been
                   // added before the current promise has resolved.
                   _this.waitForPendingTasks(undefined, _this.pendingTask)
                 );
               });
-
               if (timeout) {
                 _context.next = 5;
                 break;
               }
-
               return _context.abrupt("return", chainedPromise);
-
             case 5:
               timeoutPromise = new Promise(function (_resolve, reject) {
                 rejectTimeout = window.setTimeout(function () {
@@ -59,7 +49,6 @@ export var MediaTaskManager = /*#__PURE__*/_createClass(function MediaTaskManage
                 clearTimeout(rejectTimeout);
                 return value;
               })]));
-
             case 7:
             case "end":
               return _context.stop();
@@ -67,50 +56,40 @@ export var MediaTaskManager = /*#__PURE__*/_createClass(function MediaTaskManage
         }
       }, _callee);
     }));
-
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
   }());
-
   _defineProperty(this, "resumePendingTask", function (id) {
     var mediaTask = _this.taskMap.get(id);
-
     if (mediaTask && mediaTask.cancelController.signal.aborted) {
       _this.addPendingTask(mediaTask.task, id);
     }
   });
-
   _defineProperty(this, "addPendingTask", function (task, id) {
     var currentTask = task;
-
     if (id) {
       var cancelController = new AbortController();
       var signal = cancelController.signal;
-
       _this.taskMap.set(id, {
         task: task,
         cancelController: cancelController
       });
-
       currentTask = new Promise(function (resolve) {
         task.then(resolve, resolve).finally(function () {
           _this.taskMap.delete(id);
         });
-
         signal.onabort = function () {
           resolve(null);
         };
       });
-    } // Chain the previous promise with a new one for this media item
-
+    }
 
+    // Chain the previous promise with a new one for this media item
     var currentPendingTask = _this.pendingTask;
-
     var pendingPromise = function pendingPromise() {
       return currentPendingTask;
     };
-
     _this.pendingTask = currentTask.then(pendingPromise, pendingPromise);
     return _this.pendingTask;
   });

package/dist/esm/plugins/media/styles.js

@@ -1,13 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, fileCardImageViewSelectedSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
 export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

package/dist/esm/plugins/media/toolbar/alt-text.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
 import { ToolTipContent, addAltText } from '../../../keymaps';
@@ -38,13 +35,10 @@ export var altTextEditComponent = function altTextEditComponent(options) {
       if (!view) {
         return null;
       }
-
       var mediaNode = getMediaNodeFromSelection(view.state);
-
       if (!mediaNode) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,
         key: idx,

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

@@ -5,19 +5,17 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } f
 import { removeMediaGroupNode } from './utils';
 export var changeInlineToMediaCard = function changeInlineToMediaCard(state, dispatch) {
   var _state$schema$nodes = state.schema.nodes,
-      media = _state$schema$nodes.media,
-      mediaInline = _state$schema$nodes.mediaInline,
-      mediaGroup = _state$schema$nodes.mediaGroup;
+    media = _state$schema$nodes.media,
+    mediaInline = _state$schema$nodes.mediaInline,
+    mediaGroup = _state$schema$nodes.mediaGroup;
   var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
-
   if (!selectedNode) {
     return false;
   }
-
   var _selectedNode$attrs = selectedNode.attrs,
-      id = _selectedNode$attrs.id,
-      type = _selectedNode$attrs.type,
-      collection = _selectedNode$attrs.collection;
+    id = _selectedNode$attrs.id,
+    type = _selectedNode$attrs.type,
+    collection = _selectedNode$attrs.collection;
   var mediaNode = media.createChecked({
     id: id,
     type: type,
@@ -28,7 +26,6 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(state, dis
   var tr = state.tr;
   tr = removeSelectedNode(tr);
   tr = safeInsert(group, nodePos, true)(tr);
-
   if (dispatch) {
     addAnalytics(state, tr, {
       action: ACTION.CHANGED_TYPE,
@@ -41,20 +38,17 @@ export var changeInlineToMediaCard = function changeInlineToMediaCard(state, dis
     });
     dispatch(tr);
   }
-
   return true;
 };
 export var changeMediaCardToInline = function changeMediaCardToInline(state, dispatch) {
   var _state$schema$nodes2 = state.schema.nodes,
-      media = _state$schema$nodes2.media,
-      mediaInline = _state$schema$nodes2.mediaInline,
-      paragraph = _state$schema$nodes2.paragraph;
+    media = _state$schema$nodes2.media,
+    mediaInline = _state$schema$nodes2.mediaInline,
+    paragraph = _state$schema$nodes2.paragraph;
   var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-
   if (!selectedNode || !selectedNode.type === media) {
     return false;
   }
-
   var mediaInlineNode = mediaInline.create({
     id: selectedNode.attrs.id,
     collection: selectedNode.attrs.collection
@@ -65,7 +59,6 @@ export var changeMediaCardToInline = function changeMediaCardToInline(state, dis
   var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
   var tr = removeMediaGroupNode(state);
   tr = safeInsert(node, nodePos, true)(tr);
-
   if (dispatch) {
     addAnalytics(state, tr, {
       action: ACTION.CHANGED_TYPE,
@@ -78,7 +71,6 @@ export var changeMediaCardToInline = function changeMediaCardToInline(state, dis
     });
     dispatch(tr);
   }
-
   return true;
 };
 export var removeInlineCard = function removeInlineCard(state, dispatch) {
@@ -86,9 +78,7 @@ export var removeInlineCard = function removeInlineCard(state, dispatch) {
     if (dispatch) {
       dispatch(removeSelectedNode(state.tr));
     }
-
     return true;
   }
-
   return false;
 };

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

@@ -8,32 +8,27 @@ import ToolbarButton from '../../floating-toolbar/ui/Button';
 import { getSelectedMediaContainerNodeAttrs } from './utils';
 export var FilePreviewItem = function FilePreviewItem(_ref) {
   var mediaPluginState = _ref.mediaPluginState,
-      intl = _ref.intl;
-
+    intl = _ref.intl;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMediaViewerVisible = _useState2[0],
-      setMediaViewerVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMediaViewerVisible = _useState2[0],
+    setMediaViewerVisible = _useState2[1];
   var openMediaViewer = function openMediaViewer() {
     setMediaViewerVisible(true);
   };
-
   var onMediaViewerClose = function onMediaViewerClose() {
     setMediaViewerVisible(false);
   };
-
   var renderMediaViewer = function renderMediaViewer() {
     if (isMediaViewerVisible) {
       var dataSource = {
         list: []
       };
       var selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
-
       if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
         var id = selectedNodeAttrs.id,
-            _selectedNodeAttrs$co = selectedNodeAttrs.collection,
-            collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
         var identifier = {
           id: id,
           mediaItemType: 'file',
@@ -48,10 +43,8 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
         }), document.body);
       }
     }
-
     return null;
   };
-
   var mediaViewer = renderMediaViewer();
   var tooltipContent = intl.formatMessage(messages.preview);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {

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

@@ -1,10 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
@@ -28,25 +25,19 @@ import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
-
 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) {
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [{
@@ -120,7 +111,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }];
   return items;
 };
-
 var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState) {
   var mediaInline = state.schema.nodes.mediaInline;
   var items = [{
@@ -194,25 +184,21 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   }];
   return items;
 };
-
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
-      allowLinking = options.allowLinking,
-      allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
-      allowResizingInTables = options.allowResizingInTables,
-      allowAltTextOnImages = options.allowAltTextOnImages;
+    allowLinking = options.allowLinking,
+    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
+    allowResizingInTables = options.allowResizingInTables,
+    allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
-
   if (allowAdvancedToolBarOptions) {
     toolbarButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables);
-
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
       });
     }
-
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
         type: 'custom',
@@ -222,15 +208,14 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             var editLink = function editLink() {
               if (editorView) {
                 var _state = editorView.state,
-                    dispatch = editorView.dispatch;
+                  dispatch = editorView.dispatch;
                 showLinkingToolbar(_state, dispatch);
               }
             };
-
             var openLink = function openLink() {
               if (editorView) {
                 var _state2 = editorView.state,
-                    dispatch = editorView.dispatch;
+                  dispatch = editorView.dispatch;
                 dispatch(addAnalytics(_state2, _state2.tr, {
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
@@ -240,7 +225,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 return true;
               }
             };
-
             return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
               key: idx,
               editorState: editorView.state,
@@ -251,19 +235,16 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               onOpenLink: openLink
             });
           }
-
           return null;
         }
       });
     }
   }
-
   if (allowAltTextOnImages) {
     toolbarButtons.push(altTextButton(intl, state), {
       type: 'separator'
     });
   }
-
   var removeButton = {
     id: 'editor.media.delete',
     type: 'button',
@@ -290,26 +271,23 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }, removeButton]);
   return items;
 };
-
 export var floatingToolbar = function floatingToolbar(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   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;
+    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;
+    allowLinking = options.allowLinking,
+    allowAltTextOnImages = options.allowAltTextOnImages,
+    providerFactory = options.providerFactory,
+    allowMediaInline = options.allowMediaInline;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
-
   if (!mediaPluginState) {
     return;
   }
-
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
   var baseToolbar = {
     title: 'Media floating controls',
@@ -318,64 +296,49 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       return mediaPluginState.element;
     }
   };
-
   if (allowLinking && mediaLinkingState && mediaLinkingState.visible && shouldShowMediaLinkToolbar(state)) {
     var linkingToolbar = getLinkingToolbar(baseToolbar, mediaLinkingState, state, intl, providerFactory);
-
     if (linkingToolbar) {
       return linkingToolbar;
     }
   }
-
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = getMediaAltTextPluginState(state);
-
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
       return getAltTextToolbar(baseToolbar, {
         altTextValidator: altTextValidator
       });
     }
   }
-
   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 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);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     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);
   } 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);
   }
-
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,
     scrollable: true

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

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import React, { useState, useEffect, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -20,44 +18,35 @@ import { currentMediaNode } from '../utils/current-media-node';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n"])));
 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;
-
+    mediaLinkingState = _ref.mediaLinkingState,
+    intl = _ref.intl,
+    onAddLink = _ref.onAddLink,
+    onEditLink = _ref.onEditLink,
+    onOpenLink = _ref.onOpenLink;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showLinkingControls = _useState2[0],
-      setShowLinkingControls = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showLinkingControls = _useState2[0],
+    setShowLinkingControls = _useState2[1];
   useEffect(function () {
     var _stateKey$getState;
-
     setShowLinkingControls(false);
     var mediaNode = currentMediaNode(editorState);
-
     if (!mediaNode) {
       return;
     }
-
     var mediaClientConfig = (_stateKey$getState = stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
-
     if (!mediaClientConfig) {
       return;
     }
-
     checkMediaType(mediaNode, mediaClientConfig).then(function (mediaType) {
       if (mediaType === 'external' || mediaType === 'image') {
         setShowLinkingControls(true);
       }
     });
   }, [editorState]);
-
   if (!showLinkingControls) {
     return null;
   }
-
   if (mediaLinkingState && mediaLinkingState.editable) {
     var isValidUrl = isSafeUrl(mediaLinkingState.link);
     var title = intl.formatMessage(linkToolbarMessages.editLink);
@@ -86,7 +75,6 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     }), jsx(Separator, null));
   } else {
     var _title = intl.formatMessage(linkToolbarMessages.addLink);
-
     return jsx(Fragment, null, jsx(ToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,

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

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { hideLinkingToolbar, setUrlToMedia, unlink } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
@@ -11,34 +8,27 @@ import MediaLinkingToolbar from '../ui/MediaLinkingToolbar';
 import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../../ui/LinkSearch/ToolbarComponents';
 export function shouldShowMediaLinkToolbar(editorState) {
   var mediaLinkingState = getMediaLinkingState(editorState);
-
   if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
     return false;
   }
-
   var _editorState$schema = editorState.schema,
-      media = _editorState$schema.nodes.media,
-      link = _editorState$schema.marks.link;
+    media = _editorState$schema.nodes.media,
+    link = _editorState$schema.marks.link;
   var node = editorState.doc.nodeAt(mediaLinkingState.mediaPos);
-
   if (!node || node.type !== media) {
     return false;
   }
-
   var _editorState$doc$reso = editorState.doc.resolve(mediaLinkingState.mediaPos),
-      parent = _editorState$doc$reso.parent;
-
+    parent = _editorState$doc$reso.parent;
   return parent && parent.type.allowsMarkType(link);
 }
 export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, mediaLinkingState, state, intl, providerFactory) {
   var link = mediaLinkingState.link,
-      visible = mediaLinkingState.visible,
-      editing = mediaLinkingState.editable,
-      mediaPos = mediaLinkingState.mediaPos;
-
+    visible = mediaLinkingState.visible,
+    editing = mediaLinkingState.editable,
+    mediaPos = mediaLinkingState.mediaPos;
   if (visible && mediaPos !== null) {
     var node = state.doc.nodeAt(mediaPos);
-
     if (node) {
       return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
         height: RECENT_SEARCH_HEIGHT_IN_PX,
@@ -52,7 +42,6 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
             if (!view || !providerFactory) {
               return null;
             }
-
             return /*#__PURE__*/React.createElement(MediaLinkingToolbar, {
               key: idx,
               displayUrl: link,
@@ -66,7 +55,6 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
                 if (href.trim() && meta.inputMethod) {
                   setUrlToMedia(href, meta.inputMethod)(view.state, view.dispatch, view);
                 }
-
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },
               onCancel: function onCancel() {