@atlaskit/editor-common 76.34.0 → 76.36.0

package/dist/esm/extensibility/Extension/InlineExtension/styles.js

@@ -0,0 +1,5 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/react';
+import { wrapperDefault } from '../styles';
+export var wrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", ";\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");

package/dist/esm/extensibility/Extension/Lozenge.js

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+var _excluded = ["url"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; } }
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { getExtensionLozengeData } from '../../utils';
+import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
+export var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export var ICON_SIZE = 24;
+var ExtensionLozenge = /*#__PURE__*/function (_Component) {
+  _inherits(ExtensionLozenge, _Component);
+  var _super = _createSuper(ExtensionLozenge);
+  function ExtensionLozenge() {
+    _classCallCheck(this, ExtensionLozenge);
+    return _super.apply(this, arguments);
+  }
+  _createClass(ExtensionLozenge, [{
+    key: "render",
+    value: function render() {
+      var node = this.props.node;
+      var imageData = getExtensionLozengeData({
+        node: node,
+        type: 'image'
+      });
+      if (imageData && node.type.name !== 'extension') {
+        return this.renderImage(imageData);
+      }
+      var iconData = getExtensionLozengeData({
+        node: node,
+        type: 'icon'
+      });
+      return this.renderFallback(iconData);
+    }
+  }, {
+    key: "renderImage",
+    value: function renderImage(lozengeData) {
+      var extensionKey = this.props.node.attrs.extensionKey;
+      var url = lozengeData.url,
+        rest = _objectWithoutProperties(lozengeData, _excluded);
+      return jsx("img", _extends({
+        css: styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback(lozengeData) {
+      var _this$props$node$attr = this.props.node.attrs,
+        parameters = _this$props$node$attr.parameters,
+        extensionKey = _this$props$node$attr.extensionKey;
+      var name = this.props.node.type.name;
+      var params = parameters && parameters.macroParams;
+      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      var isBlockExtension = name === 'extension';
+      return jsx("div", {
+        "data-testid": "lozenge-fallback",
+        css: placeholderFallback
+      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
+        height: ICON_SIZE,
+        width: ICON_SIZE
+      }, lozengeData)) : jsx(EditorFileIcon, {
+        label: title
+      }), jsx("span", {
+        className: "extension-title"
+      }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
+        css: placeholderFallbackParams
+      }, Object.keys(params).map(function (key) {
+        return key && " | ".concat(key, " = ").concat(params[key].value);
+      })));
+    }
+  }]);
+  return ExtensionLozenge;
+}(Component);
+export { ExtensionLozenge as default };

package/dist/esm/extensibility/Extension/styles.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { css } from '@emotion/react';
+import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
+import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
+export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
+export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
+export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
+export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
+export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
+export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));

package/dist/esm/extensibility/Extension.js

@@ -0,0 +1,69 @@
+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, { Component } from 'react';
+import { ProviderFactory, WithProviders } from '../provider-factory';
+import { ExtensionComponent } from './ExtensionComponent';
+export var Extension = /*#__PURE__*/function (_Component) {
+  _inherits(Extension, _Component);
+  var _super = _createSuper(Extension);
+  function Extension(props) {
+    var _this;
+    _classCallCheck(this, Extension);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "renderWithProvider", function (_ref) {
+      var extensionProvider = _ref.extensionProvider;
+      var _this$props = _this.props,
+        node = _this$props.node,
+        getPos = _this$props.getPos,
+        editorView = _this$props.editorView,
+        handleContentDOMRef = _this$props.handleContentDOMRef,
+        extensionHandlers = _this$props.extensionHandlers,
+        references = _this$props.references,
+        editorAppearance = _this$props.editorAppearance,
+        pluginInjectionApi = _this$props.pluginInjectionApi,
+        eventDispatcher = _this$props.eventDispatcher;
+      return /*#__PURE__*/React.createElement(ExtensionComponent, {
+        editorView: editorView,
+        node: node,
+        getPos: getPos,
+        references: references,
+        extensionProvider: extensionProvider,
+        handleContentDOMRef: handleContentDOMRef,
+        extensionHandlers: extensionHandlers,
+        editorAppearance: editorAppearance,
+        pluginInjectionApi: pluginInjectionApi,
+        eventDispatcher: eventDispatcher
+      });
+    });
+    _this.providerFactory = props.providerFactory || new ProviderFactory();
+    return _this;
+  }
+  _createClass(Extension, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (!this.props.providerFactory) {
+        // new ProviderFactory is created if no `providers` has been set
+        // in this case when component is unmounted it's safe to destroy this providerFactory
+        this.providerFactory.destroy();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(WithProviders, {
+        providers: ['extensionProvider'],
+        providerFactory: this.providerFactory,
+        renderNode: this.renderWithProvider
+      });
+    }
+  }]);
+  return Extension;
+}(Component);
+_defineProperty(Extension, "displayName", 'Extension');

