@atlaskit/editor-plugin-selection-marker 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/plugin.js +5 -4
  3. package/dist/cjs/pm-plugins/main.js +3 -3
  4. package/dist/cjs/ui/selection-decoration.js +1 -1
  5. package/dist/cjs/ui/widget-decoration.js +1 -1
  6. package/dist/es2019/plugin.js +5 -4
  7. package/dist/es2019/pm-plugins/main.js +3 -3
  8. package/dist/es2019/ui/selection-decoration.js +1 -1
  9. package/dist/es2019/ui/widget-decoration.js +1 -1
  10. package/dist/esm/plugin.js +5 -4
  11. package/dist/esm/pm-plugins/main.js +3 -3
  12. package/dist/esm/ui/selection-decoration.js +1 -1
  13. package/dist/esm/ui/widget-decoration.js +1 -1
  14. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-selection-marker
2
2
 
3
+ ## 1.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#91886](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91886) [`5c0443e007d9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c0443e007d9) - [ux] Fix bug where selection marker shows when focussing on the expand title with the keyboard.
8
+
9
+ ## 1.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#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.
14
+
3
15
  ## 1.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/plugin.js CHANGED
@@ -54,16 +54,17 @@ var selectionMarkerPlugin = exports.selectionMarkerPlugin = function selectionMa
54
54
  },
55
55
  usePluginHook: function usePluginHook(_ref3) {
56
56
  var editorView = _ref3.editorView;
57
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'typeAhead']),
57
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'typeAhead', 'selectionMarker']),
58
58
  focusState = _useSharedPluginState.focusState,
59
- typeAheadState = _useSharedPluginState.typeAheadState;
59
+ typeAheadState = _useSharedPluginState.typeAheadState,
60
+ selectionMarkerState = _useSharedPluginState.selectionMarkerState;
60
61
  (0, _react.useEffect)(function () {
61
62
  var _ref4, _typeAheadState$isOpe;
62
- 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;
63
+ 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) || (selectionMarkerState === null || selectionMarkerState === void 0 ? void 0 : selectionMarkerState.isForcedHidden)) !== null && _ref4 !== void 0 ? _ref4 : true;
63
64
  requestAnimationFrame(function () {
64
65
  return (0, _main.dispatchShouldHideDecorations)(editorView, shouldHide);
65
66
  });
66
- }, [editorView, focusState, typeAheadState]);
67
+ }, [editorView, focusState, typeAheadState, selectionMarkerState]);
67
68
  },
68
69
  contentComponent: function contentComponent() {
69
70
  return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null);
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -26,8 +26,8 @@ function getDecorations(tr, type) {
26
26
  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))));
27
27
  }
28
28
  }
