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

package/CHANGELOG.md

@@ -1 +1,7 @@
 # @atlaskit/editor-plugin-selection-marker
+
+## 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 {

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-marker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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.12.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"
   },