@atlaskit/editor-plugin-loom 2.8.4 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-loom
 
+## 3.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.0.0
+
+### Major Changes
+
+- [#143146](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/143146)
+  [`8f698f1278514`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f698f1278514) -
+  [ux] [ED-24905] Main change: make loom plugin config, loomProvider, optional, and add optional
+  config, renderButton, to support customising loom button, e.g. adding pulse, spotlight. This
+  change is required to support loom cross-sell flow. In this flow, loom SDK will not be initialised
+  unless loomProvider is passed in. Once loomProvider is ready, `initLoom` action can be used to
+  initialise SDK. This change should be backwards compatible and will not impact the existing flow.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.8.4
 
 ### Patch Changes

package/dist/cjs/commands.js

@@ -1,11 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.recordVideoFailed = exports.recordVideo = exports.insertVideo = exports.insertLoom = exports.enableLoom = exports.disableLoom = void 0;
+exports.setupLoom = exports.recordVideoFailed = exports.recordVideo = exports.insertVideo = exports.insertLoom = exports.executeRecordVideo = exports.enableLoom = exports.disableLoom = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _pmPlugin = require("./pm-plugin");
+var _quickInsert = require("./ui/quickInsert");
 var enableLoom = exports.enableLoom = function enableLoom(_ref) {
   var loomButton = _ref.loomButton;
   return function (_ref2) {
@@ -116,4 +121,106 @@ var insertLoom = exports.insertLoom = function insertLoom(editorView, api, video
     to = _getPositions.to;
   return (_api$hyperlink$action = api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? void 0 : _api$hyperlink.actions.insertLink(_analytics.INPUT_METHOD.TYPEAHEAD, from, to, video.sharedUrl, video.title, undefined, undefined, undefined, 'embed' // Convert to embed card instead of inline
   )(state, dispatch)) !== null && _api$hyperlink$action !== void 0 ? _api$hyperlink$action : false;
-};
+};
+var executeRecordVideo = exports.executeRecordVideo = function executeRecordVideo(api) {
+  var _api$core, _api$analytics;
+  api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(recordVideo({
+    inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
+    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+  }));
+};
+var setupLoom = exports.setupLoom = /*#__PURE__*/function () {
+  var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(loomProvider, api, editorView, isAfterEditorLoaded) {
+    var _api$core4;
+    var clientResult, _api$core2, _api$analytics2, attachToButton, loomButton, _api$analytics6;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return loomProvider.getClient();
+        case 2:
+          clientResult = _context.sent;
+          if (!(clientResult.status === 'error')) {
+            _context.next = 8;
+            break;
+          }
+          api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(disableLoom({
+            error: clientResult.message
+          }));
+          (0, _monitoring.logException)(new Error(clientResult.message), {
+            location: 'editor-plugin-loom/sdk-initialisation'
+          });
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
+            action: _analytics.ACTION.ERRORED,
+            actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              error: clientResult.message
+            }
+          });
+          return _context.abrupt("return", {
+            error: clientResult.message
+          });
+        case 8:
+          attachToButton = clientResult.client.attachToButton; // Hidden element to work around the SDK API
+          loomButton = document.createElement('button');
+          attachToButton({
+            button: loomButton,
+            onInsert: function onInsert(video) {
+              var _api$hyperlink2, _api$core3, _api$analytics3;
+              if (!editorView) {
+                return;
+              }
+              var state = editorView.state,
+                dispatch = editorView.dispatch;
+              var pos = state.selection.from;
+              api === null || api === void 0 || (_api$hyperlink2 = api.hyperlink) === null || _api$hyperlink2 === void 0 || _api$hyperlink2.actions.insertLink(_analytics.INPUT_METHOD.TYPEAHEAD, pos,
+              // from === to, don't replace text to avoid accidental content loss
+              pos, video.sharedUrl, video.title, undefined, undefined, undefined, 'embed' // Convert to embed card instead of inline
+              )(state, dispatch);
+              api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(insertVideo({
+                editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions,
+                video: video
+              }));
+            }
+          });
+          api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 || _api$core4.actions.execute(function (_ref12) {
+            var tr = _ref12.tr;
+            enableLoom({
+              loomButton: loomButton
+            })({
+              tr: tr
+            });
+            if (isAfterEditorLoaded) {
+              var _api$quickInsert, _api$analytics4, _api$analytics5;
+              api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.commands.addQuickInsertItem((0, _quickInsert.getQuickInsertItem)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions))({
+                tr: tr
+              });
+              api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.attachAnalyticsEvent({
+                action: _analytics.ACTION.INITIALISED,
+                actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+                eventType: _analytics.EVENT_TYPE.OPERATIONAL
+              })(tr);
+            }
+            return tr;
+          });
+          if (!isAfterEditorLoaded) {
+            // We're not combining the analytics steps into the enable / disable commands because the collab-edit plugin
+            // filters out any transactions with steps (even analytics) when it's initialising
+            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || _api$analytics6.actions.fireAnalyticsEvent({
+              action: _analytics.ACTION.INITIALISED,
+              actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            });
+          }
+          return _context.abrupt("return", {});
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function setupLoom(_x, _x2, _x3, _x4) {
+    return _ref11.apply(this, arguments);
+  };
+}();

