@atlaskit/editor-plugin-selection-toolbar 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1 +1,15 @@
 # @atlaskit/editor-plugin-selection-toolbar
+
+## 0.1.2
+
+### Patch Changes
+
+- [#42935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42935) [`d9e2cafc03e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d9e2cafc03e) - [ux] ED-20664 Fix position of floating toolbar on non full-page editors when using editor-plugin-selection-toolbar
+- [#42935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42935) [`31e453b325e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31e453b325e) - [ux] ED-20807 Prevents the selection toolbar from extending outside of the Editor.
+- [#42935](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42935) [`bc3880e7c3c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc3880e7c3c) - [ux] ED-20806 Prevents the selection toolbar from overriding the table floating toolbar by preventing rendering on anything that's not a text selection.
+
+## 0.1.1
+
+### Patch Changes
+
+- [#42201](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42201) [`36241a43553`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36241a43553) - ED-20653 Removes the selection toolbar when the view loses focus.

package/dist/cjs/calculate-toolbar-position.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateToolbarPositionTrackHead = void 0;
+var getScrollParent = function getScrollParent(editorView) {
+  var _editorContentArea$pa;
+  // Find the nearest Editor
+  var editorContentArea = editorView.dom.closest('.ak-editor-content-area');
+
+  // Check if the Editor is a child of another, the annotation editor inside
+  // Confluence full-page editor for example.
+  // If so, we need to append the toolbar to the closest Editor
+  if (editorContentArea !== null && editorContentArea !== void 0 && (_editorContentArea$pa = editorContentArea.parentElement) !== null && _editorContentArea$pa !== void 0 && _editorContentArea$pa.closest('.ak-editor-content-area')) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // If the Editor is full-page there should be a parent .fabric-editor-popup-scroll-parent
+  var scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // If there is a scroll parent then we can assume the Editor is full-page
+  if (scrollParent) {
+    return {
+      scrollWrapper: scrollParent,
+      offset: scrollParent.scrollTop
+    };
+  }
+
+  // If there is no scroll parent then we can assume the Editor is not full-page
+  if (editorContentArea && !scrollParent) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // Use the document body as a fallback
+  return {
+    scrollWrapper: document.body,
+    offset: 0
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This is a re-implementation which closely matches the behaviour on Confluence renderer.
+  The main difference is the popup is always above the selection.
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
+  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
+  - we use the toolbarRect to center align toolbar
+  - use wrapperBounds to clamp values
+  - editorView.dom bounds differ to wrapperBounds, convert at the end
+*/
+var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+    var _getScrollParent = getScrollParent(editorView),
+      scrollWrapper = _getScrollParent.scrollWrapper,
+      offset = _getScrollParent.offset;
+    var wrapperBounds = scrollWrapper.getBoundingClientRect();
+    var selection = window && window.getSelection();
+    var range = selection && !selection.isCollapsed && selection.getRangeAt(0);
+    if (!range) {
+      return nextPos;
+    }
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var _editorView$state$sel = editorView.state.selection,
+      head = _editorView$state$sel.head,
+      anchor = _editorView$state$sel.anchor;
+    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+    var top;
+    // If not the same line, display toolbar below.
+    if (head > anchor && topCoords.top !== bottomCoords.top) {
+      // We are taking the previous pos to the maxium, so avoid end of line positions
+      // returning the next line's rect.
+      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+    } else {
+      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+    }
+    var left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+    // Place toolbar below selection if not sufficient space above
+    if (top < wrapperBounds.top) {
+      var _getCoordsBelowSelect = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect.top;
+      left = _getCoordsBelowSelect.left;
+    }
+    // Make sure the toolbar doesn't extend out of the Editor
+    if (left + toolbarRect.width > wrapperBounds.right) {
+      left = wrapperBounds.right - toolbarRect.width;
+    }
+    // remap positions from browser document to wrapperBounds
+    return {
+      top: top - wrapperBounds.top + offset,
+      left: Math.max(0, left - wrapperBounds.left)
+    };
+  };
+};
+
+/**
+ * Returns the coordintes at the bottom the selection.
+ */
+var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, toolbarRect) {
+  return {
+    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
+    left: bottomCoords.right - toolbarRect.width / 2
+  };
+};

package/dist/cjs/plugin.js

@@ -9,7 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _calculateToolbarPosition = require("./calculate-toolbar-position");
 var _pluginKey = require("./plugin-key");
 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; }
@@ -65,6 +66,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
                     selectionStable: false
                   }));
                   return false;
