@atlaskit/editor-plugin-card 0.1.0

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -0,0 +1,335 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
+import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
+import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { embedHeaderHeight } from '@atlaskit/smart-card';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export default class ResizableEmbedCard extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      offsetLeft: this.calcOffsetLeft()
+    });
+    _defineProperty(this, "calcNewSize", (newWidth, stop) => {
+      const {
+        layout,
+        view: {
+          state
+        }
+      } = this.props;
+      const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
+      this.setState({
+        resizedPctWidth: newPct
+      });
+      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newPct, newWidth);
+      if (newPct <= 100) {
+        if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
+          newLayout = layout;
+        }
+        return {
+          width: newPct,
+          layout: newLayout
+        };
+      } else {
+        return {
+          width: this.props.pctWidth || null,
+          layout: newLayout
+        };
+      }
+    });
+    _defineProperty(this, "calcUnwrappedLayout", (pct, width) => {
+      if (pct <= 100) {
+        return 'center';
+      }
+      if (width <= this.wideLayoutWidth) {
+        return 'wide';
+      }
+      return 'full-width';
+    });
+    _defineProperty(this, "calcColumnLeftOffset", () => {
+      const {
+        offsetLeft
+      } = this.state;
+      return this.insideInlineLike ? calcColumnsFromPx(offsetLeft, this.props.lineLength, this.props.gridSize) : 0;
+    });
+    _defineProperty(this, "calcPxWidth", useLayout => {
+      const {
+        layout,
+        pctWidth,
+        lineLength,
+        containerWidth,
+        fullWidthMode,
+        getPos,
+        view: {
+          state
+        }
+      } = this.props;
+      const {
+        resizedPctWidth
+      } = this.state;
+      const pos = typeof getPos === 'function' ? getPos() : undefined;
+      return calcMediaPxWidth({
+        origWidth: DEFAULT_EMBED_CARD_WIDTH,
+        origHeight: DEFAULT_EMBED_CARD_HEIGHT,
+        pctWidth,
+        state,
+        containerWidth: {
+          width: containerWidth,
+          lineLength
+        },
+        isFullWidthModeEnabled: fullWidthMode,
+        layout: useLayout || layout,
+        pos: pos,
+        resizedPctWidth
+      });
+    });
+    _defineProperty(this, "highlights", (newWidth, snapPoints) => {
+      const snapWidth = snapTo(newWidth, snapPoints);
+      const {
+        layoutColumn,
+        table,
+        expand,
+        nestedExpand
+      } = this.props.view.state.schema.nodes;
+      if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        return [];
+      }
+      if (snapWidth > this.wideLayoutWidth) {
+        return ['full-width'];
+      }
+      const {
+        layout,
+        lineLength,
+        gridSize
+      } = this.props;
+      const columns = calcColumnsFromPx(snapWidth, lineLength, gridSize);
+      const columnWidth = Math.round(columns);
+      const highlight = [];
+      if (layout === 'wrap-left' || layout === 'align-start') {
+        highlight.push(0, columnWidth);
+      } else if (layout === 'wrap-right' || layout === 'align-end') {
+        highlight.push(gridSize, gridSize - columnWidth);
+      } else if (this.insideInlineLike) {
+        highlight.push(Math.round(columns + this.calcColumnLeftOffset()));
+      } else {
+        highlight.push(Math.floor((gridSize - columnWidth) / 2), Math.ceil((gridSize + columnWidth) / 2));
+      }
+      return highlight;
+    });
+  }
+  componentDidUpdate() {
+    const offsetLeft = this.calcOffsetLeft();
+    if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+      this.setState({
+        offsetLeft
+      });
+    }
+  }
+  get wrappedLayout() {
+    return wrappedLayouts.indexOf(this.props.layout) > -1;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.layout !== nextProps.layout) {
+      this.checkLayout(this.props.layout, nextProps.layout);
+    }
+  }
+
+  /**
+   * When returning to center layout from a wrapped/aligned layout, it might actually
+   * be wide or full-width
+   */
+  checkLayout(oldLayout, newLayout) {
+    const {
+      resizedPctWidth
+    } = this.state;
+    if (wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+      const layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
+      this.props.updateSize(resizedPctWidth, layout);
+    }
+  }
+  get $pos() {
+    if (typeof this.props.getPos !== 'function') {
+      return null;
+    }
+    const pos = this.props.getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+
+    // need to pass view because we may not get updated props in time
+    return this.props.view.state.doc.resolve(pos);
+  }
+
+  /**
+   * The maxmimum number of grid columns this node can resize to.
+   */
+  get gridWidth() {
+    const {
+      gridSize
+    } = this.props;
+    return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
+  }
+  calcOffsetLeft() {
+    let offsetLeft = 0;
+    if (this.wrapper && this.insideInlineLike) {
+      const currentNode = this.wrapper;
+      const boundingRect = currentNode.getBoundingClientRect();
+      const pmRect = this.props.view.dom.getBoundingClientRect();
+      offsetLeft = boundingRect.left - pmRect.left;
+    }
+    return offsetLeft;
+  }
+  get wideLayoutWidth() {
+    const {
+      lineLength
+    } = this.props;
+    if (lineLength) {
+      return Math.ceil(lineLength * breakoutWideScaleRatio);
+    } else {
+      return akEditorWideLayoutWidth;
+    }
+  }
+  calcSnapPoints() {
+    const {
+      offsetLeft
+    } = this.state;
+    const {
+      containerWidth,
+      lineLength
+    } = this.props;
+    const snapTargets = [];
+    for (let i = 0; i < this.gridWidth; i++) {
+      snapTargets.push(calcPxFromColumns(i, lineLength, this.gridWidth) - offsetLeft);
+    }
+    // full width
+    snapTargets.push(lineLength - offsetLeft);
+    const minimumWidth = calcPxFromColumns(this.wrappedLayout || this.insideInlineLike ? 1 : 2, lineLength, this.props.gridSize);
+    let snapPoints = snapTargets.filter(width => width >= minimumWidth);
+    const $pos = this.$pos;
+    if (!$pos) {
+      return snapPoints;
+    }
+    const isTopLevel = $pos.parent.type.name === 'doc';
+    if (isTopLevel) {
+      snapPoints.push(this.wideLayoutWidth);
+      const fullWidthPoint = containerWidth - akEditorBreakoutPadding;
+      if (fullWidthPoint > this.wideLayoutWidth) {
+        snapPoints.push(fullWidthPoint);
+      }
+    }
+    return snapPoints;
+  }
+  get insideInlineLike() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      listItem
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }
+  /**
+   * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.
+   * It allowed height to be defined by a given percent ratio and so absolute value was defined by actual width.
+   * Also, it was part of styled component, which was fine because it was static through out life time of component.
+   *
+   * Now, two things changed:
+   * 1. If `height` is present we take it as actual height of the box, and hence we don't need
+   * (or even can't have, due to lack of width value) paddingTop trick.
+   * 2. Since `height` can be changing through out life time of a component, we can't have it as part of styled component,
+   * and hence we use `style` prop.
+   */
+  getHeightDefiningComponent() {
+    const {
+      height,
+      aspectRatio
+    } = this.props;
+    let heightDefiningStyles;
+    if (height) {
+      heightDefiningStyles = {
+        height: `${height}px`
+      };
+    } else {
+      // paddingBottom css trick defines ratio of `iframe height (y) + header (32)` to `width (x)`,
+      // where is `aspectRatio` defines iframe aspectRatio alone
+      // So, visually:
+      //
+      //            x
+      //       ┌──────────┐
+      //       │  header  │ 32
+      //       ├──────────┤
+      //       │          │
+      //       │  iframe  │ y
+      //       │          │
+      //       └──────────┘
+      //
+      // aspectRatio = x / y
+      // paddingBottom = (y + 32) / x
+      // which can be achieved with css calc() as (1 / (x/y)) * 100)% + 32px
+      heightDefiningStyles = {
+        paddingBottom: `calc(${(1 / aspectRatio * 100).toFixed(3)}% + ${embedHeaderHeight}px)`
+      };
+    }
+    return jsx("span", {
+      "data-testid": 'resizable-embed-card-height-definer',
+      style: {
+        display: 'block',
+        /* Fixes extra padding problem in Firefox */
+        fontSize: 0,
+        lineHeight: 0,
+        ...heightDefiningStyles
+      }
+    });
+  }
+  render() {
+    const {
+      layout,
+      pctWidth,
+      containerWidth,
+      fullWidthMode,
+      children
+    } = this.props;
+    const initialWidth = this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide;
+    const enable = {};
+    handleSides.forEach(side => {
+      const oppositeSide = side === 'left' ? 'right' : 'left';
+      enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
+      if (side === 'left' && this.insideInlineLike) {
+        enable[side] = false;
+      }
+    });
+
+    /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
+    return jsx("div", {
+      css: embedSpacingStyles,
+      "data-testid": "resizable-embed-card-spacing"
+    }, jsx("div", {
+      css: wrapperStyle({
+        layout,
+        isResized: !!pctWidth,
+        containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
+        fullWidthMode
+      })
+    }, jsx(Resizer, _extends({}, this.props, {
+      width: initialWidth // Starting or initial width of embed <iframe> itself.
+      ,
+      enable: enable,
+      calcNewSize: this.calcNewSize,
+      snapPoints: this.calcSnapPoints(),
+      scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
+      highlights: this.highlights,
+      innerPadding: akEditorMediaResizeHandlerPaddingWide,
+      nodeType: "embed"
+    }), children, this.getHeightDefiningComponent())));
+    /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
+  }
+}
+_defineProperty(ResizableEmbedCard, "defaultProps", {
+  aspectRatio: DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT
+});

