@atlaskit/editor-common 76.33.2 → 76.35.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @atlaskit/editor-common
 
+## 76.35.0
+
+### Minor Changes
+
+- [#65382](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65382) [`5f67f805635f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5f67f805635f) - # WHAT
+
+  Deprecating entry-points from `@atlaskit/editor-core` to decouple the `extension` plugin.
+
+  These entry-points will no longer be available:
+
+  - `@atlaskit/editor-core/extensibility`
+  - `@atlaskit/editor-core/extensions`
+
+  # WHY
+
+  We are going to extract the `extension` plugin code to its own package.
+  These entry-points are only used for internal packages and are no longer required.
+
+  They couple the `extension` plugin to `editor-core` which blocks extraction.
+
+  # HOW
+
+  In general these were only used internally and should not be required.
+
+  However we do expose some of the components from `@atlaskit/editor-core/extensibility` in `@atlaskit/editor-common/extensibility`.
+
+  This includes:
+
+  - Extension
+  - ExtensionNode
+  - ExtensionNodeWrapper
+
+  For any issues please reach out to #help-editor
+
+- [#64844](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64844) [`fdad147e2231`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fdad147e2231) - [ED-21730] Extract Collab Edit Plugin
+
+### Patch Changes
+
+- [#65031](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65031) [`a00094111b5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a00094111b5a) - ED-21609 Update adf-schema to 35.3.0
+- [#64930](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64930) [`800c9e0275bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/800c9e0275bb) - NO-ISSUE Add optional chaining to the build info window variable when generating Sentry tags to avoid missing Jira errors
+- Updated dependencies
+
+## 76.34.0
+
+### Minor Changes
+
+- [#64836](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64836) [`f3e1604287a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3e1604287a9) - ED-20879 add ssr support for mediaInline
+
+### Patch Changes
+
+- [#64335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64335) [`efc8826c907f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/efc8826c907f) - [ux] [ED-16509] Restart numbered list inserting nodes via QUICK INSERT, nodes including : panels, expands, decisions, tables, layout, quotes, actions, dividers, headings. Changes are being guarded behind feature flag platform.editor.ordered-list-inserting-nodes_bh0vo
+- [#63266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63266) [`630f6c9fc80c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/630f6c9fc80c) - ED-21576: Added new Example for MBE - Interactive Fake Tabs
+- Updated dependencies
+
 ## 76.33.2
 
 ### Patch Changes

package/dist/cjs/collab/index.js

@@ -1,9 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
+exports.telepointerStyle = exports.colors = exports.TELEPOINTER_DIM_CLASS = exports.PROVIDER_ERROR_CODE = exports.DisconnectReason = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _adfSchema = require("@atlaskit/adf-schema");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var themeColors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Format of the payload returned by the callback function passed to the collab provider
 // that gets called when syncing with the back-end service fails.
 // Format of the document and its metadata returned from the collab provider
@@ -111,4 +121,19 @@ var DisconnectReason = exports.DisconnectReason = /*#__PURE__*/function (Disconn
   DisconnectReason["SOCKET_TIMEOUT"] = "SOCKET_TIMEOUT";
   DisconnectReason["UNKNOWN_DISCONNECT"] = "UNKNOWN_DISCONNECT";
   return DisconnectReason;
-}({});
+}({});
+// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var colors = exports.colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(function (solid) {
+  return {
+    solid: solid,
+    selection: (0, _adfSchema.hexToRgba)(solid, 0.2)
+  };
+});
+var telepointerColorStyle = function telepointerColorStyle(color, index) {
+  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+};
+var TELEPOINTER_DIM_CLASS = exports.TELEPOINTER_DIM_CLASS = 'telepointer-dim';
+var telepointerStyle = exports.telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: ", ";\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+  return telepointerColorStyle(color, index);
+}));

package/dist/cjs/core-utils/document-logger.js

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDocStructure = void 0;
+var hash = {
+  nodes: {
+    doc: 'doc',
+    paragraph: 'p',
+    text: 't',
+    bulletList: 'ul',
+    orderedList: 'ol',
+    listItem: 'li',
+    heading: 'h',
+    blockquote: 'blockq',
+    codeBlock: 'codebl',
+    panel: 'pnl',
+    rule: 'rl',
+    hardBreak: 'br',
+    mention: 'ment',
+    emoji: 'emj',
+    image: 'img',
+    caption: 'cap',
+    media: 'media',
+    mediaGroup: 'mediag',
+    mediaSingle: 'medias',
+    plain: 'pln',
+    table: 'table',
+    tableCell: 'td',
+    tableHeader: 'th',
+    tableRow: 'tr',
+    decisionList: 'dl',
+    decisionItem: 'di',
+    taskList: 'tl',
+    taskItem: 'ti',
+    extension: 'ext',
+    inlineExtension: 'exti',
+    bodiedExtension: 'extb',
+    multiBodiedExtension: 'extmbe',
+    extensionFrame: 'extfrm',
+    status: 'sts',
+    placeholder: 'plh',
+    inlineCard: 'cardi',
+    blockCard: 'cardb',
+    embedCard: 'carde',
+    expand: 'exp',
+    nestedExpand: 'expn',
+    unsupportedBlock: 'unsupb',
+    unsupportedInline: 'unsupi',
+    unknownBlock: 'unkb',
+    date: 'date'
+  },
+  marks: {
+    em: 'em',
+    strong: 'strong',
+    code: 'code',
+    strike: 'strike',
+    underline: 'undline',
+    link: 'lnk',
+    subsup: 'subsup',
+    textColor: 'txtclr',
+    unsupportedMark: 'unsupmrk',
+    unsupportedNodeAttribute: 'unsupnattr',
+    annotation: 'anno'
+  }
+};
+function shortHash(type, isMark) {
+  var code = hash[isMark ? 'marks' : 'nodes'][type];
+  return code ? code : type;
+}
+function compactStringifier(node) {
+  var _node$marks;
+  var isContentEmpty = !node.content;
+  var isTextNode = (node === null || node === void 0 ? void 0 : node.type) === 'text';
+  var hasMarks = (_node$marks = node.marks) === null || _node$marks === void 0 ? void 0 : _node$marks.length;
+  var isContentArray = Array.isArray(node.content);
+  var marks = function marks(child) {
+    if (hasMarks) {
+      return node.marks.reduce(function (str, mark) {
+        return "".concat(shortHash(mark, true), "(").concat(str, ")");
+      }, child);
+    }
+    return child;
+  };
+  var content;
+  if (isTextNode) {
+    content = String(node.nodeSize);
+  } else if (isContentEmpty) {
+    content = '';
+  } else if (isContentArray) {
+    content = node.content.map(function (node) {
+      return compactStringifier(node);
+    }).join(',');
+  }
+  return marks("".concat(shortHash(node.type, false), "(").concat(content, ")"));
+}
+var getDocStructure = exports.getDocStructure = function getDocStructure(doc, options) {
+  try {
+    var result = getBlockNode(doc, 0);
+    if (options !== null && options !== void 0 && options.compact) {
+      return compactStringifier(result);
+    }
+    return result;
+  } catch (error) {
+    return "Error logging document structure: ".concat(error);
+  }
+};
+var getBlockNode = function getBlockNode(node, pos) {
+  var blockNode = {
+    type: node.type.name,
+    pos: pos,
+    nodeSize: node.nodeSize
+  };
+  var content = getBlockNodeContent(node.content, pos);
+  if (content.length > 0) {
+    blockNode.content = content;
+  }
+  var marks = getMarks(node);
+  if (marks.length > 0) {
+    blockNode.marks = marks;
+  }
+  return blockNode;
+};
+var getBlockNodeContent = function getBlockNodeContent(node, pos) {
+  if (!node || !node.content || !node.content.length) {
+    return [];
+  }
+  var blockNodeContent = [];
+  var content = node.content;
+  if (content[0].isBlock) {
+    // children are block nodes
+    var prevNode;
+    blockNodeContent = content.map(function (node) {
+      pos += prevNode ? prevNode.nodeSize : 1;
+      prevNode = node;
+      return getBlockNode(node, pos);
+    });
+  } else {
+    // children are inline nodes .
+    var result = getInlineNodes(content, pos);
+    blockNodeContent = result.inlineNodes;
+    pos = result.pos;
+  }
+  return blockNodeContent;
+};
+var getInlineNodes = function getInlineNodes(nodes, pos) {
+  var inlineNodes = nodes.map(function (node) {
+    var nodeSize = node.nodeSize;
+    var inlineNode = {
+      type: node.type.name,
+      pos: pos,
+      nodeSize: nodeSize
+    };
+    var marks = getMarks(node);
+    if (marks.length > 0) {
+      inlineNode.marks = marks;
+    }
+    pos += nodeSize;
+    return inlineNode;
+  });
+  return {
+    inlineNodes: inlineNodes,
+    pos: pos
+  };
+};
+var getMarks = function getMarks(node) {
+  return node.marks.map(function (mark) {
+    return mark.type.name;
+  });
+};

package/dist/cjs/core-utils/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "getDocStructure", {
+  enumerable: true,
+  get: function get() {
+    return _documentLogger.getDocStructure;
+  }
+});
 Object.defineProperty(exports, "insideTable", {
   enumerable: true,
   get: function get() {
     return _inside.insideTable;
   }
 });