+                },
+                blur: function blur(view) {
+                  view.dispatch(view.state.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
+                    selectionStable: false
+                  }));
+                  return false;
                 }
               }
             }
@@ -76,7 +83,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         var _selectionToolbarPlug = _pluginKey.selectionToolbarPluginKey.getState(state),
           selectionStable = _selectionToolbarPlug.selectionStable;
-        if (state.selection.empty || !selectionStable || 'node' in state.selection) {
+        if (state.selection.empty || !selectionStable || state.selection instanceof _state.NodeSelection ||
+        // $anchorCell is only available in CellSelection, this check is to
+        // avoid importing CellSelection from @atlaskit/editor-tables
+        '$anchorCell' in state.selection) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -103,12 +113,19 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
           }
           return -1;
         });
+        var items = [];
+
         // This flattens the groups passed into the floating toolbar into a single list of items
-        var items = resolved.reduce(function (acc, curr) {
-          acc.push.apply(acc, (0, _toConsumableArray2.default)(curr.items));
-          return acc;
-        }, []);
-        var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
+        for (var i = 0; i < resolved.length; i++) {
+          // add a seperator icon after each group except the last
+          items.push.apply(items, (0, _toConsumableArray2.default)(resolved[i].items));
+          if (i !== resolved.length - 1) {
+            items.push({
+              type: 'separator'
+            });
+          }
+        }
+        var calcToolbarPosition = _calculateToolbarPosition.calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);
         var nodeType = getSelectionNodeTypes(state);

package/dist/es2019/calculate-toolbar-position.js

@@ -0,0 +1,112 @@
+const getScrollParent = editorView => {
+  var _editorContentArea$pa;
+  // Find the nearest Editor
+  const editorContentArea = editorView.dom.closest('.ak-editor-content-area');
+
+  // Check if the Editor is a child of another, the annotation editor inside
+  // Confluence full-page editor for example.
+  // If so, we need to append the toolbar to the closest Editor
+  if (editorContentArea !== null && editorContentArea !== void 0 && (_editorContentArea$pa = editorContentArea.parentElement) !== null && _editorContentArea$pa !== void 0 && _editorContentArea$pa.closest('.ak-editor-content-area')) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // If the Editor is full-page there should be a parent .fabric-editor-popup-scroll-parent
+  const scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // If there is a scroll parent then we can assume the Editor is full-page
+  if (scrollParent) {
+    return {
+      scrollWrapper: scrollParent,
+      offset: scrollParent.scrollTop
+    };
+  }
+
+  // If there is no scroll parent then we can assume the Editor is not full-page
+  if (editorContentArea && !scrollParent) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // Use the document body as a fallback
+  return {
+    scrollWrapper: document.body,
+    offset: 0
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This is a re-implementation which closely matches the behaviour on Confluence renderer.
+  The main difference is the popup is always above the selection.
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
+  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
+  - we use the toolbarRect to center align toolbar
+  - use wrapperBounds to clamp values
+  - editorView.dom bounds differ to wrapperBounds, convert at the end
+*/
+export const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, nextPos) => {
+  const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
+  if (!toolbar) {
+    return nextPos;
+  }
+  const {
+    scrollWrapper,
+    offset
+  } = getScrollParent(editorView);
+  const wrapperBounds = scrollWrapper.getBoundingClientRect();
+  const selection = window && window.getSelection();
+  const range = selection && !selection.isCollapsed && selection.getRangeAt(0);
+  if (!range) {
+    return nextPos;
+  }
+  const toolbarRect = toolbar.getBoundingClientRect();
+  const {
+    head,
+    anchor
+  } = editorView.state.selection;
+  let topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+  let bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+  let top;
+  // If not the same line, display toolbar below.
+  if (head > anchor && topCoords.top !== bottomCoords.top) {
+    // We are taking the previous pos to the maxium, so avoid end of line positions
+    // returning the next line's rect.
+    top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+  } else {
+    top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+  }
+  let left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+  // Place toolbar below selection if not sufficient space above
+  if (top < wrapperBounds.top) {
+    ({
+      top,
+      left
+    } = getCoordsBelowSelection(bottomCoords, toolbarRect));
+  }
+  // Make sure the toolbar doesn't extend out of the Editor
+  if (left + toolbarRect.width > wrapperBounds.right) {
+    left = wrapperBounds.right - toolbarRect.width;
+  }
+  // remap positions from browser document to wrapperBounds
+  return {
+    top: top - wrapperBounds.top + offset,
+    left: Math.max(0, left - wrapperBounds.left)
+  };
+};
+
+/**
+ * Returns the coordintes at the bottom the selection.
+ */
+const getCoordsBelowSelection = (bottomCoords, toolbarRect) => {
+  return {
+    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
+    left: bottomCoords.right - toolbarRect.width / 2
+  };
+};

package/dist/es2019/plugin.js

@@ -1,6 +1,7 @@
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
 import { selectionToolbarPluginKey } from './plugin-key';
 export const selectionToolbarPlugin = options => {
   let __selectionToolbarHandlers = [];
@@ -57,6 +58,12 @@ export const selectionToolbarPlugin = options => {
                     selectionStable: false
                   }));
                   return false;
