@atlaskit/editor-common 72.7.3 → 72.9.0

package/dist/esm/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -247,6 +247,202 @@ export var backgroundPaletteTooltipMessages = {
   light: lightBackgroundPaletteTooltipMessages,
   dark: darkBackgroundPaletteTooltipMessages
 };
+export var lightChartsColorPaletteTooltipMessages = defineMessages({
+  // Blue color
+  '#7AB2FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#247FFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#0055CC': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#003884': {
+    id: 'fabric.theme.bolder-blue',
+    defaultMessage: 'Bolder blue',
+    description: 'Name of a color'
+  },
+  // Teal color
+  '#60C6D2': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#1D9AAA': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#1D7F8C': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#206B74': {
+    id: 'fabric.theme.bolder-teal',
+    defaultMessage: 'Bolder teal',
+    description: 'Name of a color'
+  },
+  // Green color
+  '#6BE1B0': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#23A971': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#177D52': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#055C3F': {
+    id: 'fabric.theme.bolder-green',
+    defaultMessage: 'Bolder green',
+    description: 'Name of a color'
+  },
+  // Yellow color
+  '#FFDB57': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBE33': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF9D00': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'Name of a color'
+  },
+  '#946104': {
+    id: 'fabric.theme.bolder-yellow',
+    defaultMessage: 'Bolder yellow',
+    description: 'Name of a color'
+  },
+  // Red color
+  '#FF8F73': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#FC552C': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color.'
+  },
+  '#D32D03': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#A32000': {
+    id: 'fabric.theme.bolder-red',
+    defaultMessage: 'Bolder red',
+    description: 'Name of a color'
+  },
+  // Orange color
+  '#FAA53D': {
+    id: 'fabric.theme.subtle-orange',
+    defaultMessage: 'Subtle orange',
+    description: 'Name of a color'
+  },
+  '#D97008': {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'Name of a color.'
+  },
+  '#B65C02': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color'
+  },
+  '#974F0C': {
+    id: 'fabric.theme.bolder-orange',
+    defaultMessage: 'Bolder orange',
+    description: 'Name of a color'
+  },
+  // Magenta color
+  '#E774BB': {
+    id: 'fabric.theme.subtle-magenta',
+    defaultMessage: 'Subtle magenta',
+    description: 'Name of a color'
+  },
+  '#DA62AC': {
+    id: 'fabric.theme.magenta',
+    defaultMessage: 'Magenta',
+    description: 'Name of a color'
+  },
+  '#CD519D': {
+    id: 'fabric.theme.bold-magenta',
+    defaultMessage: 'Bold magenta',
+    description: 'Name of a color'
+  },
+  '#943D73': {
+    id: 'fabric.theme.bolder-magenta',
+    defaultMessage: 'Bolder magenta',
+    description: 'Name of a color'
+  },
+  // Purple color
+  '#B5A7FB': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#8B77EE': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#5A43D0': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#44368B': {
+    id: 'fabric.theme.bolder-purple',
+    defaultMessage: 'Bolder purple',
+    description: 'Name of a color'
+  },
+  // Gray color
+  '#8993A5': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#8590A2': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#758195': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  },
+  '#44546F': {
+    id: 'fabric.theme.bolder-gray',
+    defaultMessage: 'Bolder gray',
+    description: 'Name of a color'
+  }
+});
+var darkChartsColorPaletteTooltipMessages = _objectSpread({}, lightChartsColorPaletteTooltipMessages);
+export var chartsColorPaletteTooltipMessages = {
+  light: lightChartsColorPaletteTooltipMessages,
+  dark: darkChartsColorPaletteTooltipMessages
+};
 var lightBorderPaletteTooltipMessages = defineMessages({
   '#091E4224': {
     id: 'fabric.theme.subtle-gray',

package/dist/esm/ui-color/index.js

@@ -6,6 +6,6 @@ export { default as colorPaletteMessages } from './ColorPalette/Palettes/palette
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
 export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
-export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
 export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
 export { default as borderColorPalette } from './ColorPalette/Palettes/borderColorPalette';

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js

@@ -1,4 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useLayoutEffect, useRef, useState } from 'react';
 /**
  * This component is a wrapper for color picker which listens to keydown events of children
  * and handles arrow key navigation
@@ -10,10 +11,14 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
     isOpenedByKeyboard = _ref.isOpenedByKeyboard,
     isPopupPositioned = _ref.isPopupPositioned,
     handleClose = _ref.handleClose,
-    closeOnTab = _ref.closeOnTab;
+    closeOnTab = _ref.closeOnTab,
+    editorRef = _ref.editorRef;
   var wrapperRef = useRef(null);
   var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
   var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
+  var _useState = useState(editorRef.current),
+    _useState2 = _slicedToArray(_useState, 1),
+    listenerTargetElement = _useState2[0];
   var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
     if (currentSelectedRowIndex.current === rowElements.length - 1) {
       currentSelectedRowIndex.current = 0;
@@ -96,7 +101,7 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     // set focus to current selected color swatch if only opened by keyboard
     if (isOpenedByKeyboard && isPopupPositioned) {
       // Using timeout because, we need to wait till color palette is rendered
@@ -107,9 +112,9 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
       });
     }
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab]);
+  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -10,12 +10,16 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
     disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
     keyDownHandlerContext = _ref.keyDownHandlerContext,
     closeOnTab = _ref.closeOnTab,
-    onSelection = _ref.onSelection;
+    onSelection = _ref.onSelection,
+    editorRef = _ref.editorRef;
   var wrapperRef = useRef(null);
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     currentSelectedItemIndex = _useState2[0],
     setCurrentSelectedItemIndex = _useState2[1];
+  var _useState3 = useState(editorRef.current),
+    _useState4 = _slicedToArray(_useState3, 1),
+    listenerTargetElement = _useState4[0];
   var incrementIndex = useCallback(function (list) {
     var currentIndex = currentSelectedItemIndex;
     var nextIndex = (currentIndex + 1) % list.length;
@@ -131,11 +135,11 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
           return;
       }
     };
-    document.addEventListener('keydown', handleKeyDown);
+    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('keydown', handleKeyDown);
+      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
     };
-  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex]);
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
   return /*#__PURE__*/React.createElement("div", {
     className: "menu-key-handler-wrapper custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/esm/ui-menu/ArrowKeyNavigationProvider/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "type"];
 import React from 'react';
+import { ReactEditorViewContext } from '../../ui-react';
 import { ColorPaletteArrowKeyNavigationProvider } from './ColorPaletteArrowKeyNavigationProvider';
 import { MenuArrowKeyNavigationProvider } from './MenuArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from './types';
@@ -10,12 +11,23 @@ export var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(prop
     type = props.type,
     restProps = _objectWithoutProperties(props, _excluded);
   if (type === ArrowKeyNavigationType.COLOR) {
-    return /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
-      selectedRowIndex: props.selectedRowIndex,
-      selectedColumnIndex: props.selectedColumnIndex,
-      isOpenedByKeyboard: props.isOpenedByKeyboard,
-      isPopupPositioned: props.isPopupPositioned
-    }, restProps), children);
+    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref) {
+      var editorView = _ref.editorView,
+        editorRef = _ref.editorRef;
+      return editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
+        selectedRowIndex: props.selectedRowIndex,
+        selectedColumnIndex: props.selectedColumnIndex,
+        isOpenedByKeyboard: props.isOpenedByKeyboard,
+        isPopupPositioned: props.isPopupPositioned,
+        editorRef: editorRef
+      }, restProps), children);
+    });
   }
