@atlaskit/editor-plugin-loom 5.1.3 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-loom
 
+## 5.1.4
+
+### Patch Changes
+
+- [`4ef462fecb522`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ef462fecb522) -
+  [ux] [ED-29003] Register loom component as a dropdown menu item in overflow menu
+- Updated dependencies
+
 ## 5.1.3
 
 ### Patch Changes

package/dist/cjs/loomPlugin.js

@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.loomPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("./pm-plugins/commands");
 var _main = require("./pm-plugins/main");
 var _PrimaryToolbarButton = require("./ui/PrimaryToolbarButton");
 var _quickInsert = require("./ui/quickInsert");
+var _toolbarComponents = require("./ui/toolbar-components");
 var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
-  var _api$analytics, _api$primaryToolbar;
+  var _api$analytics;
   var config = _ref.config,
     api = _ref.api;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var isNewToolbarEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true);
 
   // Workaround since we want to insert a loom via the `hyperlink` plugin for now.
   // The hyperlink plugin (and the card plugin) are deeply tied into using the Prosemirror Command
@@ -22,10 +25,16 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
     current: null
   };
   var primaryToolbarComponent = (0, _PrimaryToolbarButton.loomPrimaryToolbarComponent)(config, api);
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'loom',
-    component: primaryToolbarComponent
-  });
+  if (isNewToolbarEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(config, api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'loom',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'loom',
     actions: {
@@ -81,6 +90,6 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
       }
     },
     // Enable inserting Loom recordings through main toolbar
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isNewToolbarEnabled ? primaryToolbarComponent : undefined
   };
 };

package/dist/cjs/ui/LoomMenuItem.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoomMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../pm-plugins/commands");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var useLoomEnabled = function useLoomEnabled(api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['loom'], function (states) {
+      var _states$loomState;
+      return {
+        loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled
+      };
+    }),
+    loomEnabled = _useSharedPluginState.loomEnabled;
+  return loomEnabled;
+};
+var LoomMenuItem = exports.LoomMenuItem = function LoomMenuItem(_ref) {
+  var api = _ref.api,
+    renderButton = _ref.renderButton;
+  var loomEnabled = useLoomEnabled(api);
+  if (renderButton) {
+    return renderButton(CustomisableLoomMenuItem(api));
+  } else if (loomEnabled !== undefined) {
+    return /*#__PURE__*/_react.default.createElement(DefaultLoomMenuItem, {
+      api: api
+    });
+  }
+};
+var CustomisableLoomMenuItem = function CustomisableLoomMenuItem(api) {
+  return /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+    var _ref2$isDisabled = _ref2.isDisabled,
+      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+      onClickBeforeInit = _ref2.onClickBeforeInit,
+      href = _ref2.href,
+      target = _ref2.target,
+      rel = _ref2.rel;
+    var loomEnabled = !!useLoomEnabled(api);
+    var handleOnClick = (0, _react.useCallback)(function (e) {
+      if (loomEnabled) {
+        (0, _commands.executeRecordVideo)(api);
+      } else if (onClickBeforeInit && e.type === 'click' && e.target instanceof HTMLElement) {
+        onClickBeforeInit(e);
+      }
+    }, [loomEnabled, onClickBeforeInit]);
+    return /*#__PURE__*/_react.default.createElement(MenuItemComponent, {
+      ref: ref
+      // Ignore href if Loom is enabled so that it doesn't interfere with recording
+      ,
+      href: loomEnabled ? undefined : href,
+      disabled: isDisabled,
+      onClick: handleOnClick,
+      target: target,
+      rel: rel
+    });
+  });
+};
+var DefaultLoomMenuItem = function DefaultLoomMenuItem(_ref3) {
+  var api = _ref3.api;
+  var loomEnabled = useLoomEnabled(api);
+  var handleOnClick = (0, _react.useCallback)(function () {
+    return (0, _commands.executeRecordVideo)(api);
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(MenuItemComponent, {
+    disabled: !loomEnabled,
+    onClick: handleOnClick
+  });
+};
+var MenuItemComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
+  var disabled = _ref4.disabled,
+    _onClick = _ref4.onClick,
+    href = _ref4.href,
+    target = _ref4.target,
+    rel = _ref4.rel;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.LoomIcon, {
+      label: ""
+    }),
+    isDisabled: disabled,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: function onClick(e) {
+      return _onClick(e);
+    }
+  }, formatMessage(editorAppearance === 'comment' ? _messages.toolbarInsertBlockMessages.addLoomVideoComment : _messages.toolbarInsertBlockMessages.addLoomVideo));
+});

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

