@atlaskit/editor-core 187.28.2 → 187.28.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.28.5
+
+### Patch Changes
+
+- [`5ce0bea6aa6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5ce0bea6aa6) - [ED-19399] Fixing text color underline on toolbar
+
+## 187.28.3
+
+### Patch Changes
+
+- [`6cced3b0ed6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6cced3b0ed6) - Warn if the emoji provider prop for the Editor is changing too quickly as it will cause performance issues.
+
 ## 187.28.2
 
 ### Patch Changes

package/dist/cjs/plugins/emoji/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 exports.createEmojiPlugin = createEmojiPlugin;
+exports.createRateLimitReachedFunction = createRateLimitReachedFunction;
 exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.emojiPlugin = exports.defaultListLimit = void 0;
 exports.getEmojiPluginState = getEmojiPluginState;
 exports.memoize = memoize;
@@ -268,7 +269,44 @@ var setAsciiMap = function setAsciiMap(asciiMap) {
     return true;
   };
 };
-var setProvider = function setProvider(provider) {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  var lastCallTime = 0;
+  var callCount = 0;
+  return function wrappedFn() {
+    var now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn.apply(void 0, arguments);
+  };
+}
+
+// At this stage console.error only
+var logRateWarning = function logRateWarning() {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+var setProvider = createRateLimitReachedFunction(function (provider) {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(emojiPluginKey, {
@@ -280,7 +318,11 @@ var setProvider = function setProvider(provider) {
     }
     return true;
   };
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 exports.setProvider = setProvider;
 var emojiPluginKey = new _state.PluginKey('emojiPlugin');
 exports.emojiPluginKey = emojiPluginKey;
@@ -335,15 +377,18 @@ function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(function (provider) {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(function (asciiMap) {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
             }).catch(function () {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
             });
             break;
         }

package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -181,7 +181,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         // Not sure where the extra 2px comes from
         fitWidth = 242;
       }
-      var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      var selectedColor = this.getSelectedColor(pluginState);
       var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(palette, pluginState.color),
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
@@ -246,6 +246,12 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         css: _styles2.separatorStyles
       }));
     }
+  }, {
+    key: "getSelectedColor",
+    value: function getSelectedColor(pluginState) {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? (0, _editorPalette.hexToEditorTextPaletteColor)(pluginState.color) : pluginState.color);
+      return selectedColor;
+    }
   }, {
     key: "getCommonAnalyticsAttributes",
     value: function getCommonAnalyticsAttributes() {

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.28.2";
+var version = "187.28.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/emoji/index.js

@@ -241,7 +241,44 @@ const setAsciiMap = asciiMap => (state, dispatch) => {
   }
   return true;
 };
-export const setProvider = provider => (state, dispatch) => {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  let lastCallTime = 0;
+  let callCount = 0;
+  return function wrappedFn(...args) {
+    const now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn(...args);
+  };
+}
+
+// At this stage console.error only
+const logRateWarning = () => {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+export const setProvider = createRateLimitReachedFunction(provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(emojiPluginKey, {
       action: ACTIONS.SET_PROVIDER,
@@ -251,7 +288,11 @@ export const setProvider = provider => (state, dispatch) => {
     }));
   }
   return true;
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 export const emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
@@ -307,14 +348,19 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(provider => {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(asciiMap => {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
-            }).catch(() => setProvider(undefined)(editorView.state, editorView.dispatch));
+            }).catch(() => {
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
+            });
             break;
         }
         return;

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -159,7 +159,7 @@ export class ToolbarTextColor extends React.Component {
       // Not sure where the extra 2px comes from
       fitWidth = 242;
     }
-    const selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+    const selectedColor = this.getSelectedColor(pluginState);
     const {
       selectedRowIndex,
       selectedColumnIndex
@@ -223,6 +223,10 @@ export class ToolbarTextColor extends React.Component {
       css: separatorStyles
     }));
   }
