@atlaskit/editor-plugin-card 0.1.0

package/dist/esm/pm-plugins/doc.js

@@ -0,0 +1,460 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 isEqual from 'lodash/isEqual';
+import { closeHistory } from 'prosemirror-history';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
+import { addLinkMetadata } from '@atlaskit/editor-common/card';
+import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
+import { appearanceForNodeType, selectedCardAppearance } from '../utils';
+import { hideDatasourceModal, queueCards, resolveCard } from './actions';
+import { pluginKey } from './plugin-key';
+import { shouldReplaceLink } from './shouldReplaceLink';
+/**
+ * Attempt to replace the link into the respective card.
+ */
+function replaceLinksToCards(tr, cardAdf, schema, request) {
+  var inlineCard = schema.nodes.inlineCard;
+  var url = request.url;
+  if (!isSafeUrl(url)) {
+    return;
+  }
+
+  // replace all the outstanding links with their cards
+  var pos = tr.mapping.map(request.pos);
+  var $pos = tr.doc.resolve(pos);
+  var node = tr.doc.nodeAt(pos);
+  if (!node || !node.type.isText) {
+    return;
+  }
+  var replaceLink = request.shouldReplaceLink || shouldReplaceLink(node, request.compareLinkText, url);
+  if (!replaceLink) {
+    return;
+  }
+
+  // ED-5638: add an extra space after inline cards to avoid re-rendering them
+  var nodes = [cardAdf];
+  if (cardAdf.type === inlineCard) {
+    nodes.push(schema.text(' '));
+  }
+  tr.replaceWith(pos, pos + (node.text || url).length, nodes);
+  return $pos.node($pos.depth - 1).type.name;
+}
+export var replaceQueuedUrlWithCard = function replaceQueuedUrlWithCard(url, cardData, analyticsAction, editorAnalyticsApi, createAnalyticsEvent) {
+  return function (editorState, dispatch) {
+    var state = pluginKey.getState(editorState);
+    if (!state) {
+      return false;
+    }
+
+    // find the requests for this URL
+    var requests = state.requests.filter(function (req) {
+      return req.url === url;
+    });
+
+    // try to transform response to ADF
+    var schema = editorState.schema;
+    var cardAdf = processRawValue(schema, cardData);
+    var tr = editorState.tr;
+    if (cardAdf) {
+      // Should prevent any other node than cards? [inlineCard, blockCard].includes(cardAdf.type)
+      var nodeContexts = requests.map(function (request) {
+        return replaceLinksToCards(tr, cardAdf, schema, request);
+      }).filter(function (context) {
+        return !!context;
+      }); // context exist
+
+      // Send analytics information
+      if (nodeContexts.length) {
+        var nodeContext = nodeContexts.every(function (context) {
+          return context === nodeContexts[0];
+        }) ? nodeContexts[0] : 'mixed';
+
+        /** For block links v1, default to inline links */
+        var nodeType = 'inlineCard';
+        var _url$split = url.split('/'),
+          _url$split2 = _slicedToArray(_url$split, 3),
+          domainName = _url$split2[2];
+        if (state.smartLinkEvents) {
+          state.smartLinkEvents.insertSmartLink(domainName, 'inline', createAnalyticsEvent);
+        }
+
+        /**
+         * TODO:
+         * What if each request has a different source?
+         * Unlikely, but need to define behaviour.
+         * Ignore analytics event? take first? provide 'mixed' as well?
+         */
+        var inputMethod = requests[0].source;
+        var sourceEvent = requests[0].sourceEvent;
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          action: analyticsAction || ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            inputMethod: inputMethod,
+            nodeType: nodeType,
+            nodeContext: nodeContext,
+            fromCurrentDomain: isFromCurrentDomain(url)
+          },
+          nonPrivacySafeAttributes: {
+            domainName: domainName
+          }
+        })(tr);
+        addLinkMetadata(editorState.selection, tr, {
+          action: analyticsAction,
+          inputMethod: inputMethod,
+          cardAction: 'RESOLVE',
+          sourceEvent: sourceEvent
+        });
+      }
+    }
+    if (dispatch) {
+      dispatch(resolveCard(url)(closeHistory(tr)));
+    }
+    return true;
+  };
+};
+export var handleFallbackWithAnalytics = function handleFallbackWithAnalytics(request, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var cardState = pluginKey.getState(state);
+    if (!cardState) {
+      return false;
+    }
+    var tr = state.tr;
+    if (request.source !== INPUT_METHOD.FLOATING_TB) {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(getLinkCreationAnalyticsEvent(request.source, request.url))(tr);
+    }
+    addLinkMetadata(state.selection, tr, {
+      action: request.analyticsAction,
+      inputMethod: request.source
+    });
+    if (dispatch) {
+      dispatch(resolveCard(request.url)(tr));
+    }
+    return true;
+  };
+};
+export var queueCardsFromChangedTr = function queueCardsFromChangedTr(state, tr, source, analyticsAction) {
+  var normalizeLinkText = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var sourceEvent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
+  var schema = state.schema;
+  var link = schema.marks.link;
+  var requests = [];
+  nodesBetweenChanged(tr, function (node, pos) {
+    if (!node.isText) {
+      return true;
+    }
+    var linkMark = node.marks.find(function (mark) {
+      return mark.type === link;
+    });
+    if (linkMark) {
+      if (!shouldReplaceLink(node, normalizeLinkText)) {
+        return false;
+      }
+      requests.push({
+        url: linkMark.attrs.href,
+        pos: pos,
+        appearance: 'inline',
+        compareLinkText: normalizeLinkText,
+        source: source,
+        analyticsAction: analyticsAction,
+        sourceEvent: sourceEvent
+      });
+    }
+    return false;
+  });
+  if (analyticsAction) {
+    addLinkMetadata(state.selection, tr, {
+      action: analyticsAction
+    });
+  }
+  return queueCards(requests)(tr);
+};
+export var queueCardFromChangedTr = function queueCardFromChangedTr(state, tr, source, analyticsAction) {
+  var normalizeLinkText = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+  var sourceEvent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
+  var previousAppearance = arguments.length > 6 ? arguments[6] : undefined;
+  var schema = state.schema;
+  var link = schema.marks.link;
+  var requests = [];
+  nodesBetweenChanged(tr, function (node, pos) {
+    if (!node.isText) {
+      return true;
+    }
+    var linkMark = node.marks.find(function (mark) {
+      return mark.type === link;
+    });
+    if (linkMark) {
+      if (!shouldReplaceLink(node, normalizeLinkText)) {
+        return false;
+      }
+      requests.push({
+        url: linkMark.attrs.href,
+        pos: pos,
+        appearance: 'inline',
+        previousAppearance: previousAppearance,
+        compareLinkText: normalizeLinkText,
+        source: source,
+        analyticsAction: analyticsAction,
+        sourceEvent: sourceEvent
+      });
+    }
+    return false;
+  });
+  addLinkMetadata(state.selection, tr, {
+    action: analyticsAction
+  });
+  return queueCards(requests)(tr);
+};
+export var convertHyperlinkToSmartCard = function convertHyperlinkToSmartCard(state, source, appearance) {
+  var normalizeLinkText = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var schema = state.schema;
+  var link = schema.marks.link;
+  var requests = [];
+  state.tr.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
+    var linkMark = node.marks.find(function (mark) {
+      return mark.type === link;
+    });
+    if (linkMark) {
+      requests.push({
+        url: linkMark.attrs.href,
+        pos: pos,
+        appearance: appearance,
+        previousAppearance: 'url',
+        compareLinkText: normalizeLinkText,
+        source: source,
+        analyticsAction: ACTION.CHANGED_TYPE,
+        shouldReplaceLink: true
+      });
+    }
+  });
+  addLinkMetadata(state.selection, state.tr, {
+    action: ACTION.CHANGED_TYPE
+  });
+  return queueCards(requests)(state.tr);
+};
+export var changeSelectedCardToLink = function changeSelectedCardToLink(text, href, sendAnalytics, node, pos, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var tr;
+    if (node && pos) {
+      tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+    } else {
+      tr = cardToLinkWithTransaction(state, text, href);
+    }
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+    if (sendAnalytics) {
+      if (selectedNode) {
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+          action: ACTION.CHANGED_TYPE,
+          actionSubject: ACTION_SUBJECT.SMART_LINK,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            newType: SMART_LINK_TYPE.URL,
+            previousType: appearanceForNodeType(selectedNode.type)
+          }
+        })(tr);
+      }
+    }
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+};
+export var changeSelectedCardToLinkFallback = function changeSelectedCardToLinkFallback(text, href, sendAnalytics, node, pos, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var tr;
+    if (node && pos) {
+      tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
+    } else {
+      tr = cardToLinkWithTransaction(state, text, href);
+    }
+    if (sendAnalytics) {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.SMART_LINK,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Smart card falling back to link.'
+        }
+      })(tr);
+    }
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+};
+export var updateCard = function updateCard(href, sourceEvent) {
+  return function (state, dispatch) {
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+    if (!selectedNode) {
+      return false;
+    }
+    var cardAppearance = selectedCardAppearance(state);
+    var tr = cardToLinkWithTransaction(state, href, href);
+    queueCardFromChangedTr(state, tr, INPUT_METHOD.MANUAL, ACTION.UPDATED, undefined, sourceEvent, cardAppearance);
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+};
+function cardToLinkWithTransaction(state, text, href) {
+  var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+  if (!selectedNode) {
+    return state.tr;
+  }
+  var link = state.schema.marks.link;
+  var url = selectedNode.attrs.url || selectedNode.attrs.data.url;
+  var tr = state.tr.replaceSelectionWith(state.schema.text(text || url, [link.create({
+    href: href || url
+  })]), false);
+  return tr;
+}
+function cardNodeToLinkWithTransaction(state, text, href, node, pos) {
+  var link = state.schema.marks.link;
+  var url = node.attrs.url || node.attrs.data.url;
+  return state.tr.replaceWith(pos, pos + node.nodeSize, state.schema.text(text || url, [link.create({
+    href: href || url
+  })]));
+}
+export var changeSelectedCardToText = function changeSelectedCardToText(text, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+    if (!selectedNode) {
+      return false;
+    }
+    var tr = state.tr.replaceSelectionWith(state.schema.text(text), false);
+    if (dispatch) {
+      addLinkMetadata(state.selection, tr, {
+        action: ACTION.UNLINK
+      });
+      tr.scrollIntoView();
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(unlinkPayload(ACTION_SUBJECT_ID.CARD_INLINE))(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var setSelectedCardAppearance = function setSelectedCardAppearance(appearance, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var _previousNode$type;
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+    if (!selectedNode) {
+      // When there is no selected node, we insert a new one
+      // and replace the existing blue link
+      var _tr = convertHyperlinkToSmartCard(state, INPUT_METHOD.FLOATING_TB, appearance);
+      if (dispatch) {
+        addLinkMetadata(state.selection, _tr, {
+          action: ACTION.CHANGED_TYPE
+        });
+        dispatch(_tr.scrollIntoView());
+      }
+      return false;
+    }
+    if (appearanceForNodeType(selectedNode.type) === appearance) {
+      return false;
+    }
+    var isEmbed = appearance === 'embed';
+    var attrs = isEmbed ? _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
+      layout: 'center'
+    }) : selectedNode.attrs;
+    var _state$selection = state.selection,
+      from = _state$selection.from,
+      to = _state$selection.to;
+    var nodeType = getLinkNodeType(appearance, state.schema.nodes);
+    var tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
+
+    // When the selected card is the last element in the doc we add a new paragraph after it for consistent replacement
+    if (tr.doc.nodeSize - 2 === to) {
+      tr.insertText(' ', to);
+    }
+    tr.setSelection(TextSelection.create(tr.doc, to + 1));
+    var previousNodePos = from - 1 > 0 ? from - 1 : 0;
+    var previousNode = tr.doc.nodeAt(previousNodePos);
+    if ((previousNode === null || previousNode === void 0 ? void 0 : (_previousNode$type = previousNode.type) === null || _previousNode$type === void 0 ? void 0 : _previousNode$type.name) === 'paragraph') {
+      tr.delete(previousNodePos, from);
+    }
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.SMART_LINK,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: appearance,
+        previousType: appearanceForNodeType(selectedNode.type)
+      }
+    })(tr);
+    addLinkMetadata(state.selection, tr, {
+      action: ACTION.CHANGED_TYPE
+    });
+    if (dispatch) {
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+};
+var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
+  switch (appearance) {
+    case 'inline':
+      return linkNodes.inlineCard;
+    case 'block':
+      return linkNodes.blockCard;
+    case 'embed':
+      return linkNodes.embedCard;
+  }
+};
+
+// Apply an update to a datasource (aka blockCard) node
+export var updateExistingDatasource = function updateExistingDatasource(state, node, newAdf, view) {
+  var tr = state.tr,
+    from = state.selection.from,
+    schemaNodes = state.schema.nodes;
+
+  // datasource to datasource
+  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
+    var _ref3, _ref6, _newViews$properties, _oldViews$properties, _newAdf$attrs, _node$attrs;
+    var _ref = (_ref3 = newAdf.attrs.datasource.views) !== null && _ref3 !== void 0 ? _ref3 : [],
+      _ref2 = _slicedToArray(_ref, 1),
+      newViews = _ref2[0];
+    var _ref4 = (_ref6 = node.attrs.datasource.views) !== null && _ref6 !== void 0 ? _ref6 : [],
+      _ref5 = _slicedToArray(_ref4, 1),
+      oldViews = _ref5[0];
+    var newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(function (column) {
+      return column.key;
+    });
+    var oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(function (column) {
+      return column.key;
+    });
+    var isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
+    var isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
+    if (isColumnChange || isUrlChange) {
+      tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
+    }
+  } else if (newAdf.type === 'inlineCard') {
+    // datasource to inline
+    tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
+  }
+  hideDatasourceModal(tr);
+  view.dispatch(tr.scrollIntoView());
+};
+export var insertDatasource = function insertDatasource(state, adf, view) {
+  var tr = state.tr,
+    from = state.selection.from,
+    schemaNodes = state.schema.nodes;
+  var attrs = adf.attrs,
+    type = adf.type;
+  var schemaNode = type === 'inlineCard' ? schemaNodes.inlineCard : schemaNodes.blockCard;
+  var newNode = schemaNode.createChecked(attrs);
+  // in future, if we decide to do datasource insertion from the main toolbar, we should probably consider editor-plugin-content-insertion instead of tr.insert
+  // this will allow us to deal with insertions from multiple paths in a more consistent way
+  newNode && tr.insert(from, newNode);
+  hideDatasourceModal(tr);
+  view.dispatch(tr.scrollIntoView());
+};

