@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

package/dist/cjs/pm-plugins/media-editor-plugin-factory.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('mediaEditorPlugin');

package/dist/cjs/pm-plugins/mediaTaskManager.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaTaskManager = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var MediaTaskManager = exports.MediaTaskManager = /*#__PURE__*/(0, _createClass2.default)(function MediaTaskManager() {
+  var _this = this;
+  (0, _classCallCheck2.default)(this, MediaTaskManager);
+  (0, _defineProperty2.default)(this, "pendingTask", Promise.resolve(null));
+  (0, _defineProperty2.default)(this, "taskMap", new Map());
+  (0, _defineProperty2.default)(this, "cancelPendingTask", function (id) {
+    var task = _this.taskMap.get(id);
+    if (task && !task.cancelController.signal.aborted) {
+      task.cancelController.abort();
+    }
+  });
+  (0, _defineProperty2.default)(this, "waitForPendingTasks", /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(timeout, lastTask) {
+      var chainedPromise, rejectTimeout, timeoutPromise;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(lastTask && _this.pendingTask === lastTask)) {
+              _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
+                // 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 () {
+                return reject(new Error("Media operations did not finish in ".concat(timeout, " ms")));
+              }, timeout);
+            });
+            return _context.abrupt("return", Promise.race([timeoutPromise, chainedPromise.then(function (value) {
+              clearTimeout(rejectTimeout);
+              return value;
+            })]));
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  (0, _defineProperty2.default)(this, "resumePendingTask", function (id) {
+    var mediaTask = _this.taskMap.get(id);
+    if (mediaTask && mediaTask.cancelController.signal.aborted) {
+      _this.addPendingTask(mediaTask.task, id);
+    }
+  });
+  (0, _defineProperty2.default)(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
+    var currentPendingTask = _this.pendingTask;
+    var pendingPromise = function pendingPromise() {
+      return currentPendingTask;
+    };
+    _this.pendingTask = currentTask.then(pendingPromise, pendingPromise);
+    return _this.pendingTask;
+  });
+});

package/dist/cjs/pm-plugins/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stateKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var stateKey = exports.stateKey = new _state.PluginKey('mediaPlugin');

package/dist/cjs/pm-plugins/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/toolbar/alt-text.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAltTextToolbar = exports.altTextEditComponent = exports.altTextButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _styles = require("@atlaskit/editor-common/styles");
+var _commands = require("../pm-plugins/alt-text/commands");
+var _messages = require("../pm-plugins/alt-text/messages");
+var _AltTextEdit = _interopRequireWildcard(require("../pm-plugins/alt-text/ui/AltTextEdit"));
+var _mediaCommon = require("../utils/media-common");
+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 testId = 'alt-text-edit-button';
+var altTextButton = exports.altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
+  var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(state);
+  var message = mediaNode && mediaNode.attrs.alt ? _messages.messages.editAltText : _messages.messages.altText;
+  var title = intl.formatMessage(message);
+  return {
+    title: title,
+    id: 'editor.media.altText',
+    type: 'button',
+    onClick: (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI),
+    showTitle: true,
+    testId: testId,
+    tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: title,
+      keymap: _keymaps.addAltText
+    })
+  };
+};
+var altTextEditComponent = exports.altTextEditComponent = function altTextEditComponent(options) {
+  return {
+    type: 'custom',
+    fallback: [],
+    disableArrowNavigation: true,
+    render: function render(view, idx) {
+      if (!view) {
+        return null;
+      }
+      var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(view.state);
+      if (!mediaNode) {
+        return null;
+      }
+      /** Focus should move to the 'Alt text' button when the toolbar closes
+       * and not close the floating toolbar.
+       */
+      var handleEsc = function handleEsc() {
+        var _options$forceFocusSe;
+        var tr = view.state.tr,
+          dispatch = view.dispatch;
+        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(testId, "\"]"))(tr);
+        if (newTr) {
+          dispatch(newTr);
+        }
+      };
+      return /*#__PURE__*/_react.default.createElement(_AltTextEdit.default, {
+        view: view,
+        key: idx,
+        value: mediaNode.attrs.alt,
+        altTextValidator: options && options.altTextValidator,
+        onEscape: handleEsc
+      });
+    }
+  };
+};
+var getAltTextToolbar = exports.getAltTextToolbar = function getAltTextToolbar(toolbarBaseConfig, options) {
+  return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
+    width: _AltTextEdit.CONTAINER_WIDTH_IN_PX,
+    className: _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT,
+    items: [altTextEditComponent(options)]
+  });
+};

