@atlaskit/editor-plugin-caption 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-caption
 
+## 0.2.0
+
+### Minor Changes
+
+- [#41239](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41239) [`7d70b962986`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d70b962986) - Extract Caption Plugin from Editor Core
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -1,5 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "captionPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.default;
+  }
+});
+var _plugin = _interopRequireDefault(require("./plugin"));

package/dist/cjs/nodeviews/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CaptionNodeView = void 0;
+exports.default = captionNodeView;
+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 _react = _interopRequireDefault(require("react"));
+var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
+var _ui = require("@atlaskit/editor-common/ui");
+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 CaptionNodeView = exports.CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  (0, _inherits2.default)(CaptionNodeView, _SelectionBasedNodeVi);
+  var _super = _createSuper(CaptionNodeView);
+  function CaptionNodeView() {
+    var _this;
+    (0, _classCallCheck2.default)(this, CaptionNodeView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selected", _this.insideSelection());
+    return _this;
+  }
+  (0, _createClass2.default)(CaptionNodeView, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('figcaption');
+      domRef.setAttribute('data-caption', 'true');
+      return domRef;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      // setting a className prevents PM/Chrome mutation observer from
+      // incorrectly deleting nodes
+      dom.className = 'caption-wrapper';
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      return /*#__PURE__*/_react.default.createElement(_ui.Caption, {
+        selected: this.insideSelection(),
+        hasContent: this.node.content.childCount > 0
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        ref: forwardRef
+      }));
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.node.childCount !== nextNode.childCount) {
+        return true;
+      }
+      var newSelected = this.insideSelection();
+      var selectedStateChange = this.selected !== newSelected;
+      this.selected = newSelected;
+      return selectedStateChange;
+    }
+  }]);
+  return CaptionNodeView;
+}(_selectionBasedNodeView.SelectionBasedNodeView);
+function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
+  };
+}

