@atlaskit/editor-plugin-card 0.3.4 → 0.3.6

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

@@ -0,0 +1,127 @@
+import { useEffect, useMemo } from 'react';
+import { useSmartLinkLifecycleAnalytics } from '@atlaskit/link-analytics';
+import { EVENT, EVENT_SUBJECT } from '../../analytics/types';
+import { appearanceForLink, getUrl } from '../../analytics/utils';
+import { getDeleteType, getMethod, getSourceEventFromMetadata, getUpdateType } from './common';
+
+/**
+ * Set display category as `link` if not displaying the link as a smart card
+ */
+const displayCategoryFromDisplay = display => {
+  if (display === 'url') {
+    return 'link';
+  }
+};
+/**
+ * Subscribes to the events occuring in the card
+ * plugin and fires analytics events accordingly
+ */
+export const LinkEventsBinding = ({
+  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.
+   */
+  const {
+    linkCreated,
+    linkUpdated,
+    linkDeleted
+  } = useSmartLinkLifecycleAnalytics();
+  const linkEvents = useMemo(() => {
+    return {
+      [EVENT.CREATED]: ({
+        node,
+        nodeContext,
+        ...metadata
+      }) => {
+        const url = getUrl(node);
+        if (!url) {
+          return;
+        }
+        const display = appearanceForLink(node);
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const creationMethod = getMethod(metadata);
+        linkCreated({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          nodeContext,
+          creationMethod
+        });
+      },
+      [EVENT.UPDATED]: ({
+        node,
+        nodeContext,
+        previousDisplay,
+        ...metadata
+      }) => {
+        const url = getUrl(node);
+        if (!url) {
+          return;
+        }
+        const display = appearanceForLink(node);
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const updateMethod = getMethod(metadata);
+        const updateType = getUpdateType(metadata);
+        linkUpdated({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          previousDisplay,
+          nodeContext,
+          updateMethod,
+          updateType
+        });
+      },
+      [EVENT.DELETED]: ({
+        node,
+        nodeContext,
+        ...metadata
+      }) => {
+        const url = getUrl(node);
+        if (!url) {
+          return;
+        }
+        const display = appearanceForLink(node);
+        const displayCategory = displayCategoryFromDisplay(display);
+        const sourceEvent = getSourceEventFromMetadata(metadata);
+        const deleteMethod = getMethod(metadata);
+        const deleteType = getDeleteType(metadata);
+        linkDeleted({
+          url,
+          displayCategory
+        }, sourceEvent, {
+          display,
+          nodeContext,
+          deleteMethod,
+          deleteType
+        });
+      }
+    };
+  }, [linkCreated, linkUpdated, linkDeleted]);
+
+  /**
+   * Subscribe to link events
+   */
+  useEffect(() => {
+    const unsubscribe = cardPluginEvents.subscribe(({
+      event,
+      subject,
+      data
+    }) => {
+      if (subject === EVENT_SUBJECT.LINK) {
+        linkEvents[event](data);
+      }
+    });
+    return () => unsubscribe();
+  }, [linkEvents, cardPluginEvents]);
+  return null;
+};

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

@@ -0,0 +1,60 @@
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ACTION, INPUT_METHOD } from '@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
+ */
+const withHistoryMethod = fn => {
+  return metadata => {
+    const {
+      isUndo,
+      isRedo
+    } = metadata;
+    if (isUndo) {
+      return 'undo';
+    }
+    if (isRedo) {
+      return 'redo';
+    }
+    return fn(metadata);
+  };
+};
+export const getMethod = withHistoryMethod(({
+  inputMethod
+}) => {
+  switch (inputMethod) {
+    case INPUT_METHOD.CLIPBOARD:
+      return 'editor_paste';
+    case INPUT_METHOD.FLOATING_TB:
+      return 'editor_floatingToolbar';
+    case INPUT_METHOD.AUTO_DETECT:
+    case INPUT_METHOD.FORMATTING:
+      return 'editor_type';
+    default:
+      return 'unknown';
+  }
+});
+export const getUpdateType = withHistoryMethod(({
+  action
+}) => {
+  switch (action) {
+    case ACTION.CHANGED_TYPE:
+      return 'display_update';
+    case ACTION.UPDATED:
+      return 'link_update';
+    default:
+      return 'unknown';
+  }
+});
+export const getDeleteType = withHistoryMethod(({
+  action
+}) => {
+  if (action === ACTION.UNLINK) {
+    return 'unlink';
+  }
+  return 'delete';
+});
+export const getSourceEventFromMetadata = metadata => {
+  return metadata.sourceEvent instanceof UIAnalyticsEvent ? metadata.sourceEvent : null;
+};

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

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { EditorAnalyticsContext } from '../EditorAnalyticsContext';
+import { DatasourceEventsBinding } from './DatasourceEvents';
+import { LinkEventsBinding } from './LinkEvents';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class EditorLinkingPlatformAnalytics extends React.PureComponent {
+  render() {
+    const 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.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, /*#__PURE__*/React.createElement(EditorAnalyticsContext, {
+      editorView: this.props.editorView
+    }, /*#__PURE__*/React.createElement(LinkEventsBinding, this.props), /*#__PURE__*/React.createElement(DatasourceEventsBinding, this.props)));
+  }
+}
+_defineProperty(EditorLinkingPlatformAnalytics, "contextTypes", {
+  contextAdapter: PropTypes.object
+});

