@atlaskit/editor-plugin-selection-marker 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1 +1,13 @@
 # @atlaskit/editor-plugin-selection-marker
+
+## 1.1.0
+
+### Minor Changes
+
+- [#80131](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80131) [`336116d18762`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/336116d18762) - Expose a new method hideDecoration on selection marker which can be used to temporarily disable the selection marker behaviour.
+
+## 1.0.1
+
+### Patch Changes
+
+- [#81026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81026) [`9f75ed822487`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f75ed822487) - [ux] Fix selection marker background with input fields (ie. expands).

package/dist/cjs/plugin.js

@@ -9,8 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _main = require("./pm-plugins/main");
 var _globalStyles = require("./ui/global-styles");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
   var api = _ref.api;
   return {
@@ -23,14 +23,43 @@ var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMa
         }
       }];
     },
-    usePluginHook: function usePluginHook(_ref2) {
-      var editorView = _ref2.editorView;
+    getSharedState: function getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = _main.key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: function hideDecoration() {
+        var _api$selectionMarker, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker !== void 0 && _api$selectionMarker.isForcedHidden) {
+          return undefined;
+        }
+        var success = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          return tr.setMeta(_main.key, {
+            forceHide: true
+          });
+        });
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
+    usePluginHook: function usePluginHook(_ref3) {
+      var editorView = _ref3.editorView;
       var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'typeAhead']),
         focusState = _useSharedPluginState.focusState,
         typeAheadState = _useSharedPluginState.typeAheadState;
       (0, _react.useEffect)(function () {
-        var _ref3, _typeAheadState$isOpe;
-        var shouldHide = (_ref3 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref3 !== void 0 ? _ref3 : true;
+        var _ref4, _typeAheadState$isOpe;
+        var shouldHide = (_ref4 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
         requestAnimationFrame(function () {
           return (0, _main.dispatchShouldHideDecorations)(editorView, shouldHide);
         });
@@ -40,4 +69,20 @@ var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMa
       return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  var hasRun = false;
+  return function () {
+    var _api$selectionMarker2;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker2 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker2 !== void 0 && _api$selectionMarker2.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(_main.key, {
+          forceHide: false
+        });
+      });
+    }
+  };
+}

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

@@ -21,22 +21,20 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
       init: function init() {
         return {
           decorations: _view.DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply: function apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        var forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         var selection = tr.selection;
-        if (shouldHideDecorations) {
-          return {
-            decorations: _view.DecorationSet.empty,
-            shouldHideDecorations: shouldHideDecorations
-          };
-        }
+        var decorations = shouldHideDecorations || forceHide ? _view.DecorationSet.empty : _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection)), [(0, _selectionDecoration.selectionDecoration)(selection)], (0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$head, 'head', selection))));
         return {
-          decorations: _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection)), [(0, _selectionDecoration.selectionDecoration)(selection)], (0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$head, 'head', selection)))),
-          shouldHideDecorations: shouldHideDecorations
+          decorations: decorations,
+          shouldHideDecorations: shouldHideDecorations,
+          forceHide: forceHide
         };
       }
     },

package/dist/cjs/ui/global-styles.js

@@ -9,9 +9,11 @@ var _react = require("@emotion/react");
 
 // Unset the selection background color as we are using our own
 // Otherwise we might have a mix of grey + our selection marker depending on the state.
+// We do not apply this reset to input fields (ie. expand case) because otherwise
+// selection highlight will not show on those.
 var globalStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '.ProseMirror:not(:focus) ::selection': {
+  '.ProseMirror:not(:focus) ::selection:not(input)': {
     background: 'unset'
   }
 });

package/dist/cjs/ui/widget-decoration.js

@@ -49,7 +49,7 @@ var toDOM = function toDOM(type) {
 var containsText = function containsText(resolvedPos) {
   var nodeBefore = resolvedPos.nodeBefore,
     nodeAfter = resolvedPos.nodeAfter;
-  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isText) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isText);
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isInline) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isInline);
 };
 var createWidgetDecoration = exports.createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection) {
   // We don't want the cursor to show if it's not text selection

package/dist/es2019/plugin.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { createPlugin, dispatchShouldHideDecorations, key } from './pm-plugins/main';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export const selectionMarkerPlugin = ({
   api
@@ -13,6 +13,34 @@ export const selectionMarkerPlugin = ({
         plugin: () => createPlugin(api)
       }];
     },
+    getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: () => {
+        var _api$selectionMarker, _api$selectionMarker$, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker$ = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker$ !== void 0 && _api$selectionMarker$.isForcedHidden) {
+          return undefined;
+        }
+        const success = api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+          tr
+        }) => tr.setMeta(key, {
+          forceHide: true
+        }));
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
     usePluginHook({
       editorView
     }) {
@@ -30,4 +58,19 @@ export const selectionMarkerPlugin = ({
       return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  let hasRun = false;
+  return () => {
+    var _api$selectionMarker2, _api$selectionMarker3;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker3 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker3 !== void 0 && _api$selectionMarker3.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+        tr
+      }) => tr.setMeta(key, {
+        forceHide: false
+      }));
+    }
+  };
+}

