@atlaskit/editor-plugin-card 0.1.0

package/dist/esm/nodeviews/inlineCard.js

@@ -0,0 +1,124 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import PropTypes from 'prop-types';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import { Card } from './genericCard';
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(InlineCardComponent, _React$PureComponent);
+  var _super = _createSuper(InlineCardComponent);
+  function InlineCardComponent() {
+    var _this;
+    _classCallCheck(this, InlineCardComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
+    _defineProperty(_assertThisInitialized(_this), "onResolve", function (data) {
+      var _this$props = _this.props,
+        getPos = _this$props.getPos,
+        view = _this$props.view;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      var title = data.title,
+        url = data.url;
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      rafSchedule(function () {
+        // prosemirror-bump-fix
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch(registerCard({
+          title: title,
+          url: url,
+          pos: pos
+        })(view.state.tr));
+      })();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onError", function (data) {
+      var url = data.url,
+        err = data.err;
+      if (err) {
+        throw err;
+      }
+      _this.onResolve({
+        url: url
+      });
+    });
+    return _this;
+  }
+  _createClass(InlineCardComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var view = this.props.view;
+      var scrollContainer = findOverflowScrollParent(view.dom);
+      this.scrollContainer = scrollContainer || undefined;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        cardContext = _this$props2.cardContext,
+        showServerActions = _this$props2.showServerActions,
+        useAlternativePreloader = _this$props2.useAlternativePreloader;
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        data = _node$attrs.data;
+      var card = /*#__PURE__*/React.createElement("span", {
+        className: "card"
+      }, /*#__PURE__*/React.createElement(SmartCard, {
+        key: url,
+        url: url,
+        data: data,
+        appearance: "inline",
+        onClick: this.onClick,
+        container: this.scrollContainer,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+        showServerActions: showServerActions
+      }));
+      // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+      // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+      return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, card) : data ? card : null;
+    }
+  }]);
+  return InlineCardComponent;
+}(React.PureComponent);
+_defineProperty(InlineCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+var WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
+export function InlineCardNodeView(props) {
+  var useAlternativePreloader = props.useAlternativePreloader,
+    node = props.node,
+    view = props.view,
+    getPos = props.getPos,
+    showServerActions = props.showServerActions;
+  return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    showServerActions: showServerActions,
+    useAlternativePreloader: useAlternativePreloader
+  });
+}

package/dist/esm/plugin.js

@@ -0,0 +1,130 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 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 var cardPlugin = function cardPlugin(options, api) {
+  var _api$dependencies, _api$dependencies$fea;
+  var 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: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return pluginKey.getState(editorState) || null;
+    },
+    nodes: function nodes() {
+      var nodes = [{
+        name: 'inlineCard',
+        node: inlineCard
+      }, {
+        name: 'blockCard',
+        node: blockCard
+      }];
+      if (options.allowEmbeds) {
+        nodes.push({
+          name: 'embedCard',
+          node: embedCard
+        });
+      }
+      return nodes;
+    },
+    pmPlugins: function pmPlugins() {
+      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme;
+      var allowBlockCards = (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
+      var allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
+      var useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
+      var allowWrapping = (_options$allowWrappin = options.allowWrapping) !== null && _options$allowWrappin !== void 0 ? _options$allowWrappin : true;
+      var allowAlignment = (_options$allowAlignme = options.allowAlignment) !== null && _options$allowAlignme !== void 0 ? _options$allowAlignme : true;
+      var plugins = [{
+        name: 'card',
+        plugin: createPlugin(_objectSpread(_objectSpread({}, options), {}, {
+          allowBlockCards: allowBlockCards,
+          allowResizing: allowResizing,
+          useAlternativePreloader: useAlternativePreloader,
+          allowWrapping: allowWrapping,
+          allowAlignment: allowAlignment
+        }), api)
+      }, {
+        name: 'cardHyperlink',
+        plugin: function plugin() {
+          return mountHyperlinkPlugin(api, options);
+        }
+      }];
+      plugins.push({
+        name: 'cardKeymap',
+        plugin: function plugin(_ref) {
+          var featureFlags = _ref.featureFlags;
+          return cardKeymap(featureFlags);
+        }
+      });
+      return plugins;
+    },
+    contentComponent: function contentComponent(_ref2) {
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement;
+      var lpAnalyticsEventsNext = featureFlags.lpAnalyticsEventsNext;
+      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: hideLinkToolbar,
+      queueCardsFromChangedTr: queueCardsFromChangedTr,
+      changeSelectedCardToLink: changeSelectedCardToLink,
+      setSelectedCardAppearance: setSelectedCardAppearance
+    },
+    pluginsOptions: {
+      floatingToolbar: floatingToolbar(options, featureFlags, options.platform, options.linkPicker, api),
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
+        if (canRenderDatasource(JIRA_LIST_OF_LINKS_DATASOURCE_ID)) {
+          return [{
+            id: 'datasource',
+            title: formatMessage(messages.datasourceJiraIssue),
+            description: formatMessage(messages.datasourceJiraIssueDescription),
+            keywords: ['jira'],
+            icon: function icon() {
+              return /*#__PURE__*/React.createElement(IconDatasourceJiraIssue, null);
+            },
+            action: function action(insert) {
+              var tr = insert(undefined);
+              showDatasourceModal('jira')(tr);
+              return tr;
+            }
+          }];
+        }
+        return [];
+      }
+    }
+  };
+};

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

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

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

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