package/dist/cjs/plugin.js

@@ -1,19 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.loomPlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _messages = require("@atlaskit/editor-common/messages");
-var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _logo = require("@atlaskit/logo");
 var _commands = require("./commands");
 var _pmPlugin = require("./pm-plugin");
-var _ToolbarButton = _interopRequireDefault(require("./ui/ToolbarButton"));
+var _PrimaryToolbarButton = require("./ui/PrimaryToolbarButton");
+var _quickInsert = require("./ui/quickInsert");
 var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
   var _api$analytics, _api$primaryToolbar;
   var config = _ref.config,
@@ -26,18 +21,7 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
   var editorViewRef = {
     current: null
   };
-  var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
-    var disabled = _ref2.disabled,
-      appearance = _ref2.appearance;
-    if (!config.shouldShowToolbarButton) {
-      return null;
-    }
-    return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
-      disabled: disabled,
-      api: api,
-      appearance: appearance
-    });
-  };
+  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
@@ -48,6 +32,10 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
       recordVideo: _commands.recordVideo,
       insertLoom: function insertLoom(video, positionType) {
         return (0, _commands.insertLoom)(editorViewRef.current, api, video, positionType);
+      },
+      initLoom: function initLoom(_ref2) {
+        var loomProvider = _ref2.loomProvider;
+        return (0, _commands.setupLoom)(loomProvider, api, editorViewRef.current, true);
       }
     },
     pmPlugins: function pmPlugins() {
@@ -85,45 +73,11 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
     },
     pluginsOptions: {
       // Enable inserting Loom recordings through the slash command
-      quickInsert: function quickInsert(_ref3) {
-        var formatMessage = _ref3.formatMessage;
-        return [{
-          id: 'loom',
-          title: formatMessage(_messages.toolbarInsertBlockMessages.recordVideo),
-          description: formatMessage(_messages.toolbarInsertBlockMessages.recordVideoDescription),
-          keywords: ['loom', 'record', 'video'],
-          priority: 800,
-          icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_logo.LoomIcon, {
-              appearance: "brand"
-            });
-          },
-          action: function action(insert, editorState) {
-            var _recordVideo;
-            var tr = insert(undefined);
-            var loomState = _pmPlugin.loomPluginKey.getState(editorState);
-            if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
-              var _recordVideoFailed;
-              var errorMessage = loomState === null || loomState === void 0 ? void 0 : loomState.error;
-              (0, _monitoring.logException)(new Error(errorMessage), {
-                location: 'editor-plugin-loom/quick-insert-record-video'
-              });
-              return (_recordVideoFailed = (0, _commands.recordVideoFailed)({
-                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
-                error: errorMessage,
-                editorAnalyticsAPI: editorAnalyticsAPI
-              })({
-                tr: tr
-              })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
-            }
-            return (_recordVideo = (0, _commands.recordVideo)({
-              inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
-              editorAnalyticsAPI: editorAnalyticsAPI
-            })({
-              tr: tr
-            })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
-          }
-        }];
+      quickInsert: function quickInsert(intl) {
+        if (config.loomProvider) {
+          return (0, _quickInsert.getQuickInsertItem)(editorAnalyticsAPI)(intl);
+        }
+        return [];
       }
     },
     // Enable inserting Loom recordings through main toolbar

