@atlaskit/editor-plugin-card 0.1.0

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

@@ -0,0 +1,208 @@
+import { NodeSelection } from 'prosemirror-state';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import rafSchedule from 'raf-schd';
+import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/styles';
+import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { BlockCard } from '../nodeviews/blockCard';
+import { Datasource } from '../nodeviews/datasource';
+import { EmbedCard } from '../nodeviews/embedCard';
+import { InlineCardNodeView } from '../nodeviews/inlineCard';
+import { setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
+import { createAnalyticsQueue, eventsFromTransaction } from './analytics';
+import { pluginKey } from './plugin-key';
+import reducer from './reducers';
+import { handleProvider, resolveWithProvider } from './util/resolve';
+import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
+export { pluginKey } from './plugin-key';
+export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryParams => {
+  const {
+    lpAnalyticsEventsNext
+  } = pmPluginFactoryParams.featureFlags;
+  const analyticsQueue = createAnalyticsQueue(!!lpAnalyticsEventsNext);
+  const {
+    editorAppearance,
+    platform,
+    allowResizing,
+    useAlternativePreloader,
+    fullWidthMode,
+    showServerActions
+  } = options;
+  const inlineCardViewProducer = getInlineNodeViewProducer({
+    pmPluginFactoryParams,
+    Component: InlineCardNodeView,
+    extraComponentProps: {
+      useAlternativePreloader,
+      showServerActions
+    }
+  });
+  return new SafePlugin({
+    state: {
+      init() {
+        return {
+          requests: [],
+          provider: null,
+          cards: [],
+          showLinkingToolbar: false,
+          smartLinkEvents: undefined,
+          smartLinkEventsNext: undefined,
+          editorAppearance,
+          showDatasourceModal: false,
+          datasourceModalType: undefined,
+          datasourceTableRef: undefined,
+          layout: undefined
+        };
+      },
+      apply(tr, pluginState, prevEditorState) {
+        // Update all the positions of outstanding requests and
+        // cards in the plugin state.
+        const pluginStateWithUpdatedPos = getPluginStateWithUpdatedPos(pluginState, tr);
+
+        // apply any actions
+        const meta = tr.getMeta(pluginKey);
+        const events = eventsFromTransaction(tr, prevEditorState);
+        analyticsQueue.push(...events);
+        if (meta) {
+          const nextState = reducer(pluginStateWithUpdatedPos, meta);
+          if (!pluginState.smartLinkEventsNext && nextState.smartLinkEventsNext) {
+            analyticsQueue.setCallbacks(nextState.smartLinkEventsNext);
+          }
+          return nextState;
+        }
+        return pluginStateWithUpdatedPos;
+      }
+    },
+    view(view) {
+      const subscriptionHandler = (name, provider) => handleProvider(name, provider, view);
+      const domAtPos = view.domAtPos.bind(view);
+      const rafCancellationCallbacks = [];
+      pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
+      return {
+        update(view, prevState) {
+          var _selection$node;
+          const currentState = getPluginState(view.state);
+          const oldState = getPluginState(prevState);
+          const {
+            state,
+            dispatch
+          } = view;
+          const {
+            selection,
+            tr,
+            schema
+          } = state;
+          const isBlockCardSelected = selection instanceof NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type) === schema.nodes.blockCard;
+          if (isBlockCardSelected) {
+            var _findDomRefAtPos, _node$attrs;
+            const datasourceTableRef = (_findDomRefAtPos = findDomRefAtPos(selection.from, domAtPos)) === null || _findDomRefAtPos === void 0 ? void 0 : _findDomRefAtPos.querySelector(`.${DATASOURCE_INNER_CONTAINER_CLASSNAME}`);
+            const {
+              node
+            } = selection;
+            const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
+            const shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
+            if (isDatasource && shouldUpdateTableRef) {
+              var _node$attrs2;
+              // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
+              const layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+
+              // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+              dispatch(setCardLayoutAndDatasourceTableRef({
+                datasourceTableRef,
+                layout
+              })(tr));
+            }
+          } else {
+            if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
+              dispatch(setDatasourceTableRef(undefined)(tr));
+            }
+          }
+          if (currentState && currentState.provider) {
+            // Find requests in this state that weren't in the old one.
+            const newRequests = getNewRequests(oldState, currentState);
+            // Ask the CardProvider to resolve all new requests.
+            const {
+              provider
+            } = currentState;
+            newRequests.forEach(request => {
+              /**
+               * Queue each asynchronous resolve request on separate frames.
+               * ---
+               * NB: The promise for each request is queued to take place on separate animation frames. This avoids
+               * the scenario debugged and discovered in EDM-668, wherein the queuing of too many promises in quick succession
+               * leads to the browser's macrotask queue being overwhelmed, locking interactivity of the browser tab.
+               * By using this approach, the browser is free to schedule the resolution of the promises below in between rendering/network/
+               * other tasks as per common implementations of the JavaScript event loop in browsers.
+               */
+              const invoke = rafSchedule(() => {
+                var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+                return resolveWithProvider(view, provider, request, options, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, (_pluginInjectionApi$d2 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.sharedState.currentState()) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.createAnalyticsEvent) !== null && _pluginInjectionApi$d2 !== void 0 ? _pluginInjectionApi$d2 : undefined);
+              });
+              rafCancellationCallbacks.push(invoke.cancel);
+              invoke();
+            });
+          }
+          analyticsQueue.flush();
+        },
+        destroy() {
+          // Cancel any outstanding raf callbacks.
+          rafCancellationCallbacks.forEach(cancellationCallback => cancellationCallback());
+          pmPluginFactoryParams.providerFactory.unsubscribe('cardProvider', subscriptionHandler);
+        }
+      };
+    },
+    props: {
+      nodeViews: {
+        inlineCard: inlineCardViewProducer,
+        blockCard: (node, view, getPos, decorations) => {
+          var _node$attrs3;
+          const {
+            portalProviderAPI,
+            eventDispatcher
+          } = pmPluginFactoryParams;
+          const reactComponentProps = {
+            platform,
+            showServerActions
+          };
+          const hasIntlContext = true;
+          const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
+          if (isDatasource) {
+            var _node$attrs4, _node$attrs4$datasour;
+            if (platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : (_node$attrs4$datasour = _node$attrs4.datasource) === null || _node$attrs4$datasour === void 0 ? void 0 : _node$attrs4$datasour.id)) {
+              return new Datasource({
+                node,
+                view,
+                getPos,
+                portalProviderAPI,
+                eventDispatcher,
+                hasIntlContext,
+                pluginInjectionApi
+              }).init();
+            } else {
+              return inlineCardViewProducer(node, view, getPos, decorations);
+            }
+          }
+          return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
+        },
+        embedCard: (node, view, getPos) => {
+          const {
+            portalProviderAPI,
+            eventDispatcher,
+            dispatchAnalyticsEvent
+          } = pmPluginFactoryParams;
+          const reactComponentProps = {
+            eventDispatcher,
+            allowResizing,
+            platform,
+            fullWidthMode,
+            dispatchAnalyticsEvent,
+            pluginInjectionApi
+          };
+          const hasIntlContext = true;
+          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
+        }
+      }
+    },
+    key: pluginKey
+  });
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
+export const mountHyperlinkPlugin = (pluginInjectionApi, options) => {
+  return new SafePlugin({
+    view(editorView) {
+      requestAnimationFrame(() => {
+        var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+        pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.hyperlink) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.actions) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.prependToolbarButtons({
+          items: (state, intl, providerFactory, link) => [{
+            type: 'custom',
+            fallback: [],
+            render: editorView => {
+              var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+              return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearance, {
+                key: "link-appearance",
+                url: link,
+                intl: intl,
+                editorView: editorView,
+                editorState: state,
+                cardOptions: options,
+                providerFactory: providerFactory,
+                platform: options === null || options === void 0 ? void 0 : options.platform,
+                editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions,
+                cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies.card) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions
+              });
+            }
+          }],
+          onEscapeCallback: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.card.actions.hideLinkToolbar,
+          onInsertLinkCallback: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.card.actions.queueCardsFromChangedTr,
+          view: editorView
+        });
+      });
+      return {};
+    }
+  });
+};