package/dist/esm/pm-plugins/keymap.js

@@ -0,0 +1,58 @@
+import { keymap } from 'prosemirror-keymap';
+import { NodeSelection } from 'prosemirror-state';
+import { findChildren, flatten } from 'prosemirror-utils';
+import { bindKeymapWithCommand, moveDown, moveUp } from '@atlaskit/editor-common/keymaps';
+import { browser } from '@atlaskit/editor-common/utils';
+var lookupPixel = 10;
+var getClosestInlineCardPos = function getClosestInlineCardPos(state, editorView, direction) {
+  var _editorView$posAtCoor;
+  var selection = state.selection;
+  var parent = selection.$from.parent;
+  var inlineCardType = state.schema.nodes.inlineCard;
+  if (!flatten(parent, false).some(function (_ref) {
+    var node = _ref.node;
+    return node.type === inlineCardType;
+  })) {
+    return null;
+  }
+  var coord = editorView.coordsAtPos(selection.$anchor.pos);
+  var nearPos = (_editorView$posAtCoor = editorView.posAtCoords({
+    left: coord.left,
+    top: direction === 'up' ? coord.top - lookupPixel : coord.bottom + lookupPixel
+  })) === null || _editorView$posAtCoor === void 0 ? void 0 : _editorView$posAtCoor.pos;
+  if (nearPos) {
+    var newNode = state.doc.nodeAt(nearPos);
+    if (newNode) {
+      if (newNode.type !== inlineCardType || findChildren(parent, function (node) {
+        return node === newNode;
+      }, false).length === 0 || newNode === selection.node) {
+        return null;
+      }
+      return nearPos;
+    }
+  }
+  return null;
+};
+var selectAboveBelowInlineCard = function selectAboveBelowInlineCard(direction) {
+  return function (state, dispatch, editorView) {
+    if (!editorView || !dispatch) {
+      return false;
+    }
+    var pos = getClosestInlineCardPos(state, editorView, direction);
+    if (pos) {
+      dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(pos))));
+      return true;
+    }
+    return false;
+  };
+};
+export function cardKeymap(featureFlags) {
+  var list = {};
+
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1227468 introduced since Chrome 91
+  if (browser.chrome && browser.chrome_version > 90 && featureFlags.chromeCursorHandlerFixedVersion && browser.chrome_version < featureFlags.chromeCursorHandlerFixedVersion) {
+    bindKeymapWithCommand(moveUp.common, selectAboveBelowInlineCard('up'), list);
+    bindKeymapWithCommand(moveDown.common, selectAboveBelowInlineCard('down'), list);
+  }
+  return keymap(list);
+}