@atlaskit/editor-plugin-highlight 12.1.24 → 12.1.25
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.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/editor-commands/color.js +23 -1
- package/dist/cjs/pm-plugins/main.js +16 -10
- package/dist/es2019/editor-commands/color.js +25 -0
- package/dist/es2019/pm-plugins/main.js +17 -12
- package/dist/esm/editor-commands/color.js +22 -0
- package/dist/esm/pm-plugins/main.js +17 -11
- package/dist/types/editor-commands/color.d.ts +6 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-highlight
|
|
2
2
|
|
|
3
|
+
## 12.1.25
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`1a6b32ef3760e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a6b32ef3760e) -
|
|
8
|
+
Treat default text and highlight colors as mixed selection colors
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 12.1.24
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -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.getActiveColor = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = void 0;
|
|
7
|
+
exports.isMultiHighlightColorSelection = exports.getActiveColor = exports.MULTIPLE_HIGHLIGHT_COLORS_SELECTED = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _mark = require("@atlaskit/editor-common/mark");
|
|
10
10
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
@@ -109,4 +109,26 @@ var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
|
|
|
109
109
|
color = getColorFromRange(selection.from, selection.to, tr);
|
|
110
110
|
}
|
|
111
111
|
return color;
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Returns true when the selection contains two or more distinct highlight colors,
|
|
116
|
+
* counting unmarked text as the default transparent highlight.
|
|
117
|
+
*/
|
|
118
|
+
var isMultiHighlightColorSelection = exports.isMultiHighlightColorSelection = function isMultiHighlightColorSelection(_ref) {
|
|
119
|
+
var selection = _ref.selection,
|
|
120
|
+
doc = _ref.doc;
|
|
121
|
+
if (!(selection instanceof _state.TextSelection)) {
|
|
122
|
+
return false;
|
|
123
|
+
}
|
|
124
|
+
var backgroundColor = doc.type.schema.marks.backgroundColor;
|
|
125
|
+
var colors = new Set();
|
|
126
|
+
doc.nodesBetween(selection.from, selection.to, function (node) {
|
|
127
|
+
if (node.isText) {
|
|
128
|
+
var _mark$attrs$color2;
|
|
129
|
+
var mark = backgroundColor.isInSet(node.marks);
|
|
130
|
+
colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
return colors.size > 1;
|
|
112
134
|
};
|
|
@@ -27,6 +27,17 @@ var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(col
|
|
|
27
27
|
defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
|
|
28
28
|
});
|
|
29
29
|
};
|
|
30
|
+
var getColorAccessibilityState = function getColorAccessibilityState(activeColor, tr) {
|
|
31
|
+
var isMultiHighlightColor = activeColor === _color.MULTIPLE_HIGHLIGHT_COLORS_SELECTED || (0, _color.isMultiHighlightColorSelection)(tr);
|
|
32
|
+
return {
|
|
33
|
+
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
34
|
+
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
35
|
+
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
36
|
+
// back to the neutral default instead.
|
|
37
|
+
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
38
|
+
isMultiHighlightColor: isMultiHighlightColor
|
|
39
|
+
};
|
|
40
|
+
};
|
|
30
41
|
var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
31
42
|
var api = _ref.api;
|
|
32
43
|
return new _safePlugin.SafePlugin({
|
|
@@ -39,7 +50,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
39
50
|
isPaletteOpen: false
|
|
40
51
|
}, (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
|
|
41
52
|
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
|
|
42
|
-
isMultiHighlightColor:
|
|
53
|
+
isMultiHighlightColor: (0, _color.isMultiHighlightColorSelection)(editorState)
|
|
43
54
|
});
|
|
44
55
|
},
|
|
45
56
|
apply: function apply(tr, pluginState, _oldState, newState) {
|
|
@@ -63,18 +74,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
63
74
|
});
|
|
64
75
|
default:
|
|
65
76
|
var activeColor = (0, _color.getActiveColor)(tr);
|
|
66
|
-
var
|
|
77
|
+
var colorAccessibilityState =
|
|
78
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
79
|
+
(0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
|
|
67
80
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
68
81
|
activeColor: activeColor,
|
|
69
82
|
disabled: (0, _disabled.getDisabledState)(newState)
|
|
70
|
-
},
|
|
71
|
-
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
72
|
-
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
73
|
-
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
74
|
-
// back to the neutral default instead.
|
|
75
|
-
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
76
|
-
isMultiHighlightColor: isMultiHighlightColor
|
|
77
|
-
});
|
|
83
|
+
}, colorAccessibilityState);
|
|
78
84
|
}
|
|
79
85
|
}
|
|
80
86
|
}
|
|
@@ -108,4 +108,29 @@ export const getActiveColor = tr => {
|
|
|
108
108
|
color = getColorFromRange(selection.from, selection.to, tr);
|
|
109
109
|
}
|
|
110
110
|
return color;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Returns true when the selection contains two or more distinct highlight colors,
|
|
115
|
+
* counting unmarked text as the default transparent highlight.
|
|
116
|
+
*/
|
|
117
|
+
export const isMultiHighlightColorSelection = ({
|
|
118
|
+
selection,
|
|
119
|
+
doc
|
|
120
|
+
}) => {
|
|
121
|
+
if (!(selection instanceof TextSelection)) {
|
|
122
|
+
return false;
|
|
123
|
+
}
|
|
124
|
+
const {
|
|
125
|
+
backgroundColor
|
|
126
|
+
} = doc.type.schema.marks;
|
|
127
|
+
const colors = new Set();
|
|
128
|
+
doc.nodesBetween(selection.from, selection.to, node => {
|
|
129
|
+
if (node.isText) {
|
|
130
|
+
var _mark$attrs$color2;
|
|
131
|
+
const mark = backgroundColor.isInSet(node.marks);
|
|
132
|
+
colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
return colors.size > 1;
|
|
111
136
|
};
|
|
@@ -3,7 +3,7 @@ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-co
|
|
|
3
3
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
6
|
-
import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
|
|
6
|
+
import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
|
|
7
7
|
import { getDisabledState } from '../editor-commands/disabled';
|
|
8
8
|
export const highlightPluginKey = new PluginKey('highlight');
|
|
9
9
|
export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
|
|
@@ -15,6 +15,17 @@ const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
|
|
|
15
15
|
const getActiveColorInNonActiveTheme = color => getHighlightColorInNonActiveTheme(color, {
|
|
16
16
|
defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
|
|
17
17
|
});
|
|
18
|
+
const getColorAccessibilityState = (activeColor, tr) => {
|
|
19
|
+
const isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED || isMultiHighlightColorSelection(tr);
|
|
20
|
+
return {
|
|
21
|
+
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
22
|
+
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
23
|
+
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
24
|
+
// back to the neutral default instead.
|
|
25
|
+
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
26
|
+
isMultiHighlightColor
|
|
27
|
+
};
|
|
28
|
+
};
|
|
18
29
|
export const createPlugin = ({
|
|
19
30
|
api
|
|
20
31
|
}) => {
|
|
@@ -28,7 +39,7 @@ export const createPlugin = ({
|
|
|
28
39
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
29
40
|
...(fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
|
|
30
41
|
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
|
|
31
|
-
isMultiHighlightColor:
|
|
42
|
+
isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
|
|
32
43
|
})
|
|
33
44
|
}),
|
|
34
45
|
apply: (tr, pluginState, _oldState, newState) => {
|
|
@@ -58,20 +69,14 @@ export const createPlugin = ({
|
|
|
58
69
|
};
|
|
59
70
|
default:
|
|
60
71
|
const activeColor = getActiveColor(tr);
|
|
61
|
-
const
|
|
72
|
+
const colorAccessibilityState =
|
|
73
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
74
|
+
fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
|
|
62
75
|
return {
|
|
63
76
|
...pluginState,
|
|
64
77
|
activeColor,
|
|
65
78
|
disabled: getDisabledState(newState),
|
|
66
|
-
|
|
67
|
-
...(activeColor !== pluginState.activeColor && fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
|
|
68
|
-
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
69
|
-
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
70
|
-
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
71
|
-
// back to the neutral default instead.
|
|
72
|
-
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
73
|
-
isMultiHighlightColor
|
|
74
|
-
})
|
|
79
|
+
...colorAccessibilityState
|
|
75
80
|
};
|
|
76
81
|
}
|
|
77
82
|
}
|
|
@@ -103,4 +103,26 @@ export var getActiveColor = function getActiveColor(tr) {
|
|
|
103
103
|
color = getColorFromRange(selection.from, selection.to, tr);
|
|
104
104
|
}
|
|
105
105
|
return color;
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Returns true when the selection contains two or more distinct highlight colors,
|
|
110
|
+
* counting unmarked text as the default transparent highlight.
|
|
111
|
+
*/
|
|
112
|
+
export var isMultiHighlightColorSelection = function isMultiHighlightColorSelection(_ref) {
|
|
113
|
+
var selection = _ref.selection,
|
|
114
|
+
doc = _ref.doc;
|
|
115
|
+
if (!(selection instanceof TextSelection)) {
|
|
116
|
+
return false;
|
|
117
|
+
}
|
|
118
|
+
var backgroundColor = doc.type.schema.marks.backgroundColor;
|
|
119
|
+
var colors = new Set();
|
|
120
|
+
doc.nodesBetween(selection.from, selection.to, function (node) {
|
|
121
|
+
if (node.isText) {
|
|
122
|
+
var _mark$attrs$color2;
|
|
123
|
+
var mark = backgroundColor.isInSet(node.marks);
|
|
124
|
+
colors.add((_mark$attrs$color2 = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color2 !== void 0 ? _mark$attrs$color2 : 'default');
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
return colors.size > 1;
|
|
106
128
|
};
|
|
@@ -6,7 +6,7 @@ import { getHighlightColorInNonActiveTheme } from '@atlaskit/editor-common/ui-co
|
|
|
6
6
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
9
|
-
import { getActiveColor, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
|
|
9
|
+
import { getActiveColor, isMultiHighlightColorSelection, MULTIPLE_HIGHLIGHT_COLORS_SELECTED } from '../editor-commands/color';
|
|
10
10
|
import { getDisabledState } from '../editor-commands/disabled';
|
|
11
11
|
export var highlightPluginKey = new PluginKey('highlight');
|
|
12
12
|
export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
|
|
@@ -20,6 +20,17 @@ var getActiveColorInNonActiveTheme = function getActiveColorInNonActiveTheme(col
|
|
|
20
20
|
defaultBackgroundColor: DEFAULT_BACKGROUND_COLOR
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
|
+
var getColorAccessibilityState = function getColorAccessibilityState(activeColor, tr) {
|
|
24
|
+
var isMultiHighlightColor = activeColor === MULTIPLE_HIGHLIGHT_COLORS_SELECTED || isMultiHighlightColorSelection(tr);
|
|
25
|
+
return {
|
|
26
|
+
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
27
|
+
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
28
|
+
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
29
|
+
// back to the neutral default instead.
|
|
30
|
+
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
31
|
+
isMultiHighlightColor: isMultiHighlightColor
|
|
32
|
+
};
|
|
33
|
+
};
|
|
23
34
|
export var createPlugin = function createPlugin(_ref) {
|
|
24
35
|
var api = _ref.api;
|
|
25
36
|
return new SafePlugin({
|
|
@@ -32,7 +43,7 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
32
43
|
isPaletteOpen: false
|
|
33
44
|
}, fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && {
|
|
34
45
|
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(null),
|
|
35
|
-
isMultiHighlightColor:
|
|
46
|
+
isMultiHighlightColor: isMultiHighlightColorSelection(editorState)
|
|
36
47
|
});
|
|
37
48
|
},
|
|
38
49
|
apply: function apply(tr, pluginState, _oldState, newState) {
|
|
@@ -56,18 +67,13 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
56
67
|
});
|
|
57
68
|
default:
|
|
58
69
|
var activeColor = getActiveColor(tr);
|
|
59
|
-
var
|
|
70
|
+
var colorAccessibilityState =
|
|
71
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
72
|
+
fg('platform_editor_lovability_text_bg_color_patch_1') && expValEqualsNoExposure('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (activeColor !== pluginState.activeColor || tr.selectionSet || !tr.selection.empty && tr.docChanged) ? getColorAccessibilityState(activeColor, tr) : {};
|
|
60
73
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
61
74
|
activeColor: activeColor,
|
|
62
75
|
disabled: getDisabledState(newState)
|
|
63
|
-
},
|
|
64
|
-
// When the selection spans multiple highlight colors, `activeColor` is the
|
|
65
|
-
// `MULTIPLE_HIGHLIGHT_COLORS_SELECTED` sentinel rather than a real hex value.
|
|
66
|
-
// Passing it through would resolve the literal sentinel as a color, so fall
|
|
67
|
-
// back to the neutral default instead.
|
|
68
|
-
activeColorInNonActiveTheme: getActiveColorInNonActiveTheme(isMultiHighlightColor ? null : activeColor),
|
|
69
|
-
isMultiHighlightColor: isMultiHighlightColor
|
|
70
|
-
});
|
|
76
|
+
}, colorAccessibilityState);
|
|
71
77
|
}
|
|
72
78
|
}
|
|
73
79
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
1
|
+
import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
/**
|
|
3
3
|
* Value returned by `getActiveColor` when the selection spans more than one
|
|
4
4
|
* distinct highlight (background) color. Callers can compare against this to
|
|
@@ -6,3 +6,8 @@ import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemir
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const MULTIPLE_HIGHLIGHT_COLORS_SELECTED = "multiple";
|
|
8
8
|
export declare const getActiveColor: (tr: Transaction | ReadonlyTransaction) => string | null;
|
|
9
|
+
/**
|
|
10
|
+
* Returns true when the selection contains two or more distinct highlight colors,
|
|
11
|
+
* counting unmarked text as the default transparent highlight.
|
|
12
|
+
*/
|
|
13
|
+
export declare const isMultiHighlightColorSelection: ({ selection, doc, }: EditorState | Transaction | ReadonlyTransaction) => boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-highlight",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.25",
|
|
4
4
|
"description": "Highlight plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"@atlaskit/icon": "^37.0.0",
|
|
42
42
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
43
43
|
"@atlaskit/primitives": "^20.6.0",
|
|
44
|
-
"@atlaskit/tmp-editor-statsig": "^124.
|
|
45
|
-
"@atlaskit/tokens": "^15.
|
|
44
|
+
"@atlaskit/tmp-editor-statsig": "^124.9.0",
|
|
45
|
+
"@atlaskit/tokens": "^15.8.0",
|
|
46
46
|
"@babel/runtime": "^7.0.0",
|
|
47
47
|
"@emotion/react": "^11.7.1"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
|
-
"@atlaskit/editor-common": "^116.
|
|
50
|
+
"@atlaskit/editor-common": "^116.30.0",
|
|
51
51
|
"react": "^18.2.0",
|
|
52
52
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
53
53
|
},
|