package/dist/es2019/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('cardPlugin');

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

@@ -0,0 +1,110 @@
+const queue = (state, action) => {
+  return {
+    ...state,
+    requests: state.requests.concat(action.requests)
+  };
+};
+const resolve = (state, action) => {
+  const requests = state.requests.reduce((requests, request) => {
+    if (request.url !== action.url) {
+      requests.push(request);
+    }
+    return requests;
+  }, []);
+  return {
+    ...state,
+    requests
+  };
+};
+const register = (state, action) => {
+  return {
+    ...state,
+    cards: state.cards.filter(card => card.pos !== action.info.pos).concat(action.info)
+  };
+};
+const setProvider = (state, action) => {
+  return {
+    ...state,
+    provider: action.provider
+  };
+};
+const setCardLayout = (state, action) => {
+  return {
+    ...state,
+    layout: action.layout
+  };
+};
+const setDatasourceTableRef = (state, action) => {
+  return {
+    ...state,
+    datasourceTableRef: action.datasourceTableRef
+  };
+};
+const setCardLayoutDatasourceTableRef = (state, action) => {
+  return {
+    ...state,
+    datasourceTableRef: action.datasourceTableRef,
+    layout: action.layout
+  };
+};
+const registerEvents = (state, action) => {
+  return {
+    ...state,
+    smartLinkEvents: action.smartLinkEvents
+  };
+};
+const registerEventsNext = (state, action) => {
+  return {
+    ...state,
+    smartLinkEventsNext: action.smartLinkEvents
+  };
+};
+const setLinkToolbar = (state, action) => {
+  return {
+    ...state,
+    showLinkingToolbar: action.type === 'SHOW_LINK_TOOLBAR'
+  };
+};
+const showDatasourceModal = (state, action) => {
+  return {
+    ...state,
+    showDatasourceModal: true,
+    datasourceModalType: action.type === 'SHOW_DATASOURCE_MODAL' ? action.modalType : undefined
+  };
+};
+const hideDatasourceModal = state => {
+  return {
+    ...state,
+    showDatasourceModal: false,
+    datasourceModalType: undefined
+  };
+};
+export default ((state, action) => {
+  switch (action.type) {
+    case 'QUEUE':
+      return queue(state, action);
+    case 'SET_PROVIDER':
+      return setProvider(state, action);
+    case 'RESOLVE':
+      return resolve(state, action);
+    case 'REGISTER':
+      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':
+      return setCardLayout(state, action);
+    case 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF':
+      return setCardLayoutDatasourceTableRef(state, action);
+    case 'SHOW_LINK_TOOLBAR':
+    case 'HIDE_LINK_TOOLBAR':
+      return setLinkToolbar(state, action);
+    case 'SHOW_DATASOURCE_MODAL':
+      return showDatasourceModal(state, action);
+    case 'HIDE_DATASOURCE_MODAL':
+      return hideDatasourceModal(state);
+  }
+});

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

