@atlaskit/editor-plugin-text-color 12.3.3 → 12.3.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-text-color
 
+## 12.3.5
+
+### Patch Changes
+
+- [`283c55290e6cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/283c55290e6cc) -
+  Preserve visual selection after applying text color or highlight
+- Updated dependencies
+
+## 12.3.4
+
+### Patch Changes
+
+- [`262d8099a9e63`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/262d8099a9e63) -
+  [ux] [EDITOR-7851] address minor UI fixes for platform_editor_lovability_text_bg_color experiment
+  behind platform_editor_lovability_text_bg_color_patch_1
+- Updated dependencies
+
 ## 12.3.3
 
 ### Patch Changes

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

@@ -5,9 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.changeColor = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _selection = require("@atlaskit/editor-common/selection");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _color = require("../pm-plugins/utils/color");
 var _removeColor = require("./remove-color");
 var _toggleColor = require("./toggle-color");
+var maybeSyncSelectionAfterFormat = function maybeSyncSelectionAfterFormat(tr) {
+  if (tr.docChanged && (0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+    tr.setMeta(_selection.FORMAT_SELECTION_SYNC_META, true);
+  }
+};
+
 /**
  * Helper to create an analytics payload
  * @param newColor  - Color to be change in hex code
@@ -58,12 +66,14 @@ var changeColor = exports.changeColor = function changeColor(color, api, inputMe
       (0, _removeColor.removeColor)({
         tr: tr
       });
+      maybeSyncSelectionAfterFormat(tr);
       return tr;
     }
     api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
     (0, _toggleColor.toggleColor)(color)({
       tr: tr
     });
+    maybeSyncSelectionAfterFormat(tr);
     return tr;
   };
 };

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

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.removeColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
+var _selection = require("@atlaskit/editor-common/selection");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../main");
 var removeColor = exports.removeColor = function removeColor() {
   return function (state, dispatch) {
@@ -15,6 +17,9 @@ var removeColor = exports.removeColor = function removeColor() {
       tr: tr
     });
     if (dispatch) {
+      if (tr.docChanged && (0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+        tr.setMeta(_selection.FORMAT_SELECTION_SYNC_META, true);
+      }
       dispatch(tr.setMeta(_main.pluginKey, {
         action: _main.ACTIONS.RESET_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 _selection = require("@atlaskit/editor-common/selection");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../main");
 var _constants = require("../utils/constants");
@@ -38,6 +39,9 @@ var toggleColor = exports.toggleColor = function toggleColor(color) {
       })({
         tr: tr
       });
+      if (tr.docChanged && (0, _expValEquals.expValEquals)('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+        tr.setMeta(_selection.FORMAT_SELECTION_SYNC_META, true);
+      }
       dispatch(tr);
     }
     return true;

package/dist/cjs/ui/ColorAccessibilityMenuItem.js

@@ -17,6 +17,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _accessibility = _interopRequireDefault(require("@atlaskit/icon/core/accessibility"));
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tokens = require("@atlaskit/tokens");
 var _colorContrast = require("../pm-plugins/utils/color-contrast");
@@ -121,7 +122,8 @@ var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function C
     space: "space.050"
   }, /*#__PURE__*/_react.default.createElement(_accessibility.default, {
     label: "",
-    size: "medium"
+    size: "medium",
+    color: (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1') ? "var(--ds-icon-subtle, #505258)" : undefined
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     as: "span",
     size: "small",

package/dist/cjs/ui/RemoveColorMenuItem.js

@@ -17,6 +17,7 @@ var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _colourNone = _interopRequireDefault(require("@atlaskit/icon-lab/core/colour-none"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
@@ -59,6 +60,22 @@ var RemoveColorMenuItem = exports.RemoveColorMenuItem = function RemoveColorMenu
     }
   };
   if ((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.removeColorButton])
+      }, /*#__PURE__*/React.createElement(_new.default, {
+        shouldFitContainer: true,
+        appearance: "subtle",
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: (0, _runtime.ax)([styles.iconContainer])
+      }, /*#__PURE__*/React.createElement(_colourNone.default, {
+        size: "medium",
+        label: ""
+      }), /*#__PURE__*/React.createElement(_compiled.Text, {
+        color: "color.text.subtle"
+      }, formatMessage(_messages.highlightMessages.clearColors)))));
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)([styles.removeColorButton])
     }, /*#__PURE__*/React.createElement(_new.default, {

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

@@ -1,7 +1,14 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getActiveColorNew } from '../pm-plugins/utils/color';
 import { removeColor } from './remove-color';
 import { toggleColor } from './toggle-color';
+const maybeSyncSelectionAfterFormat = tr => {
+  if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+    tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+  }
+};
 
 /**
  * Helper to create an analytics payload
@@ -53,11 +60,13 @@ export const changeColor = (color, api, inputMethod) => ({
     removeColor({
       tr
     });
+    maybeSyncSelectionAfterFormat(tr);
     return tr;
   }
   api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
   toggleColor(color)({
     tr
   });
+  maybeSyncSelectionAfterFormat(tr);
   return tr;
 };

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

@@ -1,4 +1,6 @@
 import { removeMark } from '@atlaskit/editor-common/mark';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 export const removeColor = () => (state, dispatch) => {
   const {
@@ -12,6 +14,9 @@ export const removeColor = () => (state, dispatch) => {
     tr
   });
   if (dispatch) {
+    if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+      tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+    }
     dispatch(tr.setMeta(pluginKey, {
       action: ACTIONS.RESET_COLOR
     }));

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

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 import { overrideMarks } from '../utils/constants';
@@ -35,6 +36,9 @@ export const toggleColor = color => (state, dispatch) => {
     })({
       tr
     });
+    if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+      tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+    }
     dispatch(tr);
   }
   return true;

package/dist/es2019/ui/ColorAccessibilityMenuItem.js

@@ -10,6 +10,7 @@ import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { getTokenValue } from '@atlaskit/tokens';
 import { getContrastRatio as calcContrastRatio } from '../pm-plugins/utils/color-contrast';
@@ -118,7 +119,8 @@ export const ColorAccessibilityMenuItem = ({
     space: "space.050"
   }, /*#__PURE__*/React.createElement(AccessibilityIcon, {
     label: "",
-    size: "medium"
+    size: "medium",
+    color: fg('platform_editor_lovability_text_bg_color_patch_1') ? "var(--ds-icon-subtle, #505258)" : undefined
   }), /*#__PURE__*/React.createElement(Text, {
     as: "span",
     size: "small",

package/dist/es2019/ui/RemoveColorMenuItem.js

@@ -9,6 +9,7 @@ import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
 import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import ColourNoneIcon from '@atlaskit/icon-lab/core/colour-none';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const styles = {
@@ -53,6 +54,22 @@ export const RemoveColorMenuItem = ({
     }
   };
   if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if (fg('platform_editor_lovability_text_bg_color_patch_1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.removeColorButton])
+      }, /*#__PURE__*/React.createElement(Button, {
+        shouldFitContainer: true,
+        appearance: "subtle",
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: ax([styles.iconContainer])
+      }, /*#__PURE__*/React.createElement(ColourNoneIcon, {
+        size: "medium",
+        label: ""
+      }), /*#__PURE__*/React.createElement(Text, {
+        color: "color.text.subtle"
+      }, formatMessage(messages.clearColors)))));
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: ax([styles.removeColorButton])
     }, /*#__PURE__*/React.createElement(Button, {

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

@@ -1,7 +1,14 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getActiveColorNew } from '../pm-plugins/utils/color';
 import { removeColor } from './remove-color';
 import { toggleColor } from './toggle-color';
+var maybeSyncSelectionAfterFormat = function maybeSyncSelectionAfterFormat(tr) {
+  if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+    tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+  }
+};
 
 /**
  * Helper to create an analytics payload
@@ -53,12 +60,14 @@ export var changeColor = function changeColor(color, api, inputMethod) {
       removeColor({
         tr: tr
       });
+      maybeSyncSelectionAfterFormat(tr);
       return tr;
     }
     api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent(colorAnalyticsPayload)(tr);
     toggleColor(color)({
       tr: tr
     });
+    maybeSyncSelectionAfterFormat(tr);
     return tr;
   };
 };

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

@@ -1,4 +1,6 @@
 import { removeMark } from '@atlaskit/editor-common/mark';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 export var removeColor = function removeColor() {
   return function (state, dispatch) {
@@ -9,6 +11,9 @@ export var removeColor = function removeColor() {
       tr: tr
     });
     if (dispatch) {
+      if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+        tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+      }
       dispatch(tr.setMeta(pluginKey, {
         action: ACTIONS.RESET_COLOR
       }));

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

@@ -1,4 +1,5 @@
 import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { FORMAT_SELECTION_SYNC_META } from '@atlaskit/editor-common/selection';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS, pluginKey } from '../main';
 import { overrideMarks } from '../utils/constants';
@@ -32,6 +33,9 @@ export var toggleColor = function toggleColor(color) {
       })({
         tr: tr
       });
+      if (tr.docChanged && expValEquals('platform_editor_fix_selection_text_color_change', 'isEnabled', true)) {
+        tr.setMeta(FORMAT_SELECTION_SYNC_META, true);
+      }
       dispatch(tr);
     }
     return true;

package/dist/esm/ui/ColorAccessibilityMenuItem.js

@@ -10,6 +10,7 @@ import { getTokenCSSVariableValue } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorTextBackgroundPaletteColor, hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import AccessibilityIcon from '@atlaskit/icon/core/accessibility';
 import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { getTokenValue } from '@atlaskit/tokens';
 import { getContrastRatio as calcContrastRatio } from '../pm-plugins/utils/color-contrast';
@@ -114,7 +115,8 @@ export var ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref
     space: "space.050"
   }, /*#__PURE__*/React.createElement(AccessibilityIcon, {
     label: "",
-    size: "medium"
+    size: "medium",
+    color: fg('platform_editor_lovability_text_bg_color_patch_1') ? "var(--ds-icon-subtle, #505258)" : undefined
   }), /*#__PURE__*/React.createElement(Text, {
     as: "span",
     size: "small",

package/dist/esm/ui/RemoveColorMenuItem.js

@@ -9,6 +9,7 @@ import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
 import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { useToolbarDropdownMenu } from '@atlaskit/editor-toolbar';
 import ColourNoneIcon from '@atlaskit/icon-lab/core/colour-none';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var styles = {
@@ -50,6 +51,22 @@ export var RemoveColorMenuItem = function RemoveColorMenuItem(_ref) {
     }
   };
   if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true)) {
+    if (fg('platform_editor_lovability_text_bg_color_patch_1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: ax([styles.removeColorButton])
+      }, /*#__PURE__*/React.createElement(Button, {
+        shouldFitContainer: true,
+        appearance: "subtle",
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement("span", {
+        className: ax([styles.iconContainer])
+      }, /*#__PURE__*/React.createElement(ColourNoneIcon, {
+        size: "medium",
+        label: ""
+      }), /*#__PURE__*/React.createElement(Text, {
+        color: "color.text.subtle"
+      }, formatMessage(messages.clearColors)))));
+    }
     return /*#__PURE__*/React.createElement("div", {
       className: ax([styles.removeColorButton])
     }, /*#__PURE__*/React.createElement(Button, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-color",
-	"version": "12.3.3",
+	"version": "12.3.5",
 	"description": "Text color plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,7 +22,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.0.0",
-		"@atlaskit/button": "^24.1.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/editor-palette": "^3.1.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
@@ -33,21 +33,21 @@
 		"@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.1.0",
+		"@atlaskit/editor-toolbar": "^2.1.0",
+		"@atlaskit/editor-toolbar-model": "^1.1.0",
+		"@atlaskit/heading": "^6.1.0",
+		"@atlaskit/icon": "^36.1.0",
+		"@atlaskit/icon-lab": "^7.2.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": "^114.0.0",
-		"@atlaskit/tokens": "^15.0.0",
+		"@atlaskit/platform-feature-flags-react": "^1.1.0",
+		"@atlaskit/primitives": "^20.2.0",
+		"@atlaskit/tmp-editor-statsig": "^114.6.0",
+		"@atlaskit/tokens": "^15.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.13.0",
+		"@atlaskit/editor-common": "^116.17.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -99,6 +99,9 @@
 	"platform-feature-flags": {
 		"platform_editor_use_preferences_plugin": {
 			"type": "boolean"
+		},
+		"platform_editor_lovability_text_bg_color_patch_1": {
+			"type": "boolean"
 		}
 	}
 }