+                },
+                blur: view => {
+                  view.dispatch(view.state.tr.setMeta(selectionToolbarPluginKey, {
+                    selectionStable: false
+                  }));
+                  return false;
                 }
               }
             }
@@ -69,7 +76,10 @@ export const selectionToolbarPlugin = options => {
         const {
           selectionStable
         } = selectionToolbarPluginKey.getState(state);
-        if (state.selection.empty || !selectionStable || 'node' in state.selection) {
+        if (state.selection.empty || !selectionStable || state.selection instanceof NodeSelection ||
+        // $anchorCell is only available in CellSelection, this check is to
+        // avoid importing CellSelection from @atlaskit/editor-tables
+        '$anchorCell' in state.selection) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -92,12 +102,19 @@ export const selectionToolbarPlugin = options => {
           }
           return -1;
         });
+        const items = [];
+
         // This flattens the groups passed into the floating toolbar into a single list of items
-        const items = resolved.reduce((acc, curr) => {
-          acc.push(...curr.items);
-          return acc;
-        }, []);
-        const calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        for (let i = 0; i < resolved.length; i++) {
+          // add a seperator icon after each group except the last
+          items.push(...resolved[i].items);
+          if (i !== resolved.length - 1) {
+            items.push({
+              type: 'separator'
+            });
+          }
+        }
+        const calcToolbarPosition = calculateToolbarPositionTrackHead;
         const toolbarTitle = 'Selection toolbar';
         const onPositionCalculated = calcToolbarPosition(toolbarTitle);
         const nodeType = getSelectionNodeTypes(state);

package/dist/esm/calculate-toolbar-position.js

@@ -0,0 +1,111 @@
+var getScrollParent = function getScrollParent(editorView) {
+  var _editorContentArea$pa;
+  // Find the nearest Editor
+  var editorContentArea = editorView.dom.closest('.ak-editor-content-area');
+
+  // Check if the Editor is a child of another, the annotation editor inside
+  // Confluence full-page editor for example.
+  // If so, we need to append the toolbar to the closest Editor
+  if (editorContentArea !== null && editorContentArea !== void 0 && (_editorContentArea$pa = editorContentArea.parentElement) !== null && _editorContentArea$pa !== void 0 && _editorContentArea$pa.closest('.ak-editor-content-area')) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // If the Editor is full-page there should be a parent .fabric-editor-popup-scroll-parent
+  var scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // If there is a scroll parent then we can assume the Editor is full-page
+  if (scrollParent) {
+    return {
+      scrollWrapper: scrollParent,
+      offset: scrollParent.scrollTop
+    };
+  }
+
+  // If there is no scroll parent then we can assume the Editor is not full-page
+  if (editorContentArea && !scrollParent) {
+    return {
+      scrollWrapper: editorContentArea,
+      offset: editorContentArea.offsetTop
+    };
+  }
+
+  // Use the document body as a fallback
+  return {
+    scrollWrapper: document.body,
+    offset: 0
+  };
+};
+
+/*
+  Calculates the position of the floating toolbar relative to the selection.
+  This is a re-implementation which closely matches the behaviour on Confluence renderer.
+  The main difference is the popup is always above the selection.
+  Things to consider:
+  - stick as close to the head X release coordinates as possible
+  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
+  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
+  - we use the toolbarRect to center align toolbar
+  - use wrapperBounds to clamp values
+  - editorView.dom bounds differ to wrapperBounds, convert at the end
+*/
+export var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+    var _getScrollParent = getScrollParent(editorView),
+      scrollWrapper = _getScrollParent.scrollWrapper,
+      offset = _getScrollParent.offset;
+    var wrapperBounds = scrollWrapper.getBoundingClientRect();
+    var selection = window && window.getSelection();
+    var range = selection && !selection.isCollapsed && selection.getRangeAt(0);
+    if (!range) {
+      return nextPos;
+    }
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var _editorView$state$sel = editorView.state.selection,
+      head = _editorView$state$sel.head,
+      anchor = _editorView$state$sel.anchor;
+    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
+    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
+    var top;
+    // If not the same line, display toolbar below.
+    if (head > anchor && topCoords.top !== bottomCoords.top) {
+      // We are taking the previous pos to the maxium, so avoid end of line positions
+      // returning the next line's rect.
+      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
+    } else {
+      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+    }
+    var left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+    // Place toolbar below selection if not sufficient space above
+    if (top < wrapperBounds.top) {
+      var _getCoordsBelowSelect = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect.top;
+      left = _getCoordsBelowSelect.left;
+    }
+    // Make sure the toolbar doesn't extend out of the Editor
+    if (left + toolbarRect.width > wrapperBounds.right) {
+      left = wrapperBounds.right - toolbarRect.width;
+    }
+    // remap positions from browser document to wrapperBounds
+    return {
+      top: top - wrapperBounds.top + offset,
+      left: Math.max(0, left - wrapperBounds.left)
+    };
+  };
+};
+
+/**
+ * Returns the coordintes at the bottom the selection.
+ */
+var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, toolbarRect) {
+  return {
+    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
+    left: bottomCoords.right - toolbarRect.width / 2
+  };
+};

