@atlaskit/editor-plugin-highlight 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.4.2
+
+### Patch Changes
+
+-   [#101513](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101513)
+    [`98b5dfc33bed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/98b5dfc33bed) -
+    [ux] [ED-23156] The highlight primary toolbar button is disabled when trying to apply it on
+    nodes that don't enable the mark and when in a gap cursor. The text color primary toolbar button
+    is disabled when selecting text with a highlight.
+
+## 1.4.1
+
+### Patch Changes
+
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/pm-plugin.js

@@ -9,13 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _disabled = require("./utils/disabled");
 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) { (0, _defineProperty2.default)(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; }
 var highlightPluginKey = exports.highlightPluginKey = new _state.PluginKey('highlight');
-var initialState = {
-  activeColor: _uiColor.REMOVE_HIGHLIGHT_COLOR,
-  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
-};
 var HighlightPluginAction = exports.HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
   return HighlightPluginAction;
@@ -26,11 +23,15 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     key: highlightPluginKey,
     state: {
       init: function init() {
-        return initialState;
+        return {
+          activeColor: _uiColor.REMOVE_HIGHLIGHT_COLOR,
+          disabled: true
+        };
       },
-      apply: function apply(tr, pluginState) {
+      apply: function apply(tr, pluginState, _oldState, newState) {
         var _tr$getMeta;
         var action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        var nextState;
         switch (action) {
           case HighlightPluginAction.CHANGE_COLOR:
             var _tr$getMeta2 = tr.getMeta(highlightPluginKey),
@@ -39,6 +40,12 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
               activeColor: color
             });
           default:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              disabled: (0, _disabled.getDisabledState)(newState)
+            });
+            if (pluginState && pluginState.disabled !== nextState.disabled) {
+              return nextState;
+            }
             return pluginState;
         }
       }

package/dist/cjs/utils/disabled.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDisabledState = void 0;
+var _mark = require("@atlaskit/editor-common/mark");
+var _selection = require("@atlaskit/editor-common/selection");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var getDisabledState = exports.getDisabledState = function getDisabledState(state) {
+  var backgroundColor = state.schema.marks.backgroundColor;
+  var _ref = state.selection,
+    empty = _ref.empty,
+    ranges = _ref.ranges,
+    $cursor = _ref.$cursor;
+  if (!backgroundColor) {
+    return true;
+  }
+  if (state.selection instanceof _state.NodeSelection || state.selection instanceof _selection.GapCursorSelection) {
+    return true;
+  }
+  if (empty && !$cursor || (0, _mark.isMarkAllowedInRange)(state.doc, ranges, backgroundColor) === false) {
+    return true;
+  }
+  if ((0, _mark.isMarkExcluded)(backgroundColor, state.storedMarks || $cursor && $cursor.marks())) {
+    return true;
+  }
+  return false;
+};

package/dist/es2019/pm-plugin.js

@@ -1,11 +1,8 @@
 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 { getDisabledState } from './utils/disabled';
 export const highlightPluginKey = new PluginKey('highlight');
-const initialState = {
-  activeColor: REMOVE_HIGHLIGHT_COLOR,
-  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
-};
 export let HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
   return HighlightPluginAction;
@@ -16,10 +13,14 @@ export const createPlugin = ({
   return new SafePlugin({
     key: highlightPluginKey,
     state: {
-      init: () => initialState,
-      apply: (tr, pluginState) => {
+      init: () => ({
+        activeColor: REMOVE_HIGHLIGHT_COLOR,
+        disabled: true
+      }),
+      apply: (tr, pluginState, _oldState, newState) => {
         var _tr$getMeta;
         const action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        let nextState;
         switch (action) {
           case HighlightPluginAction.CHANGE_COLOR:
             const {
@@ -30,6 +31,13 @@ export const createPlugin = ({
               activeColor: color
             };
           default:
+            nextState = {
+              ...pluginState,
+              disabled: getDisabledState(newState)
+            };
+            if (pluginState && pluginState.disabled !== nextState.disabled) {
+              return nextState;
+            }
             return pluginState;
         }
       }

package/dist/es2019/utils/disabled.js

@@ -0,0 +1,26 @@
+import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const getDisabledState = state => {
+  const {
+    backgroundColor
+  } = state.schema.marks;
+  const {
+    empty,
+    ranges,
+    $cursor
+  } = state.selection;
+  if (!backgroundColor) {
+    return true;
+  }
+  if (state.selection instanceof NodeSelection || state.selection instanceof GapCursorSelection) {
+    return true;
+  }
+  if (empty && !$cursor || isMarkAllowedInRange(state.doc, ranges, backgroundColor) === false) {
+    return true;
+  }
+  if (isMarkExcluded(backgroundColor, state.storedMarks || $cursor && $cursor.marks())) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/pm-plugin.js

@@ -4,11 +4,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { getDisabledState } from './utils/disabled';
 export var highlightPluginKey = new PluginKey('highlight');
-var initialState = {
-  activeColor: REMOVE_HIGHLIGHT_COLOR,
-  disabled: false // TODO: Should probably be true, but we can tackle it once we tackle disabled state
-};
 export var HighlightPluginAction = /*#__PURE__*/function (HighlightPluginAction) {
   HighlightPluginAction[HighlightPluginAction["CHANGE_COLOR"] = 0] = "CHANGE_COLOR";
   return HighlightPluginAction;
@@ -19,11 +16,15 @@ export var createPlugin = function createPlugin(_ref) {
     key: highlightPluginKey,
     state: {
       init: function init() {
-        return initialState;
+        return {
+          activeColor: REMOVE_HIGHLIGHT_COLOR,
+          disabled: true
+        };
       },
-      apply: function apply(tr, pluginState) {
+      apply: function apply(tr, pluginState, _oldState, newState) {
         var _tr$getMeta;
         var action = (_tr$getMeta = tr.getMeta(highlightPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        var nextState;
         switch (action) {
           case HighlightPluginAction.CHANGE_COLOR:
             var _tr$getMeta2 = tr.getMeta(highlightPluginKey),
@@ -32,6 +33,12 @@ export var createPlugin = function createPlugin(_ref) {
               activeColor: color
             });
           default:
+            nextState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              disabled: getDisabledState(newState)
+            });
+            if (pluginState && pluginState.disabled !== nextState.disabled) {
+              return nextState;
+            }
             return pluginState;
         }
       }

package/dist/esm/utils/disabled.js

@@ -0,0 +1,23 @@
+import { isMarkAllowedInRange, isMarkExcluded } from '@atlaskit/editor-common/mark';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var getDisabledState = function getDisabledState(state) {
+  var backgroundColor = state.schema.marks.backgroundColor;
+  var _ref = state.selection,
+    empty = _ref.empty,
+    ranges = _ref.ranges,
+    $cursor = _ref.$cursor;
+  if (!backgroundColor) {
+    return true;
+  }
+  if (state.selection instanceof NodeSelection || state.selection instanceof GapCursorSelection) {
+    return true;
+  }
+  if (empty && !$cursor || isMarkAllowedInRange(state.doc, ranges, backgroundColor) === false) {
+    return true;
+  }
+  if (isMarkExcluded(backgroundColor, state.storedMarks || $cursor && $cursor.marks())) {
+    return true;
+  }
+  return false;
+};

package/dist/types/utils/disabled.d.ts

@@ -0,0 +1,2 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const getDisabledState: (state: EditorState) => boolean;

package/dist/types-ts4.5/utils/disabled.d.ts

@@ -0,0 +1,2 @@
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const getDisabledState: (state: EditorState) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-highlight",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Highlight plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,15 +38,15 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.3.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/adf-schema": "^36.8.0",
+    "@atlaskit/editor-common": "^80.5.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-text-formatting": "^1.6.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-shared-styles": "^2.11.0",
-    "@atlaskit/icon": "^22.2.0",
-    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -55,7 +55,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "typescript": "~5.4.2"
   },