@atlaskit/editor-plugin-selection-marker 1.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-selection-marker

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,39 @@
+# Editor plugin selection marker
+
+Selection marker plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+
+---
+
+- **Install** - _yarn add @atlaskit/editor-plugin-selection-marker_
+- **npm** - [@atlaskit/editor-plugin-selection-marker](https://www.npmjs.com/package/@atlaskit/editor-plugin-selection-marker)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-selection-marker)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-selection-marker/dist/)
+
+## Usage
+
+---
+
+**Internal use only**
+
+@atlaskit/editor-plugin-selection-marker is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin selection marker](https://atlaskit.atlassian.com/packages/editor/editor-plugin-selection-marker) for documentation and examples for this package.
+
+## Support
+
+---
+
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+
+## License
+
+---
+
+Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "selectionMarkerPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.selectionMarkerPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectionMarkerPlugin = void 0;
+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; }
+var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
+  var api = _ref.api;
+  return {
+    name: 'selectionMarker',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'selectionMarkerPmPlugin',
+        plugin: function plugin() {
+          return (0, _main.createPlugin)(api);
+        }
+      }];
+    },
+    usePluginHook: function usePluginHook(_ref2) {
+      var editorView = _ref2.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;
+        requestAnimationFrame(function () {
+          return (0, _main.dispatchShouldHideDecorations)(editorView, shouldHide);
+        });
+      }, [editorView, focusState, typeAheadState]);
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null);
+    }
+  };
+};

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+exports.dispatchShouldHideDecorations = dispatchShouldHideDecorations;
+exports.key = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+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');
+var createPlugin = exports.createPlugin = function createPlugin(api) {
+  return new _safePlugin.SafePlugin({
+    key: key,
+    state: {
+      init: function init() {
+        return {
+          decorations: _view.DecorationSet.empty,
+          shouldHideDecorations: true
+        };
+      },
+      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 selection = tr.selection;
+        if (shouldHideDecorations) {
+          return {
+            decorations: _view.DecorationSet.empty,
+            shouldHideDecorations: shouldHideDecorations
+          };
+        }
+        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
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _key$getState;
+        return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      }
+    }
+  });
+};
+function dispatchShouldHideDecorations(editorView, shouldHideDecorations) {
+  var dispatch = editorView.dispatch,
+    state = editorView.state;
+  dispatch(state.tr.setMeta(key, {
+    shouldHideDecorations: shouldHideDecorations
+  }));
+}

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+/** @jsx jsx */
+
+// 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.
+var globalStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '.ProseMirror:not(:focus) ::selection': {
+    background: 'unset'
+  }
+});
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return (0, _react.jsx)(_react.Global, {
+    styles: globalStyles
+  });
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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) {
+  return _view.Decoration.inline(selection.from, selection.to, {
+    style: decorationStyle,
+    'data-testid': 'selection-marker-selection'
+  });
+};

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createWidgetDecoration = void 0;
+var _react = _interopRequireDefault(require("react"));
+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)({
+  content: "''",
+  position: 'absolute',
+  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  backgroundRepeat: 'no-repeat',
+  backgroundPositionX: 'center',
+  backgroundPositionY: 'center',
+  backgroundSize: 'contain',
+  aspectRatio: '3/20',
+  left: '0px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
+var Widget = function Widget(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: 'span',
+    xcss: selectionMarkerStyles,
+    testId: "selection-marker-".concat(type, "-cursor"),
+    contentEditable: false
+  });
+};
+var toDOM = function toDOM(type) {
+  var element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', "position: relative;");
+  _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Widget, {
+    type: type
+  }), element);
+  return element;
+};
+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);
+};
+var createWidgetDecoration = exports.createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection) {
+  // 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) {
+    return [];
+  }
+  return [_view.Decoration.widget(resolvedPos.pos, toDOM(type), {
+    side: -1,
+    key: "".concat(type, "WidgetDecoration"),
+    stopEvent: function stopEvent() {
+      return true;
+    },
+    ignoreSelection: true
+  })];
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { selectionMarkerPlugin } from './plugin';