@@ -0,0 +1,46 @@
+"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 _editorToolbar = require("@atlaskit/editor-toolbar");
+var _LoomMenuItem = require("./LoomMenuItem");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(config, api) {
+  return [{
+    type: _toolbar.LOOM_MENU_SECTION.type,
+    key: _toolbar.LOOM_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.OVERFLOW_MENU.type,
+      key: _toolbar.OVERFLOW_MENU.key,
+      rank: _toolbar.OVERFLOW_MENU_RANK[_toolbar.LOOM_MENU_SECTION.key]
+    }, {
+      type: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+      key: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+      rank: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK[_toolbar.LOOM_MENU_SECTION.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
+  }, {
+    type: _toolbar.LOOM_MENU_ITEM.type,
+    key: _toolbar.LOOM_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LOOM_MENU_SECTION.type,
+      key: _toolbar.LOOM_MENU_SECTION.key,
+      rank: _toolbar.LOOM_MENU_SECTION_RANK[_toolbar.LOOM_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_LoomMenuItem.LoomMenuItem, {
+        api: api,
+        renderButton: config.renderButton
+      });
+    }
+  }];
+};

package/dist/es2019/loomPlugin.js

@@ -1,14 +1,17 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertLoom, recordVideo, setupLoom } from './pm-plugins/commands';
 import { createPlugin, loomPluginKey } from './pm-plugins/main';
 import { loomPrimaryToolbarComponent } from './ui/PrimaryToolbarButton';
 import { getQuickInsertItem } from './ui/quickInsert';
+import { getToolbarComponents } from './ui/toolbar-components';
 export const loomPlugin = ({
   config,
   api
 }) => {
-  var _api$analytics, _api$primaryToolbar;
+  var _api$analytics;
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const isNewToolbarEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true);
 
   // Workaround since we want to insert a loom via the `hyperlink` plugin for now.
   // The hyperlink plugin (and the card plugin) are deeply tied into using the Prosemirror Command
