@atlaskit/editor-plugin-loom 5.1.2 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`265c1bf0cefa4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/265c1bf0cefa4) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
 ## 5.1.2
 
 ### 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,33 +6,12 @@ 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';
 export type LoomPlugin = NextEditorPlugin<'loom', {
-    pluginConfiguration: LoomPluginOptions;
-    dependencies: [
-        OptionalPlugin<AnalyticsPlugin>,
-        WidthPlugin,
-        HyperlinkPlugin,
-        OptionalPlugin<PrimaryToolbarPlugin>,
-        OptionalPlugin<QuickInsertPlugin>,
-        OptionalPlugin<ConnectivityPlugin>
-    ];
-    sharedState: LoomPluginState | undefined;
     actions: {
-        recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
-            inputMethod: INPUT_METHOD;
-            editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
-        }) => EditorCommand;
-        /**
-         * Insert loom into the document.
-         *
-         * @param video Video metadata (`sharedUrl` and `title`)
-         * @param positionType {'start' | 'end' | 'current'} Where you want to insert the loom
-         * @returns {boolean} If the loom was successfully inserted
-         */
-        insertLoom: (video: VideoMeta, positionType: PositionType) => boolean;
         /**
          * Given loom provider, initialise loom SDK
          * @returns error message if initialisation failed
@@ -42,5 +21,28 @@ export type LoomPlugin = NextEditorPlugin<'loom', {
         }) => Promise<{
             error?: string;
         }>;
+        /**
+         * Insert loom into the document.
+         *
+         * @param video Video metadata (`sharedUrl` and `title`)
+         * @param positionType {'start' | 'end' | 'current'} Where you want to insert the loom
+         * @returns {boolean} If the loom was successfully inserted
+         */
+        insertLoom: (video: VideoMeta, positionType: PositionType) => boolean;
+        recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
+            editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+            inputMethod: INPUT_METHOD;
+        }) => EditorCommand;
     };
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        WidthPlugin,
+        HyperlinkPlugin,
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<QuickInsertPlugin>,
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<ToolbarPlugin>
+    ];
+    pluginConfiguration: LoomPluginOptions;
+    sharedState: LoomPluginState | undefined;
 }>;

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

@@ -16,13 +16,13 @@ export declare const disableLoom: ({ error }: {
     error: string;
 }) => EditorCommand;
 export declare const recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
-    inputMethod: INPUT_METHOD;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    inputMethod: INPUT_METHOD;
 }) => EditorCommand;
 export declare const recordVideoFailed: ({ inputMethod, error, editorAnalyticsAPI, }: {
-    inputMethod: INPUT_METHOD;
-    error: SDKUnsupportedReasons | undefined;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    error: SDKUnsupportedReasons | undefined;
+    inputMethod: INPUT_METHOD;
 }) => EditorCommand;
 export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;

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

@@ -9,10 +9,10 @@ declare enum SDKUnsupportedReasons {
     NoMediaStreamsSupport = "no-media-streams-support"
 }
 export interface LoomPluginState {
+    error: SDKUnsupportedReasons | undefined;
     isEnabled: boolean;
-    loomButton: HTMLButtonElement | null;
     isRecordingVideo: boolean;
-    error: SDKUnsupportedReasons | undefined;
+    loomButton: HTMLButtonElement | null;
 }
 export declare enum LoomPluginAction {
     ENABLE = 0,
@@ -22,7 +22,7 @@ export declare enum LoomPluginAction {
 }
 export declare const loomPluginKey: PluginKey<LoomPluginState>;
 export declare const createPlugin: ({ config, api, }: {
-    config: LoomPluginOptions;
     api: ExtractInjectionAPI<LoomPlugin> | undefined;
+    config: LoomPluginOptions;
 }) => SafePlugin<LoomPluginState>;
 export {};

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

@@ -1,9 +1,9 @@
 import type React from 'react';
 import { type ButtonProps as AKButtonProps } from '@atlaskit/button';
 export type VideoMeta = {
+    duration?: number;
     sharedUrl: string;
     title: string;
-    duration?: number;
 };
 type LoomClient = {
     attachToButton: (options: {
@@ -15,11 +15,11 @@ export type PositionType = 'start' | 'end' | 'current';
 export type LoomPluginErrorMessages = 'is-supported-failure' | 'failed-to-initialise' | 'api-key-not-provided';
 export type LoomSDKErrorMessages = 'incompatible-browser' | 'third-party-cookies-disabled' | 'no-media-streams-support';
 export type GetClientResult = {
-    status: 'loaded';
     client: LoomClient;
+    status: 'loaded';
 } | {
-    status: 'error';
     message: LoomPluginErrorMessages | LoomSDKErrorMessages;
+    status: 'error';
 };
 export type GetClient = Promise<GetClientResult>;
 export type LoomProviderOptions = {

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/ToolbarButtonComponent.d.ts

@@ -8,11 +8,11 @@ import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-com
 import type { LoomPlugin } from '../loomPluginType';
 import { type ButtonComponentProps } from '../types';
 interface Props extends Omit<ButtonComponentProps, 'onClickBeforeInit'> {
-    disabled: boolean;
-    appearance: EditorAppearance;
     api: ExtractInjectionAPI<LoomPlugin> | undefined;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    appearance: EditorAppearance;
+    disabled: boolean;
     hideTooltip?: boolean;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>>, "ref"> & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>;

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,33 +6,12 @@ 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';
 export type LoomPlugin = NextEditorPlugin<'loom', {
-    pluginConfiguration: LoomPluginOptions;
-    dependencies: [
-        OptionalPlugin<AnalyticsPlugin>,
-        WidthPlugin,
-        HyperlinkPlugin,
-        OptionalPlugin<PrimaryToolbarPlugin>,
-        OptionalPlugin<QuickInsertPlugin>,
-        OptionalPlugin<ConnectivityPlugin>
-    ];
-    sharedState: LoomPluginState | undefined;
     actions: {
-        recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
-            inputMethod: INPUT_METHOD;
-            editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
-        }) => EditorCommand;
-        /**
-         * Insert loom into the document.
-         *
-         * @param video Video metadata (`sharedUrl` and `title`)
-         * @param positionType {'start' | 'end' | 'current'} Where you want to insert the loom
-         * @returns {boolean} If the loom was successfully inserted
-         */
-        insertLoom: (video: VideoMeta, positionType: PositionType) => boolean;
         /**
          * Given loom provider, initialise loom SDK
          * @returns error message if initialisation failed
@@ -42,5 +21,28 @@ export type LoomPlugin = NextEditorPlugin<'loom', {
         }) => Promise<{
             error?: string;
         }>;
+        /**
+         * Insert loom into the document.
+         *
+         * @param video Video metadata (`sharedUrl` and `title`)
+         * @param positionType {'start' | 'end' | 'current'} Where you want to insert the loom
+         * @returns {boolean} If the loom was successfully inserted
+         */
+        insertLoom: (video: VideoMeta, positionType: PositionType) => boolean;
+        recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
+            editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+            inputMethod: INPUT_METHOD;
+        }) => EditorCommand;
     };
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        WidthPlugin,
+        HyperlinkPlugin,
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<QuickInsertPlugin>,
+        OptionalPlugin<ConnectivityPlugin>,
+        OptionalPlugin<ToolbarPlugin>
+    ];
+    pluginConfiguration: LoomPluginOptions;
+    sharedState: LoomPluginState | undefined;
 }>;

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

@@ -16,13 +16,13 @@ export declare const disableLoom: ({ error }: {
     error: string;
 }) => EditorCommand;
 export declare const recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
-    inputMethod: INPUT_METHOD;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    inputMethod: INPUT_METHOD;
 }) => EditorCommand;
 export declare const recordVideoFailed: ({ inputMethod, error, editorAnalyticsAPI, }: {
-    inputMethod: INPUT_METHOD;
-    error: SDKUnsupportedReasons | undefined;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    error: SDKUnsupportedReasons | undefined;
+    inputMethod: INPUT_METHOD;
 }) => EditorCommand;
 export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;

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

@@ -9,10 +9,10 @@ declare enum SDKUnsupportedReasons {
     NoMediaStreamsSupport = "no-media-streams-support"
 }
 export interface LoomPluginState {
+    error: SDKUnsupportedReasons | undefined;
     isEnabled: boolean;
-    loomButton: HTMLButtonElement | null;
     isRecordingVideo: boolean;
-    error: SDKUnsupportedReasons | undefined;
+    loomButton: HTMLButtonElement | null;
 }
 export declare enum LoomPluginAction {
     ENABLE = 0,
@@ -22,7 +22,7 @@ export declare enum LoomPluginAction {
 }
 export declare const loomPluginKey: PluginKey<LoomPluginState>;
 export declare const createPlugin: ({ config, api, }: {
-    config: LoomPluginOptions;
     api: ExtractInjectionAPI<LoomPlugin> | undefined;
+    config: LoomPluginOptions;
 }) => SafePlugin<LoomPluginState>;
 export {};

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

@@ -1,9 +1,9 @@
 import type React from 'react';
 import { type ButtonProps as AKButtonProps } from '@atlaskit/button';
 export type VideoMeta = {
+    duration?: number;
     sharedUrl: string;
     title: string;
-    duration?: number;
 };
 type LoomClient = {
     attachToButton: (options: {
@@ -15,11 +15,11 @@ export type PositionType = 'start' | 'end' | 'current';
 export type LoomPluginErrorMessages = 'is-supported-failure' | 'failed-to-initialise' | 'api-key-not-provided';
 export type LoomSDKErrorMessages = 'incompatible-browser' | 'third-party-cookies-disabled' | 'no-media-streams-support';
 export type GetClientResult = {
-    status: 'loaded';
     client: LoomClient;
+    status: 'loaded';
 } | {
-    status: 'error';
     message: LoomPluginErrorMessages | LoomSDKErrorMessages;
+    status: 'error';
 };
 export type GetClient = Promise<GetClientResult>;
 export type LoomProviderOptions = {

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/ToolbarButtonComponent.d.ts

@@ -8,11 +8,11 @@ import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-com
 import type { LoomPlugin } from '../loomPluginType';
 import { type ButtonComponentProps } from '../types';
 interface Props extends Omit<ButtonComponentProps, 'onClickBeforeInit'> {
-    disabled: boolean;
-    appearance: EditorAppearance;
     api: ExtractInjectionAPI<LoomPlugin> | undefined;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    appearance: EditorAppearance;
+    disabled: boolean;
     hideTooltip?: boolean;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>>, "ref"> & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>;

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.2",
+	"version": "5.1.4",
 	"description": "Loom plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,38 +31,38 @@
 		"*.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.26.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.1.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^5.2.0",
 		"@atlaskit/editor-plugin-grid": "^3.1.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",