package/dist/es2019/plugin.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { GlobalStylesWrapper } from './ui/global-styles';
+export const selectionMarkerPlugin = ({
+  api
+}) => {
+  return {
+    name: 'selectionMarker',
+    pmPlugins() {
+      return [{
+        name: 'selectionMarkerPmPlugin',
+        plugin: () => createPlugin(api)
+      }];
+    },
+    usePluginHook({
+      editorView
+    }) {
+      const {
+        focusState,
+        typeAheadState
+      } = useSharedPluginState(api, ['focus', 'typeAhead']);
+      useEffect(() => {
+        var _ref, _typeAheadState$isOpe;
+        const shouldHide = (_ref = (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 && _ref !== void 0 ? _ref : true;
+        requestAnimationFrame(() => dispatchShouldHideDecorations(editorView, shouldHide));
+      }, [editorView, focusState, typeAheadState]);
+    },
+    contentComponent() {
+      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
+    }
+  };
+};

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

@@ -0,0 +1,51 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+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');
+export const createPlugin = api => {
+  return new SafePlugin({
+    key,
+    state: {
+      init() {
+        return {
+          decorations: DecorationSet.empty,
+          shouldHideDecorations: true
+        };
+      },
+      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;
+        const {
+          selection
+        } = tr;
+        if (shouldHideDecorations) {
+          return {
+            decorations: DecorationSet.empty,
+            shouldHideDecorations
+          };
+        }
+        return {
+          decorations: DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection), selectionDecoration(selection), ...createWidgetDecoration(selection.$head, 'head', selection)]),
+          shouldHideDecorations
+        };
+      }
+    },
+    props: {
+      decorations: state => {
+        var _key$getState;
+        return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      }
+    }
+  });
+};
+export function dispatchShouldHideDecorations(editorView, shouldHideDecorations) {
+  const {
+    dispatch,
+    state
+  } = editorView;
+  dispatch(state.tr.setMeta(key, {
+    shouldHideDecorations
+  }));
+}

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+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.
+const globalStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '.ProseMirror:not(:focus) ::selection': {
+    background: 'unset'
+  }
+});
+export const GlobalStylesWrapper = () => {
+  return jsx(Global, {
+    styles: globalStyles
+  });
+};

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

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

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

@@ -0,0 +1,62 @@
+import React from 'react';
+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({
+  content: "''",
+  position: 'absolute',
+  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  backgroundRepeat: 'no-repeat',
+  backgroundPositionX: 'center',
+  backgroundPositionY: 'center',
+  backgroundSize: 'contain',
+  aspectRatio: '3/20',
+  left: '0px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
+const Widget = ({
+  type
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: 'span',
+    xcss: selectionMarkerStyles,
+    testId: `selection-marker-${type}-cursor`,
+    contentEditable: false
+  });
+};
+const toDOM = type => {
+  let element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', `position: relative;`);
+  ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
+    type: type
+  }), element);
+  return element;
+};
+const containsText = resolvedPos => {
+  const {
+    nodeBefore,
+    nodeAfter
+  } = resolvedPos;
+  return (nodeBefore === null || nodeBefore === void 0 ? void 0 : nodeBefore.isText) || (nodeAfter === null || nodeAfter === void 0 ? void 0 : nodeAfter.isText);
+};
+export const createWidgetDecoration = (resolvedPos, type, selection) => {
+  // 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) {
+    return [];
+  }
+  return [Decoration.widget(resolvedPos.pos, toDOM(type), {
+    side: -1,
+    key: `${type}WidgetDecoration`,
+    stopEvent: () => true,
+    ignoreSelection: true
+  })];
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { selectionMarkerPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { createPlugin, dispatchShouldHideDecorations } from './pm-plugins/main';
+import { GlobalStylesWrapper } from './ui/global-styles';
+export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
+  var api = _ref.api;
+  return {
+    name: 'selectionMarker',
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'selectionMarkerPmPlugin',
+        plugin: function plugin() {
+          return createPlugin(api);
+        }
+      }];
+    },
+    usePluginHook: function usePluginHook(_ref2) {
+      var editorView = _ref2.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;
+        requestAnimationFrame(function () {
+          return dispatchShouldHideDecorations(editorView, shouldHide);
+        });
+      }, [editorView, focusState, typeAheadState]);
+    },
+    contentComponent: function contentComponent() {
+      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
+    }
+  };
+};

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

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+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');
+export var createPlugin = function createPlugin(api) {
+  return new SafePlugin({
+    key: key,
+    state: {
+      init: function init() {
+        return {
+          decorations: DecorationSet.empty,
+          shouldHideDecorations: true
+        };
+      },
+      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 selection = tr.selection;
+        if (shouldHideDecorations) {
+          return {
+            decorations: DecorationSet.empty,
+            shouldHideDecorations: shouldHideDecorations
+          };
+        }
+        return {
+          decorations: DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection)), [selectionDecoration(selection)], _toConsumableArray(createWidgetDecoration(selection.$head, 'head', selection)))),
+          shouldHideDecorations: shouldHideDecorations
+        };
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _key$getState;
+        return (_key$getState = key.getState(state)) === null || _key$getState === void 0 ? void 0 : _key$getState.decorations;
+      }
+    }
+  });
+};
+export function dispatchShouldHideDecorations(editorView, shouldHideDecorations) {
+  var dispatch = editorView.dispatch,
+    state = editorView.state;
+  dispatch(state.tr.setMeta(key, {
+    shouldHideDecorations: shouldHideDecorations
+  }));
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+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.
+var globalStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '.ProseMirror:not(:focus) ::selection': {
+    background: 'unset'
+  }
+});
+export var GlobalStylesWrapper = function GlobalStylesWrapper() {
+  return jsx(Global, {
+    styles: globalStyles
+  });
+};

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

