@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.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/cjs/pm-plugins/alt-text/reducer.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@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) { (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 = exports.default = function _default(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/cjs/pm-plugins/alt-text/types.js

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

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MAX_ALT_TEXT_LENGTH = exports.CONTAINER_WIDTH_IN_PX = exports.AltTextEditComponent = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _colors = require("@atlaskit/theme/colors");
+var _commands = require("../commands");
+var _messages = require("../messages");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+/** @jsx jsx */
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
+var MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
+
+var supportText = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  padding: ", " ", ";\n  line-height: 20px;\n  border-top: 1px solid ", ";\n  margin: 0;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(_colors.N30, ")"));
+var container = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
+var inputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+var validationWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: ", " ", "\n    ", " 0;\n  margin: 0 ", " 0 ", ";\n  border-top: 1px solid ", ";\n  align-items: start;\n  flex-direction: column;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border-danger, ".concat(_colors.R400, ")"));
+var buttonWrapper = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+var clearText = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"));
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AltTextEditComponent, _React$Component);
+  var _super = _createSuper(AltTextEditComponent);
+  function AltTextEditComponent(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, AltTextEditComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      showClearTextButton: Boolean(_this.props.value),
+      validationErrors: _this.props.value ? _this.getValidationErrors(_this.props.value) : [],
+      lastValue: _this.props.value
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeMediaAltTextMenu", function () {
+      var view = _this.props.view;
+      (0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dispatchCancelEvent", function (event) {
+      var _this$props = _this.props,
+        view = _this$props.view,
+        onEscape = _this$props.onEscape;
+
+      // We need to pass down the ESCAPE keymap
+      // because when we focus on the Toolbar, Prosemirror blur,
+      // making all keyboard shortcuts not working
+      view.someProp('handleKeyDown', function (fn) {
+        return fn(view, event);
+      });
+      onEscape === null || onEscape === void 0 || onEscape();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateAltText", function (newAltText) {
+      var view = _this.props.view;
+      var newValue = newAltText.length === 0 ? '' : newAltText;
+      (0, _commands.updateAltText)(newValue)(view.state, view.dispatch);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (newAltText) {
+      var validationErrors = _this.getValidationErrors(newAltText);
+      _this.setState({
+        showClearTextButton: Boolean(newAltText),
+        validationErrors: validationErrors,
+        lastValue: newAltText
+      }, function () {
+        if (!validationErrors || !validationErrors.length) {
+          _this.updateAltText(newAltText);
+        }
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnBlur", function () {
+      // Handling the trimming onBlur() because PanelTextInput doesn't sync
+      // defaultValue properly during unmount
+      var value = _this.props.value;
+      var newValue = (_this.state.lastValue || value || '').trim();
+      _this.handleOnChange(newValue);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClearText", function () {
+      _this.handleOnChange('');
+    });
+    var createAnalyticsEvent = props.createAnalyticsEvent;
+    _this.fireCustomAnalytics = (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent);
+    return _this;
+  }
+  (0, _createClass2.default)(AltTextEditComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.prevValue = this.props.value;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.fireAnalytics(_analytics.ACTION.CLOSED);
+      if (!this.prevValue && this.props.value) {
+        this.fireAnalytics(_analytics.ACTION.ADDED);
+      }
+      if (this.prevValue && !this.props.value) {
+        this.fireAnalytics(_analytics.ACTION.CLEARED);
+      }
+      if (this.prevValue && this.prevValue !== this.props.value) {
+        this.fireAnalytics(_analytics.ACTION.EDITED);
+      }
+    }
+  }, {
+    key: "getValidationErrors",
+    value: function getValidationErrors(value) {
+      var altTextValidator = this.props.altTextValidator;
+      if (value && typeof altTextValidator === 'function') {
+        return altTextValidator(value) || [];
+      }
+      return [];
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var formatMessage = this.props.intl.formatMessage;
+      var showClearTextButton = this.state.showClearTextButton;
+      var backButtonMessage = formatMessage(_messages.messages.back);
+      var backButtonMessageComponent = (0, _react2.jsx)(_keymaps.ToolTipContent, {
+        description: backButtonMessage,
+        keymap: _keymaps.escape,
+        shortcutOverride: "Esc"
+      });
+      var errorsList = (this.state.validationErrors || []).map(function (error, index) {
+        return (0, _react2.jsx)(_ui.ErrorMessage, {
+          key: index
+        }, error);
+      });
+      return (0, _react2.jsx)("div", {
+        css: container
+      }, (0, _react2.jsx)("section", {
+        css: inputWrapper
+      }, (0, _react2.jsx)("div", {
+        css: buttonWrapper
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+        title: formatMessage(_messages.messages.back),
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+          label: formatMessage(_messages.messages.back)
+        }),
+        tooltipContent: backButtonMessageComponent,
+        onClick: this.closeMediaAltTextMenu
+      })), (0, _react2.jsx)(_ui.PanelTextInput, {
+        testId: "alt-text-input",
+        ariaLabel: formatMessage(_messages.messages.placeholder),
+        describedById: "support-text",
+        placeholder: formatMessage(_messages.messages.placeholder),
+        defaultValue: this.state.lastValue,
+        onCancel: this.dispatchCancelEvent,
+        onChange: this.handleOnChange,
+        onBlur: this.handleOnBlur,
+        onSubmit: this.closeMediaAltTextMenu,
+        maxLength: MAX_ALT_TEXT_LENGTH,
+        autoFocus: true
+      }), showClearTextButton && (0, _react2.jsx)("div", {
+        css: buttonWrapper
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+        testId: "alt-text-clear-button",
+        title: formatMessage(_messages.messages.clear),
+        icon: (0, _react2.jsx)("span", {
+          css: clearText
+        }, (0, _react2.jsx)(_crossCircle.default, {
+          label: formatMessage(_messages.messages.clear)
+        })),
+        tooltipContent: formatMessage(_messages.messages.clear),
+        onClick: this.handleClearText
+      }))), !!errorsList.length && (0, _react2.jsx)("section", {
+        css: validationWrapper
+      }, errorsList), (0, _react2.jsx)("p", {
+        css: supportText,
+        id: "support-text"
+      }, formatMessage(_messages.messages.supportText)));
+    }
+  }, {
+    key: "fireAnalytics",
+    value: function fireAnalytics(actionType) {
+      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+      if (createAnalyticsEvent && this.fireCustomAnalytics) {
+        this.fireCustomAnalytics({
+          payload: {
+            action: actionType,
+            actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
+            eventType: _analytics.EVENT_TYPE.TRACK
+          }
+        });
+      }
+    }
+  }]);
+  return AltTextEditComponent;
+}(_react.default.Component);
+var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(AltTextEditComponent));

