@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/cjs/nodeviews/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.figureWrapper = exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = exports.MediaCardWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _ui = require("@atlaskit/editor-common/ui");
+var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
+var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
+var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
+var figureWrapper = exports.figureWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+var absoluteDiv = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])));
+var forcedDimensions = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n"])));
+var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref) {
+  var dimensions = _ref.dimensions,
+    children = _ref.children,
+    selected = _ref.selected,
+    _ref$borderWidth = _ref.borderWidth,
+    borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
+    onContextMenu = _ref.onContextMenu;
+  var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
+  return (0, _react2.jsx)("div", {
+    "data-testid": "media-card-wrapper",
+    style: {
+      borderColor: "var(--custom-palette-color)",
+      borderWidth: "".concat(calculatedBorderWidth, "px"),
+      borderStyle: 'solid',
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
+    }
+  }, (0, _react2.jsx)("div", {
+    css: forcedDimensions,
+    style: {
+      paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
+    },
+    onContextMenuCapture: onContextMenu
+  }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+    borderColor: "var(--custom-palette-color)"
+  }), (0, _react2.jsx)("div", {
+    css: absoluteDiv
+  }, children)));
+};

package/dist/cjs/nodeviews/types.js

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

package/dist/cjs/picker-facade.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mediaPicker = require("@atlaskit/media-picker");
+var PickerFacade = exports.default = /*#__PURE__*/function () {
+  function PickerFacade(pickerType, config, pickerConfig, analyticsName) {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, PickerFacade);
+    (0, _defineProperty2.default)(this, "onDragListeners", []);
+    (0, _defineProperty2.default)(this, "onStartListeners", []);
+    (0, _defineProperty2.default)(this, "eventListeners", {});
+    (0, _defineProperty2.default)(this, "handleUploadPreviewUpdate", function (event) {
+      var file = event.file,
+        preview = event.preview;
+
+      //check if upload-error was called before upload-preview-update
+      var isErroredFile = _this.erroredFiles.has(file.id);
+      var _ref = (0, _mediaPicker.isImagePreview)(preview) ? preview : {
+          dimensions: undefined,
+          scaleFactor: undefined
+        },
+        dimensions = _ref.dimensions,
+        scaleFactor = _ref.scaleFactor;
+      var state = {
+        id: file.id,
+        fileName: file.name,
+        fileSize: file.size,
+        fileMimeType: file.type,
+        collection: file.collectionName,
+        dimensions: dimensions,
+        scaleFactor: scaleFactor,
+        status: isErroredFile ? 'error' : undefined
+      };
+      _this.eventListeners[file.id] = [];
+      _this.onStartListeners.forEach(function (cb) {
+        return cb(state, function (evt) {
+          return _this.subscribeStateChanged(file, evt);
+        }, _this.analyticsName || _this.pickerType);
+      });
+    });
+    (0, _defineProperty2.default)(this, "subscribeStateChanged", function (file, onStateChanged) {
+      var subscribers = _this.eventListeners[file.id];
+      if (!subscribers) {
+        return;
+      }
+      subscribers.push(onStateChanged);
+    });
+    (0, _defineProperty2.default)(this, "handleUploadError", function (_ref2) {
+      var error = _ref2.error,
+        fileId = _ref2.fileId;
+      var listeners = _this.eventListeners[fileId];
+      _this.erroredFiles.add(fileId);
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(function (cb) {
+        return cb({
+          id: fileId,
+          status: 'error',
+          error: error && {
+            description: error.description,
+            name: error.name
+          }
+        });
+      });
+
+      // remove listeners
+      delete _this.eventListeners[fileId];
+    });
+    (0, _defineProperty2.default)(this, "handleMobileUploadEnd", function (event) {
+      var file = event.file;
+      var listeners = _this.eventListeners[file.id];
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(function (cb) {
+        return cb({
+          id: file.id,
+          status: 'mobile-upload-end',
+          fileMimeType: file.type,
+          collection: file.collectionName,
+          publicId: file.publicId
+        });
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleReady", function (event) {
+      var file = event.file;
+      var listeners = _this.eventListeners[file.id];
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(function (cb) {
+        return cb({
+          id: file.id,
+          status: 'ready'
+        });
+      });
+
+      // remove listeners
+      delete _this.eventListeners[file.id];
+    });
+    this.config = config;
+    this.pickerConfig = pickerConfig;
+    this.pickerType = pickerType;
+    this.analyticsName = analyticsName;
+    this.erroredFiles = new Set();
+  }
+  (0, _createClass2.default)(PickerFacade, [{
+    key: "init",
+    value: function () {
+      var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var picker;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (this.pickerType === 'customMediaPicker') {
+                picker = this.picker = this.pickerConfig;
+              }
+              if (picker) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return", this);
+            case 3:
+              picker.on('upload-preview-update', this.handleUploadPreviewUpdate);
+              picker.on('upload-end', this.handleReady);
+              picker.on('upload-error', this.handleUploadError);
+              picker.on('mobile-upload-end', this.handleMobileUploadEnd);
+              return _context.abrupt("return", this);
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "type",
+    get: function get() {
+      return this.pickerType;
+    }
+  }, {
+    key: "mediaPicker",
+    get: function get() {
+      return this.picker;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var picker = this.picker;
+      if (!picker) {
+        return;
+      }
+      picker.removeAllListeners('upload-preview-update');
+      picker.removeAllListeners('upload-end');
+      picker.removeAllListeners('upload-error');
+      this.onStartListeners = [];
+      this.onDragListeners = [];
+    }
+  }, {
+    key: "setUploadParams",
+    value: function setUploadParams(params) {
+      if (this.picker) {
+        this.picker.setUploadParams(params);
+      }
+    }
+  }, {
+    key: "onNewMedia",
+    value: function onNewMedia(cb) {
+      this.onStartListeners.push(cb);
+    }
+  }, {
+    key: "onDrag",
+    value: function onDrag(cb) {
+      this.onDragListeners.push(cb);
+    }
+  }]);
+  return PickerFacade;
+}();

package/dist/cjs/plugin.js

@@ -0,0 +1,293 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "insertMediaSingleNode", {
+  enumerable: true,
+  get: function get() {
+    return _mediaSingle2.insertMediaSingleNode;
+  }
+});
+exports.mediaPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _mediaCommon = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaGroup = require("./nodeviews/mediaGroup");
+var _mediaInline = require("./nodeviews/mediaInline");
+var _mediaNodeView = require("./nodeviews/mediaNodeView");
+var _mediaSingle = require("./nodeviews/mediaSingle");
+var _altText = require("./pm-plugins/alt-text");
+var _keymap = _interopRequireDefault(require("./pm-plugins/alt-text/keymap"));
+var _keymap2 = _interopRequireDefault(require("./pm-plugins/keymap"));
+var _keymapMediaSingle = _interopRequireDefault(require("./pm-plugins/keymap-media-single"));
+var _linking = _interopRequireDefault(require("./pm-plugins/linking"));
+var _keymap3 = _interopRequireDefault(require("./pm-plugins/linking/keymap"));
+var _main = require("./pm-plugins/main");
+var _toolbar = require("./toolbar");
+var _MediaPicker = require("./ui/MediaPicker");
+var _ToolbarMedia = _interopRequireDefault(require("./ui/ToolbarMedia"));
+var _mediaSingle2 = require("./utils/media-single");
+var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
+  var api = _ref.api,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_MediaPicker.MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
+var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
+  var _api$featureFlags;
+  var _ref2$config = _ref2.config,
+    options = _ref2$config === void 0 ? {} : _ref2$config,
+    api = _ref2.api;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'media',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return _main.stateKey.getState(editorState) || null;
+    },
+    actions: {
+      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod) {
+        var _api$analytics;
+        return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    },
+    nodes: function nodes() {
+      var _ref3 = options || {},
+        _ref3$allowMediaGroup = _ref3.allowMediaGroup,
+        allowMediaGroup = _ref3$allowMediaGroup === void 0 ? true : _ref3$allowMediaGroup,
+        _ref3$allowMediaSingl = _ref3.allowMediaSingle,
+        allowMediaSingle = _ref3$allowMediaSingl === void 0 ? false : _ref3$allowMediaSingl,
+        allowCaptions = _ref3.allowCaptions,
+        mediaFeatureFlags = _ref3.featureFlags;
+      var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
+      var withCaption = (0, _mediaCommon.getMediaFeatureFlag)('captions', mediaFeatureFlags);
+
+      // temporary mapping - we will support captions feature flag until
+      // confluence removes the feature flag support in their code base and
+      // utilizes allowCaptions media prop instead
+      var mappedAllowCaptions = allowCaptions ? allowCaptions : withCaption;
+      var mediaSingleOption = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: false
+      };
+      var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
+      return [{
+        name: 'mediaGroup',
+        node: _adfSchema.mediaGroup
+      }, {
+        name: 'mediaSingle',
+        node: mediaSingleNode
+      }, {
+        name: 'media',
+        node: _adfSchema.media
+      }, {
+        name: 'mediaInline',
+        node: _adfSchema.mediaInline
+      }].filter(function (node) {
+        if (node.name === 'mediaGroup') {
+          return allowMediaGroup;
+        }
+        if (node.name === 'mediaSingle') {
+          return allowMediaSingle;
+        }
+        if (node.name === 'mediaInline') {
+          return allowMediaInline;
+        }
+        return true;
+      });
+    },
+    pmPlugins: function pmPlugins() {
+      var pmPlugins = [{
+        name: 'media',
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema,
+            dispatch = _ref4.dispatch,
+            getIntl = _ref4.getIntl,
+            eventDispatcher = _ref4.eventDispatcher,
+            providerFactory = _ref4.providerFactory,
+            errorReporter = _ref4.errorReporter,
+            portalProviderAPI = _ref4.portalProviderAPI,
+            reactContext = _ref4.reactContext,
+            dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+          return (0, _main.createPlugin)(schema, {
+            providerFactory: providerFactory,
+            nodeViews: {
+              mediaGroup: (0, _mediaGroup.ReactMediaGroupNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaSingle: (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
+              media: (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaInline: (0, _mediaInline.ReactMediaInlineNode)(portalProviderAPI, eventDispatcher, providerFactory, api)
+            },
+            errorReporter: errorReporter,
+            uploadErrorHandler: options && options.uploadErrorHandler,
+            waitForMediaUpload: options && options.waitForMediaUpload,
+            customDropzoneContainer: options && options.customDropzoneContainer,
+            customMediaPicker: options && options.customMediaPicker,
+            allowResizing: !!(options && options.allowResizing)
+          }, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
+        }
+      }, {
+        name: 'mediaKeymap',
+        plugin: function plugin() {
+          var _api$analytics2;
+          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
+        }
+      }];
+      if (options && options.allowMediaSingle) {
+        pmPlugins.push({
+          name: 'mediaSingleKeymap',
+          plugin: function plugin(_ref5) {
+            var schema = _ref5.schema;
+            return (0, _keymapMediaSingle.default)(schema);
+          }
+        });
+      }
+      if (options && options.allowAltTextOnImages) {
+        pmPlugins.push({
+          name: 'mediaAltText',
+          plugin: _altText.createPlugin
+        });
+        pmPlugins.push({
+          name: 'mediaAltTextKeymap',
+          plugin: function plugin(_ref6) {
+            var _api$analytics3;
+            var schema = _ref6.schema;
+            return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+          }
+        });
+      }
+      if (options && options.allowLinking) {
+        pmPlugins.push({
+          name: 'mediaLinking',
+          plugin: function plugin(_ref7) {
+            var dispatch = _ref7.dispatch;
+            return (0, _linking.default)(dispatch);
+          }
+        });
+        pmPlugins.push({
+          name: 'mediaLinkingKeymap',
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
+            return (0, _keymap3.default)(schema);
+          }
+        });
+      }
+      pmPlugins.push({
+        name: 'mediaSelectionHandler',
+        plugin: function plugin() {
+          var mediaSelectionHandlerPlugin = new _safePlugin.SafePlugin({
+            key: new _state.PluginKey('mediaSelectionHandlerPlugin'),
+            props: {
+              handleScrollToSelection: function handleScrollToSelection(view) {
+                var selection = view.state.selection;
+                if (!(selection instanceof _state.NodeSelection) || selection.node.type.name !== 'media') {
+                  return false;
+                }
+                var _view$domAtPos = view.domAtPos(selection.from),
+                  node = _view$domAtPos.node,
+                  offset = _view$domAtPos.offset;
+                if (
+                // Is the media element mounted already?
+                offset === node.childNodes.length) {
+                  // Media is not ready, so stop the scroll request
+                  return true;
+                }
+
+                // Media is ready, keep the scrolling request
+                return false;
+              }
+            }
+          });
+          return mediaSelectionHandlerPlugin;
+        }
+      });
+      return pmPlugins;
+    },
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        appearance = _ref9.appearance;
+      return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
+    },
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        eventDispatcher = _ref10.eventDispatcher,
+        disabled = _ref10.disabled;
+      return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        api: api
+      });
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
+        return [{
+          id: 'media',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.mediaFilesDescription),
+          priority: 400,
+          keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconImages, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics4;
+            var pluginState = _main.stateKey.getState(state);
+            pluginState === null || pluginState === void 0 || pluginState.showMediaPicker();
+            var tr = insert('');
+            api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 || _api$analytics4.actions.attachAnalyticsEvent({
+              action: _analytics.ACTION.OPENED,
+              actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_CLOUD,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.UI
+            })(tr);
+            return tr;
+          }
+        }];
+      },
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return (0, _toolbar.floatingToolbar)(state, intl, {
+          providerFactory: providerFactory,
+          allowMediaInline: options && (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', options.featureFlags),
+          allowResizing: options && options.allowResizing,
+          allowResizingInTables: options && options.allowResizingInTables,
+          allowLinking: options && options.allowLinking,
+          allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
+          allowAltTextOnImages: options && options.allowAltTextOnImages,
+          altTextValidator: options && options.altTextValidator,
+          fullWidthEnabled: options && options.fullWidthEnabled
+        }, api);
+      }
+    }
+  };
+};