29
- function getDecorationType(tr, forceHide, shouldHideDecorations) {
30
- if (shouldHideDecorations || forceHide || (0, _utils.isEmptyDocument)(tr.doc)) {
29
+ function getDecorationType(tr, shouldHideDecorations) {
30
+ if (shouldHideDecorations || (0, _utils.isEmptyDocument)(tr.doc)) {
31
31
  return 'none';
32
32
  }
33
33
  // TODO: implement "highlight" for AI features
@@ -48,7 +48,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
48
48
  var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
49
49
  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;
50
50
  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;
51
- var type = getDecorationType(tr, forceHide, shouldHideDecorations);
51
+ var type = getDecorationType(tr, shouldHideDecorations);
52
52
  return {
53
53
  decorations: getDecorations(tr, type),
54
54
  shouldHideDecorations: shouldHideDecorations,
package/dist/cjs/ui/selection-decoration.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.selectionDecoration = void 0;
7
7
  var _view = require("@atlaskit/editor-prosemirror/view");
8
- var decorationStyle = "\n background-color: ".concat("var(--ds-background-accent-gray-subtler, #DCDFE4)", ";\n ");
8
+ var decorationStyle = "\n background-color: ".concat("var(--ds-background-neutral, #DCDFE4)", ";\n ");
9
9
  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 ");
10
10
  var selectionDecoration = exports.selectionDecoration = function selectionDecoration(doc, selection, isHighlight) {
11
11
  var selectionDecorations = [];
package/dist/cjs/ui/widget-decoration.js CHANGED
@@ -32,7 +32,7 @@ var selectionMarkerCursorStyles = (0, _primitives.xcss)({
32
32
  content: "''",
33
33
  position: 'absolute',
34
34
  background: "var(--ds-text, ".concat(_colors.N500, ")"),
35
- width: "var(--ds-space-025, 2px)",
35
+ width: '1px',
36
36
  display: 'inline-block',
37
37
  top: 'space.0',
38
38
  bottom: "var(--ds-space-negative-025, -2px)",
package/dist/es2019/plugin.js CHANGED
@@ -46,13 +46,14 @@ export const selectionMarkerPlugin = ({
46
46
  }) {
47
47
  const {
48
48
  focusState,
49
- typeAheadState
50
- } = useSharedPluginState(api, ['focus', 'typeAhead']);
49
+ typeAheadState,
50
+ selectionMarkerState
51
+ } = useSharedPluginState(api, ['focus', 'typeAhead', 'selectionMarker']);
51
52
  useEffect(() => {
52
53
  var _ref, _typeAheadState$isOpe;
53
- 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;
54
+ 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) || (selectionMarkerState === null || selectionMarkerState === void 0 ? void 0 : selectionMarkerState.isForcedHidden)) !== null && _ref !== void 0 ? _ref : true;
54
55
  requestAnimationFrame(() => dispatchShouldHideDecorations(editorView, shouldHide));
55
- }, [editorView, focusState, typeAheadState]);
56
+ }, [editorView, focusState, typeAheadState, selectionMarkerState]);
56
57
  },
57
58
  contentComponent() {
58
59
  return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -18,8 +18,8 @@ function getDecorations(tr, type) {
18
18
  return DecorationSet.create(tr.doc, [...createWidgetDecoration(selection.$anchor, 'anchor', selection, false), ...selectionDecoration(tr.doc, selection, false)]);
19
19
  }
20
20
  }
21
- function getDecorationType(tr, forceHide, shouldHideDecorations) {
22
- if (shouldHideDecorations || forceHide || isEmptyDocument(tr.doc)) {
21
+ function getDecorationType(tr, shouldHideDecorations) {
22
+ if (shouldHideDecorations || isEmptyDocument(tr.doc)) {
23
23
  return 'none';
24
24
  }
25
25
  // TODO: implement "highlight" for AI features
@@ -40,7 +40,7 @@ export const createPlugin = api => {
40
40
  var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
41
41
  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;
42
42
  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;
43
- const type = getDecorationType(tr, forceHide, shouldHideDecorations);
43
+ const type = getDecorationType(tr, shouldHideDecorations);
44
44
  return {
45
45
  decorations: getDecorations(tr, type),
46
46
  shouldHideDecorations,
package/dist/es2019/ui/selection-decoration.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
2
2
  const decorationStyle = `
3
- background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
3
+ background-color: ${"var(--ds-background-neutral, #DCDFE4)"};
4
4
  `;
5
5
  const decorationHighlightStyle = `
6
6
  background-color: ${"var(--ds-background-accent-blue-subtlest, #E9F2FF)"};
package/dist/es2019/ui/widget-decoration.js CHANGED
@@ -25,7 +25,7 @@ const selectionMarkerCursorStyles = xcss({
25
25
  content: "''",
26
26
  position: 'absolute',
27
27
  background: `var(--ds-text, ${N500})`,
28
- width: "var(--ds-space-025, 2px)",
28
+ width: '1px',
29
29
  display: 'inline-block',
30
30
  top: 'space.0',
31
31
  bottom: "var(--ds-space-negative-025, -2px)",
package/dist/esm/plugin.js CHANGED
@@ -45,16 +45,17 @@ export var selectionMarkerPlugin = function selectionMarkerPlugin(_ref) {
45
45
  },
46
46
  usePluginHook: function usePluginHook(_ref3) {
47
47
  var editorView = _ref3.editorView;
48
- var _useSharedPluginState = useSharedPluginState(api, ['focus', 'typeAhead']),
48
+ var _useSharedPluginState = useSharedPluginState(api, ['focus', 'typeAhead', 'selectionMarker']),
49
49
  focusState = _useSharedPluginState.focusState,
50
- typeAheadState = _useSharedPluginState.typeAheadState;
50
+ typeAheadState = _useSharedPluginState.typeAheadState,
51
+ selectionMarkerState = _useSharedPluginState.selectionMarkerState;
51
52
  useEffect(function () {
52
53
  var _ref4, _typeAheadState$isOpe;
53
- 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;
54
+ 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) || (selectionMarkerState === null || selectionMarkerState === void 0 ? void 0 : selectionMarkerState.isForcedHidden)) !== null && _ref4 !== void 0 ? _ref4 : true;
54
55
  requestAnimationFrame(function () {
55
56
  return dispatchShouldHideDecorations(editorView, shouldHide);
56
57
  });
57
- }, [editorView, focusState, typeAheadState]);
58
+ }, [editorView, focusState, typeAheadState, selectionMarkerState]);
58
59
  },
59
60
  contentComponent: function contentComponent() {
60
61
  return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
package/dist/esm/pm-plugins/main.js CHANGED
@@ -17,8 +17,8 @@ function getDecorations(tr, type) {
17
17
  return DecorationSet.create(tr.doc, [].concat(_toConsumableArray(createWidgetDecoration(selection.$anchor, 'anchor', selection, false)), _toConsumableArray(selectionDecoration(tr.doc, selection, false))));
18
18
  }
19
19
  }
20
- function getDecorationType(tr, forceHide, shouldHideDecorations) {
21
- if (shouldHideDecorations || forceHide || isEmptyDocument(tr.doc)) {
20
+ function getDecorationType(tr, shouldHideDecorations) {
21
+ if (shouldHideDecorations || isEmptyDocument(tr.doc)) {
22
22
  return 'none';
23
23
  }
24
24
  // TODO: implement "highlight" for AI features
@@ -39,7 +39,7 @@ export var createPlugin = function createPlugin(api) {
39
39
  var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
40
40
  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;
41
41
  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;
42
- var type = getDecorationType(tr, forceHide, shouldHideDecorations);
42
+ var type = getDecorationType(tr, shouldHideDecorations);
43
43
  return {
44
44
  decorations: getDecorations(tr, type),
45
45
  shouldHideDecorations: shouldHideDecorations,
package/dist/esm/ui/selection-decoration.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
2
- var decorationStyle = "\n background-color: ".concat("var(--ds-background-accent-gray-subtler, #DCDFE4)", ";\n ");
2
+ var decorationStyle = "\n background-color: ".concat("var(--ds-background-neutral, #DCDFE4)", ";\n ");
3
3
  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 ");
4
4
  export var selectionDecoration = function selectionDecoration(doc, selection, isHighlight) {
5
5
  var selectionDecorations = [];
package/dist/esm/ui/widget-decoration.js CHANGED
@@ -25,7 +25,7 @@ var selectionMarkerCursorStyles = xcss({
25
25
  content: "''",
26
26
  position: 'absolute',
27
27
  background: "var(--ds-text, ".concat(N500, ")"),
28
- width: "var(--ds-space-025, 2px)",
28
+ width: '1px',
29
29
  display: 'inline-block',
30
30
  top: 'space.0',
31
31
  bottom: "var(--ds-space-negative-025, -2px)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-marker",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Selection marker plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^78.28.0",
34
+ "@atlaskit/editor-common": "^78.29.0",
35
35
  "@atlaskit/editor-plugin-focus": "^1.1.0",
36
36
  "@atlaskit/editor-plugin-type-ahead": "^1.0.2",
37
37
  "@atlaskit/editor-prosemirror": "3.0.0",