@atlaskit/editor-plugin-card 0.1.0

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  rules: {
+    'no-duplicate-imports': 'off',
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-card

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,7 @@
+# EditorPluginCard
+
+Card plugin for @atlaskit/editor-core
+
+## Usage
+
+`import { cardPlugin } from '@atlaskit/editor-plugin-card';`

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cardPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.cardPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/messages.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.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'
+  }
+});
+exports.messages = messages;

package/dist/cjs/nodeviews/blockCard.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockCardComponent = exports.BlockCard = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-common/utils");
+var _smartCard = require("@atlaskit/smart-card");
+var _actions = require("../pm-plugins/actions");
+var _genericCard = require("./genericCard");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(BlockCardComponent, _React$PureComponent);
+  var _super = _createSuper(BlockCardComponent);
+  function BlockCardComponent() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
+      (0, _rafSchd.default)(function () {
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch((0, _actions.registerCard)({
+          title: title,
+          url: url,
+          pos: pos
+        })(view.state.tr));
+      })();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 (_utils.browser.ie && _utils.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.default.createElement("span", {
+        contentEditable: true
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (_ref) {
+      var err = _ref.err;
+      if (err) {
+        throw err;
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(BlockCardComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var view = this.props.view;
+      var scrollContainer = (0, _ui.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+        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.default.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, cardInner) : data ? cardInner : null);
+    }
+  }]);
+  return BlockCardComponent;
+}(_react.default.PureComponent);
+exports.BlockCardComponent = BlockCardComponent;
+(0, _defineProperty2.default)(BlockCardComponent, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});
+var WrappedBlockCard = (0, _genericCard.Card)(BlockCardComponent, _ui.UnsupportedBlock);
+var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(BlockCard, _ReactNodeView);
+  var _super2 = _createSuper(BlockCard);
+  function BlockCard() {
+    (0, _classCallCheck2.default)(this, BlockCard);
+    return _super2.apply(this, arguments);
+  }
+  (0, _createClass2.default)(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.default.createElement(WrappedBlockCard, {
+        node: this.node,
+        view: this.view,
+        getPos: this.getPos,
+        platform: platform,
+        showServerActions: showServerActions
+      });
+    }
+  }]);
+  return BlockCard;
+}(_reactNodeView.default);
+exports.BlockCard = BlockCard;

package/dist/cjs/nodeviews/datasource.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceComponent = exports.Datasource = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _utils = require("@atlaskit/editor-common/utils");
+var _linkDatasource = require("@atlaskit/link-datasource");
+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) { (0, _defineProperty2.default)(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; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } } /** @jsx jsx */
+var containerStyles = (0, _react2.css)({
+  height: '500px',
+  overflow: 'auto'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(DatasourceComponent, _React$PureComponent);
+  var _super = _createSuper(DatasourceComponent);
+  function DatasourceComponent(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, DatasourceComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPosSafely", function () {
+      var getPos = _this.props.getPos;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      try {
+        return getPos();
+      } catch (e) {
+        // Can blow up in rare cases, when node has been removed.
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDatasource", function () {
+      return _this.props.node.attrs.datasource;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTableView", function (datasource) {
+      var views = (datasource || _this.getDatasource()).views;
+      return views.find(function (view) {
+        return view.type === 'table';
+      }) || undefined;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleColumnChange", function (columnKeys) {
+      var _this$props$view = _this.props.view,
+        state = _this$props$view.state,
+        dispatch = _this$props$view.dispatch;
+      var pos = _this.getPosSafely();
+      if (pos === undefined) {
+        return;
+      }
+      var attrs = _this.props.node.attrs;
+      var views = [{
+        type: 'table',
+        properties: {
+          columns: columnKeys.map(function (key) {
+            return {
+              key: key
+            };
+          })
+        }
+      }];
+      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, attrs), {}, {
+        datasource: _objectSpread(_objectSpread({}, attrs.datasource), {}, {
+          views: views
+        })
+      }));
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(DatasourceComponent, [{
+    key: "render",
+    value: function render() {
+      var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+      var datasource = this.getDatasource();
+      var tableView = this.getTableView();
+      if (tableView) {
+        var _tableView$properties;
+        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref) {
+          var key = _ref.key;
+          return key;
+        });
+
+        // [WS-2307]: we only render card wrapped into a Provider when the value is ready
+        if (cardContext && cardContext.value) {
+          return (0, _react2.jsx)(cardContext.Provider, {
+            value: cardContext.value
+          }, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
+            datasourceId: datasource.id,
+            parameters: datasource.parameters,
+            visibleColumnKeys: visibleColumnKeys,
+            onVisibleColumnKeysChange: this.handleColumnChange
+          }));
+        }
+      }
+      return null;
+    }
+  }]);
+  return DatasourceComponent;
+}(_react.default.PureComponent);
+exports.DatasourceComponent = DatasourceComponent;
+(0, _defineProperty2.default)(DatasourceComponent, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});
+var Datasource = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(Datasource, _ReactNodeView);
+  var _super2 = _createSuper(Datasource);
+  function Datasource(props) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
+    var _this2;
+    (0, _classCallCheck2.default)(this, Datasource);
+    _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "calcTableWidth", function (layout, containerWidth) {
+      if (layout === 'center') {
+        return 'inherit';
+      }
+      return (0, _utils.calcBreakoutWidthPx)(layout, containerWidth);
+    });
+    var 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;
+    _this2.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(function (_ref2) {
+      var nextSharedState = _ref2.nextSharedState;
+      if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
+        _this2.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
+        _this2.update(_this2.node, []); // required to update the width when page is resized.
+      }
+    });
+    return _this2;
+  }
+  (0, _createClass2.default)(Datasource, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.classList.add(_styles.SmartCardSharedCssClassName.DATASOURCE_CONTAINER);
+      return domRef;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var attrs = this.node.attrs;
+      var calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
+      return (0, _react2.jsx)("div", {
+        className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
+        css: containerStyles,
+        style: {
+          minWidth: calculatedWidth
+        }
+      }, (0, _react2.jsx)(DatasourceComponent, {
+        node: this.node,
+        view: this.view,
+        getPos: this.getPos
+      }));
+    }
+  }]);
+  return Datasource;
+}(_reactNodeView.default);
+exports.Datasource = Datasource;