package/dist/es2019/ui/SmallerEditIcon.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { editIconStyles } from '@atlaskit/editor-common/styles';
+import EditIcon from '@atlaskit/icon/glyph/edit';
+
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+export const SmallerEditIcon = () => {
+  return jsx("div", {
+    css: editIconStyles
+  }, jsx(EditIcon, {
+    label: "edit"
+  }));
+};
+/* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */

package/dist/es2019/utils.js

@@ -0,0 +1,46 @@
+import { NodeSelection } from 'prosemirror-state';
+import { pluginKey } from './pm-plugins/plugin-key';
+export const appearanceForNodeType = spec => {
+  if (spec.name === 'inlineCard') {
+    return 'inline';
+  } else if (spec.name === 'blockCard') {
+    return 'block';
+  } else if (spec.name === 'embedCard') {
+    return 'embed';
+  }
+  return;
+};
+export const selectedCardAppearance = state => {
+  if (state.selection instanceof NodeSelection) {
+    return appearanceForNodeType(state.selection.node.type);
+  }
+};
+export const titleUrlPairFromNode = node => {
+  const {
+    attrs
+  } = node;
+  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
+ */
+export const mergeCardInfo = (titleUrlPair, info) => {
+  return {
+    title: info && info.title || titleUrlPair.title,
+    url: info && info.url || titleUrlPair.url
+  };
+};
+export const displayInfoForCard = (node, info) => mergeCardInfo(titleUrlPairFromNode(node), info);
+export const findCardInfo = state => {
+  const pluginState = pluginKey.getState(state);
+  if (!pluginState) {
+    return undefined;
+  }
+  return pluginState.cards.find(cardInfo => cardInfo.pos === state.selection.from);
+};

package/dist/es2019/version.json

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

package/dist/esm/index.js

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

package/dist/esm/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var 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/esm/nodeviews/blockCard.js

@@ -0,0 +1,156 @@
+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 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 var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(BlockCardComponent, _React$PureComponent);
+  var _super = _createSuper(BlockCardComponent);
+  function BlockCardComponent() {
+    var _this;
+    _classCallCheck(this, BlockCardComponent);
+    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 () {
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch(registerCard({
+          title: title,
+          url: url,
+          pos: pos
+        })(view.state.tr));
+      })();
+    });
+    _defineProperty(_assertThisInitialized(_this), "gapCursorSpan", function () {
+      // 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(_assertThisInitialized(_this), "onError", function (_ref) {
+      var err = _ref.err;
+      if (err) {
+        throw err;
+      }
+    });
+    return _this;
+  }
+  _createClass(BlockCardComponent, [{
+    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,
+        platform = _this$props2.platform,
+        showServerActions = _this$props2.showServerActions;
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        data = _node$attrs.data;
+      var 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);
+    }
+  }]);
+  return BlockCardComponent;
+}(React.PureComponent);
+_defineProperty(BlockCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+var WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
+export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(BlockCard, _ReactNodeView);
+  var _super2 = _createSuper(BlockCard);
+  function BlockCard() {
+    _classCallCheck(this, BlockCard);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(BlockCard, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var 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;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$reactComponentP = this.reactComponentProps,
+        platform = _this$reactComponentP.platform,
+        showServerActions = _this$reactComponentP.showServerActions;
+      return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+        node: this.node,
+        view: this.view,
+        getPos: this.getPos,
+        platform: platform,
+        showServerActions: showServerActions
+      });
+    }
+  }]);
+  return BlockCard;
+}(ReactNodeView);