package/dist/cjs/pm-plugins/keymap-media-single.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+/**
+ * Check if is an empty selection at the start of the node
+ */
+function isEmptySelectionAtStart(selection) {
+  if (!selection.empty) {
+    return false;
+  }
+  var $from = selection.$from;
+  return $from.parentOffset <= 0;
+}
+
+/**
+ * Check if the current selection is inside a node type
+ */
+function isSelectionInsideOf(selection, nodeType) {
+  var $from = selection.$from;
+  var parent = $from.parent;
+  return parent.type === nodeType;
+}
+
+/**
+ * Return the sibling of the current selection
+ */
+function getSibling(selection, sibling) {
+  var $from = selection.$from;
+  var index = $from.index($from.depth - 1);
+  var grandParent = $from.node($from.depth - 1); // Get GrandParent
+
+  return grandParent ? grandParent.maybeChild(index + sibling) : null;
+}
+
+/**
+ * Check if respective sibling (negative number previous, positive number next)
+ * is from the specified node
+ */
+function isSiblingOfType(selection, node, sibling) {
+  var maybeSiblingNode = getSibling(selection, sibling);
+  return !!maybeSiblingNode && maybeSiblingNode.type === node;
+}
+/**
+ * When there's any empty block before another paragraph with wrap-right
+ * mediaSingle. Pressing backspace at the start of the paragraph will select
+ * the media but visually it makes more sense to remove the empty paragraph.
+ *
+ * Structure of the document: doc(block(), mediaSingle(media()), paragraph('{<>}hello!'))
+ * But, visually it looks like the following:
+ *
+ *    [empty block] <- Remove this block
+ * or [paragraph block] <- Move text inside this paragraph
+ * or [any other block] <- Move paragraph node after this node
+ * [Cursor] x x x x x x x x  +---------------+
+ * x x x x x x x x x x       |  mediaSingle  |
+ * x x x x x.                +---------------+
+ */
+function handleSelectionAfterWrapRight(isEmptyNode) {
+  function isEmptyWithoutThrow(node) {
+    var isEmpty = false;
+    try {
+      // We dont have isEmptyNode definition for table for example.
+      // In this case it will throw we need to catch it
+      isEmpty = isEmptyNode(node);
+    } catch (e) {}
+    return isEmpty;
+  }
+  return function (state, dispatch) {
+    var $from = state.selection.$from;
+    var paragraph = state.schema.nodes.paragraph;
+    var previousMediaSingleSibling = -2;
+    var maybeSibling = getSibling(state.selection, previousMediaSingleSibling);
+    if (!maybeSibling) {
+      // the last is the image so should let the default behaviour delete the image
+      return false;
+    }
+    var mediaSingle = getSibling(state.selection, -1); // Sibling is a media single already checked in main code
+    var mediaSinglePos = $from.pos - mediaSingle.nodeSize;
+
+    // Should find the position
+    // Should move the current paragraph to the last line
+    var maybeAnyBlockPos = mediaSinglePos - maybeSibling.nodeSize;
+    var tr = state.tr;
+    if (isEmptyWithoutThrow(maybeSibling)) {
+      // Should remove the empty sibling
+      tr = tr.replace(maybeAnyBlockPos - 1, maybeAnyBlockPos + maybeSibling.nodeSize);
+    } else {
+      // We move the current node, to the new position
+      // 1. Remove current node, only if I am not removing the last node.
+      if (!(0, _utils.isSelectionInsideLastNodeInDocument)(state.selection)) {
+        tr.replace($from.pos - 1, $from.pos + $from.parent.nodeSize - 1); // Remove node
+      } else {
+        // Remove node content, if is the last node, let a empty paragraph
+        tr.replace($from.pos, $from.pos + $from.parent.nodeSize - 1);
+      }
+
+      // 2. Add it in the new position
+      // If the sibling is a paragraph lets copy the text inside the paragraph
+      // Like a normal backspace from paragraph to paragraph
+      if (maybeSibling.type === paragraph) {
+        var insideParagraphPos = maybeAnyBlockPos + maybeSibling.nodeSize - 2;
+        (0, _utils2.safeInsert)($from.parent.content, insideParagraphPos)(tr);
+      } else {
+        // If is any other kind of block just add the paragraph after it
+        var endOfBlockPos = maybeAnyBlockPos + maybeSibling.nodeSize - 1;
+        (0, _utils2.safeInsert)($from.parent.copy($from.parent.content), endOfBlockPos)(tr);
+      }
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+var maybeRemoveMediaSingleNode = function maybeRemoveMediaSingleNode(schema) {
+  var isEmptyNodeInSchema = (0, _utils.isEmptyNode)(schema);
+  return function (state, dispatch) {
+    var selection = state.selection,
+      schema = state.schema;
+    var $from = selection.$from;
+    if (!isEmptySelectionAtStart(state.selection)) {
+      return false;
+    }
+    if (!isSelectionInsideOf(state.selection, schema.nodes.paragraph)) {
+      return false;
+    }
+    var previousSibling = -1;
+    if (!isSiblingOfType(state.selection, schema.nodes.mediaSingle, previousSibling)) {
+      // no media single
+      return false;
+    }
+    var mediaSingle = getSibling(state.selection, previousSibling);
+    if (mediaSingle.attrs.layout === 'wrap-right') {
+      return handleSelectionAfterWrapRight(isEmptyNodeInSchema)(state, dispatch);
+    }
+    if (dispatch) {
+      // Select media single, and remove paragraph if it's empty.
+      (0, _commands.selectNodeBackward)(state, function (tr) {
+        if (isEmptyNodeInSchema($from.parent) && !(0, _selection.atTheEndOfDoc)(state)) {
+          tr.replace($from.pos - 1, $from.pos + $from.parent.nodeSize - 1); // Remove node
+        }
+
+        dispatch(tr);
+      });
+    }
+    return true;
+  };
+};
+function keymapPlugin(schema) {
+  var list = {};
+  var removeMediaSingleCommand = maybeRemoveMediaSingleNode(schema);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, removeMediaSingleCommand, list);
+  return (0, _keymap.keymap)(list);
+}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.keymapPlugin = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _selection = require("@atlaskit/editor-common/selection");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _mediaCommon = require("@atlaskit/media-common");
+var _captions = require("../commands/captions");
+var _pluginKey = require("../pm-plugins/plugin-key");
+function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+  var list = {};
+  var _ref = options || {},
+    featureFlags = _ref.featureFlags;
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.undo.common, ignoreLinksInSteps, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
+  if (options !== null && options !== void 0 && options.allowCaptions || (0, _mediaCommon.getMediaFeatureFlag)('captions', featureFlags)) {
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
+  }
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
+  return (0, _keymap.keymap)(list);
+}
+var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
+  var mediaPluginState = _pluginKey.stateKey.getState(state);
+  mediaPluginState.ignoreLinks = true;
+  return false;
+};
+var splitMediaGroup = function splitMediaGroup(state) {
+  var mediaPluginState = _pluginKey.stateKey.getState(state);
+  return mediaPluginState.splitMediaGroup();
+};
+var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var selection = state.selection,
+      schema = state.schema;
+    if (selection instanceof _state.NodeSelection && selection.node.type === schema.nodes.mediaSingle && schema.nodes.caption) {
+      if (dispatch) {
+        var from = selection.from,
+          node = selection.node;
+        if (!(0, _captions.insertAndSelectCaptionFromMediaSinglePos)(editorAnalyticsAPI)(from, node)(state, dispatch)) {
+          (0, _captions.selectCaptionFromMediaSinglePos)(from, node)(state, dispatch);
+        }
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var arrowLeftFromMediaSingle = function arrowLeftFromMediaSingle(editorSelectionAPI) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+    if (editorSelectionAPI && selection instanceof _state.NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.selectNearNode({
+        selectionRelativeToNode: undefined,
+        selection: new _selection.GapCursorSelection(state.doc.resolve(selection.from), _selection.Side.LEFT)
+      })(state);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var arrowRightFromMediaSingle = function arrowRightFromMediaSingle(editorSelectionAPI) {
+  return function (state, dispatch) {
+    var selection = state.selection;
+    if (editorSelectionAPI && selection instanceof _state.NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.selectNearNode({
+        selectionRelativeToNode: undefined,
+        selection: new _selection.GapCursorSelection(state.doc.resolve(selection.to), _selection.Side.RIGHT)
+      })(state);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+var _default = exports.default = keymapPlugin;

package/dist/cjs/pm-plugins/linking/actions.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaLinkingActionsTypes = void 0;
+var MediaLinkingActionsTypes = exports.MediaLinkingActionsTypes = /*#__PURE__*/function (MediaLinkingActionsTypes) {
+  MediaLinkingActionsTypes["showToolbar"] = "MEDIA_SHOW_TOOLBAR";
+  MediaLinkingActionsTypes["hideToolbar"] = "MEDIA_HIDE_TOOLBAR";
+  MediaLinkingActionsTypes["setUrl"] = "MEDIA_SET_LINK_TO";
+  MediaLinkingActionsTypes["unlink"] = "MEDIA_LINKING_UNLINK";
+  return MediaLinkingActionsTypes;
+}({});

package/dist/cjs/pm-plugins/linking/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaLinkingPluginKey = exports.getMediaLinkingState = exports.default = exports.createMediaLinkingCommand = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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"));
+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 mediaLinkingPluginKey = exports.mediaLinkingPluginKey = new _state.PluginKey('mediaLinking');
+var initialState = {
+  visible: false,
+  editable: false,
+  mediaPos: null,
+  link: ''
+};
+function mapping(tr, pluginState) {
+  if (pluginState && pluginState.mediaPos !== null) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      mediaPos: tr.mapping.map(pluginState.mediaPos)
+    });
+  }
+  return pluginState;
+}
+function onSelectionChanged(tr) {
+  var isNodeSelection = tr.selection instanceof _state.NodeSelection;
+  if (!isNodeSelection) {
+    return initialState;
+  }
+  var mediaPos = tr.selection.$from.pos + 1;
+  var node = tr.doc.nodeAt(mediaPos);
+  if (!node || node.type.name !== 'media') {
+    return initialState;
+  }
+  var mark = node.marks.find(function (mark) {
+    return mark.type.name === 'link';
+  });
+  if (mark) {
+    return _objectSpread(_objectSpread({}, initialState), {}, {
+      mediaPos: mediaPos,
+      editable: true,
+      link: mark.attrs.href
+    });
+  }
+  return _objectSpread(_objectSpread({}, initialState), {}, {
+    mediaPos: mediaPos
+  });
+}
+var mediaLinkingPluginFactory = (0, _utils.pluginFactory)(mediaLinkingPluginKey, _reducer.default, {
+  mapping: mapping,
+  onSelectionChanged: onSelectionChanged
+});
+var createMediaLinkingCommand = exports.createMediaLinkingCommand = mediaLinkingPluginFactory.createCommand,
+  getMediaLinkingState = exports.getMediaLinkingState = mediaLinkingPluginFactory.getPluginState;
+var _default = exports.default = function _default(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: mediaLinkingPluginKey,
+    state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
+  });
+};

package/dist/cjs/pm-plugins/linking/keymap.js

@@ -0,0 +1,14 @@
+"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 _linking = require("../../commands/linking");
+function keymapPlugin(schema) {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addLink.common, _linking.showLinkingToolbarWithMediaTypeCheck, list);
+  return (0, _keymap.keymap)(list);
+}