package/dist/cjs/plugin.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _adfSchema = require("@atlaskit/adf-schema");
+var _keymap = require("./pm-plugins/keymap");
+var _main = _interopRequireDefault(require("./pm-plugins/main"));
+var captionPlugin = function captionPlugin(_ref) {
+  var api = _ref.api;
+  return {
+    name: 'caption',
+    nodes: function nodes() {
+      return [{
+        name: 'caption',
+        node: _adfSchema.caption
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'caption',
+        plugin: function plugin(_ref2) {
+          var portalProviderAPI = _ref2.portalProviderAPI,
+            providerFactory = _ref2.providerFactory,
+            eventDispatcher = _ref2.eventDispatcher,
+            dispatch = _ref2.dispatch;
+          return (0, _main.default)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api);
+        }
+      }, {
+        name: 'captionKeymap',
+        plugin: _keymap.captionKeymap
+      }];
+    }
+  };
+};
+var _default = exports.default = captionPlugin;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.captionKeymap = captionKeymap;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+function captionKeymap() {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, createNewParagraphBelowCaption, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, createNewParagraphBelowCaption, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveDown.common, getOutOfCaption, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, getOutOfCaption, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveUp.common, selectParentMediaSingle, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.shiftTab.common, selectParentMediaSingle, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.tab.common, getOutOfCaption, list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, gapCursorSelectLeftParentMediaSingle, list);
+  return (0, _keymap.keymap)(list);
+}
+var createNewParagraphBelowCaption = function createNewParagraphBelowCaption(state, dispatch) {
+  var caption = (0, _utils2.findParentNodeOfType)(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    return (0, _utils.createNewParagraphBelow)(state, dispatch);
+  }
+  return false;
+};
+var getOutOfCaption = function getOutOfCaption(state, dispatch) {
+  var caption = (0, _utils2.findParentNodeOfType)(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    if (dispatch) {
+      var tr = state.tr.setSelection(_state.Selection.near(state.tr.doc.resolve(caption.pos + caption.node.nodeSize)));
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+var selectParentMediaSingle = function selectParentMediaSingle(state, dispatch) {
+  if ((0, _utils2.findParentNodeOfType)(state.schema.nodes.caption)(state.selection)) {
+    var mediaSingleParent = (0, _utils2.findParentNodeOfType)(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent) {
+      if (dispatch) {
+        var tr = state.tr.setSelection(_state.Selection.near(state.tr.doc.resolve(mediaSingleParent.pos)));
+        dispatch(tr);
+      }
+      return true;
+    }
+  }
+  return false;
+};
+var gapCursorSelectLeftParentMediaSingle = function gapCursorSelectLeftParentMediaSingle(state, dispatch) {
+  var caption = (0, _utils2.findParentNodeOfType)(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    var mediaSingleParent = (0, _utils2.findParentNodeOfType)(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent && state.selection.empty && state.tr.doc.resolve(state.selection.from).parentOffset === 0) {
+      var gapCursorSelection = _selection.GapCursorSelection.findFrom(state.tr.doc.resolve(mediaSingleParent.pos), 0, false);
+      if (gapCursorSelection) {
+        if (dispatch) {
+          var tr = state.tr.setSelection(gapCursorSelection);
+          dispatch(tr);
+        }
+        return true;
+      }
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _nodeviews = _interopRequireDefault(require("../nodeviews"));
+var _pluginKey = require("./plugin-key");
+var fireAnalytics = function fireAnalytics(tr, action, analyticsApi) {
+  analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
+    action: action,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    actionSubject: _analytics.ACTION_SUBJECT.MEDIA_SINGLE,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CAPTION
+  })(tr);
+};
+var _default = exports.default = function _default(portalProviderAPI, eventDispatcher, providerFactory, dispatch, pluginInjectionApi) {
+  var _pluginInjectionApi$a;
+  var analyticsApi = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  return new _safePlugin.SafePlugin({
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      // only run for transactions that change selection
+      if (!transactions.find(function (tr) {
+        return tr.selectionSet;
+      })) {
+        return;
+      }
+      var newSelection = !newState.selection.eq(oldState.selection);
+      var findCaption = (0, _utils.findParentNodeOfType)(oldState.schema.nodes.caption);
+      var oldSelectionCaption = findCaption(oldState.selection);
+      var tr = newState.tr;
+
+      // if selecting away from caption, or selecting a different caption
+      if (newSelection && oldSelectionCaption) {
+        if (oldSelectionCaption.node.childCount === 0) {
+          tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
+          tr.setMeta('scrollIntoView', false);
+          fireAnalytics(tr, _analytics.ACTION.DELETED, analyticsApi);
+          return tr;
+        } else {
+          fireAnalytics(tr, _analytics.ACTION.EDITED, analyticsApi);
+          return tr;
+        }
+      }
+    },
+    key: _pluginKey.pluginKey,
+    props: {
+      nodeViews: {
+        caption: (0, _nodeviews.default)(portalProviderAPI, eventDispatcher, pluginInjectionApi)
+      }
+    }
+  });
+};

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

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

package/dist/es2019/index.js

@@ -1 +1 @@
-export {};
+export { default as captionPlugin } from './plugin';

package/dist/es2019/nodeviews/index.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { Caption } from '@atlaskit/editor-common/ui';
+export class CaptionNodeView extends SelectionBasedNodeView {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "selected", this.insideSelection());
+  }
+  createDomRef() {
+    const domRef = document.createElement('figcaption');
+    domRef.setAttribute('data-caption', 'true');
+    return domRef;
+  }
+  getContentDOM() {
+    const dom = document.createElement('div');
+    // setting a className prevents PM/Chrome mutation observer from
+    // incorrectly deleting nodes
+    dom.className = 'caption-wrapper';
+    return {
+      dom
+    };
+  }
+  render(_props, forwardRef) {
+    return /*#__PURE__*/React.createElement(Caption, {
+      selected: this.insideSelection(),
+      hasContent: this.node.content.childCount > 0
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: forwardRef
+    }));
+  }
+  viewShouldUpdate(nextNode) {
+    if (this.node.childCount !== nextNode.childCount) {
+      return true;
+    }
+    const newSelected = this.insideSelection();
+    const selectedStateChange = this.selected !== newSelected;
+    this.selected = newSelected;
+    return selectedStateChange;
+  }
+}
+export default function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
+  };
+}

