@atlaskit/editor-plugin-loom 1.0.2 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-loom
 
+## 2.0.1
+
+### Patch Changes
+
+- [#90526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90526) [`2f75eb73984f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2f75eb73984f) - [ux] Update toolbar icon to Loom
+
+## 2.0.0
+
+### Major Changes
+
+- [#85470](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85470) [`32cb4d4ca34f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32cb4d4ca34f) - Update loom plugin to take in interface and remove SDK references
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -15,7 +15,8 @@ var _pmPlugin = require("./pm-plugin");
 var _ToolbarButton = _interopRequireDefault(require("./ui/ToolbarButton"));
 var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
   var _api$analytics;
-  var api = _ref.api;
+  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 {
     name: 'loom',
@@ -23,7 +24,10 @@ var loomPlugin = exports.loomPlugin = function loomPlugin(_ref) {
       return [{
         name: 'loom',
         plugin: function plugin() {
-          return (0, _pmPlugin.createPlugin)(api);
+          return (0, _pmPlugin.createPlugin)({
+            config: config,
+            api: api
+          });
         }
       }];
     },

package/dist/cjs/pm-plugin.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,8 +13,6 @@ 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");
-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 && Object.prototype.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; }
 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) { (0, _defineProperty2.default)(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; }
 var LoomPluginAction = exports.LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
@@ -26,9 +23,10 @@ var LoomPluginAction = exports.LoomPluginAction = /*#__PURE__*/function (LoomPlu
   return LoomPluginAction;
 }({});
 var loomPluginKey = exports.loomPluginKey = new _state.PluginKey('loom');
-var LOOM_SDK_PUBLIC_APP_ID = 'e1cff63a-8ca2-4c2c-ad41-d61c54beb16a';
-var createPlugin = exports.createPlugin = function createPlugin(api) {
+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,
@@ -77,89 +75,55 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
     },
     view: function view(editorView) {
       var setupLoom = /*#__PURE__*/function () {
-        var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
           var _api$core3, _api$analytics3;
-          var _yield$import, isSupported, setup, _yield$isSupported, supported, error, _api$core, _api$analytics2, _yield$setup, configureButton, loomButton, sdkButton;
-          return _regenerator.default.wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
+          var clientResult, _api$core, _api$analytics2, attachToButton, loomButton;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
               case 0:
-                _context2.next = 2;
-                return Promise.resolve().then(function () {
-                  return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-loom-sdk" */'@loomhq/record-sdk'));
-                });
+                _context.next = 2;
+                return config.loomProvider.getClient();
               case 2:
-                _yield$import = _context2.sent;
-                isSupported = _yield$import.isSupported;
-                setup = _yield$import.setup;
-                _context2.next = 7;
-                return isSupported();
-              case 7:
-                _yield$isSupported = _context2.sent;
-                supported = _yield$isSupported.supported;
-                error = _yield$isSupported.error;
-                if (supported) {
-                  _context2.next = 15;
+                clientResult = _context.sent;
+                if (!(clientResult.status === 'error')) {
+                  _context.next = 8;
                   break;
                 }
-                // Keep plugin state update and analytics separate to avoid accidentally not updating
-                // plugin state due to collab-edit filtering out transactions with steps
                 api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute((0, _commands.disableLoom)({
-                  error: error
+                  error: clientResult.message
                 }));
-                (0, _monitoring.logException)(new Error(error), {
+                (0, _monitoring.logException)(new Error(clientResult.message), {
                   location: 'editor-plugin-loom/sdk-initialisation'
                 });
-                // 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$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: error
+                    error: clientResult.message
                   }
                 });
-                return _context2.abrupt("return");
-              case 15:
-                _context2.next = 17;
-                return setup({
-                  publicAppId: LOOM_SDK_PUBLIC_APP_ID
-                });
-              case 17:
-                _yield$setup = _context2.sent;
-                configureButton = _yield$setup.configureButton;
-                // Hidden element to work around the SDK API
+                return _context.abrupt("return");
+              case 8:
+                attachToButton = clientResult.client.attachToButton; // Hidden element to work around the SDK API
                 loomButton = document.createElement('button');
-                sdkButton = configureButton({
-                  element: loomButton
-                }); // Attach insertion logic to the event handlers on the SDK
-                sdkButton.on('insert-click', /*#__PURE__*/function () {
-                  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(video) {
+                attachToButton({
+                  button: loomButton,
+                  onInsert: function onInsert(video) {
                     var _api$hyperlink, _api$core2;
-                    var state, dispatch, pos;
-                    return _regenerator.default.wrap(function _callee$(_context) {
-                      while (1) switch (_context.prev = _context.next) {
-                        case 0:
-                          state = editorView.state, dispatch = editorView.dispatch;
-                          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
-                          }));
-                        case 4:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }, _callee);
-                  }));
-                  return function (_x) {
-                    return _ref2.apply(this, arguments);
-                  };
-                }());
+                    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
                 }));