package/dist/cjs/pm-plugin.js

@@ -5,11 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.loomPluginKey = exports.createPlugin = exports.LoomPluginAction = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _commands = require("./commands");
@@ -24,10 +20,8 @@ var LoomPluginAction = exports.LoomPluginAction = /*#__PURE__*/function (LoomPlu
 }({});
 var loomPluginKey = exports.loomPluginKey = new _state.PluginKey('loom');
 var createPlugin = exports.createPlugin = function createPlugin(_ref) {
-  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;
   return new _safePlugin.SafePlugin({
     key: loomPluginKey,
     state: {
@@ -74,78 +68,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       }
     },
     view: function view(editorView) {
-      var setupLoom = /*#__PURE__*/function () {
-        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-          var _api$core3, _api$analytics3;
-          var clientResult, _api$core, _api$analytics2, attachToButton, loomButton;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return config.loomProvider.getClient();
-              case 2:
-                clientResult = _context.sent;
-                if (!(clientResult.status === 'error')) {
-                  _context.next = 8;
-                  break;
-                }
-                api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute((0, _commands.disableLoom)({
-                  error: clientResult.message
-                }));
-                (0, _monitoring.logException)(new Error(clientResult.message), {
-                  location: 'editor-plugin-loom/sdk-initialisation'
-                });
-                api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
-                  action: _analytics.ACTION.ERRORED,
-                  actionSubject: _analytics.ACTION_SUBJECT.LOOM,
-                  eventType: _analytics.EVENT_TYPE.OPERATIONAL,
-                  attributes: {
-                    error: clientResult.message
-                  }
-                });
-                return _context.abrupt("return");
-              case 8:
-                attachToButton = clientResult.client.attachToButton; // Hidden element to work around the SDK API
-                loomButton = document.createElement('button');
-                attachToButton({
-                  button: loomButton,
-                  onInsert: function onInsert(video) {
-                    var _api$hyperlink, _api$core2;
-                    var state = editorView.state,
-                      dispatch = editorView.dispatch;
-                    var pos = editorView.state.selection.from;
-                    api === null || api === void 0 || (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 || _api$hyperlink.actions.insertLink(_analytics.INPUT_METHOD.TYPEAHEAD, pos,
-                    // from === to, don't replace text to avoid accidental content loss
-                    pos, video.sharedUrl, video.title, undefined, undefined, undefined, 'embed' // Convert to embed card instead of inline
-                    )(state, dispatch);
-                    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute((0, _commands.insertVideo)({
-                      editorAnalyticsAPI: editorAnalyticsAPI,
-                      video: video
-                    }));
-                  }
-                });
-                api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute((0, _commands.enableLoom)({
-                  loomButton: loomButton
-                }));
-                // We're not combining the analytics steps into the enable / disable commands because the collab-edit plugin
-                // filters out any transactions with steps (even analytics) when it's initialising
-                api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 || _api$analytics3.actions.fireAnalyticsEvent({
-                  action: _analytics.ACTION.INITIALISED,
-                  actionSubject: _analytics.ACTION_SUBJECT.LOOM,
-                  eventType: _analytics.EVENT_TYPE.OPERATIONAL
-                });
-              case 13:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function setupLoom() {
-          return _ref2.apply(this, arguments);
-        };
-      }();
-      if (config) {
-        setupLoom();
+      if (config.loomProvider) {
+        (0, _commands.setupLoom)(config.loomProvider, api, editorView);
       }
       return {};
     }

package/dist/cjs/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/PrimaryToolbarButton.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loomPrimaryToolbarComponent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _commands = require("../commands");
+var _pmPlugin = require("../pm-plugin");
+var _ToolbarButtonComponent = _interopRequireDefault(require("./ToolbarButtonComponent"));
+var _excluded = ["onClickBeforeInit", "isDisabled", "href"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(editorView, disabled, appearance, api) {
+  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+    var _loomPluginKey$getSta;
+    var onClickBeforeInit = props.onClickBeforeInit,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      href = props.href,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    var isLoomEnabled = (_loomPluginKey$getSta = _pmPlugin.loomPluginKey.getState(editorView.state)) === null || _loomPluginKey$getSta === void 0 ? void 0 : _loomPluginKey$getSta.isEnabled;
+    var handleOnClick = (0, _react.useCallback)(function (e) {
+      if (isLoomEnabled) {
+        (0, _commands.executeRecordVideo)(api);
+      } else {
+        onClickBeforeInit && onClickBeforeInit(e);
+      }
+    }, [isLoomEnabled, onClickBeforeInit]);
+    return (0, _react2.jsx)(_ToolbarButtonComponent.default, (0, _extends2.default)({
+      ref: ref,
+      hideTooltip: !!(restProps.onMouseEnter || restProps.onMouseLeave)
+      // Ignore href if Loom is enabled so that it doesn't interfere with recording
+      ,
+      href: isLoomEnabled ? undefined : href,
+      disabled: disabled || isDisabled,
+      api: api,
+      appearance: appearance,
+      onClick: function onClick(e) {
+        return handleOnClick(e);
+      }
+    }, restProps));
+  });
+};
+var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
+  var disabled = _ref.disabled,
+    api = _ref.api,
+    appearance = _ref.appearance;
+  var handleOnClick = (0, _react.useCallback)(function () {
+    return (0, _commands.executeRecordVideo)(api);
+  }, [api]);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom']),
+    loomState = _useSharedPluginState.loomState;
+  if (!loomState) {
+    return null;
+  }
+  return (0, _react2.jsx)(_ToolbarButtonComponent.default
+  // Disable the icon while the SDK isn't initialised
+  , {
+    disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
+    api: api,
+    appearance: appearance,
+    onClick: handleOnClick
+  });
+};
+var loomPrimaryToolbarComponent = exports.loomPrimaryToolbarComponent = function loomPrimaryToolbarComponent(config, api) {
+  return function (_ref2) {
+    var disabled = _ref2.disabled,
+      appearance = _ref2.appearance,
+      editorView = _ref2.editorView;
+    if (config.shouldShowToolbarButton === false) {
+      return null;
+    }
+    if (config.renderButton) {
+      return config.renderButton(CustomisableLoomToolbarButton(editorView, disabled, appearance, api));
+    }
+    if (config.shouldShowToolbarButton) {
+      return (0, _react2.jsx)(LoomToolbarButtonWrapper
+      // Disable the icon while the SDK isn't initialised
+      , {
+        disabled: disabled,
+        api: api,
+        appearance: appearance
+      });
+    }
+    return null;
+  };
+};

