@atlaskit/editor-core 176.0.3 → 177.0.0

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

@@ -133,6 +133,8 @@ exports.openLinkSettings = openLinkSettings;
 
 var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPickerOptions) {
   return function (state, intl, providerFactory) {
+    var _linkPickerOptions$pl;
+
     var _state$schema$nodes = state.schema.nodes,
         inlineCard = _state$schema$nodes.inlineCard,
         blockCard = _state$schema$nodes.blockCard,
@@ -159,10 +161,22 @@ var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPicker
     } : {}; // Applies padding override for when link picker is currently displayed
 
     var className = pluginState.showLinkingToolbar ? _styles2.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-    return _objectSpread(_objectSpread(_objectSpread({
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+    var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(state),
+        lpLinkPicker = _getFeatureFlags.lpLinkPicker,
+        lpLinkPickerFocusTrap = _getFeatureFlags.lpLinkPickerFocusTrap,
+        preventPopupOverflow = _getFeatureFlags.preventPopupOverflow;
+
+    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    var isLinkPickerEnabled = !!lpLinkPicker && !!(linkPickerOptions !== null && linkPickerOptions !== void 0 && (_linkPickerOptions$pl = linkPickerOptions.plugins) !== null && _linkPickerOptions$pl !== void 0 && _linkPickerOptions$pl.length);
+    return _objectSpread(_objectSpread({
       title: intl.formatMessage(_messages2.messages.card),
       className: className,
-      nodeType: nodeType
+      nodeType: nodeType,
+      preventPopupOverflow: preventPopupOverflow
     }, toolbarOffset), {}, {
       getDomRef: function getDomRef(view) {
         var element = (0, _prosemirrorUtils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
@@ -177,10 +191,10 @@ var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPicker
 
         return element;
       },
-      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions)
-    }, pluginState.showLinkingToolbar ? _EditLinkToolbar.editLinkToolbarConfig : {}), {}, {
-      scrollable: pluginState.showLinkingToolbar ? false : true
-    });
+      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
+      scrollable: pluginState.showLinkingToolbar ? false : true,
+      focusTrap: shouldEnableFocusTrap && pluginState.showLinkingToolbar
+    }, (0, _EditLinkToolbar.editLinkToolbarConfig)(pluginState.showLinkingToolbar, isLinkPickerEnabled));
   };
 };
 