@@ -17,10 +20,16 @@ export const loomPlugin = ({
     current: null
   };
   const primaryToolbarComponent = loomPrimaryToolbarComponent(config, api);
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-    name: 'loom',
-    component: primaryToolbarComponent
-  });
+  if (isNewToolbarEnabled) {
+    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(config, api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'loom',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'loom',
     actions: {
@@ -71,6 +80,6 @@ export const loomPlugin = ({
       }
     },
     // Enable inserting Loom recordings through main toolbar
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isNewToolbarEnabled ? primaryToolbarComponent : undefined
   };
 };

package/dist/es2019/ui/LoomMenuItem.js

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { LoomIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { executeRecordVideo } from '../pm-plugins/commands';
+const useLoomEnabled = api => {
+  const {
+    loomEnabled
+  } = useSharedPluginStateWithSelector(api, ['loom'], states => {
+    var _states$loomState;
+    return {
+      loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled
+    };
+  });
+  return loomEnabled;
+};
+export const LoomMenuItem = ({
+  api,
+  renderButton
+}) => {
+  const loomEnabled = useLoomEnabled(api);
+  if (renderButton) {
+    return renderButton(CustomisableLoomMenuItem(api));
+  } else if (loomEnabled !== undefined) {
+    return /*#__PURE__*/React.createElement(DefaultLoomMenuItem, {
+      api: api
+    });
+  }
+};
+const CustomisableLoomMenuItem = api => /*#__PURE__*/React.forwardRef(({
+  isDisabled = false,
+  onClickBeforeInit,
+  href,
+  target,
+  rel
+}, ref) => {
+  const loomEnabled = !!useLoomEnabled(api);
+  const handleOnClick = useCallback(e => {
+    if (loomEnabled) {
+      executeRecordVideo(api);
+    } else if (onClickBeforeInit && e.type === 'click' && e.target instanceof HTMLElement) {
+      onClickBeforeInit(e);
+    }
+  }, [loomEnabled, onClickBeforeInit]);
+  return /*#__PURE__*/React.createElement(MenuItemComponent, {
+    ref: ref
+    // Ignore href if Loom is enabled so that it doesn't interfere with recording
+    ,
+    href: loomEnabled ? undefined : href,
+    disabled: isDisabled,
+    onClick: handleOnClick,
+    target: target,
+    rel: rel
+  });
+});
+const DefaultLoomMenuItem = ({
+  api
+}) => {
+  const loomEnabled = useLoomEnabled(api);
+  const handleOnClick = useCallback(() => executeRecordVideo(api), [api]);
+  return /*#__PURE__*/React.createElement(MenuItemComponent, {
+    disabled: !loomEnabled,
+    onClick: handleOnClick
+  });
+};
+const MenuItemComponent = /*#__PURE__*/React.forwardRef(({
+  disabled,
+  onClick,
+  href,
+  target,
+  rel
+}, ref) => {
+  const {
+    editorAppearance
+  } = useEditorToolbar();
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+      label: ""
+    }),
+    isDisabled: disabled,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: e => onClick(e)
+  }, formatMessage(editorAppearance === 'comment' ? messages.addLoomVideoComment : messages.addLoomVideo));
+});

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { LOOM_MENU_SECTION, OVERFLOW_MENU_RANK, OVERFLOW_MENU, LOOM_MENU_ITEM, LOOM_MENU_SECTION_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { LoomMenuItem } from './LoomMenuItem';
+export const getToolbarComponents = (config, api) => {
+  return [{
+    type: LOOM_MENU_SECTION.type,
+    key: LOOM_MENU_SECTION.key,
+    parents: [{
+      type: OVERFLOW_MENU.type,
+      key: OVERFLOW_MENU.key,
+      rank: OVERFLOW_MENU_RANK[LOOM_MENU_SECTION.key]
+    }, {
+      type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+      key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+      rank: OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK[LOOM_MENU_SECTION.key]
+    }],
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
+  }, {
+    type: LOOM_MENU_ITEM.type,
+    key: LOOM_MENU_ITEM.key,
+    parents: [{
+      type: LOOM_MENU_SECTION.type,
+      key: LOOM_MENU_SECTION.key,
+      rank: LOOM_MENU_SECTION_RANK[LOOM_MENU_ITEM.key]
+    }],
+    component: () => {
+      return /*#__PURE__*/React.createElement(LoomMenuItem, {
+        api: api,
+        renderButton: config.renderButton
+      });
+    }
+  }];
+};

package/dist/esm/loomPlugin.js

@@ -1,13 +1,16 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { insertLoom as _insertLoom, recordVideo, setupLoom } from './pm-plugins/commands';
 import { createPlugin, loomPluginKey } from './pm-plugins/main';
 import { loomPrimaryToolbarComponent } from './ui/PrimaryToolbarButton';
 import { getQuickInsertItem } from './ui/quickInsert';
+import { getToolbarComponents } from './ui/toolbar-components';
 export var loomPlugin = function loomPlugin(_ref) {
-  var _api$analytics, _api$primaryToolbar;
+  var _api$analytics;
   var config = _ref.config,
     api = _ref.api;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var isNewToolbarEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true) && expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true);
 
   // Workaround since we want to insert a loom via the `hyperlink` plugin for now.
   // The hyperlink plugin (and the card plugin) are deeply tied into using the Prosemirror Command
@@ -16,10 +19,16 @@ export var loomPlugin = function loomPlugin(_ref) {
     current: null
   };
   var primaryToolbarComponent = loomPrimaryToolbarComponent(config, api);
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'loom',
-    component: primaryToolbarComponent
-  });
+  if (isNewToolbarEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(config, api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'loom',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'loom',
     actions: {
@@ -75,6 +84,6 @@ export var loomPlugin = function loomPlugin(_ref) {
       }
     },
     // Enable inserting Loom recordings through main toolbar
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isNewToolbarEnabled ? primaryToolbarComponent : undefined
   };
 };

