@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,206 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+/** @jsx jsx */
+
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { PanelTextInput } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
+import { ErrorMessage } from '@atlaskit/editor-common/ui';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { closeMediaAltTextMenu, updateAltText } from '../commands';
+import { messages } from '../messages';
+export var CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
+export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length
+
+var supportText = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N100, ")"), relativeFontSizeToBase16(12), "var(--ds-space-150, 12px)", "var(--ds-space-500, 40px)", "var(--ds-border, ".concat(N30, ")"));
+var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  line-height: 2;\n"])), CONTAINER_WIDTH_IN_PX);
+var inputWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+var validationWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(R400, ")"));
+var buttonWrapper = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", " ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+var clearText = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-icon-subtle, ".concat(N80, ")"));
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(AltTextEditComponent, _React$Component);
+  var _super = _createSuper(AltTextEditComponent);
+  function AltTextEditComponent(props) {
+    var _this;
+    _classCallCheck(this, AltTextEditComponent);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      showClearTextButton: Boolean(_this.props.value),
+      validationErrors: _this.props.value ? _this.getValidationErrors(_this.props.value) : [],
+      lastValue: _this.props.value
+    });
+    _defineProperty(_assertThisInitialized(_this), "closeMediaAltTextMenu", function () {
+      var view = _this.props.view;
+      closeMediaAltTextMenu(view.state, view.dispatch);
+    });
+    _defineProperty(_assertThisInitialized(_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();
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateAltText", function (newAltText) {
+      var view = _this.props.view;
+      var newValue = newAltText.length === 0 ? '' : newAltText;
+      updateAltText(newValue)(view.state, view.dispatch);
+    });
+    _defineProperty(_assertThisInitialized(_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);
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_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);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClearText", function () {
+      _this.handleOnChange('');
+    });
+    var createAnalyticsEvent = props.createAnalyticsEvent;
+    _this.fireCustomAnalytics = fireAnalyticsEvent(createAnalyticsEvent);
+    return _this;
+  }
+  _createClass(AltTextEditComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.prevValue = this.props.value;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.fireAnalytics(ACTION.CLOSED);
+      if (!this.prevValue && this.props.value) {
+        this.fireAnalytics(ACTION.ADDED);
+      }
+      if (this.prevValue && !this.props.value) {
+        this.fireAnalytics(ACTION.CLEARED);
+      }
+      if (this.prevValue && this.prevValue !== this.props.value) {
+        this.fireAnalytics(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.back);
+      var backButtonMessageComponent = jsx(ToolTipContent, {
+        description: backButtonMessage,
+        keymap: escape,
+        shortcutOverride: "Esc"
+      });
+      var errorsList = (this.state.validationErrors || []).map(function (error, index) {
+        return jsx(ErrorMessage, {
+          key: index
+        }, error);
+      });
+      return jsx("div", {
+        css: container
+      }, jsx("section", {
+        css: inputWrapper
+      }, jsx("div", {
+        css: buttonWrapper
+      }, jsx(Button, {
+        title: formatMessage(messages.back),
+        icon: jsx(ChevronLeftLargeIcon, {
+          label: formatMessage(messages.back)
+        }),
+        tooltipContent: backButtonMessageComponent,
+        onClick: this.closeMediaAltTextMenu
+      })), jsx(PanelTextInput, {
+        testId: "alt-text-input",
+        ariaLabel: formatMessage(messages.placeholder),
+        describedById: "support-text",
+        placeholder: formatMessage(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 && jsx("div", {
+        css: buttonWrapper
+      }, jsx(Button, {
+        testId: "alt-text-clear-button",
+        title: formatMessage(messages.clear),
+        icon: jsx("span", {
+          css: clearText
+        }, jsx(CrossCircleIcon, {
+          label: formatMessage(messages.clear)
+        })),
+        tooltipContent: formatMessage(messages.clear),
+        onClick: this.handleClearText
+      }))), !!errorsList.length && jsx("section", {
+        css: validationWrapper
+      }, errorsList), jsx("p", {
+        css: supportText,
+        id: "support-text"
+      }, formatMessage(messages.supportText)));
+    }
+  }, {
+    key: "fireAnalytics",
+    value: function fireAnalytics(actionType) {
+      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+      if (createAnalyticsEvent && this.fireCustomAnalytics) {
+        this.fireCustomAnalytics({
+          payload: {
+            action: actionType,
+            actionSubject: ACTION_SUBJECT.MEDIA,
+            actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
+            eventType: EVENT_TYPE.TRACK
+          }
+        });
+      }
+    }
+  }]);
+  return AltTextEditComponent;
+}(React.Component);
+export default withAnalyticsEvents()(injectIntl(AltTextEditComponent));

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

