@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/esm/picker-facade.js

@@ -0,0 +1,186 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { isImagePreview } from '@atlaskit/media-picker';
+var PickerFacade = /*#__PURE__*/function () {
+  function PickerFacade(pickerType, config, pickerConfig, analyticsName) {
+    var _this = this;
+    _classCallCheck(this, PickerFacade);
+    _defineProperty(this, "onDragListeners", []);
+    _defineProperty(this, "onStartListeners", []);
+    _defineProperty(this, "eventListeners", {});
+    _defineProperty(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 = 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);
+      });
+    });
+    _defineProperty(this, "subscribeStateChanged", function (file, onStateChanged) {
+      var subscribers = _this.eventListeners[file.id];
+      if (!subscribers) {
+        return;
+      }
+      subscribers.push(onStateChanged);
+    });
+    _defineProperty(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];
+    });
+    _defineProperty(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
+        });
+      });
+    });
+    _defineProperty(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();
+  }
+  _createClass(PickerFacade, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var picker;
+        return _regeneratorRuntime.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;
+}();
+export { PickerFacade as default };

package/dist/esm/plugin.js

@@ -0,0 +1,282 @@
+import React from 'react';
+import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconImages } from '@atlaskit/editor-common/quick-insert';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
+import { ReactMediaInlineNode } from './nodeviews/mediaInline';
+import { ReactMediaNode } from './nodeviews/mediaNodeView';
+import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
+import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
+import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
+import keymapPlugin from './pm-plugins/keymap';
+import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
+import linkingPlugin from './pm-plugins/linking';
+import keymapLinkingPlugin from './pm-plugins/linking/keymap';
+import { stateKey } from './pm-plugins/main';
+import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
+import { floatingToolbar as _floatingToolbar } from './toolbar';
+import { MediaPickerComponents } from './ui/MediaPicker';
+import ToolbarMedia from './ui/ToolbarMedia';
+import { insertMediaAsMediaSingle as _insertMediaAsMediaSingle } from './utils/media-single';
+export { insertMediaSingleNode } from './utils/media-single';
+var MediaPickerFunctionalComponent = function MediaPickerFunctionalComponent(_ref) {
+  var api = _ref.api,
+    editorDomElement = _ref.editorDomElement,
+    appearance = _ref.appearance;
+  var _useSharedPluginState = useSharedPluginState(api, ['media']),
+    mediaState = _useSharedPluginState.mediaState;
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
+export var 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 stateKey.getState(editorState) || null;
+    },
+    actions: {
+      insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod) {
+        var _api$analytics;
+        return _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 = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
+      var withCaption = 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 = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: false
+      };
+      var mediaSingleNode = mediaSingleSpec(mediaSingleOption);
+      return [{
+        name: 'mediaGroup',
+        node: mediaGroup
+      }, {
+        name: 'mediaSingle',
+        node: mediaSingleNode
+      }, {
+        name: 'media',
+        node: media
+      }, {
+        name: 'mediaInline',
+        node: 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 createPlugin(schema, {
+            providerFactory: providerFactory,
+            nodeViews: {
+              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              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 keymapPlugin(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 keymapMediaSinglePlugin(schema);
+          }
+        });
+      }
+      if (options && options.allowAltTextOnImages) {
+        pmPlugins.push({
+          name: 'mediaAltText',
+          plugin: createMediaAltTextPlugin
+        });
+        pmPlugins.push({
+          name: 'mediaAltTextKeymap',
+          plugin: function plugin(_ref6) {
+            var _api$analytics3;
+            var schema = _ref6.schema;
+            return keymapMediaAltTextPlugin(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 linkingPlugin(dispatch);
+          }
+        });
+        pmPlugins.push({
+          name: 'mediaLinkingKeymap',
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
+            return keymapLinkingPlugin(schema);
+          }
+        });
+      }
+      pmPlugins.push({
+        name: 'mediaSelectionHandler',
+        plugin: function plugin() {
+          var mediaSelectionHandlerPlugin = new SafePlugin({
+            key: new PluginKey('mediaSelectionHandlerPlugin'),
+            props: {
+              handleScrollToSelection: function handleScrollToSelection(view) {
+                var selection = view.state.selection;
+                if (!(selection instanceof 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.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.createElement(ToolbarMedia, {
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        api: api
+      });
+    },
+    pluginsOptions: {
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
+        return [{
+          id: 'media',
+          title: formatMessage(messages.mediaFiles),
+          description: formatMessage(messages.mediaFilesDescription),
+          priority: 400,
+          keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconImages, null);
+          },
+          action: function action(insert, state) {
+            var _api$analytics4;
+            var pluginState = pluginKey.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: ACTION.OPENED,
+              actionSubject: ACTION_SUBJECT.PICKER,
+              actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: EVENT_TYPE.UI
+            })(tr);
+            return tr;
+          }
+        }];
+      },
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return _floatingToolbar(state, intl, {
+          providerFactory: providerFactory,
+          allowMediaInline: options && 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/esm/pm-plugins/alt-text/actions.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { getMediaNodeFromSelection, isSelectionMediaSingleNode } from '../../utils/media-common';
+import { createCommand } from './index';
+var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
+  return function (editorAnalyticsAPI) {
+    return withAnalytics(editorAnalyticsAPI, {
+      action: actionType,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
+      eventType: EVENT_TYPE.TRACK
+    })(createCommand(action, transform));
+  };
+};
+export var closeMediaAltTextMenu = createCommand(function (state) {
+  if (isSelectionMediaSingleNode(state)) {
+    return {
+      type: 'closeMediaAltTextMenu'
+    };
+  }
+  return false;
+});
+export var openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, function (state) {
+  if (isSelectionMediaSingleNode(state)) {
+    return {
+      type: 'openMediaAltTextMenu'
+    };
+  }
+  return false;
+}, function (tr) {
+  return tr.setMeta('scrollIntoView', false);
+});
+export var updateAltText = function updateAltText(newAltText) {
+  return createCommand(function (state) {
+    return isSelectionMediaSingleNode(state) ? {
+      type: 'updateAltText'
+    } : false;
+  }, function (tr, state) {
+    var mediaNode = 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/esm/pm-plugins/alt-text/index.js

@@ -0,0 +1,31 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+export var pluginKey = new PluginKey('mediaAltTextPlugin');
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+    onSelectionChanged: function onSelectionChanged(tr, newState) {
+      // dont close alt text for undo/redo transactions (if it comes from prosemirror-history)
+      if (tr.getMeta(pmHistoryPluginKey)) {
+        return newState;
+      }
+      return {
+        isAltTextEditorOpen: false
+      };
+    }
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export var createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch,
+    providerFactory = _ref.providerFactory;
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      isAltTextEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};
+export { createCommand, getPluginState };

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

@@ -0,0 +1,9 @@
+import { addAltText, bindKeymapWithCommand, escape } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { closeMediaAltTextMenu, openMediaAltTextMenu } from './commands';
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
+  var list = {};
+  bindKeymapWithCommand(addAltText.common, openMediaAltTextMenu(editorAnalyticsAPI), list);
+  bindKeymapWithCommand(escape.common, closeMediaAltTextMenu, list);
+  return keymap(list);
+}

package/dist/esm/pm-plugins/alt-text/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  altText: {
+    id: 'fabric.editor.addAltText',
+    defaultMessage: 'Alt text',
+    description: 'Add an alt text for this image'
+  },
+  editAltText: {
+    id: 'fabric.editor.editAltText',
+    defaultMessage: 'Edit alt text',
+    description: 'Edit an alt text for this image'
+  },
+  back: {
+    id: 'fabric.editor.closeAltTextEdit',
+    defaultMessage: 'Back',
+    description: 'Back to toolbar'
+  },
+  clear: {
+    id: 'fabric.editor.clearAltTextEdit',
+    defaultMessage: 'Clear alt text',
+    description: 'Clear alt text'
+  },
+  placeholder: {
+    id: 'fabric.editor.placeholderAltText',
+    defaultMessage: 'Describe this image with alt text',
+    description: 'Describe this image with alt text'
+  },
+  supportText: {
+    id: 'fabric.editor.supportAltText',
+    defaultMessage: 'Alt text is useful for people using screen readers because of visual limitations.',
+    description: 'Alt text is useful for people using screen readers because of visual limitations.'
+  },
+  validationMessage: {
+    id: 'fabric.editor.alttext.validation',
+    defaultMessage: 'Please remove any special characters in alt text.',
+    description: 'Please remove any special characters in alt text. '
+  }
+});

package/dist/esm/pm-plugins/alt-text/reducer.js

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export default (function (state, action) {
+  switch (action.type) {
+    case 'updateAltText':
+      {
+        return _objectSpread({}, state);
+      }
+    case 'openMediaAltTextMenu':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isAltTextEditorOpen: true
+        });
+      }
+    case 'closeMediaAltTextMenu':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isAltTextEditorOpen: false
+        });
+      }
+    default:
+      return state;
+  }
+});

package/dist/esm/pm-plugins/alt-text/types.js

@@ -0,0 +1 @@
+export {};