@atlaskit/editor-core 187.31.1 → 187.31.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.31.3
+
+### Patch Changes
+
+- [`0debfab882f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0debfab882f) - ED-17959 prevent redundant rerenders on insert block component and due to typeahead state changes
+
+## 187.31.2
+
+### Patch Changes
+
+- [`dbccd831543`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbccd831543) - [ux] tokenize ColorPicker, make charts package compatible with tokens, make check mark compatible with tokens
+
 ## 187.31.1
 
 ### Patch Changes

package/dist/cjs/plugins/insert-block/index.js

@@ -34,15 +34,6 @@ var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
       return 0;
   }
 };
-/**
- * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
- * @param name Block name
- */
-function handleInsertBlockType(editorAnalyticsApi) {
-  return function (name) {
-    return (0, _commands.insertBlockTypesWithAnalytics)(name, _analytics.INPUT_METHOD.TOOLBAR, editorAnalyticsApi);
-  };
-}
 var insertBlockPlugin = function insertBlockPlugin() {
   var _api$dependencies, _api$dependencies$fea;
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -68,6 +59,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
         return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
           plugins: {
             typeAheadState: _key.pluginKey,
+            // needed to check isTypeAheadAllowed in ToolbarInsertBlock
             blockTypeState: _main.pluginKey,
             mediaState: _pluginKey.stateKey,
             macroState: _pluginKey3.pluginKey,
@@ -115,7 +107,7 @@ var insertBlockPlugin = function insertBlockPlugin() {
   };
 };
 function ToolbarInsertBlockWithInjectionApi(_ref3) {
-  var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+  var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
   var editorView = _ref3.editorView,
     editorActions = _ref3.editorActions,
     dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
@@ -143,6 +135,15 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     imageUploadState = _useSharedPluginState.imageUploadState,
     mentionState = _useSharedPluginState.mentionState,
     emojiState = _useSharedPluginState.emojiState;
+
+  /**
+   * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
+   * @param name Block name
+   */
+  var handleInsertBlockType = _react.default.useCallback(function (name) {
+    var _pluginInjectionApi$d;
+    return (0, _commands.insertBlockTypesWithAnalytics)(name, _analytics.INPUT_METHOD.TOOLBAR, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions]);
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -164,7 +165,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     mediaSupported: !!mediaState,
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.dependencies.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
-    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.startUpload,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions.startUpload,
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
@@ -172,7 +173,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     emojiProvider: providers.emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
-    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions),
+    onInsertBlockType: handleInsertBlockType,
     onInsertMacroFromMacroBrowser: _macro.insertMacroFromMacroBrowser,
     macroProvider: macroState.macroProvider,
     popupsMountPoint: popupsMountPoint,

package/dist/cjs/plugins/type-ahead/pm-plugins/reducer.js

@@ -144,6 +144,11 @@ var createReducer = function createReducer(_ref) {
       var mappedDecorationSet = decorationSet.map(tr.mapping, tr.doc, {
         onRemove: onRemove
       });
+
+      // return same pluginState if decorationSet did not change
+      if (mappedDecorationSet === currentPluginState.decorationSet) {
+        return currentPluginState;
+      }
       return _objectSpread(_objectSpread({}, currentPluginState), {}, {
         decorationSet: mappedDecorationSet
       });

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _form = require("@atlaskit/form");
-var _editorPalette = require("@atlaskit/editor-palette");
 var _common = require("../../../ui/ColorPalette/Palettes/common");
 var _utils = require("../utils");
 var _RequiredIndicator = require("./common/RequiredIndicator");
@@ -31,105 +30,105 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var colorPalette = [{
   label: 'Light Blue',
-  value: '#7AB2FFFF'
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
 },
 // 400
 {
   label: 'Light Green',
-  value: '#6BE1B0FF'
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
 },
 // 400
 {
   label: 'Light Yellow',
-  value: '#FFDB57FF'
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
 },
 // 400
 {
   label: 'Light Red',
-  value: '#FF8F73FF'
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
 },
 // 400
 {
   label: 'Light Purple',
-  value: '#B5A7FBFF'
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
 },
 // 400
 
 {
   label: 'Blue',
-  value: '#247FFFFF'
+  value: "var(--ds-chart-blue-bold, #247FFF)"
 },
 // 600
 {
   label: 'Green',
-  value: '#23A971FF'
+  value: "var(--ds-chart-green-bold, #23A971)"
 },
 // 600
 {
   label: 'Yellow',
-  value: '#FFBE33FF'
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
 },
 // 600
 {
   label: 'Red',
-  value: '#FC552CFF'
+  value: "var(--ds-chart-red-bold, #FC552C)"
 },
 // 600
 {
   label: 'Purple',
-  value: '#8B77EEFF'
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
 },
 // 600
 
 {
   label: 'Dark Blue',
-  value: '#0055CCFF'
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
 },
 // 800
 {
   label: 'Dark Green',
-  value: '#177D52FF'
+  value: "var(--ds-chart-green-bolder, #177D52)"
 },
 // 800
 {
   label: 'Dark Yellow',
-  value: '#FF9D00FF'
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
 },
 // 800
 {
   label: 'Dark Red',
-  value: '#D32D03FF'
+  value: "var(--ds-chart-red-bolder, #D32D03)"
 },
 // 800
 {
   label: 'Dark Purple',
-  value: '#5A43D0FF'
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
 },
 // 800
 
 {
   label: 'Darker Blue',
-  value: '#003884FF'
+  value: "var(--ds-chart-blue-boldest, #003884)"
 },
 // 1000
 {
   label: 'Darker Green',
-  value: '#055C3FFF'
+  value: "var(--ds-chart-green-boldest, #055C3F)"
 },
 // 1000
 {
   label: 'Darker Yellow',
-  value: '#946104FF'
+  value: "var(--ds-chart-yellow-boldest, #946104)"
 },
 // 1000
 {
   label: 'Darker Red',
-  value: '#A32000FF'
+  value: "var(--ds-chart-red-boldest, #A32000)"
 },
 // 1000
 {
   label: 'Darker Purple',
-  value: '#44368BFF'
+  value: "var(--ds-chart-purple-boldest, #44368B)"
 } // 1000
 ].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
@@ -144,185 +143,185 @@ var colorPalette = [{
 exports.colorPalette = colorPalette;
 var extendedColorPalette = [{
   label: 'Darker Blue',
-  value: '#003884'
+  value: "var(--ds-chart-blue-boldest, #003884)"
 },
 // 1000
 {
   label: 'Darker Teal',
-  value: '#206B74'
+  value: "var(--ds-chart-teal-boldest, #206B74)"
 },
 // 1000
 {
   label: 'Darker Green',
-  value: '#055C3F'
+  value: "var(--ds-chart-green-boldest, #055C3F)"
 },
 // 1000
 {
   label: 'Darker Yellow',
-  value: '#946104'
+  value: "var(--ds-chart-yellow-boldest, #946104)"
 },
 // 1000
 {
   label: 'Darker Orange',
-  value: '#974F0C'
+  value: "var(--ds-chart-orange-boldest, #974F0C)"
 },
 // 1000
 {
   label: 'Darker Red',
-  value: '#A32000'
+  value: "var(--ds-chart-red-boldest, #A32000)"
 },
 // 1000
 {
   label: 'Darker Magenta',
-  value: '#943D73'
+  value: "var(--ds-chart-magenta-boldest, #943D73)"
 },
 // 1000
 {
   label: 'Darker Purple',
-  value: '#44368B'
+  value: "var(--ds-chart-purple-boldest, #44368B)"
 },
 // 1000
 {
   label: 'Darker Gray',
-  value: '#44546F'
+  value: "var(--ds-chart-gray-boldest, #44546F)"
 },
 // 1000
 
 {
   label: 'Dark Blue',
-  value: '#0055CC'
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
 },
 // 800
 {
   label: 'Dark Teal',
-  value: '#1D7F8C'
+  value: "var(--ds-chart-teal-bolder, #1D7F8C)"
 },
 // 800
 {
   label: 'Dark Green',
-  value: '#177D52'
+  value: "var(--ds-chart-green-bolder, #177D52)"
 },
 // 800
 {
   label: 'Dark Yellow',
-  value: '#FF9D00'
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
 },
 // 800
 {
   label: 'Dark Orange',
-  value: '#B65C02'
+  value: "var(--ds-chart-orange-bolder, #B65C02)"
 },
 // 800
 {
   label: 'Dark Red',
-  value: '#D32D03'
+  value: "var(--ds-chart-red-bolder, #D32D03)"
 },
 // 800
 {
   label: 'Dark Magenta',
-  value: '#CD519D'
+  value: "var(--ds-chart-magenta-bolder, #CD519D)"
 },
 // 800
 {
   label: 'Dark Purple',
-  value: '#5A43D0'
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
 },
 // 800
 {
   label: 'Dark Gray',
-  value: '#758195'
+  value: "var(--ds-chart-gray-bolder, #758195)"
 },
 // 800
 
 {
   label: 'Blue',
-  value: '#247FFF'
+  value: "var(--ds-chart-blue-bold, #247FFF)"
 },
 // 600
 {
   label: 'Teal',
-  value: '#1D9AAA'
+  value: "var(--ds-chart-teal-bold, #1D9AAA)"
 },
 // 600
 {
   label: 'Green',
-  value: '#23A971'
+  value: "var(--ds-chart-green-bold, #23A971)"
 },
 // 600
 {
   label: 'Yellow',
-  value: '#FFBE33'
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
 },
 // 600
 {
   label: 'Orange',
-  value: '#D97008'
+  value: "var(--ds-chart-orange-bold, #D97008)"
 },
 // 600
 {
   label: 'Red',
-  value: '#FC552C'
+  value: "var(--ds-chart-red-bold, #FC552C)"
 },
 // 600
 {
   label: 'Magenta',
-  value: '#DA62AC'
+  value: "var(--ds-chart-magenta-bold, #DA62AC)"
 },
 // 600
 {
   label: 'Purple',
-  value: '#8B77EE'
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
 },
 // 600
 {
   label: 'Gray',
-  value: '#8590A2'
+  value: "var(--ds-chart-gray-bold, #8590A2)"
 },
 // 600
 
 {
   label: 'Light Blue',
-  value: '#7AB2FF'
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
 },
 // 400
 {
   label: 'Light Teal',
-  value: '#60C6D2'
+  value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
 },
 // 400
 {
   label: 'Light Green',
-  value: '#6BE1B0'
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
 },
 // 400
 {
   label: 'Light Yellow',
-  value: '#FFDB57'
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
 },
 // 400
 {
   label: 'Light Orange',
-  value: '#FAA53D'
+  value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
 },
 // 400
 {
   label: 'Light Red',
-  value: '#FF8F73'
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
 },
 // 400
 {
   label: 'Light Magenta',
-  value: '#E774BB'
+  value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
 },
 // 400
 {
   label: 'Light Purple',
-  value: '#B5A7FB'
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
 },
 // 400
 {
   label: 'Light Gray',
-  value: '#8993A5'
+  value: "var(--ds-background-accent-gray-subtle, #8993A5)"
 } // 400
 ].map(function (color) {
   return _objectSpread(_objectSpread({}, color), {}, {
@@ -355,16 +354,10 @@ var ColorPicker = function ColorPicker(props) {
     useSomewhatSemanticTextColorNames = _ref.useSomewhatSemanticTextColorNames,
     expandedChartColors = _ref.expandedChartColors;
   return expandedChartColors ? (0, _react.jsx)(_ColorPickerButton.default, {
-    title: title
-    // Original color palette had hex code with alpha channel.
-    // However, alpha channel was always FF, and it was not used
-    // Expanded color palette does not have alpha channel, so
-    //  removing last two characters from hex code with alpha here.
-    ,
-    currentColor: currentColor.substring(0, 7),
+    title: title,
+    currentColor: currentColor,
     onChange: onColorChange,
     colorPalette: extendedColorPalette,
-    hexToPaletteColor: _editorPalette.hexToEditorTableChartsPaletteColor,
     paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages
     // We did not want to create new FF or update
     //  useSomewhatSemanticTextColorNames name

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.31.1";
+var version = "187.31.3";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/insert-block/index.js

@@ -27,13 +27,6 @@ const toolbarSizeToButtons = toolbarSize => {
       return 0;
   }
 };
-/**
- * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
- * @param name Block name
- */
-function handleInsertBlockType(editorAnalyticsApi) {
-  return name => insertBlockTypesWithAnalytics(name, INPUT_METHOD.TOOLBAR, editorAnalyticsApi);
-}
 const insertBlockPlugin = (options = {}, api) => {
   var _api$dependencies, _api$dependencies$fea;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
@@ -58,6 +51,7 @@ const insertBlockPlugin = (options = {}, api) => {
         return /*#__PURE__*/React.createElement(WithPluginState, {
           plugins: {
             typeAheadState: typeAheadPluginKey,
+            // needed to check isTypeAheadAllowed in ToolbarInsertBlock
             blockTypeState: blockTypeStateKey,
             mediaState: mediaStateKey,
             macroState: macroStateKey,
@@ -124,7 +118,7 @@ function ToolbarInsertBlockWithInjectionApi({
   layoutState,
   featureFlags
 }) {
-  var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+  var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
   const buttons = toolbarSizeToButtons(toolbarSize);
   const {
     dateState,
@@ -133,6 +127,15 @@ function ToolbarInsertBlockWithInjectionApi({
     mentionState,
     emojiState
   } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']);
+
+  /**
+   * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
+   * @param name Block name
+   */
+  const handleInsertBlockType = React.useCallback(name => {
+    var _pluginInjectionApi$d;
+    return insertBlockTypesWithAnalytics(name, INPUT_METHOD.TOOLBAR, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions]);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,
@@ -154,7 +157,7 @@ function ToolbarInsertBlockWithInjectionApi({
     mediaSupported: !!mediaState,
     imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.dependencies.imageUpload),
     imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
-    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions.startUpload,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.imageUpload) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions.startUpload,
     availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
     linkSupported: !!hyperlinkState,
     linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
@@ -162,7 +165,7 @@ function ToolbarInsertBlockWithInjectionApi({
     emojiProvider: providers.emojiProvider,
     nativeStatusSupported: options.nativeStatusSupported,
     horizontalRuleEnabled: options.horizontalRuleEnabled,
-    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions),
+    onInsertBlockType: handleInsertBlockType,
     onInsertMacroFromMacroBrowser: insertMacroFromMacroBrowser,
     macroProvider: macroState.macroProvider,
     popupsMountPoint: popupsMountPoint,

package/dist/es2019/plugins/type-ahead/pm-plugins/reducer.js

@@ -145,6 +145,11 @@ export const createReducer = ({
       const mappedDecorationSet = decorationSet.map(tr.mapping, tr.doc, {
         onRemove
       });
+
+      // return same pluginState if decorationSet did not change
+      if (mappedDecorationSet === currentPluginState.decorationSet) {
+        return currentPluginState;
+      }
       return {
         ...currentPluginState,
         decorationSet: mappedDecorationSet