@atlaskit/editor-plugin-selection-marker 1.3.4 → 1.3.5

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 (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/plugin.js +13 -5
  3. package/dist/cjs/ui/global-styles.js +11 -6
  4. package/dist/es2019/plugin.js +13 -5
  5. package/dist/es2019/ui/global-styles.js +11 -6
  6. package/dist/esm/plugin.js +13 -5
  7. package/dist/esm/ui/global-styles.js +11 -6
  8. package/dist/types/types.d.ts +6 -1
  9. package/dist/types-ts4.5/types.d.ts +3 -1
  10. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-selection-marker
2
2
 
3
+ ## 1.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#97693](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97693)
8
+ [`64b813e4a555`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64b813e4a555) -
9
+ [ux] Disable the selection marker while the editor is disabled to use the native styling.
10
+ - Updated dependencies
11
+
3
12
  ## 1.3.4
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -54,17 +54,25 @@ 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', 'selectionMarker']),
57
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['focus', 'typeAhead', 'editorDisabled', 'selectionMarker']),
58
58
  focusState = _useSharedPluginState.focusState,
59
59
  typeAheadState = _useSharedPluginState.typeAheadState,
60
- selectionMarkerState = _useSharedPluginState.selectionMarkerState;
60
+ selectionMarkerState = _useSharedPluginState.selectionMarkerState,
61
+ editorDisabledState = _useSharedPluginState.editorDisabledState;
61
62
  (0, _react.useEffect)(function () {
62
- var _ref4, _typeAheadState$isOpe;
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
+ var _ref4, _typeAheadState$isOpe, _editorDisabledState$;
64
+ /**
65
+ * There are a number of conditions we should not show the marker,
66
+ * - Focus: to ensure it doesn't interrupt the normal cursor
67
+ * - Typeahead Open: To ensure it doesn't show when we're typing in the typeahead
68
+ * - Disabled: So that it behaves similar to the renderer in live pages/disabled
69
+ * - Via the API: If another plugin has requested it to be hidden (force hidden).
70
+ */
71
+ 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) || ((_editorDisabledState$ = editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) !== null && _editorDisabledState$ !== void 0 ? _editorDisabledState$ : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
64
72
  requestAnimationFrame(function () {
65
73
  return (0, _main.dispatchShouldHideDecorations)(editorView, shouldHide);
66
74
  });
67
- }, [editorView, focusState, typeAheadState, selectionMarkerState]);
75
+ }, [editorView, focusState, typeAheadState, selectionMarkerState, editorDisabledState]);
68
76
  },
69
77
  contentComponent: function contentComponent() {
70
78
  return /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, null);
package/dist/cjs/ui/global-styles.js CHANGED
@@ -7,13 +7,18 @@ exports.GlobalStylesWrapper = void 0;
7
7
  var _react = require("@emotion/react");
8
8
  /** @jsx jsx */
9
9
 
10
- // Unset the selection background color as we are using our own
11
- // Otherwise we might have a mix of grey + our selection marker depending on the state.
12
- // We do not apply this reset to input fields (ie. expand case) because otherwise
13
- // selection highlight will not show on those.
10
+ /**
11
+ * Unset the selection background color as we are using our own
12
+ * Otherwise we might have a mix of grey + our selection marker depending on the state.
13
+ *
14
+ * Edge cases:
15
+ * - We do not apply this reset to input fields (ie. expand case) because otherwise
16
+ * selection highlight will not show on those.
17
+ * - We do not apply this reset when the editor is disabled
18
+ */
14
19
  var globalStyles = (0, _react.css)({
15
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
16
- '.ProseMirror:not(:focus) ::selection:not(input)': {
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
21
+ '.ProseMirror:not(:focus):not([contenteditable="false"]) ::selection:not(input)': {
17
22
  background: 'unset'
18
23
  }
19
24
  });
package/dist/es2019/plugin.js CHANGED
@@ -47,13 +47,21 @@ export const selectionMarkerPlugin = ({
47
47
  const {
48
48
  focusState,
49
49
  typeAheadState,
50
- selectionMarkerState
51
- } = useSharedPluginState(api, ['focus', 'typeAhead', 'selectionMarker']);
50
+ selectionMarkerState,
51
+ editorDisabledState
52
+ } = useSharedPluginState(api, ['focus', 'typeAhead', 'editorDisabled', 'selectionMarker']);
52
53
  useEffect(() => {
53
- var _ref, _typeAheadState$isOpe;
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
+ var _ref, _typeAheadState$isOpe, _editorDisabledState$;
55
+ /**
56
+ * There are a number of conditions we should not show the marker,
57
+ * - Focus: to ensure it doesn't interrupt the normal cursor
58
+ * - Typeahead Open: To ensure it doesn't show when we're typing in the typeahead
59
+ * - Disabled: So that it behaves similar to the renderer in live pages/disabled
60
+ * - Via the API: If another plugin has requested it to be hidden (force hidden).
61
+ */
62
+ 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) || ((_editorDisabledState$ = editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) !== null && _editorDisabledState$ !== void 0 ? _editorDisabledState$ : false)) !== null && _ref !== void 0 ? _ref : true;
55
63
  requestAnimationFrame(() => dispatchShouldHideDecorations(editorView, shouldHide));
56
- }, [editorView, focusState, typeAheadState, selectionMarkerState]);
64
+ }, [editorView, focusState, typeAheadState, selectionMarkerState, editorDisabledState]);
57
65
  },
