@atlaskit/editor-plugin-card 0.3.3 → 0.3.5

package/dist/cjs/pm-plugins/main.js

@@ -19,26 +19,25 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _eventsFromTr = require("../analytics/events-from-tr");
 var _blockCard = require("../nodeviews/blockCard");
 var _datasource = require("../nodeviews/datasource");
 var _embedCard = require("../nodeviews/embedCard");
 var _inlineCard = require("../nodeviews/inlineCard");
 var _actions = require("./actions");
-var _analytics = require("./analytics");
 var _pluginKey = require("./plugin-key");
 var _reducers = _interopRequireDefault(require("./reducers"));
 var _resolve = require("./util/resolve");
 var _state2 = require("./util/state");
 var createPlugin = function createPlugin(options, pluginInjectionApi) {
   return function (pmPluginFactoryParams) {
-    var lpAnalyticsEventsNext = pmPluginFactoryParams.featureFlags.lpAnalyticsEventsNext;
-    var analyticsQueue = (0, _analytics.createAnalyticsQueue)(!!lpAnalyticsEventsNext);
     var editorAppearance = options.editorAppearance,
       platform = options.platform,
       allowResizing = options.allowResizing,
       useAlternativePreloader = options.useAlternativePreloader,
       fullWidthMode = options.fullWidthMode,
-      showServerActions = options.showServerActions;
+      showServerActions = options.showServerActions,
+      cardPluginEvents = options.cardPluginEvents;
     var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: _inlineCard.InlineCardNodeView,
@@ -56,7 +55,6 @@ var createPlugin = function createPlugin(options, pluginInjectionApi) {
             cards: [],
             showLinkingToolbar: false,
             smartLinkEvents: undefined,
-            smartLinkEventsNext: undefined,
             editorAppearance: editorAppearance,
             showDatasourceModal: false,
             datasourceModalType: undefined,
@@ -71,14 +69,12 @@ var createPlugin = function createPlugin(options, pluginInjectionApi) {
 
           // apply any actions
           var meta = tr.getMeta(_pluginKey.pluginKey);
-          var events = (0, _analytics.eventsFromTransaction)(tr, prevEditorState);
-          analyticsQueue.push.apply(analyticsQueue, (0, _toConsumableArray2.default)(events));
+          if (cardPluginEvents) {
+            var events = (0, _eventsFromTr.eventsFromTransaction)(tr, prevEditorState);
+            cardPluginEvents.push.apply(cardPluginEvents, (0, _toConsumableArray2.default)(events));
+          }
           if (meta) {
-            var nextState = (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
-            if (!pluginState.smartLinkEventsNext && nextState.smartLinkEventsNext) {
-              analyticsQueue.setCallbacks(nextState.smartLinkEventsNext);
-            }
-            return nextState;
+            return (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
           }
           return pluginStateWithUpdatedPos;
         }
@@ -146,7 +142,13 @@ var createPlugin = function createPlugin(options, pluginInjectionApi) {
                 invoke();
               });
             }
-            analyticsQueue.flush();
+
+            /**
+             * If there have been any events queued, flush them
+             * so subscribers can now be notified and dispatch
+             * analytics events
+             */
+            cardPluginEvents === null || cardPluginEvents === void 0 ? void 0 : cardPluginEvents.flush();
           },
           destroy: function destroy() {
             // Cancel any outstanding raf callbacks.

package/dist/cjs/pm-plugins/reducers.js

@@ -57,11 +57,6 @@ var registerEvents = function registerEvents(state, action) {
     smartLinkEvents: action.smartLinkEvents
   });
 };
-var registerEventsNext = function registerEventsNext(state, action) {
-  return _objectSpread(_objectSpread({}, state), {}, {
-    smartLinkEventsNext: action.smartLinkEvents
-  });
-};
 var setLinkToolbar = function setLinkToolbar(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
     showLinkingToolbar: action.type === 'SHOW_LINK_TOOLBAR'
@@ -91,8 +86,6 @@ var _default = function _default(state, action) {
       return register(state, action);
     case 'REGISTER_EVENTS':
       return registerEvents(state, action);
-    case 'REGISTER_EVENTS_NEXT':
-      return registerEventsNext(state, action);
     case 'SET_DATASOURCE_TABLE_REF':
       return setDatasourceTableRef(state, action);
     case 'SET_CARD_LAYOUT':

package/dist/cjs/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceEventsBinding = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _types = require("../../analytics/types");
+/**
+ * Subscribes to the events occuring in the card
+ * plugin and fires analytics events accordingly
+ */
+var DatasourceEventsBinding = function DatasourceEventsBinding(_ref) {
+  var cardPluginEvents = _ref.cardPluginEvents;
+  var eventHandlers = (0, _react.useMemo)(function () {
+    var _ref2;
+    return _ref2 = {}, (0, _defineProperty2.default)(_ref2, _types.EVENT.CREATED, function (metadata) {
+      // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+      // eslint-disable-next-line no-console
+      console.log('CREATED', metadata.node, metadata.nodeContext);
+    }), (0, _defineProperty2.default)(_ref2, _types.EVENT.UPDATED, function (metadata) {
+      // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+      // eslint-disable-next-line no-console
+      console.log('UPDATED', metadata.node, metadata.nodeContext);
+    }), (0, _defineProperty2.default)(_ref2, _types.EVENT.DELETED, function (metadata) {
+      // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
+      // eslint-disable-next-line no-console
+      console.log('DELETED', metadata.node, metadata.nodeContext);
+    }), _ref2;
+  }, []);
+
+  /**
+   * Subscribe to datasource events
+   */
+  (0, _react.useEffect)(function () {
+    var unsubscribe = cardPluginEvents.subscribe(function (_ref3) {
+      var event = _ref3.event,
+        subject = _ref3.subject,
+        data = _ref3.data;
+      if (subject === _types.EVENT_SUBJECT.DATASOURCE) {
+        eventHandlers[event](data);
+      }
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [eventHandlers, cardPluginEvents]);
+  return null;
+};
+exports.DatasourceEventsBinding = DatasourceEventsBinding;

package/dist/cjs/ui/EditorLinkingPlatformAnalytics/LinkEvents.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkEventsBinding = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _linkAnalytics = require("@atlaskit/link-analytics");
+var _types = require("../../analytics/types");
+var _utils = require("../../analytics/utils");
+var _common = require("./common");
+var _excluded = ["node", "nodeContext"],
+  _excluded2 = ["node", "nodeContext", "previousDisplay"],
+  _excluded3 = ["node", "nodeContext"];
+/**
+ * Set display category as `link` if not displaying the link as a smart card
+ */
+var displayCategoryFromDisplay = function displayCategoryFromDisplay(display) {
+  if (display === 'url') {
+    return 'link';
+  }
+};
+/**
+ * Subscribes to the events occuring in the card
+ * plugin and fires analytics events accordingly
+ */
+var LinkEventsBinding = function LinkEventsBinding(_ref) {
+  var cardPluginEvents = _ref.cardPluginEvents;
+  /**
+   * These callbacks internally use window.requestIdleCallback/requestAnimationFrame
+   * to defer any heavy operations involving network
+   *
+   * The callbacks themselves should not be deferred, they should be called syncronously the moment
+   * the events take place.
+   */
+  var _useSmartLinkLifecycl = (0, _linkAnalytics.useSmartLinkLifecycleAnalytics)(),
+    linkCreated = _useSmartLinkLifecycl.linkCreated,
+    linkUpdated = _useSmartLinkLifecycl.linkUpdated,
+    linkDeleted = _useSmartLinkLifecycl.linkDeleted;
+  var linkEvents = (0, _react.useMemo)(function () {
+    var _ref5;
+    return _ref5 = {}, (0, _defineProperty2.default)(_ref5, _types.EVENT.CREATED, function (_ref2) {
+      var node = _ref2.node,
+        nodeContext = _ref2.nodeContext,
+        metadata = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      var url = (0, _utils.getUrl)(node);
+      if (!url) {
+        return;
+      }
+      var display = (0, _utils.appearanceForLink)(node);
+      var displayCategory = displayCategoryFromDisplay(display);
+      var sourceEvent = (0, _common.getSourceEventFromMetadata)(metadata);
+      var creationMethod = (0, _common.getMethod)(metadata);
+      linkCreated({
+        url: url,
+        displayCategory: displayCategory
+      }, sourceEvent, {
+        display: display,
+        nodeContext: nodeContext,
+        creationMethod: creationMethod
+      });
+    }), (0, _defineProperty2.default)(_ref5, _types.EVENT.UPDATED, function (_ref3) {
+      var node = _ref3.node,
+        nodeContext = _ref3.nodeContext,
+        previousDisplay = _ref3.previousDisplay,
+        metadata = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+      var url = (0, _utils.getUrl)(node);
+      if (!url) {
+        return;
+      }
+      var display = (0, _utils.appearanceForLink)(node);
+      var displayCategory = displayCategoryFromDisplay(display);
+      var sourceEvent = (0, _common.getSourceEventFromMetadata)(metadata);
+      var updateMethod = (0, _common.getMethod)(metadata);
+      var updateType = (0, _common.getUpdateType)(metadata);
+      linkUpdated({
+        url: url,
+        displayCategory: displayCategory
+      }, sourceEvent, {
+        display: display,
+        previousDisplay: previousDisplay,
+        nodeContext: nodeContext,
+        updateMethod: updateMethod,
+        updateType: updateType
+      });
+    }), (0, _defineProperty2.default)(_ref5, _types.EVENT.DELETED, function (_ref4) {
+      var node = _ref4.node,
+        nodeContext = _ref4.nodeContext,
+        metadata = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+      var url = (0, _utils.getUrl)(node);
+      if (!url) {
+        return;
+      }
+      var display = (0, _utils.appearanceForLink)(node);
+      var displayCategory = displayCategoryFromDisplay(display);
+      var sourceEvent = (0, _common.getSourceEventFromMetadata)(metadata);
+      var deleteMethod = (0, _common.getMethod)(metadata);
+      var deleteType = (0, _common.getDeleteType)(metadata);
+      linkDeleted({
+        url: url,
+        displayCategory: displayCategory
+      }, sourceEvent, {
+        display: display,
+        nodeContext: nodeContext,
+        deleteMethod: deleteMethod,
+        deleteType: deleteType
+      });
+    }), _ref5;
+  }, [linkCreated, linkUpdated, linkDeleted]);
+
+  /**
+   * Subscribe to link events
+   */
+  (0, _react.useEffect)(function () {
+    var unsubscribe = cardPluginEvents.subscribe(function (_ref6) {
+      var event = _ref6.event,
+        subject = _ref6.subject,
+        data = _ref6.data;
+      if (subject === _types.EVENT_SUBJECT.LINK) {
+        linkEvents[event](data);
+      }
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [linkEvents, cardPluginEvents]);
+  return null;
+};
+exports.LinkEventsBinding = LinkEventsBinding;

package/dist/cjs/ui/EditorLinkingPlatformAnalytics/common.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUpdateType = exports.getSourceEventFromMetadata = exports.getMethod = exports.getDeleteType = void 0;
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+/**
+ * If the metadata is for a history event,
+ * returns undo/redo instead of instead of what fn(metadata) would have otherwise
+ * returned
+ */
+var withHistoryMethod = function withHistoryMethod(fn) {
+  return function (metadata) {
+    var isUndo = metadata.isUndo,
+      isRedo = metadata.isRedo;
+    if (isUndo) {
+      return 'undo';
+    }
+    if (isRedo) {
+      return 'redo';
+    }
+    return fn(metadata);
+  };
+};
+var getMethod = withHistoryMethod(function (_ref) {
+  var inputMethod = _ref.inputMethod;
+  switch (inputMethod) {
+    case _analytics.INPUT_METHOD.CLIPBOARD:
+      return 'editor_paste';
+    case _analytics.INPUT_METHOD.FLOATING_TB:
+      return 'editor_floatingToolbar';
+    case _analytics.INPUT_METHOD.AUTO_DETECT:
+    case _analytics.INPUT_METHOD.FORMATTING:
+      return 'editor_type';
+    default:
+      return 'unknown';
+  }
+});
+exports.getMethod = getMethod;
+var getUpdateType = withHistoryMethod(function (_ref2) {
+  var action = _ref2.action;
+  switch (action) {
+    case _analytics.ACTION.CHANGED_TYPE:
+      return 'display_update';
+    case _analytics.ACTION.UPDATED:
+      return 'link_update';
+    default:
+      return 'unknown';
+  }
+});
+exports.getUpdateType = getUpdateType;
+var getDeleteType = withHistoryMethod(function (_ref3) {
+  var action = _ref3.action;
+  if (action === _analytics.ACTION.UNLINK) {
+    return 'unlink';
+  }
+  return 'delete';
+});
+exports.getDeleteType = getDeleteType;
+var getSourceEventFromMetadata = function getSourceEventFromMetadata(metadata) {
+  return metadata.sourceEvent instanceof _analyticsNext.UIAnalyticsEvent ? metadata.sourceEvent : null;
+};
+exports.getSourceEventFromMetadata = getSourceEventFromMetadata;

package/dist/cjs/ui/EditorLinkingPlatformAnalytics/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorLinkingPlatformAnalytics = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _EditorAnalyticsContext = require("../EditorAnalyticsContext");
+var _DatasourceEvents = require("./DatasourceEvents");
+var _LinkEvents = require("./LinkEvents");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var EditorLinkingPlatformAnalytics = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(EditorLinkingPlatformAnalytics, _React$PureComponent);
+  var _super = _createSuper(EditorLinkingPlatformAnalytics);
+  function EditorLinkingPlatformAnalytics() {
+    (0, _classCallCheck2.default)(this, EditorLinkingPlatformAnalytics);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(EditorLinkingPlatformAnalytics, [{
+    key: "render",
+    value: function render() {
+      var cardContext = this.context.contextAdapter.card;
+
+      /**
+       * The analytics hook needs to be able to communicate with the card context
+       * If we can't access it, don't mount the event bindings
+       * This effectively entirely disables all tracking behaviour
+       */
+      if (!cardContext) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, /*#__PURE__*/_react.default.createElement(_EditorAnalyticsContext.EditorAnalyticsContext, {
+        editorView: this.props.editorView
+      }, /*#__PURE__*/_react.default.createElement(_LinkEvents.LinkEventsBinding, this.props), /*#__PURE__*/_react.default.createElement(_DatasourceEvents.DatasourceEventsBinding, this.props)));
+    }
+  }]);
+  return EditorLinkingPlatformAnalytics;
+}(_react.default.PureComponent);
+exports.EditorLinkingPlatformAnalytics = EditorLinkingPlatformAnalytics;
+(0, _defineProperty2.default)(EditorLinkingPlatformAnalytics, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "0.3.3",
+	"version": "0.3.5",
 	"sideEffects": false
 }

package/dist/es2019/analytics/create-events-queue.js

@@ -0,0 +1,43 @@
+/**
+ * Simple mechanism to defer event related callbacks
+ *
+ * Probably think twice whether your event should use this instead of
+ * editor's built-in `editor-plugin-analytics`
+ *
+ * Editor-Plugin-Analytics provides methods methods to dispatch events, and attach events into prosemiror transactions
+ * However we do not have access to the smart card context in prosemirror
+ *
+ * We are using this queue to relay events occurring in prosemirror (which does not have access to the react context)
+ * to be subscribed to elsewhere where the react context is available (contentComponent or otherwise) (smart card context)
+ * in order to be able to annotate events with additional attributes to events
+ */
+export const createEventsQueue = () => {
+  const queue = [];
+  const subscribers = new Set();
+  const subscribe = subscriber => {
+    subscribers.add(subscriber);
+    return () => {
+      subscribers.delete(subscriber);
+    };
+  };
+  const push = (...events) => {
+    queue.push(...events);
+  };
+  const flush = () => {
+    while (queue.length) {
+      const event = queue.shift();
+      if (event) {
+        subscribers.forEach(subscriber => {
+          subscriber(event);
+        });
+      }
+    }
+  };
+  const getSize = () => queue.length;
+  return {
+    push,
+    flush,
+    subscribe,
+    getSize
+  };
+};