@@ -267,6 +281,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }]
       }], (0, _toConsumableArray2.default)(getSettingsButtonGroup(state, intl)), [{
         id: 'editor.link.delete',
+        focusEditoronEnter: true,
         type: 'button',
         appearance: 'danger',
         icon: _remove.default,
@@ -322,6 +337,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
 var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard) {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
+    focusEditoronEnter: true,
     type: 'button',
     title: intl.formatMessage(_messages.linkToolbarMessages.unlink),
     icon: _unlink.default,
@@ -332,8 +348,8 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
 };
 
 var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl) {
-  var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(state),
-      floatingToolbarLinkSettingsButton = _getFeatureFlags.floatingToolbarLinkSettingsButton;
+  var _getFeatureFlags2 = (0, _featureFlagsContext.getFeatureFlags)(state),
+      floatingToolbarLinkSettingsButton = _getFeatureFlags2.floatingToolbarLinkSettingsButton;
 
   return floatingToolbarLinkSettingsButton === 'true' ? [{
     id: 'editor.link.settings',

package/dist/cjs/plugins/card/ui/EditLinkToolbar.js

@@ -123,8 +123,8 @@ var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
       linkPicker = _ref.linkPicker;
   return {
     type: 'custom',
-    fallback: [],
     disableArrowNavigation: true,
+    fallback: [],
     render: function render(view, idx) {
       if (!view || !providerFactory) {
         return null;
@@ -159,9 +159,13 @@ var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
 };
 
 exports.buildEditLinkToolbar = buildEditLinkToolbar;
-var editLinkToolbarConfig = {
-  height: _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX,
-  width: _ToolbarComponents.RECENT_SEARCH_WIDTH_IN_PX,
-  forcePlacement: true
+
+var editLinkToolbarConfig = function editLinkToolbarConfig(showLinkingToolbar, linkPickerOptions) {
+  return showLinkingToolbar ? {
+    height: linkPickerOptions ? _ToolbarComponents.LINKPICKER_HEIGHT_IN_PX : _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX,
+    width: _ToolbarComponents.RECENT_SEARCH_WIDTH_IN_PX,
+    forcePlacement: true
+  } : {};
 };
+
 exports.editLinkToolbarConfig = editLinkToolbarConfig;

package/dist/cjs/plugins/card/ui/LinkToolbarAppearance.js

@@ -21,31 +21,23 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _prosemirrorModel = require("prosemirror-model");
 
-var _doc = require("../pm-plugins/doc");
-
-var _nodes = require("../../../utils/nodes");
-
-var _Dropdown = _interopRequireDefault(require("../../floating-toolbar/ui/Dropdown"));
-
-var _messages = require("../messages");
+var _react = _interopRequireDefault(require("react"));
 
-var _messages2 = _interopRequireDefault(require("../../../messages"));
+var _messages = _interopRequireDefault(require("../../../messages"));
 
-var _featureFlagsContext = require("../../../plugins/feature-flags-context");
+var _nodes = require("../../../utils/nodes");
 
-var _LinkToolbarIconDropdown = require("./LinkToolbarIconDropdown");
+var _messages2 = require("../messages");
 
-var _LinkToolbarButtonGroup = require("./LinkToolbarButtonGroup");
+var _doc = require("../pm-plugins/doc");
 
 var _linkToolbarButtonGroupOptions = require("./link-toolbar-button-group-options");
 
-var _linkToolbarIconDropdownOptions = require("./link-toolbar-icon-dropdown-options");
+var _LinkToolbarButtonGroup = require("./LinkToolbarButtonGroup");
 
 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); }; }
 
@@ -90,7 +82,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var isEmbedCardLinkSupportedInParent = allowEmbeds ? (0, _nodes.isSupportedInParent)(editorState, _prosemirrorModel.Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
       var embedOption = allowEmbeds && preview && {
         appearance: 'embed',
-        title: intl.formatMessage(_messages.messages.embed),
+        title: intl.formatMessage(_messages2.messages.embed),
         onClick: (0, _doc.setSelectedCardAppearance)('embed'),
         selected: currentAppearance === 'embed',
         hidden: false,
@@ -99,7 +91,7 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
       };
       var options = [{
-        title: intl.formatMessage(_messages.messages.url),
+        title: intl.formatMessage(_messages2.messages.url),
         onClick: function onClick() {
           return (0, _doc.changeSelectedCardToLink)(url, url, true)(editorState, view === null || view === void 0 ? void 0 : view.dispatch);
         },
@@ -107,13 +99,13 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         testId: 'url-appearance'
       }, {
         appearance: 'inline',
-        title: intl.formatMessage(_messages.messages.inline),
+        title: intl.formatMessage(_messages2.messages.inline),
         onClick: (0, _doc.setSelectedCardAppearance)('inline'),
         selected: currentAppearance === 'inline',
         testId: 'inline-appearance'
       }, {
         appearance: 'block',
-        title: intl.formatMessage(_messages.messages.block),
+        title: intl.formatMessage(_messages2.messages.block),
         onClick: (0, _doc.setSelectedCardAppearance)('block'),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
@@ -133,37 +125,11 @@ var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         options.push(embedOption);
       }
 
-      var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(editorState),
-          viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
-
-      if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
-        return /*#__PURE__*/_react.default.createElement(_LinkToolbarButtonGroup.LinkToolbarButtonGroup, {
-          key: "link-toolbar-button-group",
-          options: options.map(function (option) {
-            return (0, _linkToolbarButtonGroupOptions.getButtonGroupOption)(intl, dispatchCommand, option);
-          })
-        });
-      }
-
-      if (viewChangingExperimentToolbarStyle === 'newDropdown') {
-        return /*#__PURE__*/_react.default.createElement(_LinkToolbarIconDropdown.LinkToolbarIconDropdown, {
-          key: "link-toolbar-icon-dropdown",
-          title: "Change view",
-          buttonTestId: "link-toolbar-appearance-button",
-          dispatchCommand: dispatchCommand,
-          options: options.map(function (option) {
-            return (0, _linkToolbarIconDropdownOptions.getIconDropdownOption)(intl, dispatchCommand, option);
-          })
-        });
-      }
-
-      var title = intl.formatMessage(currentAppearance ? _messages.messages[currentAppearance] : _messages.messages.url);
-      return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
-        key: "link-toolbar",
-        buttonTestId: "link-toolbar-appearance-button",
-        title: title,
-        dispatchCommand: dispatchCommand,
-        options: options
+      return /*#__PURE__*/_react.default.createElement(_LinkToolbarButtonGroup.LinkToolbarButtonGroup, {
+        key: "link-toolbar-button-group",
+        options: options.map(function (option) {
+          return (0, _linkToolbarButtonGroupOptions.getButtonGroupOption)(intl, dispatchCommand, option);
+        })
       });
     });
     return _this;
@@ -188,14 +154,14 @@ exports.LinkToolbarAppearance = LinkToolbarAppearance;
 var getUnavailableMessage = function getUnavailableMessage(state, intl) {
   try {
     var parentNode = state.selection.$from.node(1);
-    var parentName = intl.formatMessage(_messages2.default[parentNode.type.name]);
-    var tooltip = intl.formatMessage(_messages.messages.displayOptionUnavailableInParentNode, {
+    var parentName = intl.formatMessage(_messages.default[parentNode.type.name]);
+    var tooltip = intl.formatMessage(_messages2.messages.displayOptionUnavailableInParentNode, {
       node: parentName
     });
     return tooltip;
   } catch (e) {
-    return intl.formatMessage(_messages.messages.displayOptionUnavailableInParentNode, {
-      node: intl.formatMessage(_messages2.default.defaultBlockNode)
+    return intl.formatMessage(_messages2.messages.displayOptionUnavailableInParentNode, {
+      node: intl.formatMessage(_messages.default.defaultBlockNode)
     });
   }
 };

package/dist/cjs/plugins/card/utils.js

@@ -76,13 +76,15 @@ var findCardInfo = function findCardInfo(state) {
 
 exports.findCardInfo = findCardInfo;
 
-var transformUnsupportedBlockCardToInline = function transformUnsupportedBlockCardToInline(slice, state) {
+var transformUnsupportedBlockCardToInline = function transformUnsupportedBlockCardToInline(slice, state, cardOptions) {
   var _state$schema$nodes = state.schema.nodes,
       blockCard = _state$schema$nodes.blockCard,
       inlineCard = _state$schema$nodes.inlineCard;
   var children = [];
   (0, _slice.mapChildren)(slice.content, function (node, i, frag) {
-    if (node.type === blockCard && !(0, _nodes.isSupportedInParent)(state, frag)) {
+    var _cardOptions$allowBlo;
+
+    if (node.type === blockCard && !isBlockCardSupported(state, frag, (_cardOptions$allowBlo = cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards) !== null && _cardOptions$allowBlo !== void 0 ? _cardOptions$allowBlo : false)) {
       children.push(inlineCard.createChecked(node.attrs, node.content, node.marks));
     } else {
       children.push(node);
@@ -90,5 +92,17 @@ var transformUnsupportedBlockCardToInline = function transformUnsupportedBlockCa
   });
   return new _prosemirrorModel.Slice(_prosemirrorModel.Fragment.fromArray(children), slice.openStart, slice.openEnd);
 };
+/**
+ * Function to determine if a block card is supported by the editor
+ * @param state
+ * @param frag
+ * @param allowBlockCards
+ * @returns
+ */
+
+
+exports.transformUnsupportedBlockCardToInline = transformUnsupportedBlockCardToInline;
 
-exports.transformUnsupportedBlockCardToInline = transformUnsupportedBlockCardToInline;
+var isBlockCardSupported = function isBlockCardSupported(state, frag, allowBlockCards) {
+  return allowBlockCards && (0, _nodes.isSupportedInParent)(state, frag);
+};

package/dist/cjs/plugins/collab-edit/actions.js

@@ -29,7 +29,7 @@ var handleInit = function handleInit(initData, view, options) {
     tr.setMeta('isRemote', true);
     view.dispatch(tr);
   } else if (json) {
-    applyRemoteSteps(json, undefined, view);
+    applyRemoteSteps(json, view);
   }
 };
 
@@ -55,13 +55,13 @@ var applyRemoteData = function applyRemoteData(remoteData, view, options) {
       userIds = _remoteData$userIds === void 0 ? [] : _remoteData$userIds;
 
   if (json) {
-    applyRemoteSteps(json, userIds, view, options);
+    applyRemoteSteps(json, view, userIds, options);
   }
 };
 
 exports.applyRemoteData = applyRemoteData;
 
-var applyRemoteSteps = function applyRemoteSteps(json, userIds, view, options) {
+var applyRemoteSteps = function applyRemoteSteps(json, view, userIds, options) {
   if (!json || !json.length) {
     return;
   }

package/dist/cjs/plugins/copy-button/toolbar.js

@@ -37,7 +37,9 @@ function getCopyButtonConfig(options) {
   var state = options.state,
       formatMessage = options.formatMessage,
       onMouseEnter = options.onMouseEnter,
-      onMouseLeave = options.onMouseLeave;
+      onMouseLeave = options.onMouseLeave,
+      onFocus = options.onFocus,
+      onBlur = options.onBlur;
 
   var copyButtonState = _pluginKey.copyButtonPluginKey.getState(state);
 
@@ -49,11 +51,11 @@ function getCopyButtonConfig(options) {
       // Note for future changes: these two handlers should perform
       // the same action.
       onMouseEnter: onMouseEnter || (0, _decoration.hoverDecoration)(options.nodeType, true, 'ak-editor-selected-node'),
-      onFocus: (0, _decoration.hoverDecoration)(options.nodeType, true, 'ak-editor-selected-node'),
+      onFocus: onFocus || (0, _decoration.hoverDecoration)(options.nodeType, true, 'ak-editor-selected-node'),
       // Note for future changes: these two handlers should perform
       // the same action.
       onMouseLeave: (0, _commands.resetCopiedState)(options.nodeType, onMouseLeave),
-      onBlur: (0, _commands.resetCopiedState)(options.nodeType)
+      onBlur: (0, _commands.resetCopiedState)(options.nodeType, onBlur)
     };
   } else {
     buttonActionHandlers = {

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

@@ -25,8 +25,6 @@ var _main = _interopRequireDefault(require("./pm-plugins/main"));
 
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 
-var _featureFlagsContext = require("../feature-flags-context");
-
 var _editorDisabled = require("../editor-disabled");
 
 var _assets = require("../quick-insert/assets");
@@ -84,8 +82,7 @@ var datePlugin = function datePlugin() {
           popupsMountPoint = _ref.popupsMountPoint,
           popupsBoundariesElement = _ref.popupsBoundariesElement,
           popupsScrollableElement = _ref.popupsScrollableElement;
-      var state = editorView.state,
-          dispatch = editorView.dispatch;
+      var dispatch = editorView.dispatch;
       var domAtPos = editorView.domAtPos.bind(editorView);
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         plugins: {
@@ -104,14 +101,11 @@ var datePlugin = function datePlugin() {
               isNew = datePlugin.isNew,
               focusDateInput = datePlugin.focusDateInput;
           var element = (0, _prosemirrorUtils.findDomRefAtPos)(showDatePickerAt, domAtPos);
-          var allFlags = (0, _featureFlagsContext.getFeatureFlags)(state);
-          var keyboardAccessibleDatepicker = allFlags.keyboardAccessibleDatepicker;
           return /*#__PURE__*/_react.default.createElement(DatePicker, {
             mountTo: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             scrollableElement: popupsScrollableElement,
             key: showDatePickerAt,
-            showTextField: keyboardAccessibleDatepicker,
             element: element,
             isNew: isNew,
             autoFocus: focusDateInput,

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

@@ -143,7 +143,6 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           mountTo = _this$props.mountTo,
           boundariesElement = _this$props.boundariesElement,
           scrollableElement = _this$props.scrollableElement,
-          showTextField = _this$props.showTextField,
           intl = _this$props.intl,
           dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
           isNew = _this$props.isNew,
@@ -181,7 +180,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         scrollableElement: scrollableElement
       }, (0, _react2.jsx)("div", {
         css: popupContentWrapper
-      }, showTextField === true && (0, _react2.jsx)(_datePickerInput.default, {
+      }, (0, _react2.jsx)(_datePickerInput.default, {
         date: date,
         onNewDate: this.handleNewDate,
         onSubmitDate: this.handleKeyboardSubmitDate,

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

@@ -38,8 +38,6 @@ var _assets = require("../quick-insert/assets");
 
 var _emoji3 = require("./nodeviews/emoji");
 
-var _EmojiContextProvider = require("./ui/EmojiContextProvider");
-
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 
 var _openTypeaheadAtCursor = require("../type-ahead/transforms/open-typeahead-at-cursor");
@@ -56,18 +54,13 @@ var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
       var isSelected = _ref.isSelected,
           onClick = _ref.onClick,
           onHover = _ref.onHover;
-      return (
-        /*#__PURE__*/
-        // It's required to pass emojiProvider through the context for custom emojis to work
-        _react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
-          emojiProvider: emojiProvider
-        }, /*#__PURE__*/_react.default.createElement(_emoji2.EmojiTypeAheadItem, {
-          emoji: emoji,
-          selected: isSelected,
-          onMouseMove: onHover,
-          onSelection: onClick
-        }))
-      );
+      return /*#__PURE__*/_react.default.createElement(_emoji2.EmojiTypeAheadItem, {
+        emoji: emoji,
+        selected: isSelected,
+        onMouseMove: onHover,
+        onSelection: onClick,
+        emojiProvider: emojiProvider
+      });
     },
     emoji: emoji
   };

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

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.containsClass = containsClass;
 exports.createPlugin = void 0;
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -24,7 +25,9 @@ var _classNames = require("../ui/class-names");
 var _pluginFactory = require("./plugin-factory");
 
 function containsClass(element, className) {
-  return !!element && element.classList.contains(className);
+  var _element$classList;
+
+  return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
 }
 
 var createPlugin = function createPlugin(dispatch, getIntl) {

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

@@ -47,6 +47,7 @@ var getToolbarConfig = function getToolbarConfig(state, _ref) {
         id: 'editor.expand.delete',
         type: 'button',
         appearance: 'danger',
+        focusEditoronEnter: true,
         icon: _remove.default,
         onClick: (0, _commands.deleteExpand)(),
         onMouseEnter: (0, _decoration.hoverDecoration)([nestedExpand, expand], true),

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeExtension = exports.forceAutoSave = exports.clearEditingContext = void 0;
+exports.removeExtension = exports.removeDescendantNodes = exports.forceAutoSave = exports.clearEditingContext = void 0;
 exports.setEditingContextToContextPanel = setEditingContextToContextPanel;
 exports.updateExtensionLayout = exports.showContextPanel = void 0;
 exports.updateState = updateState;
@@ -20,6 +20,8 @@ var _pluginFactory = require("./plugin-factory");
 
 var _utils = require("./utils");
 
+var _utils2 = require("@atlaskit/editor-common/utils");
+
 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 = 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; }
@@ -109,4 +111,17 @@ var removeExtension = function removeExtension() {
   });
 };
 
-exports.removeExtension = removeExtension;
+exports.removeExtension = removeExtension;
+
+var removeDescendantNodes = function removeDescendantNodes(sourceNode) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    return sourceNode ? (0, _utils2.removeConnectedNodes)(state, sourceNode) : tr;
+  });
+};
+
+exports.removeDescendantNodes = removeDescendantNodes;

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

@@ -327,6 +327,16 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
           if (!selectedExtension) {
             if (showContextPanel) {
               (0, _commands.clearEditingContext)(state, dispatch);
+            } // if an extension is no longer selected, but the plugin has cached the previous selected extension id/ref
+            // then this should clear those values so that if an exention is selected again, then this sees it as a change
+            // and updates the state correctly.
+
+
+            if (!!localId || !!element) {
+              (0, _commands.updateState)({
+                localId: undefined,
+                element: undefined
+              })(state, dispatch);
             }
 
             return;

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

@@ -45,15 +45,25 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Edit',
     description: 'Edit the properties for this extension.'
   },
+  deleteElementTitle: {
+    id: 'fabric.editor.extension.deleteElementTitle',
+    defaultMessage: 'Delete element',
+    description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
+  },
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Remove extension',
+    defaultMessage: 'Delete',
     description: 'Action button label for confirm modal when deleting an extension linked to a data consumer.'
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this extension will break anything connected to it.',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
     description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
+  confirmModalCheckboxLabel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
+    defaultMessage: 'Also delete connected elements',
+    description: 'checkbox label text'
   }
 });
 exports.messages = messages;
@@ -127,7 +137,8 @@ var editButton = function editButton(formatMessage, extensionState) {
       return true;
     },
     title: formatMessage(messages.edit),
-    tabIndex: null
+    tabIndex: null,
+    focusEditoronEnter: true
   }];
 };
 
@@ -146,9 +157,23 @@ var getToolbarConfig = function getToolbarConfig() {
       var confirmDialog;
 
       if ((0, _utils2.isReferencedSource)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-        confirmDialog = {
-          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-          message: formatMessage(messages.confirmDeleteLinkedModalMessage)
+        confirmDialog = function confirmDialog() {
+          return {
+            title: formatMessage(messages.deleteElementTitle),
+            okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+            message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+              nodeName: (0, _utils2.getNodeName)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+            }),
+            isReferentialityDialog: true,
+            getChildrenInfo: function getChildrenInfo() {
+              return (0, _utils2.getChildrenInfo)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            },
+            checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+            onConfirm: function onConfirm() {
+              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+              return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            }
+          };
         };
       }
 
@@ -183,6 +208,7 @@ var getToolbarConfig = function getToolbarConfig() {
           onMouseLeave: (0, _decoration.hoverDecoration)(nodeType, false),
           onFocus: (0, _decoration.hoverDecoration)(nodeType, true),
           onBlur: (0, _decoration.hoverDecoration)(nodeType, false),
+          focusEditoronEnter: true,
           title: formatMessage(_messages.default.remove),
           tabIndex: null,
           confirmDialog: confirmDialog
@@ -195,4 +221,20 @@ var getToolbarConfig = function getToolbarConfig() {
   };
 };
 
-exports.getToolbarConfig = getToolbarConfig;
+exports.getToolbarConfig = getToolbarConfig;
+
+var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {
+  return function (state, dispatch) {
+    if (!node) {
+      return false;
+    }
+
+    if (!isChecked) {
+      (0, _commands.removeExtension)()(state, dispatch);
+    } else {
+      (0, _commands.removeDescendantNodes)(node)(state, dispatch);
+    }
+
+    return true;
+  };
+};