@atlaskit/editor-plugin-card 0.1.0

package/dist/cjs/ui/SmallerEditIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallerEditIcon = void 0;
+var _react = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
+var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
+/** @jsx jsx */
+
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+var SmallerEditIcon = function SmallerEditIcon() {
+  return (0, _react.jsx)("div", {
+    css: _styles.editIconStyles
+  }, (0, _react.jsx)(_edit.default, {
+    label: "edit"
+  }));
+};
+/* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
+exports.SmallerEditIcon = SmallerEditIcon;

package/dist/cjs/utils.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+var _prosemirrorState = require("prosemirror-state");
+var _pluginKey = require("./pm-plugins/plugin-key");
+var appearanceForNodeType = function appearanceForNodeType(spec) {
+  if (spec.name === 'inlineCard') {
+    return 'inline';
+  } else if (spec.name === 'blockCard') {
+    return 'block';
+  } else if (spec.name === 'embedCard') {
+    return 'embed';
+  }
+  return;
+};
+exports.appearanceForNodeType = appearanceForNodeType;
+var selectedCardAppearance = function selectedCardAppearance(state) {
+  if (state.selection instanceof _prosemirrorState.NodeSelection) {
+    return appearanceForNodeType(state.selection.node.type);
+  }
+};
+exports.selectedCardAppearance = selectedCardAppearance;
+var titleUrlPairFromNode = function titleUrlPairFromNode(node) {
+  var attrs = node.attrs;
+  return {
+    url: attrs.url || attrs.data && attrs.data.url,
+    title: attrs.data && attrs.data.title
+  };
+};
+
+/**
+ * Merges the title and url from attributes and CardInfo from the resolved view, preferring the CardInfo.
+ * @param titleUrlPair title and url information from the node attributes
+ * @param info information stored in state from the resolved UI component view
+ */
+exports.titleUrlPairFromNode = titleUrlPairFromNode;
+var mergeCardInfo = function mergeCardInfo(titleUrlPair, info) {
+  return {
+    title: info && info.title || titleUrlPair.title,
+    url: info && info.url || titleUrlPair.url
+  };
+};
+exports.mergeCardInfo = mergeCardInfo;
+var displayInfoForCard = function displayInfoForCard(node, info) {
+  return mergeCardInfo(titleUrlPairFromNode(node), info);
+};
+exports.displayInfoForCard = displayInfoForCard;
+var findCardInfo = function findCardInfo(state) {
+  var pluginState = _pluginKey.pluginKey.getState(state);
+  if (!pluginState) {
+    return undefined;
+  }
+  return pluginState.cards.find(function (cardInfo) {
+    return cardInfo.pos === state.selection.from;
+  });
+};
+exports.findCardInfo = findCardInfo;

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { cardPlugin } from './plugin';

package/dist/es2019/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  datasourceJiraIssue: {
+    id: 'fabric.editor.datasource.jiraIssue',
+    defaultMessage: 'Jira Issues',
+    description: 'Insert a jira datasource table'
+  },
+  datasourceJiraIssueDescription: {
+    id: 'fabric.editor.datasource.jiraIssue.description',
+    defaultMessage: 'Insert issues from Jira Cloud with enhanced search, filtering, and configuration',
+    description: 'Insert a jira datasource table'
+  }
+});

