@atlaskit/editor-core 181.0.0 → 182.0.0

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -19,7 +19,6 @@ import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ToolbarLoader } from './ui/ToolbarLoader';
 import { findNode } from './utils';
 import { ErrorBoundary } from '../../ui/ErrorBoundary';
-import { getFeatureFlags } from '../feature-flags-context';
 import { processCopyButtonItems } from '../copy-button/toolbar';
 import forceFocusPlugin from './pm-plugins/force-focus';
 export const getRelevantConfig = (selection, configs) => {
@@ -113,156 +112,167 @@ const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
 function filterUndefined(x) {
   return !!x;
 }
-const floatingToolbarPlugin = () => ({
-  name: 'floatingToolbar',
-  pmPlugins(floatingToolbarHandlers = []) {
-    return [{
-      // Should be after all toolbar plugins
-      name: 'floatingToolbar',
-      plugin: ({
-        dispatch,
-        providerFactory,
-        getIntl
-      }) => floatingToolbarPluginFactory({
-        floatingToolbarHandlers,
-        dispatch,
-        providerFactory,
-        getIntl
-      })
-    }, {
-      name: 'floatingToolbarData',
-      plugin: ({
-        dispatch
-      }) => floatingToolbarDataPluginFactory(dispatch)
-    }, {
-      name: 'forceFocus',
-      plugin: () => forceFocusPlugin()
-    }];
-  },
-  contentComponent({
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement,
-    editorView,
-    providerFactory,
-    dispatchAnalyticsEvent
-  }) {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        floatingToolbarState: pluginKey,
-        floatingToolbarData: dataPluginKey,
-        editorDisabledPlugin: editorDisabledPluginKey,
-        extensionsState: extensionsPluginKey
-      },
-      render: ({
-        editorDisabledPlugin,
-        floatingToolbarState,
-        floatingToolbarData,
-        extensionsState
-      }) => {
-        var _configWithNodeInfo$c, _configWithNodeInfo$c2;
-        const configWithNodeInfo = floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.getConfigWithNodeInfo(editorView.state);
-        if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
-          return null;
-        }
-        const {
-          config,
-          node
-        } = configWithNodeInfo;
-        const {
-          title,
-          getDomRef = getDomRefFromSelection,
-          items,
-          align = 'center',
-          className = '',
-          height,
-          width,
-          zIndex,
-          offset = [0, 12],
-          forcePlacement,
-          preventPopupOverflow,
-          onPositionCalculated,
-          focusTrap
-        } = config;
-        const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
-        if (!targetRef || editorDisabledPlugin && editorDisabledPlugin.editorDisabled) {
-          return null;
-        }
-        let customPositionCalculation;
-        const toolbarItems = processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node));
-        if (onPositionCalculated) {
-          customPositionCalculation = nextPos => {
-            return onPositionCalculated(editorView, nextPos);
-          };
-        }
-        const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
+const floatingToolbarPlugin = (_, api) => {
+  var _api$dependencies, _api$dependencies$fea;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
+  return {
+    name: 'floatingToolbar',
+    pmPlugins(floatingToolbarHandlers = []) {
+      return [{
+        // Should be after all toolbar plugins
+        name: 'floatingToolbar',
+        plugin: ({
+          dispatch,
+          providerFactory,
+          getIntl
+        }) => floatingToolbarPluginFactory({
+          floatingToolbarHandlers,
+          dispatch,
+          providerFactory,
+          getIntl
+        })
+      }, {
+        name: 'floatingToolbarData',
+        plugin: ({
+          dispatch
+        }) => floatingToolbarDataPluginFactory(dispatch)
+      }, {
+        name: 'forceFocus',
+        plugin: () => forceFocusPlugin()
+      }];
+    },
+    contentComponent({
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      editorView,
+      providerFactory,
+      dispatchAnalyticsEvent
+    }) {
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          floatingToolbarState: pluginKey,
+          floatingToolbarData: dataPluginKey,
+          editorDisabledPlugin: editorDisabledPluginKey,
+          extensionsState: extensionsPluginKey
+        },
+        render: ({
+          editorDisabledPlugin,
+          floatingToolbarState,
+          floatingToolbarData,
+          extensionsState
+        }) => {
+          var _configWithNodeInfo$c, _configWithNodeInfo$c2;
+          const configWithNodeInfo = floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : floatingToolbarState.getConfigWithNodeInfo(editorView.state);
+          if (!configWithNodeInfo || !configWithNodeInfo.config || typeof ((_configWithNodeInfo$c = configWithNodeInfo.config) === null || _configWithNodeInfo$c === void 0 ? void 0 : _configWithNodeInfo$c.visible) !== 'undefined' && !((_configWithNodeInfo$c2 = configWithNodeInfo.config) !== null && _configWithNodeInfo$c2 !== void 0 && _configWithNodeInfo$c2.visible)) {
+            return null;
+          }
+          const {
+            config,
+            node
+          } = configWithNodeInfo;
+          const {
+            title,
+            getDomRef = getDomRefFromSelection,
+            items,
+            align = 'center',
+            className = '',
+            height,
+            width,
+            zIndex,
+            offset = [0, 12],
+            forcePlacement,
+            preventPopupOverflow,
+            onPositionCalculated,
+            focusTrap
+          } = config;
+          const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
+          if (!targetRef || editorDisabledPlugin && editorDisabledPlugin.editorDisabled) {
+            return null;
+          }
+          let customPositionCalculation;
+          const toolbarItems = processCopyButtonItems(editorView.state)(Array.isArray(items) ? items : items(node));
+          if (onPositionCalculated) {
+            customPositionCalculation = nextPos => {
+              return onPositionCalculated(editorView, nextPos);
+            };
+          }
+          const dispatchCommand = fn => fn && fn(editorView.state, editorView.dispatch, editorView);
 
-        // Confirm dialog
-        const {
-          confirmDialogForItem
-        } = floatingToolbarData || {};
-        const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
-        const scrollable = getFeatureFlags(editorView.state).floatingToolbarCopyButton && config.scrollable;
-        const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
-        return /*#__PURE__*/React.createElement(ErrorBoundary, {
-          component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
-          componentId: camelCase(title),
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          fallbackComponent: null
-        }, /*#__PURE__*/React.createElement(Popup, {
-          ariaLabel: title,
-          offset: offset,
-          target: targetRef,
-          alignY: "bottom",
-          forcePlacement: forcePlacement,
-          fitHeight: height,
-          fitWidth: width,
-          alignX: align,
-          stick: true,
-          zIndex: zIndex,
-          mountTo: popupsMountPoint,
-          boundariesElement: popupsBoundariesElement,
-          scrollableElement: popupsScrollableElement,
-          onPositionCalculated: customPositionCalculation,
-          style: scrollable ? {
-            maxWidth: '100%'
-          } : {},
-          focusTrap: focusTrap,
-          preventOverflow: preventPopupOverflow
-        }, /*#__PURE__*/React.createElement(ToolbarLoader, {
-          target: targetRef,
-          items: toolbarItems,
-          node: node,
-          dispatchCommand: dispatchCommand,
-          editorView: editorView,
-          className: className,
-          focusEditor: () => editorView.focus(),
-          providerFactory: providerFactory,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
-          scrollable: scrollable
-        })), /*#__PURE__*/React.createElement(ConfirmationModal, {
-          options: confirmDialogOptions,
-          onConfirm: (isChecked = false) => {
-            if (!!confirmDialogOptions.onConfirm) {
-              dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
-            } else {
-              dispatchCommand(confirmButtonItem.onClick);
+          // Confirm dialog
+          const {
+            confirmDialogForItem
+          } = floatingToolbarData || {};
+          const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
+          const scrollable = featureFlags.floatingToolbarCopyButton && config.scrollable;
+          const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
+          return /*#__PURE__*/React.createElement(ErrorBoundary, {
+            component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
+            componentId: camelCase(title),
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            fallbackComponent: null
+          }, /*#__PURE__*/React.createElement(Popup, {
+            ariaLabel: title,
+            offset: offset,
+            target: targetRef,
+            alignY: "bottom",
+            forcePlacement: forcePlacement,
+            fitHeight: height,
+            fitWidth: width,
+            alignX: align,
+            stick: true,
+            zIndex: zIndex,
+            mountTo: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            onPositionCalculated: customPositionCalculation,
+            style: scrollable ? {
+              maxWidth: '100%'
+            } : {},
+            focusTrap: focusTrap,
+            preventOverflow: preventPopupOverflow
+          }, /*#__PURE__*/React.createElement(ToolbarLoader, {
+            target: targetRef,
+            items: toolbarItems,
+            node: node,
+            dispatchCommand: dispatchCommand,
+            editorView: editorView,
+            className: className,
+            focusEditor: () => editorView.focus(),
+            providerFactory: providerFactory,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
+            scrollable: scrollable,
+            featureFlags: featureFlags
+          })), /*#__PURE__*/React.createElement(ConfirmationModal, {
+            testId: "ak-floating-toolbar-confirmation-modal",
+            options: confirmDialogOptions,
+            onConfirm: (isChecked = false) => {
+              if (!!confirmDialogOptions.onConfirm) {
+                dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
+              } else {
+                dispatchCommand(confirmButtonItem.onClick);
+              }
+            },
+            onClose: () => {
+              dispatchCommand(hideConfirmDialog());
+              // Need to set focus to Editor here,
+              // As when the Confirmation dialog pop up, and user interacts with the dialog, Editor loses focus.
+              // So when Confirmation dialog is closed, Editor does not have the focus, then cursor goes to the position 1 of the doc,
+              // instead of the cursor position before the dialog pop up.
+              if (!editorView.hasFocus()) {
+                editorView.focus();
+              }
             }
-            dispatchCommand(hideConfirmDialog());
-          } // When closed without clicking OK or cancel buttons
-          ,
-          onClose: () => {
-            dispatchCommand(hideConfirmDialog());
-          }
-        }));
-      }
-    });
-  }
-});
+          }));
+        }
+      });
+    }
+  };
+};
 export default floatingToolbarPlugin;
 
 /**

package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -62,7 +62,10 @@ export const CheckboxModal = props => {
     testId: testId ? `${testId}-cancel-button` : undefined
   }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
-    onClick: () => onConfirm(isChecked),
+    onClick: () => {
+      onConfirm(isChecked);
+      onClose();
+    },
     testId: testId ? `${testId}-confirm-button` : undefined
   }, okButtonLabel)));
 };

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

@@ -28,8 +28,11 @@ export const EmojiPickerButton = props => {
   };
   const updateEmoji = emoji => {
     setIsPopupOpen(false);
-    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
+    requestAnimationFrame(() => {
+      var _props$editorView;
+      (_props$editorView = props.editorView) === null || _props$editorView === void 0 ? void 0 : _props$editorView.focus();
+    });
   };
   const isDetachedElement = el => !document.body.contains(el);
   const handleEmojiClickOutside = e => {
@@ -41,6 +44,11 @@ export const EmojiPickerButton = props => {
       togglePopup();
     }
   };
+  const handleEmojiPressEscape = () => {
+    var _buttonRef$current;
+    setIsPopupOpen(false);
+    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+  };
   const renderPicker = providers => {
     if (!providers.emojiProvider) {
       return null;
@@ -49,7 +57,8 @@ export const EmojiPickerButton = props => {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: () => {},
-      handleClickOutside: handleEmojiClickOutside
+      handleClickOutside: handleEmojiClickOutside,
+      handleEscapeKeydown: handleEmojiPressEscape
     });
   };
   const renderPopup = () => {
@@ -66,7 +75,8 @@ export const EmojiPickerButton = props => {
       // if the toolbar is scrollable, this will be mounted in the root editor
       // we need an index of > 500 to display over it
       ,
-      zIndex: props.setDisableParentScroll ? 600 : undefined
+      zIndex: props.setDisableParentScroll ? 600 : undefined,
+      focusTrap: true
     }, jsx(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,

package/dist/es2019/plugins/floating-toolbar/ui/SimpleModal.js

@@ -26,7 +26,10 @@ export const SimpleModal = props => {
     testId: testId ? `${testId}-cancel-button` : undefined
   }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
-    onClick: () => onConfirm(),
+    onClick: () => {
+      onConfirm();
+      onClose();
+    },
     testId: testId ? `${testId}-confirm-button` : undefined
   }, okButtonLabel)));
 };

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

@@ -9,7 +9,6 @@ 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';
-import { getFeatureFlags } from '../../feature-flags-context';
 import { compareArrays, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Button from './Button';
@@ -43,12 +42,13 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   extensionsProvider,
   node,
   setDisableScroll,
-  mountRef
+  mountRef,
+  featureFlags
 }) => {
   const 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;
   const {
     useSomewhatSemanticTextColorNames
-  } = editorView ? getFeatureFlags(editorView.state) : {
+  } = featureFlags || {
     useSomewhatSemanticTextColorNames: false
   };
   return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
@@ -197,7 +197,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         }
         const {
           extendFloatingToolbar
-        } = getFeatureFlags(editorView.state) || {};
+        } = featureFlags || {};
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -451,7 +451,8 @@ class Toolbar extends Component {
     }, jsx(ToolbarItems, _extends({}, this.props, {
       setDisableScroll: this.setDisableScroll.bind(this),
       mountRef: this.mountRef,
-      mounted: this.state.mounted
+      mounted: this.state.mounted,
+      featureFlags: this.props.featureFlags
     }))), scrollable && jsx(ScrollButtons, {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,

package/dist/es2019/plugins/hyperlink/Toolbar.js

@@ -12,8 +12,6 @@ import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDT
 import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
 import { addAnalytics, ACTION_SUBJECT_ID } from '../analytics';
 import { buildVisitedLinkPayload, buildOpenedSettingsPayload } from '../../utils/linking-utils';
-import { getFeatureFlags } from '../feature-flags-context';
-
 /* type guard for edit links */
 function isEditLink(linkMark) {
   return linkMark.pos !== undefined;
@@ -43,10 +41,10 @@ function getLinkText(activeLinkMark, state) {
   }
   return activeLinkMark.node.text;
 }