package/dist/es2019/plugin.js

@@ -0,0 +1,31 @@
+import { caption } from '@atlaskit/adf-schema';
+import { captionKeymap } from './pm-plugins/keymap';
+import { default as createCaptionPlugin } from './pm-plugins/main';
+const captionPlugin = ({
+  api
+}) => {
+  return {
+    name: 'caption',
+    nodes() {
+      return [{
+        name: 'caption',
+        node: caption
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'caption',
+        plugin: ({
+          portalProviderAPI,
+          providerFactory,
+          eventDispatcher,
+          dispatch
+        }) => createCaptionPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api)
+      }, {
+        name: 'captionKeymap',
+        plugin: captionKeymap
+      }];
+    }
+  };
+};
+export default captionPlugin;

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

@@ -0,0 +1,66 @@
+import { bindKeymapWithCommand, enter, moveDown, moveLeft, moveUp, shiftTab, tab } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { createNewParagraphBelow } from '@atlaskit/editor-common/utils';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export function captionKeymap() {
+  const list = {};
+  bindKeymapWithCommand(moveDown.common, createNewParagraphBelowCaption, list);
+  bindKeymapWithCommand(enter.common, createNewParagraphBelowCaption, list);
+  bindKeymapWithCommand(moveDown.common, getOutOfCaption, list);
+  bindKeymapWithCommand(enter.common, getOutOfCaption, list);
+  bindKeymapWithCommand(moveUp.common, selectParentMediaSingle, list);
+  bindKeymapWithCommand(shiftTab.common, selectParentMediaSingle, list);
+  bindKeymapWithCommand(tab.common, getOutOfCaption, list);
+  bindKeymapWithCommand(moveLeft.common, gapCursorSelectLeftParentMediaSingle, list);
+  return keymap(list);
+}
+const createNewParagraphBelowCaption = (state, dispatch) => {
+  const caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    return createNewParagraphBelow(state, dispatch);
+  }
+  return false;
+};
+const getOutOfCaption = (state, dispatch) => {
+  const caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    if (dispatch) {
+      const tr = state.tr.setSelection(Selection.near(state.tr.doc.resolve(caption.pos + caption.node.nodeSize)));
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const selectParentMediaSingle = (state, dispatch) => {
+  if (findParentNodeOfType(state.schema.nodes.caption)(state.selection)) {
+    const mediaSingleParent = findParentNodeOfType(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent) {
+      if (dispatch) {
+        const tr = state.tr.setSelection(Selection.near(state.tr.doc.resolve(mediaSingleParent.pos)));
+        dispatch(tr);
+      }
+      return true;
+    }
+  }
+  return false;
+};
+const gapCursorSelectLeftParentMediaSingle = (state, dispatch) => {
+  const caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    const mediaSingleParent = findParentNodeOfType(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent && state.selection.empty && state.tr.doc.resolve(state.selection.from).parentOffset === 0) {
+      const gapCursorSelection = GapCursorSelection.findFrom(state.tr.doc.resolve(mediaSingleParent.pos), 0, false);
+      if (gapCursorSelection) {
+        if (dispatch) {
+          const tr = state.tr.setSelection(gapCursorSelection);
+          dispatch(tr);
+        }
+        return true;
+      }
+    }
+  }
+  return false;
+};

package/dist/es2019/pm-plugins/main.js

@@ -0,0 +1,50 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import captionNodeView from '../nodeviews';
+import { pluginKey } from './plugin-key';
+const fireAnalytics = (tr, action, analyticsApi) => {
+  analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
+    action,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubject: ACTION_SUBJECT.MEDIA_SINGLE,
+    actionSubjectId: ACTION_SUBJECT_ID.CAPTION
+  })(tr);
+};
+export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch, pluginInjectionApi) => {
+  var _pluginInjectionApi$a;
+  const analyticsApi = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  return new SafePlugin({
+    appendTransaction(transactions, oldState, newState) {
+      // only run for transactions that change selection
+      if (!transactions.find(tr => tr.selectionSet)) {
+        return;
+      }
+      const newSelection = !newState.selection.eq(oldState.selection);
+      const findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
+      const oldSelectionCaption = findCaption(oldState.selection);
+      const {
+        tr
+      } = newState;
+
+      // if selecting away from caption, or selecting a different caption
+      if (newSelection && oldSelectionCaption) {
+        if (oldSelectionCaption.node.childCount === 0) {
+          tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
+          tr.setMeta('scrollIntoView', false);
+          fireAnalytics(tr, ACTION.DELETED, analyticsApi);
+          return tr;
+        } else {
+          fireAnalytics(tr, ACTION.EDITED, analyticsApi);
+          return tr;
+        }
+      }
+    },
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        caption: captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi)
+      }
+    }
+  });
+});

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('caption');