package/dist/esm/plugin.js

@@ -4,7 +4,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
 import { selectionToolbarPluginKey } from './plugin-key';
 export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
   var __selectionToolbarHandlers = [];
@@ -58,6 +59,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
                     selectionStable: false
                   }));
                   return false;
+                },
+                blur: function blur(view) {
+                  view.dispatch(view.state.tr.setMeta(selectionToolbarPluginKey, {
+                    selectionStable: false
+                  }));
+                  return false;
                 }
               }
             }
@@ -69,7 +76,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
         var _selectionToolbarPlug = selectionToolbarPluginKey.getState(state),
           selectionStable = _selectionToolbarPlug.selectionStable;
-        if (state.selection.empty || !selectionStable || 'node' in state.selection) {
+        if (state.selection.empty || !selectionStable || state.selection instanceof NodeSelection ||
+        // $anchorCell is only available in CellSelection, this check is to
+        // avoid importing CellSelection from @atlaskit/editor-tables
+        '$anchorCell' in state.selection) {
           // If there is no active selection, or the selection is not stable, or the selection is a node selection,
           // do not show the toolbar.
           return;
@@ -96,12 +106,19 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
           }
           return -1;
         });
+        var items = [];
+
         // This flattens the groups passed into the floating toolbar into a single list of items
-        var items = resolved.reduce(function (acc, curr) {
-          acc.push.apply(acc, _toConsumableArray(curr.items));
-          return acc;
-        }, []);
-        var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+        for (var i = 0; i < resolved.length; i++) {
+          // add a seperator icon after each group except the last
+          items.push.apply(items, _toConsumableArray(resolved[i].items));
+          if (i !== resolved.length - 1) {
+            items.push({
+              type: 'separator'
+            });
+          }
+        }
+        var calcToolbarPosition = calculateToolbarPositionTrackHead;
         var toolbarTitle = 'Selection toolbar';
         var onPositionCalculated = calcToolbarPosition(toolbarTitle);
         var nodeType = getSelectionNodeTypes(state);

package/dist/types/calculate-toolbar-position.d.ts

@@ -0,0 +1,9 @@
+import type { PopupPosition as Position } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const calculateToolbarPositionTrackHead: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+export type CoordsAtPos = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/dist/types-ts4.5/calculate-toolbar-position.d.ts

@@ -0,0 +1,9 @@
+import type { PopupPosition as Position } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const calculateToolbarPositionTrackHead: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;
+export type CoordsAtPos = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-toolbar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^76.11.4",
+    "@atlaskit/editor-common": "^76.18.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@babel/runtime": "^7.0.0",
     "bind-event-listener": "^2.1.1"