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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-selection-marker
 
+## 1.2.1
+
+### Patch Changes
+
+- [#90925](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90925) [`431c0d17e3e3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/431c0d17e3e3) - [ux] Improve the selection marker by hiding it when in an expand and improving styling by making it more subtle.
+
+## 1.2.0
+
+### Minor Changes
+
+- [#90866](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90866) [`519e3bd71a35`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/519e3bd71a35) - [ux] [ED-22985] - Limit selection-marker plugin to only decorate text nodes
+
 ## 1.1.3
 
 ### Patch Changes

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

@@ -21,9 +21,9 @@ function getDecorations(tr, 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))));
+      return _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection, true)), (0, _toConsumableArray2.default)((0, _selectionDecoration.selectionDecoration)(tr.doc, 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)]));
+      return _view.DecorationSet.create(tr.doc, [].concat((0, _toConsumableArray2.default)((0, _widgetDecoration.createWidgetDecoration)(selection.$anchor, 'anchor', selection, false)), (0, _toConsumableArray2.default)((0, _selectionDecoration.selectionDecoration)(tr.doc, selection, false))));
   }
 }
 function getDecorationType(tr, forceHide, shouldHideDecorations) {

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

@@ -5,11 +5,27 @@ 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-gray-subtler, #DCDFE4)", ";\n  ");
+var decorationStyle = "\n    background-color: ".concat("var(--ds-background-neutral, #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: isHighlight ? decorationHighlightStyle : decorationStyle,
-    'data-testid': 'selection-marker-selection'
+var selectionDecoration = exports.selectionDecoration = function selectionDecoration(doc, selection, isHighlight) {
+  var selectionDecorations = [];
+  doc.nodesBetween(selection.from, selection.to, function (currentNode, nodePos) {
+    if (!currentNode.isText) {
+      return true;
+    }
+    var decorationFrom = selection.from;
+    var decorationTo = selection.to;
+    if (nodePos > selection.from) {
+      decorationFrom = nodePos;
+    }
+    if (nodePos + currentNode.nodeSize < selection.to) {
+      decorationTo = nodePos + currentNode.nodeSize;
+    }
+    selectionDecorations.push(_view.Decoration.inline(decorationFrom, decorationTo, {
+      style: isHighlight ? decorationHighlightStyle : decorationStyle,
+      'data-testid': 'selection-marker-selection'
+    }));
+    return true;
   });
+  return selectionDecorations;
 };

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

@@ -32,7 +32,7 @@ var selectionMarkerCursorStyles = (0, _primitives.xcss)({
   content: "''",
   position: 'absolute',
   background: "var(--ds-text, ".concat(_colors.N500, ")"),
-  width: "var(--ds-space-025, 2px)",
+  width: '1px',
   display: 'inline-block',
   top: 'space.0',
   bottom: "var(--ds-space-negative-025, -2px)",

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

@@ -13,9 +13,9 @@ function getDecorations(tr, 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)]);
+      return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, true), ...selectionDecoration(tr.doc, selection, true), ...createWidgetDecoration(selection.$head, 'head', selection, true)]);
     case 'blur':
-      return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, false), selectionDecoration(selection, false)]);
+      return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, false), ...selectionDecoration(tr.doc, selection, false)]);
   }
 }
 function getDecorationType(tr, forceHide, shouldHideDecorations) {

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

@@ -1,14 +1,30 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 const decorationStyle = `
-    background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+    background-color: ${"var(--ds-background-neutral, #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, isHighlight) => {
-  return Decoration.inline(selection.from, selection.to, {
-    style: isHighlight ? decorationHighlightStyle : decorationStyle,
-    'data-testid': 'selection-marker-selection'
+export const selectionDecoration = (doc, selection, isHighlight) => {
+  const selectionDecorations = [];
+  doc.nodesBetween(selection.from, selection.to, (currentNode, nodePos) => {
+    if (!currentNode.isText) {
+      return true;
+    }
+    let decorationFrom = selection.from;
+    let decorationTo = selection.to;
+    if (nodePos > selection.from) {
+      decorationFrom = nodePos;
+    }
+    if (nodePos + currentNode.nodeSize < selection.to) {
+      decorationTo = nodePos + currentNode.nodeSize;
+    }
+    selectionDecorations.push(Decoration.inline(decorationFrom, decorationTo, {
+      style: isHighlight ? decorationHighlightStyle : decorationStyle,
+      'data-testid': 'selection-marker-selection'
+    }));
+    return true;
   });
+  return selectionDecorations;
 };

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

@@ -25,7 +25,7 @@ const selectionMarkerCursorStyles = xcss({
   content: "''",
   position: 'absolute',
   background: `var(--ds-text, ${N500})`,
-  width: "var(--ds-space-025, 2px)",
+  width: '1px',
   display: 'inline-block',
   top: 'space.0',
   bottom: "var(--ds-space-negative-025, -2px)",

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

@@ -12,9 +12,9 @@ function getDecorations(tr, 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))));
+      return DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection, true)), _toConsumableArray(selectionDecoration(tr.doc, 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)]));
+      return DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection, false)), _toConsumableArray(selectionDecoration(tr.doc, selection, false))));
   }
 }
 function getDecorationType(tr, forceHide, shouldHideDecorations) {

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

@@ -1,9 +1,25 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-var decorationStyle = "\n    background-color: ".concat("var(--ds-background-accent-gray-subtler, #DCDFE4)", ";\n  ");
+var decorationStyle = "\n    background-color: ".concat("var(--ds-background-neutral, #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: isHighlight ? decorationHighlightStyle : decorationStyle,
-    'data-testid': 'selection-marker-selection'
+export var selectionDecoration = function selectionDecoration(doc, selection, isHighlight) {
+  var selectionDecorations = [];
+  doc.nodesBetween(selection.from, selection.to, function (currentNode, nodePos) {
+    if (!currentNode.isText) {
+      return true;
+    }
+    var decorationFrom = selection.from;
+    var decorationTo = selection.to;
+    if (nodePos > selection.from) {
+      decorationFrom = nodePos;
+    }
+    if (nodePos + currentNode.nodeSize < selection.to) {
+      decorationTo = nodePos + currentNode.nodeSize;
+    }
+    selectionDecorations.push(Decoration.inline(decorationFrom, decorationTo, {
+      style: isHighlight ? decorationHighlightStyle : decorationStyle,
+      'data-testid': 'selection-marker-selection'
+    }));
+    return true;
   });
+  return selectionDecorations;
 };

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

@@ -25,7 +25,7 @@ var selectionMarkerCursorStyles = xcss({
   content: "''",
   position: 'absolute',
   background: "var(--ds-text, ".concat(N500, ")"),
-  width: "var(--ds-space-025, 2px)",
+  width: '1px',
   display: 'inline-block',
   top: 'space.0',
   bottom: "var(--ds-space-negative-025, -2px)",

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-selection-marker",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "description": "Selection marker plugin for @atlaskit/editor-core.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,13 +31,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.18.0",
+    "@atlaskit/editor-common": "^78.28.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",
+    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },