@atlaskit/editor-plugin-loom 0.1.0

package/dist/es2019/pm-plugin.js

@@ -0,0 +1,160 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, 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';
+export let LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
+  LoomPluginAction[LoomPluginAction["ENABLE"] = 0] = "ENABLE";
+  LoomPluginAction[LoomPluginAction["DISABLE"] = 1] = "DISABLE";
+  LoomPluginAction[LoomPluginAction["RECORD_VIDEO"] = 2] = "RECORD_VIDEO";
+  LoomPluginAction[LoomPluginAction["INSERT_VIDEO"] = 3] = "INSERT_VIDEO";
+  LoomPluginAction[LoomPluginAction["SET_ANALYTICS_FUNCTION"] = 4] = "SET_ANALYTICS_FUNCTION";
+  return LoomPluginAction;
+}({});
+export const loomPluginKey = new PluginKey('loom');
+const LOOM_SDK_PUBLIC_APP_ID = 'e1cff63a-8ca2-4c2c-ad41-d61c54beb16a';
+export const createPlugin = 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({
+    key: loomPluginKey,
+    state: {
+      init: () => ({
+        isEnabled: false,
+        loomButton: null,
+        isRecordingVideo: false,
+        error: undefined,
+        createAnalyticsEvent: undefined
+      }),
+      apply: (tr, pluginState) => {
+        var _tr$getMeta, _pluginState$loomButt;
+        const action = (_tr$getMeta = tr.getMeta(loomPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        switch (action) {
+          case LoomPluginAction.SET_ANALYTICS_FUNCTION:
+            const {
+              createAnalyticsEvent
+            } = tr.getMeta(loomPluginKey);
+            return {
+              ...pluginState,
+              createAnalyticsEvent
+            };
+          case LoomPluginAction.ENABLE:
+            const {
+              loomButton
+            } = tr.getMeta(loomPluginKey);
+            return {
+              ...pluginState,
+              isEnabled: true,
+              loomButton
+            };
+          case LoomPluginAction.DISABLE:
+            const {
+              error
+            } = tr.getMeta(loomPluginKey);
+            return {
+              ...pluginState,
+              isEnabled: false,
+              loomButton: null,
+              error
+            };
+          case LoomPluginAction.RECORD_VIDEO:
+            // Click the unmounted button in state that has the Loom SDK attached
+            pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$loomButt = pluginState.loomButton) === null || _pluginState$loomButt === void 0 ? void 0 : _pluginState$loomButt.click();
+            return {
+              ...pluginState,
+              isRecordingVideo: true
+            };
+          case LoomPluginAction.INSERT_VIDEO:
+            return {
+              ...pluginState,
+              isRecordingVideo: false
+            };
+          default:
+            return pluginState;
+        }
+      }
+    },
+    view(editorView) {
+      const setupLoom = async () => {
+        // 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) {
+          // 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.actions.execute(disableLoom({
+            error
+          }));
+          logException(new Error(error), {
+            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
+          const pluginState = loomPluginKey.getState(editorView.state);
+          fireAnalyticsEvent(pluginState === null || pluginState === void 0 ? void 0 : pluginState.createAnalyticsEvent)({
+            payload: {
+              action: ACTION.ERRORED,
+              actionSubject: ACTION_SUBJECT.LOOM,
+              eventType: EVENT_TYPE.OPERATIONAL,
+              attributes: {
+                error
+              }
+            }
+          });
+          return;
+        }
+        const {
+          configureButton
+        } = await setup({
+          publicAppId: LOOM_SDK_PUBLIC_APP_ID
+        });
+
+        // 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;
+          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.core.actions.execute(insertVideo({
+            editorAnalyticsAPI,
+            video
+          }));
+        });
+        api === null || api === void 0 ? void 0 : api.core.actions.execute(enableLoom({
+          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
+        const pluginState = loomPluginKey.getState(editorView.state);
+        fireAnalyticsEvent(pluginState === null || pluginState === void 0 ? void 0 : pluginState.createAnalyticsEvent)({
+          payload: {
+            action: ACTION.INITIALISED,
+            actionSubject: ACTION_SUBJECT.LOOM,
+            eventType: EVENT_TYPE.OPERATIONAL
+          }
+        });
+      };
+      setupLoom();
+      return {};
+    }
+  });
+};

