@atlaskit/editor-plugin-loom 2.8.3 → 3.0.0

package/dist/esm/plugin.js

@@ -1,12 +1,8 @@
-import React from 'react';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
-import { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { LoomIcon } from '@atlaskit/logo';
-import { insertLoom as _insertLoom, recordVideo, recordVideoFailed } from './commands';
+import { insertLoom as _insertLoom, recordVideo, setupLoom } from './commands';
 import { createPlugin, loomPluginKey } from './pm-plugin';
-import LoomToolbarButton from './ui/ToolbarButton';
+import { loomPrimaryToolbarComponent } from './ui/PrimaryToolbarButton';
+import { getQuickInsertItem } from './ui/quickInsert';
 export var loomPlugin = function loomPlugin(_ref) {
   var _api$analytics, _api$primaryToolbar;
   var config = _ref.config,
@@ -19,18 +15,7 @@ export var 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.createElement(LoomToolbarButton, {
-      disabled: disabled,
-      api: api,
-      appearance: appearance
-    });
-  };
+  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
@@ -41,6 +26,10 @@ export var loomPlugin = function loomPlugin(_ref) {
       recordVideo: recordVideo,
       insertLoom: function insertLoom(video, positionType) {
         return _insertLoom(editorViewRef.current, api, video, positionType);
+      },
+      initLoom: function initLoom(_ref2) {
+        var loomProvider = _ref2.loomProvider;
+        return setupLoom(loomProvider, api, editorViewRef.current, true);
       }
     },
     pmPlugins: function pmPlugins() {
@@ -78,45 +67,11 @@ export var 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(toolbarInsertBlockMessages.recordVideo),
-          description: formatMessage(toolbarInsertBlockMessages.recordVideoDescription),
-          keywords: ['loom', 'record', 'video'],
-          priority: 800,
-          icon: function icon() {
-            return /*#__PURE__*/React.createElement(LoomIcon, {
-              appearance: "brand"
-            });
-          },
-          action: function action(insert, editorState) {
-            var _recordVideo;
-            var tr = insert(undefined);
-            var loomState = loomPluginKey.getState(editorState);
-            if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
-              var _recordVideoFailed;
-              var errorMessage = loomState === null || loomState === void 0 ? void 0 : loomState.error;
-              logException(new Error(errorMessage), {
-                location: 'editor-plugin-loom/quick-insert-record-video'
-              });
-              return (_recordVideoFailed = recordVideoFailed({
-                inputMethod: INPUT_METHOD.QUICK_INSERT,
-                error: errorMessage,
-                editorAnalyticsAPI: editorAnalyticsAPI
-              })({
-                tr: tr
-              })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
-            }
-            return (_recordVideo = recordVideo({
-              inputMethod: INPUT_METHOD.QUICK_INSERT,
-              editorAnalyticsAPI: editorAnalyticsAPI
-            })({
-              tr: tr
-            })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
-          }
-        }];
+      quickInsert: function quickInsert(intl) {
+        if (config.loomProvider) {
+          return getQuickInsertItem(editorAnalyticsAPI)(intl);
+        }
+        return [];
       }
     },
     // Enable inserting Loom recordings through main toolbar

package/dist/esm/pm-plugin.js

@@ -1,13 +1,9 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { logException } from '@atlaskit/editor-common/monitoring';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { disableLoom, enableLoom, insertVideo } from './commands';
+import { setupLoom } from './commands';
 export var LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
   LoomPluginAction[LoomPluginAction["ENABLE"] = 0] = "ENABLE";
   LoomPluginAction[LoomPluginAction["DISABLE"] = 1] = "DISABLE";
