@atlaskit/editor-plugin-selection-marker 1.5.10 → 1.5.12

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 (12) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/pm-plugins/main.js +27 -13
  3. package/dist/cjs/ui/widget-decoration.js +41 -21
  4. package/dist/es2019/pm-plugins/main.js +26 -12
  5. package/dist/es2019/ui/widget-decoration.js +37 -23
  6. package/dist/esm/pm-plugins/main.js +26 -12
  7. package/dist/esm/ui/widget-decoration.js +41 -21
  8. package/dist/types/pm-plugins/main.d.ts +8 -3
  9. package/dist/types/ui/widget-decoration.d.ts +4 -0
  10. package/dist/types-ts4.5/pm-plugins/main.d.ts +8 -3
  11. package/dist/types-ts4.5/ui/widget-decoration.d.ts +4 -0
  12. package/package.json +2 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-selection-marker
2
2
 
3
+ ## 1.5.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
8
+ [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
9
+ Upgrades editor packages to react 18
10
+ - [#155853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155853)
11
+ [`0fab892fc92df`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0fab892fc92df) -
12
+ [HOT-112603] Reduce React 18 memory leak on Selection Marker
13
+
14
+ - Replacing react components for native HTML elements for Decorations
15
+ - Reducing the amount of new decorations being created by using `DecorationSet.map`
16
+
17
+ ## 1.5.11
18
+
19
+ ### Patch Changes
20
+
21
+ - Updated dependencies
22
+
3
23
  ## 1.5.10
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.createPlugin = void 0;
7
+ exports.createPlugin = exports.applyNextPluginState = void 0;
8
8
  exports.dispatchShouldHideDecorations = dispatchShouldHideDecorations;
9
9
  exports.key = void 0;
10
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -33,6 +33,29 @@ function getDecorationType(tr, shouldHideDecorations) {
33
33
  // TODO: implement "highlight" for AI features
34
34
  return 'blur';
35
35
  }
36
+ var applyNextPluginState = exports.applyNextPluginState = function applyNextPluginState(tr, currentState, oldEditorState) {
37
+ var _meta$forceHide, _meta$shouldHideDecor;
38
+ var meta = tr.getMeta(key);
39
+ if (!meta && !tr.selectionSet) {
40
+ return currentState;
41
+ }
42
+ var forceHide = (_meta$forceHide = meta === null || meta === void 0 ? void 0 : meta.forceHide) !== null && _meta$forceHide !== void 0 ? _meta$forceHide : currentState.forceHide;
43
+ var shouldHideDecorations = (_meta$shouldHideDecor = meta === null || meta === void 0 ? void 0 : meta.shouldHideDecorations) !== null && _meta$shouldHideDecor !== void 0 ? _meta$shouldHideDecor : currentState.shouldHideDecorations;
44
+ var type = getDecorationType(tr, shouldHideDecorations);
45
+ var nextDecorations = currentState.decorations;
46
+ var hasSelectionChangedToRange = oldEditorState.selection.empty && !tr.selection.empty;
47
+ if (hasSelectionChangedToRange || currentState.decorationType !== type) {
48
+ nextDecorations = getDecorations(tr, type);
49
+ } else {
50
+ nextDecorations = nextDecorations.map(tr.mapping, tr.doc, {});
51
+ }
52
+ return {
53
+ decorations: nextDecorations,
54
+ shouldHideDecorations: shouldHideDecorations,
55
+ forceHide: forceHide,
56
+ decorationType: type
57
+ };
58
+ };
36
59
  var createPlugin = exports.createPlugin = function createPlugin(api) {
37
60
  return new _safePlugin.SafePlugin({
38
61
  key: key,
@@ -41,20 +64,11 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
41
64
  return {
42
65
  decorations: _view.DecorationSet.empty,
43
66
  shouldHideDecorations: true,
44
- forceHide: false
67
+ forceHide: false,
68
+ decorationType: 'none'
45
69
  };
46
70
  },
47
- apply: function apply(tr, currentState) {
48
- var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
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
- 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, shouldHideDecorations);
52
- return {
53
- decorations: getDecorations(tr, type),
54
- shouldHideDecorations: shouldHideDecorations,
55
- forceHide: forceHide
56
- };
57
- }
71
+ apply: applyNextPluginState
58
72
  },
59
73
  props: {
60
74
  decorations: function decorations(state) {
package/dist/cjs/ui/widget-decoration.js CHANGED
@@ -5,17 +5,20 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.createWidgetDecoration = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var _reactDom = _interopRequireDefault(require("react-dom"));
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
9
  var _state = require("@atlaskit/editor-prosemirror/state");
11
10
  var _view = require("@atlaskit/editor-prosemirror/view");
12
- var _primitives = require("@atlaskit/primitives");
13
11
  var _colors = require("@atlaskit/theme/colors");
14
- var selectionMarkerHighlightStyles = (0, _primitives.xcss)({
12
+ /**
13
+ * @jsxRuntime classic
14
+ * @jsx jsx
15
+ */
16
+
17
+ var selectionMarkerHighlightStyles = {
15
18
  content: "''",
16
19
  position: 'absolute',
17
20
  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
18
- top: 'space.0',
21
+ top: "var(--ds-space-0, 0px)",
19
22
  bottom: "var(--ds-space-negative-025, -2px)",
20
23
  backgroundRepeat: 'no-repeat',
21
24
  backgroundPositionX: 'center',
@@ -23,43 +26,60 @@ var selectionMarkerHighlightStyles = (0, _primitives.xcss)({
23
26
  backgroundSize: 'contain',
24
27
  aspectRatio: '3/20',
25
28
  left: '0px',
26
- marginLeft: 'space.negative.025',
29
+ marginLeft: "var(--ds-space-negative-025, -2px)",
27
30
  right: '0px',
28
- marginRight: 'space.negative.025',
31
+ marginRight: "var(--ds-space-negative-025, -2px)",
29
32
  pointerEvents: 'none'
30
- });
31
- var selectionMarkerCursorStyles = (0, _primitives.xcss)({
33
+ };
34
+ var selectionMarkerCursorStyles = {
32
35
  content: "''",
33
36
  position: 'absolute',
34
37
  background: "var(--ds-text, ".concat(_colors.N500, ")"),
35
38
  width: '1px',
36
39
  display: 'inline-block',
37
- top: 'space.0',
40
+ top: "var(--ds-space-0, 0px)",
38
41
  bottom: "var(--ds-space-negative-025, -2px)",
39
42
  left: '1px',
40
- marginLeft: 'space.negative.025',
43
+ marginLeft: "var(--ds-space-negative-025, -2px)",
41
44
  right: '0px',
42
- marginRight: 'space.negative.025',
45
+ marginRight: "var(--ds-space-negative-025, -2px)",
43
46
  pointerEvents: 'none'
44
- });
47
+ };
48
+
49
+ /**
50
+ * Converts a camelCased CSS property name to a hyphenated CSS property name.
51
+ *
52
+ * @param property - CamelCased CSS property name.
53
+ * @returns Hyphenated CSS property name.
54
+ */
55
+ function hyphenate(property) {
56
+ return property.replace(/[A-Z]/g, function (match) {
57
+ return "-".concat(match.toLowerCase());
58
+ }).replace(/^ms/, '-ms');
59
+ }
45
60
  var Widget = function Widget(_ref) {
46
61
  var type = _ref.type,
47
62
  isHighlight = _ref.isHighlight;
48
- return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
49
- as: "span",
50
- xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
51
- testId: "selection-marker-".concat(type, "-cursor"),
52
- contentEditable: false
53
- });
63
+ var span = document.createElement('span');
64
+ var styles = isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles;
65
+ for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {
66
+ var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
67
+ rule = _Object$entries$_i[0],
68
+ value = _Object$entries$_i[1];
69
+ span.style.setProperty(hyphenate(rule), value);
70
+ }
71
+ span.setAttribute('contentEditable', 'false');
72
+ span.dataset.testid = "selection-marker-".concat(type, "-cursor");
73
+ return span;
54
74
  };
55
75
  var toDOM = function toDOM(type, isHighlight) {
56
76
  var element = document.createElement('span');
57
77
  element.contentEditable = 'false';
58
78
  element.setAttribute('style', "position: relative;");
59
- _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Widget, {
79
+ element.appendChild(Widget({
60
80
  type: type,
61
81
  isHighlight: isHighlight
62
- }), element);
82
+ }));
63
83
  return element;
64
84
  };
65
85
  var containsText = function containsText(resolvedPos) {
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -25,6 +25,29 @@ function getDecorationType(tr, shouldHideDecorations) {
25
25
  // TODO: implement "highlight" for AI features
26
26
  return 'blur';
27
27
  }
28
+ export const applyNextPluginState = (tr, currentState, oldEditorState) => {
29
+ var _meta$forceHide, _meta$shouldHideDecor;
30
+ const meta = tr.getMeta(key);
31
+ if (!meta && !tr.selectionSet) {
32
+ return currentState;
33
+ }
34
+ const forceHide = (_meta$forceHide = meta === null || meta === void 0 ? void 0 : meta.forceHide) !== null && _meta$forceHide !== void 0 ? _meta$forceHide : currentState.forceHide;
35
+ const shouldHideDecorations = (_meta$shouldHideDecor = meta === null || meta === void 0 ? void 0 : meta.shouldHideDecorations) !== null && _meta$shouldHideDecor !== void 0 ? _meta$shouldHideDecor : currentState.shouldHideDecorations;
36
+ const type = getDecorationType(tr, shouldHideDecorations);
37
+ let nextDecorations = currentState.decorations;
38
+ const hasSelectionChangedToRange = oldEditorState.selection.empty && !tr.selection.empty;
39
+ if (hasSelectionChangedToRange || currentState.decorationType !== type) {
40
+ nextDecorations = getDecorations(tr, type);
41
+ } else {
42
+ nextDecorations = nextDecorations.map(tr.mapping, tr.doc, {});
43
+ }
44
+ return {
45
+ decorations: nextDecorations,
46
+ shouldHideDecorations,
47
+ forceHide,
48
+ decorationType: type
49
+ };
50
+ };
28
51
  export const createPlugin = api => {
29
52
  return new SafePlugin({
30
53
  key,
@@ -33,20 +56,11 @@ export const createPlugin = api => {
33
56
  return {
34
57
  decorations: DecorationSet.empty,
35
58
  shouldHideDecorations: true,
36
- forceHide: false
59
+ forceHide: false,
60
+ decorationType: 'none'
37
61
  };
38
62
  },
39
- apply(tr, currentState) {
40
- var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
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
- 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, shouldHideDecorations);
44
- return {
45
- decorations: getDecorations(tr, type),
46
- shouldHideDecorations,
47
- forceHide
48
- };
49
- }
63
+ apply: applyNextPluginState
50
64
  },
51
65
  props: {
52
66
  decorations: state => {
package/dist/es2019/ui/widget-decoration.js CHANGED
@@ -1,14 +1,16 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+
3
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
4
7
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
5
- import { Box, xcss } from '@atlaskit/primitives';
6
8
  import { N500 } from '@atlaskit/theme/colors';
7
- const selectionMarkerHighlightStyles = xcss({
9
+ const selectionMarkerHighlightStyles = {
8
10
  content: "''",
9
11
  position: 'absolute',
10
12
  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
11
- top: 'space.0',
13
+ top: "var(--ds-space-0, 0px)",
12
14
  bottom: "var(--ds-space-negative-025, -2px)",
13
15
  backgroundRepeat: 'no-repeat',
14
16
  backgroundPositionX: 'center',
@@ -16,44 +18,56 @@ const selectionMarkerHighlightStyles = xcss({
16
18
  backgroundSize: 'contain',
17
19
  aspectRatio: '3/20',
18
20
  left: '0px',
19
- marginLeft: 'space.negative.025',
21
+ marginLeft: "var(--ds-space-negative-025, -2px)",
20
22
  right: '0px',
21
- marginRight: 'space.negative.025',
23
+ marginRight: "var(--ds-space-negative-025, -2px)",
22
24
  pointerEvents: 'none'
23
- });
24
- const selectionMarkerCursorStyles = xcss({
25
+ };
26
+ const selectionMarkerCursorStyles = {
25
27
  content: "''",
26
28
  position: 'absolute',
27
29
  background: `var(--ds-text, ${N500})`,
28
30
  width: '1px',
29
31
  display: 'inline-block',
30
- top: 'space.0',
32
+ top: "var(--ds-space-0, 0px)",
31
33
  bottom: "var(--ds-space-negative-025, -2px)",
32
34
  left: '1px',
33
- marginLeft: 'space.negative.025',
35
+ marginLeft: "var(--ds-space-negative-025, -2px)",
34
36
  right: '0px',
35
- marginRight: 'space.negative.025',
37
+ marginRight: "var(--ds-space-negative-025, -2px)",
36
38
  pointerEvents: 'none'
37
- });
39
+ };
40
+
41
+ /**
42
+ * Converts a camelCased CSS property name to a hyphenated CSS property name.
43
+ *
44
+ * @param property - CamelCased CSS property name.
45
+ * @returns Hyphenated CSS property name.
46
+ */
47
+ function hyphenate(property) {
48
+ return property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`).replace(/^ms/, '-ms');
49
+ }
38
50
  const Widget = ({
39
51
  type,
40
52
  isHighlight
41
53
  }) => {
42
- return /*#__PURE__*/React.createElement(Box, {
43
- as: "span",
44
- xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
45
- testId: `selection-marker-${type}-cursor`,
46
- contentEditable: false
47
- });
54
+ const span = document.createElement('span');
55
+ const styles = isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles;
56
+ for (let [rule, value] of Object.entries(styles)) {
57
+ span.style.setProperty(hyphenate(rule), value);
58
+ }
59
+ span.setAttribute('contentEditable', 'false');
60
+ span.dataset.testid = `selection-marker-${type}-cursor`;
61
+ return span;
48
62
  };
49
63
  const toDOM = (type, isHighlight) => {
50
64
  let element = document.createElement('span');
51
65
  element.contentEditable = 'false';
52
66
  element.setAttribute('style', `position: relative;`);
53
- ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
54
- type: type,
55
- isHighlight: isHighlight
56
- }), element);
67
+ element.appendChild(Widget({
68
+ type,
69
+ isHighlight
70
+ }));
57
71
  return element;
58
72
  };
59
73
  const containsText = resolvedPos => {
package/dist/esm/pm-plugins/main.js CHANGED
@@ -24,6 +24,29 @@ function getDecorationType(tr, shouldHideDecorations) {
24
24
  // TODO: implement "highlight" for AI features
25
25
  return 'blur';
26
26
  }
27
+ export var applyNextPluginState = function applyNextPluginState(tr, currentState, oldEditorState) {
28
+ var _meta$forceHide, _meta$shouldHideDecor;
29
+ var meta = tr.getMeta(key);
30
+ if (!meta && !tr.selectionSet) {
31
+ return currentState;
32
+ }
33
+ var forceHide = (_meta$forceHide = meta === null || meta === void 0 ? void 0 : meta.forceHide) !== null && _meta$forceHide !== void 0 ? _meta$forceHide : currentState.forceHide;
34
+ var shouldHideDecorations = (_meta$shouldHideDecor = meta === null || meta === void 0 ? void 0 : meta.shouldHideDecorations) !== null && _meta$shouldHideDecor !== void 0 ? _meta$shouldHideDecor : currentState.shouldHideDecorations;
35
+ var type = getDecorationType(tr, shouldHideDecorations);
36
+ var nextDecorations = currentState.decorations;
37
+ var hasSelectionChangedToRange = oldEditorState.selection.empty && !tr.selection.empty;
38
+ if (hasSelectionChangedToRange || currentState.decorationType !== type) {
39
+ nextDecorations = getDecorations(tr, type);
40
+ } else {
41
+ nextDecorations = nextDecorations.map(tr.mapping, tr.doc, {});
42
+ }
43
+ return {
44
+ decorations: nextDecorations,
45
+ shouldHideDecorations: shouldHideDecorations,
46
+ forceHide: forceHide,
47
+ decorationType: type
48
+ };
49
+ };
27
50
  export var createPlugin = function createPlugin(api) {
28
51
  return new SafePlugin({
29
52
  key: key,
@@ -32,20 +55,11 @@ export var createPlugin = function createPlugin(api) {
32
55
  return {
33
56
  decorations: DecorationSet.empty,
34
57
  shouldHideDecorations: true,
35
- forceHide: false
58
+ forceHide: false,
59
+ decorationType: 'none'
36
60
  };
37
61
  },
38
- apply: function apply(tr, currentState) {
39
- var _tr$getMeta$forceHide, _tr$getMeta, _tr$getMeta$shouldHid, _tr$getMeta2;
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
- 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, shouldHideDecorations);
43
- return {
44
- decorations: getDecorations(tr, type),
45
- shouldHideDecorations: shouldHideDecorations,
46
- forceHide: forceHide
47
- };
48
- }
62
+ apply: applyNextPluginState
49
63
  },
50
64
  props: {
51
65
  decorations: function decorations(state) {
package/dist/esm/ui/widget-decoration.js CHANGED
@@ -1,14 +1,17 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom';
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ */
6
+
3
7
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
4
8
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
5
- import { Box, xcss } from '@atlaskit/primitives';
6
9
  import { N500 } from '@atlaskit/theme/colors';
7
- var selectionMarkerHighlightStyles = xcss({
10
+ var selectionMarkerHighlightStyles = {
8
11
  content: "''",
9
12
  position: 'absolute',
10
13
  backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDMgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMSAxSDBMMSAxLjg1NzE0VjE4LjE0MzNMMCAxOS4wMDA0SDNMMiAxOC4xNDMzVjEuODU3MTRMMyAxSDJIMVoiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3QgeT0iMTkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEiIGZpbGw9IiM1NzlERkYiLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMSIgZmlsbD0iIzU3OURGRiIvPgo8L3N2Zz4K')",
11
- top: 'space.0',
14
+ top: "var(--ds-space-0, 0px)",
12
15
  bottom: "var(--ds-space-negative-025, -2px)",
13
16
  backgroundRepeat: 'no-repeat',
14
17
  backgroundPositionX: 'center',
@@ -16,43 +19,60 @@ var selectionMarkerHighlightStyles = xcss({
16
19
  backgroundSize: 'contain',
17
20
  aspectRatio: '3/20',
18
21
  left: '0px',
19
- marginLeft: 'space.negative.025',
22
+ marginLeft: "var(--ds-space-negative-025, -2px)",
20
23
  right: '0px',
21
- marginRight: 'space.negative.025',
24
+ marginRight: "var(--ds-space-negative-025, -2px)",
22
25
  pointerEvents: 'none'
23
- });
24
- var selectionMarkerCursorStyles = xcss({
26
+ };
27
+ var selectionMarkerCursorStyles = {
25
28
  content: "''",
26
29
  position: 'absolute',
27
30
  background: "var(--ds-text, ".concat(N500, ")"),
28
31
  width: '1px',
29
32
  display: 'inline-block',
30
- top: 'space.0',
33
+ top: "var(--ds-space-0, 0px)",
31
34
  bottom: "var(--ds-space-negative-025, -2px)",
32
35
  left: '1px',
33
- marginLeft: 'space.negative.025',
36
+ marginLeft: "var(--ds-space-negative-025, -2px)",
34
37
  right: '0px',
35
- marginRight: 'space.negative.025',
38
+ marginRight: "var(--ds-space-negative-025, -2px)",
36
39
  pointerEvents: 'none'
37
- });
40
+ };
41
+
42
+ /**
43
+ * Converts a camelCased CSS property name to a hyphenated CSS property name.
44
+ *
45
+ * @param property - CamelCased CSS property name.
46
+ * @returns Hyphenated CSS property name.
47
+ */
48
+ function hyphenate(property) {
49
+ return property.replace(/[A-Z]/g, function (match) {
50
+ return "-".concat(match.toLowerCase());
51
+ }).replace(/^ms/, '-ms');
52
+ }
38
53
  var Widget = function Widget(_ref) {
39
54
  var type = _ref.type,
40
55
  isHighlight = _ref.isHighlight;
41
- return /*#__PURE__*/React.createElement(Box, {
42
- as: "span",
43
- xcss: isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles,
44
- testId: "selection-marker-".concat(type, "-cursor"),
45
- contentEditable: false
46
- });
56
+ var span = document.createElement('span');
57
+ var styles = isHighlight ? selectionMarkerHighlightStyles : selectionMarkerCursorStyles;
58
+ for (var _i = 0, _Object$entries = Object.entries(styles); _i < _Object$entries.length; _i++) {
59
+ var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
60
+ rule = _Object$entries$_i[0],
61
+ value = _Object$entries$_i[1];
62
+ span.style.setProperty(hyphenate(rule), value);
63
+ }
64
+ span.setAttribute('contentEditable', 'false');
65
+ span.dataset.testid = "selection-marker-".concat(type, "-cursor");
66
+ return span;
47
67
  };
48
68
  var toDOM = function toDOM(type, isHighlight) {
49
69
  var element = document.createElement('span');
50
70
  element.contentEditable = 'false';
51
71
  element.setAttribute('style', "position: relative;");
52
- ReactDOM.render( /*#__PURE__*/React.createElement(Widget, {
72
+ element.appendChild(Widget({
53
73
  type: type,
54
74
  isHighlight: isHighlight
55
- }), element);
75
+ }));
56
76
  return element;
57
77
  };
58
78
  var containsText = function containsText(resolvedPos) {
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -1,19 +1,24 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
3
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
4
5
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
7
  import type { SelectionMarkerPlugin } from '../selectionMarkerPluginType';
7
- interface PluginState {
8
+ export interface PluginState {
8
9
  decorations: DecorationSet;
9
10
  shouldHideDecorations: boolean;
10
11
  forceHide: boolean;
12
+ decorationType: DecorationType;
11
13
  }
12
14
  export declare const key: PluginKey<PluginState>;
13
- export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
15
+ type DecorationType = 'blur' | 'highlight' | 'none';
16
+ export declare const applyNextPluginState: (tr: ReadonlyTransaction, currentState: PluginState, oldEditorState: EditorState) => PluginState | {
14
17
  decorations: DecorationSet;
15
18
  shouldHideDecorations: any;
16
19
  forceHide: any;
17
- }>;
20
+ decorationType: "blur" | "none";
21
+ };
22
+ export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<PluginState>;
18
23
  export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
19
24
  export {};
package/dist/types/ui/widget-decoration.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
2
6
  import type { Selection } from '@atlaskit/editor-prosemirror/state';
3
7
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
package/dist/types-ts4.5/pm-plugins/main.d.ts CHANGED
@@ -1,19 +1,24 @@
1
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
3
4
  import { PluginKey } from '@atlaskit/editor-prosemirror/state';
4
5
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
6
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
6
7
  import type { SelectionMarkerPlugin } from '../selectionMarkerPluginType';
7
- interface PluginState {
8
+ export interface PluginState {
8
9
  decorations: DecorationSet;
9
10
  shouldHideDecorations: boolean;
10
11
  forceHide: boolean;
12
+ decorationType: DecorationType;
11
13
  }
12
14
  export declare const key: PluginKey<PluginState>;
13
- export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<{
15
+ type DecorationType = 'blur' | 'highlight' | 'none';
16
+ export declare const applyNextPluginState: (tr: ReadonlyTransaction, currentState: PluginState, oldEditorState: EditorState) => PluginState | {
14
17
  decorations: DecorationSet;
15
18
  shouldHideDecorations: any;
16
19
  forceHide: any;
17
- }>;
20
+ decorationType: "blur" | "none";
21
+ };
22
+ export declare const createPlugin: (api: ExtractInjectionAPI<SelectionMarkerPlugin> | undefined) => SafePlugin<PluginState>;
18
23
  export declare function dispatchShouldHideDecorations(editorView: EditorView, shouldHideDecorations: boolean): void;
19
24
  export {};
package/dist/types-ts4.5/ui/widget-decoration.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
2
6
  import type { Selection } from '@atlaskit/editor-prosemirror/state';
3
7
  import { Decoration } from '@atlaskit/editor-prosemirror/view';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-marker",
3
- "version": "1.5.10",
3
+ "version": "1.5.12",
4
4
  "description": "Selection marker plugin for @atlaskit/editor-core.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,7 @@
29
29
  ".": "./src/index.ts"
30
30
  },
31
31
  "dependencies": {
32
- "@atlaskit/editor-common": "^93.6.0",
32
+ "@atlaskit/editor-common": "^94.2.0",
33
33
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
34
34
  "@atlaskit/editor-plugin-focus": "^1.4.0",
35
35
  "@atlaskit/editor-plugin-type-ahead": "^1.10.0",
@@ -50,7 +50,6 @@
50
50
  "@atlaskit/ssr": "*",
51
51
  "@atlaskit/visual-regression": "*",
52
52
  "@testing-library/react": "^12.1.5",
53
- "react-dom": "^16.8.0",
54
53
  "typescript": "~5.4.2",
55
54
  "wait-for-expect": "^1.2.0"
56
55
  },