package/dist/esm/ui/LoomMenuItem.js

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { LoomIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { executeRecordVideo } from '../pm-plugins/commands';
+var useLoomEnabled = function useLoomEnabled(api) {
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['loom'], function (states) {
+      var _states$loomState;
+      return {
+        loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled
+      };
+    }),
+    loomEnabled = _useSharedPluginState.loomEnabled;
+  return loomEnabled;
+};
+export var LoomMenuItem = function LoomMenuItem(_ref) {
+  var api = _ref.api,
+    renderButton = _ref.renderButton;
+  var loomEnabled = useLoomEnabled(api);
+  if (renderButton) {
+    return renderButton(CustomisableLoomMenuItem(api));
+  } else if (loomEnabled !== undefined) {
+    return /*#__PURE__*/React.createElement(DefaultLoomMenuItem, {
+      api: api
+    });
+  }
+};
+var CustomisableLoomMenuItem = function CustomisableLoomMenuItem(api) {
+  return /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+    var _ref2$isDisabled = _ref2.isDisabled,
+      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+      onClickBeforeInit = _ref2.onClickBeforeInit,
+      href = _ref2.href,
+      target = _ref2.target,
+      rel = _ref2.rel;
+    var loomEnabled = !!useLoomEnabled(api);
+    var handleOnClick = useCallback(function (e) {
+      if (loomEnabled) {
+        executeRecordVideo(api);
+      } else if (onClickBeforeInit && e.type === 'click' && e.target instanceof HTMLElement) {
+        onClickBeforeInit(e);
+      }
+    }, [loomEnabled, onClickBeforeInit]);
+    return /*#__PURE__*/React.createElement(MenuItemComponent, {
+      ref: ref
+      // Ignore href if Loom is enabled so that it doesn't interfere with recording
+      ,
+      href: loomEnabled ? undefined : href,
+      disabled: isDisabled,
+      onClick: handleOnClick,
+      target: target,
+      rel: rel
+    });
+  });
+};
+var DefaultLoomMenuItem = function DefaultLoomMenuItem(_ref3) {
+  var api = _ref3.api;
+  var loomEnabled = useLoomEnabled(api);
+  var handleOnClick = useCallback(function () {
+    return executeRecordVideo(api);
+  }, [api]);
+  return /*#__PURE__*/React.createElement(MenuItemComponent, {
+    disabled: !loomEnabled,
+    onClick: handleOnClick
+  });
+};
+var MenuItemComponent = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var disabled = _ref4.disabled,
+    _onClick = _ref4.onClick,
+    href = _ref4.href,
+    target = _ref4.target,
+    rel = _ref4.rel;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorAppearance = _useEditorToolbar.editorAppearance;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+      label: ""
+    }),
+    isDisabled: disabled,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: function onClick(e) {
+      return _onClick(e);
+    }
+  }, formatMessage(editorAppearance === 'comment' ? messages.addLoomVideoComment : messages.addLoomVideo));
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { LOOM_MENU_SECTION, OVERFLOW_MENU_RANK, OVERFLOW_MENU, LOOM_MENU_ITEM, LOOM_MENU_SECTION_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK, OVERFLOW_MENU_PRIMARY_TOOLBAR } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
+import { LoomMenuItem } from './LoomMenuItem';
+export var getToolbarComponents = function getToolbarComponents(config, api) {
+  return [{
+    type: LOOM_MENU_SECTION.type,
+    key: LOOM_MENU_SECTION.key,
+    parents: [{
+      type: OVERFLOW_MENU.type,
+      key: OVERFLOW_MENU.key,
+      rank: OVERFLOW_MENU_RANK[LOOM_MENU_SECTION.key]
+    }, {
+      type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
+      key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
+      rank: OVERFLOW_MENU_PRIMARY_TOOLBAR_RANK[LOOM_MENU_SECTION.key]
+    }],
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
+  }, {
+    type: LOOM_MENU_ITEM.type,
+    key: LOOM_MENU_ITEM.key,
+    parents: [{
+      type: LOOM_MENU_SECTION.type,
+      key: LOOM_MENU_SECTION.key,
+      rank: LOOM_MENU_SECTION_RANK[LOOM_MENU_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(LoomMenuItem, {
+        api: api,
+        renderButton: config.renderButton
+      });
+    }
+  }];
+};

package/dist/types/loomPluginType.d.ts

@@ -6,6 +6,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import { type QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { LoomPluginState } from './pm-plugins/main';
 import type { LoomPluginOptions, LoomProviderOptions, PositionType, VideoMeta } from './types';
@@ -39,7 +40,8 @@ export type LoomPlugin = NextEditorPlugin<'loom', {
         HyperlinkPlugin,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<QuickInsertPlugin>,
-        OptionalPlugin<ConnectivityPlugin>
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     pluginConfiguration: LoomPluginOptions;
     sharedState: LoomPluginState | undefined;

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

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LoomPlugin } from '../loomPluginType';
+import type { LoomPluginOptions } from '../types';
+export declare const LoomMenuItem: ({ api, renderButton, }: {
+    api: ExtractInjectionAPI<LoomPlugin> | undefined;
+} & Pick<LoomPluginOptions, "renderButton">) => JSX.Element | null | undefined;

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

@@ -0,0 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { LoomPlugin } from '../loomPluginType';
+import type { LoomPluginOptions } from '../types';
+export declare const getToolbarComponents: (config: LoomPluginOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined) => RegisterComponent[];

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

@@ -6,6 +6,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import { type QuickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { LoomPluginState } from './pm-plugins/main';
 import type { LoomPluginOptions, LoomProviderOptions, PositionType, VideoMeta } from './types';
@@ -39,7 +40,8 @@ export type LoomPlugin = NextEditorPlugin<'loom', {
         HyperlinkPlugin,
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<QuickInsertPlugin>,
-        OptionalPlugin<ConnectivityPlugin>
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     pluginConfiguration: LoomPluginOptions;
     sharedState: LoomPluginState | undefined;

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

@@ -0,0 +1,6 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LoomPlugin } from '../loomPluginType';
+import type { LoomPluginOptions } from '../types';
+export declare const LoomMenuItem: ({ api, renderButton, }: {
+    api: ExtractInjectionAPI<LoomPlugin> | undefined;
+} & Pick<LoomPluginOptions, "renderButton">) => JSX.Element | null | undefined;

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

@@ -0,0 +1,5 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import type { LoomPlugin } from '../loomPluginType';
+import type { LoomPluginOptions } from '../types';
+export declare const getToolbarComponents: (config: LoomPluginOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-loom",
-	"version": "5.1.3",
+	"version": "5.1.4",
 	"description": "Loom plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,35 +31,35 @@
 		"*.compiled.css"
 	],
 	"atlaskit:src": "src/index.ts",
-	"af:exports": {
-		".": "./src/index.ts"
-	},
 	"dependencies": {
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-hyperlink": "^5.4.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^3.0.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.4.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^28.0.0",
+		"@atlaskit/editor-toolbar": "^0.5.0",
+		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^6.0.0",
+		"@atlaskit/tmp-editor-statsig": "^11.9.0",
+		"@atlaskit/tokens": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@loomhq/record-sdk": "^2.36.18"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.28.0",
+		"@atlaskit/editor-common": "^107.33.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"@atlaskit/editor-plugin-base": "^4.1.0",
-		"@atlaskit/editor-plugin-card": "^7.4.0",
+		"@atlaskit/editor-plugin-card": "^7.6.0",
 		"@atlaskit/editor-plugin-copy-button": "^3.0.0",
-		"@atlaskit/editor-plugin-decorations": "^3.0.0",
+		"@atlaskit/editor-plugin-decorations": "^3.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^2.0.0",
 		"@atlaskit/editor-plugin-floating-toolbar": "^5.2.0",