@@ -17,10 +13,8 @@ export var LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
 }({});
 export var loomPluginKey = new PluginKey('loom');
 export var 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({
     key: loomPluginKey,
     state: {
@@ -67,78 +61,8 @@ export var createPlugin = function createPlugin(_ref) {
       }
     },
     view: function view(editorView) {
-      var setupLoom = /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-          var _api$core3, _api$analytics3;
-          var clientResult, _api$core, _api$analytics2, attachToButton, loomButton;
-          return _regeneratorRuntime.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(disableLoom({
-                  error: clientResult.message
-                }));
-                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: ACTION.ERRORED,
-                  actionSubject: ACTION_SUBJECT.LOOM,
-                  eventType: 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(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(insertVideo({
-                      editorAnalyticsAPI: editorAnalyticsAPI,
-                      video: video
-                    }));
-                  }
-                });
-                api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(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: ACTION.INITIALISED,
-                  actionSubject: ACTION_SUBJECT.LOOM,
-                  eventType: 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) {
+        setupLoom(config.loomProvider, api, editorView);
       }
       return {};
     }

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/PrimaryToolbarButton.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClickBeforeInit", "isDisabled", "href"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { executeRecordVideo } from '../commands';
+import { loomPluginKey } from '../pm-plugin';
+import ToolbarButtonComponent from './ToolbarButtonComponent';
+var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(editorView, disabled, appearance, api) {
+  return /*#__PURE__*/React.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 = _objectWithoutProperties(props, _excluded);
+    var isLoomEnabled = (_loomPluginKey$getSta = loomPluginKey.getState(editorView.state)) === null || _loomPluginKey$getSta === void 0 ? void 0 : _loomPluginKey$getSta.isEnabled;
+    var handleOnClick = useCallback(function (e) {
+      if (isLoomEnabled) {
+        executeRecordVideo(api);
+      } else {
+        onClickBeforeInit && onClickBeforeInit(e);
+      }
+    }, [isLoomEnabled, onClickBeforeInit]);
+    return jsx(ToolbarButtonComponent, _extends({
+      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 = useCallback(function () {
+    return executeRecordVideo(api);
+  }, [api]);
+  var _useSharedPluginState = useSharedPluginState(api, ['loom']),
+    loomState = _useSharedPluginState.loomState;
+  if (!loomState) {
+    return null;
+  }
+  return jsx(ToolbarButtonComponent
+  // Disable the icon while the SDK isn't initialised
+  , {
+    disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
+    api: api,
+    appearance: appearance,
+    onClick: handleOnClick
+  });
+};
+export var 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 jsx(LoomToolbarButtonWrapper
+      // Disable the icon while the SDK isn't initialised
+      , {
+        disabled: disabled,
+        api: api,
+        appearance: appearance
+      });
+    }
+    return null;
+  };
+};

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

@@ -2,49 +2,67 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
 import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { LoomIcon } from '@atlaskit/logo';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { recordVideo } from '../commands';
 // 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.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 = useSharedPluginState(api, ['loom', 'width']),
-    loomState = _useSharedPluginState.loomState,
     widthState = _useSharedPluginState.widthState;
