@atlaskit/editor-plugin-loom 0.1.0

package/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-loom

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,9 @@
+# EditorPluginLoom
+
+Loom plugin for @atlaskit/editor-core
+
+## Usage
+
+`import EditorPluginLoom from '@atlaskit/editor-plugin-loom';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-plugin-loom).

package/dist/cjs/commands.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recordVideoFailed = exports.recordVideo = exports.insertVideo = exports.enableLoom = exports.disableLoom = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _pmPlugin = require("./pm-plugin");
+var enableLoom = exports.enableLoom = function enableLoom(_ref) {
+  var loomButton = _ref.loomButton;
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    tr.setMeta(_pmPlugin.loomPluginKey, {
+      type: _pmPlugin.LoomPluginAction.ENABLE,
+      loomButton: loomButton
+    });
+    return tr;
+  };
+};
+var disableLoom = exports.disableLoom = function disableLoom(_ref3) {
+  var error = _ref3.error;
+  return function (_ref4) {
+    var tr = _ref4.tr;
+    tr.setMeta(_pmPlugin.loomPluginKey, {
+      type: _pmPlugin.LoomPluginAction.DISABLE,
+      error: error
+    });
+    return tr;
+  };
+};
+var recordVideo = exports.recordVideo = function recordVideo(_ref5) {
+  var inputMethod = _ref5.inputMethod,
+    editorAnalyticsAPI = _ref5.editorAnalyticsAPI;
+  return function (_ref6) {
+    var tr = _ref6.tr;
+    tr.setMeta(_pmPlugin.loomPluginKey, {
+      type: _pmPlugin.LoomPluginAction.RECORD_VIDEO
+    });
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.RECORD_VIDEO,
+      actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  };
+};
+var recordVideoFailed = exports.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: _analytics.ACTION.RECORD_VIDEO_FAILED,
+      actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+      attributes: {
+        inputMethod: inputMethod,
+        error: error
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    return tr;
+  };
+};
+var insertVideo = exports.insertVideo = function insertVideo(_ref9) {
+  var editorAnalyticsAPI = _ref9.editorAnalyticsAPI,
+    video = _ref9.video;
+  return function (_ref10) {
+    var tr = _ref10.tr;
+    tr.setMeta(_pmPlugin.loomPluginKey, {
+      type: _pmPlugin.LoomPluginAction.INSERT_VIDEO
+    });
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.INSERT_VIDEO,
+      actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        duration: video.duration
+      }
+    })(tr);
+    return tr;
+  };
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "loomPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.loomPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loomPlugin = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _commands = require("./commands");
+var _pmPlugin = require("./pm-plugin");
+var _ToolbarButton = _interopRequireDefault(require("./ui/ToolbarButton"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var loomPlugin = exports.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 = (0, _analyticsNext.useAnalyticsEvents)(),
+        createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+      (0, _react.useLayoutEffect)(function () {
+        var dispatch = editorView.dispatch,
+          tr = editorView.state.tr;
+        tr.setMeta(_pmPlugin.loomPluginKey, {
+          type: _pmPlugin.LoomPluginAction.SET_ANALYTICS_FUNCTION,
+          createAnalyticsEvent: createAnalyticsEvent
+        });
+        dispatch(tr);
+      }, [createAnalyticsEvent, editorView]);
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'loom',
+        plugin: function plugin() {
+          return (0, _pmPlugin.createPlugin)(api);
+        }
+      }];
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      return _pmPlugin.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(_messages.toolbarInsertBlockMessages.recordVideo),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.recordVideoDescription),
+          keywords: ['loom', 'record', 'video'],
+          priority: 800,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLoom, null);
+          },
+          action: function action(insert, editorState) {
+            var _recordVideo;
+            var tr = insert(undefined);
+            var loomState = _pmPlugin.loomPluginKey.getState(editorState);
+            if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
+              var _recordVideoFailed;
+              var errorMessage = loomState === null || loomState === void 0 ? void 0 : loomState.error;
+              (0, _monitoring.logException)(new Error(errorMessage), {
+                location: 'editor-plugin-loom/quick-insert-record-video'
+              });
+              return (_recordVideoFailed = (0, _commands.recordVideoFailed)({
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+                error: errorMessage,
+                editorAnalyticsAPI: editorAnalyticsAPI
+              })({
+                tr: tr
+              })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
+            }
+            return (_recordVideo = (0, _commands.recordVideo)({
+              inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+              editorAnalyticsAPI: editorAnalyticsAPI
+            })({
+              tr: tr
+            })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
+          }
+        }];
+      }
+    },
+    // Enable inserting Loom recordings through main toolbar
+    primaryToolbarComponent: function primaryToolbarComponent(_ref4) {
+      var disabled = _ref4.disabled;
+      return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        disabled: disabled,
+        api: api
+      });
+    }
+  };
+};

package/dist/cjs/pm-plugin.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loomPluginKey = exports.createPlugin = exports.LoomPluginAction = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("./commands");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) {
+  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;
+}({});
+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 _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.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          var _yield$import, isSupported, setup, _yield$isSupported, supported, error, _pluginState, _yield$setup, configureButton, loomButton, sdkButton, pluginState;
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return Promise.resolve().then(function () {
+                  return _interopRequireWildcard(require( /* 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((0, _commands.disableLoom)({
+                  error: error
+                }));
+                (0, _monitoring.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);
+                (0, _analytics.fireAnalyticsEvent)(_pluginState === null || _pluginState === void 0 ? void 0 : _pluginState.createAnalyticsEvent)({
+                  payload: {
+                    action: _analytics.ACTION.ERRORED,
+                    actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+                    eventType: _analytics.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(video) {
+                    var _api$hyperlink;
+                    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.core.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);
+                  };
+                }());
+                api === null || api === void 0 || api.core.actions.execute((0, _commands.enableLoom)({
+                  loomButton: loomButton
+                }));
+                // We're not combining the analytics steps into the enable / disable commands because the collab-edit plugin
+                // filters out any transactions with steps (even analytics) when it's initialising
+                pluginState = loomPluginKey.getState(editorView.state);
+                (0, _analytics.fireAnalyticsEvent)(pluginState === null || pluginState === void 0 ? void 0 : pluginState.createAnalyticsEvent)({
+                  payload: {
+                    action: _analytics.ACTION.INITIALISED,
+                    actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+                    eventType: _analytics.EVENT_TYPE.OPERATIONAL
+                  }
+                });
+              case 26:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function setupLoom() {
+          return _ref.apply(this, arguments);
+        };
+      }();
+      setupLoom();
+      return {};
+    }
+  });
+};

package/dist/cjs/ui/ToolbarButton.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _videoCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/video-circle"));
+var _commands = require("../commands");
+var LoomToolbarButton = function LoomToolbarButton(_ref) {
+  var disabled = _ref.disabled,
+    api = _ref.api,
+    formatMessage = _ref.intl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom']),
+    loomState = _useSharedPluginState.loomState;
+  if (!loomState) {
+    return null;
+  }
+  var label = formatMessage(_messages.toolbarInsertBlockMessages.recordVideo);
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    buttonId: _uiMenu.TOOLBAR_BUTTON.RECORD_VIDEO,
+    onClick: function onClick() {
+      var _api$analytics;
+      return api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.recordVideo)({
+        inputMethod: _analytics.INPUT_METHOD.TOOLBAR,
+        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+      }));
+    }
+    // Disable the icon while the SDK isn't initialised
+    ,
+    disabled: disabled || !(loomState !== null && loomState !== void 0 && loomState.isEnabled),
+    title: label,
+    iconBefore: /*#__PURE__*/_react.default.createElement(_videoCircle.default, {
+      label: label
+    })
+  });
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(LoomToolbarButton);

package/dist/es2019/commands.js

@@ -0,0 +1,80 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { LoomPluginAction, loomPluginKey } from './pm-plugin';
+export const enableLoom = ({
+  loomButton
+}) => ({
+  tr
+}) => {
+  tr.setMeta(loomPluginKey, {
+    type: LoomPluginAction.ENABLE,
+    loomButton
+  });
+  return tr;
+};
+export const disableLoom = ({
+  error
+}) => ({
+  tr
+}) => {
+  tr.setMeta(loomPluginKey, {
+    type: LoomPluginAction.DISABLE,
+    error
+  });
+  return tr;
+};
+export const recordVideo = ({
+  inputMethod,
+  editorAnalyticsAPI
+}) => ({
+  tr
+}) => {
+  tr.setMeta(loomPluginKey, {
+    type: LoomPluginAction.RECORD_VIDEO
+  });
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.RECORD_VIDEO,
+    actionSubject: ACTION_SUBJECT.LOOM,
+    attributes: {
+      inputMethod
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  return tr;
+};
+export const recordVideoFailed = ({
+  inputMethod,
+  error,
+  editorAnalyticsAPI
+}) => ({
+  tr
+}) => {
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.RECORD_VIDEO_FAILED,
+    actionSubject: ACTION_SUBJECT.LOOM,
+    attributes: {
+      inputMethod,
+      error
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+  return tr;
+};
+export const insertVideo = ({
+  editorAnalyticsAPI,
+  video
+}) => ({
+  tr
+}) => {
+  tr.setMeta(loomPluginKey, {
+    type: LoomPluginAction.INSERT_VIDEO
+  });
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? 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/es2019/index.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,95 @@
+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 const loomPlugin = ({
+  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 {
+    name: 'loom',
+    usePluginHook({
+      editorView
+    }) {
+      const {
+        createAnalyticsEvent
+      } = useAnalyticsEvents();
+      useLayoutEffect(() => {
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = editorView;
+        tr.setMeta(loomPluginKey, {
+          type: LoomPluginAction.SET_ANALYTICS_FUNCTION,
+          createAnalyticsEvent
+        });
+        dispatch(tr);
+      }, [createAnalyticsEvent, editorView]);
+    },
+    pmPlugins: () => [{
+      name: 'loom',
+      plugin: () => createPlugin(api)
+    }],
+    getSharedState(editorState) {
+      if (!editorState) {
+        return;
+      }
+      return loomPluginKey.getState(editorState);
+    },
+    pluginsOptions: {
+      // Enable inserting Loom recordings through the slash command
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'loom',
+        title: formatMessage(toolbarInsertBlockMessages.recordVideo),
+        description: formatMessage(toolbarInsertBlockMessages.recordVideoDescription),
+        keywords: ['loom', 'record', 'video'],
+        priority: 800,
+        icon: () => /*#__PURE__*/React.createElement(IconLoom, null),
+        action(insert, editorState) {
+          var _recordVideo;
+          const tr = insert(undefined);
+          const loomState = loomPluginKey.getState(editorState);
+          if (!(loomState !== null && loomState !== void 0 && loomState.isEnabled)) {
+            var _recordVideoFailed;
+            const 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
+            })({
+              tr
+            })) !== null && _recordVideoFailed !== void 0 ? _recordVideoFailed : false;
+          }
+          return (_recordVideo = recordVideo({
+            inputMethod: INPUT_METHOD.QUICK_INSERT,
+            editorAnalyticsAPI
+          })({
+            tr
+          })) !== null && _recordVideo !== void 0 ? _recordVideo : false;
+        }
+      }]
+    },
+    // Enable inserting Loom recordings through main toolbar
+    primaryToolbarComponent({
+      disabled
+    }) {
+      return /*#__PURE__*/React.createElement(LoomToolbarButton, {
+        disabled: disabled,
+        api: api
+      });
+    }
+  };
+};