@atlaskit/editor-core 187.34.2 → 187.35.1

package/dist/cjs/plugins/code-block/actions.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = exports.ignoreFollowingMutations = exports.copyContentToClipboard = exports.changeLanguage = void 0;
+exports.copyContentToClipboard = exports.changeLanguage = void 0;
+exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
+exports.ignoreFollowingMutations = void 0;
+exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
+exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _pluginKey = require("./plugin-key");
@@ -11,7 +15,10 @@ var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelection
 var _actions = require("./pm-plugins/actions");
 var _clipboard = require("../../utils/clipboard");
 var _utils2 = require("../analytics/utils");
-var _types = require("../analytics/types");
+var _insert = require("@atlaskit/editor-common/insert");
+var _transformToCodeBlock = require("./transform-to-code-block");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var removeCodeBlock = function removeCodeBlock(state, dispatch) {
   var nodes = state.schema.nodes,
     tr = state.tr;
@@ -42,12 +49,12 @@ var changeLanguage = function changeLanguage(language) {
     var result = tr.setSelection(selection);
     if (dispatch) {
       dispatch((0, _utils2.addAnalytics)(state, result, {
-        action: _types.ACTION.LANGUAGE_SELECTED,
-        actionSubject: _types.ACTION_SUBJECT.CODE_BLOCK,
+        action: _analytics.ACTION.LANGUAGE_SELECTED,
+        actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
         attributes: {
           language: language
         },
-        eventType: _types.EVENT_TYPE.TRACK
+        eventType: _analytics.EVENT_TYPE.TRACK
       }));
     }
     return true;
@@ -125,4 +132,74 @@ var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollowingMut
   }
   return true;
 };
-exports.resetShouldIgnoreFollowingMutations = resetShouldIgnoreFollowingMutations;
+
+/**
+ * This function creates a new transaction that inserts a code block,
+ * if there is text selected it will wrap the current selection if not it will
+ * append the codeblock to the end of the document.
+ */
+exports.resetShouldIgnoreFollowingMutations = resetShouldIgnoreFollowingMutations;
+function createInsertCodeBlockTransaction(_ref) {
+  var _state$selection$$fro;
+  var state = _ref.state;
+  var tr = state.tr;
+  var from = state.selection.from;
+  var codeBlock = state.schema.nodes.codeBlock;
+  var grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+  var parentNodeType = state.selection.$from.parent.type;
+
+  /** We always want to append a codeBlock unless we're inserting into a paragraph
+   * AND it's a valid child of the grandparent node.
+   * Insert the current selection as codeBlock content unless it contains nodes other
+   * than paragraphs and inline.
+   */
+  var canInsertCodeBlock = (0, _insert.shouldSplitSelectedNodeOnNodeInsertion)({
+    parentNodeType: parentNodeType,
+    grandParentNodeType: grandParentNodeType,
+    content: codeBlock.createAndFill()
+  }) && contentAllowedInCodeBlock(state);
+  if (canInsertCodeBlock) {
+    tr = (0, _transformToCodeBlock.transformToCodeBlockAction)(state, from);
+  } else {
+    (0, _utils.safeInsert)(codeBlock.createAndFill())(tr).scrollIntoView();
+  }
+  return tr;
+}
+
+/**
+ * Check if the current selection contains any nodes that are not permitted
+ * as codeBlock child nodes. Note that this allows paragraphs and inline nodes
+ * as we extract their text content.
+ */
+function contentAllowedInCodeBlock(state) {
+  var _state$selection = state.selection,
+    $from = _state$selection.$from,
+    $to = _state$selection.$to;
+  var isAllowedChild = true;
+  state.doc.nodesBetween($from.pos, $to.pos, function (node) {
+    if (!isAllowedChild) {
+      return false;
+    }
+    return isAllowedChild = node.type === state.schema.nodes.listItem || node.type === state.schema.nodes.bulletList || node.type === state.schema.nodes.orderedList || node.type === state.schema.nodes.paragraph || node.isInline || node.isText;
+  });
+  return isAllowedChild;
+}
+function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
+  return (0, _editorAnalytics.withAnalytics)(analyticsAPI, {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod: inputMethod
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  })(function (state, dispatch) {
+    var tr = createInsertCodeBlockTransaction({
+      state: state
+    });
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  });
+}