@@ -170,17 +134,19 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
                   actionSubject: _analytics.ACTION_SUBJECT.LOOM,
                   eventType: _analytics.EVENT_TYPE.OPERATIONAL
                 });
-              case 24:
+              case 13:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
-          }, _callee2);
+          }, _callee);
         }));
         return function setupLoom() {
-          return _ref.apply(this, arguments);
+          return _ref2.apply(this, arguments);
         };
       }();
-      setupLoom();
+      if (config) {
+        setupLoom();
+      }
       return {};
     }
   });

package/dist/cjs/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/ToolbarButton.js

@@ -11,7 +11,7 @@ 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 _videoCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/video-circle"));
+var _logo = require("@atlaskit/logo");
 var _commands = require("../commands");
 var LoomToolbarButton = function LoomToolbarButton(_ref) {
   var disabled = _ref.disabled,
@@ -22,7 +22,7 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
   if (!loomState) {
     return null;
   }
-  var label = formatMessage(_messages.toolbarInsertBlockMessages.recordVideo);
+  var label = formatMessage(_messages.toolbarInsertBlockMessages.addLoomVideo);
   return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     buttonId: _uiMenu.TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: function onClick() {
@@ -36,8 +36,9 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_videoCircle.default, {
-      label: label
+    iconBefore: /*#__PURE__*/_react.default.createElement(_logo.LoomIcon, {
+      label: label,
+      size: "small"
     })
   });
 };

package/dist/es2019/plugin.js

