@atlaskit/editor-plugin-highlight 1.7.2 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.7.3
+
+### Patch Changes
+
+- [#108804](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108804)
+  [`3d5378c261364`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d5378c261364) -
+  [ED-23517] Changed initial state of highlight plugin to avoid inactive toolbar button in examples
+- Updated dependencies
+
 ## 1.7.2
 
 ### Patch Changes

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

@@ -19,16 +19,16 @@ var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI)
         return null;
       }
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
-      tr.setMeta(_pmPlugin.highlightPluginKey, {
-        type: _pmPlugin.HighlightPluginAction.CHANGE_COLOR,
-        color: color
-      });
       tr.scrollIntoView();
       if (color === _uiColor.REMOVE_HIGHLIGHT_COLOR) {
         (0, _mark.removeMark)(backgroundColor)({
           tr: tr
         });
       } else {
+        tr.setMeta(_pmPlugin.highlightPluginKey, {
+          type: _pmPlugin.HighlightPluginAction.CHANGE_COLOR,
+          color: color
+        });
         (0, _mark.toggleMark)(backgroundColor, {
           color: color
         })({

package/dist/cjs/pm-plugin.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.highlightPluginKey = exports.createPlugin = exports.HighlightPluginAction = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _color = require("./utils/color");
 var _disabled = require("./utils/disabled");
@@ -23,10 +22,10 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
   return new _safePlugin.SafePlugin({
     key: highlightPluginKey,
     state: {
-      init: function init() {
+      init: function init(_, editorState) {
         return {
-          activeColor: _uiColor.REMOVE_HIGHLIGHT_COLOR,
-          disabled: true
+          activeColor: null,
+          disabled: (0, _disabled.getDisabledState)(editorState)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -99,7 +99,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
 
   // Get the design token for the  active color (if it exists) to modify the toolbar
   // icon, but show the nice rainbow if none is selected
-  var activeColorToken = highlightState.activeColor === _uiColor.REMOVE_HIGHLIGHT_COLOR || highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
+  var activeColorToken = highlightState.activeColor === null ? null : (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightState.activeColor);
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering

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

@@ -15,16 +15,16 @@ export const changeColor = editorAnalyticsAPI => ({
     return null;
   }
   editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
-  tr.setMeta(highlightPluginKey, {
-    type: HighlightPluginAction.CHANGE_COLOR,
-    color
-  });
   tr.scrollIntoView();
   if (color === REMOVE_HIGHLIGHT_COLOR) {
     removeMark(backgroundColor)({
       tr
     });
   } else {
+    tr.setMeta(highlightPluginKey, {
+      type: HighlightPluginAction.CHANGE_COLOR,
+      color
+    });
     toggleMark(backgroundColor, {
       color
     })({

package/dist/es2019/pm-plugin.js

@@ -1,5 +1,4 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getActiveColor } from './utils/color';
 import { getDisabledState } from './utils/disabled';
@@ -14,9 +13,9 @@ export const createPlugin = ({
   return new SafePlugin({
     key: highlightPluginKey,
     state: {
-      init: () => ({
-        activeColor: REMOVE_HIGHLIGHT_COLOR,
-        disabled: true
+      init: (_, editorState) => ({
+        activeColor: null,
+        disabled: getDisabledState(editorState)
       }),
       apply: (tr, pluginState, _oldState, newState) => {
         var _tr$getMeta;

package/dist/es2019/ui/ToolbarHighlightColor.js

@@ -6,7 +6,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
-import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -83,7 +83,7 @@ const ToolbarHighlightColor = ({
 
   // Get the design token for the  active color (if it exists) to modify the toolbar
   // icon, but show the nice rainbow if none is selected
-  const activeColorToken = highlightState.activeColor === REMOVE_HIGHLIGHT_COLOR || highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  const activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering

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

@@ -13,16 +13,16 @@ export var changeColor = function changeColor(editorAnalyticsAPI) {
         return null;
       }
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
-      tr.setMeta(highlightPluginKey, {
-        type: HighlightPluginAction.CHANGE_COLOR,
-        color: color
-      });
       tr.scrollIntoView();
       if (color === REMOVE_HIGHLIGHT_COLOR) {
         removeMark(backgroundColor)({
           tr: tr
         });
       } else {
+        tr.setMeta(highlightPluginKey, {
+          type: HighlightPluginAction.CHANGE_COLOR,
+          color: color
+        });
         toggleMark(backgroundColor, {
           color: color
         })({

package/dist/esm/pm-plugin.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { getActiveColor } from './utils/color';
 import { getDisabledState } from './utils/disabled';
@@ -16,10 +15,10 @@ export var createPlugin = function createPlugin(_ref) {
   return new SafePlugin({
     key: highlightPluginKey,
     state: {
-      init: function init() {
+      init: function init(_, editorState) {
         return {
-          activeColor: REMOVE_HIGHLIGHT_COLOR,
-          disabled: true
+          activeColor: null,
+          disabled: getDisabledState(editorState)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {

package/dist/esm/ui/ToolbarHighlightColor.js

@@ -7,7 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
-import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+import { ColorPalette, getSelectedRowAndColumnFromPalette, highlightColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownContainer as Dropdown, TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -88,7 +88,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
 
   // Get the design token for the  active color (if it exists) to modify the toolbar
   // icon, but show the nice rainbow if none is selected
-  var activeColorToken = highlightState.activeColor === REMOVE_HIGHLIGHT_COLOR || highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
+  var activeColorToken = highlightState.activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(highlightState.activeColor);
 
   // pixels, used to determine where to horizontally position the dropdown when space is limited
   // this should reflect the width of the dropdown when fully populated with colors, including translations due to layering

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-highlight",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "Highlight plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^82.1.0",
+    "@atlaskit/editor-common": "^82.2.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-background-color": "^1.1.0",