package/dist/es2019/pm-plugins/main.js

@@ -11,24 +11,22 @@ export const createPlugin = api => {
       init() {
         return {
           decorations: DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        const shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        const forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        const shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         const {
           selection
         } = tr;
-        if (shouldHideDecorations) {
-          return {
-            decorations: DecorationSet.empty,
-            shouldHideDecorations
-          };
-        }
+        const decorations = shouldHideDecorations || forceHide ? DecorationSet.empty : DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]);
         return {
-          decorations: DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]),
-          shouldHideDecorations
+          decorations,
+          shouldHideDecorations,
+          forceHide
         };
       }
     },

package/dist/es2019/ui/global-styles.js

@@ -3,9 +3,11 @@ import { css, Global, jsx } from '@emotion/react';
 
 // Unset the selection background color as we are using our own
 // Otherwise we might have a mix of grey + our selection marker depending on the state.
+// We do not apply this reset to input fields (ie. expand case) because otherwise
+// selection highlight will not show on those.
 const globalStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '.ProseMirror:not(:focus) ::selection': {
+  '.ProseMirror:not(:focus) ::selection:not(input)': {
     background: 'unset'
   }
 });

package/dist/es2019/ui/widget-decoration.js

@@ -45,7 +45,7 @@ const containsText = resolvedPos => {
     nodeBefore,
     nodeAfter
   } = resolvedPos;
-  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isText) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isText);
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isInline) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isInline);
 };
 export const createWidgetDecoration = (resolvedPos, type, selection) => {
   // We don't want the cursor to show if it's not text selection

package/dist/esm/plugin.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { createPlugin, dispatchShouldHideDecorations, key } from './pm-plugins/main';
 import { GlobalStylesWrapper } from './ui/global-styles';
 export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
   var api = _ref.api;
@@ -14,14 +14,43 @@ export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
         }
       }];
     },
-    usePluginHook: function usePluginHook(_ref2) {
-      var editorView = _ref2.editorView;
+    getSharedState: function getSharedState(editorState) {
+      var _key$getState$forceHi, _key$getState;
+      if (!editorState) {
+        return undefined;
+      }
+      return {
+        isForcedHidden: (_key$getState$forceHi = (_key$getState = key.getState(editorState)) === null || _key$getState === void 0 ? void 0 : _key$getState.forceHide) !== null && _key$getState$forceHi !== void 0 ? _key$getState$forceHi : false
+      };
+    },
+    actions: {
+      // For now this is a very simple locking mechanism that only allows one
+      // plugin to hide / release at a time.
+      hideDecoration: function hideDecoration() {
+        var _api$selectionMarker, _api$core;
+        if (api !== null && api !== void 0 && (_api$selectionMarker = api.selectionMarker) !== null && _api$selectionMarker !== void 0 && (_api$selectionMarker = _api$selectionMarker.sharedState.currentState()) !== null && _api$selectionMarker !== void 0 && _api$selectionMarker.isForcedHidden) {
+          return undefined;
+        }
+        var success = api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(function (_ref2) {
+          var tr = _ref2.tr;
+          return tr.setMeta(key, {
+            forceHide: true
+          });
+        });
+        if (!success) {
+          return undefined;
+        }
+        return cleanupHiddenDecoration(api);
+      }
+    },
+    usePluginHook: function usePluginHook(_ref3) {
+      var editorView = _ref3.editorView;
       var _useSharedPluginState = useSharedPluginState(api, ['focus', 'typeAhead']),
         focusState = _useSharedPluginState.focusState,
         typeAheadState = _useSharedPluginState.typeAheadState;
       useEffect(function () {
-        var _ref3, _typeAheadState$isOpe;
-        var shouldHide = (_ref3 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref3 !== void 0 ? _ref3 : true;
+        var _ref4, _typeAheadState$isOpe;
+        var shouldHide = (_ref4 = (focusState === null || focusState === void 0 ? void 0 : focusState.hasFocus) || ((_typeAheadState$isOpe = typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen) !== null && _typeAheadState$isOpe !== void 0 ? _typeAheadState$isOpe : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
         requestAnimationFrame(function () {
           return dispatchShouldHideDecorations(editorView, shouldHide);
         });
@@ -31,4 +60,20 @@ export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
       return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
     }
   };
-};
+};
+function cleanupHiddenDecoration(api) {
+  var hasRun = false;
+  return function () {
+    var _api$selectionMarker2;
+    if (!hasRun && api !== null && api !== void 0 && (_api$selectionMarker2 = api.selectionMarker) !== null && _api$selectionMarker2 !== void 0 && (_api$selectionMarker2 = _api$selectionMarker2.sharedState.currentState()) !== null && _api$selectionMarker2 !== void 0 && _api$selectionMarker2.isForcedHidden) {
+      var _api$core2;
+      hasRun = true;
+      return api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(function (_ref5) {
+        var tr = _ref5.tr;
+        return tr.setMeta(key, {
+          forceHide: false
+        });
+      });
+    }
+  };
+}

package/dist/esm/pm-plugins/main.js

@@ -12,22 +12,20 @@ export var createPlugin = function createPlugin(api) {
       init: function init() {
         return {
           decorations: DecorationSet.empty,
-          shouldHideDecorations: true
+          shouldHideDecorations: true,
+          forceHide: false
         };
       },
       apply: function apply(tr, currentState) {
-        var _tr$getMeta$shouldHid, _tr$getMeta;
-        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
+        var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
+        var forceHide = (_tr$getMeta$forceHide = (_tr$getMeta = tr.getMeta(key)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.forceHide) !== null && _tr$getMeta$forceHide !== void 0 ? _tr$getMeta$forceHide : currentState.forceHide;
+        var shouldHideDecorations = (_tr$getMeta$shouldHid = (_tr$getMeta2 = tr.getMeta(key)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.shouldHideDecorations) !== null && _tr$getMeta$shouldHid !== void 0 ? _tr$getMeta$shouldHid : currentState.shouldHideDecorations;
         var selection = tr.selection;
-        if (shouldHideDecorations) {
-          return {
-            decorations: DecorationSet.empty,
-            shouldHideDecorations: shouldHideDecorations
-          };
-        }
+        var decorations = shouldHideDecorations || forceHide ? DecorationSet.empty : DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection)), [selectionDecoration(selection)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection))));
         return {
-          decorations: DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection)), [selectionDecoration(selection)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection)))),
-          shouldHideDecorations: shouldHideDecorations
+          decorations: decorations,
+          shouldHideDecorations: shouldHideDecorations,
+          forceHide: forceHide
         };
       }
     },