@@ -7,6 +7,7 @@ import { recordVideo, recordVideoFailed } from './commands';
 import { createPlugin, loomPluginKey } from './pm-plugin';
 import LoomToolbarButton from './ui/ToolbarButton';
 export const loomPlugin = ({
+  config,
   api
 }) => {
   var _api$analytics;
@@ -15,7 +16,10 @@ export const loomPlugin = ({
     name: 'loom',
     pmPlugins: () => [{
       name: 'loom',
-      plugin: () => createPlugin(api)
+      plugin: () => createPlugin({
+        config,
+        api
+      })
     }],
     getSharedState(editorState) {
       if (!editorState) {

package/dist/es2019/pm-plugin.js

@@ -11,8 +11,10 @@ export let LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
   return LoomPluginAction;
 }({});
 export const loomPluginKey = new PluginKey('loom');
-const LOOM_SDK_PUBLIC_APP_ID = 'e1cff63a-8ca2-4c2c-ad41-d61c54beb16a';
-export const createPlugin = api => {
+export const createPlugin = ({
+  config,
+  api
+}) => {
   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;
   return new SafePlugin({
@@ -67,66 +69,49 @@ export const createPlugin = api => {
     view(editorView) {
       const setupLoom = async () => {
         var _api$core3, _api$analytics3;
-        // Asynchronously check if the Loom SDK is supported
-        // it hits a Loom API so could take a while
-        const {
-          isSupported,
-          setup
-        } = await import( /* webpackChunkName: "@atlaskit-internal_editor-loom-sdk" */'@loomhq/record-sdk');
-        const {
-          supported,
-          error
-        } = await isSupported();
-        if (!supported) {
+        const clientResult = await config.loomProvider.getClient();
+        if (clientResult.status === 'error') {
           var _api$core, _api$analytics2;
-          // Keep plugin state update and analytics separate to avoid accidentally not updating
-          // plugin state due to collab-edit filtering out transactions with steps
           api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(disableLoom({
-            error
+            error: clientResult.message
           }));
-          logException(new Error(error), {
+          logException(new Error(clientResult.message), {
             location: 'editor-plugin-loom/sdk-initialisation'
           });
-          // 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 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent({
             action: ACTION.ERRORED,
             actionSubject: ACTION_SUBJECT.LOOM,
             eventType: EVENT_TYPE.OPERATIONAL,
             attributes: {
-              error
+              error: clientResult.message
             }
           });
           return;
         }
         const {
-          configureButton
-        } = await setup({
-          publicAppId: LOOM_SDK_PUBLIC_APP_ID
-        });
+          attachToButton
+        } = clientResult.client;
 
         // Hidden element to work around the SDK API
         const loomButton = document.createElement('button');
-        const sdkButton = configureButton({
-          element: loomButton
-        });
-
-        // Attach insertion logic to the event handlers on the SDK
-        sdkButton.on('insert-click', async video => {
-          var _api$hyperlink, _api$core2;
-          const {
-            state,
-            dispatch
-          } = editorView;
-          const pos = editorView.state.selection.from;
-          api === null || api === void 0 ? void 0 : (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(insertVideo({
-            editorAnalyticsAPI,
-            video
-          }));
+        attachToButton({
+          button: loomButton,
+          onInsert: video => {
+            var _api$hyperlink, _api$core2;
+            const {
+              state,
+              dispatch
+            } = editorView;
+            const pos = editorView.state.selection.from;
+            api === null || api === void 0 ? void 0 : (_api$hyperlink = api.hyperlink) === null || _api$hyperlink === void 0 ? 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 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(insertVideo({
+              editorAnalyticsAPI,
+              video
+            }));
+          }
         });
         api === null || api === void 0 ? void 0 : (_api$core3 = api.core) === null || _api$core3 === void 0 ? void 0 : _api$core3.actions.execute(enableLoom({
           loomButton
@@ -139,7 +124,9 @@ export const createPlugin = api => {
           eventType: EVENT_TYPE.OPERATIONAL
         });
       };
-      setupLoom();
+      if (config) {
+        setupLoom();
+      }
       return {};
     }
   });

package/dist/es2019/ui/ToolbarButton.js

@@ -4,7 +4,7 @@ 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 VideoCircleIcon from '@atlaskit/icon/glyph/video-circle';
+import { LoomIcon } from '@atlaskit/logo';
 import { recordVideo } from '../commands';
 const LoomToolbarButton = ({
   disabled,
@@ -19,7 +19,7 @@ const LoomToolbarButton = ({
   if (!loomState) {
     return null;
   }
-  const label = formatMessage(toolbarInsertBlockMessages.recordVideo);
+  const label = formatMessage(toolbarInsertBlockMessages.addLoomVideo);
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: () => {
@@ -33,8 +33,9 @@ const LoomToolbarButton = ({
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(VideoCircleIcon, {
-      label: label
+    iconBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+      label: label,
+      size: "small"
     })
   });
 };

package/dist/esm/plugin.js

@@ -8,7 +8,8 @@ import { createPlugin, loomPluginKey } from './pm-plugin';
 import LoomToolbarButton from './ui/ToolbarButton';
 export var loomPlugin = function loomPlugin(_ref) {
   var _api$analytics;
-  var api = _ref.api;
+  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 {
     name: 'loom',
@@ -16,7 +17,10 @@ export var loomPlugin = function loomPlugin(_ref) {
       return [{
         name: 'loom',
         plugin: function plugin() {
-          return createPlugin(api);
+          return createPlugin({
+            config: config,
+            api: api
+          });
         }
       }];
     },

package/dist/esm/pm-plugin.js

@@ -16,9 +16,10 @@ export var LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
   return LoomPluginAction;
 }({});
 export var loomPluginKey = new PluginKey('loom');
-var LOOM_SDK_PUBLIC_APP_ID = 'e1cff63a-8ca2-4c2c-ad41-d61c54beb16a';
-export var createPlugin = function createPlugin(api) {
+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,
@@ -67,87 +68,55 @@ export var createPlugin = function createPlugin(api) {
     },
     view: function view(editorView) {
       var setupLoom = /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
           var _api$core3, _api$analytics3;
-          var _yield$import, isSupported, setup, _yield$isSupported, supported, error, _api$core, _api$analytics2, _yield$setup, configureButton, loomButton, sdkButton;
-          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
+          var clientResult, _api$core, _api$analytics2, attachToButton, loomButton;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
               case 0:
-                _context2.next = 2;
-                return import( /* webpackChunkName: "@atlaskit-internal_editor-loom-sdk" */'@loomhq/record-sdk');
+                _context.next = 2;
+                return config.loomProvider.getClient();
               case 2:
-                _yield$import = _context2.sent;
-                isSupported = _yield$import.isSupported;
-                setup = _yield$import.setup;
-                _context2.next = 7;
-                return isSupported();
-              case 7:
-                _yield$isSupported = _context2.sent;
-                supported = _yield$isSupported.supported;
-                error = _yield$isSupported.error;
-                if (supported) {
-                  _context2.next = 15;
+                clientResult = _context.sent;
+                if (!(clientResult.status === 'error')) {
+                  _context.next = 8;
                   break;
                 }
-                // Keep plugin state update and analytics separate to avoid accidentally not updating
-                // plugin state due to collab-edit filtering out transactions with steps
                 api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(disableLoom({
-                  error: error
+                  error: clientResult.message
                 }));
-                logException(new Error(error), {
+                logException(new Error(clientResult.message), {
                   location: 'editor-plugin-loom/sdk-initialisation'
                 });
-                // 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$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: error
+                    error: clientResult.message
                   }
                 });
-                return _context2.abrupt("return");
-              case 15:
-                _context2.next = 17;
-                return setup({
-                  publicAppId: LOOM_SDK_PUBLIC_APP_ID
-                });
-              case 17:
-                _yield$setup = _context2.sent;
-                configureButton = _yield$setup.configureButton;
-                // Hidden element to work around the SDK API
+                return _context.abrupt("return");
+              case 8:
+                attachToButton = clientResult.client.attachToButton; // Hidden element to work around the SDK API
                 loomButton = document.createElement('button');
-                sdkButton = configureButton({
-                  element: loomButton
-                }); // Attach insertion logic to the event handlers on the SDK
-                sdkButton.on('insert-click', /*#__PURE__*/function () {
-                  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(video) {
+                attachToButton({
+                  button: loomButton,
+                  onInsert: function onInsert(video) {
                     var _api$hyperlink, _api$core2;
-                    var state, dispatch, pos;
-                    return _regeneratorRuntime.wrap(function _callee$(_context) {
-                      while (1) switch (_context.prev = _context.next) {
-                        case 0:
-                          state = editorView.state, dispatch = editorView.dispatch;
-                          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
-                          }));
-                        case 4:
-                        case "end":
-                          return _context.stop();
-                      }
-                    }, _callee);
-                  }));
-                  return function (_x) {
-                    return _ref2.apply(this, arguments);
-                  };
-                }());
+                    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
                 }));
@@ -158,17 +127,19 @@ export var createPlugin = function createPlugin(api) {
                   actionSubject: ACTION_SUBJECT.LOOM,
                   eventType: EVENT_TYPE.OPERATIONAL
                 });
-              case 24:
+              case 13:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
-          }, _callee2);
+          }, _callee);
         }));
         return function setupLoom() {
-          return _ref.apply(this, arguments);
+          return _ref2.apply(this, arguments);
         };
       }();
-      setupLoom();
+      if (config) {
+        setupLoom();
+      }
       return {};
     }
   });

package/dist/esm/ui/ToolbarButton.js

@@ -4,7 +4,7 @@ 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 VideoCircleIcon from '@atlaskit/icon/glyph/video-circle';
+import { LoomIcon } from '@atlaskit/logo';
 import { recordVideo } from '../commands';
 var LoomToolbarButton = function LoomToolbarButton(_ref) {
   var disabled = _ref.disabled,
@@ -15,7 +15,7 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
   if (!loomState) {
     return null;
   }
-  var label = formatMessage(toolbarInsertBlockMessages.recordVideo);
+  var label = formatMessage(toolbarInsertBlockMessages.addLoomVideo);
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
     onClick: function onClick() {
@@ -29,8 +29,9 @@ var LoomToolbarButton = function LoomToolbarButton(_ref) {
     ,
     disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
     title: label,
-    iconBefore: /*#__PURE__*/React.createElement(VideoCircleIcon, {
-      label: label
+    iconBefore: /*#__PURE__*/React.createElement(LoomIcon, {
+      label: label,
+      size: "small"
     })
   });
 };

package/dist/types/commands.d.ts

@@ -1,11 +1,12 @@
-import type { LoomVideo, SDKUnsupportedReasons } from '@loomhq/record-sdk';
+import type { SDKUnsupportedReasons } from '@loomhq/record-sdk';
 import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { VideoMeta } from './types';
 export declare const enableLoom: ({ loomButton }: {
     loomButton: HTMLButtonElement;
 }) => EditorCommand;
 export declare const disableLoom: ({ error }: {
-    error: SDKUnsupportedReasons | undefined;
+    error: string;
 }) => EditorCommand;
 export declare const recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
     inputMethod: INPUT_METHOD;
@@ -18,5 +19,5 @@ export declare const recordVideoFailed: ({ inputMethod, error, editorAnalyticsAP
 }) => EditorCommand;
 export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
-    video: LoomVideo;
+    video: VideoMeta;
 }) => EditorCommand;

package/dist/types/index.d.ts

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

package/dist/types/plugin.d.ts

@@ -2,7 +2,9 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { LoomPluginState } from './pm-plugin';
+import type { LoomPluginOptions } from './types';
 export type LoomPlugin = NextEditorPlugin<'loom', {
+    pluginConfiguration: LoomPluginOptions;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         HyperlinkPlugin

package/dist/types/pm-plugin.d.ts

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { LoomPlugin } from './plugin';
+import type { LoomPluginOptions } from './types';
 export interface LoomPluginState {
     isEnabled: boolean;
     loomButton: HTMLButtonElement | null;
@@ -16,4 +17,7 @@ export declare enum LoomPluginAction {
     INSERT_VIDEO = 3
 }
 export declare const loomPluginKey: PluginKey<LoomPluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => SafePlugin<LoomPluginState>;
+export declare const createPlugin: ({ config, api, }: {
+    config: LoomPluginOptions;
+    api: ExtractInjectionAPI<LoomPlugin> | undefined;
+}) => SafePlugin<LoomPluginState>;

package/dist/types/types.d.ts

@@ -0,0 +1,27 @@
+export type VideoMeta = {
+    sharedUrl: string;
+    title: string;
+    duration?: number;
+};
+type LoomClient = {
+    attachToButton: (options: {
+        button: HTMLElement;
+        onInsert: (videoMeta: VideoMeta) => void;
+    }) => void;
+};
+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: 'error';
+    message: LoomPluginErrorMessages | LoomSDKErrorMessages;
+};
+export type GetClient = Promise<GetClientResult>;
+export type LoomPluginOptions = {
+    loomProvider: {
+        getClient: () => GetClient;
+    };
+};
+export {};

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

@@ -3,6 +3,7 @@ import type { WrappedComponentProps } from 'react-intl-next';
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     disabled: boolean;
     api: import("@atlaskit/editor-common/types").PublicPluginAPI<[import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"loom", {
+        pluginConfiguration: import("..").LoomPluginOptions;
         dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
             pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
             sharedState: {
@@ -42,7 +43,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
             sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
         }, import("@atlaskit/editor-common/types").HyperlinkPluginOptions | undefined>];
         sharedState: import("..").LoomPluginState | undefined;
-    }, undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+    }, import("..").LoomPluginOptions>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
         pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
         sharedState: {
             createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
@@ -84,6 +85,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     WrappedComponent: React.ComponentType<{
         disabled: boolean;
         api: import("@atlaskit/editor-common/types").PublicPluginAPI<[import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"loom", {
+            pluginConfiguration: import("..").LoomPluginOptions;
             dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                 pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
                 sharedState: {
@@ -123,7 +125,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
                 sharedState: import("@atlaskit/editor-common/link").HyperlinkState | undefined;
             }, import("@atlaskit/editor-common/types").HyperlinkPluginOptions | undefined>];
             sharedState: import("..").LoomPluginState | undefined;
-        }, undefined>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+        }, import("..").LoomPluginOptions>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
             pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
             sharedState: {
                 createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;

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

@@ -1,11 +1,12 @@
-import type { LoomVideo, SDKUnsupportedReasons } from '@loomhq/record-sdk';
+import type { SDKUnsupportedReasons } from '@loomhq/record-sdk';
 import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand } from '@atlaskit/editor-common/types';
+import type { VideoMeta } from './types';
 export declare const enableLoom: ({ loomButton }: {
     loomButton: HTMLButtonElement;
 }) => EditorCommand;
 export declare const disableLoom: ({ error }: {
-    error: SDKUnsupportedReasons | undefined;
+    error: string;
 }) => EditorCommand;
 export declare const recordVideo: ({ inputMethod, editorAnalyticsAPI, }: {
     inputMethod: INPUT_METHOD;
@@ -18,5 +19,5 @@ export declare const recordVideoFailed: ({ inputMethod, error, editorAnalyticsAP
 }) => EditorCommand;
 export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
-    video: LoomVideo;
+    video: VideoMeta;
 }) => EditorCommand;

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

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

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

@@ -2,7 +2,9 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { HyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
 import type { LoomPluginState } from './pm-plugin';
+import type { LoomPluginOptions } from './types';
 export type LoomPlugin = NextEditorPlugin<'loom', {
+    pluginConfiguration: LoomPluginOptions;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
         HyperlinkPlugin

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

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { LoomPlugin } from './plugin';
+import type { LoomPluginOptions } from './types';
 export interface LoomPluginState {
     isEnabled: boolean;
     loomButton: HTMLButtonElement | null;
@@ -16,4 +17,7 @@ export declare enum LoomPluginAction {
     INSERT_VIDEO = 3
 }
 export declare const loomPluginKey: PluginKey<LoomPluginState>;
-export declare const createPlugin: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => SafePlugin<LoomPluginState>;
+export declare const createPlugin: ({ config, api, }: {
+    config: LoomPluginOptions;
+    api: ExtractInjectionAPI<LoomPlugin> | undefined;
+}) => SafePlugin<LoomPluginState>;

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

@@ -0,0 +1,27 @@
+export type VideoMeta = {
+    sharedUrl: string;
+    title: string;
+    duration?: number;
+};
+type LoomClient = {
+    attachToButton: (options: {
+        button: HTMLElement;
+        onInsert: (videoMeta: VideoMeta) => void;
+    }) => void;
+};
+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: 'error';
+    message: LoomPluginErrorMessages | LoomSDKErrorMessages;
+};
+export type GetClient = Promise<GetClientResult>;
+export type LoomPluginOptions = {
+    loomProvider: {
+        getClient: () => GetClient;
+    };
+};
+export {};

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

@@ -4,6 +4,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
     disabled: boolean;
     api: import("@atlaskit/editor-common/types").PublicPluginAPI<[
         import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"loom", {
+            pluginConfiguration: import("..").LoomPluginOptions;
             dependencies: [
                 import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                     pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -52,7 +53,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
                 }, import("@atlaskit/editor-common/types").HyperlinkPluginOptions | undefined>
             ];
             sharedState: import("..").LoomPluginState | undefined;
-        }, undefined>,
+        }, import("..").LoomPluginOptions>,
         import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
             pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
             sharedState: {
@@ -104,6 +105,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
         disabled: boolean;
         api: import("@atlaskit/editor-common/types").PublicPluginAPI<[
             import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"loom", {
+                pluginConfiguration: import("..").LoomPluginOptions;
                 dependencies: [
                     import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                         pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -152,7 +154,7 @@ declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
                     }, import("@atlaskit/editor-common/types").HyperlinkPluginOptions | undefined>
                 ];
                 sharedState: import("..").LoomPluginState | undefined;
-            }, undefined>,
+            }, import("..").LoomPluginOptions>,
             import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                 pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
                 sharedState: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-loom",
-  "version": "1.0.2",
+  "version": "2.0.1",
   "description": "Loom plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,11 +36,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^78.17.0",
+    "@atlaskit/editor-common": "^78.26.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-hyperlink": "^1.1.0",
+    "@atlaskit/editor-plugin-hyperlink": "^1.4.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/logo": "^13.15.1",
     "@babel/runtime": "^7.0.0",
     "@loomhq/record-sdk": "^2.36.18"
   },
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@atlaskit/editor-plugin-base": "^1.0.0",
-    "@atlaskit/editor-plugin-card": "^1.2.0",
+    "@atlaskit/editor-plugin-card": "^1.6.0",
     "@atlaskit/editor-plugin-copy-button": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",