package/dist/es2019/nodeviews/blockCard.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import PropTypes from 'prop-types';
+import rafSchedule from 'raf-schd';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
+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 class BlockCardComponent extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "onClick", () => {});
+    _defineProperty(this, "onResolve", data => {
+      const {
+        getPos,
+        view
+      } = this.props;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      const {
+        title,
+        url
+      } = data;
+
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      rafSchedule(() => {
+        const pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch(registerCard({
+          title,
+          url,
+          pos
+        })(view.state.tr));
+      })();
+    });
+    _defineProperty(this, "gapCursorSpan", () => {
+      // Don't render in EdgeHTMl version <= 18 (Edge version 44)
+      // as it forces the edit popup to render 24px lower than it should
+      if (browser.ie && browser.ie_version < 79) {
+        return;
+      }
+
+      // render an empty span afterwards to get around Webkit bug
+      // that puts caret in next editable text element
+      return /*#__PURE__*/React.createElement("span", {
+        contentEditable: true
+      });
+    });
+    _defineProperty(this, "onError", ({
+      err
+    }) => {
+      if (err) {
+        throw err;
+      }
+    });
+  }
+  UNSAFE_componentWillMount() {
+    const {
+      view
+    } = this.props;
+    const scrollContainer = findOverflowScrollParent(view.dom);
+    this.scrollContainer = scrollContainer || undefined;
+  }
+  render() {
+    const {
+      node,
+      cardContext,
+      platform,
+      showServerActions
+    } = this.props;
+    const {
+      url,
+      data
+    } = node.attrs;
+    const cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
+      key: url,
+      url: url,
+      data: data,
+      container: this.scrollContainer,
+      appearance: "block",
+      onClick: this.onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      showActions: platform === 'web',
+      platform: platform,
+      showServerActions: showServerActions
+    }), this.gapCursorSpan());
+    // [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 /*#__PURE__*/React.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, cardInner) : data ? cardInner : null);
+  }
+}
+_defineProperty(BlockCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+const WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
+export class BlockCard extends ReactNodeView {
+  createDomRef() {
+    const domRef = document.createElement('div');
+    if (this.reactComponentProps.platform !== 'mobile') {
+      // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+      // see also: https://github.com/ProseMirror/prosemirror/issues/884
+      domRef.contentEditable = 'true';
+      domRef.setAttribute('spellcheck', 'false');
+    }
+    return domRef;
+  }
+  render() {
+    const {
+      platform,
+      showServerActions
+    } = this.reactComponentProps;
+    return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+      node: this.node,
+      view: this.view,
+      getPos: this.getPos,
+      platform: platform,
+      showServerActions: showServerActions
+    });
+  }
+}

package/dist/es2019/nodeviews/datasource.js

@@ -0,0 +1,137 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import PropTypes from 'prop-types';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+import { DatasourceTableView } from '@atlaskit/link-datasource';
+const containerStyles = css({
+  height: '500px',
+  overflow: 'auto'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class DatasourceComponent extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getPosSafely", () => {
+      const {
+        getPos
+      } = this.props;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      try {
+        return getPos();
+      } catch (e) {
+        // Can blow up in rare cases, when node has been removed.
+      }
+    });
+    _defineProperty(this, "getDatasource", () => this.props.node.attrs.datasource);
+    _defineProperty(this, "getTableView", datasource => {
+      const views = (datasource || this.getDatasource()).views;
+      return views.find(view => view.type === 'table') || undefined;
+    });
+    _defineProperty(this, "handleColumnChange", columnKeys => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const pos = this.getPosSafely();
+      if (pos === undefined) {
+        return;
+      }
+      const attrs = this.props.node.attrs;
+      const views = [{
+        type: 'table',
+        properties: {
+          columns: columnKeys.map(key => ({
+            key
+          }))
+        }
+      }];
+      const tr = state.tr.setNodeMarkup(pos, undefined, {
+        ...attrs,
+        datasource: {
+          ...attrs.datasource,
+          views
+        }
+      });
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+    });
+  }
+  render() {
+    const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+    const datasource = this.getDatasource();
+    const tableView = this.getTableView();
+    if (tableView) {
+      var _tableView$properties;
+      const visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(({
+        key
+      }) => key);
+
+      // [WS-2307]: we only render card wrapped into a Provider when the value is ready
+      if (cardContext && cardContext.value) {
+        return jsx(cardContext.Provider, {
+          value: cardContext.value
+        }, jsx(DatasourceTableView, {
+          datasourceId: datasource.id,
+          parameters: datasource.parameters,
+          visibleColumnKeys: visibleColumnKeys,
+          onVisibleColumnKeysChange: this.handleColumnChange
+        }));
+      }
+    }
+    return null;
+  }
+}
+_defineProperty(DatasourceComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+export class Datasource extends ReactNodeView {
+  constructor(props) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    _defineProperty(this, "calcTableWidth", (layout, containerWidth) => {
+      if (layout === 'center') {
+        return 'inherit';
+      }
+      return calcBreakoutWidthPx(layout, containerWidth);
+    });
+    const sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
+    this.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
+      nextSharedState
+    }) => {
+      if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && this.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
+        this.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
+        this.update(this.node, []); // required to update the width when page is resized.
+      }
+    });
+  }
+
+  createDomRef() {
+    const domRef = document.createElement('div');
+    domRef.classList.add(SmartCardSharedCssClassName.DATASOURCE_CONTAINER);
+    return domRef;
+  }
+  render() {
+    const {
+      attrs
+    } = this.node;
+    const calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
+    return jsx("div", {
+      className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
+      css: containerStyles,
+      style: {
+        minWidth: calculatedWidth
+      }
+    }, jsx(DatasourceComponent, {
+      node: this.node,
+      view: this.view,
+      getPos: this.getPos
+    }));
+  }
+}