@atlaskit/editor-core 187.3.6 → 187.4.2

package/dist/es2019/plugins/text-formatting/commands/text-formatting.js

@@ -1,7 +1,8 @@
 import { Selection } from 'prosemirror-state';
 import { applyMarkOnRange, toggleMark } from '../../../utils/commands';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, withAnalytics } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { hasCode, markActive } from '../utils';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 export const moveRight = () => {
   return (state, dispatch) => {
     const {
@@ -117,9 +118,9 @@ export const toggleEm = () => {
     return false;
   };
 };
-export const toggleEmWithAnalytics = ({
+export const toggleEmWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -139,9 +140,9 @@ export const toggleStrike = () => {
     return false;
   };
 };
-export const toggleStrikeWithAnalytics = ({
+export const toggleStrikeWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -161,9 +162,9 @@ export const toggleStrong = () => {
     return false;
   };
 };
-export const toggleStrongWithAnalytics = ({
+export const toggleStrongWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -183,9 +184,9 @@ export const toggleUnderline = () => {
     return false;
   };
 };
-export const toggleUnderlineWithAnalytics = ({
+export const toggleUnderlineWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -207,9 +208,9 @@ export const toggleSuperscript = () => {
     return false;
   };
 };
-export const toggleSuperscriptWithAnalytics = ({
+export const toggleSuperscriptWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -231,9 +232,9 @@ export const toggleSubscript = () => {
     return false;
   };
 };
-export const toggleSubscriptWithAnalytics = ({
+export const toggleSubscriptWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -253,9 +254,9 @@ export const toggleCode = () => {
     return false;
   };
 };
-export const toggleCodeWithAnalytics = ({
+export const toggleCodeWithAnalytics = editorAnalyticsAPI => ({
   inputMethod
-}) => withAnalytics({
+}) => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.FORMATTED,
   actionSubject: ACTION_SUBJECT.TEXT,
   eventType: EVENT_TYPE.TRACK,
@@ -288,8 +289,8 @@ const createInlineCodeFromTextInput = (from, to, text) => {
     return false;
   };
 };
-export const createInlineCodeFromTextInputWithAnalytics = (from, to, text) => {
-  return withAnalytics({
+export const createInlineCodeFromTextInputWithAnalytics = editorAnalyticsAPI => (from, to, text) => {
+  return withAnalytics(editorAnalyticsAPI, {
     action: ACTION.FORMATTED,
     actionSubject: ACTION_SUBJECT.TEXT,
     eventType: EVENT_TYPE.TRACK,

package/dist/es2019/plugins/text-formatting/index.js

@@ -37,7 +37,10 @@ const textFormatting = (options = {}, api) => ({
       name: 'textFormatting',
       plugin: ({
         dispatch
-      }) => textFormattingPlugin(dispatch)
+      }) => {
+        var _api$dependencies$ana;
+        return textFormattingPlugin(dispatch, api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
+      }
     }, {
       name: 'textFormattingCursor',
       plugin: () => textFormattingCursorPlugin
@@ -60,14 +63,17 @@ const textFormatting = (options = {}, api) => ({
     }, {
       name: 'textFormattingClearKeymap',
       plugin: () => {
-        var _api$dependencies$ana;
-        return clearFormattingKeymapPlugin(api === null || api === void 0 ? void 0 : (_api$dependencies$ana = api.dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : _api$dependencies$ana.actions);
+        var _api$dependencies$ana2;
+        return clearFormattingKeymapPlugin(api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions);
       }
     }, {
       name: 'textFormattingKeymap',
       plugin: ({
         schema
-      }) => keymapPlugin(schema)
+      }) => {
+        var _api$dependencies$ana3;
+        return keymapPlugin(schema, api === null || api === void 0 ? void 0 : (_api$dependencies$ana3 = api.dependencies.analytics) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.actions);
+      }
     }];
   },
   primaryToolbarComponent({
@@ -84,7 +90,7 @@ const textFormatting = (options = {}, api) => ({
         clearFormattingPluginState: clearFormattingPluginKey
       },
       render: () => {
-        var _api$dependencies$ana2;
+        var _api$dependencies$ana4;
         return /*#__PURE__*/React.createElement(Toolbar, {
           editorState: editorView.state,
           popupsMountPoint: popupsMountPoint,
@@ -94,7 +100,7 @@ const textFormatting = (options = {}, api) => ({
           editorView: editorView,
           isToolbarDisabled: disabled,
           shouldUseResponsiveToolbar: Boolean(options.responsiveToolbarMenu),
-          editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$dependencies$ana2 = api.dependencies.analytics) === null || _api$dependencies$ana2 === void 0 ? void 0 : _api$dependencies$ana2.actions
+          editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$dependencies$ana4 = api.dependencies.analytics) === null || _api$dependencies$ana4 === void 0 ? void 0 : _api$dependencies$ana4.actions
         });
       }
     });

package/dist/es2019/plugins/text-formatting/pm-plugins/keymap.js

@@ -2,40 +2,40 @@ import * as keymaps from '../../../keymaps';
 import { keymap } from '../../../utils/keymap';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import * as commands from '../commands/text-formatting';
-export default function keymapPlugin(schema) {
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
   const list = {};
   if (schema.marks.strong) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, commands.toggleStrongWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, commands.toggleStrongWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.em) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, commands.toggleEmWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, commands.toggleEmWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.code) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, commands.toggleCodeWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, commands.toggleCodeWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.strike) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, commands.toggleStrikeWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, commands.toggleStrikeWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.subsup) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, commands.toggleSubscriptWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, commands.toggleSubscriptWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.subsup) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, commands.toggleSuperscriptWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, commands.toggleSuperscriptWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }
   if (schema.marks.underline) {
-    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, commands.toggleUnderlineWithAnalytics({
+    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, commands.toggleUnderlineWithAnalytics(editorAnalyticsAPI)({
       inputMethod: INPUT_METHOD.SHORTCUT
     }), list);
   }

package/dist/es2019/plugins/text-formatting/pm-plugins/main.js

@@ -8,7 +8,7 @@ import * as commands from '../commands/text-formatting';
 import { anyMarkActive } from '../utils';
 import { pluginKey } from './plugin-key';
 export { pluginKey };
-const getTextFormattingState = editorState => {
+const getTextFormattingState = (editorState, editorAnalyticsAPI) => {
   const {
     em,
     code,
@@ -56,13 +56,13 @@ const getTextFormattingState = editorState => {
   }
   return state;
 };
-export const plugin = dispatch => new SafePlugin({
+export const plugin = (dispatch, editorAnalyticsAPI) => new SafePlugin({
   state: {
     init(_config, state) {
-      return getTextFormattingState(state);
+      return getTextFormattingState(state, editorAnalyticsAPI);
     },
     apply(_tr, pluginState, _oldState, newState) {
-      const state = getTextFormattingState(newState);
+      const state = getTextFormattingState(newState, editorAnalyticsAPI);
       if (!shallowEqual(pluginState, state)) {
         dispatch(pluginKey, state);
         return state;
@@ -100,7 +100,7 @@ export const plugin = dispatch => new SafePlugin({
         }
       } = state;
       if (parentNodeType.allowsMarkType(schema.marks.code)) {
-        return createInlineCodeFromTextInputWithAnalytics(from, to, text)(state, dispatch);
+        return createInlineCodeFromTextInputWithAnalytics(editorAnalyticsAPI)(from, to, text)(state, dispatch);
       }
       return false;
     }

package/dist/es2019/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -15,10 +15,10 @@ import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 const withToolbarInputMethod = func => func({
   inputMethod: INPUT_METHOD.TOOLBAR
 });
-const IconButtons = {
+const IconButtons = editorAnalyticsAPI => ({
   strong: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
-    command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleStrongWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
     component: () => jsx(BoldIcon, {
@@ -27,7 +27,7 @@ const IconButtons = {
   },
   em: {
     buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
-    command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleEmWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
     component: () => jsx(ItalicIcon, {
@@ -35,38 +35,39 @@ const IconButtons = {
     })
   },
   underline: {
-    command: withToolbarInputMethod(commands.toggleUnderlineWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.underline,
     tooltipKeymap: toggleUnderline
   },
   strike: {
-    command: withToolbarInputMethod(commands.toggleStrikeWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleStrikeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.strike,
     tooltipKeymap: toggleStrikethrough
   },
   code: {
-    command: withToolbarInputMethod(commands.toggleCodeWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleCodeWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.code,
     tooltipKeymap: toggleCode
   },
   subscript: {
-    command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.subscript,
     tooltipKeymap: toggleSubscript
   },
   superscript: {
-    command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics),
+    command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
     message: toolbarMessages.superscript,
     tooltipKeymap: toggleSuperscript
   }
-};
+});
 const getIcon = ({
   iconType,
   isDisabled,
   isActive,
-  intl
+  intl,
+  editorAnalyticsAPI
 }) => {
-  const icon = IconButtons[iconType];
+  const icon = IconButtons(editorAnalyticsAPI)[iconType];
   const content = intl.formatMessage(icon.message);
   const {
     tooltipKeymap
@@ -128,7 +129,7 @@ const buildMenuIconState = iconMark => ({
     hasSchemaMark
   };
 };
-const buildIcon = iconMark => {
+const buildIcon = (iconMark, editorAnalyticsAPI) => {
   const getState = buildMenuIconState(iconMark);
   return ({
     schema,
@@ -150,19 +151,13 @@ const buildIcon = iconMark => {
       iconType: IconTypes[iconMark],
       isDisabled: isToolbarDisabled || isDisabled,
       isActive,
-      intl
+      intl,
+      editorAnalyticsAPI
     }), [isToolbarDisabled, isDisabled, isActive, intl]);
     const shouldRenderIcon = hasSchemaMark && !isHidden;
     return useMemo(() => shouldRenderIcon ? iconComponent : null, [shouldRenderIcon, iconComponent]);
   };
 };
-const buildStrongIcon = buildIcon(IconTypes.strong);
-const buildEmIcon = buildIcon(IconTypes.em);
-const buildUnderlineIcon = buildIcon(IconTypes.underline);
-const buildStrikeIcon = buildIcon(IconTypes.strike);
-const buildCodeIcon = buildIcon(IconTypes.code);
-const buildSubscriptIcon = buildIcon(IconTypes.subscript);
-const buildSuperscriptIcon = buildIcon(IconTypes.superscript);
 const useTextFormattingPluginState = editorState => useMemo(() => {
   const pluginState = textFormattingPluginKey.getState(editorState);
 
@@ -172,7 +167,8 @@ const useTextFormattingPluginState = editorState => useMemo(() => {
 export const useFormattingIcons = ({
   isToolbarDisabled,
   editorState,
-  intl
+  intl,
+  editorAnalyticsAPI
 }) => {
   const textFormattingPluginState = useTextFormattingPluginState(editorState);
   const {
@@ -184,6 +180,13 @@ export const useFormattingIcons = ({
     intl,
     isToolbarDisabled: Boolean(isToolbarDisabled)
   };
+  const buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI);
+  const buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI);
+  const buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI);
+  const buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI);
+  const buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI);
+  const buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI);
+  const buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI);
   const strongIcon = buildStrongIcon(props);
   const emIcon = buildEmIcon(props);
   const underlineIcon = buildUnderlineIcon(props);

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -31,7 +31,8 @@ const ToolbarFormatting = ({
   const defaultIcons = useFormattingIcons({
     editorState,
     intl,
-    isToolbarDisabled
+    isToolbarDisabled,
+    editorAnalyticsAPI
   });
   const clearIcon = useClearIcon({
     editorState,

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -6,7 +6,7 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/ed
 import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
-import { DN50, N0, N60A } from '@atlaskit/theme/colors';
+import { DN50, N0, N60A, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import ColorPalette from '../ColorPalette';
@@ -39,7 +39,6 @@ const colorPickerWrapper = theme => css`
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const ColorPickerButton = props => {
-  var _props$size, _props$size2, _props$size3;
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
   const [isPopupPositioned, setIsPopupPositioned] = React.useState(false);
@@ -156,11 +155,13 @@ const ColorPickerButton = props => {
   };
   const title = props.title || '';
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  const buttonStyle = css`
+  const buttonStyle = theme => {
+    var _props$size, _props$size2, _props$size3;
+    return css`
     padding: 0 10px;
-    background-color: ${"var(--ds-background-neutral, transparent)"};
+    background-color: ${"var(--ds-background-neutral-subtle, transparent)"};
     ${
-  /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
+    /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
     &:before {
       display: flex;
       justify-content: center;
@@ -175,7 +176,14 @@ const ColorPickerButton = props => {
       padding: 0;
       margin: 0px 2px;
     }
+    &:hover {
+      background: ${themed({
+      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+    })(theme)};
+    }
   `;
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {

package/dist/es2019/version-wrapper.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.3.6",
+	"version": "187.4.2",
 	"sideEffects": false
 }