package/dist/cjs/toolbar/commands.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _analytics2 = require("../utils/analytics");
+var _currentMediaNode = require("../utils/current-media-node");
+var _utils2 = require("./utils");
+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 DEFAULT_BORDER_COLOR = exports.DEFAULT_BORDER_COLOR = '#091e4224';
+var DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_SIZE = 2;
+var changeInlineToMediaCard = exports.changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaInline = _state$schema$nodes.mediaInline,
+      mediaGroup = _state$schema$nodes.mediaGroup;
+    var selectedNode = state.selection instanceof _state.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;
+    var mediaNode = media.createChecked({
+      id: id,
+      type: type,
+      collection: collection
+    });
+    var group = mediaGroup.createChecked({}, mediaNode);
+    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var tr = state.tr;
+    tr = (0, _utils.removeSelectedNode)(tr);
+    tr = (0, _utils.safeInsert)(group, nodePos, true)(tr);
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+        action: _analytics.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
+          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
+        }
+      })(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var changeMediaCardToInline = exports.changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _state$schema$nodes2 = state.schema.nodes,
+      media = _state$schema$nodes2.media,
+      mediaInline = _state$schema$nodes2.mediaInline,
+      paragraph = _state$schema$nodes2.paragraph;
+    var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node;
+
+    // @ts-ignore - [unblock prosemirror bump] redundant check comparing boolean to media
+    if (!selectedNode || !selectedNode.type === media) {
+      return false;
+    }
+    var mediaInlineNode = mediaInline.create({
+      id: selectedNode.attrs.id,
+      collection: selectedNode.attrs.collection
+    });
+    var space = state.schema.text(' ');
+    var content = _model.Fragment.from([mediaInlineNode, space]);
+    var node = paragraph.createChecked({}, content);
+    var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+    var tr = (0, _utils2.removeMediaGroupNode)(state);
+    tr = (0, _utils.safeInsert)(node, nodePos, false)(tr);
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+        action: _analytics.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
+          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
+        }
+      })(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var removeInlineCard = exports.removeInlineCard = function removeInlineCard(state, dispatch) {
+  if ((0, _utils.isNodeSelection)(state.selection)) {
+    if (dispatch) {
+      dispatch((0, _utils.removeSelectedNode)(state.tr));
+    }
+    return true;
+  }
+  return false;
+};
+var toggleBorderMark = exports.toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+    if (!nodeWithPos) {
+      return false;
+    }
+    var node = nodeWithPos.node,
+      pos = nodeWithPos.pos;
+    var borderMark = node.marks.find(function (m) {
+      return m.type.name === 'border';
+    });
+    var marks = node.marks.filter(function (m) {
+      return m.type.name !== 'border';
+    }).concat(borderMark ? [] : state.schema.marks.border.create({
+      color: DEFAULT_BORDER_COLOR,
+      size: DEFAULT_BORDER_SIZE
+    }));
+    var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+    tr.setMeta('scrollIntoView', false);
+    if (state.selection instanceof _state.NodeSelection) {
+      if (state.selection.$anchor.pos === state.selection.from) {
+        tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
+      }
+    }
+    if (dispatch) {
+      if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.DELETED,
+          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            previousColor: borderMark.attrs.color,
+            previousSize: borderMark.attrs.size
+          }
+        })(tr);
+      } else {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.ADDED,
+          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            color: DEFAULT_BORDER_COLOR,
+            size: DEFAULT_BORDER_SIZE
+          }
+        })(tr);
+      }
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyticsAPI) {
+  return function (attrs) {
+    return function (state, dispatch) {
+      var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+      var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(state);
+      if (!nodeWithPos) {
+        return false;
+      }
+      var node = nodeWithPos.node,
+        pos = nodeWithPos.pos;
+      var borderMark = (_node$marks$find = node.marks.find(function (m) {
+        return m.type.name === 'border';
+      })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+      var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
+      var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
+      var marks = node.marks.filter(function (m) {
+        return m.type.name !== 'border';
+      }).concat(state.schema.marks.border.create({
+        color: color,
+        size: size
+      }));
+      var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+      tr.setMeta('scrollIntoView', false);
+      if (state.selection instanceof _state.NodeSelection) {
+        if (state.selection.$anchor.pos === state.selection.from) {
+          tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
+        }
+      }
+      if (dispatch) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.UPDATED,
+          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
+            previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
+            newColor: color,
+            newSize: size
+          }
+        })(tr);
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
+  return function (width, validation, layout) {
+    return function (state, dispatch) {
+      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+      if (!selectedMediaSingleNode) {
+        return false;
+      }
+      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+        width: width,
+        widthType: 'pixel',
+        layout: layout
+      }));
+      tr.setMeta('scrollIntoView', false);
+      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+      var payload = (0, _analytics2.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
+        width: width,
+        layout: layout,
+        validation: validation,
+        parentNode: parentNodeType
+      });
+      if (payload) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      }
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};

package/dist/cjs/toolbar/filePreviewItem.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilePreviewItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
+var _mediaUi = require("@atlaskit/media-ui");
+var _mediaViewer = require("@atlaskit/media-viewer");
+var _utils = 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; }
+var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
+  var mediaPluginState = _ref.mediaPluginState,
+    intl = _ref.intl;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_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 selectedNodeAttrs = (0, _utils.getSelectedMediaContainerNodeAttrs)(mediaPluginState);
+      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+        var id = selectedNodeAttrs.id,
+          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+        var identifier = {
+          id: id,
+          mediaItemType: 'file',
+          collectionName: collection
+        };
+        return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+          collectionName: collection,
+          items: [],
+          mediaClientConfig: mediaPluginState.mediaClientConfig,
+          selectedItem: identifier,
+          onClose: onMediaViewerClose
+        }), document.body);
+      }
+    }
+    return null;
+  };
+  var mediaViewer = renderMediaViewer();
+  var tooltipContent = intl.formatMessage(_mediaUi.messages.preview);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    testId: "file-preview-toolbar-button",
+    key: "editor.media.card.preview",
+    onClick: openMediaViewer,
+    icon: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
+      label: "file preview"
+    }),
+    tooltipContent: tooltipContent
+  }), mediaViewer);
+};

package/dist/cjs/toolbar/imageBorder.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowImageBorder = shouldShowImageBorder;
+var _currentMediaNode = require("../utils/current-media-node");
+function shouldShowImageBorder(editorState) {
+  var border = editorState.schema.marks.border;
+  if (!border) {
+    return false;
+  }
+  var nodeWithPos = (0, _currentMediaNode.currentMediaNodeWithPos)(editorState);
+  if (!nodeWithPos) {
+    return false;
+  }
+  var _editorState$doc$reso = editorState.doc.resolve(nodeWithPos.pos),
+    parent = _editorState$doc$reso.parent;
+  return parent && parent.type.allowsMarkType(border);
+}