@@ -0,0 +1,8 @@
+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) {
+  return Decoration.inline(selection.from, selection.to, {
+    style: decorationStyle,
+    'data-testid': 'selection-marker-selection'
+  });
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+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({
+  content: "''",
+  position: 'absolute',
+  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
+  top: 'space.0',
+  bottom: "var(--ds-space-negative-025, -2px)",
+  backgroundRepeat: 'no-repeat',
+  backgroundPositionX: 'center',
+  backgroundPositionY: 'center',
+  backgroundSize: 'contain',
+  aspectRatio: '3/20',
+  left: '0px',
+  marginLeft: '-0.1em',
+  right: '0px',
+  marginRight: '-0.1em',
+  pointerEvents: 'none'
+});
+var Widget = function Widget(_ref) {
+  var type = _ref.type;
+  return /*#__PURE__*/React.createElement(Box, {
+    as: 'span',
+    xcss: selectionMarkerStyles,
+    testId: "selection-marker-".concat(type, "-cursor"),
+    contentEditable: false
+  });
+};
+var toDOM = function toDOM(type) {
+  var element = document.createElement('span');
+  element.contentEditable = 'false';
+  element.setAttribute('style', "position: relative;");
+  ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
+    type: type
+  }), element);
+  return element;
+};
+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);
+};
+export var createWidgetDecoration = function createWidgetDecoration(resolvedPos, type, selection) {
+  // 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) {
+    return [];
+  }
+  return [Decoration.widget(resolvedPos.pos, toDOM(type), {
+    side: -1,
+    key: "".concat(type, "WidgetDecoration"),
+    stopEvent: function stopEvent() {
+      return true;
+    },
+    ignoreSelection: true
+  })];
+};

package/dist/types/index.d.ts

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

package/dist/types/plugin.d.ts

@@ -0,0 +1,2 @@
+import type { SelectionMarkerPlugin } from './types';
+export declare const selectionMarkerPlugin: SelectionMarkerPlugin;

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

@@ -0,0 +1,17 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { SelectionMarkerPlugin } from '../types';
+interface PluginState {
+    decorations: DecorationSet;
+    shouldHideDecorations: boolean;
+}
+export declare const key: PluginKey<PluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
+    decorations: DecorationSet;
+    shouldHideDecorations: any;
+}>;
+export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,6 @@
+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 SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
+    dependencies: [FocusPlugin, OptionalPlugin<TypeAheadPlugin>];
+}>;

package/dist/types/ui/global-styles.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+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 {};

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

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

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

@@ -0,0 +1,2 @@
+import type { SelectionMarkerPlugin } from './types';
+export declare const selectionMarkerPlugin: SelectionMarkerPlugin;

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

@@ -0,0 +1,17 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { SelectionMarkerPlugin } from '../types';
+interface PluginState {
+    decorations: DecorationSet;
+    shouldHideDecorations: boolean;
+}
+export declare const key: PluginKey<PluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
+    decorations: DecorationSet;
+    shouldHideDecorations: any;
+}>;
+export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
+export {};

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

@@ -0,0 +1,9 @@
+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 SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
+    dependencies: [
+        FocusPlugin,
+        OptionalPlugin<TypeAheadPlugin>
+    ];
+}>;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const GlobalStylesWrapper: () => jsx.JSX.Element;

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

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

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

@@ -0,0 +1,6 @@
+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 {};

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@atlaskit/editor-plugin-selection-marker",
+  "version": "1.0.0",
+  "description": "Selection marker plugin for @atlaskit/editor-core.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor: Lego",
+    "inPublicMirror": false,
+    "releaseModel": "continuous"
+  },
+  "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/editor-common": "^78.10.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",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "compiled"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}