package/dist/es2019/ui/ToolbarButton.js

@@ -0,0 +1,41 @@
+import React from '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 VideoCircleIcon from '@atlaskit/icon/glyph/video-circle';
+import { recordVideo } from '../commands';
+const LoomToolbarButton = ({
+  disabled,
+  api,
+  intl: {
+    formatMessage
+  }
+}) => {
+  const {
+    loomState
+  } = useSharedPluginState(api, ['loom']);
+  if (!loomState) {
+    return null;
+  }
+  const label = formatMessage(toolbarInsertBlockMessages.recordVideo);
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
+    onClick: () => {
+      var _api$analytics;
+      return api === null || api === void 0 ? void 0 : api.core.actions.execute(recordVideo({
+        inputMethod: INPUT_METHOD.TOOLBAR,
+        editorAnalyticsAPI: api === null || api === void 0 ? 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),
+    title: label,
+    iconBefore: /*#__PURE__*/React.createElement(VideoCircleIcon, {
+      label: label
+    })
+  });
+};
+export default injectIntl(LoomToolbarButton);

package/dist/esm/commands.js

@@ -0,0 +1,80 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { LoomPluginAction, loomPluginKey } from './pm-plugin';
+export var enableLoom = function enableLoom(_ref) {
+  var loomButton = _ref.loomButton;
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(loomPluginKey, {
+      type: LoomPluginAction.ENABLE,
+      loomButton: loomButton
+    });
+    return tr;
+  };
+};
+export var disableLoom = function disableLoom(_ref3) {
+  var error = _ref3.error;
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(loomPluginKey, {
+      type: LoomPluginAction.DISABLE,
+      error: error
+    });
+    return tr;
+  };
+};
+export var recordVideo = function recordVideo(_ref5) {
+  var inputMethod = _ref5.inputMethod,
+    editorAnalyticsAPI = _ref5.editorAnalyticsAPI;
+  return function (_ref6) {
+    var tr = _ref6.tr;
+    tr.setMeta(loomPluginKey, {
+      type: LoomPluginAction.RECORD_VIDEO
+    });
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.RECORD_VIDEO,
+      actionSubject: ACTION_SUBJECT.LOOM,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  };
+};
+export var recordVideoFailed = function recordVideoFailed(_ref7) {
+  var inputMethod = _ref7.inputMethod,
+    error = _ref7.error,
+    editorAnalyticsAPI = _ref7.editorAnalyticsAPI;
+  return function (_ref8) {
+    var tr = _ref8.tr;
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.RECORD_VIDEO_FAILED,
+      actionSubject: ACTION_SUBJECT.LOOM,
+      attributes: {
+        inputMethod: inputMethod,
+        error: error
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  };
+};
+export var insertVideo = function insertVideo(_ref9) {
+  var editorAnalyticsAPI = _ref9.editorAnalyticsAPI,
+    video = _ref9.video;
+  return function (_ref10) {
+    var tr = _ref10.tr;
+    tr.setMeta(loomPluginKey, {
+      type: LoomPluginAction.INSERT_VIDEO
+    });
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.INSERT_VIDEO,
+      actionSubject: ACTION_SUBJECT.LOOM,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        duration: video.duration
+      }
+    })(tr);
+    return tr;
+  };
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { loomPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,94 @@
+import React, { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { IconLoom } from '@atlaskit/editor-common/quick-insert';
+import { recordVideo, recordVideoFailed } from './commands';
+import { createPlugin, LoomPluginAction, loomPluginKey } from './pm-plugin';
+import LoomToolbarButton from './ui/ToolbarButton';
+export var loomPlugin = function loomPlugin(_ref) {
+  var _api$analytics;
+  var 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',
+    usePluginHook: function usePluginHook(_ref2) {
+      var editorView = _ref2.editorView;
+      var _useAnalyticsEvents = useAnalyticsEvents(),
+        createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+      useLayoutEffect(function () {
+        var dispatch = editorView.dispatch,
+          tr = editorView.state.tr;
+        tr.setMeta(loomPluginKey, {
+          type: LoomPluginAction.SET_ANALYTICS_FUNCTION,
+          createAnalyticsEvent: createAnalyticsEvent
+        });
+        dispatch(tr);
+      }, [createAnalyticsEvent, editorView]);
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'loom',
+        plugin: function plugin() {
+          return createPlugin(api);
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      return loomPluginKey.getState(editorState);
+    },
+    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(IconLoom, null);
+          },
+          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;
+          }
+        }];
+      }
+    },
+    // Enable inserting Loom recordings through main toolbar
+    primaryToolbarComponent: function primaryToolbarComponent(_ref4) {
+      var disabled = _ref4.disabled;
+      return /*#__PURE__*/React.createElement(LoomToolbarButton, {
+        disabled: disabled,
+        api: api
+      });
+    }
+  };
+};

