@atlaskit/editor-plugin-highlight 1.7.5 → 1.8.0

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 (5) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/ui/ToolbarHighlightColor.js +4 -2
  3. package/dist/es2019/ui/ToolbarHighlightColor.js +5 -3
  4. package/dist/esm/ui/ToolbarHighlightColor.js +5 -3
  5. package/package.json +85 -105
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/editor-plugin-highlight
2
2
 
3
+ ## 1.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#110884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110884)
8
+ [`674f78166705c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/674f78166705c) -
9
+ [ux] [ED-23516] Change border color for highlight and text-color palettes to use tokens.
10
+ Changedefault palette color when undefined
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 1.7.5
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/ui/ToolbarHighlightColor.js CHANGED
@@ -19,6 +19,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
19
19
  var _editorPalette = require("@atlaskit/editor-palette");
20
20
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
21
21
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
22
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
23
  var _primitives = require("@atlaskit/primitives");
23
24
  var _commands = require("../commands");
24
25
  var _EditorHighlightIcon = require("./EditorHighlightIcon");
@@ -99,7 +100,8 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
99
100
  // pixels, used to determine where to horizontally position the dropdown when space is limited
100
101
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
101
102
  var fitWidth = 242;
102
- var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.highlightColorPalette, highlightState.activeColor),
103
+ var palette = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.dynamic-palette-borders') ? _uiColor.highlightColorPaletteWithTokenBorders : _uiColor.highlightColorPalette;
104
+ var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, highlightState.activeColor),
103
105
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
104
106
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
105
107
  return (0, _react2.jsx)(_primitives.Flex, {
@@ -151,7 +153,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
151
153
  },
152
154
  selectedColor: highlightState.activeColor,
153
155
  paletteOptions: {
154
- palette: _uiColor.highlightColorPalette,
156
+ palette: palette,
155
157
  hexToPaletteColor: _editorPalette.hexToEditorTextBackgroundPaletteColor
156
158
  }
157
159
  }))));
package/dist/es2019/ui/ToolbarHighlightColor.js CHANGED
@@ -6,11 +6,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
6
  import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
7
7
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
8
8
  import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
9
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
9
+ import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
10
10
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
11
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
12
12
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
13
13
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
14
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
14
15
  import { Flex } from '@atlaskit/primitives';
15
16
  import { changeColor, setPalette } from '../commands';
16
17
  import { EditorHighlightIcon } from './EditorHighlightIcon';
@@ -88,10 +89,11 @@ const ToolbarHighlightColor = ({
88
89
  // pixels, used to determine where to horizontally position the dropdown when space is limited
89
90
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
90
91
  const fitWidth = 242;
92
+ const palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
91
93
  const {
92
94
  selectedRowIndex,
93
95
  selectedColumnIndex
94
- } = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor);
96
+ } = getSelectedRowAndColumnFromPalette(palette, highlightState.activeColor);
95
97
  return jsx(Flex, {
96
98
  alignItems: "center"
97
99
  }, jsx(Dropdown, {
@@ -139,7 +141,7 @@ const ToolbarHighlightColor = ({
139
141
  onClick: color => handleColorChange(color),
140
142
  selectedColor: highlightState.activeColor,
141
143
  paletteOptions: {
142
- palette: highlightColorPalette,
144
+ palette,
143
145
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
144
146
  }
145
147
  }))));
package/dist/esm/ui/ToolbarHighlightColor.js CHANGED
@@ -7,11 +7,12 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
7
7
  import { getAriaKeyshortcuts, toggleHighlightPalette, tooltip } from '@atlaskit/editor-common/keymaps';
8
8
  import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
9
9
  import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
10
- import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
10
+ import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, highlightColorPaletteWithTokenBorders } from '@atlaskit/editor-common/ui-color';
11
11
  import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
12
12
  import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
13
13
  import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
14
14
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
15
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
15
16
  import { Flex } from '@atlaskit/primitives';
16
17
  import { changeColor, setPalette } from '../commands';
17
18
  import { EditorHighlightIcon } from './EditorHighlightIcon';
@@ -88,7 +89,8 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
88
89
  // pixels, used to determine where to horizontally position the dropdown when space is limited
89
90
  // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering
90
91
  var fitWidth = 242;
91
- var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(highlightColorPalette, highlightState.activeColor),
92
+ var palette = getBooleanFF('platform.editor.dynamic-palette-borders') ? highlightColorPaletteWithTokenBorders : highlightColorPalette;
93
+ var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, highlightState.activeColor),
92
94
  selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
93
95
  selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
94
96
  return jsx(Flex, {
@@ -140,7 +142,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
140
142
  },
141
143
  selectedColor: highlightState.activeColor,
142
144
  paletteOptions: {
143
- palette: highlightColorPalette,
145
+ palette: palette,
144
146
  hexToPaletteColor: hexToEditorTextBackgroundPaletteColor
145
147
  }
146
148
  }))));
package/package.json CHANGED
@@ -1,106 +1,86 @@
1
1
  {
2
- "name": "@atlaskit/editor-plugin-highlight",
3
- "version": "1.7.5",
4
- "description": "Highlight plugin for @atlaskit/editor-core",
5
- "author": "Atlassian Pty Ltd",
6
- "license": "Apache-2.0",
7
- "publishConfig": {
8
- "registry": "https://registry.npmjs.org/"
9
- },
10
- "atlassian": {
11
- "team": "Editor: Core Experiences",
12
- "inPublicMirror": false,
13
- "releaseModel": "continuous",
14
- "website": {
15
- "name": "EditorPluginHighlight",
16
- "category": "Components"
17
- },
18
- "runReact18": false
19
- },
20
- "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
21
- "main": "dist/cjs/index.js",
22
- "module": "dist/esm/index.js",
23
- "module:es2019": "dist/es2019/index.js",
24
- "types": "dist/types/index.d.ts",
25
- "typesVersions": {
26
- ">=4.5 <5.4": {
27
- "*": [
28
- "dist/types-ts4.5/*",
29
- "dist/types-ts4.5/index.d.ts"
30
- ]
31
- }
32
- },
33
- "sideEffects": [
34
- "*.compiled.css"
35
- ],
36
- "atlaskit:src": "src/index.ts",
37
- "af:exports": {
38
- ".": "./src/index.ts"
39
- },
40
- "dependencies": {
41
- "@atlaskit/editor-common": "^82.4.0",
42
- "@atlaskit/editor-palette": "1.6.0",
43
- "@atlaskit/editor-plugin-analytics": "^1.2.0",
44
- "@atlaskit/editor-plugin-background-color": "^1.1.0",
45
- "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
46
- "@atlaskit/editor-plugin-text-formatting": "^1.7.0",
47
- "@atlaskit/editor-prosemirror": "4.0.1",
48
- "@atlaskit/editor-shared-styles": "^2.12.0",
49
- "@atlaskit/editor-tables": "^2.7.4",
50
- "@atlaskit/icon": "^22.3.0",
51
- "@atlaskit/primitives": "^7.0.0",
52
- "@babel/runtime": "^7.0.0",
53
- "@emotion/react": "^11.7.1"
54
- },
55
- "peerDependencies": {
56
- "react": "^16.8.0",
57
- "react-intl-next": "npm:react-intl@^5.18.1"
58
- },
59
- "devDependencies": {
60
- "@atlaskit/tokens": "^1.50.0",
61
- "typescript": "~5.4.2"
62
- },
63
- "techstack": {
64
- "@atlassian/frontend": {
65
- "import-structure": [
66
- "atlassian-conventions"
67
- ],
68
- "circular-dependencies": [
69
- "file-and-folder-level"
70
- ]
71
- },
72
- "@repo/internal": {
73
- "dom-events": "use-bind-event-listener",
74
- "analytics": [
75
- "analytics-next"
76
- ],
77
- "design-tokens": [
78
- "color"
79
- ],
80
- "theming": [
81
- "react-context"
82
- ],
83
- "ui-components": [
84
- "lite-mode"
85
- ],
86
- "deprecation": [
87
- "no-deprecated-imports"
88
- ],
89
- "styling": [
90
- "static",
91
- "compiled"
92
- ],
93
- "imports": [
94
- "import-no-extraneous-disable-for-examples-and-docs"
95
- ]
96
- }
97
- },
98
- "stricter": {
99
- "no-unused-dependencies": {
100
- "checkDevDependencies": true,
101
- "exclude": [
102
- "@atlaskit/tokens"
103
- ]
104
- }
105
- }
106
- }
2
+ "name": "@atlaskit/editor-plugin-highlight",
3
+ "version": "1.8.0",
4
+ "description": "Highlight plugin for @atlaskit/editor-core",
5
+ "author": "Atlassian Pty Ltd",
6
+ "license": "Apache-2.0",
7
+ "publishConfig": {
8
+ "registry": "https://registry.npmjs.org/"
9
+ },
10
+ "atlassian": {
11
+ "team": "Editor: Core Experiences",
12
+ "inPublicMirror": false,
13
+ "releaseModel": "continuous",
14
+ "website": {
15
+ "name": "EditorPluginHighlight",
16
+ "category": "Components"
17
+ },
18
+ "runReact18": false
19
+ },
20
+ "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
21
+ "main": "dist/cjs/index.js",
22
+ "module": "dist/esm/index.js",
23
+ "module:es2019": "dist/es2019/index.js",
24
+ "types": "dist/types/index.d.ts",
25
+ "typesVersions": {
26
+ ">=4.5 <5.4": {
27
+ "*": ["dist/types-ts4.5/*", "dist/types-ts4.5/index.d.ts"]
28
+ }
29
+ },
30
+ "sideEffects": ["*.compiled.css"],
31
+ "atlaskit:src": "src/index.ts",
32
+ "af:exports": {
33
+ ".": "./src/index.ts"
34
+ },
35
+ "dependencies": {
36
+ "@atlaskit/editor-common": "^82.6.0",
37
+ "@atlaskit/editor-palette": "1.6.0",
38
+ "@atlaskit/editor-plugin-analytics": "^1.2.0",
39
+ "@atlaskit/editor-plugin-background-color": "^1.1.0",
40
+ "@atlaskit/editor-plugin-primary-toolbar": "^1.1.0",
41
+ "@atlaskit/editor-plugin-text-formatting": "^1.7.0",
42
+ "@atlaskit/editor-prosemirror": "4.0.1",
43
+ "@atlaskit/editor-shared-styles": "^2.12.0",
44
+ "@atlaskit/editor-tables": "^2.7.4",
45
+ "@atlaskit/icon": "^22.3.0",
46
+ "@atlaskit/platform-feature-flags": "^0.2.0",
47
+ "@atlaskit/primitives": "^7.2.0",
48
+ "@babel/runtime": "^7.0.0",
49
+ "@emotion/react": "^11.7.1"
50
+ },
51
+ "peerDependencies": {
52
+ "react": "^16.8.0",
53
+ "react-intl-next": "npm:react-intl@^5.18.1"
54
+ },
55
+ "devDependencies": {
56
+ "@atlaskit/tokens": "^1.50.0",
57
+ "typescript": "~5.4.2"
58
+ },
59
+ "techstack": {
60
+ "@atlassian/frontend": {
61
+ "import-structure": ["atlassian-conventions"],
62
+ "circular-dependencies": ["file-and-folder-level"]
63
+ },
64
+ "@repo/internal": {
65
+ "dom-events": "use-bind-event-listener",
66
+ "analytics": ["analytics-next"],
67
+ "design-tokens": ["color"],
68
+ "theming": ["react-context"],
69
+ "ui-components": ["lite-mode"],
70
+ "deprecation": ["no-deprecated-imports"],
71
+ "styling": ["static", "compiled"],
72
+ "imports": ["import-no-extraneous-disable-for-examples-and-docs"]
73
+ }
74
+ },
75
+ "stricter": {
76
+ "no-unused-dependencies": {
77
+ "checkDevDependencies": true,
78
+ "exclude": ["@atlaskit/tokens"]
79
+ }
80
+ },
81
+ "platform-feature-flags": {
82
+ "platform.editor.dynamic-palette-borders": {
83
+ "type": "boolean"
84
+ }
85
+ }
86
+ }