package/dist/cjs/ui/{ToolbarButton.js → ToolbarButtonComponent.js}

@@ -1,57 +1,76 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _logo = require("@atlaskit/logo");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _commands = require("../commands");
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // This const is derived from the breakpoint where the toolbar hides its icons. It is used to hide the text in the AI button.
 // Derived from values from platform/packages/editor/editor-core/src/ui/Appearance/FullPage/MainToolbar.tsx
 var LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
-var LoomToolbarButton = function LoomToolbarButton(_ref) {
+var LoomToolbarButtonInternal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     api = _ref.api,
     appearance = _ref.appearance,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    selected = _ref.selected,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    ariaControls = _ref['aria-controls'],
+    ariaExpanded = _ref['aria-expanded'],
+    ariaHasPopup = _ref['aria-haspopup'],
+    dataDsLevel = _ref['data-ds--level'],
+    onClick = _ref.onClick,
+    href = _ref.href,
+    target = _ref.target,
+    hideTooltip = _ref.hideTooltip;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom', 'width']),
-    loomState = _useSharedPluginState.loomState,
     widthState = _useSharedPluginState.widthState;
-  if (!loomState) {
-    return null;
-  }
   var label = formatMessage(appearance === 'comment' ? _messages.toolbarInsertBlockMessages.addLoomVideoComment : _messages.toolbarInsertBlockMessages.addLoomVideo);
   var shouldShowRecordText = (0, _platformFeatureFlags.fg)('platform.editor.plugin.loom.responsive-menu_4at4a') && ((widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT;
-  return (0, _react.jsx)(_uiMenu.ToolbarButton, {
+  return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+    hideTooltip: hideTooltip,
+    ref: ref,
+    href: href,
     buttonId: _uiMenu.TOOLBAR_BUTTON.RECORD_VIDEO,
-    onClick: function onClick() {
-      var _api$core, _api$analytics;
-      return api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute((0, _commands.recordVideo)({
-        inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
-        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
-      }));
-    }
-    // Disable the icon while the SDK isn't initialised
-    ,
-    disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
+    disabled: disabled,
     title: label,
-    iconBefore: (0, _react.jsx)(_logo.LoomIcon, {
+    iconBefore: (0, _react2.jsx)(_logo.LoomIcon, {
       label: label,
       size: "small"
-    })
+    }),
+    selected: selected,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "data-ds--level": dataDsLevel,
+    onClick: onClick,
+    target: target
   }, shouldShowRecordText && formatMessage(_messages.toolbarInsertBlockMessages.recordLoomShortTitle));
-};
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(LoomToolbarButton);
+});
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(LoomToolbarButtonInternal, {
+  forwardRef: true
+});