package/dist/esm/index.js

@@ -1 +1 @@
-export {};
+export { default as captionPlugin } from './plugin';

package/dist/esm/nodeviews/index.js

@@ -0,0 +1,73 @@
+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";
+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; } }
+import React from 'react';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { Caption } from '@atlaskit/editor-common/ui';
+export var CaptionNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
+  _inherits(CaptionNodeView, _SelectionBasedNodeVi);
+  var _super = _createSuper(CaptionNodeView);
+  function CaptionNodeView() {
+    var _this;
+    _classCallCheck(this, CaptionNodeView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "selected", _this.insideSelection());
+    return _this;
+  }
+  _createClass(CaptionNodeView, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('figcaption');
+      domRef.setAttribute('data-caption', 'true');
+      return domRef;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      // setting a className prevents PM/Chrome mutation observer from
+      // incorrectly deleting nodes
+      dom.className = 'caption-wrapper';
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      return /*#__PURE__*/React.createElement(Caption, {
+        selected: this.insideSelection(),
+        hasContent: this.node.content.childCount > 0
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: forwardRef
+      }));
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.node.childCount !== nextNode.childCount) {
+        return true;
+      }
+      var newSelected = this.insideSelection();
+      var selectedStateChange = this.selected !== newSelected;
+      this.selected = newSelected;
+      return selectedStateChange;
+    }
+  }]);
+  return CaptionNodeView;
+}(SelectionBasedNodeView);
+export default function captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi) {
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
+  };
+}

package/dist/esm/plugin.js

@@ -0,0 +1,31 @@
+import { caption } from '@atlaskit/adf-schema';
+import { captionKeymap } from './pm-plugins/keymap';
+import { default as createCaptionPlugin } from './pm-plugins/main';
+var captionPlugin = function captionPlugin(_ref) {
+  var api = _ref.api;
+  return {
+    name: 'caption',
+    nodes: function nodes() {
+      return [{
+        name: 'caption',
+        node: caption
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'caption',
+        plugin: function plugin(_ref2) {
+          var portalProviderAPI = _ref2.portalProviderAPI,
+            providerFactory = _ref2.providerFactory,
+            eventDispatcher = _ref2.eventDispatcher,
+            dispatch = _ref2.dispatch;
+          return createCaptionPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api);
+        }
+      }, {
+        name: 'captionKeymap',
+        plugin: captionKeymap
+      }];
+    }
+  };
+};
+export default captionPlugin;

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

