@atlaskit/editor-plugin-selection 1.4.3 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-selection
 
+## 1.4.4
+
+### Patch Changes
+
+- [#140867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140867)
+  [`17b58500a94e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/17b58500a94e3) -
+  [ux] ED-24255 Adding a custom mark boundary cursor to fix the cursor position in inline code
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/mark-boundary-cursor/marks-side.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MarksSide = void 0;
+var MarksSide = exports.MarksSide = /*#__PURE__*/function (MarksSide) {
+  MarksSide[MarksSide["None"] = 0] = "None";
+  MarksSide[MarksSide["Left"] = -1] = "Left";
+  MarksSide[MarksSide["Right"] = 1] = "Right";
+  return MarksSide;
+}({});

package/dist/cjs/mark-boundary-cursor/ui/mark-boundary-cursor-decoration.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMarkBoundaryCursorDecoration = void 0;
+var _view = require("@atlaskit/editor-prosemirror/view");
+var containerStyle = "\n\tposition: relative;\n";
+var caretStyle = "\n\tposition: absolute;\n\theight: 100%;\n\twidth: 1px;\n\tleft: -0.5px;\n\tbottom: 0;\n\tbackground-color: ".concat("var(--ds-text, #172B4D)", ";\n");
+var toDOM = function toDOM() {
+  var container = document.createElement('span');
+  container.className = 'ProseMirror-mark-boundary-cursor';
+  container.setAttribute('style', containerStyle);
+  var caret = document.createElement('div');
+  caret.setAttribute('style', caretStyle);
+  caret.animate([{
+    opacity: 1
+  }, {
+    opacity: 1,
+    offset: 0.5
+  }, {
+    opacity: 0,
+    offset: 0.5
+  }, {
+    opacity: 0
+  }], {
+    duration: 1000,
+    iterations: Infinity
+  });
+  container.appendChild(caret);
+  return container;
+};
+var createMarkBoundaryCursorDecoration = exports.createMarkBoundaryCursorDecoration = function createMarkBoundaryCursorDecoration(pos, side) {
+  return _view.Decoration.widget(pos, toDOM, {
+    key: 'mark-boundary-cursor',
+    side: side
+  });
+};

package/dist/cjs/mark-boundary-cursor/utils/active-marks-side.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveMarksSide = getActiveMarksSide;
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _marksSide = require("../marks-side");
+var _inlineCodeSide = require("./inline-code-side");
+/**
+ * Will determine which side of the current selection the mark-boundary-cursor should
+ * favour / point towards, based on which marks are currently active and which marks
+ * are applied to the nodes to the left and right side of the current selection.
+ *
+ * @param {Selection} options.selection - The current selection.
+ * @param {readonly Mark[] | null} options.storedMarks - Current stored marks, if any.
+ * @returns {MarksSide} - The side (left -1, right 1, or none 0) the mark-boundary-cursor should favour.
+ */
+function getActiveMarksSide(_ref) {
+  var _nodeBefore$marks, _nodeAfter$marks;
+  var selection = _ref.selection,
+    storedMarks = _ref.storedMarks;
+  if (!(0, _utils.isTextSelection)(selection) || !selection.empty) {
+    return _marksSide.MarksSide.None;
+  }
+  var _selection$$head = selection.$head,
+    nodeBefore = _selection$$head.nodeBefore,
+    nodeAfter = _selection$$head.nodeAfter;
+  var leftMarks = (_nodeBefore$marks = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.marks) !== null && _nodeBefore$marks !== void 0 ? _nodeBefore$marks : [];
+  var rightMarks = (_nodeAfter$marks = nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.marks) !== null && _nodeAfter$marks !== void 0 ? _nodeAfter$marks : [];
+  if (_model.Mark.sameSet(leftMarks, rightMarks)) {
+    return _marksSide.MarksSide.None;
+  }
+  return (0, _inlineCodeSide.getInlineCodeCursorSide)({
+    leftMarks: leftMarks,
+    rightMarks: rightMarks,
+    storedMarks: storedMarks
+  });
+}

package/dist/cjs/mark-boundary-cursor/utils/inline-code-side.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInlineCodeCursorSide = getInlineCodeCursorSide;
+var _marksSide = require("../marks-side");
+/**
+ * Given the marks on the left and right side of the current selection, and the stored
+ * marks being updated during a transaction, this function returns the side (-1 = left,
+ * 1 = right) for which node the mark boundary cursor decoration should be added
+ *
+ * This is intended to correct an issue where the default cursor does not render in the
+ * expected location when navigating via arrow keys past the boundary of an inline code
+ * node
+ */
+function getInlineCodeCursorSide(_ref) {
+  var leftMarks = _ref.leftMarks,
+    rightMarks = _ref.rightMarks,
+    storedMarks = _ref.storedMarks;
+  var isInlineCodeToLeft = leftMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  });
+  var isInlineCodeToRight = rightMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  });
+  var isInlineCodeBeingStored = !!storedMarks && (storedMarks === null || storedMarks === void 0 ? void 0 : storedMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  }));
+  var isStoredMarksBeingCleared = !!storedMarks && storedMarks.length === 0;
+
+  // This condition covers two scenarios:
+  // a) When the cursor is on the left side of the inline code, and is expected to be
+  // positioned within the inline code after pressing arrow right
+  // b) When the cursor is on the right side of the inline code, and is expected to be
+  // positioned outside of the inline code after pressing arrow right
+  // in both of these cases the cursor needs to be corrected to be positioned inline
+  // with the node to the right
+  // NOTE: In editor-plugin-text-formatting there is logic on left/right key press
+  // which dispatches a transaction to update the stored marks
+  if (isInlineCodeToRight && isInlineCodeBeingStored || isInlineCodeToLeft && isStoredMarksBeingCleared) {
+    return _marksSide.MarksSide.Right;
+  }
+  return _marksSide.MarksSide.None;
+}

package/dist/cjs/plugin.js

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectionPlugin = exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _gapCursorKeymap = _interopRequireDefault(require("./pm-plugins/gap-cursor-keymap"));
 var _gapCursorMain = _interopRequireDefault(require("./pm-plugins/gap-cursor-main"));
 var _gapCursorPluginKey = require("./pm-plugins/gap-cursor-plugin-key");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
+var _markBoundaryCursorMain = require("./pm-plugins/mark-boundary-cursor-main");
 var _selectionMain = require("./pm-plugins/selection-main");
 var _types = require("./types");
 var displayGapCursor = function displayGapCursor(toggle) {
@@ -69,7 +72,12 @@ var selectionPlugin = exports.selectionPlugin = function selectionPlugin(_ref2)
         plugin: function plugin() {
           return _gapCursorMain.default;
         }
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_mark_boundary_cursor') ? [{
+        name: 'markBoundaryCursor',
+        plugin: function plugin() {
+          return (0, _markBoundaryCursorMain.createMarkBoundaryCursorPlugin)();
+        }
+      }] : []));
     }
   };
 };

package/dist/cjs/pm-plugins/mark-boundary-cursor-main.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMarkBoundaryCursorPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _markBoundaryCursorDecoration = require("../mark-boundary-cursor/ui/mark-boundary-cursor-decoration");
+var _activeMarksSide = require("../mark-boundary-cursor/utils/active-marks-side");
+var _markBoundaryCursorPluginKey = require("./mark-boundary-cursor-plugin-key");
+var createMarkBoundaryCursorPlugin = exports.createMarkBoundaryCursorPlugin = function createMarkBoundaryCursorPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: _markBoundaryCursorPluginKey.markBoundaryCursorPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorations: _view.DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, currentState) {
+        var selection = tr.selection,
+          storedMarks = tr.storedMarks,
+          doc = tr.doc,
+          selectionSet = tr.selectionSet,
+          storedMarksSet = tr.storedMarksSet;
+        if (!selectionSet && !storedMarksSet) {
+          return currentState;
+        }
+        var side = (0, _activeMarksSide.getActiveMarksSide)({
+          selection: selection,
+          storedMarks: storedMarks
+        });
+        if (!side) {
+          return {
+            decorations: _view.DecorationSet.empty
+          };
+        }
+        return {
+          decorations: _view.DecorationSet.create(doc, [(0, _markBoundaryCursorDecoration.createMarkBoundaryCursorDecoration)(selection.head, side)])
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _markBoundaryCursorPl;
+        return (_markBoundaryCursorPl = _markBoundaryCursorPluginKey.markBoundaryCursorPluginKey.getState(state)) === null || _markBoundaryCursorPl === void 0 ? void 0 : _markBoundaryCursorPl.decorations;
+      }
+    }
+  });
+};

package/dist/cjs/pm-plugins/mark-boundary-cursor-plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markBoundaryCursorPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var markBoundaryCursorPluginKey = exports.markBoundaryCursorPluginKey = new _state.PluginKey('markBoundaryCursorPlugin');

package/dist/es2019/mark-boundary-cursor/marks-side.js

@@ -0,0 +1,6 @@
+export let MarksSide = /*#__PURE__*/function (MarksSide) {
+  MarksSide[MarksSide["None"] = 0] = "None";
+  MarksSide[MarksSide["Left"] = -1] = "Left";
+  MarksSide[MarksSide["Right"] = 1] = "Right";
+  return MarksSide;
+}({});

package/dist/es2019/mark-boundary-cursor/ui/mark-boundary-cursor-decoration.js

@@ -0,0 +1,41 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+const containerStyle = `
+	position: relative;
+`;
+const caretStyle = `
+	position: absolute;
+	height: 100%;
+	width: 1px;
+	left: -0.5px;
+	bottom: 0;
+	background-color: ${"var(--ds-text, #172B4D)"};
+`;
+const toDOM = () => {
+  const container = document.createElement('span');
+  container.className = 'ProseMirror-mark-boundary-cursor';
+  container.setAttribute('style', containerStyle);
+  const caret = document.createElement('div');
+  caret.setAttribute('style', caretStyle);
+  caret.animate([{
+    opacity: 1
+  }, {
+    opacity: 1,
+    offset: 0.5
+  }, {
+    opacity: 0,
+    offset: 0.5
+  }, {
+    opacity: 0
+  }], {
+    duration: 1000,
+    iterations: Infinity
+  });
+  container.appendChild(caret);
+  return container;
+};
+export const createMarkBoundaryCursorDecoration = (pos, side) => {
+  return Decoration.widget(pos, toDOM, {
+    key: 'mark-boundary-cursor',
+    side
+  });
+};

package/dist/es2019/mark-boundary-cursor/utils/active-marks-side.js

@@ -0,0 +1,36 @@
+import { isTextSelection } from '@atlaskit/editor-common/utils';
+import { Mark } from '@atlaskit/editor-prosemirror/model';
+import { MarksSide } from '../marks-side';
+import { getInlineCodeCursorSide } from './inline-code-side';
+/**
+ * Will determine which side of the current selection the mark-boundary-cursor should
+ * favour / point towards, based on which marks are currently active and which marks
+ * are applied to the nodes to the left and right side of the current selection.
+ *
+ * @param {Selection} options.selection - The current selection.
+ * @param {readonly Mark[] | null} options.storedMarks - Current stored marks, if any.
+ * @returns {MarksSide} - The side (left -1, right 1, or none 0) the mark-boundary-cursor should favour.
+ */
+export function getActiveMarksSide({
+  selection,
+  storedMarks
+}) {
+  var _nodeBefore$marks, _nodeAfter$marks;
+  if (!isTextSelection(selection) || !selection.empty) {
+    return MarksSide.None;
+  }
+  const {
+    nodeBefore,
+    nodeAfter
+  } = selection.$head;
+  const leftMarks = (_nodeBefore$marks = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.marks) !== null && _nodeBefore$marks !== void 0 ? _nodeBefore$marks : [];
+  const rightMarks = (_nodeAfter$marks = nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.marks) !== null && _nodeAfter$marks !== void 0 ? _nodeAfter$marks : [];
+  if (Mark.sameSet(leftMarks, rightMarks)) {
+    return MarksSide.None;
+  }
+  return getInlineCodeCursorSide({
+    leftMarks,
+    rightMarks,
+    storedMarks
+  });
+}

package/dist/es2019/mark-boundary-cursor/utils/inline-code-side.js

@@ -0,0 +1,34 @@
+import { MarksSide } from '../marks-side';
+/**
+ * Given the marks on the left and right side of the current selection, and the stored
+ * marks being updated during a transaction, this function returns the side (-1 = left,
+ * 1 = right) for which node the mark boundary cursor decoration should be added
+ *
+ * This is intended to correct an issue where the default cursor does not render in the
+ * expected location when navigating via arrow keys past the boundary of an inline code
+ * node
+ */
+export function getInlineCodeCursorSide({
+  leftMarks,
+  rightMarks,
+  storedMarks
+}) {
+  const isInlineCodeToLeft = leftMarks.some(mark => mark.type.name === 'code');
+  const isInlineCodeToRight = rightMarks.some(mark => mark.type.name === 'code');
+  const isInlineCodeBeingStored = !!storedMarks && (storedMarks === null || storedMarks === void 0 ? void 0 : storedMarks.some(mark => mark.type.name === 'code'));
+  const isStoredMarksBeingCleared = !!storedMarks && storedMarks.length === 0;
+
+  // This condition covers two scenarios:
+  // a) When the cursor is on the left side of the inline code, and is expected to be
+  // positioned within the inline code after pressing arrow right
+  // b) When the cursor is on the right side of the inline code, and is expected to be
+  // positioned outside of the inline code after pressing arrow right
+  // in both of these cases the cursor needs to be corrected to be positioned inline
+  // with the node to the right
+  // NOTE: In editor-plugin-text-formatting there is logic on left/right key press
+  // which dispatches a transaction to update the stored marks
+  if (isInlineCodeToRight && isInlineCodeBeingStored || isInlineCodeToLeft && isStoredMarksBeingCleared) {
+    return MarksSide.Right;
+  }
+  return MarksSide.None;
+}

package/dist/es2019/plugin.js

@@ -1,8 +1,10 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectNearNode } from './commands';
 import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
 import gapCursorPlugin from './pm-plugins/gap-cursor-main';
 import { gapCursorPluginKey } from './pm-plugins/gap-cursor-plugin-key';
 import selectionKeymapPlugin from './pm-plugins/keymap';
+import { createMarkBoundaryCursorPlugin } from './pm-plugins/mark-boundary-cursor-main';
 import { createPlugin } from './pm-plugins/selection-main';
 import { selectionPluginKey } from './types';
 const displayGapCursor = toggle => ({
@@ -55,7 +57,10 @@ export const selectionPlugin = ({
     }, {
       name: 'gapCursor',
       plugin: () => gapCursorPlugin
-    }];
+    }, ...(fg('platform_editor_mark_boundary_cursor') ? [{
+      name: 'markBoundaryCursor',
+      plugin: () => createMarkBoundaryCursorPlugin()
+    }] : [])];
   }
 });
 export default selectionPlugin;

package/dist/es2019/pm-plugins/mark-boundary-cursor-main.js

@@ -0,0 +1,45 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createMarkBoundaryCursorDecoration } from '../mark-boundary-cursor/ui/mark-boundary-cursor-decoration';
+import { getActiveMarksSide } from '../mark-boundary-cursor/utils/active-marks-side';
+import { markBoundaryCursorPluginKey } from './mark-boundary-cursor-plugin-key';
+export const createMarkBoundaryCursorPlugin = () => {
+  return new SafePlugin({
+    key: markBoundaryCursorPluginKey,
+    state: {
+      init: () => ({
+        decorations: DecorationSet.empty
+      }),
+      apply(tr, currentState) {
+        const {
+          selection,
+          storedMarks,
+          doc,
+          selectionSet,
+          storedMarksSet
+        } = tr;
+        if (!selectionSet && !storedMarksSet) {
+          return currentState;
+        }
+        const side = getActiveMarksSide({
+          selection,
+          storedMarks
+        });
+        if (!side) {
+          return {
+            decorations: DecorationSet.empty
+          };
+        }
+        return {
+          decorations: DecorationSet.create(doc, [createMarkBoundaryCursorDecoration(selection.head, side)])
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        var _markBoundaryCursorPl;
+        return (_markBoundaryCursorPl = markBoundaryCursorPluginKey.getState(state)) === null || _markBoundaryCursorPl === void 0 ? void 0 : _markBoundaryCursorPl.decorations;
+      }
+    }
+  });
+};

package/dist/es2019/pm-plugins/mark-boundary-cursor-plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const markBoundaryCursorPluginKey = new PluginKey('markBoundaryCursorPlugin');

package/dist/esm/mark-boundary-cursor/marks-side.js

@@ -0,0 +1,6 @@
+export var MarksSide = /*#__PURE__*/function (MarksSide) {
+  MarksSide[MarksSide["None"] = 0] = "None";
+  MarksSide[MarksSide["Left"] = -1] = "Left";
+  MarksSide[MarksSide["Right"] = 1] = "Right";
+  return MarksSide;
+}({});

package/dist/esm/mark-boundary-cursor/ui/mark-boundary-cursor-decoration.js

@@ -0,0 +1,32 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+var containerStyle = "\n\tposition: relative;\n";
+var caretStyle = "\n\tposition: absolute;\n\theight: 100%;\n\twidth: 1px;\n\tleft: -0.5px;\n\tbottom: 0;\n\tbackground-color: ".concat("var(--ds-text, #172B4D)", ";\n");
+var toDOM = function toDOM() {
+  var container = document.createElement('span');
+  container.className = 'ProseMirror-mark-boundary-cursor';
+  container.setAttribute('style', containerStyle);
+  var caret = document.createElement('div');
+  caret.setAttribute('style', caretStyle);
+  caret.animate([{
+    opacity: 1
+  }, {
+    opacity: 1,
+    offset: 0.5
+  }, {
+    opacity: 0,
+    offset: 0.5
+  }, {
+    opacity: 0
+  }], {
+    duration: 1000,
+    iterations: Infinity
+  });
+  container.appendChild(caret);
+  return container;
+};
+export var createMarkBoundaryCursorDecoration = function createMarkBoundaryCursorDecoration(pos, side) {
+  return Decoration.widget(pos, toDOM, {
+    key: 'mark-boundary-cursor',
+    side: side
+  });
+};

package/dist/esm/mark-boundary-cursor/utils/active-marks-side.js

@@ -0,0 +1,34 @@
+import { isTextSelection } from '@atlaskit/editor-common/utils';
+import { Mark } from '@atlaskit/editor-prosemirror/model';
+import { MarksSide } from '../marks-side';
+import { getInlineCodeCursorSide } from './inline-code-side';
+/**
+ * Will determine which side of the current selection the mark-boundary-cursor should
+ * favour / point towards, based on which marks are currently active and which marks
+ * are applied to the nodes to the left and right side of the current selection.
+ *
+ * @param {Selection} options.selection - The current selection.
+ * @param {readonly Mark[] | null} options.storedMarks - Current stored marks, if any.
+ * @returns {MarksSide} - The side (left -1, right 1, or none 0) the mark-boundary-cursor should favour.
+ */
+export function getActiveMarksSide(_ref) {
+  var _nodeBefore$marks, _nodeAfter$marks;
+  var selection = _ref.selection,
+    storedMarks = _ref.storedMarks;
+  if (!isTextSelection(selection) || !selection.empty) {
+    return MarksSide.None;
+  }
+  var _selection$$head = selection.$head,
+    nodeBefore = _selection$$head.nodeBefore,
+    nodeAfter = _selection$$head.nodeAfter;
+  var leftMarks = (_nodeBefore$marks = nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.marks) !== null && _nodeBefore$marks !== void 0 ? _nodeBefore$marks : [];
+  var rightMarks = (_nodeAfter$marks = nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.marks) !== null && _nodeAfter$marks !== void 0 ? _nodeAfter$marks : [];
+  if (Mark.sameSet(leftMarks, rightMarks)) {
+    return MarksSide.None;
+  }
+  return getInlineCodeCursorSide({
+    leftMarks: leftMarks,
+    rightMarks: rightMarks,
+    storedMarks: storedMarks
+  });
+}

package/dist/esm/mark-boundary-cursor/utils/inline-code-side.js

@@ -0,0 +1,39 @@
+import { MarksSide } from '../marks-side';
+/**
+ * Given the marks on the left and right side of the current selection, and the stored
+ * marks being updated during a transaction, this function returns the side (-1 = left,
+ * 1 = right) for which node the mark boundary cursor decoration should be added
+ *
+ * This is intended to correct an issue where the default cursor does not render in the
+ * expected location when navigating via arrow keys past the boundary of an inline code
+ * node
+ */
+export function getInlineCodeCursorSide(_ref) {
+  var leftMarks = _ref.leftMarks,
+    rightMarks = _ref.rightMarks,
+    storedMarks = _ref.storedMarks;
+  var isInlineCodeToLeft = leftMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  });
+  var isInlineCodeToRight = rightMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  });
+  var isInlineCodeBeingStored = !!storedMarks && (storedMarks === null || storedMarks === void 0 ? void 0 : storedMarks.some(function (mark) {
+    return mark.type.name === 'code';
+  }));
+  var isStoredMarksBeingCleared = !!storedMarks && storedMarks.length === 0;
+
+  // This condition covers two scenarios:
+  // a) When the cursor is on the left side of the inline code, and is expected to be
+  // positioned within the inline code after pressing arrow right
+  // b) When the cursor is on the right side of the inline code, and is expected to be
+  // positioned outside of the inline code after pressing arrow right
+  // in both of these cases the cursor needs to be corrected to be positioned inline
+  // with the node to the right
+  // NOTE: In editor-plugin-text-formatting there is logic on left/right key press
+  // which dispatches a transaction to update the stored marks
+  if (isInlineCodeToRight && isInlineCodeBeingStored || isInlineCodeToLeft && isStoredMarksBeingCleared) {
+    return MarksSide.Right;
+  }
+  return MarksSide.None;
+}

package/dist/esm/plugin.js

@@ -1,8 +1,11 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { selectNearNode as _selectNearNode } from './commands';
 import gapCursorKeymapPlugin from './pm-plugins/gap-cursor-keymap';
 import gapCursorPlugin from './pm-plugins/gap-cursor-main';
 import { gapCursorPluginKey } from './pm-plugins/gap-cursor-plugin-key';
 import selectionKeymapPlugin from './pm-plugins/keymap';
+import { createMarkBoundaryCursorPlugin } from './pm-plugins/mark-boundary-cursor-main';
 import { createPlugin } from './pm-plugins/selection-main';
 import { selectionPluginKey } from './types';
 var displayGapCursor = function displayGapCursor(toggle) {
@@ -62,7 +65,12 @@ export var selectionPlugin = function selectionPlugin(_ref2) {
         plugin: function plugin() {
           return gapCursorPlugin;
         }
-      }];
+      }].concat(_toConsumableArray(fg('platform_editor_mark_boundary_cursor') ? [{
+        name: 'markBoundaryCursor',
+        plugin: function plugin() {
+          return createMarkBoundaryCursorPlugin();
+        }
+      }] : []));
     }
   };
 };

package/dist/esm/pm-plugins/mark-boundary-cursor-main.js

@@ -0,0 +1,45 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { createMarkBoundaryCursorDecoration } from '../mark-boundary-cursor/ui/mark-boundary-cursor-decoration';
+import { getActiveMarksSide } from '../mark-boundary-cursor/utils/active-marks-side';
+import { markBoundaryCursorPluginKey } from './mark-boundary-cursor-plugin-key';
+export var createMarkBoundaryCursorPlugin = function createMarkBoundaryCursorPlugin() {
+  return new SafePlugin({
+    key: markBoundaryCursorPluginKey,
+    state: {
+      init: function init() {
+        return {
+          decorations: DecorationSet.empty
+        };
+      },
+      apply: function apply(tr, currentState) {
+        var selection = tr.selection,
+          storedMarks = tr.storedMarks,
+          doc = tr.doc,
+          selectionSet = tr.selectionSet,
+          storedMarksSet = tr.storedMarksSet;
+        if (!selectionSet && !storedMarksSet) {
+          return currentState;
+        }
+        var side = getActiveMarksSide({
+          selection: selection,
+          storedMarks: storedMarks
+        });
+        if (!side) {
+          return {
+            decorations: DecorationSet.empty
+          };
+        }
+        return {
+          decorations: DecorationSet.create(doc, [createMarkBoundaryCursorDecoration(selection.head, side)])
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _markBoundaryCursorPl;
+        return (_markBoundaryCursorPl = markBoundaryCursorPluginKey.getState(state)) === null || _markBoundaryCursorPl === void 0 ? void 0 : _markBoundaryCursorPl.decorations;
+      }
+    }
+  });
+};

package/dist/esm/pm-plugins/mark-boundary-cursor-plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var markBoundaryCursorPluginKey = new PluginKey('markBoundaryCursorPlugin');

package/dist/types/mark-boundary-cursor/marks-side.d.ts

@@ -0,0 +1,5 @@
+export declare enum MarksSide {
+    None = 0,
+    Left = -1,
+    Right = 1
+}

package/dist/types/mark-boundary-cursor/ui/mark-boundary-cursor-decoration.d.ts

@@ -0,0 +1,2 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+export declare const createMarkBoundaryCursorDecoration: (pos: number, side: number) => Decoration;

package/dist/types/mark-boundary-cursor/utils/active-marks-side.d.ts

@@ -0,0 +1,18 @@
+import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { MarksSide } from '../marks-side';
+type GetActiveMarksSideOptions = {
+    selection: Selection;
+    storedMarks?: readonly Mark[] | null;
+};
+/**
+ * Will determine which side of the current selection the mark-boundary-cursor should
+ * favour / point towards, based on which marks are currently active and which marks
+ * are applied to the nodes to the left and right side of the current selection.
+ *
+ * @param {Selection} options.selection - The current selection.
+ * @param {readonly Mark[] | null} options.storedMarks - Current stored marks, if any.
+ * @returns {MarksSide} - The side (left -1, right 1, or none 0) the mark-boundary-cursor should favour.
+ */
+export declare function getActiveMarksSide({ selection, storedMarks, }: GetActiveMarksSideOptions): MarksSide;
+export {};

package/dist/types/mark-boundary-cursor/utils/inline-code-side.d.ts

@@ -0,0 +1,18 @@
+import { type Mark } from '@atlaskit/editor-prosemirror/model';
+import { MarksSide } from '../marks-side';
+type GetInlineCodeCursorSideOptions = {
+    leftMarks: readonly Mark[];
+    rightMarks: readonly Mark[];
+    storedMarks?: readonly Mark[] | null;
+};
+/**
+ * Given the marks on the left and right side of the current selection, and the stored
+ * marks being updated during a transaction, this function returns the side (-1 = left,
+ * 1 = right) for which node the mark boundary cursor decoration should be added
+ *
+ * This is intended to correct an issue where the default cursor does not render in the
+ * expected location when navigating via arrow keys past the boundary of an inline code
+ * node
+ */
+export declare function getInlineCodeCursorSide({ leftMarks, rightMarks, storedMarks, }: GetInlineCodeCursorSideOptions): MarksSide;
+export {};

package/dist/types/pm-plugins/mark-boundary-cursor-main.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const createMarkBoundaryCursorPlugin: () => SafePlugin<{
+    decorations: DecorationSet;
+}>;

package/dist/types/pm-plugins/mark-boundary-cursor-plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const markBoundaryCursorPluginKey: PluginKey<any>;

package/dist/types-ts4.5/mark-boundary-cursor/marks-side.d.ts

@@ -0,0 +1,5 @@
+export declare enum MarksSide {
+    None = 0,
+    Left = -1,
+    Right = 1
+}

package/dist/types-ts4.5/mark-boundary-cursor/ui/mark-boundary-cursor-decoration.d.ts

@@ -0,0 +1,2 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+export declare const createMarkBoundaryCursorDecoration: (pos: number, side: number) => Decoration;

package/dist/types-ts4.5/mark-boundary-cursor/utils/active-marks-side.d.ts

@@ -0,0 +1,18 @@
+import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { MarksSide } from '../marks-side';
+type GetActiveMarksSideOptions = {
+    selection: Selection;
+    storedMarks?: readonly Mark[] | null;
+};
+/**
+ * Will determine which side of the current selection the mark-boundary-cursor should
+ * favour / point towards, based on which marks are currently active and which marks
+ * are applied to the nodes to the left and right side of the current selection.
+ *
+ * @param {Selection} options.selection - The current selection.
+ * @param {readonly Mark[] | null} options.storedMarks - Current stored marks, if any.
+ * @returns {MarksSide} - The side (left -1, right 1, or none 0) the mark-boundary-cursor should favour.
+ */
+export declare function getActiveMarksSide({ selection, storedMarks, }: GetActiveMarksSideOptions): MarksSide;
+export {};

package/dist/types-ts4.5/mark-boundary-cursor/utils/inline-code-side.d.ts

@@ -0,0 +1,18 @@
+import { type Mark } from '@atlaskit/editor-prosemirror/model';
+import { MarksSide } from '../marks-side';
+type GetInlineCodeCursorSideOptions = {
+    leftMarks: readonly Mark[];
+    rightMarks: readonly Mark[];
+    storedMarks?: readonly Mark[] | null;
+};
+/**
+ * Given the marks on the left and right side of the current selection, and the stored
+ * marks being updated during a transaction, this function returns the side (-1 = left,
+ * 1 = right) for which node the mark boundary cursor decoration should be added
+ *
+ * This is intended to correct an issue where the default cursor does not render in the
+ * expected location when navigating via arrow keys past the boundary of an inline code
+ * node
+ */
+export declare function getInlineCodeCursorSide({ leftMarks, rightMarks, storedMarks, }: GetInlineCodeCursorSideOptions): MarksSide;
+export {};

package/dist/types-ts4.5/pm-plugins/mark-boundary-cursor-main.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const createMarkBoundaryCursorPlugin: () => SafePlugin<{
+    decorations: DecorationSet;
+}>;

package/dist/types-ts4.5/pm-plugins/mark-boundary-cursor-plugin-key.d.ts

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const markBoundaryCursorPluginKey: PluginKey<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection",
-	"version": "1.4.3",
+	"version": "1.4.4",
 	"description": "Selection plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,11 +20,12 @@
 		"runReact18": false
 	},
 	"dependencies": {
-		"@atlaskit/editor-common": "^89.0.0",
+		"@atlaskit/editor-common": "^89.2.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -78,6 +79,9 @@
 	"platform-feature-flags": {
 		"platform.editor.single-player-expand": {
 			"type": "boolean"
+		},
+		"platform_editor_mark_boundary_cursor": {
+			"type": "boolean"
 		}
 	}
 }