@atlaskit/editor-plugin-highlight 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-highlight
 
+## 1.4.0
+
+### Minor Changes
+
+-   [#100495](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100495)
+    [`dbb78a011fac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dbb78a011fac) -
+    [ux] [ED-23150] Added `changeColor` command for editor-plugin-highlight, including new
+    `removeMark` command for editor-common. Fixed bug with editor-plugin-text-color which prevented
+    color from being removed when user selects all.
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 1.3.0
+
+### Minor Changes
+
+-   [#100553](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100553)
+    [`e0c2a4b9c8ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0c2a4b9c8ae) -
+    [ED-23157] Clear background color (= highlights) when clearing the formatting on a selection
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

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

@@ -4,32 +4,62 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.changeColor = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _mark = require("@atlaskit/editor-common/mark");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _pmPlugin = require("../pm-plugin");
-// import {
-//   ACTION,
-//   ACTION_SUBJECT,
-//   ACTION_SUBJECT_ID,
-//   EVENT_TYPE,
-// } from '@atlaskit/editor-common/analytics';
-
-var changeColor = exports.changeColor = function changeColor(_editorAnalyticsAPI) {
+var _color = require("../utils/color");
+var changeColor = exports.changeColor = function changeColor(editorAnalyticsAPI) {
   return function (_ref) {
     var color = _ref.color;
     return function (_ref2) {
       var tr = _ref2.tr;
+      var backgroundColor = tr.doc.type.schema.marks.backgroundColor;
+      if (!backgroundColor) {
+        return null;
+      }
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
       tr.setMeta(_pmPlugin.highlightPluginKey, {
         type: _pmPlugin.HighlightPluginAction.CHANGE_COLOR,
         color: color
       });
-
-      // editorAnalyticsAPI?.attachAnalyticsEvent({
-      //   action: ACTION.FORMATTED,
-      //   actionSubject: ACTION_SUBJECT.TEXT,
-      //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
-      //   eventType: EVENT_TYPE.TRACK,
-      // })(tr);
-
+      tr.scrollIntoView();
+      if (color === _uiColor.REMOVE_HIGHLIGHT_COLOR) {
+        (0, _mark.removeMark)(backgroundColor)({
+          tr: tr
+        });
+      } else {
+        (0, _mark.toggleMark)(backgroundColor, {
+          color: color
+        })({
+          tr: tr
+        });
+      }
       return tr;
     };
   };
+};
+var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
+  var previousColor = (0, _color.getActiveColor)(tr);
+  // get color names from palette
+  var newColorFromPalette = _uiColor.highlightColorPalette.find(function (_ref3) {
+    var value = _ref3.value;
+    return value === color;
+  });
+  var previousColorFromPalette = _uiColor.highlightColorPalette.find(function (_ref4) {
+    var value = _ref4.value;
+    return value === previousColor;
+  });
+  var newColorLabel = newColorFromPalette ? newColorFromPalette.label : color;
+  var previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: _analytics.ACTION.FORMATTED,
+    actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase()
+    }
+  };
 };

package/dist/cjs/ui/ToolbarHighlightColor.js

@@ -50,7 +50,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
       action: isOpen ? _analytics.ACTION.OPENED : _analytics.ACTION.CLOSED,
       actionSubject: _analytics.ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.HIGHLIGHT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
       eventType: _analytics.EVENT_TYPE.TRACK
     });
     setIsDropdownOpen(isOpen);
@@ -127,7 +127,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
       isPopupPositioned: true
     },
     trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
-      buttonId: _uiMenu.TOOLBAR_BUTTON.HIGHLIGHT,
+      buttonId: _uiMenu.TOOLBAR_BUTTON.BACKGROUND_COLOR,
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,