@@ -0,0 +1,66 @@
+import { bindKeymapWithCommand, enter, moveDown, moveLeft, moveUp, shiftTab, tab } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { createNewParagraphBelow } from '@atlaskit/editor-common/utils';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export function captionKeymap() {
+  var list = {};
+  bindKeymapWithCommand(moveDown.common, createNewParagraphBelowCaption, list);
+  bindKeymapWithCommand(enter.common, createNewParagraphBelowCaption, list);
+  bindKeymapWithCommand(moveDown.common, getOutOfCaption, list);
+  bindKeymapWithCommand(enter.common, getOutOfCaption, list);
+  bindKeymapWithCommand(moveUp.common, selectParentMediaSingle, list);
+  bindKeymapWithCommand(shiftTab.common, selectParentMediaSingle, list);
+  bindKeymapWithCommand(tab.common, getOutOfCaption, list);
+  bindKeymapWithCommand(moveLeft.common, gapCursorSelectLeftParentMediaSingle, list);
+  return keymap(list);
+}
+var createNewParagraphBelowCaption = function createNewParagraphBelowCaption(state, dispatch) {
+  var caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    return createNewParagraphBelow(state, dispatch);
+  }
+  return false;
+};
+var getOutOfCaption = function getOutOfCaption(state, dispatch) {
+  var caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    if (dispatch) {
+      var tr = state.tr.setSelection(Selection.near(state.tr.doc.resolve(caption.pos + caption.node.nodeSize)));
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+var selectParentMediaSingle = function selectParentMediaSingle(state, dispatch) {
+  if (findParentNodeOfType(state.schema.nodes.caption)(state.selection)) {
+    var mediaSingleParent = findParentNodeOfType(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent) {
+      if (dispatch) {
+        var tr = state.tr.setSelection(Selection.near(state.tr.doc.resolve(mediaSingleParent.pos)));
+        dispatch(tr);
+      }
+      return true;
+    }
+  }
+  return false;
+};
+var gapCursorSelectLeftParentMediaSingle = function gapCursorSelectLeftParentMediaSingle(state, dispatch) {
+  var caption = findParentNodeOfType(state.schema.nodes.caption)(state.selection);
+  if (caption) {
+    var mediaSingleParent = findParentNodeOfType(state.schema.nodes.mediaSingle)(state.selection);
+    if (mediaSingleParent && state.selection.empty && state.tr.doc.resolve(state.selection.from).parentOffset === 0) {
+      var gapCursorSelection = GapCursorSelection.findFrom(state.tr.doc.resolve(mediaSingleParent.pos), 0, false);
+      if (gapCursorSelection) {
+        if (dispatch) {
+          var tr = state.tr.setSelection(gapCursorSelection);
+          dispatch(tr);
+        }
+        return true;
+      }
+    }
+  }
+  return false;
+};

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

@@ -0,0 +1,50 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import captionNodeView from '../nodeviews';
+import { pluginKey } from './plugin-key';
+var fireAnalytics = function fireAnalytics(tr, action, analyticsApi) {
+  analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
+    action: action,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubject: ACTION_SUBJECT.MEDIA_SINGLE,
+    actionSubjectId: ACTION_SUBJECT_ID.CAPTION
+  })(tr);
+};
+export default (function (portalProviderAPI, eventDispatcher, providerFactory, dispatch, pluginInjectionApi) {
+  var _pluginInjectionApi$a;
+  var analyticsApi = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  return new SafePlugin({
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      // only run for transactions that change selection
+      if (!transactions.find(function (tr) {
+        return tr.selectionSet;
+      })) {
+        return;
+      }
+      var newSelection = !newState.selection.eq(oldState.selection);
+      var findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
+      var oldSelectionCaption = findCaption(oldState.selection);
+      var tr = newState.tr;
+
+      // if selecting away from caption, or selecting a different caption
+      if (newSelection && oldSelectionCaption) {
+        if (oldSelectionCaption.node.childCount === 0) {
+          tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
+          tr.setMeta('scrollIntoView', false);
+          fireAnalytics(tr, ACTION.DELETED, analyticsApi);
+          return tr;
+        } else {
+          fireAnalytics(tr, ACTION.EDITED, analyticsApi);
+          return tr;
+        }
+      }
+    },
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        caption: captionNodeView(portalProviderAPI, eventDispatcher, pluginInjectionApi)
+      }
+    }
+  });
+});

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('caption');

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export type { CaptionPlugin } from './types';
+export { default as captionPlugin } from './plugin';

