@atlaskit/editor-plugin-hyperlink 5.3.0 → 5.4.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 5.4.1
+
+### Patch Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`54098ba4cc83c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54098ba4cc83c) -
+  Add LinkSection and TextSection and add logic to hide them when toolbar is pinned. Add
+  UserPreferencesPlugin and EditorViewModePlugin as a dependency to editor-plugin-toolbar.
+- Updated dependencies
+
+## 5.4.0
+
+### Minor Changes
+
+- [`f681ff4b37a3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f681ff4b37a3d) -
+  [ux] ED-28752 register link button to new toolbar behind platform_editor_toolbar_aifc
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/cjs/hyperlinkPlugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hyperlinkPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -16,6 +17,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkEditorLink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link--editor-link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./editor-commands/commands");
 var _fakeCursorForToolbar = _interopRequireDefault(require("./pm-plugins/fake-cursor-for-toolbar"));
@@ -23,7 +25,10 @@ var _inputRule = require("./pm-plugins/input-rule");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _toolbarButtons = require("./pm-plugins/toolbar-buttons");
+var _toolbarComponents = require("./ui/toolbar-components");
 var _Toolbar = require("./ui/toolbar/Toolbar");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getPosFromActiveLinkMark = function getPosFromActiveLinkMark(state) {
   if (state === undefined) {
     return undefined;
@@ -47,6 +52,10 @@ var hyperlinkPlugin = exports.hyperlinkPlugin = function hyperlinkPlugin(_ref) {
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
   var primaryToolbarComponent;
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+  }
   return {
     name: 'hyperlink',
     marks: function marks() {
@@ -140,7 +149,7 @@ var hyperlinkPlugin = exports.hyperlinkPlugin = function hyperlinkPlugin(_ref) {
         }
       }];
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
         return [{
@@ -173,7 +182,8 @@ var hyperlinkPlugin = exports.hyperlinkPlugin = function hyperlinkPlugin(_ref) {
           }
         }];
       },
-      floatingToolbar: (0, _Toolbar.getToolbarConfig)(options, api),
+      floatingToolbar: (0, _Toolbar.getToolbarConfig)(options, api)
+    }, !(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       selectionToolbar: function selectionToolbar(state, _ref5) {
         var _api$userPreferences, _api$selectionToolbar;
         var formatMessage = _ref5.formatMessage;
@@ -209,10 +219,11 @@ var hyperlinkPlugin = exports.hyperlinkPlugin = function hyperlinkPlugin(_ref) {
         } else {
           return undefined;
         }
-      },
+      }
+    }), !(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
         exposure: true
       }) ? primaryToolbarComponent : undefined
-    }
+    })
   };
 };

package/dist/cjs/ui/toolbar/LinkButton.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-common/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var LinkButton = exports.LinkButton = function LinkButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state;
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.hyperlink.commands.showLinkToolbar(_analytics.INPUT_METHOD.FLOATING_TB));
+  };
+  var isEnabled = state !== null && state !== void 0 && state.selection ? (0, _utils.canLinkBeCreatedInRange)(state === null || state === void 0 ? void 0 : state.selection.from, state === null || state === void 0 ? void 0 : state.selection.to)(state) : false;
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    _react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: formatMessage(_messages.toolbarInsertBlockMessages.link)
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+      iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.LinkIcon, {
+        label: formatMessage(_messages.toolbarInsertBlockMessages.link)
+      }),
+      onClick: onClick,
+      testId: 'editor-toolbar__link-button',
+      isDisabled: !isEnabled
+    }))
+  );
+};

package/dist/cjs/ui/toolbar/LinkSection.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkSection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var shouldShowLinkSection = function shouldShowLinkSection(editMode, toolbar, toolbarDocking) {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === _toolbar.TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+var LinkSection = exports.LinkSection = function LinkSection(_ref) {
+  var children = _ref.children,
+    parents = _ref.parents,
+    api = _ref.api;
+  var editMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'editorViewMode.mode');
+  var toolbarDocking = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var toolbar = parents.find(function (parent) {
+    return parent.type === 'toolbar';
+  });
+  if (!shouldShowLinkSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarSection, null, children);
+};

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _LinkButton = require("./toolbar/LinkButton");
+var _LinkSection = require("./toolbar/LinkSection");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  var toolbarComponents = [{
+    type: _toolbar.LINKING_SECTION.type,
+    key: _toolbar.LINKING_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
+      rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children,
+        parents = _ref.parents;
+      return /*#__PURE__*/_react.default.createElement(_LinkSection.LinkSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
+  }, {
+    type: _toolbar.LINKING_GROUP.type,
+    key: _toolbar.LINKING_GROUP.key,
+    parents: [{
+      type: _toolbar.LINKING_SECTION.type,
+      key: _toolbar.LINKING_SECTION.key,
+      rank: _toolbar.LINKING_SECTION_RANK[_toolbar.LINKING_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.LINKING_BUTTON.type,
+    key: _toolbar.LINKING_BUTTON.key,
+    parents: [{
+      type: _toolbar.LINKING_GROUP.type,
+      key: _toolbar.LINKING_GROUP.key,
+      rank: _toolbar.LINKING_GROUP_RANK[_toolbar.LINKING_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButton, {
+        api: api
+      });
+    }
+  }];
+  return toolbarComponents;
+};

package/dist/es2019/hyperlinkPlugin.js

@@ -9,6 +9,7 @@ import { IconLink } from '@atlaskit/editor-common/quick-insert';
 import { canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
 import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideLinkToolbarSetMeta, insertLinkWithAnalytics, removeLinkEditorCommand, showLinkToolbar, updateLink, updateLinkEditorCommand } from './editor-commands/commands';
 import fakeCursorToolbarPlugin from './pm-plugins/fake-cursor-for-toolbar';
@@ -16,6 +17,7 @@ import { createInputRulePlugin } from './pm-plugins/input-rule';
 import { createKeymapPlugin } from './pm-plugins/keymap';
 import { plugin, stateKey } from './pm-plugins/main';
 import { toolbarButtonsPlugin } from './pm-plugins/toolbar-buttons';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { getToolbarConfig } from './ui/toolbar/Toolbar';
 const getPosFromActiveLinkMark = state => {
   if (state === undefined) {
@@ -40,6 +42,10 @@ export const hyperlinkPlugin = ({
   api
 }) => {
   let primaryToolbarComponent;
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  }
   return {
     name: 'hyperlink',
     marks() {
@@ -154,47 +160,51 @@ export const hyperlinkPlugin = ({
         }
       }],
       floatingToolbar: getToolbarConfig(options, api),
-      selectionToolbar: (state, {
-        formatMessage
-      }) => {
-        var _api$userPreferences, _api$userPreferences$, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
-        const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : _api$userPreferences$.preferences.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
-        if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
-          exposure: true
-        })) {
-          const toolbarButton = () => {
-            const {
-              from,
-              to
-            } = state.selection;
-            const isEnabled = canLinkBeCreatedInRange(from, to)(state);
-            const title = formatMessage(messages.link);
+      ...(!expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
+        selectionToolbar: (state, {
+          formatMessage
+        }) => {
+          var _api$userPreferences, _api$userPreferences$, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
+          const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : _api$userPreferences$.preferences.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
+          if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
+            exposure: true
+          })) {
+            const toolbarButton = () => {
+              const {
+                from,
+                to
+              } = state.selection;
+              const isEnabled = canLinkBeCreatedInRange(from, to)(state);
+              const title = formatMessage(messages.link);
+              return {
+                type: 'button',
+                disabled: !isEnabled,
+                testId: `${selectionToolbarLinkButtonTestId}`,
+                icon: LinkIcon,
+                title: title,
+                tooltipContent: tooltip(addLink, title),
+                showTitle: false,
+                onClick: (state, dispatch) => {
+                  var _api$analytics7;
+                  return editorCommandToPMCommand(showLinkToolbar(INPUT_METHOD.FLOATING_TB, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions))(state, dispatch);
+                }
+              };
+            };
             return {
-              type: 'button',
-              disabled: !isEnabled,
-              testId: `${selectionToolbarLinkButtonTestId}`,
-              icon: LinkIcon,
-              title: title,
-              tooltipContent: tooltip(addLink, title),
-              showTitle: false,
-              onClick: (state, dispatch) => {
-                var _api$analytics7;
-                return editorCommandToPMCommand(showLinkToolbar(INPUT_METHOD.FLOATING_TB, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions))(state, dispatch);
-              }
+              isToolbarAbove: true,
+              items: [toolbarButton()],
+              rank: 2
             };
-          };
-          return {
-            isToolbarAbove: true,
-            items: [toolbarButton()],
-            rank: 2
-          };
-        } else {
-          return undefined;
+          } else {
+            return undefined;
+          }
         }
-      },
-      primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
-        exposure: true
-      }) ? primaryToolbarComponent : undefined
+      }),
+      ...(!expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
+        primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
+          exposure: true
+        }) ? primaryToolbarComponent : undefined
+      })
     }
   };
 };

package/dist/es2019/ui/toolbar/LinkButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
+import { LinkIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export const LinkButton = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    state
+  } = editorView !== null && editorView !== void 0 ? editorView : {
+    state: null,
+    dispatch: null
+  };
+  const onClick = () => {
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.hyperlink.commands.showLinkToolbar(INPUT_METHOD.FLOATING_TB));
+  };
+  const isEnabled = state !== null && state !== void 0 && state.selection ? canLinkBeCreatedInRange(state === null || state === void 0 ? void 0 : state.selection.from, state === null || state === void 0 ? void 0 : state.selection.to)(state) : false;
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    React.createElement(ToolbarTooltip, {
+      content: formatMessage(messages.link)
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      iconBefore: /*#__PURE__*/React.createElement(LinkIcon, {
+        label: formatMessage(messages.link)
+      }),
+      onClick: onClick,
+      testId: 'editor-toolbar__link-button',
+      isDisabled: !isEnabled
+    }))
+  );
+};

package/dist/es2019/ui/toolbar/LinkSection.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarSection } from '@atlaskit/editor-toolbar';
+const shouldShowLinkSection = (editMode, toolbar, toolbarDocking) => {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+export const LinkSection = ({
+  children,
+  parents,
+  api
+}) => {
+  const editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  const toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  const toolbar = parents.find(parent => parent.type === 'toolbar');
+  if (!shouldShowLinkSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarSection, null, children);
+};

package/dist/es2019/ui/toolbar-components.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { LINKING_BUTTON, LINKING_GROUP, LINKING_GROUP_RANK, LINKING_SECTION, LINKING_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { LinkButton } from './toolbar/LinkButton';
+import { LinkSection } from './toolbar/LinkSection';
+export const getToolbarComponents = api => {
+  const toolbarComponents = [{
+    type: LINKING_SECTION.type,
+    key: LINKING_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[LINKING_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[LINKING_SECTION.key]
+    }],
+    component: ({
+      children,
+      parents
+    }) => {
+      return /*#__PURE__*/React.createElement(LinkSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
+  }, {
+    type: LINKING_GROUP.type,
+    key: LINKING_GROUP.key,
+    parents: [{
+      type: LINKING_SECTION.type,
+      key: LINKING_SECTION.key,
+      rank: LINKING_SECTION_RANK[LINKING_GROUP.key]
+    }]
+  }, {
+    type: LINKING_BUTTON.type,
+    key: LINKING_BUTTON.key,
+    parents: [{
+      type: LINKING_GROUP.type,
+      key: LINKING_GROUP.key,
+      rank: LINKING_GROUP_RANK[LINKING_BUTTON.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(LinkButton, {
+        api: api
+      });
+    }
+  }];
+  return toolbarComponents;
+};

package/dist/esm/hyperlinkPlugin.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { link } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -9,6 +12,7 @@ import { IconLink } from '@atlaskit/editor-common/quick-insert';
 import { canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
 import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideLinkToolbarSetMeta, insertLinkWithAnalytics, removeLinkEditorCommand, showLinkToolbar as _showLinkToolbar, updateLink, updateLinkEditorCommand } from './editor-commands/commands';
 import fakeCursorToolbarPlugin from './pm-plugins/fake-cursor-for-toolbar';
@@ -16,6 +20,7 @@ import { createInputRulePlugin } from './pm-plugins/input-rule';
 import { createKeymapPlugin } from './pm-plugins/keymap';
 import { plugin as _plugin, stateKey } from './pm-plugins/main';
 import { toolbarButtonsPlugin } from './pm-plugins/toolbar-buttons';
+import { getToolbarComponents } from './ui/toolbar-components';
 import { getToolbarConfig } from './ui/toolbar/Toolbar';
 var getPosFromActiveLinkMark = function getPosFromActiveLinkMark(state) {
   if (state === undefined) {
@@ -40,6 +45,10 @@ export var hyperlinkPlugin = function hyperlinkPlugin(_ref) {
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
   var primaryToolbarComponent;
+  if (expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  }
   return {
     name: 'hyperlink',
     marks: function marks() {
@@ -133,7 +142,7 @@ export var hyperlinkPlugin = function hyperlinkPlugin(_ref) {
         }
       }];
     },
-    pluginsOptions: {
+    pluginsOptions: _objectSpread(_objectSpread({
       quickInsert: function quickInsert(_ref4) {
         var formatMessage = _ref4.formatMessage;
         return [{
@@ -166,7 +175,8 @@ export var hyperlinkPlugin = function hyperlinkPlugin(_ref) {
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(options, api),
+      floatingToolbar: getToolbarConfig(options, api)
+    }, !expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       selectionToolbar: function selectionToolbar(state, _ref5) {
         var _api$userPreferences, _api$selectionToolbar;
         var formatMessage = _ref5.formatMessage;
@@ -202,10 +212,11 @@ export var hyperlinkPlugin = function hyperlinkPlugin(_ref) {
         } else {
           return undefined;
         }
-      },
+      }
+    }), !expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
         exposure: true
       }) ? primaryToolbarComponent : undefined
-    }
+    })
   };
 };

package/dist/esm/ui/toolbar/LinkButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
+import { LinkIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+export var LinkButton = function LinkButton(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _ref2 = editorView !== null && editorView !== void 0 ? editorView : {
+      state: null,
+      dispatch: null
+    },
+    state = _ref2.state;
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.hyperlink.commands.showLinkToolbar(INPUT_METHOD.FLOATING_TB));
+  };
+  var isEnabled = state !== null && state !== void 0 && state.selection ? canLinkBeCreatedInRange(state === null || state === void 0 ? void 0 : state.selection.from, state === null || state === void 0 ? void 0 : state.selection.to)(state) : false;
+  return (
+    /*#__PURE__*/
+    // TODO: ED-28743 - add keyboard shortcut here
+    React.createElement(ToolbarTooltip, {
+      content: formatMessage(messages.link)
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      iconBefore: /*#__PURE__*/React.createElement(LinkIcon, {
+        label: formatMessage(messages.link)
+      }),
+      onClick: onClick,
+      testId: 'editor-toolbar__link-button',
+      isDisabled: !isEnabled
+    }))
+  );
+};

package/dist/esm/ui/toolbar/LinkSection.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { ToolbarSection } from '@atlaskit/editor-toolbar';
+var shouldShowLinkSection = function shouldShowLinkSection(editMode, toolbar, toolbarDocking) {
+  if (editMode === 'view') {
+    return false;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
+    return true;
+  }
+  if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
+    return true;
+  }
+  return false;
+};
+export var LinkSection = function LinkSection(_ref) {
+  var children = _ref.children,
+    parents = _ref.parents,
+    api = _ref.api;
+  var editMode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  var toolbarDocking = useSharedPluginStateSelector(api, 'userPreferences.preferences.toolbarDockingPosition');
+  var toolbar = parents.find(function (parent) {
+    return parent.type === 'toolbar';
+  });
+  if (!shouldShowLinkSection(editMode, toolbar, toolbarDocking)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarSection, null, children);
+};

package/dist/esm/ui/toolbar-components.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { LINKING_BUTTON, LINKING_GROUP, LINKING_GROUP_RANK, LINKING_SECTION, LINKING_SECTION_RANK, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
+import { LinkButton } from './toolbar/LinkButton';
+import { LinkSection } from './toolbar/LinkSection';
+export var getToolbarComponents = function getToolbarComponents(api) {
+  var toolbarComponents = [{
+    type: LINKING_SECTION.type,
+    key: LINKING_SECTION.key,
+    parents: [{
+      type: 'toolbar',
+      key: TOOLBARS.INLINE_TEXT_TOOLBAR,
+      rank: TOOLBAR_RANK[LINKING_SECTION.key]
+    }, {
+      type: 'toolbar',
+      key: TOOLBARS.PRIMARY_TOOLBAR,
+      rank: TOOLBAR_RANK[LINKING_SECTION.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children,
+        parents = _ref.parents;
+      return /*#__PURE__*/React.createElement(LinkSection, {
+        parents: parents,
+        api: api
+      }, children);
+    }
+  }, {
+    type: LINKING_GROUP.type,
+    key: LINKING_GROUP.key,
+    parents: [{
+      type: LINKING_SECTION.type,
+      key: LINKING_SECTION.key,
+      rank: LINKING_SECTION_RANK[LINKING_GROUP.key]
+    }]
+  }, {
+    type: LINKING_BUTTON.type,
+    key: LINKING_BUTTON.key,
+    parents: [{
+      type: LINKING_GROUP.type,
+      key: LINKING_GROUP.key,
+      rank: LINKING_GROUP_RANK[LINKING_BUTTON.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(LinkButton, {
+        api: api
+      });
+    }
+  }];
+  return toolbarComponents;
+};

package/dist/types/hyperlinkPluginType.d.ts

@@ -6,6 +6,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { HideLinkToolbar, InsertLink, ShowLinkToolbar, UpdateLink } from './editor-commands/commands';
 type HyperlinkPluginCommands = {
@@ -53,7 +54,8 @@ export type HyperlinkPluginDependencies = [
     OptionalPlugin<ConnectivityPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type HyperlinkPluginActions = {
     hideLinkToolbar: HideLinkToolbar;

package/dist/types/pm-plugins/decorations.d.ts

@@ -5,7 +5,7 @@ import { type PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, onOpenLinkClick, }: {
     editorView: EditorView;
-    pos?: number | undefined;
+    pos?: number;
     stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
     /** Callback fired when the Open Link dropdown item is clicked */

package/dist/types/ui/PrimaryToolbarComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';

package/dist/types/ui/toolbar/LinkButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HyperlinkPlugin } from '../../hyperlinkPluginType';
+type LinkButtonProps = {
+    api?: ExtractInjectionAPI<HyperlinkPlugin>;
+};
+export declare const LinkButton: ({ api }: LinkButtonProps) => React.JSX.Element;
+export {};

package/dist/types/ui/toolbar/LinkSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { HyperlinkPlugin } from '../../hyperlinkPluginType';
+type LinkSectionProps = {
+    children: React.ReactNode;
+    parents: ToolbarComponentTypes;
+    api?: ExtractInjectionAPI<HyperlinkPlugin>;
+};
+export declare const LinkSection: ({ children, parents, api }: LinkSectionProps) => React.JSX.Element | null;
+export {};

package/dist/types/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { HyperlinkPlugin } from '../hyperlinkPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<HyperlinkPlugin>) => RegisterComponent[];

package/dist/types-ts4.5/hyperlinkPluginType.d.ts

@@ -6,6 +6,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { HideLinkToolbar, InsertLink, ShowLinkToolbar, UpdateLink } from './editor-commands/commands';
 type HyperlinkPluginCommands = {
@@ -53,7 +54,8 @@ export type HyperlinkPluginDependencies = [
     OptionalPlugin<ConnectivityPlugin>,
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type HyperlinkPluginActions = {
     hideLinkToolbar: HideLinkToolbar;

package/dist/types-ts4.5/pm-plugins/decorations.d.ts

@@ -5,7 +5,7 @@ import { type PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare const ButtonWrapper: ({ editorView, pos, stateKey, intl, onOpenLinkClick, }: {
     editorView: EditorView;
-    pos?: number | undefined;
+    pos?: number;
     stateKey: PluginKey<HyperlinkState>;
     intl: IntlShape;
     /** Callback fired when the Open Link dropdown item is clicked */

package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';

package/dist/types-ts4.5/ui/toolbar/LinkButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { HyperlinkPlugin } from '../../hyperlinkPluginType';
+type LinkButtonProps = {
+    api?: ExtractInjectionAPI<HyperlinkPlugin>;
+};
+export declare const LinkButton: ({ api }: LinkButtonProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/toolbar/LinkSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { HyperlinkPlugin } from '../../hyperlinkPluginType';
+type LinkSectionProps = {
+    children: React.ReactNode;
+    parents: ToolbarComponentTypes;
+    api?: ExtractInjectionAPI<HyperlinkPlugin>;
+};
+export declare const LinkSection: ({ children, parents, api }: LinkSectionProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { HyperlinkPlugin } from '../hyperlinkPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<HyperlinkPlugin>) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "5.3.0",
+	"version": "5.4.1",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,22 +35,25 @@
 		"@atlaskit/adf-schema": "^50.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
-		"@atlaskit/editor-plugin-card": "^7.2.0",
+		"@atlaskit/editor-plugin-card": "^7.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/editor-toolbar": "^0.2.0",
+		"@atlaskit/editor-toolbar-model": "^0.1.0",
+		"@atlaskit/icon": "^27.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.4.0",
-		"@atlaskit/tmp-editor-statsig": "^9.24.0",
+		"@atlaskit/tmp-editor-statsig": "^9.27.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.17.0",
+		"@atlaskit/editor-common": "^107.20.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -60,11 +63,10 @@
 		"@atlaskit/link-test-helpers": "^8.3.0",
 		"@atlaskit/media-test-helpers": "^37.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/util-data-test": "^18.0.0",
+		"@atlaskit/util-data-test": "^18.1.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"raf-stub": "^2.0.1",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {