@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/cjs/plugins/emoji/styles.js

@@ -15,13 +15,13 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _emoji = require("@atlaskit/editor-common/emoji");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2;
 
-var emojiStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", "\n        > span {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _editorCommon.EmojiSharedCssClassName.EMOJI_CONTAINER, _editorCommon.EmojiSharedCssClassName.EMOJI_NODE, _editorCommon.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _editorCommon.EmojiSharedCssClassName.EMOJI_SPRITE, _editorCommon.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var emojiStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", " {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 exports.emojiStyles = emojiStyles;
 var grid = (0, _constants.gridSize)() / 2;
 var fontSize = (0, _constants.fontSizeSmall)();

package/dist/cjs/plugins/emoji/ui/Emoji/index.js

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("../../../../ui/styles");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _emoji = require("@atlaskit/editor-common/emoji");
 
 function EmojiNode(props) {
-  return /*#__PURE__*/_react.default.createElement(_styles.ClickSelectWrapper, null, /*#__PURE__*/_react.default.createElement(_editorCommon.Emoji, props));
+  return /*#__PURE__*/_react.default.createElement(_styles.ClickSelectWrapper, null, /*#__PURE__*/_react.default.createElement(_emoji.Emoji, props));
 }

package/dist/cjs/plugins/expand/commands.js

@@ -23,9 +23,9 @@ var _utils2 = require("./utils");
 
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var setExpandRef = function setExpandRef(ref) {
   return (0, _pluginFactory.createCommand)({

package/dist/cjs/plugins/expand/index.js

@@ -55,7 +55,7 @@ var expandPlugin = function expandPlugin() {
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch,
               getIntl = _ref.getIntl;
-          return (0, _main.createPlugin)(dispatch, getIntl, options.useLongPressSelection);
+          return (0, _main.createPlugin)(dispatch, getIntl, options.appearance, options.useLongPressSelection);
         }
       }, {
         name: 'expandKeymap',

package/dist/cjs/plugins/expand/nodeviews/index.js

@@ -26,7 +26,7 @@ var _w3cKeyname = require("w3c-keyname");
 
 var _prosemirrorModel = require("prosemirror-model");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _utils = require("../../../utils");
 
@@ -74,7 +74,7 @@ var toDOM = function toDOM(node, intl) {
     // prettier-ignore
     'class': _classNames.expandClassNames.titleInput,
     value: node.attrs.title,
-    placeholder: intl && intl.formatMessage(_editorCommon.expandMessages.expandPlaceholderText) || _editorCommon.expandMessages.expandPlaceholderText.defaultMessage,
+    placeholder: intl && intl.formatMessage(_ui.expandMessages.expandPlaceholderText) || _ui.expandMessages.expandPlaceholderText.defaultMessage,
     type: 'text'
   }]]], // prettier-ignore
   ['div', {
@@ -83,11 +83,12 @@ var toDOM = function toDOM(node, intl) {
 };
 
 var ExpandNodeView = /*#__PURE__*/function () {
-  function ExpandNodeView(node, view, getPos, getIntl) {
+  function ExpandNodeView(node, view, getPos, getIntl, isMobile) {
     var _this = this;
 
     (0, _classCallCheck2.default)(this, ExpandNodeView);
     (0, _defineProperty2.default)(this, "allowInteractiveExpand", true);
+    (0, _defineProperty2.default)(this, "isMobile", false);
     (0, _defineProperty2.default)(this, "focusTitle", function () {
       if (_this.input) {
         var _this$view = _this.view,
@@ -368,6 +369,7 @@ var ExpandNodeView = /*#__PURE__*/function () {
     this.node = node;
     this.dom = dom;
     this.contentDOM = contentDOM;
+    this.isMobile = isMobile;
     this.icon = this.dom.querySelector(".".concat(_classNames.expandClassNames.icon));
     this.input = this.dom.querySelector(".".concat(_classNames.expandClassNames.titleInput));
     this.titleContainer = this.dom.querySelector(".".concat(_classNames.expandClassNames.titleContainer));
@@ -423,6 +425,12 @@ var ExpandNodeView = /*#__PURE__*/function () {
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation(mutationRecord) {
+      // ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
+      // does not recognise the changes and reverts them.
+      if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
+        return false;
+      }
+
       if (mutationRecord.type === 'selection') {
         return false;
       }
@@ -498,8 +506,10 @@ var ExpandNodeView = /*#__PURE__*/function () {
 
 exports.ExpandNodeView = ExpandNodeView;
 
-function _default(getIntl) {
+function _default(_ref2) {
+  var getIntl = _ref2.getIntl,
+      isMobile = _ref2.isMobile;
   return function (node, view, getPos) {
-    return new ExpandNodeView(node, view, getPos, getIntl);
+    return new ExpandNodeView(node, view, getPos, getIntl, isMobile);
   };
 }

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

@@ -31,8 +31,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var isExpandNode = function isExpandNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
+};
+
 var isExpandSelected = function isExpandSelected(selection) {
-  return selection instanceof _prosemirrorState.NodeSelection && (selection.node.type.name === 'expand' || selection.node.type.name === 'nestedExpand');
+  return selection instanceof _prosemirrorState.NodeSelection && isExpandNode(selection.node);
 };
 
 function expandKeymap() {
@@ -170,6 +174,7 @@ function expandKeymap() {
   }, list);
   keymaps.bindKeymapWithCommand(keymaps.backspace.common, function (state, dispatch, editorView) {
     var selection = state.selection;
+    var $from = selection.$from;
 
     if (!editorView || !selection.empty) {
       return false;
@@ -193,6 +198,13 @@ function expandKeymap() {
       return false;
     }
 
+    var parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1))); // ED-10012 catch cases where the expand has another node nested within it and
+    // the backspace should be applied only to the inner node instead of the expand
+
+    if (parentNode && !isExpandNode(parentNode)) {
+      return false;
+    }
+
     var textSel = _prosemirrorState.Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
 
     if (textSel && selection.$from.pos === textSel.$from.pos && (0, _utils2.isEmptyNode)(state.schema)(expandNode.node) && dispatch) {

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
@@ -28,15 +28,23 @@ function containsClass(element, className) {
 }
 
 var createPlugin = function createPlugin(dispatch, getIntl) {
-  var useLongPressSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var appearance = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'full-page';
+  var useLongPressSelection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var state = (0, _pluginFactory.createPluginState)(dispatch, {});
-  return new _prosemirrorState.Plugin({
+  var isMobile = appearance === 'mobile';
+  return new _safePlugin.SafePlugin({
     state: state,
     key: _pluginFactory.pluginKey,
     props: {
       nodeViews: {
-        expand: (0, _nodeviews.default)(getIntl),
-        nestedExpand: (0, _nodeviews.default)(getIntl)
+        expand: (0, _nodeviews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile
+        }),
+        nestedExpand: (0, _nodeviews.default)({
+          getIntl: getIntl,
+          isMobile: isMobile
+        })
       },
       handleKeyDown: function handleKeyDown(_view, event) {
         return containsClass(event.target, _classNames.expandClassNames.titleContainer);

package/dist/cjs/plugins/expand/reducer.js

@@ -9,9 +9,9 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = function _default(pluginState, action) {
   switch (action.type) {

package/dist/cjs/plugins/expand/toolbar.js

@@ -44,7 +44,8 @@ var getToolbarConfig = function getToolbarConfig(state, _ref) {
         onMouseLeave: (0, _decoration.hoverDecoration)([nestedExpand, expand], false),
         onFocus: (0, _decoration.hoverDecoration)([nestedExpand, expand], true),
         onBlur: (0, _decoration.hoverDecoration)([nestedExpand, expand], false),
-        title: formatMessage(_messages.default.remove)
+        title: formatMessage(_messages.default.remove),
+        tabIndex: null
       }]
     };
   }

package/dist/cjs/plugins/expand/ui/ExpandIconButton.js

@@ -29,7 +29,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -39,13 +39,15 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _classNames = require("./class-names");
 
+var _excluded = ["buttonStyles"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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); }; }
 
@@ -53,7 +55,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var ExpandLayoutWrapperWithRef = /*#__PURE__*/(0, _react.forwardRef)(function WithRef(props, ref) {
   // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_ui.ExpandLayoutWrapper, (0, _extends2.default)({}, props, {
     innerRef: ref
   }));
 });
@@ -92,7 +94,7 @@ var CustomButton = function CustomButton(props) {
   var useTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
     var _currentTheme = currentTheme(themeProps),
         buttonStyles = _currentTheme.buttonStyles,
-        rest = (0, _objectWithoutProperties2.default)(_currentTheme, ["buttonStyles"]);
+        rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded);
 
     return _objectSpread({
       buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
@@ -123,7 +125,7 @@ var ButtonWithoutTooltip = CustomButton;
 var ExpandIconButton = function ExpandIconButton(props) {
   var expanded = props.expanded,
       intl = props.intl;
-  var message = expanded ? _editorCommon.expandMessages.collapseNode : _editorCommon.expandMessages.expandNode;
+  var message = expanded ? _ui.expandMessages.collapseNode : _ui.expandMessages.expandNode;
   var label = intl && intl.formatMessage(message) || message.defaultMessage; // check to ensure device supports any-hover
 
   var supportsAnyHover = !!window.matchMedia ? window.matchMedia('(any-hover: hover)').matches !== window.matchMedia('(any-hover: none)').matches : false;
@@ -135,7 +137,7 @@ var ExpandIconButton = function ExpandIconButton(props) {
     }, props));
   }
 
-  return /*#__PURE__*/_react.default.createElement(_editorCommon.ExpandLayoutWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonWithoutTooltip, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_ui.ExpandLayoutWrapper, null, /*#__PURE__*/_react.default.createElement(ButtonWithoutTooltip, (0, _extends2.default)({
     label: label
   }, props)));
 };

package/dist/cjs/plugins/expand/ui/styles.js

@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -57,7 +57,7 @@ var DANGER_STATE_BORDER_COLOR = (0, _components.themed)({
 var DANGER_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'
 });
-var expandStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _editorCommon.sharedExpandStyles.ContainerStyles, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR, ACTIVE_STATE_BORDER, ACTIVE_STATE_BORDER_RADIUS, DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER, DANGER_STATE_BORDER_COLOR, DANGER_STATE_BORDER_RADIUS, _classNames.expandClassNames.type('expand'), _constants2.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _editorCommon.sharedExpandStyles.ContentStyles, _classNames.expandClassNames.titleInput, _editorCommon.sharedExpandStyles.TitleInputStyles, _classNames.expandClassNames.titleContainer, _editorCommon.sharedExpandStyles.TitleContainerStyles, _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, (0, _components.themed)({
+var expandStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), _classNames.expandClassNames.icon, _classNames.expandClassNames.prefix, _ui.sharedExpandStyles.ContainerStyles, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR, ACTIVE_STATE_BORDER, ACTIVE_STATE_BORDER_RADIUS, DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER, DANGER_STATE_BORDER_COLOR, DANGER_STATE_BORDER_RADIUS, _classNames.expandClassNames.type('expand'), _constants2.BreakoutCssClassName.BREAKOUT_MARK_DOM, _classNames.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _classNames.expandClassNames.content, _ui.sharedExpandStyles.ContentStyles, _classNames.expandClassNames.titleInput, _ui.sharedExpandStyles.TitleInputStyles, _classNames.expandClassNames.titleContainer, _ui.sharedExpandStyles.TitleContainerStyles, _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, (0, _components.themed)({
   light: _colors.N40A,
   dark: _colors.DN50
 }), _classNames.expandClassNames.content, _constants.gridSize, _classNames.expandClassNames.inputContainer, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _components.themed)({

package/dist/cjs/plugins/extension/actions.js

@@ -31,9 +31,9 @@ var _main = require("./pm-plugins/main");
 
 var _extensionApi = require("./extension-api");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var buildExtensionNode = function buildExtensionNode(type, schema, attrs, content, marks) {
   switch (type) {

package/dist/cjs/plugins/extension/commands.js

@@ -20,9 +20,9 @@ var _pluginFactory = require("./plugin-factory");
 
 var _utils = require("./utils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function updateState(state) {
   return (0, _pluginFactory.createCommand)({
@@ -80,9 +80,11 @@ var updateExtensionLayout = function updateExtensionLayout(layout) {
     var selectedExtension = (0, _utils.getSelectedExtension)(state, true);
 
     if (selectedExtension) {
-      return tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
+      var trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, _objectSpread(_objectSpread({}, selectedExtension.node.attrs), {}, {
         layout: layout
       }));
+      trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+      return trWithNewNodeMarkup;
     }
 
     return tr;

package/dist/cjs/plugins/extension/context-panel.js

@@ -38,9 +38,9 @@ var _actions = require("./actions");
 
 var _SaveIndicator = require("./ui/SaveIndicator/SaveIndicator");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var areParametersEqual = function areParametersEqual(firstParameters, secondParameters) {
   if ((0, _typeof2.default)(firstParameters) === 'object' && (0, _typeof2.default)(secondParameters) === 'object' && firstParameters !== null && secondParameters !== null) {

package/dist/cjs/plugins/extension/extension-api.js

@@ -62,27 +62,42 @@ var extensionAPICallPayload = function extensionAPICallPayload(functionName) {
 };
 
 var createExtensionAPI = function createExtensionAPI(options) {
-  var doc = {
-    insertAfter: function insertAfter(localId, adf, opt) {
-      var editorView = options.editorView;
-      var dispatch = editorView.dispatch; // Be extra cautious since 3rd party devs can use regular JS without type safety
+  /**
+   * Finds the node and its position by `localId`. Throws if the node could not be found.
+   *
+   * @returns {NodeWithPos}
+   */
+  var ensureNodePosByLocalId = function ensureNodePosByLocalId(localId, _ref2) {
+    var opName = _ref2.opName;
 
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error("insertAfter(): Invalid localId '".concat(localId, "'."));
-      }
+    // Be extra cautious since 3rd party devs can use regular JS without type safety
+    if (typeof localId !== 'string' || localId === '') {
+      throw new Error("".concat(opName, "(): Invalid localId '").concat(localId, "'."));
+    } // Find the node + position matching the given ID
 
-      if ((0, _typeof2.default)(adf) !== 'object' || Array.isArray(adf)) {
-        throw new Error("insertAfter(): Invalid ADF given.");
-      } // Find the node + position matching the given ID
 
+    var state = options.editorView.state;
+    var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
 
-      var state = editorView.state;
-      var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
+    if (!nodePos) {
+      throw new Error("".concat(opName, "(): Could not find node with ID '").concat(localId, "'."));
+    }
 
-      if (!nodePos) {
-        throw new Error("insertAfter(): Could not find node with ID '".concat(localId, "'."));
-      } // Validate the given ADF
+    return nodePos;
+  };
 
+  var doc = {
+    insertAfter: function insertAfter(localId, adf, opt) {
+      if ((0, _typeof2.default)(adf) !== 'object' || Array.isArray(adf)) {
+        throw new Error("insertAfter(): Invalid ADF given.");
+      }
+
+      var nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'insertAfter'
+      });
+      var editorView = options.editorView;
+      var dispatch = editorView.dispatch,
+          state = editorView.state; // Validate the given ADF
 
       var tr = state.tr,
           schema = state.schema;
@@ -156,28 +171,85 @@ var createExtensionAPI = function createExtensionAPI(options) {
       dispatch(tr);
     },
     scrollTo: function scrollTo(localId) {
-      var editorView = options.editorView;
-      var dispatch = editorView.dispatch; // Be extra cautious since 3rd party devs can use regular JS without type safety
-
-      if (typeof localId !== 'string' || localId === '') {
-        throw new Error("scrollTo(): Invalid localId '".concat(localId, "'."));
-      } // Find the node + position matching the given ID
-
-
-      var state = editorView.state;
-      var nodePos = (0, _utils.findNodePosWithLocalId)(state, localId);
-
-      if (!nodePos) {
-        throw new Error("scrollTo(): Could not find node with ID '".concat(localId, "'."));
-      } // Analytics - tracking the api call
-
+      var nodePos = ensureNodePosByLocalId(localId, {
+        opName: 'scrollTo'
+      }); // Analytics - tracking the api call
 
       var apiCallPayload = extensionAPICallPayload('scrollTo');
+      var _options$editorView = options.editorView,
+          dispatch = _options$editorView.dispatch,
+          state = _options$editorView.state;
       var tr = state.tr;
       tr = (0, _analytics.addAnalytics)(state, tr, apiCallPayload);
       tr = (0, _prosemirrorUtils.setTextSelection)(nodePos.pos)(tr);
       tr = tr.scrollIntoView();
       dispatch(tr);
+    },
+    update: function update(localId, mutationCallback) {
+      var _changedValues$marks;
+
+      var _ensureNodePosByLocal = ensureNodePosByLocalId(localId, {
+        opName: 'update'
+      }),
+          node = _ensureNodePosByLocal.node,
+          pos = _ensureNodePosByLocal.pos;
+
+      var _options$editorView2 = options.editorView,
+          dispatch = _options$editorView2.dispatch,
+          state = _options$editorView2.state;
+      var tr = state.tr,
+          schema = state.schema;
+      var changedValues = mutationCallback({
+        attrs: node.attrs,
+        marks: node.marks.map(function (pmMark) {
+          return {
+            type: pmMark.type.name,
+            attrs: pmMark.attrs
+          };
+        })
+      });
+
+      var ensureValidMark = function ensureValidMark(mark) {
+        if ((0, _typeof2.default)(mark) !== 'object' || Array.isArray(mark)) {
+          throw new Error("update(): Invalid mark given.");
+        } // Ensure that the given mark is present in the schema
+
+
+        var markType = schema.marks[mark.type];
+
+        if (!markType) {
+          throw new Error("update(): Invalid ADF mark type '".concat(mark.type, "'."));
+        }
+
+        if (!node.type.allowsMarkType(markType)) {
+          throw new Error("update(): Node of type '".concat(node.type.name, "' does not allow marks of type '").concat(mark.type, "'."));
+        }
+
+        return {
+          mark: markType,
+          attrs: mark.attrs
+        };
+      };
+
+      var newMarks = (_changedValues$marks = changedValues.marks) === null || _changedValues$marks === void 0 ? void 0 : _changedValues$marks.map(ensureValidMark).map(function (_ref3) {
+        var mark = _ref3.mark,
+            attrs = _ref3.attrs;
+        return mark.create(attrs);
+      }); // Validate if the new attributes result in a valid node.
+      // We're doing this by relying on `createChecked`, which validates attributes,
+      // and if we don't exit - we assume validity.
+
+      try {
+        node.type.createChecked(changedValues.attrs, node.content, newMarks);
+      } catch (err) {
+        throw new Error("update(): The given ADFEntity cannot be inserted in the current position.\n".concat(err));
+      }
+
+      tr.setNodeMarkup(pos, undefined, changedValues.attrs, newMarks); // Analytics - tracking the api call
+
+      var apiCallPayload = extensionAPICallPayload('update');
+      (0, _analytics.addAnalytics)(state, tr, apiCallPayload);
+      dispatch(tr);
     }
   };
   return {

package/dist/cjs/plugins/extension/plugin-factory.js

@@ -15,9 +15,9 @@ var _reducer = _interopRequireDefault(require("./reducer"));
 
 var _pluginKey = require("./plugin-key");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var factory = (0, _pluginStateFactory.pluginFactory)(_pluginKey.pluginKey, _reducer.default, {
   mapping: function mapping(tr, state) {

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

@@ -32,7 +32,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _extensions = require("@atlaskit/editor-common/extensions");
 
@@ -302,7 +302,7 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
   var extensionNodeViewOptions = {
     appearance: options.appearance
   };
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: state,
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);