-  return /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, restProps, children);
+  return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
+    var editorView = _ref2.editorView,
+      editorRef = _ref2.editorRef;
+    return editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
+      editorRef: editorRef
+    }, restProps), children);
+  });
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.7.3",
+	"version": "72.9.0",
 	"sideEffects": false
 }

package/dist/types/analytics/types/smart-links.d.ts

@@ -5,7 +5,7 @@ export declare const SmartLinkNodeContexts: {
     [P in SmartLinkNodeContext]: P;
 };
 export declare type InsertSmartLinkAEP = InsertAEP<ACTION_SUBJECT_ID.SMART_LINK, {
-    inputMethod: INPUT_METHOD.CLIPBOARD | INPUT_METHOD.AUTO_DETECT | INPUT_METHOD.TYPEAHEAD | INPUT_METHOD.MANUAL | INPUT_METHOD.FORMATTING;
+    inputMethod: INPUT_METHOD.CLIPBOARD | INPUT_METHOD.AUTO_DETECT | INPUT_METHOD.TYPEAHEAD | INPUT_METHOD.MANUAL | INPUT_METHOD.FORMATTING | INPUT_METHOD.FLOATING_TB;
     nodeType: 'inlineCard' | 'blockCard' | 'embedCard';
     nodeContext: SmartLinkNodeContext;
     fromCurrentDomain: boolean;

package/dist/types/card/cardOptions.d.ts

@@ -7,4 +7,6 @@ export interface CardOptions {
     allowResizing?: boolean;
     showServerActions?: boolean;
     useAlternativePreloader?: boolean;
+    allowAlignment?: boolean;
+    allowWrapping?: boolean;
 }

package/dist/types/card/index.d.ts

@@ -1 +1,2 @@
 export type { CardOptions } from './cardOptions';
+export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata, } from './utils';

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