package/dist/cjs/ui/quickInsert.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuickInsertItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _logo = require("@atlaskit/logo");
+var _commands = require("../commands");
+var _pmPlugin = require("../pm-plugin");
+var getQuickInsertItem = exports.getQuickInsertItem = function getQuickInsertItem(editorAnalyticsAPI) {
+  return function (_ref) {
+    var formatMessage = _ref.formatMessage;
+    return [{
+      id: 'loom',
+      title: formatMessage(_messages.toolbarInsertBlockMessages.recordVideo),
+      description: formatMessage(_messages.toolbarInsertBlockMessages.recordVideoDescription),
+      keywords: ['loom', 'record', 'video'],
+      priority: 800,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_logo.LoomIcon, {
+          appearance: "brand"
+        });
+      },
+      action: function action(insert, editorState) {
+        var _recordVideo;
+        var tr = insert(undefined);
+        var loomState = _pmPlugin.loomPluginKey.getState(editorState);
+        if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
+          var _recordVideoFailed;
+          var errorMessage = loomState === null || loomState === void 0 ? void 0 : loomState.error;
+          (0, _monitoring.logException)(new Error(errorMessage), {
+            location: 'editor-plugin-loom/quick-insert-record-video'
+          });
+          return (_recordVideoFailed = (0, _commands.recordVideoFailed)({
+            inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+            error: errorMessage,
+            editorAnalyticsAPI: editorAnalyticsAPI
+          })({
+            tr: tr
+          })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
+        }
+        return (_recordVideo = (0, _commands.recordVideo)({
+          inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+          editorAnalyticsAPI: editorAnalyticsAPI
+        })({
+          tr: tr
+        })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
+      }
+    }];
+  };
+};