package/dist/esm/pm-plugin.js

@@ -0,0 +1,188 @@
+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, fireAnalyticsEvent, 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';
+export var LoomPluginAction = /*#__PURE__*/function (LoomPluginAction) {
+  LoomPluginAction[LoomPluginAction["ENABLE"] = 0] = "ENABLE";
+  LoomPluginAction[LoomPluginAction["DISABLE"] = 1] = "DISABLE";
+  LoomPluginAction[LoomPluginAction["RECORD_VIDEO"] = 2] = "RECORD_VIDEO";
+  LoomPluginAction[LoomPluginAction["INSERT_VIDEO"] = 3] = "INSERT_VIDEO";
+  LoomPluginAction[LoomPluginAction["SET_ANALYTICS_FUNCTION"] = 4] = "SET_ANALYTICS_FUNCTION";
+  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) {
+  var _api$analytics;
+  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: {
+      init: function init() {
+        return {
+          isEnabled: false,
+          loomButton: null,
+          isRecordingVideo: false,
+          error: undefined,
+          createAnalyticsEvent: undefined
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var _tr$getMeta, _pluginState$loomButt;
+        var action = (_tr$getMeta = tr.getMeta(loomPluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type;
+        switch (action) {
+          case LoomPluginAction.SET_ANALYTICS_FUNCTION:
+            var _tr$getMeta2 = tr.getMeta(loomPluginKey),
+              createAnalyticsEvent = _tr$getMeta2.createAnalyticsEvent;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              createAnalyticsEvent: createAnalyticsEvent
+            });
+          case LoomPluginAction.ENABLE:
+            var _tr$getMeta3 = tr.getMeta(loomPluginKey),
+              loomButton = _tr$getMeta3.loomButton;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              isEnabled: true,
+              loomButton: loomButton
+            });
+          case LoomPluginAction.DISABLE:
+            var _tr$getMeta4 = tr.getMeta(loomPluginKey),
+              error = _tr$getMeta4.error;
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              isEnabled: false,
+              loomButton: null,
+              error: error
+            });
+          case LoomPluginAction.RECORD_VIDEO:
+            // Click the unmounted button in state that has the Loom SDK attached
+            pluginState === null || pluginState === void 0 || (_pluginState$loomButt = pluginState.loomButton) === null || _pluginState$loomButt === void 0 || _pluginState$loomButt.click();
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              isRecordingVideo: true
+            });
+          case LoomPluginAction.INSERT_VIDEO:
+            return _objectSpread(_objectSpread({}, pluginState), {}, {
+              isRecordingVideo: false
+            });
+          default:
+            return pluginState;
+        }
+      }
+    },
+    view: function view(editorView) {
+      var setupLoom = /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          var _yield$import, isSupported, setup, _yield$isSupported, supported, error, _pluginState, _yield$setup, configureButton, loomButton, sdkButton, pluginState;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return import( /* webpackChunkName: "@atlaskit-internal_editor-loom-sdk" */'@loomhq/record-sdk');
+              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 = 16;
+                  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.actions.execute(disableLoom({
+                  error: error
+                }));
+                logException(new Error(error), {
+                  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
+                _pluginState = loomPluginKey.getState(editorView.state);
+                fireAnalyticsEvent(_pluginState === null || _pluginState === void 0 ? void 0 : _pluginState.createAnalyticsEvent)({
+                  payload: {
+                    action: ACTION.ERRORED,
+                    actionSubject: ACTION_SUBJECT.LOOM,
+                    eventType: EVENT_TYPE.OPERATIONAL,
+                    attributes: {
+                      error: error
+                    }
+                  }
+                });
+                return _context2.abrupt("return");
+              case 16:
+                _context2.next = 18;
+                return setup({
+                  publicAppId: LOOM_SDK_PUBLIC_APP_ID
+                });
+              case 18:
+                _yield$setup = _context2.sent;
+                configureButton = _yield$setup.configureButton;
+                // 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) {
+                    var _api$hyperlink;
+                    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.core.actions.execute(insertVideo({
+                            editorAnalyticsAPI: editorAnalyticsAPI,
+                            video: video
+                          }));
+                        case 4:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }, _callee);
+                  }));
+                  return function (_x) {
+                    return _ref2.apply(this, arguments);
+                  };
+                }());
+                api === null || api === void 0 || api.core.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
+                pluginState = loomPluginKey.getState(editorView.state);
+                fireAnalyticsEvent(pluginState === null || pluginState === void 0 ? void 0 : pluginState.createAnalyticsEvent)({
+                  payload: {
+                    action: ACTION.INITIALISED,
+                    actionSubject: ACTION_SUBJECT.LOOM,
+                    eventType: EVENT_TYPE.OPERATIONAL
+                  }
+                });
+              case 26:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function setupLoom() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      setupLoom();
+      return {};
+    }
+  });
+};

