@atlaskit/editor-plugin-loom 3.0.1 → 3.0.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-loom
 
+## 3.0.3
+
+### Patch Changes
+
+- [#146839](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146839)
+  [`5150b3ba1d31d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5150b3ba1d31d) -
+  Subscribe to plugin state changes within custom Loom editor toolbar button
+
+## 3.0.2
+
+### Patch Changes
+
+- [#145206](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145206)
+  [`cca8cc490ec20`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cca8cc490ec20) -
+  [ED-25135] Fix: loom is not initialised correctly if `initLoom` is called when collab-edit plugin
+  is not ready
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/cjs/commands.js

@@ -130,9 +130,9 @@ var executeRecordVideo = exports.executeRecordVideo = function executeRecordVide
   }));
 };
 var setupLoom = exports.setupLoom = /*#__PURE__*/function () {
-  var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(loomProvider, api, editorView, isAfterEditorLoaded) {
-    var _api$core4;
-    var clientResult, _api$core2, _api$analytics2, attachToButton, loomButton, _api$analytics6;
+  var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(loomProvider, api, editorView, initViaCommand) {
+    var _api$core4, _api$analytics5;
+    var clientResult, _api$core2, _api$analytics2, attachToButton, loomButton;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -191,28 +191,24 @@ var setupLoom = exports.setupLoom = /*#__PURE__*/function () {
             })({
               tr: tr
             });
-            if (isAfterEditorLoaded) {
-              var _api$quickInsert, _api$analytics4, _api$analytics5;
+            if (initViaCommand) {
+              var _api$quickInsert, _api$analytics4;
               api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.commands.addQuickInsertItem((0, _quickInsert.getQuickInsertItem)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions))({
                 tr: tr
               });
-              api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.attachAnalyticsEvent({
-                action: _analytics.ACTION.INITIALISED,
-                actionSubject: _analytics.ACTION_SUBJECT.LOOM,
-                eventType: _analytics.EVENT_TYPE.OPERATIONAL
-              })(tr);
             }
             return tr;
           });
-          if (!isAfterEditorLoaded) {
-            // We're not combining the analytics steps into the enable / disable commands because the collab-edit plugin
-            // filters out any transactions with steps (even analytics) when it's initialising
-            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || _api$analytics6.actions.fireAnalyticsEvent({
-              action: _analytics.ACTION.INITIALISED,
-              actionSubject: _analytics.ACTION_SUBJECT.LOOM,
-              eventType: _analytics.EVENT_TYPE.OPERATIONAL
-            });
-          }
+
+          // 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.
+          // Even if `initViaCommand` is true, collab-edit might not be ready depending on when `initLoom` is called,
+          // hence the analytics step is added separately in both cases
+          api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.fireAnalyticsEvent({
+            action: _analytics.ACTION.INITIALISED,
+            actionSubject: _analytics.ACTION_SUBJECT.LOOM,
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL
+          });
           return _context.abrupt("return", {});
         case 14:
         case "end":

package/dist/cjs/ui/PrimaryToolbarButton.js

@@ -12,7 +12,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _commands = require("../commands");
-var _pmPlugin = require("../pm-plugin");
 var _ToolbarButtonComponent = _interopRequireDefault(require("./ToolbarButtonComponent"));
 var _excluded = ["onClickBeforeInit", "isDisabled", "href"];
 /**
@@ -22,15 +21,16 @@ var _excluded = ["onClickBeforeInit", "isDisabled", "href"];
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(editorView, disabled, appearance, api) {
+var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(disabled, appearance, api) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-    var _loomPluginKey$getSta;
     var onClickBeforeInit = props.onClickBeforeInit,
       _props$isDisabled = props.isDisabled,
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
       href = props.href,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-    var isLoomEnabled = (_loomPluginKey$getSta = _pmPlugin.loomPluginKey.getState(editorView.state)) === null || _loomPluginKey$getSta === void 0 ? void 0 : _loomPluginKey$getSta.isEnabled;
+    var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom']),
+      loomState = _useSharedPluginState.loomState;
+    var isLoomEnabled = !!(loomState !== null && loomState !== void 0 && loomState.isEnabled);
     var handleOnClick = (0, _react.useCallback)(function (e) {
       if (isLoomEnabled) {
         (0, _commands.executeRecordVideo)(api);
@@ -60,8 +60,8 @@ var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
   var handleOnClick = (0, _react.useCallback)(function () {
     return (0, _commands.executeRecordVideo)(api);
   }, [api]);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['loom']),
-    loomState = _useSharedPluginState.loomState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['loom']),
+    loomState = _useSharedPluginState2.loomState;
   if (!loomState) {
     return null;
   }
@@ -77,13 +77,12 @@ var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
 var loomPrimaryToolbarComponent = exports.loomPrimaryToolbarComponent = function loomPrimaryToolbarComponent(config, api) {
   return function (_ref2) {
     var disabled = _ref2.disabled,
-      appearance = _ref2.appearance,
-      editorView = _ref2.editorView;
+      appearance = _ref2.appearance;
     if (config.shouldShowToolbarButton === false) {
       return null;
     }
     if (config.renderButton) {
-      return config.renderButton(CustomisableLoomToolbarButton(editorView, disabled, appearance, api));
+      return config.renderButton(CustomisableLoomToolbarButton(disabled, appearance, api));
     }
     if (config.shouldShowToolbarButton) {
       return (0, _react2.jsx)(LoomToolbarButtonWrapper

package/dist/es2019/commands.js

@@ -123,8 +123,8 @@ export const executeRecordVideo = api => {
     editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
   }));
 };
-export const setupLoom = async (loomProvider, api, editorView, isAfterEditorLoaded) => {
-  var _api$core4;
+export const setupLoom = async (loomProvider, api, editorView, initViaCommand) => {
+  var _api$core4, _api$analytics5;
   const clientResult = await loomProvider.getClient();
   if (clientResult.status === 'error') {
     var _api$core2, _api$analytics2;
@@ -182,28 +182,23 @@ export const setupLoom = async (loomProvider, api, editorView, isAfterEditorLoad
     })({
       tr
     });
-    if (isAfterEditorLoaded) {
-      var _api$quickInsert, _api$analytics4, _api$analytics5;
+    if (initViaCommand) {
+      var _api$quickInsert, _api$analytics4;
       api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.addQuickInsertItem(getQuickInsertItem(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions))({
         tr
       });
-      api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions.attachAnalyticsEvent({
-        action: ACTION.INITIALISED,
-        actionSubject: ACTION_SUBJECT.LOOM,
-        eventType: EVENT_TYPE.OPERATIONAL
-      })(tr);
     }
     return tr;
   });
-  if (!isAfterEditorLoaded) {
-    var _api$analytics6;
-    // 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$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions.fireAnalyticsEvent({
-      action: ACTION.INITIALISED,
-      actionSubject: ACTION_SUBJECT.LOOM,
-      eventType: EVENT_TYPE.OPERATIONAL
-    });
-  }
+
+  // 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.
+  // Even if `initViaCommand` is true, collab-edit might not be ready depending on when `initLoom` is called,
+  // hence the analytics step is added separately in both cases
+  api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions.fireAnalyticsEvent({
+    action: ACTION.INITIALISED,
+    actionSubject: ACTION_SUBJECT.LOOM,
+    eventType: EVENT_TYPE.OPERATIONAL
+  });
   return {};
 };

package/dist/es2019/ui/PrimaryToolbarButton.js

@@ -9,17 +9,18 @@ import React, { useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { executeRecordVideo } from '../commands';
-import { loomPluginKey } from '../pm-plugin';
 import ToolbarButtonComponent from './ToolbarButtonComponent';
-const CustomisableLoomToolbarButton = (editorView, disabled, appearance, api) => /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _loomPluginKey$getSta;
+const CustomisableLoomToolbarButton = (disabled, appearance, api) => /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     onClickBeforeInit,
     isDisabled = false,
     href,
     ...restProps
   } = props;
-  const isLoomEnabled = (_loomPluginKey$getSta = loomPluginKey.getState(editorView.state)) === null || _loomPluginKey$getSta === void 0 ? void 0 : _loomPluginKey$getSta.isEnabled;
+  const {
+    loomState
+  } = useSharedPluginState(api, ['loom']);
+  const isLoomEnabled = !!(loomState !== null && loomState !== void 0 && loomState.isEnabled);
   const handleOnClick = useCallback(e => {
     if (isLoomEnabled) {
       executeRecordVideo(api);
@@ -62,14 +63,13 @@ const LoomToolbarButtonWrapper = ({
 };
 export const loomPrimaryToolbarComponent = (config, api) => ({
   disabled,
-  appearance,
-  editorView
+  appearance
 }) => {
   if (config.shouldShowToolbarButton === false) {
     return null;
   }
   if (config.renderButton) {
-    return config.renderButton(CustomisableLoomToolbarButton(editorView, disabled, appearance, api));
+    return config.renderButton(CustomisableLoomToolbarButton(disabled, appearance, api));
   }
   if (config.shouldShowToolbarButton) {
     return jsx(LoomToolbarButtonWrapper

package/dist/esm/commands.js

@@ -123,9 +123,9 @@ export var executeRecordVideo = function executeRecordVideo(api) {
   }));
 };
 export var setupLoom = /*#__PURE__*/function () {
-  var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(loomProvider, api, editorView, isAfterEditorLoaded) {
-    var _api$core4;
-    var clientResult, _api$core2, _api$analytics2, attachToButton, loomButton, _api$analytics6;
+  var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(loomProvider, api, editorView, initViaCommand) {
+    var _api$core4, _api$analytics5;
+    var clientResult, _api$core2, _api$analytics2, attachToButton, loomButton;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -184,28 +184,24 @@ export var setupLoom = /*#__PURE__*/function () {
             })({
               tr: tr
             });
-            if (isAfterEditorLoaded) {
-              var _api$quickInsert, _api$analytics4, _api$analytics5;
+            if (initViaCommand) {
+              var _api$quickInsert, _api$analytics4;
               api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.commands.addQuickInsertItem(getQuickInsertItem(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions))({
                 tr: tr
               });
-              api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.attachAnalyticsEvent({
-                action: ACTION.INITIALISED,
-                actionSubject: ACTION_SUBJECT.LOOM,
-                eventType: EVENT_TYPE.OPERATIONAL
-              })(tr);
             }
             return tr;
           });
-          if (!isAfterEditorLoaded) {
-            // We're not combining the analytics steps into the enable / disable commands because the collab-edit plugin
-            // filters out any transactions with steps (even analytics) when it's initialising
-            api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 || _api$analytics6.actions.fireAnalyticsEvent({
-              action: ACTION.INITIALISED,
-              actionSubject: ACTION_SUBJECT.LOOM,
-              eventType: EVENT_TYPE.OPERATIONAL
-            });
-          }
+
+          // 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.
+          // Even if `initViaCommand` is true, collab-edit might not be ready depending on when `initLoom` is called,
+          // hence the analytics step is added separately in both cases
+          api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 || _api$analytics5.actions.fireAnalyticsEvent({
+            action: ACTION.INITIALISED,
+            actionSubject: ACTION_SUBJECT.LOOM,
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
           return _context.abrupt("return", {});
         case 14:
         case "end":

package/dist/esm/ui/PrimaryToolbarButton.js

@@ -11,17 +11,17 @@ import React, { useCallback } from 'react';
 import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { executeRecordVideo } from '../commands';
-import { loomPluginKey } from '../pm-plugin';
 import ToolbarButtonComponent from './ToolbarButtonComponent';
-var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(editorView, disabled, appearance, api) {
+var CustomisableLoomToolbarButton = function CustomisableLoomToolbarButton(disabled, appearance, api) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
-    var _loomPluginKey$getSta;
     var onClickBeforeInit = props.onClickBeforeInit,
       _props$isDisabled = props.isDisabled,
       isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
       href = props.href,
       restProps = _objectWithoutProperties(props, _excluded);
-    var isLoomEnabled = (_loomPluginKey$getSta = loomPluginKey.getState(editorView.state)) === null || _loomPluginKey$getSta === void 0 ? void 0 : _loomPluginKey$getSta.isEnabled;
+    var _useSharedPluginState = useSharedPluginState(api, ['loom']),
+      loomState = _useSharedPluginState.loomState;
+    var isLoomEnabled = !!(loomState !== null && loomState !== void 0 && loomState.isEnabled);
     var handleOnClick = useCallback(function (e) {
       if (isLoomEnabled) {
         executeRecordVideo(api);
@@ -51,8 +51,8 @@ var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
   var handleOnClick = useCallback(function () {
     return executeRecordVideo(api);
   }, [api]);
-  var _useSharedPluginState = useSharedPluginState(api, ['loom']),
-    loomState = _useSharedPluginState.loomState;
+  var _useSharedPluginState2 = useSharedPluginState(api, ['loom']),
+    loomState = _useSharedPluginState2.loomState;
   if (!loomState) {
     return null;
   }
@@ -68,13 +68,12 @@ var LoomToolbarButtonWrapper = function LoomToolbarButtonWrapper(_ref) {
 export var loomPrimaryToolbarComponent = function loomPrimaryToolbarComponent(config, api) {
   return function (_ref2) {
     var disabled = _ref2.disabled,
-      appearance = _ref2.appearance,
-      editorView = _ref2.editorView;
+      appearance = _ref2.appearance;
     if (config.shouldShowToolbarButton === false) {
       return null;
     }
     if (config.renderButton) {
-      return config.renderButton(CustomisableLoomToolbarButton(editorView, disabled, appearance, api));
+      return config.renderButton(CustomisableLoomToolbarButton(disabled, appearance, api));
     }
     if (config.shouldShowToolbarButton) {
       return jsx(LoomToolbarButtonWrapper

package/dist/types/commands.d.ts

@@ -26,6 +26,6 @@ export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
 }) => EditorCommand;
 export declare const insertLoom: (editorView: EditorView | null, api: ExtractInjectionAPI<LoomPlugin> | undefined, video: VideoMeta, positionType: PositionType) => boolean;
 export declare const executeRecordVideo: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => void;
-export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, isAfterEditorLoaded?: boolean) => Promise<{
+export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, initViaCommand?: boolean) => Promise<{
     error?: string;
 }>;

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

@@ -26,6 +26,6 @@ export declare const insertVideo: ({ editorAnalyticsAPI, video, }: {
 }) => EditorCommand;
 export declare const insertLoom: (editorView: EditorView | null, api: ExtractInjectionAPI<LoomPlugin> | undefined, video: VideoMeta, positionType: PositionType) => boolean;
 export declare const executeRecordVideo: (api: ExtractInjectionAPI<LoomPlugin> | undefined) => void;
-export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, isAfterEditorLoaded?: boolean) => Promise<{
+export declare const setupLoom: (loomProvider: LoomProviderOptions, api: ExtractInjectionAPI<LoomPlugin> | undefined, editorView: EditorView | null, initViaCommand?: boolean) => Promise<{
     error?: string;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-loom",
-	"version": "3.0.1",
+	"version": "3.0.3",
 	"description": "Loom plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^91.0.0",
+		"@atlaskit/button": "^20.2.0",
+		"@atlaskit/editor-common": "^91.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-hyperlink": "^2.9.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^2.0.0",
@@ -59,7 +59,7 @@
 	},
 	"devDependencies": {
 		"@atlaskit/editor-plugin-base": "^1.11.0",
-		"@atlaskit/editor-plugin-card": "^3.0.0",
+		"@atlaskit/editor-plugin-card": "^3.3.0",
 		"@atlaskit/editor-plugin-copy-button": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",