package/dist/cjs/plugins/code-block/index.js

@@ -17,11 +17,10 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _messages = require("../block-type/messages");
 var _refreshBrowserSelection = _interopRequireDefault(require("./refresh-browser-selection"));
-var _blockType = require("../block-type/commands/block-type");
+var _actions = require("./actions");
+var _inputRule = require("./pm-plugins/input-rule");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Theres an existing interelationship between these files, where the imported function is being called for code-block
-// Insertions via the drop down menu
-// tslint-ignore-next-line
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var codeBlockPlugin = function codeBlockPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
@@ -44,6 +43,13 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
             appearance: (_options$appearance = options === null || options === void 0 ? void 0 : options.appearance) !== null && _options$appearance !== void 0 ? _options$appearance : 'comment'
           }));
         }
+      }, {
+        name: 'codeBlockInputRule',
+        plugin: function plugin(_ref3) {
+          var _api$analytics;
+          var schema = _ref3.schema;
+          return (0, _inputRule.createCodeBlockInputRule)(schema, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
       }, {
         name: 'codeBlockIDEKeyBindings',
         plugin: function plugin() {
@@ -51,8 +57,8 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         }
       }, {
         name: 'codeBlockKeyMap',
-        plugin: function plugin(_ref3) {
-          var schema = _ref3.schema;
+        plugin: function plugin(_ref4) {
+          var schema = _ref4.schema;
           return (0, _keymaps.default)(schema);
         }
       }, {
@@ -67,9 +73,18 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
     onEditorViewStateUpdated: function onEditorViewStateUpdated(props) {
       (0, _refreshBrowserSelection.default)(props.originalTransaction, props.newEditorState);
     },
+    actions: {
+      /*
+       * Function will insert code block at current selection if block is empty or below current selection and set focus on it.
+       */
+      insertCodeBlock: function insertCodeBlock(inputMethod) {
+        var _api$analytics2;
+        return (0, _actions.insertCodeBlockWithAnalytics)(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+      }
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref5) {
+        var formatMessage = _ref5.formatMessage;
         return [{
           id: 'codeblock',
           title: formatMessage(_messages.messages.codeblock),
@@ -80,12 +95,12 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
           icon: function icon() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCode, null);
           },
-          action: function action(insert, state) {
-            var _api$analytics;
-            var tr = (0, _blockType.createInsertCodeBlockTransaction)({
+          action: function action(_insert, state) {
+            var _api$analytics3;
+            var tr = (0, _actions.createInsertCodeBlockTransaction)({
               state: state
             });
-            api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+            api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,

package/dist/cjs/plugins/code-block/pm-plugins/input-rule.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCodeBlockInputRule = createCodeBlockInputRule;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils2 = require("@atlaskit/editor-common/utils");
+var _transformToCodeBlock = require("../transform-to-code-block");
+var _commands = require("@atlaskit/editor-common/commands");
+function createCodeBlockInputRule(schema, editorAnalyticsAPI) {
+  var rules = getCodeBlockRules(editorAnalyticsAPI, schema);
+  return (0, _prosemirrorInputRules.createPlugin)('code-block-input-rule', rules, {
+    isBlockNodeRule: true
+  });
+}
+
+/**
+ * Get all code block input rules
+ *
+ * @param {Schema} schema
+ * @returns {InputRuleWithHandler[]}
+ */
+function getCodeBlockRules(editorAnalyticsAPI, schema) {
+  var ruleAnalytics = (0, _utils2.inputRuleWithAnalytics)({
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.CODE_BLOCK,
+    attributes: {
+      inputMethod: _analytics.INPUT_METHOD.FORMATTING
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  }, editorAnalyticsAPI);
+  var validMatchLength = function validMatchLength(match) {
+    return match.length > 0 && match[0].length === 3;
+  };
+  var threeTildeRule = (0, _prosemirrorInputRules.createRule)(/(?!\s)(`{3,})$/, function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+    var attributes = {};
+    if (match[4]) {
+      attributes.language = match[4];
+    }
+    if ((0, _transformToCodeBlock.isConvertableToCodeBlock)(state)) {
+      return (0, _transformToCodeBlock.transformToCodeBlockAction)(state, start, attributes);
+    }
+    var tr = state.tr;
+    tr.delete(start, end);
+    var codeBlock = tr.doc.type.schema.nodes.codeBlock.createChecked();
+    (0, _utils.safeInsert)(codeBlock)(tr);
+    return tr;
+  });
+  var leftNodeReplacementThreeTildeRule = (0, _prosemirrorInputRules.createRule)(new RegExp("((".concat(_prosemirrorInputRules.leafNodeReplacementCharacter, "`{3,})|^\\s(`{3,}))(\\S*)$")), function (state, match, start, end) {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+    var attributes = {};
+    if (match[4]) {
+      attributes.language = match[4];
+    }
+    var inlineStart = Math.max(match.index + state.selection.$from.start(), 1);
+    return (0, _commands.insertBlock)(state, schema.nodes.codeBlock, inlineStart, end, attributes);
+  });
+  return [ruleAnalytics(threeTildeRule), ruleAnalytics(leftNodeReplacementThreeTildeRule)];
+}

package/dist/cjs/plugins/date/ui/DatePicker/index.js

@@ -31,7 +31,7 @@ var _templateObject;
 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 PopupWithListeners = (0, _withOuterListeners.default)(_ui.Popup);
-var popupContentWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"));
+var popupContentWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background-color: ", ";\n"])), "var(--ds-space-025, 2px)", (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"));
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DatePicker, _React$Component);
   var _super = _createSuper(DatePicker);
@@ -158,7 +158,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         year: year,
         selected: selected,
         ref: this.handleRef,
-        weekStartDay: weekStartDay
+        weekStartDay: weekStartDay,
+        testId: 'datepicker'
       })));
     }
   }]);

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

@@ -12,8 +12,8 @@ var _analytics = require("../analytics");
 var _gapCursorSelection = require("../selection/gap-cursor-selection");
 var _utils2 = require("./utils");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
-var _blockType = require("../block-type/commands/block-type");
-var _utils3 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("@atlaskit/editor-common/utils");
+var _utils4 = require("@atlaskit/editor-prosemirror/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var setExpandRef = function setExpandRef(ref) {
@@ -124,7 +124,7 @@ var insertExpand = function insertExpand(state, dispatch) {
   if (!expandNode) {
     return false;
   }
-  var tr = state.selection.empty ? (0, _utils3.safeInsert)(expandNode)(state.tr).scrollIntoView() : (0, _blockType.createWrapSelectionTransaction)({
+  var tr = state.selection.empty ? (0, _utils4.safeInsert)(expandNode)(state.tr).scrollIntoView() : (0, _utils3.createWrapSelectionTransaction)({
     state: state,
     type: expandNode.type
   });

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

@@ -22,7 +22,7 @@ var _analytics = require("../analytics");
 var _toolbar = require("./toolbar");
 var _commands = require("./commands");
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
-var _blockType = require("../block-type/commands/block-type");
+var _utils = require("@atlaskit/editor-common/utils");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 var expandPlugin = function expandPlugin(_ref) {
   var _api$featureFlags;
@@ -75,7 +75,7 @@ var expandPlugin = function expandPlugin(_ref) {
             if (!node) {
               return false;
             }
-            var tr = state.selection.empty ? insert(node) : (0, _blockType.createWrapSelectionTransaction)({
+            var tr = state.selection.empty ? insert(node) : (0, _utils.createWrapSelectionTransaction)({
               state: state,
               type: node.type
             });

package/dist/cjs/plugins/index.js

@@ -47,12 +47,6 @@ Object.defineProperty(exports, "betterTypeHistoryPlugin", {
     return _betterTypeHistory.default;
   }
 });
-Object.defineProperty(exports, "blockPluginStateKey", {
-  enumerable: true,
-  get: function get() {
-    return _blockType.pluginKey;
-  }
-});
 Object.defineProperty(exports, "blockTypePlugin", {
   enumerable: true,
   get: function get() {
@@ -354,7 +348,7 @@ Object.defineProperty(exports, "viewUpdateSubscriptionPlugin", {
   }
 });
 var _base = require("./base");
-var _blockType = _interopRequireWildcard(require("./block-type"));
+var _blockType = _interopRequireDefault(require("./block-type"));
 var _betterTypeHistory = _interopRequireDefault(require("./better-type-history"));
 var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("./clear-marks-on-change-to-empty-document"));
 var _codeBlock = _interopRequireDefault(require("./code-block"));

package/dist/cjs/plugins/insert-block/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _main = require("../block-type/pm-plugins/main");
 var _pluginKey = require("../media/pm-plugins/plugin-key");
 var _utils = require("../type-ahead/utils");
 var _layout = require("../layout");
@@ -15,25 +14,45 @@ var _macro = require("../macro");
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _key = require("../type-ahead/pm-plugins/key");
-var _commands = require("../block-type/commands");
+var _types = require("../block-type/types");
 var _analytics = require("../analytics");
 var _pluginKey2 = require("../placeholder-text/plugin-key");
 var _pluginKey3 = require("../macro/plugin-key");
-var _types = require("../../ui/Toolbar/types");
+var _types2 = require("../../ui/Toolbar/types");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
   switch (toolbarSize) {
-    case _types.ToolbarSize.XXL:
-    case _types.ToolbarSize.XL:
-    case _types.ToolbarSize.L:
-    case _types.ToolbarSize.M:
+    case _types2.ToolbarSize.XXL:
+    case _types2.ToolbarSize.XL:
+    case _types2.ToolbarSize.L:
+    case _types2.ToolbarSize.M:
       return 7;
-    case _types.ToolbarSize.S:
+    case _types2.ToolbarSize.S:
       return 2;
     default:
       return 0;
   }
 };
+/**
+ * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
+ * @param name Block name
+ */
+function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
+  return function (name) {
+    if (name === _types.CODE_BLOCK.name && insertCodeBlock) {
+      return insertCodeBlock(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    if (name === _types.PANEL.name && insertPanel) {
+      return insertPanel(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    if (name === _types.BLOCK_QUOTE.name && insertBlockQuote) {
+      return insertBlockQuote(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    return function () {
+      return false;
+    };
+  };
+}
 var insertBlockPlugin = function insertBlockPlugin(_ref) {
   var _api$featureFlags;
   var _ref$config = _ref.config,
@@ -60,16 +79,13 @@ var insertBlockPlugin = function insertBlockPlugin(_ref) {
         return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
           plugins: {
             typeAheadState: _key.pluginKey,
-            // needed to check isTypeAheadAllowed in ToolbarInsertBlock
-            blockTypeState: _main.pluginKey,
             mediaState: _pluginKey.stateKey,
             macroState: _pluginKey3.pluginKey,
             placeholderTextState: _pluginKey2.pluginKey,
             layoutState: _layout.pluginKey
           },
           render: function render(_ref3) {
-            var blockTypeState = _ref3.blockTypeState,
-              mediaState = _ref3.mediaState,
+            var mediaState = _ref3.mediaState,
               _ref3$macroState = _ref3.macroState,
               macroState = _ref3$macroState === void 0 ? {} : _ref3$macroState,
               placeholderTextState = _ref3.placeholderTextState,
@@ -88,7 +104,6 @@ var insertBlockPlugin = function insertBlockPlugin(_ref) {
               isToolbarReducedSpacing: isToolbarReducedSpacing,
               isLastItem: isLastItem,
               featureFlags: featureFlags,
-              blockTypeState: blockTypeState,
               mediaState: mediaState,
               macroState: macroState,
               placeholderTextState: placeholderTextState,
@@ -108,11 +123,10 @@ var insertBlockPlugin = function insertBlockPlugin(_ref) {
   };
 };
 function ToolbarInsertBlockWithInjectionApi(_ref4) {
-  var _pluginInjectionApi$a2, _pluginInjectionApi$i;
+  var _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b;
   var editorView = _ref4.editorView,
     editorActions = _ref4.editorActions,
     dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent,
-    providerFactory = _ref4.providerFactory,
     popupsMountPoint = _ref4.popupsMountPoint,
     popupsBoundariesElement = _ref4.popupsBoundariesElement,
     popupsScrollableElement = _ref4.popupsScrollableElement,
@@ -123,28 +137,19 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     providers = _ref4.providers,
     pluginInjectionApi = _ref4.pluginInjectionApi,
     options = _ref4.options,
-    blockTypeState = _ref4.blockTypeState,
     mediaState = _ref4.mediaState,
     macroState = _ref4.macroState,
     placeholderTextState = _ref4.placeholderTextState,
     layoutState = _ref4.layoutState,
     featureFlags = _ref4.featureFlags;
   var buttons = toolbarSizeToButtons(toolbarSize);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
     mentionState = _useSharedPluginState.mentionState,
-    emojiState = _useSharedPluginState.emojiState;
-
-  /**
-   * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
-   * @param name Block name
-   */
-  var handleInsertBlockType = _react.default.useCallback(function (name) {
-    var _pluginInjectionApi$a;
-    return (0, _commands.insertBlockTypesWithAnalytics)(name, _analytics.INPUT_METHOD.TOOLBAR, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions);
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions]);
+    emojiState = _useSharedPluginState.emojiState,
+    blockTypeState = _useSharedPluginState.blockTypeState;
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -174,7 +179,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     emojiProvider: providers.emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
-    onInsertBlockType: handleInsertBlockType,
+    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
     onInsertMacroFromMacroBrowser: _macro.insertMacroFromMacroBrowser,
     macroProvider: macroState.macroProvider,
     popupsMountPoint: popupsMountPoint,
@@ -185,7 +190,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
     showElementBrowserLink: options.showElementBrowserLink,
-    showSeparator: !isLastItem && toolbarSize <= _types.ToolbarSize.S,
+    showSeparator: !isLastItem && toolbarSize <= _types2.ToolbarSize.S,
     featureFlags: featureFlags
   });
 }

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -78,7 +78,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
-        state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
@@ -86,29 +85,32 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
+      var newLayout = _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
         }
         return {
-          width: newPct,
           layout: newLayout
         };
       } else {
         return {
-          width: _this.props.pctWidth || null,
           layout: newLayout
         };
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
+      if (isNestedNode) {
+        return 'center';
+      }
       if (fullWidthMode) {
         if (width < contentWidth) {
           return 'center';
         }
         return 'full-width';
       }
+
+      // handle top-level node in fixed-width editor
       if (width <= contentWidth) {
         return 'center';
       }
@@ -154,7 +156,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return dispatch(tr);
     }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
-      if (fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
         return contentWidth;
       }
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
@@ -269,14 +271,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       _this.setIsResizing(false);
       _this.displayGuideline([]);
+      var newWidth = width;
+      if (calculatedWidthWithLayout.layout === 'full-width') {
+        // When a node reaches full width in current viewport,
+        // update its width with 1800 to align with pixel entry
+        newWidth = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      }
       _this.setState({
         isResizing: false,
         size: {
-          width: width,
+          width: newWidth,
           height: height
         }
       }, function () {
-        updateSize(width, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, calculatedWidthWithLayout.layout);
       });
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
@@ -298,7 +306,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -324,18 +331,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
-      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
-        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
-        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
-        this.setState(function (prevState) {
-          return {
-            size: {
-              width: (0, _mediaSingle.calcMediaSingleMaxWidth)(_this2.props.containerWidth),
-              height: prevState.size.height
-            }
-          };
-        });
-      }
       return true;
     }
   }, {
@@ -503,7 +498,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -521,7 +516,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this3.insideInlineLike) {
+        if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;
         }
       });
@@ -533,9 +528,23 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
-      var maxWidth = this.isNestedNode() ? undefined // fall back to 'max-width: 100%'
-      : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var maxWidth = !isResizing && this.isNestedNode() ?
+      // set undefined to fall back to 100%
+      undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
+      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
+        if (!isNestedNode) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          }
+        };
+      };
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -561,7 +570,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
         handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
-        isHandleVisible: selected
+        isHandleVisible: selected,
+        handleStyles: nestedHandleStyles(this.isNestedNode())
       }, children));
     }
   }]);