@atlaskit/editor-core 180.0.0 → 181.0.0

package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js

@@ -7,6 +7,8 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
@@ -39,8 +41,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
+    _defineProperty(_assertThisInitialized(_this), "triggerRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "renderArrayOptions", function (options) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
@@ -56,24 +60,35 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
       _this.setState({
-        isOpen: !_this.state.isOpen
+        isOpen: !_this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "hide", function () {
-      _this.setState({
+      _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
         isOpen: false
-      });
+      }));
     });
-    _defineProperty(_assertThisInitialized(_this), "hideonEsc", function () {
+    _defineProperty(_assertThisInitialized(_this), "hideOnEsc", function () {
       var _document$querySelect;
-      _this.hide();
-      //Focus the trigger button only on Escape
+      // Focus the trigger button only on Escape
+      // Focus is done before hiding to ensure onBlur is called
       (_document$querySelect = document.querySelector("[data-testid=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+      _this.hide();
     });
     _defineProperty(_assertThisInitialized(_this), "onOpenChanged", function (openChangedEvent) {
       if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
         var _openChangedEvent$eve;
-        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? _this.hideonEsc() : _this.hide();
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? _this.hideOnEsc() : _this.hide();
       }
     });
     return _this;
@@ -95,7 +110,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         tooltip = _this$props2.tooltip,
         buttonTestId = _this$props2.buttonTestId,
         dropdownWidth = _this$props2.dropdownWidth,
-        editorView = _this$props2.editorView;
+        editorView = _this$props2.editorView,
+        dropdownListId = _this$props2.dropdownListId;
       var trigger;
       if (icon) {
         var TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
@@ -106,6 +122,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           title: title,
           icon: TriggerIcon,
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
           tooltipContent: tooltip
@@ -119,9 +136,12 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           selected: isOpen,
           disabled: disabled,
-          tooltipContent: tooltip
+          tooltipContent: tooltip,
+          ariaHasPopup: true,
+          areaControls: dropdownListId
         }, title);
       }
 
@@ -133,17 +153,19 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
       var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
       return jsx(UiDropdown, {
+        ref: this.triggerRef,
         mountTo: mountPoint,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         isOpen: isOpen,
         handleClickOutside: this.hide,
-        handleEscapeKeydown: this.hideonEsc,
+        handleEscapeKeydown: this.hideOnEsc,
         onOpenChange: this.onOpenChanged,
         fitWidth: fitWidth + fitTolerance,
         fitHeight: fitHeight + fitTolerance,
         trigger: trigger,
-        editorView: editorView
+        editorView: editorView,
+        dropdownListId: dropdownListId
       }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
         hide: this.hide,
         dispatchCommand: dispatchCommand
@@ -152,8 +174,20 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.setDisableParentScroll && prevState.isOpen !== this.state.isOpen) {
-        this.props.setDisableParentScroll(this.state.isOpen);
+      if (prevState.isOpen !== this.state.isOpen) {
+        if (this.props.setDisableParentScroll) {
+          this.props.setDisableParentScroll(this.state.isOpen);
+        }
+        if (this.state.isOpen && this.state.isOpenedByKeyboard) {
+          var dropList = document.querySelector('[data-role="droplistContent"]');
+          if (dropList) {
+            var keyboardEvent = new KeyboardEvent('keydown', {
+              bubbles: true,
+              key: 'ArrowDown'
+            });
+            dropList.dispatchEvent(keyboardEvent);
+          }
+        }
       }
     }
   }]);

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React from 'react';
@@ -14,11 +14,6 @@ import withOuterListeners from '../../../ui/with-outer-listeners';
 
 // helps adjusts position of popup
 var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-
-// helps to vertically align emoji picker
-// both top and bottom margin should be 2px
-// https://product-fabric.atlassian.net/browse/CETI-148
-var emojiPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
@@ -78,13 +73,11 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       // we need an index of > 500 to display over it
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined
-    }, jsx("div", {
-      css: emojiPickerWrapper
     }, jsx(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    })));