-var _inside = require("./inside");
+var _inside = require("./inside");
+var _documentLogger = require("./document-logger");

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _withPluginState = require("../../..//with-plugin-state");
+var _hooks = require("../../../hooks");
+var _ui = require("../../../ui");
+var _utils = require("../../../utils");
+var _Lozenge = _interopRequireDefault(require("../Lozenge"));
+var _styles = require("../styles");
+var _styles2 = require("./styles");
+var _excluded = ["type"];
+/** @jsx jsx */
+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) { (0, _defineProperty2.default)(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 ExtensionWithPluginState(props) {
+  var node = props.node,
+    handleContentDOMRef = props.handleContentDOMRef,
+    children = props.children,
+    _props$widthState = props.widthState,
+    widthState = _props$widthState === void 0 ? {
+      width: 0
+    } : _props$widthState,
+    handleRef = props.handleRef,
+    shadowClassNames = props.shadowClassNames,
+    hideFrame = props.hideFrame,
+    editorAppearance = props.editorAppearance;
+  var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
+  var isMobile = editorAppearance === 'mobile';
+  var hasChildren = !!children;
+  var removeBorder = hideFrame && !isMobile && !hasBody || false;
+  var getPos = props.getPos,
+    view = props.view;
+  var isTopLevelNode = _react.default.useMemo(function () {
+    var pos = typeof getPos === 'function' ? getPos() : undefined;
+    return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
+    return false;
+  }, [view, getPos]);
+  var shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should only be respected for top level nodes.
+  isTopLevelNode &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
+    'with-overlay': !hasBody,
+    'without-frame': removeBorder
+  }, _styles2.widerLayoutClassName, shouldBreakout));
+  var headerClassNames = (0, _classnames2.default)({
+    'with-children': hasChildren,
+    'without-frame': removeBorder
+  });
+  var customContainerStyles = {
+    width: '100%'
+  };
+  var newContentStyles = {};
+  if (shouldBreakout) {
+    var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
+        mode: node.attrs.layout,
+        widthStateWidth: widthState.width,
+        widthStateLineLength: widthState.lineLength
+      }),
+      type = _calculateBreakoutSty.type,
+      breakoutStyles = (0, _objectWithoutProperties2.default)(_calculateBreakoutSty, _excluded);
+    newContentStyles = _objectSpread({}, breakoutStyles);
+    customContainerStyles = breakoutStyles;
+  }
+  newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
+  return (0, _react2.jsx)("div", {
+    ref: handleRef,
+    "data-layout": node.attrs.layout,
+    className: classNames,
+    css: _styles2.wrapperStyle,
+    style: customContainerStyles
+  }, (0, _react2.jsx)("div", {
+    className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
+  }, (0, _react2.jsx)("div", {
+    css: _styles.overlay,
+    className: "extension-overlay"
+  }), (0, _react2.jsx)("div", {
+    css: _styles2.header,
+    contentEditable: false,
+    className: headerClassNames
+  }, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
+    node: node
+  }), children), hasBody && (0, _react2.jsx)("div", {
+    css: newContentStyles
+  }, (0, _react2.jsx)("div", {
+    css: _styles2.content,
+    ref: handleContentDOMRef,
+    className: "extension-content block"
+  }))));
+}
+var Extension = function Extension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? (0, _react2.jsx)(ExtensionDeprecated, props) : (0, _react2.jsx)(ExtensionWithSharedState, props);
+};
+var ExtensionWithSharedState = function ExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
+    widthState: widthState
+  }, props));
+};
+
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var ExtensionDeprecated = function ExtensionDeprecated(props) {
+  return (0, _react2.jsx)(_withPluginState.WithPluginState, {
+    editorView: props.view,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: function render(_ref) {
+      var widthState = _ref.widthState;
+      return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
+        widthState: widthState
+      }, props));
+    }
+  });
+};
+/**
+ * End workaround
+ */
+var _default = exports.default = (0, _ui.overflowShadow)(Extension, {
+  overflowSelector: '.extension-overflow-wrapper'
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyle = exports.widerLayoutClassName = exports.header = exports.contentWrapper = exports.content = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _styles = require("../styles");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var widerLayoutClassName = exports.widerLayoutClassName = 'wider-layout';
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  &.without-frame {\n    background: transparent;\n  }\n  cursor: pointer;\n  width: 100%;\n\n  .extension-overflow-wrapper:not(.with-body) {\n    overflow-x: auto;\n  }\n"])), _styles.wrapperDefault);
+var header = exports.header = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0px;\n  vertical-align: middle;\n\n  &.with-children:not(.without-frame) {\n    padding: ", " ", "\n      ", ";\n  }\n  &.without-frame {\n    padding: 0;\n  }\n"])), _styles.padding / 2, _styles.padding / 2, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+var content = exports.content = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  cursor: initial;\n  width: 100%;\n"])), _styles.padding, "var(--ds-surface, white)", "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border-radius, 3px)");
+var contentWrapper = exports.contentWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px ", "px;\n  display: flex;\n  justify-content: center;\n"])), _styles.padding, _styles.padding);

package/dist/cjs/extensibility/Extension/InlineExtension/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _Lozenge = _interopRequireDefault(require("../Lozenge"));
+var _styles = require("../styles");
+var _styles2 = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 InlineExtension = exports.default = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(InlineExtension, _Component);
+  var _super = _createSuper(InlineExtension);
+  function InlineExtension() {
+    (0, _classCallCheck2.default)(this, InlineExtension);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(InlineExtension, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        node = _this$props.node,
+        children = _this$props.children;
+      var hasChildren = !!children;
+      var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
+      return (0, _react2.jsx)("div", {
+        css: _styles2.wrapperStyle,
+        className: "extension-container inline ".concat(className)
+      }, (0, _react2.jsx)("div", {
+        css: _styles.overlay,
+        className: "extension-overlay"
+      }), children ? children : (0, _react2.jsx)(_Lozenge.default, {
+        node: node
+      }));
+    }
+  }]);
+  return InlineExtension;
+}(_react.Component);

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyle = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _styles = require("../styles");
+var _templateObject;
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.capitalizeFirstLetter = exports.ICON_SIZE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _react = require("react");
+var _react2 = require("@emotion/react");
+var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
+var _utils = require("../../utils");
+var _styles = require("./styles");
+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) { (0, _defineProperty2.default)(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 = (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 capitalizeFirstLetter = exports.capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var ICON_SIZE = exports.ICON_SIZE = 24;
+var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ExtensionLozenge, _Component);
+  var _super = _createSuper(ExtensionLozenge);
+  function ExtensionLozenge() {
+    (0, _classCallCheck2.default)(this, ExtensionLozenge);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(ExtensionLozenge, [{
+    key: "render",
+    value: function render() {
+      var node = this.props.node;
+      var imageData = (0, _utils.getExtensionLozengeData)({
+        node: node,
+        type: 'image'
+      });
+      if (imageData && node.type.name !== 'extension') {
+        return this.renderImage(imageData);
+      }
+      var iconData = (0, _utils.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 = (0, _objectWithoutProperties2.default)(lozengeData, _excluded);
+      return (0, _react2.jsx)("img", (0, _extends2.default)({
+        css: _styles.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 (0, _react2.jsx)("div", {
+        "data-testid": "lozenge-fallback",
+        css: _styles.placeholderFallback
+      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
+        height: ICON_SIZE,
+        width: ICON_SIZE
+      }, lozengeData)) : (0, _react2.jsx)(_file.default, {
+        label: title
+      }), (0, _react2.jsx)("span", {
+        className: "extension-title"
+      }, capitalizeFirstLetter(title)), params && !isBlockExtension && (0, _react2.jsx)("span", {
+        css: _styles.placeholderFallbackParams
+      }, Object.keys(params).map(function (key) {
+        return key && " | ".concat(key, " = ").concat(params[key].value);
+      })));
+    }
+  }]);
+  return ExtensionLozenge;
+}(_react.Component);