-const getSettingsButtonGroup = (state, intl) => {
+const getSettingsButtonGroup = (state, intl, featureFlags) => {
   const {
     floatingToolbarLinkSettingsButton
-  } = getFeatureFlags(state);
+  } = featureFlags;
   return floatingToolbarLinkSettingsButton === 'true' ? [{
     type: 'separator'
   }, {
@@ -59,7 +57,7 @@ const getSettingsButtonGroup = (state, intl) => {
     target: '_blank'
   }] : [];
 };
-export const getToolbarConfig = options => (state, intl, providerFactory) => {
+export const getToolbarConfig = (options, featureFlags) => (state, intl, providerFactory) => {
   const {
     formatMessage
   } = intl;
@@ -72,7 +70,7 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
     lpLinkPicker,
     lpLinkPickerFocusTrap,
     preventPopupOverflow
-  } = getFeatureFlags(state);
+  } = featureFlags;
   const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
   if (linkState && linkState.activeLinkMark) {
     const {
@@ -167,21 +165,20 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
                 formatMessage: formatMessage,
                 markType: state.schema.marks.link
               }]
-            }, ...getSettingsButtonGroup(state, intl)],
+            }, ...getSettingsButtonGroup(state, intl, featureFlags)],
             scrollable: true
           };
         }
       case 'EDIT_INSERTED':
       case 'INSERT':
         {
-          var _options$linkPicker, _options$linkPicker$p;
           let link;
           if (isEditLink(activeLinkMark) && activeLinkMark.node) {
             const linkMark = activeLinkMark.node.marks.filter(mark => mark.type === state.schema.marks.link);
             link = linkMark[0] && linkMark[0].attrs.href;
           }
           const displayText = isEditLink(activeLinkMark) ? getLinkText(activeLinkMark, state) : linkState.activeText;
-          const popupHeight = lpLinkPicker && Boolean(options === null || options === void 0 ? void 0 : (_options$linkPicker = options.linkPicker) === null || _options$linkPicker === void 0 ? void 0 : (_options$linkPicker$p = _options$linkPicker.plugins) === null || _options$linkPicker$p === void 0 ? void 0 : _options$linkPicker$p.length) ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX;
+          const popupHeight = lpLinkPicker ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX;
           return {
             ...hyperLinkToolbar,
             preventPopupOverflow,
@@ -200,6 +197,7 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
                   view: view,
                   key: idx,
                   linkPickerOptions: options === null || options === void 0 ? void 0 : options.linkPicker,
+                  featureFlags: featureFlags,
                   displayUrl: link,
                   displayText: displayText || '',
                   providerFactory: providerFactory,

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

@@ -9,67 +9,71 @@ import { getToolbarConfig } from './Toolbar';
 import { tooltip, addLink } from '../../keymaps';
 import { IconLink } from '../quick-insert/assets';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-const hyperlinkPlugin = options => ({
-  name: 'hyperlink',
-  marks() {
-    return [{
-      name: 'link',
-      mark: link
-    }];
-  },
-  pmPlugins() {
-    var _options$cardOptions;
-    // Skip analytics if card provider is available, as they will be
-    // sent on handleRejected upon attempting to resolve smart link.
-    const skipAnalytics = !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider);
-    return [{
-      name: 'hyperlink',
-      plugin: ({
-        dispatch
-      }) => plugin(dispatch, options === null || options === void 0 ? void 0 : options.editorAppearance)
-    }, {
-      name: 'fakeCursorToolbarPlugin',
-      plugin: () => fakeCursorToolbarPlugin
-    }, {
-      name: 'hyperlinkInputRule',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => createInputRulePlugin(schema, skipAnalytics, featureFlags)
-    }, {
-      name: 'hyperlinkKeymap',
-      plugin: () => createKeymapPlugin(skipAnalytics)
-    }];
-  },
-  pluginsOptions: {
-    quickInsert: ({
-      formatMessage
-    }) => [{
-      id: 'hyperlink',
-      title: formatMessage(messages.link),
-      description: formatMessage(messages.linkDescription),
-      keywords: ['hyperlink', 'url'],
-      priority: 1200,
-      keyshortcut: tooltip(addLink),
-      icon: () => /*#__PURE__*/React.createElement(IconLink, null),
-      action(insert, state) {
-        const tr = insert(undefined);
-        tr.setMeta(stateKey, {
-          type: LinkAction.SHOW_INSERT_TOOLBAR,
-          inputMethod: INPUT_METHOD.QUICK_INSERT
-        });
-        return addAnalytics(state, tr, {
-          action: ACTION.INVOKED,
-          actionSubject: ACTION_SUBJECT.TYPEAHEAD,
-          actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_LINK,
-          attributes: {
+const hyperlinkPlugin = (options = {}, api) => {
+  var _api$dependencies, _api$dependencies$fea;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
+  return {
+    name: 'hyperlink',
+    marks() {
+      return [{
+        name: 'link',
+        mark: link
+      }];
+    },
+    pmPlugins() {
+      var _options$cardOptions;
+      // Skip analytics if card provider is available, as they will be
+      // sent on handleRejected upon attempting to resolve smart link.
+      const skipAnalytics = !!(options !== null && options !== void 0 && (_options$cardOptions = options.cardOptions) !== null && _options$cardOptions !== void 0 && _options$cardOptions.provider);
+      return [{
+        name: 'hyperlink',
+        plugin: ({
+          dispatch
+        }) => plugin(dispatch, options === null || options === void 0 ? void 0 : options.editorAppearance)
+      }, {
+        name: 'fakeCursorToolbarPlugin',
+        plugin: () => fakeCursorToolbarPlugin
+      }, {
+        name: 'hyperlinkInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => createInputRulePlugin(schema, skipAnalytics, featureFlags)
+      }, {
+        name: 'hyperlinkKeymap',
+        plugin: () => createKeymapPlugin(skipAnalytics)
+      }];
+    },
+    pluginsOptions: {
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'hyperlink',
+        title: formatMessage(messages.link),
+        description: formatMessage(messages.linkDescription),
+        keywords: ['hyperlink', 'url'],
+        priority: 1200,
+        keyshortcut: tooltip(addLink),
+        icon: () => /*#__PURE__*/React.createElement(IconLink, null),
+        action(insert, state) {
+          const tr = insert(undefined);
+          tr.setMeta(stateKey, {
+            type: LinkAction.SHOW_INSERT_TOOLBAR,
             inputMethod: INPUT_METHOD.QUICK_INSERT
-          },
-          eventType: EVENT_TYPE.UI
-        });
-      }
-    }],
-    floatingToolbar: getToolbarConfig(options)
-  }
-});
+          });
+          return addAnalytics(state, tr, {
+            action: ACTION.INVOKED,
+            actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+            actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_LINK,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: EVENT_TYPE.UI
+          });
+        }
+      }],
+      floatingToolbar: getToolbarConfig(options, featureFlags)
+    }
+  };
+};
 export default hyperlinkPlugin;