package/dist/esm/extensibility/ExtensionComponent.js

@@ -0,0 +1,243 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 { Component } from 'react';
+import memoizeOne from 'memoize-one';
+import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
+import { getExtensionRenderer } from '../utils';
+import Extension from './Extension/Extension';
+import InlineExtension from './Extension/InlineExtension';
+import MultiBodiedExtension from './MultiBodiedExtension';
+export var ExtensionComponent = /*#__PURE__*/function (_Component) {
+  _inherits(ExtensionComponent, _Component);
+  var _super = _createSuper(ExtensionComponent);
+  function ExtensionComponent() {
+    var _this;
+    _classCallCheck(this, ExtensionComponent);
+    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), "privatePropsParsed", false);
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+    _defineProperty(_assertThisInitialized(_this), "mounted", false);
+    // memoized to avoid rerender on extension state changes
+    _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
+    _defineProperty(_assertThisInitialized(_this), "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(_assertThisInitialized(_this), "setStateFromPromise", function (stateKey, promise) {
+      promise && promise.then(function (p) {
+        if (!_this.mounted) {
+          return;
+        }
+        _this.setState(_defineProperty({}, stateKey, p));
+      });
+    });
+    /**
+     * Parses any private nodes once an extension provider is available.
+     *
+     * We do this separately from resolving a node renderer component since the
+     * private props come from extension provider, rather than an extension
+     * handler which only handles `render`/component concerns.
+     */
+    _defineProperty(_assertThisInitialized(_this), "parsePrivateNodePropsIfNeeded", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _this$props$node$attr, extensionType, extensionKey, privateProps;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(_this.privatePropsParsed || !_this.state.extensionProvider)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _this.privatePropsParsed = true;
+            _this$props$node$attr = _this.props.node.attrs, extensionType = _this$props$node$attr.extensionType, extensionKey = _this$props$node$attr.extensionKey;
+            /**
+             * getExtensionModuleNodePrivateProps can throw if there are issues in the
+             * manifest
+             */
+            _context.prev = 4;
+            _context.next = 7;
+            return _this.getExtensionModuleNodePrivateProps(_this.state.extensionProvider, extensionType, extensionKey);
+          case 7:
+            privateProps = _context.sent;
+            _this.setState({
+              _privateProps: privateProps
+            });
+            _context.next = 14;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](4);
+            // eslint-disable-next-line no-console
+            console.error('Provided extension handler has thrown an error\n', _context.t0);
+            /** We don't want this error to block renderer */
+            /** We keep rendering the default content */
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 11]]);
+    })));
+    _defineProperty(_assertThisInitialized(_this), "handleExtension", function (pmNode, actions) {
+      var _pmNode$marks;
+      var _this$props = _this.props,
+        extensionHandlers = _this$props.extensionHandlers,
+        editorView = _this$props.editorView;
+      var _pmNode$attrs = pmNode.attrs,
+        extensionType = _pmNode$attrs.extensionType,
+        extensionKey = _pmNode$attrs.extensionKey,
+        parameters = _pmNode$attrs.parameters,
+        text = _pmNode$attrs.text;
+      var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
+      if (isBodiedExtension) {
+        return;
+      }
+      var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.find(function (m) {
+        return m.type.name === 'fragment';
+      })) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.attrs) === null || _pmNode$marks === void 0 ? void 0 : _pmNode$marks.localId;
+      var node = {
+        type: pmNode.type.name,
+        extensionType: extensionType,
+        extensionKey: extensionKey,
+        parameters: parameters,
+        content: text,
+        localId: pmNode.attrs.localId,
+        fragmentLocalId: fragmentLocalId
+      };
+      var result;
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        var render = getExtensionRenderer(extensionHandlers[extensionType]);
+        result = render(node, editorView.state.doc, actions);
+      }
+      if (!result) {
+        var extensionHandlerFromProvider = _this.state.extensionProvider && _this.getNodeRenderer(_this.state.extensionProvider, extensionType, extensionKey);
+        if (extensionHandlerFromProvider) {
+          var NodeRenderer = extensionHandlerFromProvider;
+          if (node.type === 'multiBodiedExtension') {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references,
+              actions: actions
+            });
+          } else {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this.props.references
+            });
+          }
+        }
+      }
+      return result;
+    });
+    return _this;
+  }
+  _createClass(ExtensionComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      this.mounted = true;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var extensionProvider = this.props.extensionProvider;
+      if (extensionProvider) {
+        this.setStateFromPromise('extensionProvider', extensionProvider);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.parsePrivateNodePropsIfNeeded();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var extensionProvider = nextProps.extensionProvider;
+      if (extensionProvider && this.props.extensionProvider !== extensionProvider) {
+        this.setStateFromPromise('extensionProvider', extensionProvider);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state$_privateP;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        handleContentDOMRef = _this$props2.handleContentDOMRef,
+        editorView = _this$props2.editorView,
+        references = _this$props2.references,
+        editorAppearance = _this$props2.editorAppearance,
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        getPos = _this$props2.getPos,
+        eventDispatcher = _this$props2.eventDispatcher;
+      if (node.type.name === 'multiBodiedExtension') {
+        return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
+          node: node,
+          editorView: editorView,
+          getPos: getPos,
+          handleContentDOMRef: handleContentDOMRef,
+          tryExtensionHandler: this.tryExtensionHandler.bind(this),
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          editorAppearance: editorAppearance
+        });
+      }
+      var extensionHandlerResult = this.tryExtensionHandler(undefined);
+      switch (node.type.name) {
+        case 'extension':
+        case 'bodiedExtension':
+          return /*#__PURE__*/React.createElement(Extension, {
+            node: node,
+            getPos: this.props.getPos,
+            references: references,
+            extensionProvider: this.state.extensionProvider,
+            handleContentDOMRef: handleContentDOMRef,
+            view: editorView,
+            editorAppearance: editorAppearance,
+            hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
+            pluginInjectionApi: pluginInjectionApi
+          }, extensionHandlerResult);
+        case 'inlineExtension':
+          return /*#__PURE__*/React.createElement(InlineExtension, {
+            node: node
+          }, extensionHandlerResult);
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "tryExtensionHandler",
+    value: function tryExtensionHandler(actions) {
+      var node = this.props.node;
+      try {
+        var extensionContent = this.handleExtension(node, actions);
+        if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
+          return extensionContent;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Provided extension handler has thrown an error\n', e);
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
+      }
+
+      return null;
+    }
+  }]);
+  return ExtensionComponent;
+}(Component);

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ZERO_WIDTH_SPACE } from '../utils';
+/**
+ * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * else wrap with a div (for multi bodied extensions)
+ *
+ * @param param0
+ * @returns
+ */
+export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
+  var children = _ref.children,
+    nodeType = _ref.nodeType;
+  return /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
+};