+  getSelectedColor(pluginState) {
+    const selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? hexToEditorTextPaletteColor(pluginState.color) : pluginState.color);
+    return selectedColor;
+  }
   getCommonAnalyticsAttributes() {
     return {
       experiment: EXPERIMENT_NAME,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.28.2";
+export const version = "187.28.5";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/emoji/index.js

@@ -253,7 +253,44 @@ var setAsciiMap = function setAsciiMap(asciiMap) {
     return true;
   };
 };
-export var setProvider = function setProvider(provider) {
+
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export function createRateLimitReachedFunction(fn, limitTime, limitCount, onLimitReached) {
+  var lastCallTime = 0;
+  var callCount = 0;
+  return function wrappedFn() {
+    var now = Date.now();
+    if (now - lastCallTime < limitTime) {
+      if (++callCount > limitCount) {
+        onLimitReached === null || onLimitReached === void 0 ? void 0 : onLimitReached();
+      }
+    } else {
+      lastCallTime = now;
+      callCount = 1;
+    }
+    return fn.apply(void 0, arguments);
+  };
+}
+
+// At this stage console.error only
+var logRateWarning = function logRateWarning() {
+  if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line no-console
+    console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
+  }
+};
+export var setProvider = createRateLimitReachedFunction(function (provider) {
   return function (state, dispatch) {
     if (dispatch) {
       dispatch(state.tr.setMeta(emojiPluginKey, {
@@ -265,7 +302,11 @@ export var setProvider = function setProvider(provider) {
     }
     return true;
   };
-};
+},
+// If we change the emoji provider more than three times every 5 seconds we should warn.
+// This seems like a really long time but the performance can be that laggy that we don't
+// even get 3 events in 3 seconds and miss this indicator.
+5000, 3, logRateWarning);
 export var emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
@@ -318,15 +359,18 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
             }
             providerPromise.then(function (provider) {
-              setProvider(provider)(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              setProvider === null || setProvider === void 0 ? void 0 : (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(function (asciiMap) {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
             }).catch(function () {
-              return setProvider(undefined)(editorView.state, editorView.dispatch);
+              var _setProvider3;
+              return setProvider === null || setProvider === void 0 ? void 0 : (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
             });
             break;
         }

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -171,7 +171,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         // Not sure where the extra 2px comes from
         fitWidth = 242;
       }
-      var selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+      var selectedColor = this.getSelectedColor(pluginState);
       var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(palette, pluginState.color),
         selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
         selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
@@ -236,6 +236,12 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         css: separatorStyles
       }));
     }
+  }, {
+    key: "getSelectedColor",
+    value: function getSelectedColor(pluginState) {
+      var selectedColor = pluginState.color !== pluginState.defaultColor && (pluginState.color ? hexToEditorTextPaletteColor(pluginState.color) : pluginState.color);
+      return selectedColor;
+    }
   }, {
     key: "getCommonAnalyticsAttributes",
     value: function getCommonAnalyticsAttributes() {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.28.2";
+export var version = "187.28.5";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/emoji/index.d.ts

@@ -31,7 +31,20 @@ export declare const ACTIONS: {
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
 };
-export declare const setProvider: (provider?: EmojiProvider) => Command;
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export declare function createRateLimitReachedFunction<LimitedFunction extends (...args: any[]) => any>(fn: Function, limitTime: number, limitCount: number, onLimitReached: () => void): (...args: Parameters<LimitedFunction>) => ReturnType<LimitedFunction> | undefined;
+export declare const setProvider: ((provider?: EmojiProvider) => Command) | undefined;
 export declare const emojiPluginKey: PluginKey<EmojiPluginState>;
 export declare function getEmojiPluginState(state: EditorState): EmojiPluginState;
 export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams): SafePlugin<EmojiPluginState>;

package/dist/types/plugins/text-color/ui/ToolbarTextColor/index.d.ts

@@ -40,6 +40,7 @@ export declare class ToolbarTextColor extends React.Component<Props & WrappedCom
     private handleOpenChange;
     private hide;
     private hideonEsc;
+    private getSelectedColor;
     private getCommonAnalyticsAttributes;
     private buildAnalyticsPalette;
     private buildAnalyticsSelectColor;

package/dist/types-ts4.5/plugins/emoji/index.d.ts

@@ -34,7 +34,20 @@ export declare const ACTIONS: {
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
 };
-export declare const setProvider: (provider?: EmojiProvider) => Command;
+/**
+ *
+ * Wrapper to call `onLimitReached` when a specified number of calls of that function
+ * have been made within a time period.
+ *
+ * Note: It does not rate limit
+ *
+ * @param fn Function to wrap
+ * @param limitTime Time limit in milliseconds
+ * @param limitCount Number of function calls before `onRateReached` is called (per time period)
+ * @returns Wrapped function
+ */
+export declare function createRateLimitReachedFunction<LimitedFunction extends (...args: any[]) => any>(fn: Function, limitTime: number, limitCount: number, onLimitReached: () => void): (...args: Parameters<LimitedFunction>) => ReturnType<LimitedFunction> | undefined;
+export declare const setProvider: ((provider?: EmojiProvider) => Command) | undefined;
 export declare const emojiPluginKey: PluginKey<EmojiPluginState>;
 export declare function getEmojiPluginState(state: EditorState): EmojiPluginState;
 export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams): SafePlugin<EmojiPluginState>;

package/dist/types-ts4.5/plugins/text-color/ui/ToolbarTextColor/index.d.ts

@@ -40,6 +40,7 @@ export declare class ToolbarTextColor extends React.Component<Props & WrappedCom
     private handleOpenChange;
     private hide;
     private hideonEsc;
+    private getSelectedColor;
     private getCommonAnalyticsAttributes;
     private buildAnalyticsPalette;
     private buildAnalyticsSelectColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.28.2",
+  "version": "187.28.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"