@@ -0,0 +1,25 @@
+import { normalizeUrl } from '@atlaskit/adf-schema';
+import { md } from '@atlaskit/editor-common/paste';
+export function shouldReplaceLink(node, compareLinkText = true, compareToUrl) {
+  const linkMark = node.marks.find(mark => mark.type.name === 'link');
+  if (!linkMark) {
+    // not a link anymore
+    return false;
+  }
+
+  // ED-6041: compare normalised link text after linkfy from Markdown transformer
+  // instead, since it always decodes URL ('%20' -> ' ') on the link text
+
+  const normalisedHref = normalizeUrl(md.normalizeLinkText(linkMark.attrs.href));
+  const normalizedLinkText = normalizeUrl(md.normalizeLinkText(node.text || ''));
+  if (compareLinkText && normalisedHref !== normalizedLinkText) {
+    return false;
+  }
+  if (compareToUrl) {
+    const normalizedUrl = normalizeUrl(md.normalizeLinkText(compareToUrl));
+    if (normalizedUrl !== normalisedHref) {
+      return false;
+    }
+  }
+  return true;
+}

package/dist/es2019/pm-plugins/util/resolve.js

@@ -0,0 +1,50 @@
+import { setProvider } from '../actions';
+import { handleFallbackWithAnalytics, replaceQueuedUrlWithCard } from '../doc';
+
+// ============================================================================ //
+// ============================== PROVIDER UTILS ============================== //
+// ============================================================================ //
+// Used for all interactions with the EditorCardProvider.
+// ============================================================================ //
+export const resolveWithProvider = (view, provider, request, options, editorAnalyticsApi, createAnalyticsEvent) => {
+  // When user manually changes appearance from blue link to smart link, we should respect that,
+  let shouldForceAppearance =
+  // This flag is set to true only in one place atm:
+  // packages/editor/editor-core/src/plugins/card/pm-plugins/doc.ts @ convertHyperlinkToSmartCard
+  // Which is used when user switching from URL to smart link appearance.
+  !!request.shouldReplaceLink;
+  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(handleResolved(view, request, editorAnalyticsApi, createAnalyticsEvent, options), handleRejected(view, request, editorAnalyticsApi));
+  return handleResolve;
+};
+const updateCardType = (resolvedCard, options) => {
+  if ((resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'blockCard' && !options.allowBlockCards || (resolvedCard === null || resolvedCard === void 0 ? void 0 : resolvedCard.type) === 'embedCard' && !options.allowEmbeds) {
+    // clean out the 'layout' attr from an embedCard type that should be transformed into the inlineCard type.
+    if (resolvedCard.type === 'embedCard') {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete resolvedCard.attrs.layout;
+    }
+    resolvedCard.type = 'inlineCard';
+  }
+};
+const handleResolved = (view, request, editorAnalyticsApi, createAnalyticsEvent, options) => resolvedCard => {
+  updateCardType(resolvedCard, options);
+  replaceQueuedUrlWithCard(request.url, resolvedCard, request.analyticsAction, editorAnalyticsApi, createAnalyticsEvent)(view.state, view.dispatch);
+  return resolvedCard;
+};
+const handleRejected = (view, request, editorAnalyticsApi) => () => {
+  handleFallbackWithAnalytics(request, editorAnalyticsApi)(view.state, view.dispatch);
+};
+
+// listen for card provider changes
+export const handleProvider = (_, provider, view) => {
+  if (!provider) {
+    return;
+  }
+  provider.then(cardProvider => {
+    const {
+      state,
+      dispatch
+    } = view;
+    dispatch(setProvider(cardProvider)(state.tr));
+  });
+};

package/dist/es2019/pm-plugins/util/state.js

@@ -0,0 +1,26 @@
+import { pluginKey } from '../plugin-key';
+
+// ============================================================================ //
+// ============================== PLUGIN STATE ================================ //
+// ============================================================================ //
+// Used for interactions with the Card Plugin's state.
+// ============================================================================ //
+export const getPluginState = editorState => pluginKey.getState(editorState);
+export const getPluginStateWithUpdatedPos = (pluginState, tr) => ({
+  ...pluginState,
+  requests: pluginState.requests.map(request => ({
+    ...request,
+    pos: tr.mapping.map(request.pos)
+  })),
+  cards: pluginState.cards.map(card => ({
+    ...card,
+    pos: tr.mapping.map(card.pos)
+  }))
+});
+export const getNewRequests = (oldState, currentState) => {
+  if (oldState) {
+    return currentState.requests.filter(req => !oldState.requests.find(oldReq => isSameRequest(oldReq, req)));
+  }
+  return currentState.requests;
+};
+const isSameRequest = (requestA, requestB) => requestA.url === requestB.url && requestA.pos === requestB.pos;