package/dist/esm/ui/global-styles.js

@@ -3,9 +3,11 @@ import { css, Global, jsx } from '@emotion/react';
 
 // Unset the selection background color as we are using our own
 // Otherwise we might have a mix of grey + our selection marker depending on the state.
+// We do not apply this reset to input fields (ie. expand case) because otherwise
+// selection highlight will not show on those.
 var globalStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '.ProseMirror:not(:focus) ::selection': {
+  '.ProseMirror:not(:focus) ::selection:not(input)': {
     background: 'unset'
   }
 });

package/dist/esm/ui/widget-decoration.js

@@ -42,7 +42,7 @@ var toDOM = function toDOM(type) {
 var containsText = function containsText(resolvedPos) {
   var nodeBefore = resolvedPos.nodeBefore,
     nodeAfter = resolvedPos.nodeAfter;
-  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isText) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isText);
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isInline) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isInline);
 };
 export var createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection) {
   // We don't want the cursor to show if it's not text selection

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { selectionMarkerPlugin } from './plugin';
-export type { SelectionMarkerPlugin } from './types';
+export type { SelectionMarkerPlugin, ReleaseHiddenDecoration } from './types';

package/dist/types/pm-plugins/main.d.ts

@@ -7,11 +7,13 @@ import type { SelectionMarkerPlugin } from '../types';
 interface PluginState {
     decorations: DecorationSet;
     shouldHideDecorations: boolean;
+    forceHide: boolean;
 }
 export declare const key: PluginKey<PluginState>;
 export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
     decorations: DecorationSet;
     shouldHideDecorations: any;
+    forceHide: any;
 }>;
 export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
 export {};

package/dist/types/types.d.ts

@@ -1,6 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
     dependencies: [FocusPlugin, OptionalPlugin<TypeAheadPlugin>];
+    sharedState: {
+        isForcedHidden: boolean;
+    } | undefined;
+    actions: {
+        hideDecoration: () => ReleaseHiddenDecoration | undefined;
+    };
 }>;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
 export { selectionMarkerPlugin } from './plugin';
-export type { SelectionMarkerPlugin } from './types';
+export type { SelectionMarkerPlugin, ReleaseHiddenDecoration } from './types';

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

@@ -7,11 +7,13 @@ import type { SelectionMarkerPlugin } from '../types';
 interface PluginState {
     decorations: DecorationSet;
     shouldHideDecorations: boolean;
+    forceHide: boolean;
 }
 export declare const key: PluginKey<PluginState>;
 export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
     decorations: DecorationSet;
     shouldHideDecorations: any;
+    forceHide: any;
 }>;
 export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
 export {};

package/dist/types-ts4.5/types.d.ts

@@ -1,9 +1,16 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
+export type ReleaseHiddenDecoration = () => boolean | undefined;
 export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
     dependencies: [
         FocusPlugin,
         OptionalPlugin<TypeAheadPlugin>
     ];
+    sharedState: {
+        isForcedHidden: boolean;
+    } | undefined;
+    actions: {
+        hideDecoration: () => ReleaseHiddenDecoration | undefined;
+    };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-marker",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Selection marker plugin for @atlaskit/editor-core.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,12 +31,12 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.10.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-plugin-focus": "^1.1.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.0.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
-    "@atlaskit/primitives": "^4.0.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/primitives": "^4.1.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },