@atlaskit/editor-plugin-card 0.1.0

package/dist/es2019/plugin.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import { blockCard, embedCard, inlineCard } from '@atlaskit/adf-schema';
+import { IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
+import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '@atlaskit/link-datasource';
+import { messages } from './messages';
+import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
+import { changeSelectedCardToLink, queueCardsFromChangedTr, setSelectedCardAppearance } from './pm-plugins/doc';
+import { cardKeymap } from './pm-plugins/keymap';
+import { createPlugin } from './pm-plugins/main';
+import { mountHyperlinkPlugin } from './pm-plugins/mountHyperlink';
+import { pluginKey } from './pm-plugins/plugin-key';
+import { floatingToolbar } from './toolbar';
+import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
+import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
+import { EditorSmartCardEventsNext } from './ui/EditorSmartCardEventsNext';
+import LayoutButton from './ui/LayoutButton';
+export const cardPlugin = (options, api) => {
+  var _api$dependencies, _api$dependencies$fea;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$fea = _api$dependencies.featureFlags) === null || _api$dependencies$fea === void 0 ? void 0 : _api$dependencies$fea.sharedState.currentState()) || {};
+  return {
+    name: 'card',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return pluginKey.getState(editorState) || null;
+    },
+    nodes() {
+      const nodes = [{
+        name: 'inlineCard',
+        node: inlineCard
+      }, {
+        name: 'blockCard',
+        node: blockCard
+      }];
+      if (options.allowEmbeds) {
+        nodes.push({
+          name: 'embedCard',
+          node: embedCard
+        });
+      }
+      return nodes;
+    },
+    pmPlugins() {
+      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme;
+      const allowBlockCards = (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
+      const allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
+      const useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
+      const allowWrapping = (_options$allowWrappin = options.allowWrapping) !== null && _options$allowWrappin !== void 0 ? _options$allowWrappin : true;
+      const allowAlignment = (_options$allowAlignme = options.allowAlignment) !== null && _options$allowAlignme !== void 0 ? _options$allowAlignme : true;
+      const plugins = [{
+        name: 'card',
+        plugin: createPlugin({
+          ...options,
+          allowBlockCards,
+          allowResizing,
+          useAlternativePreloader,
+          allowWrapping,
+          allowAlignment
+        }, api)
+      }, {
+        name: 'cardHyperlink',
+        plugin: () => mountHyperlinkPlugin(api, options)
+      }];
+      plugins.push({
+        name: 'cardKeymap',
+        plugin: ({
+          featureFlags
+        }) => {
+          return cardKeymap(featureFlags);
+        }
+      });
+      return plugins;
+    },
+    contentComponent({
+      editorView,
+      popupsMountPoint,
+      popupsScrollableElement,
+      popupsBoundariesElement
+    }) {
+      const {
+        lpAnalyticsEventsNext
+      } = featureFlags;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
+        editorView: editorView
+      }), lpAnalyticsEventsNext && /*#__PURE__*/React.createElement(EditorSmartCardEventsNext, {
+        editorView: editorView
+      }), /*#__PURE__*/React.createElement(LayoutButton, {
+        api: api,
+        editorView: editorView,
+        mountPoint: popupsMountPoint,
+        scrollableElement: popupsScrollableElement,
+        boundariesElement: popupsBoundariesElement
+      }), /*#__PURE__*/React.createElement(DatasourceModalWithState, {
+        api: api,
+        editorView: editorView
+      }));
+    },
+    actions: {
+      hideLinkToolbar,
+      queueCardsFromChangedTr,
+      changeSelectedCardToLink,
+      setSelectedCardAppearance
+    },
+    pluginsOptions: {
+      floatingToolbar: floatingToolbar(options, featureFlags, options.platform, options.linkPicker, api),
+      quickInsert: ({
+        formatMessage
+      }) => {
+        if (canRenderDatasource(JIRA_LIST_OF_LINKS_DATASOURCE_ID)) {
+          return [{
+            id: 'datasource',
+            title: formatMessage(messages.datasourceJiraIssue),
+            description: formatMessage(messages.datasourceJiraIssueDescription),
+            keywords: ['jira'],
+            icon: () => /*#__PURE__*/React.createElement(IconDatasourceJiraIssue, null),
+            action(insert) {
+              const tr = insert(undefined);
+              showDatasourceModal('jira')(tr);
+              return tr;
+            }
+          }];
+        }
+        return [];
+      }
+    }
+  };
+};

package/dist/es2019/pm-plugins/actions.js

@@ -0,0 +1,57 @@
+import { pluginKey } from './plugin-key';
+export const cardAction = (tr, action) => {
+  return tr.setMeta(pluginKey, action);
+};
+export const resolveCard = url => tr => cardAction(tr, {
+  type: 'RESOLVE',
+  url
+});
+export const queueCards = requests => tr => cardAction(tr, {
+  type: 'QUEUE',
+  requests: requests
+});
+export const registerCard = info => tr => cardAction(tr, {
+  type: 'REGISTER',
+  info
+});
+export const registerSmartCardEvents = smartLinkEvents => tr => cardAction(tr, {
+  type: 'REGISTER_EVENTS',
+  smartLinkEvents
+});
+export const registerSmartCardEventsNext = smartLinkEvents => tr => cardAction(tr, {
+  type: 'REGISTER_EVENTS_NEXT',
+  smartLinkEvents
+});
+export const setProvider = cardProvider => tr => cardAction(tr, {
+  type: 'SET_PROVIDER',
+  provider: cardProvider
+});
+export const setDatasourceTableRef = datasourceTableRef => tr => cardAction(tr, {
+  type: 'SET_DATASOURCE_TABLE_REF',
+  datasourceTableRef
+});
+export const setCardLayout = layout => tr => cardAction(tr, {
+  type: 'SET_CARD_LAYOUT',
+  layout
+});
+export const setCardLayoutAndDatasourceTableRef = ({
+  layout,
+  datasourceTableRef
+}) => tr => cardAction(tr, {
+  type: 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF',
+  layout,
+  datasourceTableRef
+});
+export const showLinkToolbar = tr => cardAction(tr, {
+  type: 'SHOW_LINK_TOOLBAR'
+});
+export const hideLinkToolbar = tr => cardAction(tr, {
+  type: 'HIDE_LINK_TOOLBAR'
+});
+export const showDatasourceModal = modalType => tr => cardAction(tr, {
+  type: 'SHOW_DATASOURCE_MODAL',
+  modalType
+});
+export const hideDatasourceModal = tr => cardAction(tr, {
+  type: 'HIDE_DATASOURCE_MODAL'
+});

package/dist/es2019/pm-plugins/analytics/create-analytics-queue.js

@@ -0,0 +1,38 @@
+/**
+ * Simple mechanism to defer analytics related callbacks
+ */
+export const createAnalyticsQueue = (enabled = true) => {
+  const queue = [];
+  const callbacksRef = {
+    current: null
+  };
+  const setCallbacks = callbacks => {
+    callbacksRef.current = callbacks;
+  };
+  const push = (...events) => {
+    const callbacks = callbacksRef.current;
+    if (!enabled || !callbacks) {
+      return;
+    }
+    queue.push(...events);
+  };
+  const flush = () => {
+    const callbacks = callbacksRef.current;
+    if (!enabled || !callbacks) {
+      return;
+    }
+    while (queue.length) {
+      const event = queue.pop();
+      if (event) {
+        callbacks[event.type](event.data);
+      }
+    }
+  };
+  const getSize = () => queue.length;
+  return {
+    push,
+    flush,
+    setCallbacks,
+    getSize
+  };
+};

package/dist/es2019/pm-plugins/analytics/events-from-tr.js