@@ -0,0 +1,158 @@
+import { backspace, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { atTheEndOfDoc } from '@atlaskit/editor-common/selection';
+import { isEmptyNode, isSelectionInsideLastNodeInDocument } from '@atlaskit/editor-common/utils';
+import { selectNodeBackward } from '@atlaskit/editor-prosemirror/commands';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { safeInsert } from '@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 (!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;
+        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;
+        safeInsert($from.parent.copy($from.parent.content), endOfBlockPos)(tr);
+      }
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+var maybeRemoveMediaSingleNode = function maybeRemoveMediaSingleNode(schema) {
+  var isEmptyNodeInSchema = 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.
+      selectNodeBackward(state, function (tr) {
+        if (isEmptyNodeInSchema($from.parent) && !atTheEndOfDoc(state)) {
+          tr.replace($from.pos - 1, $from.pos + $from.parent.nodeSize - 1); // Remove node
+        }
+
+        dispatch(tr);
+      });
+    }
+    return true;
+  };
+};
+export default function keymapPlugin(schema) {
+  var list = {};
+  var removeMediaSingleCommand = maybeRemoveMediaSingleNode(schema);
+  bindKeymapWithCommand(backspace.common, removeMediaSingleCommand, list);
+  return keymap(list);
+}

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

@@ -0,0 +1,81 @@
+import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
+import { stateKey } from '../pm-plugins/plugin-key';
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+  var list = {};
+  var _ref = options || {},
+    featureFlags = _ref.featureFlags;
+  bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
+  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
+  if (options !== null && options !== void 0 && options.allowCaptions || getMediaFeatureFlag('captions', featureFlags)) {
+    bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
+  }
+  bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  return keymap(list);
+}
+var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
+  var mediaPluginState = stateKey.getState(state);
+  mediaPluginState.ignoreLinks = true;
+  return false;
+};
+var splitMediaGroup = function splitMediaGroup(state) {
+  var mediaPluginState = 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 NodeSelection && selection.node.type === schema.nodes.mediaSingle && schema.nodes.caption) {
+      if (dispatch) {
+        var from = selection.from,
+          node = selection.node;
+        if (!insertAndSelectCaptionFromMediaSinglePos(editorAnalyticsAPI)(from, node)(state, dispatch)) {
+          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 NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.selectNearNode({
+        selectionRelativeToNode: undefined,
+        selection: new GapCursorSelection(state.doc.resolve(selection.from), 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 NodeSelection && selection.node.type.name === 'mediaSingle') {
+      var tr = editorSelectionAPI.selectNearNode({
+        selectionRelativeToNode: undefined,
+        selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
+      })(state);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+export default keymapPlugin;

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

@@ -0,0 +1,7 @@
+export var 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/esm/pm-plugins/linking/index.js

@@ -0,0 +1,59 @@
+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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+export var mediaLinkingPluginKey = new 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 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 = pluginFactory(mediaLinkingPluginKey, reducer, {
+  mapping: mapping,
+  onSelectionChanged: onSelectionChanged
+});
+var createMediaLinkingCommand = mediaLinkingPluginFactory.createCommand,
+  getMediaLinkingState = mediaLinkingPluginFactory.getPluginState;
+export { createMediaLinkingCommand, getMediaLinkingState };
+export default (function (dispatch) {
+  return new SafePlugin({
+    key: mediaLinkingPluginKey,
+    state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
+  });
+});

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

@@ -0,0 +1,8 @@
+import { addLink, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { showLinkingToolbarWithMediaTypeCheck } from '../../commands/linking';
+export default function keymapPlugin(schema) {
+  var list = {};
+  bindKeymapWithCommand(addLink.common, showLinkingToolbarWithMediaTypeCheck, list);
+  return keymap(list);
+}

package/dist/esm/pm-plugins/linking/reducer.js

@@ -0,0 +1,36 @@
+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 { MediaLinkingActionsTypes } from './actions';
+export default (function (state, action) {
+  switch (action.type) {
+    case MediaLinkingActionsTypes.showToolbar:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          visible: true
+        });
+      }
+    case MediaLinkingActionsTypes.setUrl:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          editable: true,
+          link: action.payload
+        });
+      }
+    case MediaLinkingActionsTypes.hideToolbar:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          visible: false
+        });
+      }
+    case MediaLinkingActionsTypes.unlink:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          link: '',
+          visible: false,
+          editable: false
+        });
+      }
+  }
+  return state;
+});

package/dist/esm/pm-plugins/linking/types.js

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