package/dist/types/nodeviews/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { ForwardRef } from '@atlaskit/editor-common/react-node-view';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import type { ExtractInjectionAPI, getPosHandler } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CaptionPlugin } from '../types';
+export declare class CaptionNodeView extends SelectionBasedNodeView {
+    private selected;
+    createDomRef(): HTMLElement;
+    getContentDOM(): {
+        dom: HTMLDivElement;
+    };
+    render(_props: never, forwardRef: ForwardRef): JSX.Element;
+    viewShouldUpdate(nextNode: PMNode): boolean;
+}
+export default function captionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined): (node: PMNode, view: EditorView, getPos: getPosHandler) => CaptionNodeView;

package/dist/types/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { CaptionPlugin } from './types';
+declare const captionPlugin: CaptionPlugin;
+export default captionPlugin;

package/dist/types/pm-plugins/keymap.d.ts

@@ -0,0 +1,2 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function captionKeymap(): SafePlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CaptionPlugin } from '../types';
+declare const _default: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined) => SafePlugin<any>;
+export default _default;

package/dist/types/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const pluginKey: PluginKey<any>;

package/dist/types-ts4.5/index.d.ts

@@ -1 +1,2 @@
 export type { CaptionPlugin } from './types';
+export { default as captionPlugin } from './plugin';

package/dist/types-ts4.5/nodeviews/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { ForwardRef } from '@atlaskit/editor-common/react-node-view';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import type { ExtractInjectionAPI, getPosHandler } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CaptionPlugin } from '../types';
+export declare class CaptionNodeView extends SelectionBasedNodeView {
+    private selected;
+    createDomRef(): HTMLElement;
+    getContentDOM(): {
+        dom: HTMLDivElement;
+    };
+    render(_props: never, forwardRef: ForwardRef): JSX.Element;
+    viewShouldUpdate(nextNode: PMNode): boolean;
+}
+export default function captionNodeView(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined): (node: PMNode, view: EditorView, getPos: getPosHandler) => CaptionNodeView;

package/dist/types-ts4.5/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { CaptionPlugin } from './types';
+declare const captionPlugin: CaptionPlugin;
+export default captionPlugin;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -0,0 +1,2 @@
+import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+export declare function captionKeymap(): SafePlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -0,0 +1,8 @@
+import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CaptionPlugin } from '../types';
+declare const _default: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, pluginInjectionApi: ExtractInjectionAPI<CaptionPlugin> | undefined) => SafePlugin<any>;
+export default _default;

package/dist/types-ts4.5/pm-plugins/plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const pluginKey: PluginKey<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-caption",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Caption plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,7 +8,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
-    "team": "Editor: Lego",
+    "team": "Editor: Media Experience Porygon",
     "singleton": true,
     "releaseModel": "continuous"
   },
@@ -31,11 +31,24 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
+    "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/editor-common": "^76.5.0",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
+    "@atlaskit/editor-prosemirror": "1.1.0",
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
+    "@atlaskit/editor-plugin-copy-button": "^1.0.0",
+    "@atlaskit/editor-plugin-decorations": "^0.2.0",
+    "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
+    "@atlaskit/editor-plugin-floating-toolbar": "^0.6.0",
+    "@atlaskit/editor-plugin-focus": "^0.2.0",
+    "@atlaskit/editor-plugin-grid": "^0.3.0",
+    "@atlaskit/editor-plugin-guideline": "^0.5.0",
+    "@atlaskit/editor-plugin-width": "^0.2.0",
+    "@atlaskit/renderer": "^108.15.0",
+    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0"
   },
   "peerDependencies": {

package/report.api.md

@@ -26,6 +26,9 @@ export type CaptionPlugin = NextEditorPlugin<
   }
 >;
 
+// @public (undocumented)
+export const captionPlugin: CaptionPlugin;
+
 // (No @packageDocumentation comment for this package)
 ```
 

package/tmp/api-report-tmp.d.ts

@@ -12,6 +12,9 @@ export type CaptionPlugin = NextEditorPlugin<'caption', {
     dependencies: [typeof analyticsPlugin];
 }>;
 
+// @public (undocumented)
+export const captionPlugin: CaptionPlugin;
+
 // (No @packageDocumentation comment for this package)
 
 ```