+    }));
   };
   var title = props.title || '';
   return jsx("div", {

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -48,28 +48,30 @@ var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
     editorView = props.editorView;
-  var ButtonIcon = item.icon ? Loadable({
-    loader: function () {
-      var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                return _context2.abrupt("return", resolveExtensionIcon(item.icon));
-              case 1:
-              case "end":
-                return _context2.stop();
+  var ButtonIcon = React.useMemo(function () {
+    return item.icon ? Loadable({
+      loader: function () {
+        var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  return _context2.abrupt("return", resolveExtensionIcon(item.icon));
+                case 1:
+                case "end":
+                  return _context2.stop();
+              }
             }
-          }
-        }, _callee2);
-      }));
-      function loader() {
-        return _loader.apply(this, arguments);
-      }
-      return loader;
-    }(),
-    loading: noop
-  }) : undefined;
+          }, _callee2);
+        }));
+        function loader() {
+          return _loader.apply(this, arguments);
+        }
+        return loader;
+      }(),
+      loading: noop
+    }) : undefined;
+  }, [item.icon]);
   var onClick = function onClick() {
     if (typeof item.action !== 'function') {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
@@ -82,6 +84,7 @@ var ExtensionButton = function ExtensionButton(props) {
   };
   return /*#__PURE__*/React.createElement(Button, {
     title: item.label,
+    ariaLabel: item.tooltip,
     icon: ButtonIcon ? /*#__PURE__*/React.createElement(ButtonIcon, {
       label: item.label || ''
     }) : undefined,

package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -87,19 +87,14 @@ export default (function (_ref) {
     }
   });
   useEffect(function () {
-    var scrollContainerRefCurrent = scrollContainerRef.current;
     onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
     if (scrollContainerRefCurrent) {
       // enable/disable scroll buttons depending on scroll position
       scrollContainerRefCurrent.addEventListener('scroll', onScroll);
 
       // watch for toolbar resize and show/hide scroll buttons if needed
       resizeObserver.observe(scrollContainerRefCurrent);
-
-      // reset scroll position when switching from one node with toolbar to another
-      scrollContainerRefCurrent.scrollTo({
-        left: 0
-      });
     }
     return function () {
       if (scrollContainerRefCurrent) {
@@ -108,7 +103,17 @@ export default (function (_ref) {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [node, scrollContainerRef]);
+  }, []);
+  useEffect(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      // reset scroll position when switching from one node with toolbar to another
+      scrollContainerRefCurrent.scrollTo({
+        left: 0
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [node.type]);
   return needScroll ? jsx("div", {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,

package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -15,6 +15,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
@@ -28,6 +29,7 @@ import Separator from './Separator';
 import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
+import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
@@ -53,6 +55,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     setDisableScroll = _ref.setDisableScroll,
     mountRef = _ref.mountRef;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
+  var _ref2 = editorView ? getFeatureFlags(editorView.state) : {
+      useSomewhatSemanticTextColorNames: false
+    },
+    useSomewhatSemanticTextColorNames = _ref2.useSomewhatSemanticTextColorNames;
   return jsx(ButtonGroup, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
@@ -138,7 +144,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           showSelected: item.showSelected,
           buttonTestId: item.testId,
           editorView: editorView,
-          setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList")
         });
       case 'select':
         if (item.selectType === 'list') {
@@ -174,6 +181,25 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             placement: "Panels",
             mountPoint: emojiAndColourPickerMountPoint,
             setDisableParentScroll: scrollable ? setDisableScroll : undefined
+            // Currently in floating toolbar, color picker is only
+            //  used in panel and table cell background color.
+            // Both uses same color palette.
+            // That's why hard-coding hexToEditorBackgroundPaletteColor
+            //  and paletteColorTooltipMessages.
+            // When we need to support different color palette
+            //  in floating toolbar, we need to set hexToPaletteColor
+            //  and paletteColorTooltipMessages in item options.
+            ,
+            hexToPaletteColor: hexToEditorBackgroundPaletteColor,
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+            // We did not want to create new FF or update
+            //  useSomewhatSemanticTextColorNames name
+            //  because it is temporary and require extra work.
+            // So even though it says text color names,
+            //  we are going to use for all color pickers
+            //  such as text, background and table charts.
+            ,
+            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -195,8 +221,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         if (!editorView || !extensionsProvider) {
           return null;
         }
-        var _ref2 = getFeatureFlags(editorView.state) || {},
-          extendFloatingToolbar = _ref2.extendFloatingToolbar;
+        var _ref3 = getFeatureFlags(editorView.state) || {},
+          extendFloatingToolbar = _ref3.extendFloatingToolbar;
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -333,8 +359,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   _createClass(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref3) {
-      var table = _ref3.table;
+    value: function resetStyling(_ref4) {
+      var table = _ref4.table;
       if (this.props.editorView) {
         var _this$props$editorVie2 = this.props.editorView,
           state = _this$props$editorVie2.state,
@@ -433,6 +459,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         text: intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
       }), jsx("div", {
+        "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef,
         css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
       }, jsx(ToolbarItems, _extends({}, this.props, {

package/dist/esm/plugins/floating-toolbar/utils.js

@@ -50,14 +50,4 @@ export function findNode(parent, predicate) {
     return true;
   });
   return matchedNode;
-}
-export function getFocusableElements(rootNode) {
-  if (!rootNode) {
-    return [];
-  }
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return Array.from(focusableModalElements) || [];
-}
-export function getFirstFocusableElement(rootNode) {
-  return getFocusableElements(rootNode)[0];
 }

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

@@ -1,12 +1,5 @@
 import { fragment } from '@atlaskit/adf-schema';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { pluginKey } from './plugin-key';
 import { createPlugin as createFragmentMarkConsistencyPlugin } from './pm-plugins/fragment-consistency';
-export function createPlugin() {
-  return new SafePlugin({
-    key: pluginKey
-  });
-}
 var fragmentMarkPlugin = function fragmentMarkPlugin() {
   return {
     name: 'fragmentPlugin',

package/dist/esm/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -60,6 +60,7 @@ var regenerateFragmentIdIfNeeded = function regenerateFragmentIdIfNeeded(_ref) {
       transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(function (mark) {
         if (mark.type === fragment) {
           mark.attrs.localId = uuid.generate();
+          mark.attrs.name = null;
         }
         return mark;
       }));

package/dist/esm/plugins/help-dialog/commands.js

@@ -10,7 +10,4 @@ export var openHelpCommand = function openHelpCommand(tr, dispatch) {
 export var closeHelpCommand = function closeHelpCommand(tr, dispatch) {
   tr = tr.setMeta(pluginKey, false);
   dispatch(tr);
-};
-export var stopPropagationCommand = function stopPropagationCommand(e) {
-  return e.stopPropagation();
 };

package/dist/esm/plugins/hyperlink/analytics.js

@@ -1,4 +1,4 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics/types';
 import { getLinkDomain, isFromCurrentDomain } from './utils';
 export function getLinkCreationAnalyticsEvent(inputMethod, url) {
   return {

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

@@ -27,7 +27,7 @@ var hyperlinkPlugin = function hyperlinkPlugin(options) {
         name: 'hyperlink',
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch;
-          return _plugin(dispatch);
+          return _plugin(dispatch, options === null || options === void 0 ? void 0 : options.editorAppearance);
         }
       }, {
         name: 'fakeCursorToolbarPlugin',

package/dist/esm/plugins/hyperlink/pm-plugins/main.js

@@ -182,7 +182,7 @@ var getActiveText = function getActiveText(selection) {
   return;
 };
 export var stateKey = new PluginKey('hyperlinkPlugin');
-export var plugin = function plugin(dispatch) {
+export var plugin = function plugin(dispatch, editorAppearance) {
   return new SafePlugin({
     state: {
       init: function init(_, state) {
@@ -191,7 +191,8 @@ export var plugin = function plugin(dispatch) {
           activeText: getActiveText(state.selection),
           canInsertLink: canInsertLink,
           timesViewed: 0,
-          activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state)
+          activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state),
+          editorAppearance: editorAppearance
         };
       },
       apply: function apply(tr, pluginState, oldState, newState) {
@@ -204,7 +205,8 @@ export var plugin = function plugin(dispatch) {
             canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
             timesViewed: state.timesViewed,
             inputMethod: inputMethod,
-            activeLinkMark: mapTransactionToState(state.activeLinkMark, tr)
+            activeLinkMark: mapTransactionToState(state.activeLinkMark, tr),
+            editorAppearance: editorAppearance
           };
         }
         if (action) {
@@ -219,7 +221,8 @@ export var plugin = function plugin(dispatch) {
             activeText: state.activeText,
             canInsertLink: state.canInsertLink,
             inputMethod: inputMethod,
-            activeLinkMark: toState(state.activeLinkMark, action, newState)
+            activeLinkMark: toState(state.activeLinkMark, action, newState),
+            editorAppearance: editorAppearance
           }, stateForAnalytics);
         }
         var hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
@@ -230,7 +233,8 @@ export var plugin = function plugin(dispatch) {
             activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState),
             timesViewed: state.timesViewed,
             searchSessionId: state.searchSessionId,
-            inputMethod: inputMethod
+            inputMethod: inputMethod,
+            editorAppearance: editorAppearance
           };
         }
         if (!shallowEqual(state, pluginState)) {

package/dist/esm/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["view", "onCancel", "invokeMethod"];
+var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance"];
 import React, { useCallback, useMemo } from 'react';
 import { LinkPicker } from '@atlaskit/link-picker';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { hideLinkToolbar } from '../../commands';
 import { useEscapeClickaway } from './useEscapeClickaway';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
 
 /**
  * Returns a type that matches T but where keys (K) are now optional
@@ -17,6 +18,7 @@ export var EditorLinkPicker = function EditorLinkPicker(_ref) {
     onCancel = _ref.onCancel,
     _ref$invokeMethod = _ref.invokeMethod,
     invokeMethod = _ref$invokeMethod === void 0 ? '_unknown' : _ref$invokeMethod,
+    editorAppearance = _ref.editorAppearance,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var onEscape = useCallback(function () {
     hideLinkToolbar()(view.state, view.dispatch);
@@ -28,13 +30,17 @@ export var EditorLinkPicker = function EditorLinkPicker(_ref) {
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   }, [view, onCancel]);
   var ref = useEscapeClickaway(onEscape, onClickAway);
+  var analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
   var analyticsData = useMemo(function () {
     return {
       attributes: {
-        invokeMethod: invokeMethod
-      }
+        invokeMethod: invokeMethod,
+        location: analyticsEditorAppearance
+      },
+      // Below is added for the future implementation of Linking Platform namespaced analytic context
+      location: analyticsEditorAppearance
     };
-  }, [invokeMethod]);
+  }, [invokeMethod, analyticsEditorAppearance]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React.createElement(AnalyticsContext, {

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -30,7 +30,7 @@ import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../../me
 import PanelTextInput from '../../../../ui/PanelTextInput';
 import LinkSearchList from '../../../../ui/LinkSearch/LinkSearchList';
 import { container, containerWithProvider, inputWrapper } from '../../../../ui/LinkSearch/ToolbarComponents';
-import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../analytics';
+import { INPUT_METHOD, fireAnalyticsEvent, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { normalizeUrl } from '../../utils';
 import { filterUniqueItems } from '../../../../utils/array';
 import debounce from 'lodash/debounce';

package/dist/esm/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -9,7 +9,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
-import { INPUT_METHOD } from '../../../analytics';
+import { INPUT_METHOD } from '../../../analytics/types';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';
 import { getFeatureFlags } from '../../../feature-flags-context';
@@ -67,7 +67,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
                   view: view,
                   invokeMethod: // Provide `invokeMethod` prop as preferred value (card plugin passes as prop) otherwise assume this
                   // is being used from inside the hyperlink plugin and use inputMethod from plugin state
-                  invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod
+                  invokeMethod !== null && invokeMethod !== void 0 ? invokeMethod : hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.inputMethod,
+                  editorAppearance: hyperlinkPluginState === null || hyperlinkPluginState === void 0 ? void 0 : hyperlinkPluginState.editorAppearance
                 }, linkPickerOptions, {
                   url: displayUrl,
                   displayText: displayText,