@atlaskit/editor-core 187.41.1 → 187.41.4

package/dist/cjs/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -10,7 +10,7 @@ function findEmptySelectableParentNodePosition($pos, isValidPosition) {
   if ($pos.pos + 1 > doc.content.size) {
     return null;
   }
-  if ($pos.depth === 0) {
+  if ($pos.nodeBefore !== null) {
     if (isValidPosition($pos)) {
       return $pos;
     }

package/dist/cjs/plugins/selection/pm-plugins/events/keydown.js

@@ -26,8 +26,20 @@ var isCollpasedExpand = function isCollpasedExpand(node) {
 var isBodiedExtension = function isBodiedExtension(node) {
   return Boolean(node && ['bodiedExtension'].includes(node.type.name));
 };
+
+/**
+ * ED-19861 - [Regression] keyboard selections within action items are unpredicatable
+ * Table was added to the list of problematic nodes because the desired behaviour when Shift+Up from outside the
+ * table is to select the table node itself, rather than the table cell content. Previously this behaviour was handled
+ * in `packages/editor/editor-core/src/plugins/selection/pm-plugins/events/create-selection-between.ts` but there was
+ * a bug in `create-selection-between` which after fixing the bug that code was no longer handling table selection
+ * correctly, so to fix that table was added here.
+ */
+var isTable = function isTable(node) {
+  return Boolean(node && ['table'].includes(node.type.name));
+};
 var isProblematicNode = function isProblematicNode(node) {
-  return isCollpasedExpand(node) || isBodiedExtension(node);
+  return isCollpasedExpand(node) || isBodiedExtension(node) || isTable(node);
 };
 var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
   if ($head.pos === 0 || $head.depth === 0) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.41.1";
+var version = "187.41.4";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/extension/index.js

@@ -1,4 +1,5 @@
 import { extension, bodiedExtension, inlineExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createPlugin } from './pm-plugins/main';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
@@ -9,8 +10,13 @@ const extensionPlugin = ({
   config: options = {},
   api
 }) => {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  const editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes() {
@@ -48,18 +54,38 @@ const extensionPlugin = ({
       }, {
         name: 'extensionUniqueId',
         plugin: () => createUniqueIdPlugin()
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: () => {
+          return new SafePlugin({
+            view: editorView => {
+              editorViewRef.current = editorView;
+              return {
+                destroy: () => {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI
+      api: () => {
+        var _api$contextPanel2;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
         hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel4 = api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/es2019/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -3,7 +3,6 @@ import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
-import { createExtensionAPI } from '../../extension/extension-api';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 const noop = () => null;
@@ -21,8 +20,7 @@ const ExtensionButton = props => {
   const {
     item,
     node,
-    editorView,
-    applyChangeToContextPanel
+    extensionApi
   } = props;
   const ButtonIcon = React.useMemo(() => item.icon ? Loadable({
     loader: async () => resolveExtensionIcon(item.icon),
@@ -33,11 +31,7 @@ const ExtensionButton = props => {
       throw new Error(`'action' of context toolbar item '${item.key}' is not a function`);
     }
     const targetNodeAdf = nodeToJSON(node);
-    const api = createExtensionAPI({
-      editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
@@ -56,7 +50,8 @@ export const ExtensionsPlaceholder = props => {
     editorView,
     extensionProvider,
     separator,
-    applyChangeToContextPanel
+    applyChangeToContextPanel,
+    extensionApi
   } = props;
   const [extensions, setExtensions] = useState([]);
   useEffect(() => {
@@ -72,11 +67,8 @@ export const ExtensionsPlaceholder = props => {
   }, []);
   const nodeAdf = React.useMemo(() => nodeToJSON(node), [node]);
   const extensionItems = React.useMemo(() => {
-    return getContextualToolbarItemsFromModule(extensions, nodeAdf, createExtensionAPI({
-      editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -92,7 +84,8 @@ export const ExtensionsPlaceholder = props => {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));

package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js

@@ -49,7 +49,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
     useSomewhatSemanticTextColorNames: false
   };
   return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         const ButtonIcon = item.icon;
@@ -206,7 +206,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return jsx(Separator, {

package/dist/es2019/plugins/media/styles.js

@@ -142,9 +142,8 @@ export const mediaStyles = css`
         ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
     }
     /* Media resize handlers */
-    .richMedia-resize-handle-right::after,
-    .richMedia-resize-handle-left::after {
-      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
+    .resizer-handle-thumb {
+      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
     }
 
     /* Smart cards */
@@ -173,8 +172,7 @@ export const mediaStyles = css`
       box-shadow: 0 0 0 1px ${`var(--ds-border-warning, ${Y500})`} !important;
     }
 
-    .resizer-handle-left::after,
-    .resizer-handle-right::after {
+    .resizer-handle-thumb {
       background: ${`var(--ds-icon-warning, ${Y500})`} !important;
     }
   }

package/dist/es2019/plugins/media/toolbar/commands.js

@@ -1,8 +1,9 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { removeMediaGroupNode } from './utils';
+import { removeMediaGroupNode, getSelectedMediaSingle } from './utils';
 import { currentMediaNodeWithPos } from '../utils/current-media-node';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
 export const DEFAULT_BORDER_SIZE = 2;
@@ -179,4 +180,33 @@ export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) =>
     dispatch(tr);
   }
   return true;
+};
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, layout) => (state, dispatch) => {
+  const selectedMediaSingleNode = getSelectedMediaSingle(state);
+  if (!selectedMediaSingleNode) {
+    return false;
+  }
+  const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+    ...selectedMediaSingleNode.node.attrs,
+    width,
+    widthType: 'pixel',
+    layout
+  });
+  tr.setMeta('scrollIntoView', false);
+  tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+  const $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+  const parentNodeType = $pos ? $pos.parent.type.name : undefined;
+  const payload = getMediaInputResizeAnalyticsEvent('mediaSingle', {
+    width,
+    layout,
+    validation,
+    parentNode: parentNodeType
+  });
+  if (payload) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+  }
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
 };

package/dist/es2019/plugins/media/toolbar/index.js

@@ -20,7 +20,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
 import { isVideo } from '../utils/media-single';
-import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
@@ -318,17 +318,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               }
             },
             onSubmit: ({
-              width
+              width,
+              validation
             }) => {
-              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
-                ...selectedMediaSingleNode.node.attrs,
-                width,
-                widthType: 'pixel',
-                layout: calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled)
-              });
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
+              var _pluginInjectionApi$a4;
+              const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
@@ -388,14 +383,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$a4;
+                var _pluginInjectionApi$a5;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -421,8 +416,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a5;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
+    var _pluginInjectionApi$a6;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
       type: 'separator'
     });
   }
@@ -506,22 +501,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a6;
+    var _pluginInjectionApi$a7;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -45,25 +45,26 @@ export const PixelEntry = ({
     }
     if (onSubmit) {
       let widthToBeSumitted = data.inputWidth;
-      let isInvalidInput = false;
+      let validation = 'valid';
       if (data.inputWidth < minWidth) {
         widthToBeSumitted = minWidth;
-        isInvalidInput = true;
+        validation = 'less-than-min';
       }
       if (data.inputWidth > maxWidth) {
         widthToBeSumitted = maxWidth;
-        isInvalidInput = true;
+        validation = 'greater-than-max';
       }
 
       // If user keeps submitting an invalid input, node width attribute will be updated with the same value
       // and won't upadte the state in useEffect (since width is the same)
       // Thus, we set the state here to always display the correct dimension
-      if (isInvalidInput) {
+      if (validation !== 'valid') {
         setComputedWidth(widthToBeSumitted);
         setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: widthToBeSumitted
+        width: widthToBeSumitted,
+        validation
       });
     }
   };

package/dist/es2019/plugins/media/utils/analytics.js

@@ -39,7 +39,7 @@ export const getMediaInputResizeAnalyticsEvent = (type, attributes) => {
   return {
     action: ACTION.EDITED,
     actionSubject,
-    actionSubjectId: ACTION_SUBJECT_ID.INPUT_RESIZED,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
     attributes: {
       width,
       layout,

package/dist/es2019/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -6,7 +6,7 @@ function findEmptySelectableParentNodePosition($pos, isValidPosition) {
   if ($pos.pos + 1 > doc.content.size) {
     return null;
   }
-  if ($pos.depth === 0) {
+  if ($pos.nodeBefore !== null) {
     if (isValidPosition($pos)) {
       return $pos;
     }

package/dist/es2019/plugins/selection/pm-plugins/events/keydown.js

@@ -21,8 +21,20 @@ const isCollpasedExpand = node => {
 const isBodiedExtension = node => {
   return Boolean(node && ['bodiedExtension'].includes(node.type.name));
 };
+
+/**
+ * ED-19861 - [Regression] keyboard selections within action items are unpredicatable
+ * Table was added to the list of problematic nodes because the desired behaviour when Shift+Up from outside the
+ * table is to select the table node itself, rather than the table cell content. Previously this behaviour was handled
+ * in `packages/editor/editor-core/src/plugins/selection/pm-plugins/events/create-selection-between.ts` but there was
+ * a bug in `create-selection-between` which after fixing the bug that code was no longer handling table selection
+ * correctly, so to fix that table was added here.
+ */
+const isTable = node => {
+  return Boolean(node && ['table'].includes(node.type.name));
+};
 const isProblematicNode = node => {
-  return isCollpasedExpand(node) || isBodiedExtension(node);
+  return isCollpasedExpand(node) || isBodiedExtension(node) || isTable(node);
 };
 const findFixedProblematicNodePosition = (doc, $head, direction) => {
   if ($head.pos === 0 || $head.depth === 0) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.41.1";
+export const version = "187.41.4";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/extension/index.js

@@ -1,4 +1,5 @@
 import { extension, bodiedExtension, inlineExtension } from '@atlaskit/adf-schema';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createPlugin } from './pm-plugins/main';
 import keymapPlugin from './pm-plugins/keymap';
 import { createPlugin as createUniqueIdPlugin } from './pm-plugins/unique-id';
@@ -6,11 +7,16 @@ import { getToolbarConfig } from './toolbar';
 import { getContextPanel } from './context-panel';
 import { createExtensionAPI } from './extension-api';
 var extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+    _api = _ref.api;
+  var featureFlags = (_api === null || _api === void 0 ? void 0 : (_api$featureFlags = _api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -34,7 +40,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
             portalProviderAPI = _ref2.portalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher;
           var extensionHandlers = options.extensionHandlers || {};
-          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
+          return createPlugin(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, _api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }
@@ -42,25 +48,45 @@ var extensionPlugin = function extensionPlugin(_ref) {
         name: 'extensionKeymap',
         plugin: function plugin() {
           var _api$contextPanel;
-          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          return keymapPlugin(_api === null || _api === void 0 ? void 0 : (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
         plugin: function plugin() {
           return createUniqueIdPlugin();
         }
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: function plugin() {
+          return new SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI: createExtensionAPI
+      api: function api() {
+        var _api$contextPanel2;
+        return createExtensionAPI({
+          editorView: editorViewRef.current,
+          applyChange: _api === null || _api === void 0 ? void 0 : (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: getToolbarConfig({
         breakoutEnabled: options.breakoutEnabled,
-        hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        hoverDecoration: _api === null || _api === void 0 ? void 0 : _api.decorations.actions.hoverDecoration,
+        applyChangeToContextPanel: _api === null || _api === void 0 ? void 0 : (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: getContextPanel(options.allowAutoSave, featureFlags, _api === null || _api === void 0 ? void 0 : (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -6,7 +6,6 @@ import Loadable from 'react-loadable';
 import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
-import { createExtensionAPI } from '../../extension/extension-api';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 var noop = function noop() {
@@ -45,8 +44,7 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
 var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
-    editorView = props.editorView,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    extensionApi = props.extensionApi;
   var ButtonIcon = React.useMemo(function () {
     return item.icon ? Loadable({
       loader: function () {
@@ -74,11 +72,7 @@ var ExtensionButton = function ExtensionButton(props) {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
     }
     var targetNodeAdf = nodeToJSON(node);
-    var api = createExtensionAPI({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
@@ -96,7 +90,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     editorView = props.editorView,
     extensionProvider = props.extensionProvider,
     separator = props.separator,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    applyChangeToContextPanel = props.applyChangeToContextPanel,
+    extensionApi = props.extensionApi;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     extensions = _useState2[0],
@@ -140,11 +135,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     return nodeToJSON(node);
   }, [node]);
   var extensionItems = React.useMemo(function () {
-    return getContextualToolbarItemsFromModule(extensions, nodeAdf, createExtensionAPI({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return getContextualToolbarItemsFromModule(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -160,7 +152,8 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -59,7 +59,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   return jsx(ButtonGroup, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         var ButtonIcon = item.icon;
@@ -231,7 +231,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return jsx(Separator, {

package/dist/esm/plugins/media/styles.js

@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200, Y500 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on