package/dist/cjs/utils/color.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActiveColor = void 0;
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var getActiveColor = exports.getActiveColor = function getActiveColor(tr) {
+  var _ref = tr.selection,
+    $from = _ref.$from,
+    $to = _ref.$to,
+    $cursor = _ref.$cursor;
+  var _ref2 = tr.doc.type.schema.marks,
+    backgroundColor = _ref2.backgroundColor;
+
+  // Filter out other marks
+  var marks = [];
+  if ($cursor) {
+    marks.push(backgroundColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, function (currentNode) {
+      if (currentNode.isLeaf) {
+        var mark = backgroundColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
+  // Merge consecutive same color marks
+  var prevMark;
+  marks = marks.filter(function (mark) {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  var marksWithColor = marks.filter(function (mark) {
+    return !!mark;
+  });
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : _uiColor.REMOVE_HIGHLIGHT_COLOR;
+};

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

@@ -1,27 +1,57 @@
-// import {
-//   ACTION,
-//   ACTION_SUBJECT,
-//   ACTION_SUBJECT_ID,
-//   EVENT_TYPE,
-// } from '@atlaskit/editor-common/analytics';
-
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { HighlightPluginAction, highlightPluginKey } from '../pm-plugin';
-export const changeColor = _editorAnalyticsAPI => ({
+import { getActiveColor } from '../utils/color';
+export const changeColor = editorAnalyticsAPI => ({
   color
 }) => ({
   tr
 }) => {
+  const {
+    backgroundColor
+  } = tr.doc.type.schema.marks;
+  if (!backgroundColor) {
+    return null;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
   tr.setMeta(highlightPluginKey, {
     type: HighlightPluginAction.CHANGE_COLOR,
     color
   });
-
-  // editorAnalyticsAPI?.attachAnalyticsEvent({
-  //   action: ACTION.FORMATTED,
-  //   actionSubject: ACTION_SUBJECT.TEXT,
-  //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
-  //   eventType: EVENT_TYPE.TRACK,
-  // })(tr);
-
+  tr.scrollIntoView();
+  if (color === REMOVE_HIGHLIGHT_COLOR) {
+    removeMark(backgroundColor)({
+      tr
+    });
+  } else {
+    toggleMark(backgroundColor, {
+      color
+    })({
+      tr
+    });
+  }
   return tr;
+};
+const createAnalyticsEvent = (color, tr) => {
+  const previousColor = getActiveColor(tr);
+  // get color names from palette
+  const newColorFromPalette = highlightColorPalette.find(({
+    value
+  }) => value === color);
+  const previousColorFromPalette = highlightColorPalette.find(({
+    value
+  }) => value === previousColor);
+  const newColorLabel = newColorFromPalette ? newColorFromPalette.label : color;
+  const previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase()
+    }
+  };
 };

package/dist/es2019/ui/ToolbarHighlightColor.js

@@ -36,7 +36,7 @@ const ToolbarHighlightColor = ({
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 ? void 0 : dispatchAnalyticsEvent({
       action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
       actionSubject: ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
       eventType: EVENT_TYPE.TRACK
     });
     setIsDropdownOpen(isOpen);
@@ -112,7 +112,7 @@ const ToolbarHighlightColor = ({
       isPopupPositioned: true
     },
     trigger: jsx(ToolbarButton, {
-      buttonId: TOOLBAR_BUTTON.HIGHLIGHT,
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,

package/dist/es2019/utils/color.js

@@ -0,0 +1,42 @@
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+export const getActiveColor = tr => {
+  const {
+    $from,
+    $to,
+    $cursor
+  } = tr.selection;
+  const {
+    backgroundColor
+  } = tr.doc.type.schema.marks;
+
+  // Filter out other marks
+  let marks = [];
+  if ($cursor) {
+    marks.push(backgroundColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, currentNode => {
+      if (currentNode.isLeaf) {
+        const mark = backgroundColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
+  // Merge consecutive same color marks
+  let prevMark;
+  marks = marks.filter(mark => {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  const marksWithColor = marks.filter(mark => !!mark);
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : REMOVE_HIGHLIGHT_COLOR;
+};

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

@@ -1,29 +1,59 @@
-// import {
-//   ACTION,
-//   ACTION_SUBJECT,
-//   ACTION_SUBJECT_ID,
-//   EVENT_TYPE,
-// } from '@atlaskit/editor-common/analytics';
-
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { removeMark, toggleMark } from '@atlaskit/editor-common/mark';
+import { highlightColorPalette, REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
 import { HighlightPluginAction, highlightPluginKey } from '../pm-plugin';
-export var changeColor = function changeColor(_editorAnalyticsAPI) {
+import { getActiveColor } from '../utils/color';
+export var changeColor = function changeColor(editorAnalyticsAPI) {
   return function (_ref) {
     var color = _ref.color;
     return function (_ref2) {
       var tr = _ref2.tr;
+      var backgroundColor = tr.doc.type.schema.marks.backgroundColor;
+      if (!backgroundColor) {
+        return null;
+      }
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(createAnalyticsEvent(color, tr))(tr);
       tr.setMeta(highlightPluginKey, {
         type: HighlightPluginAction.CHANGE_COLOR,
         color: color
       });
-
-      // editorAnalyticsAPI?.attachAnalyticsEvent({
-      //   action: ACTION.FORMATTED,
-      //   actionSubject: ACTION_SUBJECT.TEXT,
-      //   actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
-      //   eventType: EVENT_TYPE.TRACK,
-      // })(tr);
-
+      tr.scrollIntoView();
+      if (color === REMOVE_HIGHLIGHT_COLOR) {
+        removeMark(backgroundColor)({
+          tr: tr
+        });
+      } else {
+        toggleMark(backgroundColor, {
+          color: color
+        })({
+          tr: tr
+        });
+      }
       return tr;
     };
   };
+};
+var createAnalyticsEvent = function createAnalyticsEvent(color, tr) {
+  var previousColor = getActiveColor(tr);
+  // get color names from palette
+  var newColorFromPalette = highlightColorPalette.find(function (_ref3) {
+    var value = _ref3.value;
+    return value === color;
+  });
+  var previousColorFromPalette = highlightColorPalette.find(function (_ref4) {
+    var value = _ref4.value;
+    return value === previousColor;
+  });
+  var newColorLabel = newColorFromPalette ? newColorFromPalette.label : color;
+  var previousColorLabel = previousColorFromPalette ? previousColorFromPalette.label : previousColor || '';
+  return {
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.TEXT,
+    actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newColor: newColorLabel.toLowerCase(),
+      previousColor: previousColorLabel.toLowerCase()
+    }
+  };
 };

package/dist/esm/ui/ToolbarHighlightColor.js

@@ -39,7 +39,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
     dispatchAnalyticsEvent === null || dispatchAnalyticsEvent === void 0 || dispatchAnalyticsEvent({
       action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
       actionSubject: ACTION_SUBJECT.TOOLBAR,
-      actionSubjectId: ACTION_SUBJECT_ID.HIGHLIGHT,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
       eventType: EVENT_TYPE.TRACK
     });
     setIsDropdownOpen(isOpen);
@@ -116,7 +116,7 @@ var ToolbarHighlightColor = function ToolbarHighlightColor(_ref) {
       isPopupPositioned: true
     },
     trigger: jsx(ToolbarButton, {
-      buttonId: TOOLBAR_BUTTON.HIGHLIGHT,
+      buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
       spacing: isToolbarReducedSpacing ? 'none' : 'default',
       disabled: disabled || highlightState.disabled,
       selected: isDropdownOpen,

package/dist/esm/utils/color.js

@@ -0,0 +1,42 @@
+import { REMOVE_HIGHLIGHT_COLOR } from '@atlaskit/editor-common/ui-color';
+export var getActiveColor = function getActiveColor(tr) {
+  var _ref = tr.selection,
+    $from = _ref.$from,
+    $to = _ref.$to,
+    $cursor = _ref.$cursor;
+  var _ref2 = tr.doc.type.schema.marks,
+    backgroundColor = _ref2.backgroundColor;
+
+  // Filter out other marks
+  var marks = [];
+  if ($cursor) {
+    marks.push(backgroundColor.isInSet(tr.storedMarks || $cursor.marks()) || undefined);
+  } else {
+    tr.doc.nodesBetween($from.pos, $to.pos, function (currentNode) {
+      if (currentNode.isLeaf) {
+        var mark = backgroundColor.isInSet(currentNode.marks) || undefined;
+        marks.push(mark);
+        return !mark;
+      }
+      return true;
+    });
+  }
+
+  // Merge consecutive same color marks
+  var prevMark;
+  marks = marks.filter(function (mark) {
+    if (mark && prevMark && mark.attrs.color === prevMark.attrs.color) {
+      return false;
+    }
+    prevMark = mark;
+    return true;
+  });
+  var marksWithColor = marks.filter(function (mark) {
+    return !!mark;
+  });
+  // When multiple colors are selected revert back to default color
+  if (marksWithColor.length > 1 || marksWithColor.length === 1 && marks.length > 1) {
+    return null;
+  }
+  return marksWithColor.length ? marksWithColor[0].attrs.color : REMOVE_HIGHLIGHT_COLOR;
+};

package/dist/types/commands/change-color.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand } from '@atlaskit/editor-common/types';
-export declare const changeColor: (_editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
+export declare const changeColor: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
     color: string;
 }) => EditorCommand;

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

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const getActiveColor: (tr: Transaction) => string | null;

package/dist/types-ts4.5/commands/change-color.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand } from '@atlaskit/editor-common/types';
-export declare const changeColor: (_editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
+export declare const changeColor: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => ({ color }: {
     color: string;
 }) => EditorCommand;

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

@@ -0,0 +1,2 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const getActiveColor: (tr: Transaction) => string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-highlight",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Highlight plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -39,14 +39,14 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^36.3.0",
-    "@atlaskit/editor-common": "^80.1.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
-    "@atlaskit/editor-plugin-text-formatting": "^1.5.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.0.0",
+    "@atlaskit/primitives": "^6.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },