@atlaskit/editor-plugin-selection-marker 1.1.2 → 1.1.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-selection-marker
 
+## 1.1.3
+
+### Patch Changes
+
+- [#79359](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79359) [`3441b8062083`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3441b8062083) - [ux] Make the selection marker styling more subtle.
+
 ## 1.1.2
 
 ### Patch Changes

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

@@ -9,11 +9,30 @@ exports.dispatchShouldHideDecorations = dispatchShouldHideDecorations;
 exports.key = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _selectionDecoration = require("../ui/selection-decoration");
 var _widgetDecoration = require("../ui/widget-decoration");
 var key = exports.key = new _state.PluginKey('selectionMarker');
+function getDecorations(tr, type) {
+  var selection = tr.selection;
+  switch (type) {
+    case 'none':
+      return _view.DecorationSet.empty;
+    case 'highlight':
+      return _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection, true)), [(0, _selectionDecoration.selectionDecoration)(selection, true)], (0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$head, 'head', selection, true))));
+    case 'blur':
+      return _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection, false)), [(0, _selectionDecoration.selectionDecoration)(selection, false)]));
+  }
+}
+function getDecorationType(tr, forceHide, shouldHideDecorations) {
+  if (shouldHideDecorations || forceHide || (0, _utils.isEmptyDocument)(tr.doc)) {
+    return 'none';
+  }
+  // TODO: implement "highlight" for AI features
+  return 'blur';
+}
 var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     key: key,
@@ -29,10 +48,9 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
         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;
