@atlaskit/editor-core 187.17.5 → 187.18.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 187.18.0
+
+### Minor Changes
+
+- [`80b964e24a2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/80b964e24a2) - [ED-19205] Extract the text-formatting editor plugin to a separate package
+
+### Patch Changes
+
+- [`8474692c96d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8474692c96d) - [ux] ED-18785 Place toolbar below selection if not sufficient space above
+- Updated dependencies
+
+## 187.17.6
+
+### Patch Changes
+
+- [`bdb69158e0a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bdb69158e0a) - [ED-13910] Bump ProseMirror libraries to match prosemirror-view@1.31.6 dependencies
+- Updated dependencies
+
 ## 187.17.5
 
 ### Patch Changes

package/dist/cjs/labs/next/presets/default.js

@@ -10,7 +10,7 @@ var _paste = _interopRequireDefault(require("../../../plugins/paste"));
 var _blockType = _interopRequireDefault(require("../../../plugins/block-type"));
 var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("../../../plugins/clear-marks-on-change-to-empty-document"));
 var _editorPluginHyperlink = require("@atlaskit/editor-plugin-hyperlink");
-var _textFormatting = _interopRequireDefault(require("../../../plugins/text-formatting"));
+var _editorPluginTextFormatting = require("@atlaskit/editor-plugin-text-formatting");
 var _editorPluginWidth = require("@atlaskit/editor-plugin-width");
 var _unsupportedContent = _interopRequireDefault(require("../../../plugins/unsupported-content"));
 var _base = _interopRequireDefault(require("../../../plugins/base"));
@@ -73,7 +73,7 @@ function createDefaultPreset(options) {
       return builder.add([p, options.annotationProviders]);
     }
     return builder;
-  }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_textFormatting.default, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
+  }).add([_editorPluginHyperlink.hyperlinkPlugin, options.hyperlinkOptions]).add([_editorPluginTextFormatting.textFormattingPlugin, options.textFormatting]).add(_editorPluginWidth.widthPlugin).add([_quickInsert.default, options.quickInsert]).add([_typeAhead.default, options.typeAhead || {
     createAnalyticsEvent: options.createAnalyticsEvent
   }]).add(_unsupportedContent.default).add(_editorPluginEditorDisabled.editorDisabledPlugin).add([_submitEditor.default, options.submitEditor]).add(_fakeTextCursor.default).add(_floatingToolbar.default).add([_selection.default, options.selection]).add([_codeBlock.default, options.codeBlock || {
     appearance: 'full-page'

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

@@ -32,6 +32,16 @@ var annotationMessages = (0, _reactIntlNext.defineMessages)({
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
   }
 });
+/**
+ * Returns the coordintes at the bottom the selection.
+ */
+exports.annotationMessages = annotationMessages;
+var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, toolbarRect) {
+  return {
+    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
+    left: bottomCoords.right - toolbarRect.width / 2
+  };
+};
 
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -47,7 +57,6 @@ var annotationMessages = (0, _reactIntlNext.defineMessages)({
   - use wrapperBounds to clamp values
   - editorView.dom bounds differ to wrapperBounds, convert at the end
 */
-exports.annotationMessages = annotationMessages;
 var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAboveSelection(toolbarTitle) {
   return function (editorView, nextPos) {
     var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
@@ -83,13 +92,13 @@ var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAb
       }
 
       /*
-      short selection above a long paragraph
-       eg. short {<}heading
-      The purpose of this text is to show the selection range{>}.
-       The horizontal positioning should center around "heading",
-      not where it ends at "range".
-       Note: if it was "head<b>ing</b>" then it would only center
-      around "head". Undesireable but matches the current renderer.
+        short selection above a long paragraph
+         eg. short {<}heading
+        The purpose of this text is to show the selection range{>}.
+         The horizontal positioning should center around "heading",
+        not where it ends at "range".
+         Note: if it was "head<b>ing</b>" then it would only center
+        around "head". Undesireable but matches the current renderer.
       */
       var cliffPosition = range.getClientRects()[0];
       if (cliffPosition.right < left) {
@@ -101,6 +110,13 @@ var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAb
     }
     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;
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,
@@ -156,6 +172,13 @@ var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHe
     }
     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 _getCoordsBelowSelect2 = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect2.top;
+      left = _getCoordsBelowSelect2.left;
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,

package/dist/cjs/plugins/base/pm-plugins/inline-cursor-target.js

@@ -50,24 +50,18 @@ var _default = function _default() {
             node.setAttribute('aria-hidden', 'true');
             node.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
             node.className = 'cursor-target';
-            return _view.Decoration.widget(selection.from, node, {
+            var $from = selection.$from;
+            var rightPosition = $from.pos;
+            var leftPosition = $from.posAtIndex(Math.max($from.index() - 1, 0));
+            var widgetPos = side === 'left' ? leftPosition : rightPosition;
+            return _view.Decoration.widget(widgetPos, node, {
               raw: true,
-              side: side === 'left' ? -1 : 1,
               key: 'inlineCursor'
             });
           };
 
-          // Create editable decoration widgets either side of the cursor to allow
-          // text input.
-          // We check beforeInput events below to prevent content
-          // being added to the decorations.
-          //
-          // This prevents issues with the cursor disappearing
-          // or appearing in the wrong place when;
-          // - positioned between inline nodes (chrome + firefox)
-          // - positioned between the beginning of another node and an inline node (firefox)
-          // - positioned between an inline node and the end of a node (chrome)
-          if (!_utils.browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
+          // Create editable decoration widgets around the current inline node to allow proper cursor navigation.
+          if ((hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -78,34 +72,6 @@ var _default = function _default() {
               }
             };
           }
-
-          // Only create one widget on the left or right of the cursor in Safari.
-          // This is to prevent the left key from being blocked when at the start of a paragraph,
-          // and the right key from being blocked when at the end of a paragraph. This also
-          // improves click and drag selections, making it easier to select the first node.
-          if (_utils.browser.safari) {
-            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
-              return {
-                cursorTarget: {
-                  decorations: [createWidget('left')],
-                  positions: {
-                    from: $from.pos,
-                    to: $to.pos
-                  }
-                }
-              };
-            } else if (isAtStartAndInlineNodeViewAfter) {
-              return {
-                cursorTarget: {
-                  decorations: [createWidget('right')],
-                  positions: {
-                    from: $from.pos,
-                    to: $to.pos
-                  }
-                }
-              };
-            }
-          }
         }
         return {
           cursorTarget: undefined

package/dist/cjs/plugins/index.js

@@ -347,12 +347,6 @@ Object.defineProperty(exports, "textColorPlugin", {
     return _textColor.default;
   }
 });
-Object.defineProperty(exports, "textFormattingPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _textFormatting.default;
-  }
-});
 Object.defineProperty(exports, "toolbarListsIndentationPlugin", {
   enumerable: true,
   get: function get() {
@@ -414,7 +408,6 @@ var _saveOnEnter = _interopRequireDefault(require("./save-on-enter"));
 var _submitEditor = _interopRequireDefault(require("./submit-editor"));
 var _tasksAndDecisions = _interopRequireDefault(require("./tasks-and-decisions"));
 var _textColor = _interopRequireDefault(require("./text-color"));
-var _textFormatting = _interopRequireDefault(require("./text-formatting"));
 var _typeAhead = _interopRequireDefault(require("./type-ahead"));
 var _unsupportedContent = _interopRequireDefault(require("./unsupported-content"));
 var _floatingToolbar = _interopRequireDefault(require("./floating-toolbar"));

package/dist/cjs/plugins/placeholder-text/placeholder-text-nodeview.js

@@ -15,9 +15,6 @@ var serializePlaceholderNode = function serializePlaceholderNode(node) {
 
   // the inline node api test suite requires the following class name
   element.classList.add('placeholderView-content-wrap');
-  if (_utils.browser.gecko) {
-    element.setAttribute('contenteditable', 'true');
-  }
   element.innerText = _utils.ZERO_WIDTH_SPACE;
   var elementChildren = document.createElement('span');
   elementChildren.classList.add('pm-placeholder__text');

package/dist/cjs/plugins/selection/pm-plugins/gap-cursor-main.js

@@ -94,24 +94,38 @@ var plugin = new _safePlugin.SafePlugin({
       }
       return null;
     },
-    // there's no space between top level nodes and the wrapping ProseMirror contenteditable area and handleClick won't capture clicks, there's nothing to click on
-    // it handles only attempts to set gap cursor for nested nodes, where we have space between parent and child nodes
-    // top level nodes are handled by <ClickAreaBlock>
-    handleClick: function handleClick(view, position, event) {
+    handleClick: function handleClick(view, nodePos, event) {
+      var _$pos$parent;
       var posAtCoords = view.posAtCoords({
         left: event.clientX,
         top: event.clientY
       });
-
-      // this helps to ignore all of the clicks outside of the parent (e.g. nodeView controls)
-      if (posAtCoords && posAtCoords.inside !== position && !(0, _utils2.isIgnoredClick)(event.target)) {
-        // max available space between parent and child from the left side in px
-        // this ensures the correct side of the gap cursor in case of clicking in between two block nodes
-        var leftSideOffsetX = 20;
-        var side = event.offsetX > leftSideOffsetX ? _selection.Side.RIGHT : _selection.Side.LEFT;
-        return (0, _actions.setGapCursorAtPos)(position, side)(view.state, view.dispatch);
+      if (!posAtCoords || (0, _utils2.isIgnoredClick)(event.target)) {
+        return false;
       }
-      return false;
+      var isInsideTheTarget = posAtCoords.pos === posAtCoords.inside;
+      if (isInsideTheTarget) {
+        return false;
+      }
+      var leftSideOffsetX = 20;
+      var side = event.offsetX > leftSideOffsetX ? _selection.Side.RIGHT : _selection.Side.LEFT;
+      var $pos = view.state.doc.resolve(nodePos);
+      // In the new prosemirror-view posAtCoords  is not returning a precise value for our media nodes
+      if (((_$pos$parent = $pos.parent) === null || _$pos$parent === void 0 ? void 0 : _$pos$parent.type.name) === 'mediaSingle') {
+        var $insidePos = view.state.doc.resolve(Math.max(posAtCoords.inside, 0));
+        // We don't have GapCursors problems when the node target is inside the root level
+        if ($insidePos.depth <= 1) {
+          return false;
+        }
+        var mediaGapCursor = !$pos.nodeBefore ? $pos.before() : $pos.after();
+        return (0, _actions.setGapCursorAtPos)(mediaGapCursor, side)(view.state, view.dispatch);
+      }
+      var docSize = view.state.doc.content.size;
+      var nodeInside = posAtCoords.inside <= 0 || posAtCoords.inside > docSize ? null : view.state.doc.nodeAt(posAtCoords.inside);
+      if (nodeInside !== null && nodeInside !== void 0 && nodeInside.isAtom) {
+        return false;
+      }
+      return (0, _actions.setGapCursorAtPos)(nodePos, side)(view.state, view.dispatch);
     },
     handleDOMEvents: {
       /**

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.17.5";
+var version = "187.18.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.17.5",
+	"version": "187.18.0",
 	"sideEffects": false
 }

package/dist/es2019/labs/next/presets/default.js

@@ -4,7 +4,7 @@ import pastePlugin from '../../../plugins/paste';
 import blockTypePlugin from '../../../plugins/block-type';
 import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-marks-on-change-to-empty-document';
 import { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
-import textFormattingPlugin from '../../../plugins/text-formatting';
+import { textFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import unsupportedContentPlugin from '../../../plugins/unsupported-content';
 import basePlugin from '../../../plugins/base';

package/dist/es2019/plugins/annotation/toolbar.js

@@ -24,6 +24,15 @@ export const annotationMessages = defineMessages({
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
   }
 });
+/**
+ * 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
+  };
+};
 
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -61,7 +70,7 @@ const calculateToolbarPositionAboveSelection = toolbarTitle => (editorView, next
   } = editorView.state.selection;
   const topCoords = editorView.coordsAtPos(Math.min(head, anchor));
   const bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
-  const top = (topCoords.top || 0) - toolbarRect.height * 1.5;
+  let top = (topCoords.top || 0) - toolbarRect.height * 1.5;
   let left = 0;
 
   // If not on the same line
@@ -74,13 +83,13 @@ const calculateToolbarPositionAboveSelection = toolbarTitle => (editorView, next
     }
 
     /*
-    short selection above a long paragraph
-     eg. short {<}heading
-    The purpose of this text is to show the selection range{>}.
-     The horizontal positioning should center around "heading",
-    not where it ends at "range".
-     Note: if it was "head<b>ing</b>" then it would only center
-    around "head". Undesireable but matches the current renderer.
+      short selection above a long paragraph
+       eg. short {<}heading
+      The purpose of this text is to show the selection range{>}.
+       The horizontal positioning should center around "heading",
+      not where it ends at "range".
+       Note: if it was "head<b>ing</b>" then it would only center
+      around "head". Undesireable but matches the current renderer.
     */
     const cliffPosition = range.getClientRects()[0];
     if (cliffPosition.right < left) {
@@ -92,6 +101,14 @@ const calculateToolbarPositionAboveSelection = toolbarTitle => (editorView, next
   }
   left -= toolbarRect.width / 2;
 
+  // Place toolbar below selection if not sufficient space above
+  if (top < wrapperBounds.top) {
+    ({
+      top,
+      left
+    } = getCoordsBelowSelection(bottomCoords, toolbarRect));
+  }
+
   // remap positions from browser document to wrapperBounds
   return {
     top: top - wrapperBounds.top + scrollWrapper.scrollTop,
@@ -144,7 +161,15 @@ const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, nextPos)
   } else {
     top = (topCoords.top || 0) - toolbarRect.height * 1.5;
   }
-  const left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
+  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));
+  }
 
   // remap positions from browser document to wrapperBounds
   return {

package/dist/es2019/plugins/base/pm-plugins/inline-cursor-target.js

@@ -44,24 +44,20 @@ export default (() => {
             node.setAttribute('aria-hidden', 'true');
             node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
             node.className = 'cursor-target';
-            return Decoration.widget(selection.from, node, {
+            const {
+              $from
+            } = selection;
+            const rightPosition = $from.pos;
+            const leftPosition = $from.posAtIndex(Math.max($from.index() - 1, 0));
+            const widgetPos = side === 'left' ? leftPosition : rightPosition;
+            return Decoration.widget(widgetPos, node, {
               raw: true,
-              side: side === 'left' ? -1 : 1,
               key: 'inlineCursor'
             });
           };
 
-          // Create editable decoration widgets either side of the cursor to allow
-          // text input.
-          // We check beforeInput events below to prevent content
-          // being added to the decorations.
-          //
-          // This prevents issues with the cursor disappearing
-          // or appearing in the wrong place when;
-          // - positioned between inline nodes (chrome + firefox)
-          // - positioned between the beginning of another node and an inline node (firefox)
-          // - positioned between an inline node and the end of a node (chrome)
-          if (!browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
+          // Create editable decoration widgets around the current inline node to allow proper cursor navigation.
+          if ((hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -72,34 +68,6 @@ export default (() => {
               }
             };
           }
-
-          // Only create one widget on the left or right of the cursor in Safari.
-          // This is to prevent the left key from being blocked when at the start of a paragraph,
-          // and the right key from being blocked when at the end of a paragraph. This also
-          // improves click and drag selections, making it easier to select the first node.
-          if (browser.safari) {
-            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
-              return {
-                cursorTarget: {
-                  decorations: [createWidget('left')],
-                  positions: {
-                    from: $from.pos,
-                    to: $to.pos
-                  }
-                }
-              };
-            } else if (isAtStartAndInlineNodeViewAfter) {
-              return {
-                cursorTarget: {
-                  decorations: [createWidget('right')],
-                  positions: {
-                    from: $from.pos,
-                    to: $to.pos
-                  }
-                }
-              };
-            }
-          }
         }
         return {
           cursorTarget: undefined

package/dist/es2019/plugins/index.js

@@ -30,7 +30,6 @@ export { default as saveOnEnterPlugin } from './save-on-enter';
 export { default as submitEditorPlugin } from './submit-editor';
 export { default as tasksAndDecisionsPlugin } from './tasks-and-decisions';
 export { default as textColorPlugin } from './text-color';
-export { default as textFormattingPlugin } from './text-formatting';
 export { default as typeAheadPlugin } from './type-ahead';
 export { default as unsupportedContentPlugin } from './unsupported-content';
 export { default as floatingToolbarPlugin } from './floating-toolbar';

package/dist/es2019/plugins/placeholder-text/placeholder-text-nodeview.js

@@ -6,9 +6,6 @@ const serializePlaceholderNode = node => {
 
   // the inline node api test suite requires the following class name
   element.classList.add('placeholderView-content-wrap');
-  if (browser.gecko) {
-    element.setAttribute('contenteditable', 'true');
-  }
   element.innerText = ZERO_WIDTH_SPACE;
   const elementChildren = document.createElement('span');
   elementChildren.classList.add('pm-placeholder__text');

package/dist/es2019/plugins/selection/pm-plugins/gap-cursor-main.js

@@ -89,24 +89,38 @@ const plugin = new SafePlugin({
       }
       return null;
     },
-    // there's no space between top level nodes and the wrapping ProseMirror contenteditable area and handleClick won't capture clicks, there's nothing to click on
-    // it handles only attempts to set gap cursor for nested nodes, where we have space between parent and child nodes
-    // top level nodes are handled by <ClickAreaBlock>
-    handleClick(view, position, event) {
+    handleClick(view, nodePos, event) {
+      var _$pos$parent;
       const posAtCoords = view.posAtCoords({
         left: event.clientX,
         top: event.clientY
       });
-
-      // this helps to ignore all of the clicks outside of the parent (e.g. nodeView controls)
-      if (posAtCoords && posAtCoords.inside !== position && !isIgnoredClick(event.target)) {
-        // max available space between parent and child from the left side in px
-        // this ensures the correct side of the gap cursor in case of clicking in between two block nodes
-        const leftSideOffsetX = 20;
-        const side = event.offsetX > leftSideOffsetX ? Side.RIGHT : Side.LEFT;
-        return setGapCursorAtPos(position, side)(view.state, view.dispatch);
+      if (!posAtCoords || isIgnoredClick(event.target)) {
+        return false;
+      }
+      const isInsideTheTarget = posAtCoords.pos === posAtCoords.inside;
+      if (isInsideTheTarget) {
+        return false;
+      }
+      const leftSideOffsetX = 20;
+      const side = event.offsetX > leftSideOffsetX ? Side.RIGHT : Side.LEFT;
+      const $pos = view.state.doc.resolve(nodePos);
+      // In the new prosemirror-view posAtCoords  is not returning a precise value for our media nodes
+      if (((_$pos$parent = $pos.parent) === null || _$pos$parent === void 0 ? void 0 : _$pos$parent.type.name) === 'mediaSingle') {
+        const $insidePos = view.state.doc.resolve(Math.max(posAtCoords.inside, 0));
+        // We don't have GapCursors problems when the node target is inside the root level
+        if ($insidePos.depth <= 1) {
+          return false;
+        }
+        const mediaGapCursor = !$pos.nodeBefore ? $pos.before() : $pos.after();
+        return setGapCursorAtPos(mediaGapCursor, side)(view.state, view.dispatch);
+      }
+      const docSize = view.state.doc.content.size;
+      const nodeInside = posAtCoords.inside <= 0 || posAtCoords.inside > docSize ? null : view.state.doc.nodeAt(posAtCoords.inside);
+      if (nodeInside !== null && nodeInside !== void 0 && nodeInside.isAtom) {
+        return false;
       }
-      return false;
+      return setGapCursorAtPos(nodePos, side)(view.state, view.dispatch);
     },
     handleDOMEvents: {
       /**

package/dist/es2019/version-wrapper.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.17.5",
+	"version": "187.18.0",
 	"sideEffects": false
 }

package/dist/esm/labs/next/presets/default.js

@@ -4,7 +4,7 @@ import pastePlugin from '../../../plugins/paste';
 import blockTypePlugin from '../../../plugins/block-type';
 import clearMarksOnChangeToEmptyDocumentPlugin from '../../../plugins/clear-marks-on-change-to-empty-document';
 import { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
-import textFormattingPlugin from '../../../plugins/text-formatting';
+import { textFormattingPlugin } from '@atlaskit/editor-plugin-text-formatting';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import unsupportedContentPlugin from '../../../plugins/unsupported-content';
 import basePlugin from '../../../plugins/base';

package/dist/esm/plugins/annotation/toolbar.js

@@ -24,6 +24,15 @@ export var annotationMessages = defineMessages({
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
   }
 });
+/**
+ * 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
+  };
+};
 
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -74,13 +83,13 @@ var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAb
       }
 
       /*
-      short selection above a long paragraph
-       eg. short {<}heading
-      The purpose of this text is to show the selection range{>}.
-       The horizontal positioning should center around "heading",
-      not where it ends at "range".
-       Note: if it was "head<b>ing</b>" then it would only center
-      around "head". Undesireable but matches the current renderer.
+        short selection above a long paragraph
+         eg. short {<}heading
+        The purpose of this text is to show the selection range{>}.
+         The horizontal positioning should center around "heading",
+        not where it ends at "range".
+         Note: if it was "head<b>ing</b>" then it would only center
+        around "head". Undesireable but matches the current renderer.
       */
       var cliffPosition = range.getClientRects()[0];
       if (cliffPosition.right < left) {
@@ -92,6 +101,13 @@ var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAb
     }
     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;
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,
@@ -147,6 +163,13 @@ var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHe
     }
     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 _getCoordsBelowSelect2 = getCoordsBelowSelection(bottomCoords, toolbarRect);
+      top = _getCoordsBelowSelect2.top;
+      left = _getCoordsBelowSelect2.left;
+    }
+
     // remap positions from browser document to wrapperBounds
     return {
       top: top - wrapperBounds.top + scrollWrapper.scrollTop,