@@ -0,0 +1,18 @@
+import { EditorState, ReadonlyTransaction, Selection, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { LinkStepMetadata } from '@atlaskit/adf-schema/steps';
+/**
+ * Records metadata about the user action and input method relating to a transaction
+ * as a custom LinkStepMetadata prosemirror step so that it is preserved in
+ * the history for undo/redo
+ */
+export declare function addLinkMetadata(initialSelection: Selection, tr: Transaction, metadata: LinkStepMetadata): Transaction<any>;
+export declare function getLinkMetadataFromTransaction(tr: Transaction | ReadonlyTransaction): LinkStepMetadata;
+export declare type CommandDispatch = (tr: Transaction) => void;
+export declare type Command = (state: EditorState, dispatch?: CommandDispatch, view?: EditorView) => boolean;
+/**
+ * Adds metadata to the transaction created from a command
+ * The metadata describes the user intent and input method
+ * for executing the command
+ */
+export declare const commandWithMetadata: (command: Command, metadata: LinkStepMetadata) => Command;

package/dist/types/keymaps/index.d.ts

@@ -3,6 +3,8 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Command } from '../types/command';
 export declare const addAltText: Keymap;
+export declare const navToEditorToolbar: Keymap;
+export declare const navToFloatingToolbar: Keymap;
 export declare const toggleBold: Keymap;
 export declare const toggleItalic: Keymap;
 export declare const toggleUnderline: Keymap;

package/dist/types/types/feature-flags.d.ts

@@ -319,6 +319,13 @@ export declare type FeatureFlags = {
      * @default false
      */
     lpLinkPickerFocusTrap?: boolean;
+    /**
+     * @description
+     * Enables linking platform event tracking using @atlaskit/link-analytics
+     *
+     * @default false
+     */
+    lpAnalyticsEventsNext?: boolean;
     /**
      * @description
      * Show link settings button in the Floating toolbar

package/dist/types/ui-color/ColorPalette/Palettes/index.d.ts

@@ -1,3 +1,3 @@
 export type { PaletteColor } from './type';
 export { DEFAULT_BORDER_COLOR } from './common';
-export { textPaletteTooltipMessages, backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, } from './paletteMessagesTokenModeNames';
+export { backgroundPaletteTooltipMessages, borderPaletteTooltipMessages, chartsColorPaletteTooltipMessages, textPaletteTooltipMessages, } from './paletteMessagesTokenModeNames';