package/dist/cjs/pm-plugins/alt-text/actions.js

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

package/dist/cjs/pm-plugins/alt-text/commands.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateAltText = exports.openMediaAltTextMenu = exports.closeMediaAltTextMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _mediaCommon = require("../../utils/media-common");
+var _index = require("./index");
+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 createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
+  return function (editorAnalyticsAPI) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: actionType,
+      actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })((0, _index.createCommand)(action, transform));
+  };
+};
+var closeMediaAltTextMenu = exports.closeMediaAltTextMenu = (0, _index.createCommand)(function (state) {
+  if ((0, _mediaCommon.isSelectionMediaSingleNode)(state)) {
+    return {
+      type: 'closeMediaAltTextMenu'
+    };
+  }
+  return false;
+});
+var openMediaAltTextMenu = exports.openMediaAltTextMenu = createCommandWithAnalytics(_analytics.ACTION.OPENED, function (state) {
+  if ((0, _mediaCommon.isSelectionMediaSingleNode)(state)) {
+    return {
+      type: 'openMediaAltTextMenu'
+    };
+  }
+  return false;
+}, function (tr) {
+  return tr.setMeta('scrollIntoView', false);
+});
+var updateAltText = exports.updateAltText = function updateAltText(newAltText) {
+  return (0, _index.createCommand)(function (state) {
+    return (0, _mediaCommon.isSelectionMediaSingleNode)(state) ? {
+      type: 'updateAltText'
+    } : false;
+  }, function (tr, state) {
+    var mediaNode = (0, _mediaCommon.getMediaNodeFromSelection)(state);
+    var pos = tr.selection.from + 1;
+    if (mediaNode) {
+      tr.setMeta('scrollIntoView', false);
+      tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+        alt: newAltText
+      }));
+    }
+    return tr;
+  });
+};

package/dist/cjs/pm-plugins/alt-text/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.getPluginState = exports.createPlugin = exports.createCommand = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _reducer = _interopRequireDefault(require("./reducer"));
+var pluginKey = exports.pluginKey = new _state.PluginKey('mediaAltTextPlugin');
+var _pluginFactory = (0, _utils.pluginFactory)(pluginKey, _reducer.default, {
+    onSelectionChanged: function onSelectionChanged(tr, newState) {
+      // dont close alt text for undo/redo transactions (if it comes from prosemirror-history)
+      if (tr.getMeta(_utils.pmHistoryPluginKey)) {
+        return newState;
+      }
+      return {
+        isAltTextEditorOpen: false
+      };
+    }
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;
+var createPlugin = exports.createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch,
+    providerFactory = _ref.providerFactory;
+  return new _safePlugin.SafePlugin({
+    state: createPluginState(dispatch, {
+      isAltTextEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};

package/dist/cjs/pm-plugins/alt-text/keymap.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _commands = require("./commands");
+function keymapPlugin(schema, editorAnalyticsAPI) {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addAltText.common, (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.escape.common, _commands.closeMediaAltTextMenu, list);
+  return (0, _keymap.keymap)(list);
+}