-  if (!loomState) {
-    return null;
-  }
   var label = formatMessage(appearance === 'comment' ? toolbarInsertBlockMessages.addLoomVideoComment : toolbarInsertBlockMessages.addLoomVideo);
   var shouldShowRecordText = fg('platform.editor.plugin.loom.responsive-menu_4at4a') && ((widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT;
   return jsx(ToolbarButton, {
+    hideTooltip: hideTooltip,
+    ref: ref,
+    href: href,
     buttonId: 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(recordVideo({
-        inputMethod: 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: jsx(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(toolbarInsertBlockMessages.recordLoomShortTitle));
-};
-export default injectIntl(LoomToolbarButton);
+});
+export default injectIntl(LoomToolbarButtonInternal, {
+  forwardRef: true
+});

package/dist/esm/ui/quickInsert.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { LoomIcon } from '@atlaskit/logo';
+import { recordVideo, recordVideoFailed } from '../commands';
+import { loomPluginKey } from '../pm-plugin';
+export var getQuickInsertItem = function getQuickInsertItem(editorAnalyticsAPI) {
+  return function (_ref) {
+    var formatMessage = _ref.formatMessage;
+    return [{
+      id: 'loom',
+      title: formatMessage(toolbarInsertBlockMessages.recordVideo),
+      description: formatMessage(toolbarInsertBlockMessages.recordVideoDescription),
+      keywords: ['loom', 'record', 'video'],
+      priority: 800,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(LoomIcon, {
+          appearance: "brand"
+        });
+      },
+      action: function action(insert, editorState) {
+        var _recordVideo;
+        var tr = insert(undefined);
+        var loomState = loomPluginKey.getState(editorState);
+        if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
+          var _recordVideoFailed;
+          var errorMessage = loomState === null || loomState === void 0 ? void 0 : loomState.error;
+          logException(new Error(errorMessage), {
+            location: 'editor-plugin-loom/quick-insert-record-video'
+          });
+          return (_recordVideoFailed = recordVideoFailed({
+            inputMethod: INPUT_METHOD.QUICK_INSERT,
+            error: errorMessage,
+            editorAnalyticsAPI: editorAnalyticsAPI
+          })({
+            tr: tr
+          })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
+        }
+        return (_recordVideo = recordVideo({
+          inputMethod: INPUT_METHOD.QUICK_INSERT,
+          editorAnalyticsAPI: editorAnalyticsAPI
+        })({
+          tr: tr
+        })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
+      }
+    }];
+  };
+};

package/dist/types/commands.d.ts

@@ -4,7 +4,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { LoomPlugin } from './plugin';
-import type { PositionType, VideoMeta } from './types';
+import type { LoomProviderOptions, PositionType, VideoMeta } from './types';
 export declare const enableLoom: ({ loomButton }: {
     loomButton: HTMLButtonElement;
 }) => EditorCommand;
@@ -25,3 +25,7 @@ export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     video: VideoMeta;
 }) => EditorCommand;
 export declare const insertLoom: (editorView: EditorView | null, api: ExtractInjectionAPI<LoomPlugin> | undefined, video: VideoMeta, positionType: PositionType) => boolean;
+export declare const executeRecordVideo: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => void;
+export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, isAfterEditorLoaded?: boolean) => Promise<{
+    error?: string;
+}>;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { loomPlugin } from './plugin';
 export type { LoomPlugin } from './plugin';
 export type { LoomPluginState } from './pm-plugin';
-export type { LoomPluginOptions, LoomProviderOptions, VideoMeta, GetClient, GetClientResult, LoomPluginErrorMessages, LoomSDKErrorMessages, } from './types';
+export type { LoomPluginOptions, LoomProviderOptions, VideoMeta, GetClient, GetClientResult, LoomPluginErrorMessages, LoomSDKErrorMessages, ButtonComponentProps, ButtonComponent, RenderButton, } from './types';

package/dist/types/plugin.d.ts

@@ -1,19 +1,21 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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 { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { LoomPluginState } from './pm-plugin';
-import type { LoomPluginOptions, PositionType, VideoMeta } from './types';
+import type { LoomPluginOptions, LoomProviderOptions, PositionType, VideoMeta } from './types';
 export type LoomPlugin = NextEditorPlugin<'loom', {
     pluginConfiguration: LoomPluginOptions;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         WidthPlugin,
         HyperlinkPlugin,
-        OptionalPlugin<PrimaryToolbarPlugin>
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<QuickInsertPlugin>
     ];
     sharedState: LoomPluginState | undefined;
     actions: {
@@ -29,6 +31,15 @@ export type LoomPlugin = NextEditorPlugin<'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
+         */
+        initLoom: ({ loomProvider, }: {
+            loomProvider: LoomProviderOptions;
+        }) => Promise<{
+            error?: string;
+        }>;
     };
 }>;
 export declare const loomPlugin: LoomPlugin;

package/dist/types/types.d.ts

@@ -1,3 +1,5 @@
+import type React from 'react';
+import { type ButtonProps as AKButtonProps } from '@atlaskit/button';
 export type VideoMeta = {
     sharedUrl: string;
     title: string;
@@ -23,8 +25,37 @@ export type GetClient = Promise<GetClientResult>;
 export type LoomProviderOptions = {
     getClient: () => GetClient;
 };
-export type LoomPluginOptions = {
+export interface ButtonComponentProps extends Pick<AKButtonProps, 'selected' | 'isDisabled' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'href' | 'target'> {
+    'data-ds--level'?: string;
+    /**
+     * on click handler that will only be called before the Loom SDK is initialised.
+     * Once the SDK is initialised, onClick will be handled by editor to start recording.
+     */
+    onClickBeforeInit?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export type ButtonComponent = React.ForwardRefExoticComponent<ButtonComponentProps & React.RefAttributes<HTMLElement>>;
+export type RenderButton = (ButtonComponent: ButtonComponent) => JSX.Element | null;
+type LoomPluginOptionsWithProvider = {
     loomProvider: LoomProviderOptions;
+    /**
+     * Customize the button component, e.g. adding pulse, a11y.
+     * @note When this is provided, `shouldShowToolbarButton` can be skipped and the button will still show. \
+     * If `shouldShowToolbarButton` is false, the button will not show regardless of this prop.
+     * @param ButtonComponent Loom toolbar button component (mainly UI)
+     */
+    renderButton?: RenderButton;
     shouldShowToolbarButton?: boolean;
 };
+type LoomPluginOptionsWithoutProvider = {
+    loomProvider?: LoomProviderOptions;
+    /**
+     * Customize the button component, e.g. adding pulse, a11y.
+     * @note When this is provided, `shouldShowToolbarButton` can be skipped and the button will still show. \
+     * If `shouldShowToolbarButton` is false, the button will not show regardless of this prop.
+     * @param ButtonComponent Loom toolbar button component (mainly UI)
+     */
+    renderButton: RenderButton;
+    shouldShowToolbarButton?: boolean;
+};
+export type LoomPluginOptions = LoomPluginOptionsWithProvider | LoomPluginOptionsWithoutProvider;
 export {};

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

@@ -0,0 +1,4 @@
+import type { ExtractInjectionAPI, ToolbarUIComponentFactory } from '@atlaskit/editor-common/types';
+import type { LoomPlugin } from '../plugin';
+import { type LoomPluginOptions } from '../types';
+export declare const loomPrimaryToolbarComponent: (config: LoomPluginOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined) => ToolbarUIComponentFactory;

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

@@ -0,0 +1,20 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorAppearance, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { LoomPlugin } from '../plugin';
+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;
+    hideTooltip?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>>, "children" | "key" | keyof Props | "forwardedRef"> & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps & React.RefAttributes<HTMLElement>>;
+};
+export default _default;

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

@@ -0,0 +1,3 @@
+import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { QuickInsertHandlerFn } from '@atlaskit/editor-common/types';
+export declare const getQuickInsertItem: (editorAnalyticsAPI?: EditorAnalyticsAPI) => QuickInsertHandlerFn;

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

@@ -4,7 +4,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { LoomPlugin } from './plugin';
-import type { PositionType, VideoMeta } from './types';
+import type { LoomProviderOptions, PositionType, VideoMeta } from './types';
 export declare const enableLoom: ({ loomButton }: {
     loomButton: HTMLButtonElement;
 }) => EditorCommand;
@@ -25,3 +25,7 @@ export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     video: VideoMeta;
 }) => EditorCommand;
 export declare const insertLoom: (editorView: EditorView | null, api: ExtractInjectionAPI<LoomPlugin> | undefined, video: VideoMeta, positionType: PositionType) => boolean;
+export declare const executeRecordVideo: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => void;
+export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, isAfterEditorLoaded?: boolean) => Promise<{
+    error?: string;
+}>;

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