package/dist/esm/ui/ToolbarButton.js

@@ -0,0 +1,37 @@
+import React from '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 VideoCircleIcon from '@atlaskit/icon/glyph/video-circle';
+import { recordVideo } from '../commands';
+var LoomToolbarButton = function LoomToolbarButton(_ref) {
+  var disabled = _ref.disabled,
+    api = _ref.api,
+    formatMessage = _ref.intl.formatMessage;
+  var _useSharedPluginState = useSharedPluginState(api, ['loom']),
+    loomState = _useSharedPluginState.loomState;
+  if (!loomState) {
+    return null;
+  }
+  var label = formatMessage(toolbarInsertBlockMessages.recordVideo);
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
+    onClick: function onClick() {
+      var _api$analytics;
+      return api === null || api === 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),
+    title: label,
+    iconBefore: /*#__PURE__*/React.createElement(VideoCircleIcon, {
+      label: label
+    })
+  });
+};
+export default injectIntl(LoomToolbarButton);

package/dist/types/commands.d.ts

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

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { loomPlugin } from './plugin';
+export type { LoomPlugin } from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,12 @@
+import type { 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 { LoomPluginState } from './pm-plugin';
+export type LoomPlugin = NextEditorPlugin<'loom', {
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        HyperlinkPlugin
+    ];
+    sharedState: LoomPluginState | undefined;
+}>;
+export declare const loomPlugin: LoomPlugin;

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

@@ -0,0 +1,22 @@
+import type { SDKUnsupportedReasons } from '@loomhq/record-sdk';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+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';
+export interface LoomPluginState {
+    isEnabled: boolean;
+    loomButton: HTMLButtonElement | null;
+    isRecordingVideo: boolean;
+    error: SDKUnsupportedReasons | undefined;
+    createAnalyticsEvent: CreateUIAnalyticsEvent | undefined;
+}
+export declare enum LoomPluginAction {
+    ENABLE = 0,
+    DISABLE = 1,
+    RECORD_VIDEO = 2,
+    INSERT_VIDEO = 3,
+    SET_ANALYTICS_FUNCTION = 4
+}
+export declare const loomPluginKey: PluginKey<LoomPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => SafePlugin<LoomPluginState>;