-        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))));
+        var type = getDecorationType(tr, forceHide, shouldHideDecorations);
         return {
-          decorations: decorations,
+          decorations: getDecorations(tr, type),
           shouldHideDecorations: shouldHideDecorations,
           forceHide: forceHide
         };

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectionDecoration = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
-var decorationStyle = "\n    background-color: ".concat("var(--ds-background-accent-blue-subtlest, #E9F2FF)", ";\n    border-bottom: 2px solid ", "var(--ds-background-accent-blue-subtler, #cce0ff)", ";\n  ");
-var selectionDecoration = exports.selectionDecoration = function selectionDecoration(selection) {
+var decorationStyle = "\n    background-color: ".concat("var(--ds-background-accent-gray-subtler, #DCDFE4)", ";\n  ");
+var decorationHighlightStyle = "\n    background-color: ".concat("var(--ds-background-accent-blue-subtlest, #E9F2FF)", ";\n    border-bottom: 2px solid ", "var(--ds-background-accent-blue-subtler, #cce0ff)", ";\n  ");
+var selectionDecoration = exports.selectionDecoration = function selectionDecoration(selection, isHighlight) {
   return _view.Decoration.inline(selection.from, selection.to, {
-    style: decorationStyle,
+    style: isHighlight ? decorationHighlightStyle : decorationStyle,
     'data-testid': 'selection-marker-selection'
   });
 };

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

@@ -10,8 +10,8 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _primitives = require("@atlaskit/primitives");
-// Copied from: platform/packages/editor/editor-plugin-ai/src/ui/modal/styles.tsx
-var selectionMarkerStyles = (0, _primitives.xcss)({
+var _colors = require("@atlaskit/theme/colors");
+var selectionMarkerHighlightStyles = (0, _primitives.xcss)({
   content: "''",
   position: 'absolute',
   backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
@@ -28,21 +28,37 @@ var selectionMarkerStyles = (0, _primitives.xcss)({
   marginRight: '-0.1em',
   pointerEvents: 'none'
 });
+var selectionMarkerCursorStyles = (0, _primitives.xcss)({
+  content: "''",
+  position: 'absolute',
+  background: "var(--ds-text, ".concat(_colors.N500, ")"),
+  width: "var(--ds-space-025, 2px)",
+  display: 'inline-block',
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  left: '1px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
 var Widget = function Widget(_ref) {
-  var type = _ref.type;
+  var type = _ref.type,
+    isHighlight = _ref.isHighlight;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: 'span',
-    xcss: selectionMarkerStyles,
+    xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
     testId: "selection-marker-".concat(type, "-cursor"),
     contentEditable: false
   });
 };
-var toDOM = function toDOM(type) {
+var toDOM = function toDOM(type, isHighlight) {
   var element = document.createElement('span');
   element.contentEditable = 'false';
   element.setAttribute('style', "position: relative;");
   _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Widget, {
-    type: type
+    type: type,
+    isHighlight: isHighlight
   }), element);
   return element;
 };
@@ -51,13 +67,13 @@ var containsText = function containsText(resolvedPos) {
     nodeAfter = resolvedPos.nodeAfter;
   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) {
+var createWidgetDecoration = exports.createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection, isHighlight) {
   // We don't want the cursor to show if it's not text selection
   // ie. if it's on media selection
-  if (!(selection instanceof _state.TextSelection) || containsText(resolvedPos) === false) {
+  if (!(selection instanceof _state.TextSelection) || containsText(resolvedPos) === false || !selection.empty) {
     return [];
   }
-  return [_view.Decoration.widget(resolvedPos.pos, toDOM(type), {
+  return [_view.Decoration.widget(resolvedPos.pos, toDOM(type, isHighlight), {
     side: -1,
     key: "".concat(type, "WidgetDecoration"),
     stopEvent: function stopEvent() {

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

@@ -1,9 +1,30 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { selectionDecoration } from '../ui/selection-decoration';
 import { createWidgetDecoration } from '../ui/widget-decoration';
 export const key = new PluginKey('selectionMarker');
+function getDecorations(tr, type) {
+  const {
+    selection
+  } = tr;
+  switch (type) {
+    case 'none':
+      return DecorationSet.empty;
+    case 'highlight':
+      return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, true), selectionDecoration(selection, true), ...createWidgetDecoration(selection.$head, 'head', selection, true)]);
+    case 'blur':
+      return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, false), selectionDecoration(selection, false)]);
+  }
+}
+function getDecorationType(tr, forceHide, shouldHideDecorations) {
+  if (shouldHideDecorations || forceHide || isEmptyDocument(tr.doc)) {
+    return 'none';
+  }
+  // TODO: implement "highlight" for AI features
+  return 'blur';
+}
 export const createPlugin = api => {
   return new SafePlugin({
     key,
@@ -19,12 +40,9 @@ export const createPlugin = api => {
         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;
-        const decorations = shouldHideDecorations || forceHide ? DecorationSet.empty : DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]);
+        const type = getDecorationType(tr, forceHide, shouldHideDecorations);
         return {
-          decorations,
+          decorations: getDecorations(tr, type),
           shouldHideDecorations,
           forceHide
         };

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

@@ -1,11 +1,14 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 const decorationStyle = `
+    background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+  `;
+const decorationHighlightStyle = `
     background-color: ${"var(--ds-background-accent-blue-subtlest, #E9F2FF)"};
     border-bottom: 2px solid ${"var(--ds-background-accent-blue-subtler, #cce0ff)"};
   `;
-export const selectionDecoration = selection => {
+export const selectionDecoration = (selection, isHighlight) => {
   return Decoration.inline(selection.from, selection.to, {
-    style: decorationStyle,
+    style: isHighlight ? decorationHighlightStyle : decorationStyle,
     'data-testid': 'selection-marker-selection'
   });
 };

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

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Box, xcss } from '@atlaskit/primitives';
-// Copied from: platform/packages/editor/editor-plugin-ai/src/ui/modal/styles.tsx
-const selectionMarkerStyles = xcss({
+import { N500 } from '@atlaskit/theme/colors';
+const selectionMarkerHighlightStyles = xcss({
   content: "''",
   position: 'absolute',
   backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
@@ -21,22 +21,38 @@ const selectionMarkerStyles = xcss({
   marginRight: '-0.1em',
   pointerEvents: 'none'
 });
+const selectionMarkerCursorStyles = xcss({
+  content: "''",
+  position: 'absolute',
+  background: `var(--ds-text, ${N500})`,
+  width: "var(--ds-space-025, 2px)",
+  display: 'inline-block',
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  left: '1px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
 const Widget = ({
-  type
+  type,
+  isHighlight
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     as: 'span',
-    xcss: selectionMarkerStyles,
+    xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
     testId: `selection-marker-${type}-cursor`,
     contentEditable: false
   });
 };
-const toDOM = type => {
+const toDOM = (type, isHighlight) => {
   let element = document.createElement('span');
   element.contentEditable = 'false';
   element.setAttribute('style', `position: relative;`);
   ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
-    type: type
+    type: type,
+    isHighlight: isHighlight
   }), element);
   return element;
 };
@@ -47,13 +63,13 @@ const containsText = resolvedPos => {
   } = resolvedPos;
   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) => {
+export const createWidgetDecoration = (resolvedPos, type, selection, isHighlight) => {
   // We don't want the cursor to show if it's not text selection
   // ie. if it's on media selection
-  if (!(selection instanceof TextSelection) || containsText(resolvedPos) === false) {
+  if (!(selection instanceof TextSelection) || containsText(resolvedPos) === false || !selection.empty) {
     return [];
   }
-  return [Decoration.widget(resolvedPos.pos, toDOM(type), {
+  return [Decoration.widget(resolvedPos.pos, toDOM(type, isHighlight), {
     side: -1,
     key: `${type}WidgetDecoration`,
     stopEvent: () => true,

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

@@ -1,10 +1,29 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { selectionDecoration } from '../ui/selection-decoration';
 import { createWidgetDecoration } from '../ui/widget-decoration';
 export var key = new PluginKey('selectionMarker');
+function getDecorations(tr, type) {
+  var selection = tr.selection;
+  switch (type) {
+    case 'none':
+      return DecorationSet.empty;
+    case 'highlight':
+      return DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection, true)), [selectionDecoration(selection, true)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection, true))));
+    case 'blur':
+      return DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection, false)), [selectionDecoration(selection, false)]));
+  }
+}
+function getDecorationType(tr, forceHide, shouldHideDecorations) {
+  if (shouldHideDecorations || forceHide || isEmptyDocument(tr.doc)) {
+    return 'none';
+  }
+  // TODO: implement "highlight" for AI features
+  return 'blur';
+}
 export var createPlugin = function createPlugin(api) {
   return new SafePlugin({
     key: key,
@@ -20,10 +39,9 @@ export var createPlugin = function createPlugin(api) {
         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;
-        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))));
+        var type = getDecorationType(tr, forceHide, shouldHideDecorations);
         return {
-          decorations: decorations,
+          decorations: getDecorations(tr, type),
           shouldHideDecorations: shouldHideDecorations,
           forceHide: forceHide
         };

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

@@ -1,8 +1,9 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-var decorationStyle = "\n    background-color: ".concat("var(--ds-background-accent-blue-subtlest, #E9F2FF)", ";\n    border-bottom: 2px solid ", "var(--ds-background-accent-blue-subtler, #cce0ff)", ";\n  ");
-export var selectionDecoration = function selectionDecoration(selection) {
+var decorationStyle = "\n    background-color: ".concat("var(--ds-background-accent-gray-subtler, #DCDFE4)", ";\n  ");
+var decorationHighlightStyle = "\n    background-color: ".concat("var(--ds-background-accent-blue-subtlest, #E9F2FF)", ";\n    border-bottom: 2px solid ", "var(--ds-background-accent-blue-subtler, #cce0ff)", ";\n  ");
+export var selectionDecoration = function selectionDecoration(selection, isHighlight) {
   return Decoration.inline(selection.from, selection.to, {
-    style: decorationStyle,
+    style: isHighlight ? decorationHighlightStyle : decorationStyle,
     'data-testid': 'selection-marker-selection'
   });
 };

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

@@ -3,8 +3,8 @@ import ReactDOM from 'react-dom';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Box, xcss } from '@atlaskit/primitives';
-// Copied from: platform/packages/editor/editor-plugin-ai/src/ui/modal/styles.tsx
-var selectionMarkerStyles = xcss({
+import { N500 } from '@atlaskit/theme/colors';
+var selectionMarkerHighlightStyles = xcss({
   content: "''",
   position: 'absolute',
   backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
@@ -21,21 +21,37 @@ var selectionMarkerStyles = xcss({
   marginRight: '-0.1em',
   pointerEvents: 'none'
 });
+var selectionMarkerCursorStyles = xcss({
+  content: "''",
+  position: 'absolute',
+  background: "var(--ds-text, ".concat(N500, ")"),
+  width: "var(--ds-space-025, 2px)",
+  display: 'inline-block',
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  left: '1px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
 var Widget = function Widget(_ref) {
-  var type = _ref.type;
+  var type = _ref.type,
+    isHighlight = _ref.isHighlight;
   return /*#__PURE__*/React.createElement(Box, {
     as: 'span',
-    xcss: selectionMarkerStyles,
+    xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
     testId: "selection-marker-".concat(type, "-cursor"),
     contentEditable: false
   });
 };
-var toDOM = function toDOM(type) {
+var toDOM = function toDOM(type, isHighlight) {
   var element = document.createElement('span');
   element.contentEditable = 'false';
   element.setAttribute('style', "position: relative;");
   ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
-    type: type
+    type: type,
+    isHighlight: isHighlight
   }), element);
   return element;
 };
@@ -44,13 +60,13 @@ var containsText = function containsText(resolvedPos) {
     nodeAfter = resolvedPos.nodeAfter;
   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) {
+export var createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection, isHighlight) {
   // We don't want the cursor to show if it's not text selection
   // ie. if it's on media selection
-  if (!(selection instanceof TextSelection) || containsText(resolvedPos) === false) {
+  if (!(selection instanceof TextSelection) || containsText(resolvedPos) === false || !selection.empty) {
     return [];
   }
-  return [Decoration.widget(resolvedPos.pos, toDOM(type), {
+  return [Decoration.widget(resolvedPos.pos, toDOM(type, isHighlight), {
     side: -1,
     key: "".concat(type, "WidgetDecoration"),
     stopEvent: function stopEvent() {

package/dist/types/ui/selection-decoration.d.ts

@@ -1,3 +1,3 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-export declare const selectionDecoration: (selection: Selection) => Decoration;
+export declare const selectionDecoration: (selection: Selection, isHighlight: boolean) => Decoration;

package/dist/types/ui/widget-decoration.d.ts

@@ -2,5 +2,5 @@ import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 type SelectionType = 'anchor' | 'head';
-export declare const createWidgetDecoration: (resolvedPos: ResolvedPos, type: SelectionType, selection: Selection) => Decoration[];
+export declare const createWidgetDecoration: (resolvedPos: ResolvedPos, type: SelectionType, selection: Selection, isHighlight: boolean) => Decoration[];
 export {};

package/dist/types-ts4.5/ui/selection-decoration.d.ts

@@ -1,3 +1,3 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-export declare const selectionDecoration: (selection: Selection) => Decoration;
+export declare const selectionDecoration: (selection: Selection, isHighlight: boolean) => Decoration;

package/dist/types-ts4.5/ui/widget-decoration.d.ts

@@ -2,5 +2,5 @@ import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 type SelectionType = 'anchor' | 'head';
-export declare const createWidgetDecoration: (resolvedPos: ResolvedPos, type: SelectionType, selection: Selection) => Decoration[];
+export declare const createWidgetDecoration: (resolvedPos: ResolvedPos, type: SelectionType, selection: Selection, isHighlight: boolean) => Decoration[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-marker",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Selection marker plugin for @atlaskit/editor-core.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,11 +31,12 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.17.0",
+    "@atlaskit/editor-common": "^78.18.0",
     "@atlaskit/editor-plugin-focus": "^1.1.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.0.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.42.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"