package/dist/es2019/version.json

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

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

@@ -0,0 +1,48 @@
+/**
+ * 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 var createEventsQueue = function createEventsQueue() {
+  var queue = [];
+  var subscribers = new Set();
+  var subscribe = function subscribe(subscriber) {
+    subscribers.add(subscriber);
+    return function () {
+      subscribers.delete(subscriber);
+    };
+  };
+  var push = function push() {
+    queue.push.apply(queue, arguments);
+  };
+  var flush = function flush() {
+    var _loop = function _loop() {
+      var event = queue.shift();
+      if (event) {
+        subscribers.forEach(function (subscriber) {
+          subscriber(event);
+        });
+      }
+    };
+    while (queue.length) {
+      _loop();
+    }
+  };
+  var getSize = function getSize() {
+    return queue.length;
+  };
+  return {
+    push: push,
+    flush: flush,
+    subscribe: subscribe,
+    getSize: getSize
+  };
+};

package/dist/esm/{pm-plugins/analytics → analytics}/events-from-tr.js

@@ -1,35 +1,28 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { LinkMetaStep, TableSortStep } from '@atlaskit/adf-schema/steps';
 import { ACTION } from '@atlaskit/editor-common/analytics';
 import { getLinkMetadataFromTransaction } from '@atlaskit/editor-common/card';
 import { isLinkMark, pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { AddMarkStep, RemoveMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { pluginKey } from '../plugin-key';
-import { getPluginState } from '../util/state';
-import { appearanceForLink, areSameLinks, findLinksAtPositions, getLinkNodeContext, getLinkUrl, isLink, linkObjectFromNode } from './utils';
-var findLinksInNodeRange = function findLinksInNodeRange(doc, schema, from, to) {
-  var links = [];
-  doc.nodesBetween(from, to, function (node, pos) {
-    if (isLink(schema, node)) {
-      var entireLinkInRange = pos >= from && pos + node.nodeSize <= to;
-      if (entireLinkInRange) {
-        var link = linkObjectFromNode(doc, schema, node, pos);
-        if (link) {
-          links.push(link);
-        }
-      }
-    }
-  });
-  return links;
-};
-export var findChangedLinks = function findChangedLinks(tr, state) {
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { getPluginState } from '../pm-plugins/util/state';
+import { EVENT } from './types';
+import { appearanceForLink, areSameNodes, findAtPositions, findInNodeRange, getNodeContext, getNodeSubject } from './utils';
+
+/**
+ * Find the links, smartLinks, datasources that were changed in a transaction
+ */
+export var findChanged = function findChanged(tr, state) {
   var schema = tr.doc.type.schema;
   var removed = [];
   var inserted = [];
+  /**
+   * Ideally we have the "before" and "after" states of the "entity"
+   * being updated, but if the update is via a "queue for upgrade"
+   * then we no longer have access to the "before" state, because the "before"
+   * state was replaced with a blue link to be upgraded
+   */
   var updated = [];
   var queuedForUpgrade = isTransactionQueuedForUpgrade(tr);
   var isResolveReplace = isTransactionResolveReplace(tr);
@@ -56,26 +49,30 @@ export var findChangedLinks = function findChangedLinks(tr, state) {
     if (step instanceof AddMarkStep) {
       var addMarkStep = step;
       if (isLinkMark(addMarkStep.mark, schema)) {
-        /**
-         * For url text pasted on plain text
-         */
-        insertedInStep.push({
-          type: 'mark',
-          pos: addMarkStep.from,
-          mark: addMarkStep.mark,
-          nodeContext: getLinkNodeContext(after, addMarkStep.from)
-        });
+        var node = after.nodeAt(addMarkStep.from);
+        if (node) {
+          /**
+           * For url text pasted on plain text
+           */
+          insertedInStep.push({
+            pos: addMarkStep.from,
+            node: node,
+            nodeContext: getNodeContext(after, addMarkStep.from)
+          });
+        }
       }
     }
     if (step instanceof RemoveMarkStep) {
       var removeMarkStep = step;
       if (isLinkMark(removeMarkStep.mark, schema)) {
-        removedInStep.push({
-          type: 'mark',
-          pos: removeMarkStep.from,
-          mark: removeMarkStep.mark,
-          nodeContext: getLinkNodeContext(before, removeMarkStep.from)
-        });
+        var _node = before.nodeAt(removeMarkStep.from);
+        if (_node) {
+          removedInStep.push({
+            pos: removeMarkStep.from,
+            node: _node,
+            nodeContext: getNodeContext(before, removeMarkStep.from)
+          });
+        }
       }
     }
     stepMap.forEach(function (oldStart, oldEnd, newStart, newEnd) {
@@ -86,13 +83,17 @@ export var findChangedLinks = function findChangedLinks(tr, state) {
       var insertedInRange = [];
 
       // Removed
-      removedInRange.push.apply(removedInRange, _toConsumableArray(findLinksInNodeRange(before, schema, oldStart, oldEnd)));
+      removedInRange.push.apply(removedInRange, _toConsumableArray(findInNodeRange(before, oldStart, oldEnd, function (node) {
+        return !!getNodeSubject(node);
+      })));
       // Inserted
-      insertedInRange.push.apply(insertedInRange, _toConsumableArray(findLinksInNodeRange(after, schema, newStart, newEnd)));
+      insertedInRange.push.apply(insertedInRange, _toConsumableArray(findInNodeRange(after, newStart, newEnd, function (node) {
+        return !!getNodeSubject(node);
+      })));
       removedInStep.push.apply(removedInStep, removedInRange);
       insertedInStep.push.apply(insertedInStep, insertedInRange);
     });
-    var omitQueuedLinks = function omitQueuedLinks(links) {
+    var omitRequestsForUpgrade = function omitRequestsForUpgrade(links) {
       if (!queuedForUpgrade) {
         return links;
       }
@@ -114,7 +115,7 @@ export var findChangedLinks = function findChangedLinks(tr, state) {
     if (!isResolveReplace) {
       removed.push.apply(removed, removedInStep);
     }
-    inserted.push.apply(inserted, _toConsumableArray(omitQueuedLinks(insertedInStep)));
+    inserted.push.apply(inserted, _toConsumableArray(omitRequestsForUpgrade(insertedInStep)));
   };
   for (var i = 0; i < tr.steps.length; i++) {
     _loop(i);
@@ -127,7 +128,7 @@ export var findChangedLinks = function findChangedLinks(tr, state) {
    */
   if (inserted.length === 0 && isResolveReplace) {
     var positions = getResolvePositions(tr, state);
-    inserted.push.apply(inserted, _toConsumableArray(findLinksAtPositions(tr, positions)));
+    inserted.push.apply(inserted, _toConsumableArray(findAtPositions(tr, positions)));
   }
   if (!isUpdate) {
     var _getLinkMetadataFromT = getLinkMetadataFromTransaction(tr),
@@ -136,7 +137,7 @@ export var findChangedLinks = function findChangedLinks(tr, state) {
      * If there is no identifiable input method, and the links inserted and removed appear to be the same,
      * then this transaction likely is not intended to be consided to be the insertion and removal of links
      */
-    if (!inputMethod && areSameLinks(removed, inserted)) {
+    if (!inputMethod && areSameNodes(removed, inserted)) {
       return {
         removed: [],
         inserted: [],
@@ -291,17 +292,10 @@ export function eventsFromTransaction(tr, state) {
       action = _getLinkMetadataFromT2.action,
       inputMethod = _getLinkMetadataFromT2.inputMethod,
       sourceEvent = _getLinkMetadataFromT2.sourceEvent;
-    var contextualData = {
-      action: action,
-      inputMethod: inputMethod,
-      sourceEvent: sourceEvent,
-      isUndo: isUndo,
-      isRedo: isRedo
-    };
-    var _findChangedLinks = findChangedLinks(tr, state),
-      removed = _findChangedLinks.removed,
-      inserted = _findChangedLinks.inserted,
-      updated = _findChangedLinks.updated;
+    var _findChanged = findChanged(tr, state),
+      removed = _findChanged.removed,
+      inserted = _findChanged.inserted,
+      updated = _findChanged.updated;
     var MAX_LINK_EVENTS = 50;
     if ([removed, inserted, updated].some(function (arr) {
       return arr.length > MAX_LINK_EVENTS;
@@ -311,41 +305,57 @@ export function eventsFromTransaction(tr, state) {
     for (var i = 0; i < updated.length; i++) {
       var _update$previous$disp;
       var update = updated[i];
-      var link = update.inserted;
-      var url = getLinkUrl(link);
-      var display = appearanceForLink(link);
-      var previousDisplay = 'removed' in update ? appearanceForLink(update.removed) : (_update$previous$disp = update.previous.display) !== null && _update$previous$disp !== void 0 ? _update$previous$disp : 'unknown';
-      if (url) {
+      var _inserted = update.inserted;
+      var node = _inserted.node,
+        nodeContext = _inserted.nodeContext;
+      var subject = getNodeSubject(node);
+
+      /**
+       * Not great, wish we had the previous node but we never stored it
+       */
+      var previousDisplay = 'removed' in update ? appearanceForLink(update.removed.node) : (_update$previous$disp = update.previous.display) !== null && _update$previous$disp !== void 0 ? _update$previous$disp : 'unknown';
+      if (subject) {
         events.push({
-          type: 'updated',
-          data: _objectSpread(_objectSpread({}, contextualData), {}, {
-            url: url,
-            display: display,
-            previousDisplay: previousDisplay,
-            nodeContext: link.nodeContext
-          })
+          event: EVENT.UPDATED,
+          subject: subject,
+          data: {
+            node: node,
+            nodeContext: nodeContext,
+            action: action,
+            inputMethod: inputMethod,
+            sourceEvent: sourceEvent,
+            isUndo: isUndo,
+            isRedo: isRedo,
+            previousDisplay: previousDisplay
+          }
         });
       }
     }
-    var pushEvents = function pushEvents(links, type) {
-      for (var _i2 = 0; _i2 < links.length; _i2++) {
-        var _link = links[_i2];
-        var _url = getLinkUrl(_link);
-        var _display = appearanceForLink(_link);
-        if (_url) {
+    var pushEvents = function pushEvents(entities, event) {
+      for (var _i2 = 0; _i2 < entities.length; _i2++) {
+        var _entities$_i = entities[_i2],
+          _node2 = _entities$_i.node,
+          _nodeContext = _entities$_i.nodeContext;
+        var _subject = getNodeSubject(_node2);
+        if (_subject) {
           events.push({
-            type: type,
-            data: _objectSpread(_objectSpread({}, contextualData), {}, {
-              url: _url,
-              display: _display,
-              nodeContext: _link.nodeContext
-            })
+            event: event,
+            subject: _subject,
+            data: {
+              node: _node2,
+              nodeContext: _nodeContext,
+              action: action,
+              inputMethod: inputMethod,
+              sourceEvent: sourceEvent,
+              isUndo: isUndo,
+              isRedo: isRedo
+            }
           });
         }
       }
     };
-    pushEvents(removed, 'deleted');
-    pushEvents(inserted, 'created');
+    pushEvents(removed, EVENT.DELETED);
+    pushEvents(inserted, EVENT.CREATED);
     return events;
   } catch (err) {
     return events;

package/dist/esm/analytics/index.js

@@ -0,0 +1,2 @@
+export { createEventsQueue } from './create-events-queue';
+export { eventsFromTransaction } from './events-from-tr';

package/dist/esm/analytics/types.js

@@ -0,0 +1,17 @@
+export var EVENT = /*#__PURE__*/function (EVENT) {
+  EVENT["CREATED"] = "created";
+  EVENT["UPDATED"] = "updated";
+  EVENT["DELETED"] = "deleted";
+  return EVENT;
+}({});
+export var EVENT_SUBJECT = /*#__PURE__*/function (EVENT_SUBJECT) {
+  EVENT_SUBJECT["LINK"] = "link";
+  EVENT_SUBJECT["DATASOURCE"] = "datasource";
+  return EVENT_SUBJECT;
+}({});
+
+/**
+ * These are not GASv3 events
+ * But they share a similar in shape so that GASv3
+ * events can be derived from them / think of them in the same way
+ */

package/dist/esm/analytics/utils.js

@@ -0,0 +1,118 @@
+import { appearanceForNodeType } from '../utils';
+import { EVENT_SUBJECT } from './types';
+export function isDatasourceNode(node) {
+  return 'datasource' in node.attrs && !!node.attrs.datasource;
+}
+
+/**
+ * Determine if a node is considered to be a link
+ */
+export var isLinkNode = function isLinkNode(node) {
+  if (isDatasourceNode(node)) {
+    return false;
+  }
+  if (!!appearanceForNodeType(node.type)) {
+    return true;
+  }
+  return hasLinkMark(node);
+};
+export function getNodeSubject(node) {
+  if (isDatasourceNode(node)) {
+    return EVENT_SUBJECT.DATASOURCE;
+  }
+  if (isLinkNode(node)) {
+    return EVENT_SUBJECT.LINK;
+  }
+  return null;
+}
+
+/**
+ * Analytics appearance for link object
+ */
+export function appearanceForLink(node) {
+  var appearance = appearanceForNodeType(node.type);
+  if (appearance) {
+    return appearance;
+  }
+  return 'url';
+}
+var getLinkMark = function getLinkMark(node) {
+  if (node.marks) {
+    for (var i = 0; i < node.marks.length; i++) {
+      var mark = node.marks[i];
+      if (mark.type.name === 'link') {
+        return mark;
+      }
+    }
+  }
+};
+var hasLinkMark = function hasLinkMark(node) {
+  return !!getLinkMark(node);
+};
+export function getUrl(node) {
+  var _node$attrs$url, _node$attrs, _getLinkMark, _getLinkMark$attrs;
+  return (_node$attrs$url = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) !== null && _node$attrs$url !== void 0 ? _node$attrs$url : (_getLinkMark = getLinkMark(node)) === null || _getLinkMark === void 0 ? void 0 : (_getLinkMark$attrs = _getLinkMark.attrs) === null || _getLinkMark$attrs === void 0 ? void 0 : _getLinkMark$attrs.href;
+}
+export var getNodeContext = function getNodeContext(doc, pos) {
+  var $pos = doc.resolve(pos);
+  var maxDepth = 3;
+  for (var i = 0; i <= maxDepth; i++) {
+    var _node = $pos.node($pos.depth - i);
+    if (_node && _node.type.name !== 'paragraph') {
+      return _node.type.name;
+    }
+  }
+  return 'unknown';
+};
+export var findAtPositions = function findAtPositions(tr, positions) {
+  var entities = [];
+  for (var i = 0; i < positions.length; i++) {
+    var pos = positions[i];
+    var _node2 = tr.doc.nodeAt(pos);
+    if (!_node2) {
+      continue;
+    }
+    var nodeContext = getNodeContext(tr.doc, pos);
+    entities.push({
+      pos: pos,
+      node: _node2,
+      nodeContext: nodeContext
+    });
+  }
+  return entities;
+};
+export var findInNodeRange = function findInNodeRange(doc, from, to, predicate) {
+  var entities = [];
+  doc.nodesBetween(from, to, function (node, pos) {
+    if (predicate(node)) {
+      var entirelyInRange = pos >= from && pos + node.nodeSize <= to;
+      if (entirelyInRange) {
+        var nodeContext = getNodeContext(doc, pos);
+        entities.push({
+          pos: pos,
+          node: node,
+          nodeContext: nodeContext
+        });
+      }
+    }
+  });
+  return entities;
+};
+
+/**
+ * Returns whether or not two sets of links appear to likely be the same set of links
+ * That they are in the same order and that both their hrefs and appearances match
+ */
+export var areSameNodes = function areSameNodes(setA, setB) {
+  if (setA.length !== setB.length) {
+    return false;
+  }
+  for (var i = 0; i < setA.length; i++) {
+    var a = setA[i];
+    var b = setB[i];
+    if (getUrl(a.node) !== getUrl(b.node) || appearanceForLink(a.node) !== appearanceForLink(b.node)) {
+      return false;
+    }
+  }
+  return true;
+};