58
66
  contentComponent() {
59
67
  return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
package/dist/es2019/ui/global-styles.js CHANGED
@@ -1,13 +1,18 @@
1
1
  /** @jsx jsx */
2
2
  import { css, Global, jsx } from '@emotion/react';
3
3
 
4
- // Unset the selection background color as we are using our own
5
- // Otherwise we might have a mix of grey + our selection marker depending on the state.
6
- // We do not apply this reset to input fields (ie. expand case) because otherwise
7
- // selection highlight will not show on those.
4
+ /**
5
+ * Unset the selection background color as we are using our own
6
+ * Otherwise we might have a mix of grey + our selection marker depending on the state.
7
+ *
8
+ * Edge cases:
9
+ * - We do not apply this reset to input fields (ie. expand case) because otherwise
10
+ * selection highlight will not show on those.
11
+ * - We do not apply this reset when the editor is disabled
12
+ */
8
13
  const globalStyles = css({
9
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
10
- '.ProseMirror:not(:focus) ::selection:not(input)': {
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
15
+ '.ProseMirror:not(:focus):not([contenteditable="false"]) ::selection:not(input)': {
11
16
  background: 'unset'
12
17
  }
13
18
  });
package/dist/esm/plugin.js CHANGED
@@ -45,17 +45,25 @@ 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', 'selectionMarker']),
48
+ var _useSharedPluginState = useSharedPluginState(api, ['focus', 'typeAhead', 'editorDisabled', 'selectionMarker']),
49
49
  focusState = _useSharedPluginState.focusState,
50
50
  typeAheadState = _useSharedPluginState.typeAheadState,
51
- selectionMarkerState = _useSharedPluginState.selectionMarkerState;
51
+ selectionMarkerState = _useSharedPluginState.selectionMarkerState,
52
+ editorDisabledState = _useSharedPluginState.editorDisabledState;
52
53
  useEffect(function () {
53
- var _ref4, _typeAheadState$isOpe;
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
+ var _ref4, _typeAheadState$isOpe, _editorDisabledState$;
55
+ /**
56
+ * There are a number of conditions we should not show the marker,
57
+ * - Focus: to ensure it doesn't interrupt the normal cursor
58
+ * - Typeahead Open: To ensure it doesn't show when we're typing in the typeahead
59
+ * - Disabled: So that it behaves similar to the renderer in live pages/disabled
60
+ * - Via the API: If another plugin has requested it to be hidden (force hidden).
61
+ */
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) || (selectionMarkerState === null || selectionMarkerState === void 0 ? void 0 : selectionMarkerState.isForcedHidden) || ((_editorDisabledState$ = editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) !== null && _editorDisabledState$ !== void 0 ? _editorDisabledState$ : false)) !== null && _ref4 !== void 0 ? _ref4 : true;
55
63
  requestAnimationFrame(function () {
56
64
  return dispatchShouldHideDecorations(editorView, shouldHide);
57
65
  });
58
- }, [editorView, focusState, typeAheadState, selectionMarkerState]);
66
+ }, [editorView, focusState, typeAheadState, selectionMarkerState, editorDisabledState]);
59
67
  },
60
68
  contentComponent: function contentComponent() {
61
69
  return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
package/dist/esm/ui/global-styles.js CHANGED
@@ -1,13 +1,18 @@
1
1
  /** @jsx jsx */
2
2
  import { css, Global, jsx } from '@emotion/react';
3
3
 
4
- // Unset the selection background color as we are using our own
5
- // Otherwise we might have a mix of grey + our selection marker depending on the state.
6
- // We do not apply this reset to input fields (ie. expand case) because otherwise
7
- // selection highlight will not show on those.
4
+ /**
5
+ * Unset the selection background color as we are using our own
6
+ * Otherwise we might have a mix of grey + our selection marker depending on the state.
7
+ *
8
+ * Edge cases:
9
+ * - We do not apply this reset to input fields (ie. expand case) because otherwise
10
+ * selection highlight will not show on those.
11
+ * - We do not apply this reset when the editor is disabled
12
+ */
8
13
  var globalStyles = css({
9
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
10
- '.ProseMirror:not(:focus) ::selection:not(input)': {
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
15
+ '.ProseMirror:not(:focus):not([contenteditable="false"]) ::selection:not(input)': {
11
16
  background: 'unset'
12
17
  }
13
18
  });
package/dist/types/types.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
2
3
  import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
3
4
  import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
4
5
  export type ReleaseHiddenDecoration = () => boolean | undefined;
5
6
  export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
6
- dependencies: [FocusPlugin, OptionalPlugin<TypeAheadPlugin>];
7
+ dependencies: [
8
+ FocusPlugin,
9
+ OptionalPlugin<TypeAheadPlugin>,
10
+ OptionalPlugin<EditorDisabledPlugin>
11
+ ];
7
12
  sharedState: {
8
13
  isForcedHidden: boolean;
9
14
  } | undefined;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
+ import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
2
3
  import type { FocusPlugin } from '@atlaskit/editor-plugin-focus';
3
4
  import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
4
5
  export type ReleaseHiddenDecoration = () => boolean | undefined;
5
6
  export type SelectionMarkerPlugin = NextEditorPlugin<'selectionMarker', {
6
7
  dependencies: [
7
8
  FocusPlugin,
8
- OptionalPlugin<TypeAheadPlugin>
9
+ OptionalPlugin<TypeAheadPlugin>,
10
+ OptionalPlugin<EditorDisabledPlugin>
9
11
  ];
10
12
  sharedState: {
11
13
  isForcedHidden: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-marker",
3
- "version": "1.3.4",
3
+ "version": "1.3.5",
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,8 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^79.1.0",
34
+ "@atlaskit/editor-common": "^79.2.0",
35
+ "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
35
36
  "@atlaskit/editor-plugin-focus": "^1.2.0",
36
37
  "@atlaskit/editor-plugin-type-ahead": "^1.1.0",
37
38
  "@atlaskit/editor-prosemirror": "4.0.1",