@@ -0,0 +1,339 @@
+import { AddMarkStep, RemoveMarkStep } from 'prosemirror-transform';
+import { LinkMetaStep } 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 { pluginKey } from '../plugin-key';
+import { getPluginState } from '../util/state';
+import { appearanceForLink, areSameLinks, findLinksAtPositions, getLinkNodeContext, getLinkUrl, isLink, linkObjectFromNode } from './utils';
+const findLinksInNodeRange = (doc, schema, from, to) => {
+  const links = [];
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (isLink(schema, node)) {
+      const entireLinkInRange = pos >= from && pos + node.nodeSize <= to;
+      if (entireLinkInRange) {
+        const link = linkObjectFromNode(doc, schema, node, pos);
+        if (link) {
+          links.push(link);
+        }
+      }
+    }
+  });
+  return links;
+};
+export const findChangedLinks = (tr, state) => {
+  const schema = tr.doc.type.schema;
+  const removed = [];
+  const inserted = [];
+  const updated = [];
+  const queuedForUpgrade = isTransactionQueuedForUpgrade(tr);
+  const isResolveReplace = isTransactionResolveReplace(tr);
+
+  // History
+  const historyMeta = tr.getMeta(pmHistoryPluginKey);
+  const isUndo = isHistoryMeta(historyMeta) && historyMeta.redo === false;
+  const isRedo = isHistoryMeta(historyMeta) && historyMeta.redo === true;
+  const isUpdate = isUpdateTr(tr, isUndo || isRedo);
+  for (let i = 0; i < tr.steps.length; i++) {
+    var _tr$docs$i, _tr$docs;
+    const step = tr.steps[i];
+    const stepMap = step.getMap();
+    const removedInStep = [];
+    const insertedInStep = [];
+    const before = (_tr$docs$i = tr.docs[i]) !== null && _tr$docs$i !== void 0 ? _tr$docs$i : tr.before;
+    const after = (_tr$docs = tr.docs[i + 1]) !== null && _tr$docs !== void 0 ? _tr$docs : tr.doc;
+
+    /**
+     * AddMarkStep and RemoveMarkSteps don't produce stepMap ranges
+     * because there are no "changed tokens" only marks added/removed
+     * So have to check these manually
+     */
+    if (step instanceof AddMarkStep) {
+      const 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)
+        });
+      }
+    }
+    if (step instanceof RemoveMarkStep) {
+      const removeMarkStep = step;
+      if (isLinkMark(removeMarkStep.mark, schema)) {
+        removedInStep.push({
+          type: 'mark',
+          pos: removeMarkStep.from,
+          mark: removeMarkStep.mark,
+          nodeContext: getLinkNodeContext(before, removeMarkStep.from)
+        });
+      }
+    }
+    stepMap.forEach((oldStart, oldEnd, newStart, newEnd) => {
+      var _tr$docs2;
+      const before = tr.docs[i];
+      const after = (_tr$docs2 = tr.docs[i + 1]) !== null && _tr$docs2 !== void 0 ? _tr$docs2 : tr.doc;
+      const removedInRange = [];
+      const insertedInRange = [];
+
+      // Removed
+      removedInRange.push(...findLinksInNodeRange(before, schema, oldStart, oldEnd));
+      // Inserted
+      insertedInRange.push(...findLinksInNodeRange(after, schema, newStart, newEnd));
+      removedInStep.push(...removedInRange);
+      insertedInStep.push(...insertedInRange);
+    });
+    const omitQueuedLinks = links => {
+      if (!queuedForUpgrade) {
+        return links;
+      }
+      /**
+       * Skip/filter out links that have been queued, they will be tracked later
+       */
+      const queuedPositions = getQueuedPositions(tr);
+      return links.filter(link => !queuedPositions.includes(link.pos));
+    };
+
+    /**
+     * Skip "deletions" when the transaction is relating to
+     * replacing links queued for upgrade to cards,
+     * because the "deleted" link has not actually been
+     * tracked as "created" yet
+     */
+    if (!isResolveReplace) {
+      removed.push(...removedInStep);
+    }
+    inserted.push(...omitQueuedLinks(insertedInStep));
+  }
+
+  /**
+   * If there are no links changed but the transaction is a "resolve" action
+   * Then this means we have resolved a link but it has failed to upgrade
+   * We should track all resolved links as now being created
+   */
+  if (inserted.length === 0 && isResolveReplace) {
+    const positions = getResolvePositions(tr, state);
+    inserted.push(...findLinksAtPositions(tr, positions));
+  }
+  if (!isUpdate) {
+    const {
+      inputMethod
+    } = getLinkMetadataFromTransaction(tr);
+    /**
+     * 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)) {
+      return {
+        removed: [],
+        inserted: [],
+        updated
+      };
+    }
+    return {
+      removed,
+      inserted,
+      updated
+    };
+  }
+  for (let i = 0; i < inserted.length; i++) {
+    if (isResolveReplace) {
+      const newLink = inserted[i];
+
+      // what is the 2nd argument 'assoc = -1' doing here exactly?
+      const mappedPos = tr.mapping.map(newLink.pos, -1);
+      const previousDisplay = getResolveLinkPrevDisplay(state, mappedPos);
+      updated.push({
+        inserted: inserted[i],
+        previous: {
+          display: previousDisplay
+        }
+      });
+      continue;
+    }
+    if (inserted.length === removed.length) {
+      updated.push({
+        removed: removed[i],
+        inserted: inserted[i]
+      });
+    }
+  }
+  return {
+    inserted: [],
+    removed: [],
+    updated
+  };
+};
+
+/**
+ * List of actions to be considered link "updates"
+ */
+const UPDATE_ACTIONS = [ACTION.CHANGED_TYPE, ACTION.UPDATED];
+
+/**
+ * Returns true if the transaction has LinkMetaSteps that indicate the transaction is
+ * intended to be perceived as an update to links, rather than insertion+deletion
+ */
+const isUpdateTr = (tr, isUndoOrRedo) => {
+  return !!tr.steps.find(step => {
+    if (!(step instanceof LinkMetaStep)) {
+      return false;
+    }
+    const {
+      action,
+      cardAction
+    } = step.getMetadata();
+
+    /**
+     * Undo of a resolve step should be considered an update
+     * because the user is choosing to update the url back to the un-upgraded display
+     */
+    if (cardAction === 'RESOLVE' && isUndoOrRedo) {
+      return true;
+    }
+    if (!action) {
+      return false;
+    }
+    return UPDATE_ACTIONS.includes(action);
+  });
+};
+const hasType = pluginMeta => {
+  return typeof pluginMeta === 'object' && pluginMeta !== null && 'type' in pluginMeta;
+};
+const isTransactionQueuedForUpgrade = tr => {
+  const pluginMeta = tr.getMeta(pluginKey);
+  return isMetadataQueue(pluginMeta);
+};
+const isMetadataQueue = metaData => {
+  return hasType(metaData) && metaData.type === 'QUEUE';
+};
+const isTransactionResolveReplace = tr => {
+  const pluginMeta = tr.getMeta(pluginKey);
+  return isMetadataResolve(pluginMeta);
+};
+const isMetadataResolve = metaData => {
+  return hasType(metaData) && metaData.type === 'RESOLVE';
+};
+const isHistoryMeta = meta => {
+  return typeof meta === 'object' && meta !== null && 'redo' in meta;
+};
+const getQueuedPositions = tr => {
+  const pluginMeta = tr.getMeta(pluginKey);
+  if (!isMetadataQueue(pluginMeta)) {
+    return [];
+  }
+  return pluginMeta.requests.map(({
+    pos
+  }) => pos);
+};
+const getResolvePositions = (tr, state) => {
+  const cardState = getPluginState(state);
+  if (!cardState) {
+    return [];
+  }
+  const pluginMeta = tr.getMeta(pluginKey);
+  if (!isMetadataResolve(pluginMeta)) {
+    return [];
+  }
+  return cardState.requests.filter(request => request.url === pluginMeta.url).map(request => request.pos);
+};
+const getResolveLinkPrevDisplay = (state, pos) => {
+  var _cardState$requests$f;
+  const cardState = getPluginState(state);
+  if (!cardState) {
+    return undefined;
+  }
+  return (_cardState$requests$f = cardState.requests.find(request => request.pos === pos)) === null || _cardState$requests$f === void 0 ? void 0 : _cardState$requests$f.previousAppearance;
+};
+export function eventsFromTransaction(tr, state) {
+  const events = [];
+  try {
+    /**
+     * Skip transactions sent by collab (identified by 'isRemote' key)
+     * Skip entire document replace steps
+     * We are only concerned with transactions performed on the document directly by the user
+     */
+    const isRemote = tr.getMeta('isRemote');
+    const isReplaceDocument = tr.getMeta('replaceDocument');
+    if (isRemote || isReplaceDocument) {
+      return events;
+    }
+    const historyMeta = tr.getMeta(pmHistoryPluginKey);
+    const isUndo = isHistoryMeta(historyMeta) && historyMeta.redo === false;
+    const isRedo = isHistoryMeta(historyMeta) && historyMeta.redo === true;
+
+    /**
+     * Retrieve metadata from the LinkMetaStep(s) in the transaction
+     */
+    const {
+      action,
+      inputMethod,
+      sourceEvent
+    } = getLinkMetadataFromTransaction(tr);
+    const contextualData = {
+      action,
+      inputMethod,
+      sourceEvent,
+      isUndo,
+      isRedo
+    };
+    const {
+      removed,
+      inserted,
+      updated
+    } = findChangedLinks(tr, state);
+    const MAX_LINK_EVENTS = 50;
+    if ([removed, inserted, updated].some(arr => arr.length > MAX_LINK_EVENTS)) {
+      return [];
+    }
+    for (let i = 0; i < updated.length; i++) {
+      var _update$previous$disp;
+      const update = updated[i];
+      const {
+        inserted: link
+      } = update;
+      const url = getLinkUrl(link);
+      const display = appearanceForLink(link);
+      const 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) {
+        events.push({
+          type: 'updated',
+          data: {
+            ...contextualData,
+            url,
+            display,
+            previousDisplay,
+            nodeContext: link.nodeContext
+          }
+        });
+      }
+    }
+    const pushEvents = (links, type) => {
+      for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const url = getLinkUrl(link);
+        const display = appearanceForLink(link);
+        if (url) {
+          events.push({
+            type,
+            data: {
+              ...contextualData,
+              url,
+              display,
+              nodeContext: link.nodeContext
+            }
+          });
+        }
+      }
+    };
+    pushEvents(removed, 'deleted');
+    pushEvents(inserted, 'created');
+    return events;
+  } catch (err) {
+    return events;
+  }
+}

package/dist/es2019/pm-plugins/analytics/index.js

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

package/dist/es2019/pm-plugins/analytics/types.js

@@ -0,0 +1 @@
+export {};