@atlaskit/editor-plugin-text-color 11.1.4 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.2.0
+
+### Minor Changes
+
+- [`b26d59f2d7dbf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b26d59f2d7dbf) -
+  [ux] [EDITOR-7589] combine text color highlight color behind experiment
+
+### Patch Changes
+
+- [`3a59e88cfd890`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a59e88cfd890) -
+  [ux] [EDITOR-7589] update icon colors for highlight color palette and toolbar icon
+- Updated dependencies
+
 ## 11.1.4
 
 ### Patch Changes

package/dist/cjs/editor-commands/toggle-color.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../pm-plugins/main");
 var _constants = require("../pm-plugins/utils/constants");
 var _disabled = require("../pm-plugins/utils/disabled");
@@ -19,14 +20,16 @@ var toggleColor = exports.toggleColor = function toggleColor(color) {
       });
       return tr;
     }
-    _constants.overrideMarks.forEach(function (mark) {
-      var marks = tr.doc.type.schema.marks;
-      if (marks[mark]) {
-        (0, _mark.removeMark)(marks[mark])({
-          tr: tr
-        });
-      }
-    });
+    if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      _constants.overrideMarks.forEach(function (mark) {
+        var marks = tr.doc.type.schema.marks;
+        if (marks[mark]) {
+          (0, _mark.removeMark)(marks[mark])({
+            tr: tr
+          });
+        }
+      });
+    }
     (0, _mark.toggleMark)(textColor, {
       color: color
     })({

package/dist/cjs/pm-plugins/commands/toggle-color.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../main");
 var _constants = require("../utils/constants");
 var _disabled = require("../utils/disabled");
@@ -22,14 +23,16 @@ var toggleColor = exports.toggleColor = function toggleColor(color) {
       return false;
     }
     if (dispatch) {
-      _constants.overrideMarks.forEach(function (mark) {
-        var marks = tr.doc.type.schema.marks;
-        if (marks[mark]) {
-          (0, _mark.removeMark)(marks[mark])({
-            tr: tr
-          });
-        }
-      });
+      if (!(0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+        _constants.overrideMarks.forEach(function (mark) {
+          var marks = tr.doc.type.schema.marks;
+          if (marks[mark]) {
+            (0, _mark.removeMark)(marks[mark])({
+              tr: tr
+            });
+          }
+        });
+      }
       (0, _mark.toggleMark)(textColor, {
         color: color
       })({

package/dist/cjs/ui/TextColorHighlightMenu.js

@@ -10,6 +10,7 @@ var _reactIntl = require("react-intl");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -17,6 +18,12 @@ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if (!textColor || textColor === defaultColor && defaultColor) {
+      return "var(--ds-text, #292A2E)";
+    }
+    return (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || "var(--ds-text, #292A2E)";
+  }
   if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
     return "var(--ds-text, #292A2E)";
   }
@@ -111,6 +118,35 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
     };
   }, [setIsPaletteOpen, isPaletteOpen]);
   var iconColor = getIconColor(textColor, defaultColor, highlightColor);
+  if ((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
+      isOpen: isPaletteOpen,
+      setIsOpen: setIsPaletteOpen
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+      iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
+        highlightColor: getHighlightColorIcon(highlightColor)
+      }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
+        label: formatMessage(_messages.textColorMessages.textColorTooltip),
+        iconColor: iconColor,
+        shouldRecommendSmallIcon: true,
+        size: 'small',
+        isDisabled: isDisabled,
+        spacing: 'compact'
+      })),
+      isDisabled: isDisabled,
+      testId: "text-color-highlight-menu",
+      hasSectionMargin: false,
+      tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+        content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+          description: formatMessage(isHighlightPluginExisted ? _messages.textColorMessages.textColorHighlightTooltip : _messages.textColorMessages.textColorTooltip),
+          keymap: _keymaps.toggleHighlightPalette
+        })
+      })
+    }, /*#__PURE__*/_react.default.createElement(_uiColor.SelectedTextColorProvider, {
+      textColor: textColor,
+      defaultColor: defaultColor
+    }, children)));
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, {
     isOpen: isPaletteOpen,
     setIsOpen: setIsPaletteOpen

package/dist/es2019/editor-commands/toggle-color.js

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { overrideMarks } from '../pm-plugins/utils/constants';
 import { getDisabledStateNew } from '../pm-plugins/utils/disabled';
@@ -15,16 +16,18 @@ export const toggleColor = color => ({
     });
     return tr;
   }
-  overrideMarks.forEach(mark => {
-    const {
-      marks
-    } = tr.doc.type.schema;
-    if (marks[mark]) {
-      removeMark(marks[mark])({
-        tr
-      });
-    }
-  });
+  if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    overrideMarks.forEach(mark => {
+      const {
+        marks
+      } = tr.doc.type.schema;
+      if (marks[mark]) {
+        removeMark(marks[mark])({
+          tr
+        });
+      }
+    });
+  }
   toggleMark(textColor, {
     color
   })({

package/dist/es2019/pm-plugins/commands/toggle-color.js

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 import { overrideMarks } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
@@ -17,16 +18,18 @@ export const toggleColor = color => (state, dispatch) => {
     return false;
   }
   if (dispatch) {
-    overrideMarks.forEach(mark => {
-      const {
-        marks
-      } = tr.doc.type.schema;
-      if (marks[mark]) {
-        removeMark(marks[mark])({
-          tr
-        });
-      }
-    });
+    if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      overrideMarks.forEach(mark => {
+        const {
+          marks
+        } = tr.doc.type.schema;
+        if (marks[mark]) {
+          removeMark(marks[mark])({
+            tr
+          });
+        }
+      });
+    }
     toggleMark(textColor, {
       color
     })({

package/dist/es2019/ui/TextColorHighlightMenu.js

@@ -3,12 +3,19 @@ import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
+import { SelectedTextColorProvider } from '@atlaskit/editor-common/ui-color';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorTextPaletteColor, hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const getIconColor = (textColor, defaultColor, highlightColor) => {
+  if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if (!textColor || textColor === defaultColor && defaultColor) {
+      return "var(--ds-text, #292A2E)";
+    }
+    return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #292A2E)";
+  }
   if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
     return "var(--ds-text, #292A2E)";
   }
@@ -106,6 +113,35 @@ export const TextColorHighlightMenu = ({
     };
   }, [setIsPaletteOpen, isPaletteOpen]);
   const iconColor = getIconColor(textColor, defaultColor, highlightColor);
+  if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+      isOpen: isPaletteOpen,
+      setIsOpen: setIsPaletteOpen
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+      iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
+        highlightColor: getHighlightColorIcon(highlightColor)
+      }, /*#__PURE__*/React.createElement(TextColorIcon, {
+        label: formatMessage(messages.textColorTooltip),
+        iconColor: iconColor,
+        shouldRecommendSmallIcon: true,
+        size: 'small',
+        isDisabled: isDisabled,
+        spacing: 'compact'
+      })),
+      isDisabled: isDisabled,
+      testId: "text-color-highlight-menu",
+      hasSectionMargin: false,
+      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+        content: /*#__PURE__*/React.createElement(ToolTipContent, {
+          description: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip),
+          keymap: toggleHighlightPalette
+        })
+      })
+    }, /*#__PURE__*/React.createElement(SelectedTextColorProvider, {
+      textColor: textColor,
+      defaultColor: defaultColor
+    }, children)));
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isPaletteOpen,
     setIsOpen: setIsPaletteOpen

package/dist/esm/editor-commands/toggle-color.js

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { overrideMarks } from '../pm-plugins/utils/constants';
 import { getDisabledStateNew } from '../pm-plugins/utils/disabled';
@@ -13,14 +14,16 @@ export var toggleColor = function toggleColor(color) {
       });
       return tr;
     }
-    overrideMarks.forEach(function (mark) {
-      var marks = tr.doc.type.schema.marks;
-      if (marks[mark]) {
-        removeMark(marks[mark])({
-          tr: tr
-        });
-      }
-    });
+    if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+      overrideMarks.forEach(function (mark) {
+        var marks = tr.doc.type.schema.marks;
+        if (marks[mark]) {
+          removeMark(marks[mark])({
+            tr: tr
+          });
+        }
+      });
+    }
     toggleMark(textColor, {
       color: color
     })({

package/dist/esm/pm-plugins/commands/toggle-color.js

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 import { overrideMarks } from '../utils/constants';
 import { getDisabledState } from '../utils/disabled';
@@ -16,14 +17,16 @@ export var toggleColor = function toggleColor(color) {
       return false;
     }
     if (dispatch) {
-      overrideMarks.forEach(function (mark) {
-        var marks = tr.doc.type.schema.marks;
-        if (marks[mark]) {
-          removeMark(marks[mark])({
-            tr: tr
-          });
-        }
-      });
+      if (!expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+        overrideMarks.forEach(function (mark) {
+          var marks = tr.doc.type.schema.marks;
+          if (marks[mark]) {
+            removeMark(marks[mark])({
+              tr: tr
+            });
+          }
+        });
+      }
       toggleMark(textColor, {
         color: color
       })({

package/dist/esm/ui/TextColorHighlightMenu.js

@@ -3,12 +3,19 @@ import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
+import { SelectedTextColorProvider } from '@atlaskit/editor-common/ui-color';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { hexToEditorTextPaletteColor, hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
+  if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if (!textColor || textColor === defaultColor && defaultColor) {
+      return "var(--ds-text, #292A2E)";
+    }
+    return hexToEditorTextPaletteColor(textColor) || "var(--ds-text, #292A2E)";
+  }
   if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
     return "var(--ds-text, #292A2E)";
   }
@@ -103,6 +110,35 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
     };
   }, [setIsPaletteOpen, isPaletteOpen]);
   var iconColor = getIconColor(textColor, defaultColor, highlightColor);
+  if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
+      isOpen: isPaletteOpen,
+      setIsOpen: setIsPaletteOpen
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+      iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
+        highlightColor: getHighlightColorIcon(highlightColor)
+      }, /*#__PURE__*/React.createElement(TextColorIcon, {
+        label: formatMessage(messages.textColorTooltip),
+        iconColor: iconColor,
+        shouldRecommendSmallIcon: true,
+        size: 'small',
+        isDisabled: isDisabled,
+        spacing: 'compact'
+      })),
+      isDisabled: isDisabled,
+      testId: "text-color-highlight-menu",
+      hasSectionMargin: false,
+      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+        content: /*#__PURE__*/React.createElement(ToolTipContent, {
+          description: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip),
+          keymap: toggleHighlightPalette
+        })
+      })
+    }, /*#__PURE__*/React.createElement(SelectedTextColorProvider, {
+      textColor: textColor,
+      defaultColor: defaultColor
+    }, children)));
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, {
     isOpen: isPaletteOpen,
     setIsOpen: setIsPaletteOpen

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "11.1.4",
+	"version": "12.0.0",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -16,46 +16,38 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^54.0.0",
-		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/editor-palette": "^2.2.0",
-		"@atlaskit/editor-plugin-analytics": "^11.0.0",
-		"@atlaskit/editor-plugin-highlight": "^11.0.0",
-		"@atlaskit/editor-plugin-interaction": "^20.0.0",
-		"@atlaskit/editor-plugin-primary-toolbar": "^12.0.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^12.0.0",
-		"@atlaskit/editor-plugin-toolbar": "^8.0.0",
-		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/editor-shared-styles": "^3.11.0",
-		"@atlaskit/editor-toolbar": "^1.10.0",
-		"@atlaskit/editor-toolbar-model": "^0.5.0",
-		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^35.4.0",
-		"@atlaskit/icon-lab": "^6.14.0",
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/platform-feature-flags-react": "^0.5.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^103.0.0",
-		"@atlaskit/tokens": "^13.4.0",
+		"@atlaskit/adf-schema": "^55.0.0",
+		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/editor-palette": "^3.0.0",
+		"@atlaskit/editor-plugin-analytics": "^12.0.0",
+		"@atlaskit/editor-plugin-highlight": "^12.0.0",
+		"@atlaskit/editor-plugin-interaction": "^21.0.0",
+		"@atlaskit/editor-plugin-primary-toolbar": "^13.0.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^13.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^9.0.0",
+		"@atlaskit/editor-prosemirror": "^8.0.0",
+		"@atlaskit/editor-shared-styles": "^4.0.0",
+		"@atlaskit/editor-toolbar": "^2.0.0",
+		"@atlaskit/editor-toolbar-model": "^1.0.0",
+		"@atlaskit/heading": "^6.0.0",
+		"@atlaskit/icon": "^36.0.0",
+		"@atlaskit/icon-lab": "^7.0.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/platform-feature-flags-react": "^1.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tmp-editor-statsig": "^104.0.0",
+		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.15.0",
+		"@atlaskit/editor-common": "^116.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"