@@ -1,4 +1,4 @@
 export { loomPlugin } from './plugin';
 export type { LoomPlugin } from './plugin';
 export type { LoomPluginState } from './pm-plugin';
-export type { LoomPluginOptions, LoomProviderOptions, VideoMeta, GetClient, GetClientResult, LoomPluginErrorMessages, LoomSDKErrorMessages, } from './types';
+export type { LoomPluginOptions, LoomProviderOptions, VideoMeta, GetClient, GetClientResult, LoomPluginErrorMessages, LoomSDKErrorMessages, ButtonComponentProps, ButtonComponent, RenderButton, } from './types';

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

@@ -1,19 +1,21 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 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 { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { LoomPluginState } from './pm-plugin';
-import type { LoomPluginOptions, PositionType, VideoMeta } from './types';
+import type { LoomPluginOptions, LoomProviderOptions, PositionType, VideoMeta } from './types';
 export type LoomPlugin = NextEditorPlugin<'loom', {
     pluginConfiguration: LoomPluginOptions;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         WidthPlugin,
         HyperlinkPlugin,
-        OptionalPlugin<PrimaryToolbarPlugin>
+        OptionalPlugin<PrimaryToolbarPlugin>,
+        OptionalPlugin<QuickInsertPlugin>
     ];
     sharedState: LoomPluginState | undefined;
     actions: {
@@ -29,6 +31,15 @@ export type LoomPlugin = NextEditorPlugin<'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
+         */
+        initLoom: ({ loomProvider, }: {
+            loomProvider: LoomProviderOptions;
+        }) => Promise<{
+            error?: string;
+        }>;
     };
 }>;
 export declare const loomPlugin: LoomPlugin;